@knighted/jsx 1.1.0 → 1.2.0-rc.1

package/README.md

@@ -4,7 +4,23 @@
 [![codecov](https://codecov.io/gh/knightedcodemonkey/jsx/graph/badge.svg?token=tjxuFwcwkr)](https://codecov.io/gh/knightedcodemonkey/jsx)
 [![NPM version](https://img.shields.io/npm/v/@knighted/jsx.svg)](https://www.npmjs.com/package/@knighted/jsx)
 
-A runtime JSX template tag backed by the [`oxc-parser`](https://github.com/oxc-project/oxc) WebAssembly build. Use real JSX syntax directly inside template literals and turn the result into live DOM nodes (or values returned from your own components) without running a bundler.
+A runtime JSX template tag backed by the [`oxc-parser`](https://github.com/oxc-project/oxc) WebAssembly build. Use real JSX syntax directly inside template literals and turn the result into live DOM nodes (or values returned from your own components) without running a bundler. One syntax works everywhere—browser scripts, SSR utilities, and bundler pipelines—no separate transpilation step required.
+
+## Key features
+
+- **Parse true JSX with no build step** – template literals go through `oxc-parser`, so fragments, spreads, and SVG namespaces all work as expected.
+- **DOM + React runtimes** – choose `jsx` for DOM nodes or `reactJsx` for React elements, and mix them freely (even on the server).
+- **Loader + SSR support** – ship tagged templates through Webpack/Rspack, Next.js, or plain Node by using the loader and the `@knighted/jsx/node` entry.
+
+## Quick links
+
+- [Usage](#usage)
+- [React runtime](#react-runtime-reactjsx)
+- [Loader integration](#loader-integration)
+- [Node / SSR usage](#node--ssr-usage)
+- [Next.js integration](#nextjs-integration)
+- [Browser usage](#browser-usage)
+- [Testing & demos](#testing)
 
 ## Installation
 
@@ -15,6 +31,9 @@ npm install @knighted/jsx
 > [!IMPORTANT]
 > This package is ESM-only and targets browsers or ESM-aware bundlers. `require()` is not supported; use native `import`/`<script type="module">` and a DOM-like environment.
 
+> [!NOTE]
+> Planning to use the React runtime (`@knighted/jsx/react`)? Install `react@>=18` and `react-dom@>=18` alongside this package so the helper can create elements and render them through ReactDOM.
+
 The parser automatically uses native bindings when it runs in Node.js. To enable the WASM binding for browser builds you also need the `@oxc-parser/binding-wasm32-wasi` package. Because npm enforces the `cpu: ["wasm32"]` flag you must opt into the install explicitly:
 
 ```sh
@@ -29,8 +48,11 @@ npm_config_ignore_platform=true npm install @oxc-parser/binding-wasm32-wasi
 ```ts
 import { jsx } from '@knighted/jsx'
 
-const count = 3
-const handleClick = () => console.log('clicked!')
+let count = 3
+const handleClick = () => {
+  count += 1
+  console.log(`Count is now ${count}`)
+}
 
 const button = jsx`
   <button className={${`counter-${count}`}} onClick={${handleClick}}>
@@ -41,9 +63,37 @@ const button = jsx`
 document.body.append(button)
 ```
 
+### React runtime (`reactJsx`)
+
+Need to compose React elements instead of DOM nodes? Import the dedicated helper from the `@knighted/jsx/react` subpath (React 18+ and `react-dom` are still required to mount the tree):
+
+```ts
+import { useState } from 'react'
+import { reactJsx } from '@knighted/jsx/react'
+import { createRoot } from 'react-dom/client'
+
+const App = () => {
+  const [count, setCount] = useState(0)
+
+  return reactJsx`
+    <section className="react-demo">
+      <h2>Hello from React</h2>
+      <p>Count is {${count}}</p>
+      <button onClick={${() => setCount(value => value + 1)}}>
+        Increment
+      </button>
+    </section>
+  `
+}
+
+createRoot(document.getElementById('root')!).render(reactJsx`<${App} />`)
+```
+
+The React runtime shares the same template semantics as `jsx`, except it returns React elements (via `React.createElement`) so you can embed other React components with `<${MyComponent} />` and use hooks/state as usual. The helper lives in a separate subpath so DOM-only consumers never pay the React dependency cost.
+
 ## Loader integration
 
-Use the published loader entry (`@knighted/jsx/loader`) when you want your bundler to rewrite tagged template literals at build time. The loader finds every `jsx\`…\`` invocation, rebuilds the template with real JSX semantics, and hands back transformed source that can run in any environment.
+Use the published loader entry (`@knighted/jsx/loader`) when you want your bundler to rewrite tagged template literals at build time. The loader finds every ` jsx`` ` (and, by default, ` reactJsx`` ` ) invocation, rebuilds the template with real JSX semantics, and hands back transformed source that can run in any environment.
 
 ```js
 // rspack.config.js / webpack.config.js
@@ -57,8 +107,9 @@ export default {
           {
             loader: '@knighted/jsx/loader',
             options: {
-              // Optional: rename the tagged template identifier (defaults to `jsx`).
-              tag: 'jsx',
+              // Both optional: restrict or rename the tagged templates.
+              // tag: 'jsx', // single-tag option
+              // tags: ['jsx', 'reactJsx'],
             },
           },
         ],
@@ -68,7 +119,134 @@ export default {
 }
 ```
 
-Pair the loader with your existing TypeScript/JSX transpiler (SWC, Babel, Rspack’s builtin loader, etc.) so regular React components and the tagged templates can live side by side. The demo fixture under `test/fixtures/rspack-app` shows a full setup that mixes Lit and React—run `npm run build`, `npm run setup:wasm`, and `npm run build:fixture`, then serve the folder to see the output in a browser.
+Pair the loader with your existing TypeScript/JSX transpiler (SWC, Babel, Rspack’s builtin loader, etc.) so regular React components and the tagged templates can live side by side. The demo fixture under `test/fixtures/rspack-app` shows a full setup that mixes Lit and React:
+
+```sh
+npm run build
+npm run setup:wasm
+npm run build:fixture
+```
+
+Then point a static server at the fixture root (which serves `index.html` and the bundled `dist/bundle.js`) to see it in a browser:
+
+```sh
+# Serve the rspack fixture from the repo root
+npx http-server test/fixtures/rspack-app -p 4173
+```
+
+Visit `http://localhost:4173` (or whichever port you pick) to interact with the Lit + React demo.
+
+## Node / SSR usage
+
+Import the dedicated Node entry (`@knighted/jsx/node`) when you want to run the template tag inside bare Node.js. It automatically bootstraps a DOM shim by loading either `linkedom` or `jsdom` (install one of them to opt in) and then re-exports the usual helpers so you can keep authoring JSX in the same way:
+
+```ts
+import { jsx } from '@knighted/jsx/node'
+import { reactJsx } from '@knighted/jsx/node/react'
+import { renderToString } from 'react-dom/server'
+
+const Badge = ({ label }: { label: string }) =>
+  reactJsx`
+    <button type="button">React says: {${label}}</button>
+  `
+
+const reactMarkup = renderToString(
+  reactJsx`
+    <${Badge} label={${'Server-only'}} />
+  `,
+)
+
+const shell = jsx`
+  <main>
+    <section dangerouslySetInnerHTML={${{ __html: reactMarkup }}}></section>
+  </main>
+`
+
+console.log(shell.outerHTML)
+```
+
+> [!NOTE]
+> The Node entry tries `linkedom` first and falls back to `jsdom`. Install whichever shim you prefer (both are optional peer dependencies) and, if needed, set `KNIGHTED_JSX_NODE_SHIM=jsdom` or `linkedom` to force a specific one.
+
+This repository ships a ready-to-run fixture under `test/fixtures/node-ssr` that uses the Node entry to render a Lit shell plus a React subtree through `ReactDOMServer.renderToString`. Run `npm run build` once to emit `dist/`, then execute `npm run demo:node-ssr` to log the generated markup.
+
+## Next.js integration
+
+> [!IMPORTANT]
+> Next already compiles `.tsx/.jsx` files, so you do not need this helper to author regular components. The loader only adds value when you want to reuse the tagged template runtime during SSR—mixing DOM nodes built by `jsx` with React markup, rendering shared utilities on the server, or processing tagged templates outside the usual component pipeline.
+
+Next (and Remix/other Webpack-based SSR stacks) can run the loader by adding a post-loader to the framework config so the template tags are rewritten after SWC/Babel transpilation. The fixture under `test/fixtures/next-app` ships a complete example that mixes DOM and React helpers during SSR so you can pre-render DOM snippets (for emails, HTML streams, CMS content, etc.) while still returning React components from your pages. The important bits live in `next.config.mjs`:
+
+```js
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const repoRoot = path.resolve(__dirname, '../../..')
+const distDir = path.join(repoRoot, 'dist')
+
+export default {
+  output: 'export',
+  webpack(config) {
+    config.resolve.alias = {
+      ...(config.resolve.alias ?? {}),
+      '@knighted/jsx': path.join(distDir, 'index.js'),
+      '@knighted/jsx/react': path.join(distDir, 'react/index.js'),
+    }
+
+    config.module.rules.push({
+      test: /\.[jt]sx?$/,
+      include: path.join(__dirname, 'pages'),
+      enforce: 'post',
+      use: [{ loader: path.join(distDir, 'loader/jsx.js') }],
+    })
+
+    return config
+  },
+}
+```
+
+Inside `pages/index.tsx` you can freely mix the helpers. The snippet below uses `jsx` on the server to prebuild a DOM fragment and then injects that HTML alongside a normal React component on the client:
+
+```ts
+import type { GetServerSideProps } from 'next'
+import { jsx } from '@knighted/jsx'
+import { reactJsx } from '@knighted/jsx/react'
+
+const buildDomShell = () =>
+  jsx`
+    <section data-kind="dom-runtime">
+      <h2>DOM runtime</h2>
+      <p>Rendered as static HTML on the server</p>
+    </section>
+  `
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  return {
+    props: {
+      domShell: buildDomShell().outerHTML,
+    },
+  }
+}
+
+const ReactBadge = () =>
+  reactJsx`
+    <button type="button">React badge</button>
+  `
+
+type PageProps = { domShell: string }
+
+export default function Page({ domShell }: PageProps) {
+  return reactJsx`
+    <main>
+      <${ReactBadge} />
+      <div dangerouslySetInnerHTML={${{ __html: domShell }}}></div>
+    </main>
+  `
+}
+```
+
+Build the fixture locally with `npx next build test/fixtures/next-app` (or run `npx vitest run test/next-fixture.test.ts`) to verify the integration end to end. You can adapt the same pattern in `app/` routes, API handlers, or server actions whenever you need DOM output generated by the tagged template runtime.
 
 ### Interpolations
 
@@ -188,7 +366,7 @@ Tradeoffs to keep in mind:
 - **Parser vs tokenizer** – `htm` performs lightweight string tokenization, while `@knighted/jsx` pays a higher one-time parse cost but gains the full JSX grammar (fragments, spread children, nested namespaces) without heuristics. For large or deeply nested templates the WASM-backed parser is typically faster and more accurate than string slicing.
 - **DOM-first rendering** – this runtime builds DOM nodes directly, so the cost after parsing is mostly attribute assignment and child insertion. `htm` usually feeds a virtual DOM/hyperscript factory (e.g., Preact’s `h`), which may add an extra abstraction layer before hitting the DOM.
 - **Bundle size** – including the parser and WASM binding is heavier than `htm`’s ~1 kB tokenizer. If you just need hyperscript sugar, `htm` stays leaner; if you value real JSX semantics without a build step, the extra kilobytes buy you correctness and speed on complex trees.
-  - **Actual size** – the default `dist/jsx.js` bundle is ~13.9 kB raw / ~3.6 kB min+gzip, while the new `@knighted/jsx/lite` entry is ~5.7 kB raw / ~2.5 kB min+gzip. `htm` weighs in at roughly 0.7 kB min+gzip, so the lite entry narrows the gap to ~1.8 kB for production payloads.
+  - **Actual size** – as of `v1.2.0-rc.1` the default `dist/jsx.js` bundle is ~9.0 kB raw / ~2.3 kB min+gzip, while the `@knighted/jsx/lite` entry stays ~5.7 kB raw / ~2.5 kB min+gzip. `htm` weighs in at roughly 0.7 kB min+gzip, so the lite entry narrows the gap to ~1.8 kB for production payloads.
 
 In short, `@knighted/jsx` trades a slightly larger runtime for the ability to parse genuine JSX with native performance, whereas `htm` favors minimal footprint and hyperscript integration. Pick the tool that aligns with your rendering stack and performance envelope.
 

package/dist/cjs/jsx.cjs

@@ -2,57 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.jsx = void 0;
 const oxc_parser_1 = require("oxc-parser");
-const OPEN_TAG_RE = /<\s*$/;
-const CLOSE_TAG_RE = /<\/\s*$/;
-const PLACEHOLDER_PREFIX = '__KX_EXPR__';
-let invocationCounter = 0;
-const parserOptions = {
-    lang: 'jsx',
-    sourceType: 'module',
-    range: true,
-    preserveParens: true,
-};
+const shared_js_1 = require("./runtime/shared.cjs");
 const ensureDomAvailable = () => {
     if (typeof document === 'undefined' || typeof document.createElement !== 'function') {
         throw new Error('The jsx template tag requires a DOM-like environment (document missing).');
     }
 };
-const formatParserError = (error) => {
-    let message = `[oxc-parser] ${error.message}`;
-    if (error.labels?.length) {
-        const label = error.labels[0];
-        if (label.message) {
-            message += `\n${label.message}`;
-        }
-    }
-    if (error.codeframe) {
-        message += `\n${error.codeframe}`;
-    }
-    return message;
-};
-const extractRootNode = (program) => {
-    for (const statement of program.body) {
-        if (statement.type === 'ExpressionStatement') {
-            const expression = statement.expression;
-            if (expression.type === 'JSXElement' || expression.type === 'JSXFragment') {
-                return expression;
-            }
-        }
-    }
-    throw new Error('The jsx template must contain a single JSX element or fragment.');
-};
-const getIdentifierName = (identifier) => {
-    switch (identifier.type) {
-        case 'JSXIdentifier':
-            return identifier.name;
-        case 'JSXNamespacedName':
-            return `${identifier.namespace.name}:${identifier.name.name}`;
-        case 'JSXMemberExpression':
-            return `${getIdentifierName(identifier.object)}.${identifier.property.name}`;
-        default:
-            return '';
-    }
-};
 const isNodeLike = (value) => {
     if (typeof Node === 'undefined') {
         return false;
@@ -71,11 +26,6 @@ const isPromiseLike = (value) => {
     }
     return typeof value.then === 'function';
 };
-const normalizeJsxText = (value) => {
-    const collapsed = value.replace(/\r/g, '').replace(/\n\s+/g, ' ');
-    const trimmed = collapsed.trim();
-    return trimmed.length > 0 ? trimmed : '';
-};
 const setDomProp = (element, name, value) => {
     if (value === false || value === null || value === undefined) {
         return;
@@ -165,17 +115,18 @@ const appendChildValue = (parent, value) => {
     }
     parent.appendChild(document.createTextNode(String(value)));
 };
-const resolveAttributes = (attributes, ctx) => {
+const evaluateExpressionWithNamespace = (expression, ctx, namespace) => (0, shared_js_1.evaluateExpression)(expression, ctx, node => evaluateJsxNode(node, ctx, namespace));
+const resolveAttributes = (attributes, ctx, namespace) => {
     const props = {};
     attributes.forEach(attribute => {
         if (attribute.type === 'JSXSpreadAttribute') {
-            const spreadValue = evaluateExpression(attribute.argument, ctx);
+            const spreadValue = evaluateExpressionWithNamespace(attribute.argument, ctx, namespace);
             if (spreadValue && typeof spreadValue === 'object' && !Array.isArray(spreadValue)) {
                 Object.assign(props, spreadValue);
             }
             return;
         }
-        const name = getIdentifierName(attribute.name);
+        const name = (0, shared_js_1.getIdentifierName)(attribute.name);
         if (!attribute.value) {
             props[name] = true;
             return;
@@ -188,13 +139,13 @@ const resolveAttributes = (attributes, ctx) => {
             if (attribute.value.expression.type === 'JSXEmptyExpression') {
                 return;
             }
-            props[name] = evaluateExpression(attribute.value.expression, ctx);
+            props[name] = evaluateExpressionWithNamespace(attribute.value.expression, ctx, namespace);
         }
     });
     return props;
 };
-const applyDomAttributes = (element, attributes, ctx) => {
-    const props = resolveAttributes(attributes, ctx);
+const applyDomAttributes = (element, attributes, ctx, namespace) => {
+    const props = resolveAttributes(attributes, ctx, namespace);
     Object.entries(props).forEach(([name, value]) => {
         if (name === 'key') {
             return;
@@ -211,7 +162,7 @@ const evaluateJsxChildren = (children, ctx, namespace) => {
     children.forEach(child => {
         switch (child.type) {
             case 'JSXText': {
-                const text = normalizeJsxText(child.value);
+                const text = (0, shared_js_1.normalizeJsxText)(child.value);
                 if (text) {
                     resolved.push(text);
                 }
@@ -221,11 +172,11 @@ const evaluateJsxChildren = (children, ctx, namespace) => {
                 if (child.expression.type === 'JSXEmptyExpression') {
                     break;
                 }
-                resolved.push(evaluateExpression(child.expression, ctx));
+                resolved.push(evaluateExpressionWithNamespace(child.expression, ctx, namespace));
                 break;
             }
             case 'JSXSpreadChild': {
-                const spreadValue = evaluateExpression(child.expression, ctx);
+                const spreadValue = evaluateExpressionWithNamespace(child.expression, ctx, namespace);
                 if (spreadValue !== undefined && spreadValue !== null) {
                     resolved.push(spreadValue);
                 }
@@ -241,7 +192,7 @@ const evaluateJsxChildren = (children, ctx, namespace) => {
     return resolved;
 };
 const evaluateComponent = (element, ctx, component, namespace) => {
-    const props = resolveAttributes(element.openingElement.attributes, ctx);
+    const props = resolveAttributes(element.openingElement.attributes, ctx, namespace);
     const childValues = evaluateJsxChildren(element.children, ctx, namespace);
     if (childValues.length === 1) {
         props.children = childValues[0];
@@ -257,7 +208,7 @@ const evaluateComponent = (element, ctx, component, namespace) => {
 };
 const evaluateJsxElement = (element, ctx, namespace) => {
     const opening = element.openingElement;
-    const tagName = getIdentifierName(opening.name);
+    const tagName = (0, shared_js_1.getIdentifierName)(opening.name);
     const component = ctx.components.get(tagName);
     if (component) {
         return evaluateComponent(element, ctx, component, namespace);
@@ -270,7 +221,7 @@ const evaluateJsxElement = (element, ctx, namespace) => {
     const domElement = nextNamespace === 'svg'
         ? document.createElementNS('http://www.w3.org/2000/svg', tagName)
         : document.createElement(tagName);
-    applyDomAttributes(domElement, opening.attributes, ctx);
+    applyDomAttributes(domElement, opening.attributes, ctx, nextNamespace);
     const childValues = evaluateJsxChildren(element.children, ctx, childNamespace);
     childValues.forEach(value => appendChildValue(domElement, value));
     return domElement;
@@ -284,119 +235,14 @@ const evaluateJsxNode = (node, ctx, namespace) => {
     }
     return evaluateJsxElement(node, ctx, namespace);
 };
-const walkAst = (node, visitor) => {
-    if (!node || typeof node !== 'object') {
-        return;
-    }
-    const candidate = node;
-    if (typeof candidate.type !== 'string') {
-        return;
-    }
-    visitor(candidate);
-    Object.values(candidate).forEach(value => {
-        if (!value) {
-            return;
-        }
-        if (Array.isArray(value)) {
-            value.forEach(child => walkAst(child, visitor));
-            return;
-        }
-        if (typeof value === 'object') {
-            walkAst(value, visitor);
-        }
-    });
-};
-const collectPlaceholderNames = (expression, ctx) => {
-    const placeholders = new Set();
-    walkAst(expression, node => {
-        if (node.type === 'Identifier' && ctx.placeholders.has(node.name)) {
-            placeholders.add(node.name);
-        }
-    });
-    return Array.from(placeholders);
-};
-const evaluateExpression = (expression, ctx) => {
-    if (expression.type === 'JSXElement' || expression.type === 'JSXFragment') {
-        return evaluateJsxNode(expression, ctx, null);
-    }
-    if (!('range' in expression) || !expression.range) {
-        throw new Error('Unable to evaluate expression: missing source range information.');
-    }
-    const [start, end] = expression.range;
-    const source = ctx.source.slice(start, end);
-    const placeholders = collectPlaceholderNames(expression, ctx);
-    try {
-        const evaluator = new Function(...placeholders, `"use strict"; return (${source});`);
-        const args = placeholders.map(name => ctx.placeholders.get(name));
-        return evaluator(...args);
-    }
-    catch (error) {
-        throw new Error(`Failed to evaluate expression ${source}: ${error.message}`);
-    }
-};
-const sanitizeIdentifier = (value) => {
-    const cleaned = value.replace(/[^a-zA-Z0-9_$]/g, '');
-    if (!cleaned) {
-        return 'Component';
-    }
-    if (!/[A-Za-z_$]/.test(cleaned[0])) {
-        return `Component${cleaned}`;
-    }
-    return cleaned;
-};
-const ensureBinding = (value, bindings, bindingLookup) => {
-    const existing = bindingLookup.get(value);
-    if (existing) {
-        return existing;
-    }
-    const descriptor = value.displayName || value.name || `Component${bindings.length}`;
-    const baseName = sanitizeIdentifier(descriptor);
-    let candidate = baseName;
-    let suffix = 1;
-    while (bindings.some(binding => binding.name === candidate)) {
-        candidate = `${baseName}${suffix++}`;
-    }
-    const binding = { name: candidate, value };
-    bindings.push(binding);
-    bindingLookup.set(value, binding);
-    return binding;
-};
-const buildTemplate = (strings, values) => {
-    const raw = strings.raw ?? strings;
-    const placeholders = new Map();
-    const bindings = [];
-    const bindingLookup = new Map();
-    let source = raw[0] ?? '';
-    const templateId = invocationCounter++;
-    let placeholderIndex = 0;
-    for (let idx = 0; idx < values.length; idx++) {
-        const chunk = raw[idx] ?? '';
-        const nextChunk = raw[idx + 1] ?? '';
-        const value = values[idx];
-        const isTagNamePosition = OPEN_TAG_RE.test(chunk) || CLOSE_TAG_RE.test(chunk);
-        if (isTagNamePosition && typeof value === 'function') {
-            const binding = ensureBinding(value, bindings, bindingLookup);
-            source += binding.name + nextChunk;
-            continue;
-        }
-        if (isTagNamePosition && typeof value === 'string') {
-            source += value + nextChunk;
-            continue;
-        }
-        const placeholder = `${PLACEHOLDER_PREFIX}${templateId}_${placeholderIndex++}__`;
-        placeholders.set(placeholder, value);
-        source += placeholder + nextChunk;
-    }
-    return { source, placeholders, bindings };
-};
 const jsx = (templates, ...values) => {
     ensureDomAvailable();
-    const build = buildTemplate(templates, values);
-    const result = (0, oxc_parser_1.parseSync)('inline.jsx', build.source, parserOptions);
+    const build = (0, shared_js_1.buildTemplate)(templates, values);
+    const result = (0, oxc_parser_1.parseSync)('inline.jsx', build.source, shared_js_1.parserOptions);
     if (result.errors.length > 0) {
-        throw new Error(formatParserError(result.errors[0]));
+        throw new Error((0, shared_js_1.formatParserError)(result.errors[0]));
     }
-    const root = extractRootNode(result.program);
+    const root = (0, shared_js_1.extractRootNode)(result.program);
     const ctx = {
         source: build.source,
         placeholders: build.placeholders,

package/dist/cjs/loader/jsx.cjs

@@ -48,7 +48,7 @@ const TEMPLATE_PARSER_OPTIONS = {
     range: true,
     preserveParens: true,
 };
-const DEFAULT_TAG = 'jsx';
+const DEFAULT_TAGS = ['jsx', 'reactJsx'];
 const escapeTemplateChunk = (chunk) => chunk.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\${/g, '\\${');
 const formatParserError = (error) => {
     let message = `[jsx-loader] ${error.message}`;
@@ -187,15 +187,15 @@ const transformTemplateLiteral = (templateSource, resourcePath) => {
     const slots = collectSlots(result.program, templateSource);
     return renderTemplateWithSlots(templateSource, slots);
 };
-const isTargetTaggedTemplate = (node, source, tag) => {
+const getTaggedTemplateName = (node) => {
     if (node.type !== 'TaggedTemplateExpression') {
-        return false;
+        return null;
     }
     const tagNode = node.tag;
     if (tagNode.type !== 'Identifier') {
-        return false;
+        return null;
     }
-    return tagNode.name === tag;
+    return tagNode.name;
 };
 const TAG_PLACEHOLDER_PREFIX = '__JSX_LOADER_TAG_EXPR_';
 const buildTemplateSource = (quasis, expressions, source, tag) => {
@@ -307,8 +307,9 @@ const transformSource = (source, config) => {
     }
     const taggedTemplates = [];
     walkAst(ast.program, node => {
-        if (isTargetTaggedTemplate(node, source, config.tag)) {
-            taggedTemplates.push(node);
+        const tagName = getTaggedTemplateName(node);
+        if (tagName && config.tags.includes(tagName)) {
+            taggedTemplates.push({ node, tagName });
         }
     });
     if (!taggedTemplates.length) {
@@ -317,10 +318,11 @@ const transformSource = (source, config) => {
     const magic = new magic_string_1.default(source);
     let mutated = false;
     taggedTemplates
-        .sort((a, b) => b.start - a.start)
-        .forEach(node => {
+        .sort((a, b) => b.node.start - a.node.start)
+        .forEach(entry => {
+        const { node, tagName } = entry;
         const quasi = node.quasi;
-        const templateSource = buildTemplateSource(quasi.quasis, quasi.expressions, source, config.tag);
+        const templateSource = buildTemplateSource(quasi.quasis, quasi.expressions, source, tagName);
         const { code, changed } = transformTemplateLiteral(templateSource.source, config.resourcePath);
         const restored = restoreTemplatePlaceholders(code, templateSource.placeholders);
         const templateChanged = changed || templateSource.mutated;
@@ -338,11 +340,20 @@ function jsxLoader(input) {
     const callback = this.async();
     try {
         const options = this.getOptions?.() ?? {};
-        const tag = options.tag ?? DEFAULT_TAG;
+        const explicitTags = Array.isArray(options.tags)
+            ? options.tags.filter((value) => typeof value === 'string' && value.length > 0)
+            : null;
+        const legacyTag = typeof options.tag === 'string' && options.tag.length > 0 ? options.tag : null;
+        const tagList = explicitTags?.length
+            ? explicitTags
+            : legacyTag
+                ? [legacyTag]
+                : DEFAULT_TAGS;
+        const tags = Array.from(new Set(tagList));
         const source = typeof input === 'string' ? input : input.toString('utf8');
         const output = transformSource(source, {
             resourcePath: this.resourcePath,
-            tag,
+            tags,
         });
         callback(null, output);
     }

package/dist/cjs/loader/jsx.d.cts

@@ -7,8 +7,13 @@ type LoaderContext<TOptions> = {
 type LoaderOptions = {
     /**
      * Name of the tagged template function. Defaults to `jsx`.
+     * Deprecated in favor of `tags`.
      */
     tag?: string;
+    /**
+     * List of tagged template function names to transform. Defaults to `['jsx', 'reactJsx']`.
+     */
+    tags?: string[];
 };
 export default function jsxLoader(this: LoaderContext<LoaderOptions>, input: string | Buffer): void;
 export {};