Skip to content

v0.2.1 - createState

Compare
Choose a tag to compare
@ayushmanchhabra ayushmanchhabra released this 20 Feb 19:28
· 635 commits to main since this release

The createState function manages state changes to DOM nodes. Here's an example of a counter:

import { createElement, createState } from 'transform-jsx'

const Counter = () => {
    let [count, setCount] = createState(0)

    return (
        <div>
            <button onClick={() => setCount(count().value as number - 1)}>-</button>
            <span id={count().key}>{count().value}</span>
            <button onClick={() => setCount(count().value as number + 1)}>+</button>
        </div>
    )
}

A unique key is generated and attached to the id. This id is referenced by setCount when making a state change. If a state change is made and the value is not attached to a DOM element then an error is thrown.

TL;DR: createState is one massive sugar function. Instead of doing

const element = document.getElementById('some-random-id');
element.innerText = 'some value';

We're using the familiar getter setter value pattern/paradigm.

Also added support for JSS.

Full Changelog: v0.1.1...v0.2.1