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

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>
 `
@@ -336,6 +338,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 +368,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knighted/jsx",
-  "version": "1.2.0-rc.2",
+  "version": "1.2.0-rc.3",
   "description": "Runtime JSX tagged template that renders DOM or React trees anywhere without a build step.",
   "keywords": [
     "jsx runtime",
@@ -63,6 +63,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 +76,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 +106,9 @@
     "oxc-parser": "^0.99.0"
   },
   "peerDependencies": {
-    "react": ">=18",
     "jsdom": "*",
-    "linkedom": "*"
+    "linkedom": "*",
+    "react": ">=18"
   },
   "peerDependenciesMeta": {
     "react": {