@knighted/jsx 1.1.0 → 1.2.0-rc.0

package/dist/cjs/runtime/shared.cjs

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildTemplate = exports.ensureBinding = exports.sanitizeIdentifier = exports.evaluateExpression = exports.collectPlaceholderNames = exports.normalizeJsxText = exports.walkAst = exports.getIdentifierName = exports.extractRootNode = exports.formatParserError = exports.parserOptions = void 0;
+const OPEN_TAG_RE = /<\s*$/;
+const CLOSE_TAG_RE = /<\/\s*$/;
+const PLACEHOLDER_PREFIX = '__KX_EXPR__';
+let invocationCounter = 0;
+exports.parserOptions = {
+    lang: 'jsx',
+    sourceType: 'module',
+    range: true,
+    preserveParens: true,
+};
+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;
+};
+exports.formatParserError = formatParserError;
+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.');
+};
+exports.extractRootNode = extractRootNode;
+const getIdentifierName = (identifier) => {
+    switch (identifier.type) {
+        case 'JSXIdentifier':
+            return identifier.name;
+        case 'JSXNamespacedName':
+            return `${identifier.namespace.name}:${identifier.name.name}`;
+        case 'JSXMemberExpression':
+            return `${(0, exports.getIdentifierName)(identifier.object)}.${identifier.property.name}`;
+        default:
+            return '';
+    }
+};
+exports.getIdentifierName = getIdentifierName;
+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 => (0, exports.walkAst)(child, visitor));
+            return;
+        }
+        if (typeof value === 'object') {
+            (0, exports.walkAst)(value, visitor);
+        }
+    });
+};
+exports.walkAst = walkAst;
+const normalizeJsxText = (value) => {
+    const collapsed = value.replace(/\r/g, '').replace(/\n\s+/g, ' ');
+    const trimmed = collapsed.trim();
+    return trimmed.length > 0 ? trimmed : '';
+};
+exports.normalizeJsxText = normalizeJsxText;
+const collectPlaceholderNames = (expression, ctx) => {
+    const placeholders = new Set();
+    (0, exports.walkAst)(expression, node => {
+        if (node.type === 'Identifier' && ctx.placeholders.has(node.name)) {
+            placeholders.add(node.name);
+        }
+    });
+    return Array.from(placeholders);
+};
+exports.collectPlaceholderNames = collectPlaceholderNames;
+const evaluateExpression = (expression, ctx, evaluateJsxNode) => {
+    if (expression.type === 'JSXElement' || expression.type === 'JSXFragment') {
+        return evaluateJsxNode(expression);
+    }
+    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 = (0, exports.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}`);
+    }
+};
+exports.evaluateExpression = evaluateExpression;
+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;
+};
+exports.sanitizeIdentifier = sanitizeIdentifier;
+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 = (0, exports.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;
+};
+exports.ensureBinding = ensureBinding;
+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 = (0, exports.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 };
+};
+exports.buildTemplate = buildTemplate;

package/dist/cjs/runtime/shared.d.cts

@@ -0,0 +1,38 @@
+import type { Expression, JSXElement, JSXFragment, JSXIdentifier, JSXMemberExpression, JSXNamespacedName, Program } from '@oxc-project/types';
+import type { OxcError, ParserOptions } from 'oxc-parser';
+type AnyTemplateFunction = (...args: any[]) => unknown;
+type AnyTemplateConstructor = abstract new (...args: any[]) => unknown;
+export type TemplateComponent = (AnyTemplateFunction | AnyTemplateConstructor) & {
+    displayName?: string;
+    name?: string;
+};
+export type BindingEntry<TComponent extends TemplateComponent> = {
+    name: string;
+    value: TComponent;
+};
+export type TemplateBuildResult<TComponent extends TemplateComponent> = {
+    source: string;
+    placeholders: Map<string, unknown>;
+    bindings: BindingEntry<TComponent>[];
+};
+export type TemplateContext<TComponent extends TemplateComponent> = {
+    source: string;
+    placeholders: Map<string, unknown>;
+    components: Map<string, TComponent>;
+};
+export declare const parserOptions: ParserOptions;
+export declare const formatParserError: (error: OxcError) => string;
+export declare const extractRootNode: (program: Program) => JSXElement | JSXFragment;
+export declare const getIdentifierName: (identifier: JSXIdentifier | JSXNamespacedName | JSXMemberExpression) => string;
+type AnyOxcNode = {
+    type: string;
+    [key: string]: unknown;
+};
+export declare const walkAst: (node: unknown, visitor: (target: AnyOxcNode) => void) => void;
+export declare const normalizeJsxText: (value: string) => string;
+export declare const collectPlaceholderNames: <TComponent extends TemplateComponent>(expression: Expression | JSXElement | JSXFragment, ctx: TemplateContext<TComponent>) => string[];
+export declare const evaluateExpression: <TComponent extends TemplateComponent>(expression: Expression | JSXElement | JSXFragment, ctx: TemplateContext<TComponent>, evaluateJsxNode: (node: JSXElement | JSXFragment) => unknown) => unknown;
+export declare const sanitizeIdentifier: (value: string) => string;
+export declare const ensureBinding: <TComponent extends TemplateComponent>(value: TComponent, bindings: BindingEntry<TComponent>[], bindingLookup: Map<TComponent, BindingEntry<TComponent>>) => BindingEntry<TComponent>;
+export declare const buildTemplate: <TComponent extends TemplateComponent>(strings: TemplateStringsArray, values: unknown[]) => TemplateBuildResult<TComponent>;
+export {};

package/dist/jsx.js

@@ -1,55 +1,10 @@
 import { parseSync } from '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,
-};
+import { buildTemplate, evaluateExpression, extractRootNode, formatParserError, getIdentifierName, normalizeJsxText, parserOptions, } from './runtime/shared.js';
 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;
@@ -68,11 +23,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;
@@ -162,11 +112,12 @@ const appendChildValue = (parent, value) => {
     }
     parent.appendChild(document.createTextNode(String(value)));
 };
-const resolveAttributes = (attributes, ctx) => {
+const evaluateExpressionWithNamespace = (expression, ctx, namespace) => 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);
             }
@@ -185,13 +136,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;
@@ -218,11 +169,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);
                 }
@@ -238,7 +189,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];
@@ -267,7 +218,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;
@@ -281,111 +232,6 @@ 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 };
-};
 export const jsx = (templates, ...values) => {
     ensureDomAvailable();
     const build = buildTemplate(templates, values);

package/dist/lite/index.js

@@ -1,4 +1,4 @@
-import {parseSync}from'oxc-parser';var N=/<\s*$/,C=/<\/\s*$/,k="__KX_EXPR__",A=0,R={lang:"jsx",sourceType:"module",range:true,preserveParens:true},j=()=>{if(typeof document>"u"||typeof document.createElement!="function")throw new Error("The jsx template tag requires a DOM-like environment (document missing).")},$=e=>{let n=`[oxc-parser] ${e.message}`;if(e.labels?.length){let t=e.labels[0];t.message&&(n+=`
+import {parseSync}from'oxc-parser';var R=/<\s*$/,j=/<\/\s*$/,F="__KX_EXPR__",$=0,S={lang:"jsx",sourceType:"module",range:true,preserveParens:true},C=e=>{let n=`[oxc-parser] ${e.message}`;if(e.labels?.length){let t=e.labels[0];t.message&&(n+=`
 ${t.message}`);}return e.codeframe&&(n+=`
-${e.codeframe}`),n},_=e=>{for(let n of e.body)if(n.type==="ExpressionStatement"){let t=n.expression;if(t.type==="JSXElement"||t.type==="JSXFragment")return t}throw new Error("The jsx template must contain a single JSX element or fragment.")},y=e=>{switch(e.type){case "JSXIdentifier":return e.name;case "JSXNamespacedName":return `${e.namespace.name}:${e.name.name}`;case "JSXMemberExpression":return `${y(e.object)}.${e.property.name}`;default:return ""}},P=e=>typeof Node>"u"?false:e instanceof Node||e instanceof DocumentFragment,O=e=>!e||typeof e=="string"?false:typeof e[Symbol.iterator]=="function",S=e=>!e||typeof e!="object"&&typeof e!="function"?false:typeof e.then=="function",F=e=>{let t=e.replace(/\r/g,"").replace(/\n\s+/g," ").trim();return t.length>0?t:""},I=(e,n,t)=>{if(!(t===false||t===null||t===void 0)){if(n==="dangerouslySetInnerHTML"&&typeof t=="object"&&t&&"__html"in t){e.innerHTML=String(t.__html??"");return}if(n==="ref"){if(typeof t=="function"){t(e);return}if(t&&typeof t=="object"){t.current=e;return}}if(n==="style"&&typeof t=="object"&&t!==null){let r=t,s=e.style;if(!s)return;let o=s;Object.entries(r).forEach(([a,i])=>{if(i!=null){if(a.startsWith("--")){s.setProperty(a,String(i));return}o[a]=i;}});return}if(typeof t=="function"&&n.startsWith("on")){let r=n.slice(2).toLowerCase();e.addEventListener(r,t);return}if(n==="class"||n==="className"){let r=Array.isArray(t)?t.filter(Boolean).join(" "):String(t);e.setAttribute("class",r);return}if(n==="htmlFor"){e.setAttribute("for",String(t));return}if(n in e&&!n.includes("-")){e[n]=t;return}e.setAttribute(n,t===true?"":String(t));}},u=(e,n)=>{if(n!=null&&typeof n!="boolean"){if(S(n))throw new Error("Async values are not supported inside jsx template results.");if(Array.isArray(n)){n.forEach(t=>u(e,t));return}if(O(n)){for(let t of n)u(e,t);return}if(P(n)){e.appendChild(n);return}e.appendChild(document.createTextNode(String(n)));}},b=(e,n)=>{let t={};return e.forEach(r=>{if(r.type==="JSXSpreadAttribute"){let o=d(r.argument,n);o&&typeof o=="object"&&!Array.isArray(o)&&Object.assign(t,o);return}let s=y(r.name);if(!r.value){t[s]=true;return}if(r.value.type==="Literal"){t[s]=r.value.value;return}if(r.value.type==="JSXExpressionContainer"){if(r.value.expression.type==="JSXEmptyExpression")return;t[s]=d(r.value.expression,n);}}),t},T=(e,n,t)=>{let r=b(n,t);Object.entries(r).forEach(([s,o])=>{if(s!=="key"){if(s==="children"){u(e,o);return}I(e,s,o);}});},x=(e,n,t)=>{let r=[];return e.forEach(s=>{switch(s.type){case "JSXText":{let o=F(s.value);o&&r.push(o);break}case "JSXExpressionContainer":{if(s.expression.type==="JSXEmptyExpression")break;r.push(d(s.expression,n));break}case "JSXSpreadChild":{let o=d(s.expression,n);o!=null&&r.push(o);break}case "JSXElement":case "JSXFragment":{r.push(J(s,n,t));break}}}),r},M=(e,n,t,r)=>{let s=b(e.openingElement.attributes,n),o=x(e.children,n,r);o.length===1?s.children=o[0]:o.length>1&&(s.children=o);let a=t(s);if(S(a))throw new Error("Async jsx components are not supported.");return a},D=(e,n,t)=>{let r=e.openingElement,s=y(r.name),o=n.components.get(s);if(o)return M(e,n,o,t);if(/[A-Z]/.test(s[0]??""))throw new Error(`Unknown component "${s}". Did you interpolate it with the template literal?`);let a=s==="svg"?"svg":t,i=s==="foreignObject"?null:a,c=a==="svg"?document.createElementNS("http://www.w3.org/2000/svg",s):document.createElement(s);return T(c,r.attributes,n),x(e.children,n,i).forEach(m=>u(c,m)),c},J=(e,n,t)=>{if(e.type==="JSXFragment"){let r=document.createDocumentFragment();return x(e.children,n,t).forEach(o=>u(r,o)),r}return D(e,n,t)},g=(e,n)=>{if(!e||typeof e!="object")return;let t=e;typeof t.type=="string"&&(n(t),Object.values(t).forEach(r=>{if(r){if(Array.isArray(r)){r.forEach(s=>g(s,n));return}typeof r=="object"&&g(r,n);}}));},L=(e,n)=>{let t=new Set;return g(e,r=>{r.type==="Identifier"&&n.placeholders.has(r.name)&&t.add(r.name);}),Array.from(t)},d=(e,n)=>{if(e.type==="JSXElement"||e.type==="JSXFragment")return J(e,n,null);if(!("range"in e)||!e.range)throw new Error("Unable to evaluate expression: missing source range information.");let[t,r]=e.range,s=n.source.slice(t,r),o=L(e,n);try{let a=new Function(...o,`"use strict"; return (${s});`),i=o.map(c=>n.placeholders.get(c));return a(...i)}catch(a){throw new Error(`Failed to evaluate expression ${s}: ${a.message}`)}},B=e=>{let n=e.replace(/[^a-zA-Z0-9_$]/g,"");return n?/[A-Za-z_$]/.test(n[0])?n:`Component${n}`:"Component"},z=(e,n,t)=>{let r=t.get(e);if(r)return r;let s=e.displayName||e.name||`Component${n.length}`,o=B(s),a=o,i=1;for(;n.some(p=>p.name===a);)a=`${o}${i++}`;let c={name:a,value:e};return n.push(c),t.set(e,c),c},V=(e,n)=>{let t=e.raw??e,r=new Map,s=[],o=new Map,a=t[0]??"",i=A++,c=0;for(let p=0;p<n.length;p++){let m=t[p]??"",f=t[p+1]??"",l=n[p],h=N.test(m)||C.test(m);if(h&&typeof l=="function"){let w=z(l,s,o);a+=w.name+f;continue}if(h&&typeof l=="string"){a+=l+f;continue}let E=`${k}${i}_${c++}__`;r.set(E,l),a+=E+f;}return {source:a,placeholders:r,bindings:s}},W=(e,...n)=>{j();let t=V(e,n),r=parseSync("inline.jsx",t.source,R);if(r.errors.length>0)throw new Error($(r.errors[0]));let s=_(r.program),o={source:t.source,placeholders:t.placeholders,components:new Map(t.bindings.map(a=>[a.name,a.value]))};return J(s,o,null)};
-export{W as jsx};
+${e.codeframe}`),n},b=e=>{for(let n of e.body)if(n.type==="ExpressionStatement"){let t=n.expression;if(t.type==="JSXElement"||t.type==="JSXFragment")return t}throw new Error("The jsx template must contain a single JSX element or fragment.")},d=e=>{switch(e.type){case "JSXIdentifier":return e.name;case "JSXNamespacedName":return `${e.namespace.name}:${e.name.name}`;case "JSXMemberExpression":return `${d(e.object)}.${e.property.name}`;default:return ""}},x=(e,n)=>{if(!e||typeof e!="object")return;let t=e;typeof t.type=="string"&&(n(t),Object.values(t).forEach(r=>{if(r){if(Array.isArray(r)){r.forEach(o=>x(o,n));return}typeof r=="object"&&x(r,n);}}));},w=e=>{let t=e.replace(/\r/g,"").replace(/\n\s+/g," ").trim();return t.length>0?t:""},P=(e,n)=>{let t=new Set;return x(e,r=>{r.type==="Identifier"&&n.placeholders.has(r.name)&&t.add(r.name);}),Array.from(t)},T=(e,n,t)=>{if(e.type==="JSXElement"||e.type==="JSXFragment")return t(e);if(!("range"in e)||!e.range)throw new Error("Unable to evaluate expression: missing source range information.");let[r,o]=e.range,s=n.source.slice(r,o),a=P(e,n);try{let i=new Function(...a,`"use strict"; return (${s});`),p=a.map(c=>n.placeholders.get(c));return i(...p)}catch(i){throw new Error(`Failed to evaluate expression ${s}: ${i.message}`)}},_=e=>{let n=e.replace(/[^a-zA-Z0-9_$]/g,"");return n?/[A-Za-z_$]/.test(n[0])?n:`Component${n}`:"Component"},O=(e,n,t)=>{let r=t.get(e);if(r)return r;let o=e.displayName||e.name||`Component${n.length}`,s=_(o??""),a=s,i=1;for(;n.some(c=>c.name===a);)a=`${s}${i++}`;let p={name:a,value:e};return n.push(p),t.set(e,p),p},X=(e,n)=>{let t=e.raw??e,r=new Map,o=[],s=new Map,a=t[0]??"",i=$++,p=0;for(let c=0;c<n.length;c++){let u=t[c]??"",g=t[c+1]??"",m=n[c],E=R.test(u)||j.test(u);if(E&&typeof m=="function"){let A=O(m,o,s);a+=A.name+g;continue}if(E&&typeof m=="string"){a+=m+g;continue}let h=`${F}${i}_${p++}__`;r.set(h,m),a+=h+g;}return {source:a,placeholders:r,bindings:o}};var M=()=>{if(typeof document>"u"||typeof document.createElement!="function")throw new Error("The jsx template tag requires a DOM-like environment (document missing).")},D=e=>typeof Node>"u"?false:e instanceof Node||e instanceof DocumentFragment,L=e=>!e||typeof e=="string"?false:typeof e[Symbol.iterator]=="function",N=e=>!e||typeof e!="object"&&typeof e!="function"?false:typeof e.then=="function",B=(e,n,t)=>{if(!(t===false||t===null||t===void 0)){if(n==="dangerouslySetInnerHTML"&&typeof t=="object"&&t&&"__html"in t){e.innerHTML=String(t.__html??"");return}if(n==="ref"){if(typeof t=="function"){t(e);return}if(t&&typeof t=="object"){t.current=e;return}}if(n==="style"&&typeof t=="object"&&t!==null){let r=t,o=e.style;if(!o)return;let s=o;Object.entries(r).forEach(([a,i])=>{if(i!=null){if(a.startsWith("--")){o.setProperty(a,String(i));return}s[a]=i;}});return}if(typeof t=="function"&&n.startsWith("on")){let r=n.slice(2).toLowerCase();e.addEventListener(r,t);return}if(n==="class"||n==="className"){let r=Array.isArray(t)?t.filter(Boolean).join(" "):String(t);e.setAttribute("class",r);return}if(n==="htmlFor"){e.setAttribute("for",String(t));return}if(n in e&&!n.includes("-")){e[n]=t;return}e.setAttribute(n,t===true?"":String(t));}},l=(e,n)=>{if(n!=null&&typeof n!="boolean"){if(N(n))throw new Error("Async values are not supported inside jsx template results.");if(Array.isArray(n)){n.forEach(t=>l(e,t));return}if(L(n)){for(let t of n)l(e,t);return}if(D(n)){e.appendChild(n);return}e.appendChild(document.createTextNode(String(n)));}},f=(e,n,t)=>T(e,n,r=>J(r,n,t)),k=(e,n,t)=>{let r={};return e.forEach(o=>{if(o.type==="JSXSpreadAttribute"){let a=f(o.argument,n,t);a&&typeof a=="object"&&!Array.isArray(a)&&Object.assign(r,a);return}let s=d(o.name);if(!o.value){r[s]=true;return}if(o.value.type==="Literal"){r[s]=o.value.value;return}if(o.value.type==="JSXExpressionContainer"){if(o.value.expression.type==="JSXEmptyExpression")return;r[s]=f(o.value.expression,n,t);}}),r},z=(e,n,t,r)=>{let o=k(n,t,r);Object.entries(o).forEach(([s,a])=>{if(s!=="key"){if(s==="children"){l(e,a);return}B(e,s,a);}});},y=(e,n,t)=>{let r=[];return e.forEach(o=>{switch(o.type){case "JSXText":{let s=w(o.value);s&&r.push(s);break}case "JSXExpressionContainer":{if(o.expression.type==="JSXEmptyExpression")break;r.push(f(o.expression,n,t));break}case "JSXSpreadChild":{let s=f(o.expression,n,t);s!=null&&r.push(s);break}case "JSXElement":case "JSXFragment":{r.push(J(o,n,t));break}}}),r},W=(e,n,t,r)=>{let o=k(e.openingElement.attributes,n,r),s=y(e.children,n,r);s.length===1?o.children=s[0]:s.length>1&&(o.children=s);let a=t(o);if(N(a))throw new Error("Async jsx components are not supported.");return a},V=(e,n,t)=>{let r=e.openingElement,o=d(r.name),s=n.components.get(o);if(s)return W(e,n,s,t);if(/[A-Z]/.test(o[0]??""))throw new Error(`Unknown component "${o}". Did you interpolate it with the template literal?`);let a=o==="svg"?"svg":t,i=o==="foreignObject"?null:a,p=a==="svg"?document.createElementNS("http://www.w3.org/2000/svg",o):document.createElement(o);return z(p,r.attributes,n,a),y(e.children,n,i).forEach(u=>l(p,u)),p},J=(e,n,t)=>{if(e.type==="JSXFragment"){let r=document.createDocumentFragment();return y(e.children,n,t).forEach(s=>l(r,s)),r}return V(e,n,t)},H=(e,...n)=>{M();let t=X(e,n),r=parseSync("inline.jsx",t.source,S);if(r.errors.length>0)throw new Error(C(r.errors[0]));let o=b(r.program),s={source:t.source,placeholders:t.placeholders,components:new Map(t.bindings.map(a=>[a.name,a.value]))};return J(o,s,null)};
+export{H as jsx};

package/dist/loader/jsx.d.ts

@@ -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/loader/jsx.js

@@ -42,7 +42,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}`;
@@ -181,15 +181,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) => {
@@ -301,8 +301,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) {
@@ -311,10 +312,11 @@ const transformSource = (source, config) => {
     const magic = new MagicString(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;
@@ -332,11 +334,20 @@ export default 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/react/index.d.ts

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

package/dist/react/index.js

@@ -0,0 +1 @@
+export { reactJsx } from './react-jsx.js';

package/dist/react/react-jsx.d.ts

@@ -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;