snabbdom-jsx-lite

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.

JSX with Typescript

Install: yarn add snabbdom-jsx-lite

tsconfig.json

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

profile.tsx

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

const profile = (
  <div>
    {/* `sel` is css selector shorthand, <img sel=".profile" /> is same as <img class={profile: true} /> */}
    <img sel=".profile" attrs={{src: 'avatar.png'}} />
    <h3>{[user.firstName, user.lastName].join(' ')}</h3>
  </div>
);

JSX with Babel

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

.babelrc

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

profile.jsx

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

const profile = (
  <div>
    <img sel=".profile" attrs={{src: 'avatar.png'}} />
    <h3>{[user.firstName, user.lastName].join(' ')}</h3>
  </div>
);

JSX Fragments

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

NOTE: jsxFragmentFactory compiler option is still being worked on in Typescript which would allow using <> syntax. See Typescript PR #38720.

For the time being use <Fragment> instead.

import {jsx, Fragment} from 'snabbdom-jsx-lite';

const render = () => (
  <Fragment>
    <img sel=".profile" attrs={{src: 'avatar.png'}} />
    <h3>{[user.firstName, user.lastName].join(' ')}</h3>
  </Fragment>
);

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

Performance

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.

JSX examples

• TSX Clock
• TSX Clock source

Third party JSX modules

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

• snabbdom-pragma
• snabbdom-jsx