@gera2ld/jsx-dom

@gera2ld/jsx-dom

Use JSX for HTML/SVG elements.

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