v0.6.0

What's Changed

• feat(api): pass State function into createEffect and createElement by @ayushmXn in #19

Full Changelog: v0.5.0...v0.6.0

v0.5.0 - createEffect

The createEffect function is a way to manage side effects. It uses the MutationObserver API internally. The dependency array accepts a string of ids corresponding to their DOM element(s).

If the dependency array is empty, the callback runs only once (since the app is rendered only once).

createEffect(() => {
  console.log("Hello, World!");
}, [])

If the dependency array is not empty, the callback runs every time there is a change in a corresponding element or child of an element.

...

const [count, setCount] = createState(0);

createEffect(() => {
  console.log("Update value of count: ", count().value);
}, [count().key])

...

Full Changelog: v0.4.0...v0.5.0

v0.4.0 - vsx

What's Changed

• chore(cd): add cd configuration by @ayushmXn in #15
• Renamed package to vsx and changed imports by @ayushmXn

// Before v0.4.0
import { createElement, createFragment, createState } from "transform-jsx";

// After v0.4.0
import VSX, { createState } from "vsx";

Don't forget to change the jsxFactory to VSX.createElement and jsxFragmentFactory to VSX.createFragment.

Full Changelog: v0.3.2...v0.4.0

v0.3.2

What's Changed

• fix(release): upload /dist directory to npm

Full Changelog: v0.3.0...v0.3.2

v0.3.0 - createFragment

Here's a really good and concise explanation of why the JSX fragment is useful:

https://mariusschulz.com/blog/jsx-fragment-syntax-in-typescript

createFragment returns a DocumentFragment. The package is now ESM first.

What's Changed

• chore(types): remove all any types by @ayushmXn in #9
• chore(cicd): Setup CI by @ayushmXn in #10
• feat(template): add createFragment function by @ayushmXn in #12

Full Changelog: v0.2.1...v0.3.0

v0.2.1 - createState

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

v0.1.1 - syntactic sugar

User defined JSX components are now also treated as JSX in comparison to just functions. This is possible because the createElement function argument tag is now a string or function type. Every time tag is a function type, the function that is the user defined component with the createElement applied is called (basically syntactic sugar).

Here's an example:

Before, a user defined JSX component would be treated as a function and called like so:

const A = () => <div>A</div>

const B = () => {
    return
    (
        <div>
            {A()}
        </div>
    )
}

Now, the user defined JSX component is treated like a JSX element but is called like function via createElement.

const A = () => <div>A</div>

const B = () => {
    return
    (
        <div>
            <A />
        </div>
    )
}

To clarify, the component can be called via a function call.

Full Changelog: v0.1.0...v0.1.1

v0.1.0 - createElement

The createElement function transforms JSX elements into DOM elements. In the demo (under /test/demo), the TypeScript compiler had been used but this is also possible using Babel.

Currently, nested HTML and JSX elements can be written with support for event attributes. One difference is that custom components are called a bit differently. Here's an example:

const A = () => <div>A</div>

const B = () => {
    return
    (
        <div>
            {A()}
        </div>
    )
}

This atypical syntax is because A is just a pure function which returns an HTML element.

The next few releases will be focused on improving the JSX template system after which the focus will be on styling and reactivity.