rolldown-plugin-dom-expressions-jsx-compiler

rolldown-plugin-dom-expressions-jsx-compiler is a plugin library for Rolldown that transforms JSX and TSX into regular JavaScript.

This plugin uses @dom-expressions/jsx-compiler under the hood, which is also used in vite-plugin-solid when in native mode.

It exports two factories:

• jsx is renderer-agnostic and requires a moduleName.
• solid applies the Solid 2 defaults for @solidjs/web.

How to use

Install rolldown-plugin-dom-expressions-jsx-compiler

The first command installs the generic plugin. Install solid-js and @solidjs/web only when using solid().

npm

npm install -D rolldown rolldown-plugin-dom-expressions-jsx-compiler
npm install solid-js@next @solidjs/web@next # When targeting Solid.js

yarn

yarn add -D rolldown rolldown-plugin-dom-expressions-jsx-compiler
yarn add solid-js@next @solidjs/web@next # When targeting Solid.js

pnpm

pnpm add -D rolldown rolldown-plugin-dom-expressions-jsx-compiler
pnpm add solid-js@next @solidjs/web@next # When targeting Solid.js

bun

bun add -D rolldown rolldown-plugin-dom-expressions-jsx-compiler
bun add solid-js@next @solidjs/web@next # When targeting Solid.js

deno

deno add --dev npm:rolldown npm:rolldown-plugin-dom-expressions-jsx-compiler
deno add npm:solid-js@next npm:@solidjs/web@next # When targeting Solid.js

vp

vp add -D rolldown rolldown-plugin-dom-expressions-jsx-compiler
vp add solid-js@next @solidjs/web@next # When targeting Solid.js

nub

nub add -D rolldown rolldown-plugin-dom-expressions-jsx-compiler
nub add solid-js@next @solidjs/web@next # When targeting Solid.js

Basic config for Solid.js

import { defineConfig } from "rolldown";
import { solid } from "rolldown-plugin-dom-expressions-jsx-compiler";

export default defineConfig({
  input: "src/App.tsx",
  plugins: [solid()],
  output: { sourcemap: true },
});

Basic config for a custom renderer

import { defineConfig } from "rolldown";
import jsx from "rolldown-plugin-dom-expressions-jsx-compiler";

export default defineConfig({
  input: "src/App.tsx",
  plugins: [jsx({ jsx: { generate: "universal", moduleName: "my-renderer" } })],
  output: { sourcemap: true },
});

API

jsx(options?: JsxPluginOptions)
solid(options?: JsxPluginOptions)

JsxPluginOptions supports include, exclude, and jsx. The jsx field accepts native compiler options except plugin-owned filename and sourceMap.

solid() applies its preset first, then shallowly applies options.jsx. Array options such as builtIns replace the preset array.

Compiler modes

// Universal renderer
jsx({ jsx: { generate: "universal", moduleName: "my-renderer" } });

// SSR renderer
jsx({ jsx: { generate: "ssr", moduleName: "my-renderer/server" } });

// Dynamic renderer with selected DOM elements
jsx({
  jsx: {
    generate: "dynamic",
    moduleName: "my-renderer",
    renderers: [
      {
        name: "dom",
        moduleName: "@solidjs/web",
        elements: ["article", "button", "div"],
      },
    ],
  },
});

// Solid SSR
solid({ jsx: { generate: "ssr", hydratable: true } });

Component integration tests

packages/component-tests is an independent consumer package. It imports the built plugin by package name and compiles real multi-file component graphs through Rolldown.

The suite covers Solid DOM, generic universal/SSR/dynamic modes, @solidjs/universal custom renderers, and @solidjs/h coexistence. It verifies generated imports, mode-specific output, TypeScript removal, and source maps without executing a renderer.

vp run --filter ./packages/component-tests check
vp run --filter ./packages/component-tests test

Development

vite plus and bun are required.

vp install
vp run check
vp run test
vp run build