@knighted/jsx 1.2.0-rc.4 → 1.2.0

package/README.md

@@ -136,6 +136,8 @@ npx http-server test/fixtures/rspack-app -p 4173
 
 Visit `http://localhost:4173` (or whichever port you pick) to interact with both the Lit + React hybrid demo and the React-mode bundle.
 
+Need a deeper dive into loader behavior and options? Check out [`src/loader/README.md`](src/loader/README.md) for a full walkthrough.
+
 ## 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:
@@ -250,7 +252,7 @@ Build the fixture locally with `npx next build test/fixtures/next-app` (or run `
 
 ### Interpolations
 
-- All dynamic values are provided through standard template literal expressions (`${...}`) and map to JSX exactly where they appear. Use JSX braces anywhere the syntax normally requires them (`className={${value}}`, spreads, etc.), but plain text children can interpolate directly, e.g. `Count is ${value}`.
+- All dynamic values are provided through standard template literal expressions (`${...}`) and map to JSX exactly where they appear. Interpolations used as text children no longer need an extra `{...}` wrapper—the runtime automatically recognizes placeholders inside text segments (so `Count is ${value}` just works). Use the usual JSX braces when the syntax requires them (`className={${value}}`, `{...props}`, conditionals, etc.).
 - Every expression can be any JavaScript value: primitives, arrays/iterables, DOM nodes, functions, other `jsx` results, or custom component references.
 - Async values (Promises) are not supported. Resolve them before passing into the template.
 

package/dist/cjs/jsx.cjs

@@ -162,10 +162,10 @@ const evaluateJsxChildren = (children, ctx, namespace) => {
     children.forEach(child => {
         switch (child.type) {
             case 'JSXText': {
-                const text = (0, shared_js_1.normalizeJsxText)(child.value);
-                if (text) {
-                    resolved.push(text);
-                }
+                const segments = (0, shared_js_1.normalizeJsxTextSegments)(child.value, ctx.placeholders);
+                segments.forEach(segment => {
+                    resolved.push(segment);
+                });
                 break;
             }
             case 'JSXExpressionContainer': {

package/dist/cjs/loader/jsx.cjs

@@ -31,10 +31,14 @@ class ReactTemplateBuilder {
         children.forEach(child => {
             switch (child.type) {
                 case 'JSXText': {
-                    const text = normalizeJsxTextValue(child.value);
-                    if (text) {
-                        compiled.push(JSON.stringify(text));
-                    }
+                    const segments = normalizeJsxTextSegments(child.value, this.placeholderMap);
+                    segments.forEach(segment => {
+                        if (segment.kind === 'text') {
+                            compiled.push(JSON.stringify(segment.value));
+                            return;
+                        }
+                        compiled.push(segment.value);
+                    });
                     break;
                 }
                 case 'JSXExpressionContainer': {
@@ -154,6 +158,9 @@ class ReactTemplateBuilder {
             }
             return node.name;
         }
+        if (node.type === 'Literal') {
+            return JSON.stringify(node.value);
+        }
         if ('range' in node && Array.isArray(node.range)) {
             throw new Error('[jsx-loader] Unable to inline complex expressions in react mode.');
         }
@@ -198,6 +205,7 @@ const getTemplateExpressionContext = (left, right) => {
     return { type: 'childText' };
 };
 const TEMPLATE_EXPR_PLACEHOLDER_PREFIX = '__JSX_LOADER_TEMPLATE_EXPR_';
+const TEMPLATE_EXPR_PLACEHOLDER_PATTERN = new RegExp(`${TEMPLATE_EXPR_PLACEHOLDER_PREFIX}\\d+__`, 'g');
 const MODULE_PARSER_OPTIONS = {
     lang: 'tsx',
     sourceType: 'module',
@@ -392,10 +400,47 @@ const extractJsxRoot = (program) => {
     }
     throw new Error('[jsx-loader] Expected the template to contain a single JSX root node.');
 };
-const normalizeJsxTextValue = (value) => {
+const normalizeJsxTextSegments = (value, placeholders) => {
     const collapsed = value.replace(/\r/g, '').replace(/\n\s+/g, ' ');
-    const trimmed = collapsed.trim();
-    return trimmed.length > 0 ? trimmed : '';
+    const leadingWhitespace = value.match(/^\s*/)?.[0] ?? '';
+    const trailingWhitespace = value.match(/\s*$/)?.[0] ?? '';
+    const trimStart = /\n/.test(leadingWhitespace);
+    const trimEnd = /\n/.test(trailingWhitespace);
+    let normalized = collapsed;
+    if (trimStart) {
+        normalized = normalized.replace(/^\s+/, '');
+    }
+    if (trimEnd) {
+        normalized = normalized.replace(/\s+$/, '');
+    }
+    if (normalized.length === 0 || normalized.trim().length === 0) {
+        return [];
+    }
+    const segments = [];
+    TEMPLATE_EXPR_PLACEHOLDER_PATTERN.lastIndex = 0;
+    let cursor = 0;
+    let match;
+    while ((match = TEMPLATE_EXPR_PLACEHOLDER_PATTERN.exec(normalized))) {
+        const index = match.index;
+        const slice = normalized.slice(cursor, index);
+        if (slice) {
+            segments.push({ kind: 'text', value: slice });
+        }
+        const marker = match[0];
+        const expression = placeholders.get(marker);
+        if (expression) {
+            segments.push({ kind: 'expression', value: expression });
+        }
+        else {
+            segments.push({ kind: 'text', value: marker });
+        }
+        cursor = index + marker.length;
+    }
+    const remainder = normalized.slice(cursor);
+    if (remainder) {
+        segments.push({ kind: 'text', value: remainder });
+    }
+    return segments;
 };
 const TAG_PLACEHOLDER_PREFIX = '__JSX_LOADER_TAG_EXPR_';
 const buildTemplateSource = (quasis, expressions, source, tag) => {

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

@@ -72,10 +72,8 @@ const evaluateReactJsxChildren = (children, ctx) => {
     children.forEach(child => {
         switch (child.type) {
             case 'JSXText': {
-                const text = (0, shared_js_1.normalizeJsxText)(child.value);
-                if (text) {
-                    resolved.push(text);
-                }
+                const segments = (0, shared_js_1.normalizeJsxTextSegments)(child.value, ctx.placeholders);
+                segments.forEach(segment => appendReactChild(resolved, segment));
                 break;
             }
             case 'JSXExpressionContainer': {

package/dist/cjs/runtime/shared.cjs

@@ -1,9 +1,10 @@
 "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;
+exports.buildTemplate = exports.ensureBinding = exports.sanitizeIdentifier = exports.evaluateExpression = exports.collectPlaceholderNames = exports.normalizeJsxTextSegments = exports.walkAst = exports.getIdentifierName = exports.extractRootNode = exports.formatParserError = exports.parserOptions = exports.placeholderPattern = exports.PLACEHOLDER_PREFIX = void 0;
 const OPEN_TAG_RE = /<\s*$/;
 const CLOSE_TAG_RE = /<\/\s*$/;
-const PLACEHOLDER_PREFIX = '__KX_EXPR__';
+exports.PLACEHOLDER_PREFIX = '__KX_EXPR__';
+exports.placeholderPattern = new RegExp(`${exports.PLACEHOLDER_PREFIX}\\d+_\\d+__`, 'g');
 let invocationCounter = 0;
 exports.parserOptions = {
     lang: 'jsx',
@@ -73,12 +74,48 @@ const walkAst = (node, visitor) => {
     });
 };
 exports.walkAst = walkAst;
-const normalizeJsxText = (value) => {
+const normalizeJsxTextSegments = (value, placeholders) => {
     const collapsed = value.replace(/\r/g, '').replace(/\n\s+/g, ' ');
-    const trimmed = collapsed.trim();
-    return trimmed.length > 0 ? trimmed : '';
+    const leadingWhitespace = value.match(/^\s*/)?.[0] ?? '';
+    const trailingWhitespace = value.match(/\s*$/)?.[0] ?? '';
+    const trimStart = /\n/.test(leadingWhitespace);
+    const trimEnd = /\n/.test(trailingWhitespace);
+    let normalized = collapsed;
+    if (trimStart) {
+        normalized = normalized.replace(/^\s+/, '');
+    }
+    if (trimEnd) {
+        normalized = normalized.replace(/\s+$/, '');
+    }
+    if (normalized.length === 0 || normalized.trim().length === 0) {
+        return [];
+    }
+    const segments = [];
+    exports.placeholderPattern.lastIndex = 0;
+    let cursor = 0;
+    let match;
+    while ((match = exports.placeholderPattern.exec(normalized))) {
+        const index = match.index;
+        const slice = normalized.slice(cursor, index);
+        if (slice) {
+            segments.push(slice);
+        }
+        const token = match[0];
+        if (placeholders.has(token)) {
+            segments.push(placeholders.get(token));
+        }
+        else {
+            segments.push(token);
+        }
+        cursor = index + token.length;
+    }
+    const remainder = normalized.slice(cursor);
+    if (remainder) {
+        segments.push(remainder);
+    }
+    return segments;
 };
-exports.normalizeJsxText = normalizeJsxText;
+exports.normalizeJsxTextSegments = normalizeJsxTextSegments;
 const collectPlaceholderNames = (expression, ctx) => {
     const placeholders = new Set();
     (0, exports.walkAst)(expression, node => {
@@ -160,7 +197,7 @@ const buildTemplate = (strings, values) => {
             source += value + nextChunk;
             continue;
         }
-        const placeholder = `${PLACEHOLDER_PREFIX}${templateId}_${placeholderIndex++}__`;
+        const placeholder = `${exports.PLACEHOLDER_PREFIX}${templateId}_${placeholderIndex++}__`;
         placeholders.set(placeholder, value);
         source += placeholder + nextChunk;
     }

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

@@ -1,5 +1,7 @@
 import type { Expression, JSXElement, JSXFragment, JSXIdentifier, JSXMemberExpression, JSXNamespacedName, Program } from '@oxc-project/types';
 import type { OxcError, ParserOptions } from 'oxc-parser';
+export declare const PLACEHOLDER_PREFIX = "__KX_EXPR__";
+export declare const placeholderPattern: RegExp;
 type AnyTemplateFunction = (...args: any[]) => unknown;
 type AnyTemplateConstructor = abstract new (...args: any[]) => unknown;
 export type TemplateComponent = (AnyTemplateFunction | AnyTemplateConstructor) & {
@@ -29,7 +31,7 @@ type AnyOxcNode = {
     [key: string]: unknown;
 };
 export declare const walkAst: (node: unknown, visitor: (target: AnyOxcNode) => void) => void;
-export declare const normalizeJsxText: (value: string) => string;
+export declare const normalizeJsxTextSegments: (value: string, placeholders: Map<string, unknown>) => unknown[];
 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;

package/dist/jsx.js

@@ -1,5 +1,5 @@
 import { parseSync } from 'oxc-parser';
-import { buildTemplate, evaluateExpression, extractRootNode, formatParserError, getIdentifierName, normalizeJsxText, parserOptions, } from './runtime/shared.js';
+import { buildTemplate, evaluateExpression, extractRootNode, formatParserError, getIdentifierName, normalizeJsxTextSegments, 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).');
@@ -159,10 +159,10 @@ const evaluateJsxChildren = (children, ctx, namespace) => {
     children.forEach(child => {
         switch (child.type) {
             case 'JSXText': {
-                const text = normalizeJsxText(child.value);
-                if (text) {
-                    resolved.push(text);
-                }
+                const segments = normalizeJsxTextSegments(child.value, ctx.placeholders);
+                segments.forEach(segment => {
+                    resolved.push(segment);
+                });
                 break;
             }
             case 'JSXExpressionContainer': {

package/dist/lite/index.js

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

package/dist/lite/node/index.js

@@ -1,4 +1,4 @@
-import {parseSync}from'oxc-parser';var C="<!doctype html><html><body></body></html>",I=["window","self","document","HTMLElement","Element","Node","DocumentFragment","customElements","Text","Comment","MutationObserver","navigator"],M=()=>typeof document<"u"&&typeof document.createElement=="function",L=e=>{let n=globalThis,t=e;I.forEach(o=>{n[o]===void 0&&t[o]!==void 0&&(n[o]=t[o]);});},x=async()=>{let{parseHTML:e}=await import('linkedom'),{window:n}=e(C);return n},h=async()=>{let{JSDOM:e}=await import('jsdom'),{window:n}=new e(C);return n},F=()=>{let e=typeof process<"u"&&process.env?.KNIGHTED_JSX_NODE_SHIM?process.env.KNIGHTED_JSX_NODE_SHIM.toLowerCase():void 0;return e==="linkedom"||e==="jsdom"?e:"auto"},$=()=>{let e=F();return e==="linkedom"?[x,h]:e==="jsdom"?[h,x]:[x,h]},B=async()=>{let e=[];for(let t of $())try{return await t()}catch(o){e.push(o);}let n='Unable to bootstrap a DOM-like environment. Install "linkedom" or "jsdom" (both optional peer dependencies) or set KNIGHTED_JSX_NODE_SHIM to pick one explicitly.';throw new AggregateError(e,n)},u=null,T=async()=>{if(!M())return u||(u=(async()=>{let e=await B();L(e);})().catch(e=>{throw u=null,e})),u};var W=/<\s*$/,H=/<\/\s*$/,G="__KX_EXPR__",z=0,N={lang:"jsx",sourceType:"module",range:true,preserveParens:true},X=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 C="<!doctype html><html><body></body></html>",$=["window","self","document","HTMLElement","Element","Node","DocumentFragment","customElements","Text","Comment","MutationObserver","navigator"],L=()=>typeof document<"u"&&typeof document.createElement=="function",F=e=>{let n=globalThis,t=e;$.forEach(r=>{n[r]===void 0&&t[r]!==void 0&&(n[r]=t[r]);});},E=async()=>{let{parseHTML:e}=await import('linkedom'),{window:n}=e(C);return n},S=async()=>{let{JSDOM:e}=await import('jsdom'),{window:n}=new e(C);return n},W=()=>{let e=typeof process<"u"&&process.env?.KNIGHTED_JSX_NODE_SHIM?process.env.KNIGHTED_JSX_NODE_SHIM.toLowerCase():void 0;return e==="linkedom"||e==="jsdom"?e:"auto"},B=()=>{let e=W();return e==="linkedom"?[E,S]:e==="jsdom"?[S,E]:[E,S]},H=async()=>{let e=[];for(let t of B())try{return await t()}catch(r){e.push(r);}let n='Unable to bootstrap a DOM-like environment. Install "linkedom" or "jsdom" (both optional peer dependencies) or set KNIGHTED_JSX_NODE_SHIM to pick one explicitly.';throw new AggregateError(e,n)},x=null,T=async()=>{if(!L())return x||(x=(async()=>{let e=await H();F(e);})().catch(e=>{throw x=null,e})),x};var G=/<\s*$/,z=/<\/\s*$/,X="__KX_EXPR__",N=new RegExp(`${X}\\d+_\\d+__`,"g"),K=0,k={lang:"jsx",sourceType:"module",range:true,preserveParens:true},A=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},k=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.")},f=e=>{switch(e.type){case "JSXIdentifier":return e.name;case "JSXNamespacedName":return `${e.namespace.name}:${e.name.name}`;case "JSXMemberExpression":return `${f(e.object)}.${e.property.name}`;default:return ""}},E=(e,n)=>{if(!e||typeof e!="object")return;let t=e;typeof t.type=="string"&&(n(t),Object.values(t).forEach(o=>{if(o){if(Array.isArray(o)){o.forEach(r=>E(r,n));return}typeof o=="object"&&E(o,n);}}));},A=e=>{let t=e.replace(/\r/g,"").replace(/\n\s+/g," ").trim();return t.length>0?t:""},K=(e,n)=>{let t=new Set;return E(e,o=>{o.type==="Identifier"&&n.placeholders.has(o.name)&&t.add(o.name);}),Array.from(t)},R=(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[o,r]=e.range,s=n.source.slice(o,r),a=K(e,n);try{let i=new Function(...a,`"use strict"; return (${s});`),c=a.map(p=>n.placeholders.get(p));return i(...c)}catch(i){throw new Error(`Failed to evaluate expression ${s}: ${i.message}`)}},V=e=>{let n=e.replace(/[^a-zA-Z0-9_$]/g,"");return n?/[A-Za-z_$]/.test(n[0])?n:`Component${n}`:"Component"},U=(e,n,t)=>{let o=t.get(e);if(o)return o;let r=e.displayName||e.name||`Component${n.length}`,s=V(r??""),a=s,i=1;for(;n.some(p=>p.name===a);)a=`${s}${i++}`;let c={name:a,value:e};return n.push(c),t.set(e,c),c},j=(e,n)=>{let t=e.raw??e,o=new Map,r=[],s=new Map,a=t[0]??"",i=z++,c=0;for(let p=0;p<n.length;p++){let d=t[p]??"",y=t[p+1]??"",m=n[p],J=W.test(d)||H.test(d);if(J&&typeof m=="function"){let D=U(m,r,s);a+=D.name+y;continue}if(J&&typeof m=="string"){a+=m+y;continue}let b=`${G}${i}_${c++}__`;o.set(b,m),a+=b+y;}return {source:a,placeholders:o,bindings:r}};var q=()=>{if(typeof document>"u"||typeof document.createElement!="function")throw new Error("The jsx template tag requires a DOM-like environment (document missing).")},Y=e=>typeof Node>"u"?false:e instanceof Node||e instanceof DocumentFragment,Q=e=>!e||typeof e=="string"?false:typeof e[Symbol.iterator]=="function",_=e=>!e||typeof e!="object"&&typeof e!="function"?false:typeof e.then=="function",v=(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 o=t,r=e.style;if(!r)return;let s=r;Object.entries(o).forEach(([a,i])=>{if(i!=null){if(a.startsWith("--")){r.setProperty(a,String(i));return}s[a]=i;}});return}if(typeof t=="function"&&n.startsWith("on")){let o=n.slice(2).toLowerCase();e.addEventListener(o,t);return}if(n==="class"||n==="className"){let o=Array.isArray(t)?t.filter(Boolean).join(" "):String(t);e.setAttribute("class",o);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))throw new Error("Async values are not supported inside jsx template results.");if(Array.isArray(n)){n.forEach(t=>l(e,t));return}if(Q(n)){for(let t of n)l(e,t);return}if(Y(n)){e.appendChild(n);return}e.appendChild(document.createTextNode(String(n)));}},g=(e,n,t)=>R(e,n,o=>w(o,n,t)),O=(e,n,t)=>{let o={};return e.forEach(r=>{if(r.type==="JSXSpreadAttribute"){let a=g(r.argument,n,t);a&&typeof a=="object"&&!Array.isArray(a)&&Object.assign(o,a);return}let s=f(r.name);if(!r.value){o[s]=true;return}if(r.value.type==="Literal"){o[s]=r.value.value;return}if(r.value.type==="JSXExpressionContainer"){if(r.value.expression.type==="JSXEmptyExpression")return;o[s]=g(r.value.expression,n,t);}}),o},ee=(e,n,t,o)=>{let r=O(n,t,o);Object.entries(r).forEach(([s,a])=>{if(s!=="key"){if(s==="children"){l(e,a);return}v(e,s,a);}});},S=(e,n,t)=>{let o=[];return e.forEach(r=>{switch(r.type){case "JSXText":{let s=A(r.value);s&&o.push(s);break}case "JSXExpressionContainer":{if(r.expression.type==="JSXEmptyExpression")break;o.push(g(r.expression,n,t));break}case "JSXSpreadChild":{let s=g(r.expression,n,t);s!=null&&o.push(s);break}case "JSXElement":case "JSXFragment":{o.push(w(r,n,t));break}}}),o},ne=(e,n,t,o)=>{let r=O(e.openingElement.attributes,n,o),s=S(e.children,n,o);s.length===1?r.children=s[0]:s.length>1&&(r.children=s);let a=t(r);if(_(a))throw new Error("Async jsx components are not supported.");return a},te=(e,n,t)=>{let o=e.openingElement,r=f(o.name),s=n.components.get(r);if(s)return ne(e,n,s,t);if(/[A-Z]/.test(r[0]??""))throw new Error(`Unknown component "${r}". Did you interpolate it with the template literal?`);let a=r==="svg"?"svg":t,i=r==="foreignObject"?null:a,c=a==="svg"?document.createElementNS("http://www.w3.org/2000/svg",r):document.createElement(r);return ee(c,o.attributes,n,a),S(e.children,n,i).forEach(d=>l(c,d)),c},w=(e,n,t)=>{if(e.type==="JSXFragment"){let o=document.createDocumentFragment();return S(e.children,n,t).forEach(s=>l(o,s)),o}return te(e,n,t)},P=(e,...n)=>{q();let t=j(e,n),o=parseSync("inline.jsx",t.source,N);if(o.errors.length>0)throw new Error(X(o.errors[0]));let r=k(o.program),s={source:t.source,placeholders:t.placeholders,components:new Map(t.bindings.map(a=>[a.name,a.value]))};return w(r,s,null)};await T();var me=P;
-export{me as jsx};
+${e.codeframe}`),n},R=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 ""}},w=(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=>w(o,n));return}typeof r=="object"&&w(r,n);}}));},_=(e,n)=>{let t=e.replace(/\r/g,"").replace(/\n\s+/g," "),r=e.match(/^\s*/)?.[0]??"",o=e.match(/\s*$/)?.[0]??"",a=/\n/.test(r),s=/\n/.test(o),i=t;if(a&&(i=i.replace(/^\s+/,"")),s&&(i=i.replace(/\s+$/,"")),i.length===0||i.trim().length===0)return [];let c=[];N.lastIndex=0;let p=0,m;for(;m=N.exec(i);){let l=m.index,f=i.slice(p,l);f&&c.push(f);let d=m[0];n.has(d)?c.push(n.get(d)):c.push(d),p=l+d.length;}let u=i.slice(p);return u&&c.push(u),c},V=(e,n)=>{let t=new Set;return w(e,r=>{r.type==="Identifier"&&n.placeholders.has(r.name)&&t.add(r.name);}),Array.from(t)},j=(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,a=n.source.slice(r,o),s=V(e,n);try{let i=new Function(...s,`"use strict"; return (${a});`),c=s.map(p=>n.placeholders.get(p));return i(...c)}catch(i){throw new Error(`Failed to evaluate expression ${a}: ${i.message}`)}},U=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 o=e.displayName||e.name||`Component${n.length}`,a=U(o??""),s=a,i=1;for(;n.some(p=>p.name===s);)s=`${a}${i++}`;let c={name:s,value:e};return n.push(c),t.set(e,c),c},P=(e,n)=>{let t=e.raw??e,r=new Map,o=[],a=new Map,s=t[0]??"",i=K++,c=0;for(let p=0;p<n.length;p++){let m=t[p]??"",u=t[p+1]??"",l=n[p],f=G.test(m)||z.test(m);if(f&&typeof l=="function"){let D=Z(l,o,a);s+=D.name+u;continue}if(f&&typeof l=="string"){s+=l+u;continue}let d=`${X}${i}_${c++}__`;r.set(d,l),s+=d+u;}return {source:s,placeholders:r,bindings:o}};var Y=()=>{if(typeof document>"u"||typeof document.createElement!="function")throw new Error("The jsx template tag requires a DOM-like environment (document missing).")},Q=e=>typeof Node>"u"?false:e instanceof Node||e instanceof DocumentFragment,v=e=>!e||typeof e=="string"?false:typeof e[Symbol.iterator]=="function",O=e=>!e||typeof e!="object"&&typeof e!="function"?false:typeof e.then=="function",ee=(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 a=o;Object.entries(r).forEach(([s,i])=>{if(i!=null){if(s.startsWith("--")){o.setProperty(s,String(i));return}a[s]=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));}},g=(e,n)=>{if(n!=null&&typeof n!="boolean"){if(O(n))throw new Error("Async values are not supported inside jsx template results.");if(Array.isArray(n)){n.forEach(t=>g(e,t));return}if(v(n)){for(let t of n)g(e,t);return}if(Q(n)){e.appendChild(n);return}e.appendChild(document.createTextNode(String(n)));}},h=(e,n,t)=>j(e,n,r=>b(r,n,t)),I=(e,n,t)=>{let r={};return e.forEach(o=>{if(o.type==="JSXSpreadAttribute"){let s=h(o.argument,n,t);s&&typeof s=="object"&&!Array.isArray(s)&&Object.assign(r,s);return}let a=y(o.name);if(!o.value){r[a]=true;return}if(o.value.type==="Literal"){r[a]=o.value.value;return}if(o.value.type==="JSXExpressionContainer"){if(o.value.expression.type==="JSXEmptyExpression")return;r[a]=h(o.value.expression,n,t);}}),r},ne=(e,n,t,r)=>{let o=I(n,t,r);Object.entries(o).forEach(([a,s])=>{if(a!=="key"){if(a==="children"){g(e,s);return}ee(e,a,s);}});},J=(e,n,t)=>{let r=[];return e.forEach(o=>{switch(o.type){case "JSXText":{_(o.value,n.placeholders).forEach(s=>{r.push(s);});break}case "JSXExpressionContainer":{if(o.expression.type==="JSXEmptyExpression")break;r.push(h(o.expression,n,t));break}case "JSXSpreadChild":{let a=h(o.expression,n,t);a!=null&&r.push(a);break}case "JSXElement":case "JSXFragment":{r.push(b(o,n,t));break}}}),r},te=(e,n,t,r)=>{let o=I(e.openingElement.attributes,n,r),a=J(e.children,n,r);a.length===1?o.children=a[0]:a.length>1&&(o.children=a);let s=t(o);if(O(s))throw new Error("Async jsx components are not supported.");return s},re=(e,n,t)=>{let r=e.openingElement,o=y(r.name),a=n.components.get(o);if(a)return te(e,n,a,t);if(/[A-Z]/.test(o[0]??""))throw new Error(`Unknown component "${o}". Did you interpolate it with the template literal?`);let s=o==="svg"?"svg":t,i=o==="foreignObject"?null:s,c=s==="svg"?document.createElementNS("http://www.w3.org/2000/svg",o):document.createElement(o);return ne(c,r.attributes,n,s),J(e.children,n,i).forEach(m=>g(c,m)),c},b=(e,n,t)=>{if(e.type==="JSXFragment"){let r=document.createDocumentFragment();return J(e.children,n,t).forEach(a=>g(r,a)),r}return re(e,n,t)},M=(e,...n)=>{Y();let t=P(e,n),r=parseSync("inline.jsx",t.source,k);if(r.errors.length>0)throw new Error(A(r.errors[0]));let o=R(r.program),a={source:t.source,placeholders:t.placeholders,components:new Map(t.bindings.map(s=>[s.name,s.value]))};return b(o,a,null)};await T();var le=M;
+export{le as jsx};

package/dist/lite/node/react/index.js

@@ -1,3 +1,3 @@
-import {parseSync}from'oxc-parser';import {createElement,Fragment}from'react';var N=/<\s*$/,$=/<\/\s*$/,F="__KX_EXPR__",P=0,C={lang:"jsx",sourceType:"module",range:true,preserveParens:true},S=e=>{let n=`[oxc-parser] ${e.message}`;if(e.labels?.length){let t=e.labels[0];t.message&&(n+=`
+import {parseSync}from'oxc-parser';import {createElement,Fragment}from'react';var F=/<\s*$/,P=/<\/\s*$/,h="__KX_EXPR__",C=new RegExp(`${h}\\d+_\\d+__`,"g"),_=0,S={lang:"jsx",sourceType:"module",range:true,preserveParens:true},T=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},T=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.")},l=e=>{switch(e.type){case "JSXIdentifier":return e.name;case "JSXNamespacedName":return `${e.namespace.name}:${e.name.name}`;case "JSXMemberExpression":return `${l(e.object)}.${e.property.name}`;default:return ""}},g=(e,n)=>{if(!e||typeof e!="object")return;let t=e;typeof t.type=="string"&&(n(t),Object.values(t).forEach(o=>{if(o){if(Array.isArray(o)){o.forEach(r=>g(r,n));return}typeof o=="object"&&g(o,n);}}));},X=e=>{let t=e.replace(/\r/g,"").replace(/\n\s+/g," ").trim();return t.length>0?t:""},O=(e,n)=>{let t=new Set;return g(e,o=>{o.type==="Identifier"&&n.placeholders.has(o.name)&&t.add(o.name);}),Array.from(t)},h=(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[o,r]=e.range,s=n.source.slice(o,r),a=O(e,n);try{let c=new Function(...a,`"use strict"; return (${s});`),i=a.map(p=>n.placeholders.get(p));return c(...i)}catch(c){throw new Error(`Failed to evaluate expression ${s}: ${c.message}`)}},_=e=>{let n=e.replace(/[^a-zA-Z0-9_$]/g,"");return n?/[A-Za-z_$]/.test(n[0])?n:`Component${n}`:"Component"},j=(e,n,t)=>{let o=t.get(e);if(o)return o;let r=e.displayName||e.name||`Component${n.length}`,s=_(r??""),a=s,c=1;for(;n.some(p=>p.name===a);)a=`${s}${c++}`;let i={name:a,value:e};return n.push(i),t.set(e,i),i},w=(e,n)=>{let t=e.raw??e,o=new Map,r=[],s=new Map,a=t[0]??"",c=P++,i=0;for(let p=0;p<n.length;p++){let f=t[p]??"",x=t[p+1]??"",m=n[p],E=N.test(f)||$.test(f);if(E&&typeof m=="function"){let b=j(m,r,s);a+=b.name+x;continue}if(E&&typeof m=="string"){a+=m+x;continue}let J=`${F}${c}_${i++}__`;o.set(J,m),a+=J+x;}return {source:a,placeholders:o,bindings:r}};var M=e=>!e||typeof e=="string"?false:typeof e[Symbol.iterator]=="function",v=e=>!e||typeof e!="object"&&typeof e!="function"?false:typeof e.then=="function",u=(e,n)=>{if(n!=null&&typeof n!="boolean"){if(v(n))throw new Error("Async values are not supported inside reactJsx template results.");if(Array.isArray(n)){n.forEach(t=>u(e,t));return}if(M(n)){for(let t of n)u(e,t);return}e.push(n);}},d=(e,n)=>h(e,n,t=>y(t,n)),L=(e,n)=>{let t={};return e.forEach(o=>{if(o.type==="JSXSpreadAttribute"){let s=d(o.argument,n);s&&typeof s=="object"&&!Array.isArray(s)&&Object.assign(t,s);return}let r=l(o.name);if(!o.value){t[r]=true;return}if(o.value.type==="Literal"){t[r]=o.value.value;return}if(o.value.type==="JSXExpressionContainer"){if(o.value.expression.type==="JSXEmptyExpression")return;t[r]=d(o.value.expression,n);}}),t},A=(e,n)=>{let t=[];return e.forEach(o=>{switch(o.type){case "JSXText":{let r=X(o.value);r&&t.push(r);break}case "JSXExpressionContainer":{if(o.expression.type==="JSXEmptyExpression")break;u(t,d(o.expression,n));break}case "JSXSpreadChild":{let r=d(o.expression,n);r!=null&&u(t,r);break}case "JSXElement":case "JSXFragment":{t.push(y(o,n));break}}}),t},R=(e,n,t)=>createElement(e,n,...t),z=(e,n)=>{let t=e.openingElement,o=l(t.name),r=n.components.get(o),s=L(t.attributes,n),a=A(e.children,n);if(r)return R(r,s,a);if(/[A-Z]/.test(o[0]??""))throw new Error(`Unknown component "${o}". Did you interpolate it with the template literal?`);return R(o,s,a)},y=(e,n)=>{if(e.type==="JSXFragment"){let t=A(e.children,n);return createElement(Fragment,null,...t)}return z(e,n)},V=(e,...n)=>{let t=w(e,n),o=parseSync("inline.jsx",t.source,C);if(o.errors.length>0)throw new Error(S(o.errors[0]));let r=T(o.program),s={source:t.source,placeholders:t.placeholders,components:new Map(t.bindings.map(a=>[a.name,a.value]))};return y(r,s)};export{V as reactJsx};
+${e.codeframe}`),n},w=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.")},f=e=>{switch(e.type){case "JSXIdentifier":return e.name;case "JSXNamespacedName":return `${e.namespace.name}:${e.name.name}`;case "JSXMemberExpression":return `${f(e.object)}.${e.property.name}`;default:return ""}},E=(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=>E(o,n));return}typeof r=="object"&&E(r,n);}}));},X=(e,n)=>{let t=e.replace(/\r/g,"").replace(/\n\s+/g," "),r=e.match(/^\s*/)?.[0]??"",o=e.match(/\s*$/)?.[0]??"",s=/\n/.test(r),a=/\n/.test(o),p=t;if(s&&(p=p.replace(/^\s+/,"")),a&&(p=p.replace(/\s+$/,"")),p.length===0||p.trim().length===0)return [];let c=[];C.lastIndex=0;let i=0,u;for(;u=C.exec(p);){let m=u.index,d=p.slice(i,m);d&&c.push(d);let l=u[0];n.has(l)?c.push(n.get(l)):c.push(l),i=m+l.length;}let g=p.slice(i);return g&&c.push(g),c},I=(e,n)=>{let t=new Set;return E(e,r=>{r.type==="Identifier"&&n.placeholders.has(r.name)&&t.add(r.name);}),Array.from(t)},R=(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=I(e,n);try{let p=new Function(...a,`"use strict"; return (${s});`),c=a.map(i=>n.placeholders.get(i));return p(...c)}catch(p){throw new Error(`Failed to evaluate expression ${s}: ${p.message}`)}},O=e=>{let n=e.replace(/[^a-zA-Z0-9_$]/g,"");return n?/[A-Za-z_$]/.test(n[0])?n:`Component${n}`:"Component"},j=(e,n,t)=>{let r=t.get(e);if(r)return r;let o=e.displayName||e.name||`Component${n.length}`,s=O(o??""),a=s,p=1;for(;n.some(i=>i.name===a);)a=`${s}${p++}`;let c={name:a,value:e};return n.push(c),t.set(e,c),c},k=(e,n)=>{let t=e.raw??e,r=new Map,o=[],s=new Map,a=t[0]??"",p=_++,c=0;for(let i=0;i<n.length;i++){let u=t[i]??"",g=t[i+1]??"",m=n[i],d=F.test(u)||P.test(u);if(d&&typeof m=="function"){let $=j(m,o,s);a+=$.name+g;continue}if(d&&typeof m=="string"){a+=m+g;continue}let l=`${h}${p}_${c++}__`;r.set(l,m),a+=l+g;}return {source:a,placeholders:r,bindings:o}};var z=e=>!e||typeof e=="string"?false:typeof e[Symbol.iterator]=="function",L=e=>!e||typeof e!="object"&&typeof e!="function"?false:typeof e.then=="function",x=(e,n)=>{if(n!=null&&typeof n!="boolean"){if(L(n))throw new Error("Async values are not supported inside reactJsx template results.");if(Array.isArray(n)){n.forEach(t=>x(e,t));return}if(z(n)){for(let t of n)x(e,t);return}e.push(n);}},y=(e,n)=>R(e,n,t=>J(t,n)),v=(e,n)=>{let t={};return e.forEach(r=>{if(r.type==="JSXSpreadAttribute"){let s=y(r.argument,n);s&&typeof s=="object"&&!Array.isArray(s)&&Object.assign(t,s);return}let o=f(r.name);if(!r.value){t[o]=true;return}if(r.value.type==="Literal"){t[o]=r.value.value;return}if(r.value.type==="JSXExpressionContainer"){if(r.value.expression.type==="JSXEmptyExpression")return;t[o]=y(r.value.expression,n);}}),t},N=(e,n)=>{let t=[];return e.forEach(r=>{switch(r.type){case "JSXText":{X(r.value,n.placeholders).forEach(s=>x(t,s));break}case "JSXExpressionContainer":{if(r.expression.type==="JSXEmptyExpression")break;x(t,y(r.expression,n));break}case "JSXSpreadChild":{let o=y(r.expression,n);o!=null&&x(t,o);break}case "JSXElement":case "JSXFragment":{t.push(J(r,n));break}}}),t},A=(e,n,t)=>createElement(e,n,...t),V=(e,n)=>{let t=e.openingElement,r=f(t.name),o=n.components.get(r),s=v(t.attributes,n),a=N(e.children,n);if(o)return A(o,s,a);if(/[A-Z]/.test(r[0]??""))throw new Error(`Unknown component "${r}". Did you interpolate it with the template literal?`);return A(r,s,a)},J=(e,n)=>{if(e.type==="JSXFragment"){let t=N(e.children,n);return createElement(Fragment,null,...t)}return V(e,n)},Z=(e,...n)=>{let t=k(e,n),r=parseSync("inline.jsx",t.source,S);if(r.errors.length>0)throw new Error(T(r.errors[0]));let o=w(r.program),s={source:t.source,placeholders:t.placeholders,components:new Map(t.bindings.map(a=>[a.name,a.value]))};return J(o,s)};export{Z as reactJsx};

package/dist/lite/react/index.js

@@ -1,3 +1,3 @@
-import {parseSync}from'oxc-parser';import {createElement,Fragment}from'react';var N=/<\s*$/,$=/<\/\s*$/,F="__KX_EXPR__",P=0,C={lang:"jsx",sourceType:"module",range:true,preserveParens:true},S=e=>{let n=`[oxc-parser] ${e.message}`;if(e.labels?.length){let t=e.labels[0];t.message&&(n+=`
+import {parseSync}from'oxc-parser';import {createElement,Fragment}from'react';var F=/<\s*$/,P=/<\/\s*$/,h="__KX_EXPR__",C=new RegExp(`${h}\\d+_\\d+__`,"g"),_=0,S={lang:"jsx",sourceType:"module",range:true,preserveParens:true},T=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},T=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.")},l=e=>{switch(e.type){case "JSXIdentifier":return e.name;case "JSXNamespacedName":return `${e.namespace.name}:${e.name.name}`;case "JSXMemberExpression":return `${l(e.object)}.${e.property.name}`;default:return ""}},g=(e,n)=>{if(!e||typeof e!="object")return;let t=e;typeof t.type=="string"&&(n(t),Object.values(t).forEach(o=>{if(o){if(Array.isArray(o)){o.forEach(r=>g(r,n));return}typeof o=="object"&&g(o,n);}}));},X=e=>{let t=e.replace(/\r/g,"").replace(/\n\s+/g," ").trim();return t.length>0?t:""},O=(e,n)=>{let t=new Set;return g(e,o=>{o.type==="Identifier"&&n.placeholders.has(o.name)&&t.add(o.name);}),Array.from(t)},h=(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[o,r]=e.range,s=n.source.slice(o,r),a=O(e,n);try{let c=new Function(...a,`"use strict"; return (${s});`),i=a.map(p=>n.placeholders.get(p));return c(...i)}catch(c){throw new Error(`Failed to evaluate expression ${s}: ${c.message}`)}},_=e=>{let n=e.replace(/[^a-zA-Z0-9_$]/g,"");return n?/[A-Za-z_$]/.test(n[0])?n:`Component${n}`:"Component"},j=(e,n,t)=>{let o=t.get(e);if(o)return o;let r=e.displayName||e.name||`Component${n.length}`,s=_(r??""),a=s,c=1;for(;n.some(p=>p.name===a);)a=`${s}${c++}`;let i={name:a,value:e};return n.push(i),t.set(e,i),i},w=(e,n)=>{let t=e.raw??e,o=new Map,r=[],s=new Map,a=t[0]??"",c=P++,i=0;for(let p=0;p<n.length;p++){let f=t[p]??"",x=t[p+1]??"",m=n[p],E=N.test(f)||$.test(f);if(E&&typeof m=="function"){let b=j(m,r,s);a+=b.name+x;continue}if(E&&typeof m=="string"){a+=m+x;continue}let J=`${F}${c}_${i++}__`;o.set(J,m),a+=J+x;}return {source:a,placeholders:o,bindings:r}};var M=e=>!e||typeof e=="string"?false:typeof e[Symbol.iterator]=="function",v=e=>!e||typeof e!="object"&&typeof e!="function"?false:typeof e.then=="function",u=(e,n)=>{if(n!=null&&typeof n!="boolean"){if(v(n))throw new Error("Async values are not supported inside reactJsx template results.");if(Array.isArray(n)){n.forEach(t=>u(e,t));return}if(M(n)){for(let t of n)u(e,t);return}e.push(n);}},d=(e,n)=>h(e,n,t=>y(t,n)),L=(e,n)=>{let t={};return e.forEach(o=>{if(o.type==="JSXSpreadAttribute"){let s=d(o.argument,n);s&&typeof s=="object"&&!Array.isArray(s)&&Object.assign(t,s);return}let r=l(o.name);if(!o.value){t[r]=true;return}if(o.value.type==="Literal"){t[r]=o.value.value;return}if(o.value.type==="JSXExpressionContainer"){if(o.value.expression.type==="JSXEmptyExpression")return;t[r]=d(o.value.expression,n);}}),t},A=(e,n)=>{let t=[];return e.forEach(o=>{switch(o.type){case "JSXText":{let r=X(o.value);r&&t.push(r);break}case "JSXExpressionContainer":{if(o.expression.type==="JSXEmptyExpression")break;u(t,d(o.expression,n));break}case "JSXSpreadChild":{let r=d(o.expression,n);r!=null&&u(t,r);break}case "JSXElement":case "JSXFragment":{t.push(y(o,n));break}}}),t},R=(e,n,t)=>createElement(e,n,...t),z=(e,n)=>{let t=e.openingElement,o=l(t.name),r=n.components.get(o),s=L(t.attributes,n),a=A(e.children,n);if(r)return R(r,s,a);if(/[A-Z]/.test(o[0]??""))throw new Error(`Unknown component "${o}". Did you interpolate it with the template literal?`);return R(o,s,a)},y=(e,n)=>{if(e.type==="JSXFragment"){let t=A(e.children,n);return createElement(Fragment,null,...t)}return z(e,n)},V=(e,...n)=>{let t=w(e,n),o=parseSync("inline.jsx",t.source,C);if(o.errors.length>0)throw new Error(S(o.errors[0]));let r=T(o.program),s={source:t.source,placeholders:t.placeholders,components:new Map(t.bindings.map(a=>[a.name,a.value]))};return y(r,s)};export{V as reactJsx};
+${e.codeframe}`),n},w=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.")},f=e=>{switch(e.type){case "JSXIdentifier":return e.name;case "JSXNamespacedName":return `${e.namespace.name}:${e.name.name}`;case "JSXMemberExpression":return `${f(e.object)}.${e.property.name}`;default:return ""}},E=(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=>E(o,n));return}typeof r=="object"&&E(r,n);}}));},X=(e,n)=>{let t=e.replace(/\r/g,"").replace(/\n\s+/g," "),r=e.match(/^\s*/)?.[0]??"",o=e.match(/\s*$/)?.[0]??"",s=/\n/.test(r),a=/\n/.test(o),p=t;if(s&&(p=p.replace(/^\s+/,"")),a&&(p=p.replace(/\s+$/,"")),p.length===0||p.trim().length===0)return [];let c=[];C.lastIndex=0;let i=0,u;for(;u=C.exec(p);){let m=u.index,d=p.slice(i,m);d&&c.push(d);let l=u[0];n.has(l)?c.push(n.get(l)):c.push(l),i=m+l.length;}let g=p.slice(i);return g&&c.push(g),c},I=(e,n)=>{let t=new Set;return E(e,r=>{r.type==="Identifier"&&n.placeholders.has(r.name)&&t.add(r.name);}),Array.from(t)},R=(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=I(e,n);try{let p=new Function(...a,`"use strict"; return (${s});`),c=a.map(i=>n.placeholders.get(i));return p(...c)}catch(p){throw new Error(`Failed to evaluate expression ${s}: ${p.message}`)}},O=e=>{let n=e.replace(/[^a-zA-Z0-9_$]/g,"");return n?/[A-Za-z_$]/.test(n[0])?n:`Component${n}`:"Component"},j=(e,n,t)=>{let r=t.get(e);if(r)return r;let o=e.displayName||e.name||`Component${n.length}`,s=O(o??""),a=s,p=1;for(;n.some(i=>i.name===a);)a=`${s}${p++}`;let c={name:a,value:e};return n.push(c),t.set(e,c),c},k=(e,n)=>{let t=e.raw??e,r=new Map,o=[],s=new Map,a=t[0]??"",p=_++,c=0;for(let i=0;i<n.length;i++){let u=t[i]??"",g=t[i+1]??"",m=n[i],d=F.test(u)||P.test(u);if(d&&typeof m=="function"){let $=j(m,o,s);a+=$.name+g;continue}if(d&&typeof m=="string"){a+=m+g;continue}let l=`${h}${p}_${c++}__`;r.set(l,m),a+=l+g;}return {source:a,placeholders:r,bindings:o}};var z=e=>!e||typeof e=="string"?false:typeof e[Symbol.iterator]=="function",L=e=>!e||typeof e!="object"&&typeof e!="function"?false:typeof e.then=="function",x=(e,n)=>{if(n!=null&&typeof n!="boolean"){if(L(n))throw new Error("Async values are not supported inside reactJsx template results.");if(Array.isArray(n)){n.forEach(t=>x(e,t));return}if(z(n)){for(let t of n)x(e,t);return}e.push(n);}},y=(e,n)=>R(e,n,t=>J(t,n)),v=(e,n)=>{let t={};return e.forEach(r=>{if(r.type==="JSXSpreadAttribute"){let s=y(r.argument,n);s&&typeof s=="object"&&!Array.isArray(s)&&Object.assign(t,s);return}let o=f(r.name);if(!r.value){t[o]=true;return}if(r.value.type==="Literal"){t[o]=r.value.value;return}if(r.value.type==="JSXExpressionContainer"){if(r.value.expression.type==="JSXEmptyExpression")return;t[o]=y(r.value.expression,n);}}),t},N=(e,n)=>{let t=[];return e.forEach(r=>{switch(r.type){case "JSXText":{X(r.value,n.placeholders).forEach(s=>x(t,s));break}case "JSXExpressionContainer":{if(r.expression.type==="JSXEmptyExpression")break;x(t,y(r.expression,n));break}case "JSXSpreadChild":{let o=y(r.expression,n);o!=null&&x(t,o);break}case "JSXElement":case "JSXFragment":{t.push(J(r,n));break}}}),t},A=(e,n,t)=>createElement(e,n,...t),V=(e,n)=>{let t=e.openingElement,r=f(t.name),o=n.components.get(r),s=v(t.attributes,n),a=N(e.children,n);if(o)return A(o,s,a);if(/[A-Z]/.test(r[0]??""))throw new Error(`Unknown component "${r}". Did you interpolate it with the template literal?`);return A(r,s,a)},J=(e,n)=>{if(e.type==="JSXFragment"){let t=N(e.children,n);return createElement(Fragment,null,...t)}return V(e,n)},Z=(e,...n)=>{let t=k(e,n),r=parseSync("inline.jsx",t.source,S);if(r.errors.length>0)throw new Error(T(r.errors[0]));let o=w(r.program),s={source:t.source,placeholders:t.placeholders,components:new Map(t.bindings.map(a=>[a.name,a.value]))};return J(o,s)};export{Z as reactJsx};

package/dist/loader/jsx.js

@@ -25,10 +25,14 @@ class ReactTemplateBuilder {
         children.forEach(child => {
             switch (child.type) {
                 case 'JSXText': {
-                    const text = normalizeJsxTextValue(child.value);
-                    if (text) {
-                        compiled.push(JSON.stringify(text));
-                    }
+                    const segments = normalizeJsxTextSegments(child.value, this.placeholderMap);
+                    segments.forEach(segment => {
+                        if (segment.kind === 'text') {
+                            compiled.push(JSON.stringify(segment.value));
+                            return;
+                        }
+                        compiled.push(segment.value);
+                    });
                     break;
                 }
                 case 'JSXExpressionContainer': {
@@ -148,6 +152,9 @@ class ReactTemplateBuilder {
             }
             return node.name;
         }
+        if (node.type === 'Literal') {
+            return JSON.stringify(node.value);
+        }
         if ('range' in node && Array.isArray(node.range)) {
             throw new Error('[jsx-loader] Unable to inline complex expressions in react mode.');
         }
@@ -192,6 +199,7 @@ const getTemplateExpressionContext = (left, right) => {
     return { type: 'childText' };
 };
 const TEMPLATE_EXPR_PLACEHOLDER_PREFIX = '__JSX_LOADER_TEMPLATE_EXPR_';
+const TEMPLATE_EXPR_PLACEHOLDER_PATTERN = new RegExp(`${TEMPLATE_EXPR_PLACEHOLDER_PREFIX}\\d+__`, 'g');
 const MODULE_PARSER_OPTIONS = {
     lang: 'tsx',
     sourceType: 'module',
@@ -386,10 +394,47 @@ const extractJsxRoot = (program) => {
     }
     throw new Error('[jsx-loader] Expected the template to contain a single JSX root node.');
 };
-const normalizeJsxTextValue = (value) => {
+const normalizeJsxTextSegments = (value, placeholders) => {
     const collapsed = value.replace(/\r/g, '').replace(/\n\s+/g, ' ');
-    const trimmed = collapsed.trim();
-    return trimmed.length > 0 ? trimmed : '';
+    const leadingWhitespace = value.match(/^\s*/)?.[0] ?? '';
+    const trailingWhitespace = value.match(/\s*$/)?.[0] ?? '';
+    const trimStart = /\n/.test(leadingWhitespace);
+    const trimEnd = /\n/.test(trailingWhitespace);
+    let normalized = collapsed;
+    if (trimStart) {
+        normalized = normalized.replace(/^\s+/, '');
+    }
+    if (trimEnd) {
+        normalized = normalized.replace(/\s+$/, '');
+    }
+    if (normalized.length === 0 || normalized.trim().length === 0) {
+        return [];
+    }
+    const segments = [];
+    TEMPLATE_EXPR_PLACEHOLDER_PATTERN.lastIndex = 0;
+    let cursor = 0;
+    let match;
+    while ((match = TEMPLATE_EXPR_PLACEHOLDER_PATTERN.exec(normalized))) {
+        const index = match.index;
+        const slice = normalized.slice(cursor, index);
+        if (slice) {
+            segments.push({ kind: 'text', value: slice });
+        }
+        const marker = match[0];
+        const expression = placeholders.get(marker);
+        if (expression) {
+            segments.push({ kind: 'expression', value: expression });
+        }
+        else {
+            segments.push({ kind: 'text', value: marker });
+        }
+        cursor = index + marker.length;
+    }
+    const remainder = normalized.slice(cursor);
+    if (remainder) {
+        segments.push({ kind: 'text', value: remainder });
+    }
+    return segments;
 };
 const TAG_PLACEHOLDER_PREFIX = '__JSX_LOADER_TAG_EXPR_';
 const buildTemplateSource = (quasis, expressions, source, tag) => {

package/dist/react/react-jsx.js

@@ -1,5 +1,5 @@
 import { parseSync } from 'oxc-parser';
-import { buildTemplate, evaluateExpression, extractRootNode, formatParserError, getIdentifierName, normalizeJsxText, parserOptions, } from '../runtime/shared.js';
+import { buildTemplate, evaluateExpression, extractRootNode, formatParserError, getIdentifierName, normalizeJsxTextSegments, parserOptions, } from '../runtime/shared.js';
 import { Fragment, createElement, } from 'react';
 const isIterable = (value) => {
     if (!value || typeof value === 'string') {
@@ -69,10 +69,8 @@ const evaluateReactJsxChildren = (children, ctx) => {
     children.forEach(child => {
         switch (child.type) {
             case 'JSXText': {
-                const text = normalizeJsxText(child.value);
-                if (text) {
-                    resolved.push(text);
-                }
+                const segments = normalizeJsxTextSegments(child.value, ctx.placeholders);
+                segments.forEach(segment => appendReactChild(resolved, segment));
                 break;
             }
             case 'JSXExpressionContainer': {

package/dist/runtime/shared.d.ts

@@ -1,5 +1,7 @@
 import type { Expression, JSXElement, JSXFragment, JSXIdentifier, JSXMemberExpression, JSXNamespacedName, Program } from '@oxc-project/types';
 import type { OxcError, ParserOptions } from 'oxc-parser';
+export declare const PLACEHOLDER_PREFIX = "__KX_EXPR__";
+export declare const placeholderPattern: RegExp;
 type AnyTemplateFunction = (...args: any[]) => unknown;
 type AnyTemplateConstructor = abstract new (...args: any[]) => unknown;
 export type TemplateComponent = (AnyTemplateFunction | AnyTemplateConstructor) & {
@@ -29,7 +31,7 @@ type AnyOxcNode = {
     [key: string]: unknown;
 };
 export declare const walkAst: (node: unknown, visitor: (target: AnyOxcNode) => void) => void;
-export declare const normalizeJsxText: (value: string) => string;
+export declare const normalizeJsxTextSegments: (value: string, placeholders: Map<string, unknown>) => unknown[];
 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;

package/dist/runtime/shared.js

@@ -1,6 +1,7 @@
 const OPEN_TAG_RE = /<\s*$/;
 const CLOSE_TAG_RE = /<\/\s*$/;
-const PLACEHOLDER_PREFIX = '__KX_EXPR__';
+export const PLACEHOLDER_PREFIX = '__KX_EXPR__';
+export const placeholderPattern = new RegExp(`${PLACEHOLDER_PREFIX}\\d+_\\d+__`, 'g');
 let invocationCounter = 0;
 export const parserOptions = {
     lang: 'jsx',
@@ -66,10 +67,46 @@ export const walkAst = (node, visitor) => {
         }
     });
 };
-export const normalizeJsxText = (value) => {
+export const normalizeJsxTextSegments = (value, placeholders) => {
     const collapsed = value.replace(/\r/g, '').replace(/\n\s+/g, ' ');
-    const trimmed = collapsed.trim();
-    return trimmed.length > 0 ? trimmed : '';
+    const leadingWhitespace = value.match(/^\s*/)?.[0] ?? '';
+    const trailingWhitespace = value.match(/\s*$/)?.[0] ?? '';
+    const trimStart = /\n/.test(leadingWhitespace);
+    const trimEnd = /\n/.test(trailingWhitespace);
+    let normalized = collapsed;
+    if (trimStart) {
+        normalized = normalized.replace(/^\s+/, '');
+    }
+    if (trimEnd) {
+        normalized = normalized.replace(/\s+$/, '');
+    }
+    if (normalized.length === 0 || normalized.trim().length === 0) {
+        return [];
+    }
+    const segments = [];
+    placeholderPattern.lastIndex = 0;
+    let cursor = 0;
+    let match;
+    while ((match = placeholderPattern.exec(normalized))) {
+        const index = match.index;
+        const slice = normalized.slice(cursor, index);
+        if (slice) {
+            segments.push(slice);
+        }
+        const token = match[0];
+        if (placeholders.has(token)) {
+            segments.push(placeholders.get(token));
+        }
+        else {
+            segments.push(token);
+        }
+        cursor = index + token.length;
+    }
+    const remainder = normalized.slice(cursor);
+    if (remainder) {
+        segments.push(remainder);
+    }
+    return segments;
 };
 export const collectPlaceholderNames = (expression, ctx) => {
     const placeholders = new Set();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knighted/jsx",
-  "version": "1.2.0-rc.4",
+  "version": "1.2.0",
   "description": "Runtime JSX tagged template that renders DOM or React trees anywhere without a build step.",
   "keywords": [
     "jsx runtime",
@@ -65,17 +65,19 @@
     "./package.json": "./package.json"
   },
   "engines": {
-    "node": ">=22"
+    "node": ">=22.3.0"
   },
   "engineStrict": true,
   "scripts": {
     "build": "duel && npm run build:lite",
+    "prepare": "husky",
     "precheck-types": "npm run build",
     "check-types": "npm run check-types:lib && npm run check-types:demo",
     "check-types:lib": "tsc --noEmit --project tsconfig.json",
     "check-types:demo": "tsc --noEmit --project examples/browser/tsconfig.json",
     "lint": "eslint src test",
     "prettier": "prettier -w .",
+    "prettier:check": "prettier --check .",
     "test": "vitest run --coverage",
     "test:watch": "vitest",
     "test:e2e": "npm run build && npm run setup:wasm && npm run build:fixture && playwright test",
@@ -103,7 +105,9 @@
     "eslint-plugin-n": "^17.10.3",
     "eslint-plugin-playwright": "^2.4.0",
     "http-server": "^14.1.1",
+    "husky": "^9.1.7",
     "jsdom": "^27.2.0",
+    "lint-staged": "^16.2.7",
     "lit": "^3.2.1",
     "next": "^16.0.0",
     "prettier": "^3.7.3",
@@ -158,5 +162,9 @@
     "printWidth": 90,
     "semi": false,
     "singleQuote": true
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs,cts,mts}": "eslint --max-warnings=0",
+    "*.{js,jsx,ts,tsx,mjs,cjs,cts,mts,json,md,css,scss,html}": "prettier --check"
   }
 }