vite-plugin-mithril-jsx

Vite plugin that configures JSX for Mithril.js — works with all Vite versions, automatically adapting to the underlying transformer (esbuild or rolldown/OXC).

| Vite version | Transformer | Config applied | |---|---|---| | ≤ 5 | esbuild | esbuild.jsxFactory / esbuild.jsxFragment | | 6 | esbuild (or rolldown experimental) | both configs | | 7+ | rolldown / OXC | oxc.jsx + optimizeDeps.rolldownOptions |

Installation

npm install -D vite-plugin-mithril-jsx

Usage

// vite.config.ts
import { defineConfig } from 'vite';
import mithrilJsx from 'vite-plugin-mithril-jsx';

export default defineConfig({
  plugins: [mithrilJsx()],
});

That's it. No esbuild, oxc, or optimizeDeps blocks needed — the plugin injects the right config for your Vite version.

Options

mithrilJsx({
  pragma:       'm',     // JSX factory   (default: 'm')
  pragmaFrag:   'mFrag', // JSX fragment  (default: 'mFrag')
  jsExtensions: true,    // parse JSX in .js / .ts files (default: false)
})

| Option | Type | Default | Description | |---|---|---|---| | pragma | string | 'm' | JSX factory — must be a global or import available in every JSX file | | pragmaFrag | string | 'mFrag' | JSX fragment identifier — automatically resolved to '[' by the plugin via define | | jsExtensions | boolean | false | When true, enables JSX parsing in .js and .ts files in addition to .jsx / .tsx |

jsExtensions

By default, transformers only parse JSX in files whose extension signals it (.jsx, .tsx). Set jsExtensions: true if your project uses plain .js files that contain JSX syntax.

The plugin configures the right option per Vite version automatically:

| Vite | What gets set | |---|---| | ≤ 6 (esbuild) | esbuild.include: /\.[jt]sx?$/ | | 7+ (OXC) | oxc.include: /\.[jt]sx?$/ | | 6+ (rolldown pre-bundler) | optimizeDeps.rolldownOptions.moduleTypes: { '.js': 'jsx', '.ts': 'tsx' } |

Prerequisites

The JSX factory (m) must be available in every file that uses JSX — either as an import or a global:

// Option A — import in each file (recommended)
import m from 'mithril';

// Option B — set once in your entry point
import m from 'mithril';
globalThis.m = m;

Fragment setup is automatic. The plugin injects define: { mFrag: '"["' } into the Vite config, so mFrag resolves to Mithril's '[' fragment selector at compile time. No entry-file boilerplate needed.

Example

import m from 'mithril';

export default function HelloWorld() {
  return (
    <>
      <h1>Hello, Mithril!</h1>
      <p>JSX works with no React in sight.</p>
    </>
  );
}

Compiles to:

export default function HelloWorld() {
  return m('[',
    m('h1', 'Hello, Mithril!'),
    m('p', 'JSX works with no React in sight.')
  );
}

License

MIT © Dominic Jean