@gera2ld/jsx-dom

@gera2ld/jsx-dom

Use JSX for HTML/SVG elements.

Why virtual DOM?

v1.x does not have virtual DOM, as a result all elements are mounted immediately and we can hardly decide if an element is or is not part of an SVG.

v2.x introduces virtual DOM so that we can decide namespace of each node based on its parent.

However if you do not need SVG support and expect simple usage as before, just set pragma/jsxFactory to JSX.hm instead of JSX.h.

Usage

$ yarn add @gera2ld/jsx-dom
# ESLint
$ yarn add eslint-plugin-react -D

import { mountDom } from '@gera2ld/jsx-dom';

// Create vdom
const vdom = <div>hello</div>;
// Mount as DOM element
const dom = mountDom(vdom);

// Attach to document
document.body.appendChild(dom);

// .eslintrc.js
module.exports = {
  plugins: [
    // ...
    'react',
  ],
  rules: {
    // ...
    'react/jsx-uses-react': 'error',
  },
};

You may also need @babe/preset-react or @babel/plugin-transform-react-jsx to transform JSX with either automatic runtime or classic runtime. See below for Babel configuration for different runtimes, tsconfig.json/jsconfig.json is also recommended to provide better type definitions.

Automatic runtime

When using automatic runtime with Babel, you don't need to import any extra helpers.

// .babelrc
{
  // ...
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      { "runtime": "automatic", "importSource": "@gera2ld/jsx-dom" }
    ]
  ],
}

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@gera2ld/jsx-dom",
  }
}

Classic runtime

Another option is to use classic runtime. Note that you need import JSX from '@gera2ld/jsx-dom' whereever JSX is used.

// .babelrc
{
  // ...
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "runtime": "classic",
        "pragma": "JSX.h",
        "pragmaFrag": "JSX.Fragment"
      }
    ],
  ],
}

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "JSX.h",
    "jsxFragmentFactory": "JSX.Fragment",
  }
}

If you don't need SVG support and want to omit mountDom, just replace JSX.h with JSX.hm:

// pragma/jsxFactory set to "JSX.hm"

document.body.append(<div>hello</div>);

Type Declaration

import { VNode, DomNode } from '@gera2ld/jsx-dom';

declare global {
  namespace JSX {
    type Element = VNode; // use `DomNode` instead if you want to omit `mountDom` and set pragma to `JSX.hm`
  }
}