Numerous Panicky Mimes

    snabbdom-jsx-lite
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    snabbdom-jsx-lite

    Build NPM version

    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.

    Use jsxFragmentFactory compiler option with Typescript available after version 4.0.0.

    {
      "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "jsx",
        "jsxFragmentFactory": "null"
      }
    }
    import {jsx} from 'snabbdom-jsx-lite';
    
    const render = () => (
      <>
        <img sel=".profile" attrs={{src: 'avatar.png'}} />
        <h3>{[user.firstName, user.lastName].join(' ')}</h3>
      </>
    );

    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

    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

    Third party JSX modules

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

    Install

    npm i snabbdom-jsx-lite

    DownloadsWeekly Downloads

    192

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    19.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • tdumitrescu
    • ryanhirsch
    • nojvek