@knighted/jsx 1.1.0 → 1.2.0-rc.0

package/README.md

@@ -15,6 +15,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
@@ -41,9 +44,29 @@ 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 { reactJsx } from '@knighted/jsx/react'
+import { createRoot } from 'react-dom/client'
+
+const view = reactJsx`
+  <section className="react-demo">
+    <h2>Hello from React</h2>
+    <button onClick={${() => console.log('clicked!')}}>Tap me</button>
+  </section>
+`
+
+createRoot(document.getElementById('root')!).render(view)
+```
+
+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 +80,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 +92,22 @@ 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.
 
 ### Interpolations
 

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 {};

package/dist/cjs/react/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactJsx = void 0;
+var react_jsx_js_1 = require("./react-jsx.cjs");
+Object.defineProperty(exports, "reactJsx", { enumerable: true, get: function () { return react_jsx_js_1.reactJsx; } });

package/dist/cjs/react/index.d.cts

@@ -0,0 +1,2 @@
+export { reactJsx } from './react-jsx.cjs';
+export type { ReactJsxComponent } from './react-jsx.cjs';

package/dist/cjs/react/react-jsx.cjs

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactJsx = void 0;
+const oxc_parser_1 = require("oxc-parser");
+const shared_js_1 = require("../runtime/shared.cjs");
+const react_1 = require("react");
+const isIterable = (value) => {
+    if (!value || typeof value === 'string') {
+        return false;
+    }
+    return typeof value[Symbol.iterator] === 'function';
+};
+const isPromiseLike = (value) => {
+    if (!value || (typeof value !== 'object' && typeof value !== 'function')) {
+        return false;
+    }
+    return typeof value.then === 'function';
+};
+const appendReactChild = (bucket, value) => {
+    if (value === null || value === undefined) {
+        return;
+    }
+    if (typeof value === 'boolean') {
+        return;
+    }
+    if (isPromiseLike(value)) {
+        throw new Error('Async values are not supported inside reactJsx template results.');
+    }
+    if (Array.isArray(value)) {
+        value.forEach(entry => appendReactChild(bucket, entry));
+        return;
+    }
+    if (isIterable(value)) {
+        for (const entry of value) {
+            appendReactChild(bucket, entry);
+        }
+        return;
+    }
+    bucket.push(value);
+};
+const evaluateExpressionForReact = (expression, ctx) => (0, shared_js_1.evaluateExpression)(expression, ctx, node => evaluateReactJsxNode(node, ctx));
+const resolveAttributes = (attributes, ctx) => {
+    const props = {};
+    attributes.forEach(attribute => {
+        if (attribute.type === 'JSXSpreadAttribute') {
+            const spreadValue = evaluateExpressionForReact(attribute.argument, ctx);
+            if (spreadValue && typeof spreadValue === 'object' && !Array.isArray(spreadValue)) {
+                Object.assign(props, spreadValue);
+            }
+            return;
+        }
+        const name = (0, shared_js_1.getIdentifierName)(attribute.name);
+        if (!attribute.value) {
+            props[name] = true;
+            return;
+        }
+        if (attribute.value.type === 'Literal') {
+            props[name] = attribute.value.value;
+            return;
+        }
+        if (attribute.value.type === 'JSXExpressionContainer') {
+            if (attribute.value.expression.type === 'JSXEmptyExpression') {
+                return;
+            }
+            props[name] = evaluateExpressionForReact(attribute.value.expression, ctx);
+        }
+    });
+    return props;
+};
+const evaluateReactJsxChildren = (children, ctx) => {
+    const resolved = [];
+    children.forEach(child => {
+        switch (child.type) {
+            case 'JSXText': {
+                const text = (0, shared_js_1.normalizeJsxText)(child.value);
+                if (text) {
+                    resolved.push(text);
+                }
+                break;
+            }
+            case 'JSXExpressionContainer': {
+                if (child.expression.type === 'JSXEmptyExpression') {
+                    break;
+                }
+                appendReactChild(resolved, evaluateExpressionForReact(child.expression, ctx));
+                break;
+            }
+            case 'JSXSpreadChild': {
+                const spreadValue = evaluateExpressionForReact(child.expression, ctx);
+                if (spreadValue !== undefined && spreadValue !== null) {
+                    appendReactChild(resolved, spreadValue);
+                }
+                break;
+            }
+            case 'JSXElement':
+            case 'JSXFragment': {
+                resolved.push(evaluateReactJsxNode(child, ctx));
+                break;
+            }
+        }
+    });
+    return resolved;
+};
+const createReactElement = (type, props, children) => {
+    return (0, react_1.createElement)(type, props, ...children);
+};
+const evaluateReactJsxElement = (element, ctx) => {
+    const opening = element.openingElement;
+    const tagName = (0, shared_js_1.getIdentifierName)(opening.name);
+    const component = ctx.components.get(tagName);
+    const props = resolveAttributes(opening.attributes, ctx);
+    const childValues = evaluateReactJsxChildren(element.children, ctx);
+    if (component) {
+        return createReactElement(component, props, childValues);
+    }
+    if (/[A-Z]/.test(tagName[0] ?? '')) {
+        throw new Error(`Unknown component "${tagName}". Did you interpolate it with the template literal?`);
+    }
+    return createReactElement(tagName, props, childValues);
+};
+const evaluateReactJsxNode = (node, ctx) => {
+    if (node.type === 'JSXFragment') {
+        const children = evaluateReactJsxChildren(node.children, ctx);
+        return (0, react_1.createElement)(react_1.Fragment, null, ...children);
+    }
+    return evaluateReactJsxElement(node, ctx);
+};
+const reactJsx = (templates, ...values) => {
+    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((0, shared_js_1.formatParserError)(result.errors[0]));
+    }
+    const root = (0, shared_js_1.extractRootNode)(result.program);
+    const ctx = {
+        source: build.source,
+        placeholders: build.placeholders,
+        components: new Map(build.bindings.map(binding => [binding.name, binding.value])),
+    };
+    return evaluateReactJsxNode(root, ctx);
+};
+exports.reactJsx = reactJsx;

package/dist/cjs/react/react-jsx.d.cts

@@ -0,0 +1,5 @@
+import { type ComponentType, type ReactElement, type ReactNode } from 'react';
+export type ReactJsxComponent<Props = Record<string, unknown>> = ComponentType<Props & {
+    children?: ReactNode;
+}>;
+export declare const reactJsx: (templates: TemplateStringsArray, ...values: unknown[]) => ReactElement;