snabbdom-jsx-lite


Write snabbdom templates in .tsx with Typescript or via Babel in .jsx files.

JSX is an XML-like syntax extension to JavaScript (ECMAScript).

Typescript support for JSX supports embedding, type checking,
and compiling JSX directly to JavaScript.

Instead of using snabbdom's h (hyperscript function h(tag, data, children)) to define the virtual tree,
with snabbdom-jsx-lite, you get an similar jsx function that is JSX compatible with Babel and Typescript.

Top level props can be any of the the initialized snabbdom modules
such as class, attrs, props, on, style, hooks e.t.c.

$3

Install: yarn add snabbdom-jsx-lite

tsconfig.json

``json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "jsx"
}
}
`

profile.tsx

`tsx
import {jsx} from 'snabbdom-jsx-lite';

const profile = (



);
`

$3

Install: yarn add snabbdom-jsx-lite @babel/plugin-transform-react-jsx

.babelrc

`json
{
"plugins": [
[
"@babel/plugin-transform-react-jsx",
{
"pragma": "jsx",
"pragmaFrag": "Frag"
}
]
]
}
`

profile.jsx

`jsx
import {jsx} from 'snabbdom-jsx-lite';

const profile = (



);
`

$3

Fragments let you group a list of children without adding extra nodes to the DOM.

Use jsxFragmentFactory compiler option with Typescript available after version 4.0.0.

`json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "jsx",
"jsxFragmentFactory": "null"
}
}
`

`jsx
import {jsx} from 'snabbdom-jsx-lite';

const render = () => (
<>



{[user.firstName, user.lastName].join(' ')}



);
`

Example & Demo

A Clock App example is in provided in the repo that uses Functional Components and Fragments.
See example/app.tsx

Demo is available at nojvek.github.io/snabbdom-jsx-lite

!snabbdom-jsx-lite demo

$3

snabbdom-jsx-lite's jsx` function is optimized for performance.
It avoids expensive string manipulation like other snabbdom-jsx libraries.
We test that a million vnodes can be created within 200ms on a github actions virtual core (~2GHz).

See perf.spec.tsx.

$3

- TSX Clock
- TSX Clock source

$3

These notable third party modules support an optional flattened flavor of jsx.

- snabbdom-pragma
- snabbdom-jsx