Write snabbdom templates in .jsx or .tsx (JSX for TypeScript)
npm install 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.
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 = (
is css selector shorthand,
is same as
/}$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 = (
![]()
{[user.firstName, user.lastName].join(' ')}
);
`$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
$3
snabbdom-jsx-lite's jsx` function is optimized for performance.See perf.spec.tsx.
These notable third party modules support an optional flattened flavor of jsx.