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 h 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"
  }
}

NOTE: jsxFragmentFactory compiler option is still being worked on in Typescript. See Typescript PR #35392

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>
);

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 as performant as snabbdom's h function. It avoids expensive string manipulation like other snabbdom-jsx libraries.

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