@knighted/jsx 1.2.0-rc.2 → 1.2.0-rc.4

package/README.md

@@ -56,7 +56,7 @@ const handleClick = () => {
 
 const button = jsx`
   <button className={${`counter-${count}`}} onClick={${handleClick}}>
-    Count is {${count}}
+    Count is ${count}
   </button>
 `
 
@@ -78,7 +78,7 @@ const App = () => {
   return reactJsx`
     <section className="react-demo">
       <h2>Hello from React</h2>
-      <p>Count is {${count}}</p>
+      <p>Count is ${count}</p>
       <button onClick={${() => setCount(value => value + 1)}}>
         Increment
       </button>
@@ -147,12 +147,12 @@ import { renderToString } from 'react-dom/server'
 
 const Badge = ({ label }: { label: string }) =>
   reactJsx`
-    <button type="button">React says: {${label}}</button>
+    <button type="button">React says: ${label}</button>
   `
 
 const reactMarkup = renderToString(
   reactJsx`
-    <${Badge} label={${'Server-only'}} />
+    <${Badge} label="Server-only" />
   `,
 )
 
@@ -250,7 +250,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 (`${...}`). Wrap them in JSX braces to keep the syntax valid: `className={${value}}`, `{${items}}`, etc.
+- 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}`.
 - 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.
 
@@ -266,10 +266,12 @@ const Button = ({ children, variant = 'primary' }) => {
   return el
 }
 
+const label = 'Tap me'
+
 const view = jsx`
   <section>
-    <${Button} variant={${'ghost'}}>
-      {${'Tap me'}}
+    <${Button} variant="ghost">
+      ${label}
     </${Button}>
   </section>
 `
@@ -318,13 +320,16 @@ Prefer the manual route? You can still run `npm_config_ignore_platform=true npm
 
 ### Lite bundle entry
 
-If you already run this package through your own bundler you can trim a few extra kilobytes by importing the minified entry:
+If you already run this package through your own bundler you can trim a few extra kilobytes by importing the minified entries:
 
 ```ts
 import { jsx } from '@knighted/jsx/lite'
+import { reactJsx } from '@knighted/jsx/react/lite'
+import { jsx as nodeJsx } from '@knighted/jsx/node/lite'
+import { reactJsx as nodeReactJsx } from '@knighted/jsx/node/react/lite'
 ```
 
-The `lite` export ships the exact same API as the default entry but is pre-minified via `tsup`, so bundlers have less work to do and browsers download ~10% less code. No functionality is removed—you can freely swap between the standard and lite imports.
+Each lite subpath ships the same API as its standard counterpart but is pre-minified and scoped to just that runtime (DOM, React, Node DOM, or Node React). Swap them in when you want the smallest possible bundles; otherwise the default exports keep working as-is.
 
 ## Testing
 
@@ -336,6 +341,15 @@ npm run test
 
 Tests live in `test/jsx.test.ts` and cover DOM props/events, custom components, fragments, and iterable children so you can see exactly how the template tag is meant to be used.
 
+Need full end-to-end coverage? The Playwright suite boots the CDN demo (`examples/esm-demo.html`) and the loader-backed Rspack fixture to verify nested trees, sibling structures, and interop with Lit/React:
+
+```sh
+npm run test:e2e
+```
+
+> [!NOTE]
+> The e2e script builds the library, installs the WASM parser binding, bundles the loader fixture, and then runs `playwright test`. Make sure Playwright browsers are installed locally (`npx playwright install`).
+
 ## Browser demo / Vite build
 
 This repo ships with a ready-to-run Vite demo under `examples/browser` that bundles the library (make sure you have installed the WASM binding via the command above first). Use it for a full end-to-end verification in a real browser (the demo imports `@knighted/jsx/lite` so you can confirm the lighter entry behaves identically):
@@ -357,19 +371,6 @@ For a zero-build verification of the lite bundle, open `examples/esm-demo-lite.h
 - JSX identifiers are resolved at runtime through template interpolations; you cannot reference closures directly inside the template without using `${...}`.
 - Promises/async components are not supported.
 
-## Performance notes vs `htm`
-
-[`htm`](https://github.com/developit/htm) popularized tagged template literals for view rendering by tokenizing the template strings on the fly and calling a user-provided hyperscript function. This library takes a different approach: every invocation runs the native `oxc-parser` (compiled to WebAssembly) to build a real JSX AST before constructing DOM nodes.
-
-Tradeoffs to keep in mind:
-
-- **Parser vs tokenizer** – `htm` performs lightweight string tokenization, while `@knighted/jsx` pays a higher one-time parse cost but gains the full JSX grammar (fragments, spread children, nested namespaces) without heuristics. For large or deeply nested templates the WASM-backed parser is typically faster and more accurate than string slicing.
-- **DOM-first rendering** – this runtime builds DOM nodes directly, so the cost after parsing is mostly attribute assignment and child insertion. `htm` usually feeds a virtual DOM/hyperscript factory (e.g., Preact’s `h`), which may add an extra abstraction layer before hitting the DOM.
-- **Bundle size** – including the parser and WASM binding is heavier than `htm`’s ~1 kB tokenizer. If you just need hyperscript sugar, `htm` stays leaner; if you value real JSX semantics without a build step, the extra kilobytes buy you correctness and speed on complex trees.
-  - **Actual size** – as of `v1.2.0-rc.1` the default `dist/jsx.js` bundle is ~9.0 kB raw / ~2.3 kB min+gzip, while the `@knighted/jsx/lite` entry stays ~5.7 kB raw / ~2.5 kB min+gzip. `htm` weighs in at roughly 0.7 kB min+gzip, so the lite entry narrows the gap to ~1.8 kB for production payloads.
-
-In short, `@knighted/jsx` trades a slightly larger runtime for the ability to parse genuine JSX with native performance, whereas `htm` favors minimal footprint and hyperscript integration. Pick the tool that aligns with your rendering stack and performance envelope.
-
 ## License
 
 MIT © Knighted Code Monkey

package/dist/lite/node/index.js

@@ -0,0 +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+=`
+${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};

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

@@ -0,0 +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+=`
+${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};

package/dist/lite/react/index.js

@@ -0,0 +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+=`
+${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};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knighted/jsx",
-  "version": "1.2.0-rc.2",
+  "version": "1.2.0-rc.4",
   "description": "Runtime JSX tagged template that renders DOM or React trees anywhere without a build step.",
   "keywords": [
     "jsx runtime",
@@ -33,16 +33,31 @@
       "import": "./dist/react/index.js",
       "default": "./dist/react/index.js"
     },
+    "./react/lite": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/lite/react/index.js",
+      "default": "./dist/lite/react/index.js"
+    },
     "./node": {
       "types": "./dist/node/index.d.ts",
       "import": "./dist/node/index.js",
       "default": "./dist/node/index.js"
     },
+    "./node/lite": {
+      "types": "./dist/node/index.d.ts",
+      "import": "./dist/lite/node/index.js",
+      "default": "./dist/lite/node/index.js"
+    },
     "./node/react": {
       "types": "./dist/node/react/index.d.ts",
       "import": "./dist/node/react/index.js",
       "default": "./dist/node/react/index.js"
     },
+    "./node/react/lite": {
+      "types": "./dist/node/react/index.d.ts",
+      "import": "./dist/lite/node/react/index.js",
+      "default": "./dist/lite/node/react/index.js"
+    },
     "./loader": {
       "import": "./dist/loader/jsx.js",
       "default": "./dist/loader/jsx.js"
@@ -63,6 +78,7 @@
     "prettier": "prettier -w .",
     "test": "vitest run --coverage",
     "test:watch": "vitest",
+    "test:e2e": "npm run build && npm run setup:wasm && npm run build:fixture && playwright test",
     "build:fixture": "node scripts/build-rspack-fixture.mjs",
     "demo:node-ssr": "node test/fixtures/node-ssr/render.mjs",
     "dev": "vite dev --config vite.config.ts",
@@ -75,15 +91,17 @@
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@knighted/duel": "^2.1.6",
-    "@types/node": "^22.10.1",
+    "@oxc-project/types": "^0.99.0",
+    "@playwright/test": "^1.57.0",
     "@rspack/core": "^1.0.5",
     "@types/jsdom": "^27.0.0",
+    "@types/node": "^22.10.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitest/coverage-v8": "^4.0.14",
     "eslint": "^9.39.1",
     "eslint-plugin-n": "^17.10.3",
-    "@oxc-project/types": "^0.99.0",
+    "eslint-plugin-playwright": "^2.4.0",
     "http-server": "^14.1.1",
     "jsdom": "^27.2.0",
     "lit": "^3.2.1",
@@ -103,9 +121,9 @@
     "oxc-parser": "^0.99.0"
   },
   "peerDependencies": {
-    "react": ">=18",
     "jsdom": "*",
-    "linkedom": "*"
+    "linkedom": "*",
+    "react": ">=18"
   },
   "peerDependenciesMeta": {
     "react": {