State Management

Ink provides several ways to manage properties and states in your components.

Props

import { props } from '@stackpress/ink'; const { title, description } = props();

The props function can be used to access the properties of a component.

Signals

Ink provides a reactive state management system that allows you to manage states in your components. The system is based on signals, which are reactive variables that can be used to store and update data. Signals can be used to store any type of data, including numbers, strings, objects, arrays, and even functions.
<script> import { signal } from '@stackpress/ink'; const count = signal<number>(1); </script> <em class=classlist>Count #{count.value}</em>

To create a signal, you can use the signal() function, which takes an initial value as an argument. Signals can be read and updated using the value property. Setting the value will trigger a re-render of the component.

Signals can be used in your components to manage states and trigger updates when the state changes. You can use signals to store data that needs to be shared between components, or to trigger side effects when the state changes. Signals can also be used to store data that needs to be persisted across page reloads, such as form data or user preferences.

Events

<script> import { signal } from '@stackpress/ink'; const count = signal<number>(1); const add = e => count.value++; </script> <button click=add>{count.value}</button> <button dblclick=add>{count.value}</button> <button mousedown=add>{count.value}</button> <button mouseup=add>{count.value}</button> <button mousemove=add>{count.value}</button> <button mouseover=add>{count.value}</button> <button mouseout=add>{count.value}</button> <button wheel=add>{count.value}</button> <button keydown=add>{count.value}</button> <button keypress=add>{count.value}</button> <button keyup=add>{count.value}</button>

For example, you can use the click attribute assigned to a function to trigger a function when the element is clicked. In combination with updating a signal, can trigger a re-render of the component. The following event attributes are supported.

Mouse Events

  • click
  • dblclick
  • mousedown
  • mouseup
  • mousemove
  • mouseover
  • mouseout
  • wheel

Keyboard Events

  • keydown
  • keypress
  • keyup

Form Events

  • blur
  • change
  • contextmenu
  • focus
  • input
  • submit
  • invalid
  • reset
  • search
  • select

Clipboard Events

  • copy
  • cut
  • paste

Transition Events

  • transitionend

Drag Events

  • drag
  • dragstart
  • dragend
  • dragover
  • dragenter
  • dragleave
  • drop
  • scroll

Media Events

  • durationchange
  • ended
  • error
  • loadeddata
  • loadedmetadata
  • loadstart
  • pause
  • play
  • playing
  • progress
  • ratechange
  • seeked
  • seeking
  • stalled
  • suspend
  • timeupdate
  • volumechange
  • waiting

Animation Events

  • animationstart
  • animationend
  • animationiteration

Class Names

import { classnames } from '@stackpress/ink'; const classlist = classnames(); //--> 'class1 class2 class3'

The classnames function can be used to generate a list of class names based on the properties of an object.

Children

import { children } from '@stackpress/ink'; const childlist = children(); //--> Node[]

The children function can be used to render child components in a parent component.

Component

import { component } from '@stackpress/ink'; const button = component(); //--> HTMLElement console.log(button.querySelector('span'));

For other edge cases, the component function can be used to get raw access to the component's functionality.

Environment Variables

<script> import { env } from '@stackpress/ink'; const { BUILD_ID, NODE_ENV } = env(); </script> <if true={NODE_ENV === 'development'}> <p>Development mode</p> </if>

The env function can be used to access environment variables in a component.

this

What's this
<script> this.props; this.style; this.classList; this.parentNode; this.innerHTML; this.appendChild(); this.querySelector('p'); </script>

this refers to the InkComponent that extends HTMLElement. This means all components in Ink are in fact are HTML elements and has access to the common functionality like innerHTML and querySelector() to name a few. InkComponent has the additional following properties and methods that you can access using this.

API: InkComponent

Property Returns Description
attr Hash

Returns only the valid HTML tag attributes (string and true).

Example
this.attr; //--> { disabled: true, type: 'button' }
props Hash

Returns all the attributes assigned to the component.

Example
this.props; //--> { disabled: true, count: 4, click: handleClick }
metadata [ string, string ]

Returns the tag and class name of the component.

Example
this.metadata; //--> [ 'fancy-button', 'FancyButton_abc123' ]
styles( ) string

Returns the css styles used in the component.

Example
this.styles(); //css styles
template( ) Node[]

Returns a function that returns an array of elements, text nodes and web components

Example
this.template(); //--> () => [ Element, Text, Element, ... ]
render( ) string

Renders the children and returns the final HTML markup.

Example
this.render(); //--> '<p>...</p>'
Info: You can discover more methods and properties of the HTMLElement class on the MDN Web Docs .