@maxchang/jsx-dom

A browser and userscript-friendly repackaging of alex-kinokon/jsx-dom.

What is jsx-dom?

A lightweight wrapper around document.createElement that lets you create DOM elements using JSX syntax, eliminating tedious imperative code. Particularly valuable for userscripts that need to dynamically generate DOM elements.

Features

• UMD Support: Allows loading directly from a CDN in userscripts via @require.
• ESM Retained: Keeps the ESM build for benefits like HMR and optional bundling.
  • Improves DX, especially for projects using vite-plugin-monkey.

Installation

pnpm add @maxchang/jsx-dom

yarn add @maxchang/jsx-dom

npm install @maxchang/jsx-dom

Usage

See userscript-tsx-starter for a complete example of using vite-plugin-monkey with @maxchang/jsx-dom.

Reference jsx-dom.

// tsconfig.json
{
  "jsx": "preserve",
  "jsxImportSource": "@maxchang/jsx-dom",
}

// esbuild
{
  jsxInject: `import React from "@maxchang/jsx-dom"`,
  jsx: 'transform',
}

// vite.config.js
{
    plugins: [
        monkey({
          //...
            build: {
                externalGlobals: {
                    '@maxchang/jsx-dom': cdn.jsdelivrFastly(`jsxDOM.default`, `dist/index.js`),
                },
            },
        }),
    ],
}

Why Not ...?

• alex-kinokon's jsx-dom
  • No UMD support, only ESM. Cannot be used in userscripts via @require a CDN.
• violentmonkey's vm-dom
  • Based on @gera2ld/jsx-dom, which is not actively maintained.
  • Do not have type definitions for jsx-runtime.

License

This project is licensed under the BSD 3-Clause License, the same as jsx-dom.

See LICENSE for details.