@knighted/jsx 1.0.0-alpha.0

package/README.md

@@ -0,0 +1,132 @@
+# [`@knighted/jsx`](https://www.npmjs.com/package/@knighted/jsx)
+
+![CI](https://github.com/knightedcodemonkey/jsx/actions/workflows/ci.yml/badge.svg)
+[![codecov](https://codecov.io/gh/knightedcodemonkey/jsx/graph/badge.svg?token=tjxuFwcwkr)](https://codecov.io/gh/knightedcodemonkey/jsx)
+[![NPM version](https://img.shields.io/npm/v/@knighted/jsx.svg)](https://www.npmjs.com/package/@knighted/jsx)
+
+A runtime JSX template tag backed by the [`oxc-parser`](https://github.com/oxc-project/oxc) WebAssembly build. Use real JSX syntax directly inside template literals and turn the result into live DOM nodes (or values returned from your own components) without running a bundler.
+
+## Installation
+
+```sh
+npm install @knighted/jsx
+```
+
+> [!IMPORTANT]
+> This package is ESM-only and targets browsers or ESM-aware bundlers. `require()` is not supported; use native `import`/`<script type="module">` and a DOM-like environment.
+
+The parser automatically uses native bindings when it runs in Node.js. To enable the WASM binding for browser builds you also need the `@oxc-parser/binding-wasm32-wasi` package. Because npm enforces the `cpu: ["wasm32"]` flag you must opt into the install explicitly:
+
+```sh
+npm_config_ignore_platform=true npm install @oxc-parser/binding-wasm32-wasi
+```
+
+> Tip: public CDNs such as `esm.sh` or `jsdelivr` already publish bundles that include the WASM binding, so you can import this package directly from those endpoints in `<script type="module">` blocks without any extra setup.
+
+## Usage
+
+```ts
+import { jsx } from '@knighted/jsx'
+
+const count = 3
+const handleClick = () => console.log('clicked!')
+
+const button = jsx`
+  <button className={${`counter-${count}`}} onClick={${handleClick}}>
+    Count is {${count}}
+  </button>
+`
+
+document.body.append(button)
+```
+
+### 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.
+- 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.
+
+### Components
+
+You can inline components by interpolating the function used for the tag name. The component receives a props object plus the optional `children` prop and can return anything that `jsx` can render (DOM nodes, strings, fragments, other arrays, ...).
+
+```ts
+const Button = ({ children, variant = 'primary' }) => {
+  const el = document.createElement('button')
+  el.dataset.variant = variant
+  el.append(children ?? '')
+  return el
+}
+
+const view = jsx`
+  <section>
+    <${Button} variant={${'ghost'}}>
+      {${'Tap me'}}
+    </${Button}>
+  </section>
+`
+
+document.body.append(view)
+```
+
+### Fragments & SVG
+
+Use JSX fragments (`<>...</>`) for multi-root templates. SVG trees automatically switch to the `http://www.w3.org/2000/svg` namespace once they enter an `<svg>` tag, and fall back inside `<foreignObject>`.
+
+### DOM-specific props
+
+- `style` accepts either a string or an object. Object values handle CSS custom properties (`--token`) automatically.
+- `class` and `className` both work and can be strings or arrays.
+- Event handlers use the `on<Event>` naming convention (e.g. `onClick`).
+- `ref` supports callback refs as well as mutable `{ current }` objects.
+- `dangerouslySetInnerHTML` expects an object with an `__html` field, mirroring React.
+
+## Browser usage
+
+When you are not using a bundler, load the module directly from a CDN that understands npm packages:
+
+```html
+<script type="module">
+  import { jsx } from 'https://esm.sh/@knighted/jsx'
+
+  const message = jsx`<p>Hello from the browser</p>`
+  document.body.append(message)
+</script>
+```
+
+If you are building locally with Vite/Rollup/Webpack make sure the WASM binding is installable (see the `npm_config_ignore_platform` tip above) so the bundler can resolve `@oxc-parser/binding-wasm32-wasi`.
+
+## Testing
+
+Run the Vitest suite (powered by jsdom) to exercise the DOM runtime and component support:
+
+```sh
+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.
+
+## Browser demo / Vite build
+
+This repo ships with a ready-to-run Vite demo under `examples/browser` that bundles the library (and the WASM binding vendored in `vendor/binding-wasm32-wasi`). Use it for a full end-to-end verification in a real browser:
+
+```sh
+# Start a dev server at http://localhost:5173
+npm run dev
+
+# Produce a production Rollup build and preview it
+npm run build:demo
+npm run preview
+```
+
+The Vite config aliases `@oxc-parser/binding-wasm32-wasi` to the vendored copy so you don’t have to perform any extra install tricks locally, while production consumers can still rely on the published package.
+
+## Limitations
+
+- Requires a DOM-like environment (it throws when `document` is missing).
+- 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.
+
+## License
+
+MIT © Knighted Code Monkey

package/dist/cjs/index.cjs

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

package/dist/cjs/index.d.cts

@@ -0,0 +1,2 @@
+export { jsx } from './jsx.cjs';
+export type { JsxRenderable, JsxComponent } from './jsx.cjs';

package/dist/cjs/jsx.cjs

@@ -0,0 +1,407 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsx = void 0;
+const oxc_parser_1 = require("oxc-parser");
+const OPEN_TAG_RE = /<\s*$/;
+const CLOSE_TAG_RE = /<\/\s*$/;
+const PLACEHOLDER_PREFIX = '__KX_EXPR__';
+let invocationCounter = 0;
+const parserOptions = {
+    lang: 'jsx',
+    sourceType: 'module',
+    range: true,
+    preserveParens: true,
+};
+const ensureDomAvailable = () => {
+    if (typeof document === 'undefined' || typeof document.createElement !== 'function') {
+        throw new Error('The jsx template tag requires a DOM-like environment (document missing).');
+    }
+};
+const formatParserError = (error) => {
+    let message = `[oxc-parser] ${error.message}`;
+    if (error.labels?.length) {
+        const label = error.labels[0];
+        if (label.message) {
+            message += `\n${label.message}`;
+        }
+    }
+    if (error.codeframe) {
+        message += `\n${error.codeframe}`;
+    }
+    return message;
+};
+const extractRootNode = (program) => {
+    for (const statement of program.body) {
+        if (statement.type === 'ExpressionStatement') {
+            const expression = statement.expression;
+            if (expression.type === 'JSXElement' || expression.type === 'JSXFragment') {
+                return expression;
+            }
+        }
+    }
+    throw new Error('The jsx template must contain a single JSX element or fragment.');
+};
+const getIdentifierName = (identifier) => {
+    switch (identifier.type) {
+        case 'JSXIdentifier':
+            return identifier.name;
+        case 'JSXNamespacedName':
+            return `${identifier.namespace.name}:${identifier.name.name}`;
+        case 'JSXMemberExpression':
+            return `${getIdentifierName(identifier.object)}.${identifier.property.name}`;
+        default:
+            return '';
+    }
+};
+const isNodeLike = (value) => {
+    if (typeof Node === 'undefined') {
+        return false;
+    }
+    return value instanceof Node || value instanceof DocumentFragment;
+};
+const isIterable = (value) => {
+    if (!value || typeof value === 'string') {
+        return false;
+    }
+    return typeof value[Symbol.iterator] === 'function';
+};
+const isPromiseLike = (value) => {
+    if (!value || (typeof value !== 'object' && typeof value !== 'function')) {
+        return false;
+    }
+    return typeof value.then === 'function';
+};
+const normalizeJsxText = (value) => {
+    const collapsed = value.replace(/\r/g, '').replace(/\n\s+/g, ' ');
+    const trimmed = collapsed.trim();
+    return trimmed.length > 0 ? trimmed : '';
+};
+const setDomProp = (element, name, value) => {
+    if (value === false || value === null || value === undefined) {
+        return;
+    }
+    if (name === 'dangerouslySetInnerHTML' &&
+        typeof value === 'object' &&
+        value &&
+        '__html' in value) {
+        element.innerHTML = String(value.__html ?? '');
+        return;
+    }
+    if (name === 'ref') {
+        if (typeof value === 'function') {
+            value(element);
+            return;
+        }
+        if (value && typeof value === 'object') {
+            ;
+            value.current = element;
+            return;
+        }
+    }
+    if (name === 'style' && typeof value === 'object' && value !== null) {
+        const styleRecord = value;
+        const styleTarget = element.style;
+        if (!styleTarget) {
+            return;
+        }
+        const mutableStyle = styleTarget;
+        Object.entries(styleRecord).forEach(([prop, propValue]) => {
+            if (propValue === null || propValue === undefined) {
+                return;
+            }
+            if (prop.startsWith('--')) {
+                styleTarget.setProperty(prop, String(propValue));
+                return;
+            }
+            mutableStyle[prop] = propValue;
+        });
+        return;
+    }
+    if (typeof value === 'function' && name.startsWith('on')) {
+        const eventName = name.slice(2).toLowerCase();
+        element.addEventListener(eventName, value);
+        return;
+    }
+    if (name === 'class' || name === 'className') {
+        const classValue = Array.isArray(value)
+            ? value.filter(Boolean).join(' ')
+            : String(value);
+        element.setAttribute('class', classValue);
+        return;
+    }
+    if (name === 'htmlFor') {
+        element.setAttribute('for', String(value));
+        return;
+    }
+    if (name in element && !name.includes('-')) {
+        element[name] = value;
+        return;
+    }
+    element.setAttribute(name, value === true ? '' : String(value));
+};
+const appendChildValue = (parent, value) => {
+    if (value === null || value === undefined) {
+        return;
+    }
+    if (typeof value === 'boolean') {
+        return;
+    }
+    if (isPromiseLike(value)) {
+        throw new Error('Async values are not supported inside jsx template results.');
+    }
+    if (Array.isArray(value)) {
+        value.forEach(child => appendChildValue(parent, child));
+        return;
+    }
+    if (isIterable(value)) {
+        for (const entry of value) {
+            appendChildValue(parent, entry);
+        }
+        return;
+    }
+    if (isNodeLike(value)) {
+        parent.appendChild(value);
+        return;
+    }
+    parent.appendChild(document.createTextNode(String(value)));
+};
+const resolveAttributes = (attributes, ctx) => {
+    const props = {};
+    attributes.forEach(attribute => {
+        if (attribute.type === 'JSXSpreadAttribute') {
+            const spreadValue = evaluateExpression(attribute.argument, ctx);
+            if (spreadValue && typeof spreadValue === 'object' && !Array.isArray(spreadValue)) {
+                Object.assign(props, spreadValue);
+            }
+            return;
+        }
+        const name = getIdentifierName(attribute.name);
+        if (!attribute.value) {
+            props[name] = true;
+            return;
+        }
+        if (attribute.value.type === 'Literal') {
+            props[name] = attribute.value.value;
+            return;
+        }
+        if (attribute.value.type === 'JSXExpressionContainer') {
+            if (attribute.value.expression.type === 'JSXEmptyExpression') {
+                return;
+            }
+            props[name] = evaluateExpression(attribute.value.expression, ctx);
+        }
+    });
+    return props;
+};
+const applyDomAttributes = (element, attributes, ctx) => {
+    const props = resolveAttributes(attributes, ctx);
+    Object.entries(props).forEach(([name, value]) => {
+        if (name === 'key') {
+            return;
+        }
+        if (name === 'children') {
+            appendChildValue(element, value);
+            return;
+        }
+        setDomProp(element, name, value);
+    });
+};
+const evaluateJsxChildren = (children, ctx, namespace) => {
+    const resolved = [];
+    children.forEach(child => {
+        switch (child.type) {
+            case 'JSXText': {
+                const text = normalizeJsxText(child.value);
+                if (text) {
+                    resolved.push(text);
+                }
+                break;
+            }
+            case 'JSXExpressionContainer': {
+                if (child.expression.type === 'JSXEmptyExpression') {
+                    break;
+                }
+                resolved.push(evaluateExpression(child.expression, ctx));
+                break;
+            }
+            case 'JSXSpreadChild': {
+                const spreadValue = evaluateExpression(child.expression, ctx);
+                if (spreadValue !== undefined && spreadValue !== null) {
+                    resolved.push(spreadValue);
+                }
+                break;
+            }
+            case 'JSXElement':
+            case 'JSXFragment': {
+                resolved.push(evaluateJsxNode(child, ctx, namespace));
+                break;
+            }
+        }
+    });
+    return resolved;
+};
+const evaluateComponent = (element, ctx, component, namespace) => {
+    const props = resolveAttributes(element.openingElement.attributes, ctx);
+    const childValues = evaluateJsxChildren(element.children, ctx, namespace);
+    if (childValues.length === 1) {
+        props.children = childValues[0];
+    }
+    else if (childValues.length > 1) {
+        props.children = childValues;
+    }
+    const result = component(props);
+    if (isPromiseLike(result)) {
+        throw new Error('Async jsx components are not supported.');
+    }
+    return result;
+};
+const evaluateJsxElement = (element, ctx, namespace) => {
+    const opening = element.openingElement;
+    const tagName = getIdentifierName(opening.name);
+    const component = ctx.components.get(tagName);
+    if (component) {
+        return evaluateComponent(element, ctx, component, namespace);
+    }
+    if (/[A-Z]/.test(tagName[0] ?? '')) {
+        throw new Error(`Unknown component "${tagName}". Did you interpolate it with the template literal?`);
+    }
+    const nextNamespace = tagName === 'svg' ? 'svg' : namespace;
+    const childNamespace = tagName === 'foreignObject' ? null : nextNamespace;
+    const domElement = nextNamespace === 'svg'
+        ? document.createElementNS('http://www.w3.org/2000/svg', tagName)
+        : document.createElement(tagName);
+    applyDomAttributes(domElement, opening.attributes, ctx);
+    const childValues = evaluateJsxChildren(element.children, ctx, childNamespace);
+    childValues.forEach(value => appendChildValue(domElement, value));
+    return domElement;
+};
+const evaluateJsxNode = (node, ctx, namespace) => {
+    if (node.type === 'JSXFragment') {
+        const fragment = document.createDocumentFragment();
+        const children = evaluateJsxChildren(node.children, ctx, namespace);
+        children.forEach(child => appendChildValue(fragment, child));
+        return fragment;
+    }
+    return evaluateJsxElement(node, ctx, namespace);
+};
+const walkAst = (node, visitor) => {
+    if (!node || typeof node !== 'object') {
+        return;
+    }
+    const candidate = node;
+    if (typeof candidate.type !== 'string') {
+        return;
+    }
+    visitor(candidate);
+    Object.values(candidate).forEach(value => {
+        if (!value) {
+            return;
+        }
+        if (Array.isArray(value)) {
+            value.forEach(child => walkAst(child, visitor));
+            return;
+        }
+        if (typeof value === 'object') {
+            walkAst(value, visitor);
+        }
+    });
+};
+const collectPlaceholderNames = (expression, ctx) => {
+    const placeholders = new Set();
+    walkAst(expression, node => {
+        if (node.type === 'Identifier' && ctx.placeholders.has(node.name)) {
+            placeholders.add(node.name);
+        }
+    });
+    return Array.from(placeholders);
+};
+const evaluateExpression = (expression, ctx) => {
+    if (expression.type === 'JSXElement' || expression.type === 'JSXFragment') {
+        return evaluateJsxNode(expression, ctx, null);
+    }
+    if (!('range' in expression) || !expression.range) {
+        throw new Error('Unable to evaluate expression: missing source range information.');
+    }
+    const [start, end] = expression.range;
+    const source = ctx.source.slice(start, end);
+    const placeholders = collectPlaceholderNames(expression, ctx);
+    try {
+        const evaluator = new Function(...placeholders, `"use strict"; return (${source});`);
+        const args = placeholders.map(name => ctx.placeholders.get(name));
+        return evaluator(...args);
+    }
+    catch (error) {
+        throw new Error(`Failed to evaluate expression ${source}: ${error.message}`);
+    }
+};
+const sanitizeIdentifier = (value) => {
+    const cleaned = value.replace(/[^a-zA-Z0-9_$]/g, '');
+    if (!cleaned) {
+        return 'Component';
+    }
+    if (!/[A-Za-z_$]/.test(cleaned[0])) {
+        return `Component${cleaned}`;
+    }
+    return cleaned;
+};
+const ensureBinding = (value, bindings, bindingLookup) => {
+    const existing = bindingLookup.get(value);
+    if (existing) {
+        return existing;
+    }
+    const descriptor = value.displayName || value.name || `Component${bindings.length}`;
+    const baseName = sanitizeIdentifier(descriptor);
+    let candidate = baseName;
+    let suffix = 1;
+    while (bindings.some(binding => binding.name === candidate)) {
+        candidate = `${baseName}${suffix++}`;
+    }
+    const binding = { name: candidate, value };
+    bindings.push(binding);
+    bindingLookup.set(value, binding);
+    return binding;
+};
+const buildTemplate = (strings, values) => {
+    const raw = strings.raw ?? strings;
+    const placeholders = new Map();
+    const bindings = [];
+    const bindingLookup = new Map();
+    let source = raw[0] ?? '';
+    const templateId = invocationCounter++;
+    let placeholderIndex = 0;
+    for (let idx = 0; idx < values.length; idx++) {
+        const chunk = raw[idx] ?? '';
+        const nextChunk = raw[idx + 1] ?? '';
+        const value = values[idx];
+        const isTagNamePosition = OPEN_TAG_RE.test(chunk) || CLOSE_TAG_RE.test(chunk);
+        if (isTagNamePosition && typeof value === 'function') {
+            const binding = ensureBinding(value, bindings, bindingLookup);
+            source += binding.name + nextChunk;
+            continue;
+        }
+        if (isTagNamePosition && typeof value === 'string') {
+            source += value + nextChunk;
+            continue;
+        }
+        const placeholder = `${PLACEHOLDER_PREFIX}${templateId}_${placeholderIndex++}__`;
+        placeholders.set(placeholder, value);
+        source += placeholder + nextChunk;
+    }
+    return { source, placeholders, bindings };
+};
+const jsx = (templates, ...values) => {
+    ensureDomAvailable();
+    const build = buildTemplate(templates, values);
+    const result = (0, oxc_parser_1.parseSync)('inline.jsx', build.source, parserOptions);
+    if (result.errors.length > 0) {
+        throw new Error(formatParserError(result.errors[0]));
+    }
+    const root = extractRootNode(result.program);
+    const ctx = {
+        source: build.source,
+        placeholders: build.placeholders,
+        components: new Map(build.bindings.map(binding => [binding.name, binding.value])),
+    };
+    return evaluateJsxNode(root, ctx, null);
+};
+exports.jsx = jsx;

package/dist/cjs/jsx.d.cts

@@ -0,0 +1,8 @@
+export type JsxRenderable = Node | DocumentFragment | string | number | bigint | boolean | null | undefined | Iterable<JsxRenderable>;
+export type JsxComponent<Props = Record<string, unknown>> = {
+    (props: Props & {
+        children?: JsxRenderable | JsxRenderable[];
+    }): JsxRenderable;
+    displayName?: string;
+};
+export declare const jsx: (templates: TemplateStringsArray, ...values: unknown[]) => JsxRenderable;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { jsx } from './jsx.js';
+export type { JsxRenderable, JsxComponent } from './jsx.js';

package/dist/index.js

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

package/dist/jsx.d.ts

@@ -0,0 +1,8 @@
+export type JsxRenderable = Node | DocumentFragment | string | number | bigint | boolean | null | undefined | Iterable<JsxRenderable>;
+export type JsxComponent<Props = Record<string, unknown>> = {
+    (props: Props & {
+        children?: JsxRenderable | JsxRenderable[];
+    }): JsxRenderable;
+    displayName?: string;
+};
+export declare const jsx: (templates: TemplateStringsArray, ...values: unknown[]) => JsxRenderable;

package/dist/jsx.js

@@ -0,0 +1,403 @@
+import { parseSync } from 'oxc-parser';
+const OPEN_TAG_RE = /<\s*$/;
+const CLOSE_TAG_RE = /<\/\s*$/;
+const PLACEHOLDER_PREFIX = '__KX_EXPR__';
+let invocationCounter = 0;
+const parserOptions = {
+    lang: 'jsx',
+    sourceType: 'module',
+    range: true,
+    preserveParens: true,
+};
+const ensureDomAvailable = () => {
+    if (typeof document === 'undefined' || typeof document.createElement !== 'function') {
+        throw new Error('The jsx template tag requires a DOM-like environment (document missing).');
+    }
+};
+const formatParserError = (error) => {
+    let message = `[oxc-parser] ${error.message}`;
+    if (error.labels?.length) {
+        const label = error.labels[0];
+        if (label.message) {
+            message += `\n${label.message}`;
+        }
+    }
+    if (error.codeframe) {
+        message += `\n${error.codeframe}`;
+    }
+    return message;
+};
+const extractRootNode = (program) => {
+    for (const statement of program.body) {
+        if (statement.type === 'ExpressionStatement') {
+            const expression = statement.expression;
+            if (expression.type === 'JSXElement' || expression.type === 'JSXFragment') {
+                return expression;
+            }
+        }
+    }
+    throw new Error('The jsx template must contain a single JSX element or fragment.');
+};
+const getIdentifierName = (identifier) => {
+    switch (identifier.type) {
+        case 'JSXIdentifier':
+            return identifier.name;
+        case 'JSXNamespacedName':
+            return `${identifier.namespace.name}:${identifier.name.name}`;
+        case 'JSXMemberExpression':
+            return `${getIdentifierName(identifier.object)}.${identifier.property.name}`;
+        default:
+            return '';
+    }
+};
+const isNodeLike = (value) => {
+    if (typeof Node === 'undefined') {
+        return false;
+    }
+    return value instanceof Node || value instanceof DocumentFragment;
+};
+const isIterable = (value) => {
+    if (!value || typeof value === 'string') {
+        return false;
+    }
+    return typeof value[Symbol.iterator] === 'function';
+};
+const isPromiseLike = (value) => {
+    if (!value || (typeof value !== 'object' && typeof value !== 'function')) {
+        return false;
+    }
+    return typeof value.then === 'function';
+};
+const normalizeJsxText = (value) => {
+    const collapsed = value.replace(/\r/g, '').replace(/\n\s+/g, ' ');
+    const trimmed = collapsed.trim();
+    return trimmed.length > 0 ? trimmed : '';
+};
+const setDomProp = (element, name, value) => {
+    if (value === false || value === null || value === undefined) {
+        return;
+    }
+    if (name === 'dangerouslySetInnerHTML' &&
+        typeof value === 'object' &&
+        value &&
+        '__html' in value) {
+        element.innerHTML = String(value.__html ?? '');
+        return;
+    }
+    if (name === 'ref') {
+        if (typeof value === 'function') {
+            value(element);
+            return;
+        }
+        if (value && typeof value === 'object') {
+            ;
+            value.current = element;
+            return;
+        }
+    }
+    if (name === 'style' && typeof value === 'object' && value !== null) {
+        const styleRecord = value;
+        const styleTarget = element.style;
+        if (!styleTarget) {
+            return;
+        }
+        const mutableStyle = styleTarget;
+        Object.entries(styleRecord).forEach(([prop, propValue]) => {
+            if (propValue === null || propValue === undefined) {
+                return;
+            }
+            if (prop.startsWith('--')) {
+                styleTarget.setProperty(prop, String(propValue));
+                return;
+            }
+            mutableStyle[prop] = propValue;
+        });
+        return;
+    }
+    if (typeof value === 'function' && name.startsWith('on')) {
+        const eventName = name.slice(2).toLowerCase();
+        element.addEventListener(eventName, value);
+        return;
+    }
+    if (name === 'class' || name === 'className') {
+        const classValue = Array.isArray(value)
+            ? value.filter(Boolean).join(' ')
+            : String(value);
+        element.setAttribute('class', classValue);
+        return;
+    }
+    if (name === 'htmlFor') {
+        element.setAttribute('for', String(value));
+        return;
+    }
+    if (name in element && !name.includes('-')) {
+        element[name] = value;
+        return;
+    }
+    element.setAttribute(name, value === true ? '' : String(value));
+};
+const appendChildValue = (parent, value) => {
+    if (value === null || value === undefined) {
+        return;
+    }
+    if (typeof value === 'boolean') {
+        return;
+    }
+    if (isPromiseLike(value)) {
+        throw new Error('Async values are not supported inside jsx template results.');
+    }
+    if (Array.isArray(value)) {
+        value.forEach(child => appendChildValue(parent, child));
+        return;
+    }
+    if (isIterable(value)) {
+        for (const entry of value) {
+            appendChildValue(parent, entry);
+        }
+        return;
+    }
+    if (isNodeLike(value)) {
+        parent.appendChild(value);
+        return;
+    }
+    parent.appendChild(document.createTextNode(String(value)));
+};
+const resolveAttributes = (attributes, ctx) => {
+    const props = {};
+    attributes.forEach(attribute => {
+        if (attribute.type === 'JSXSpreadAttribute') {
+            const spreadValue = evaluateExpression(attribute.argument, ctx);
+            if (spreadValue && typeof spreadValue === 'object' && !Array.isArray(spreadValue)) {
+                Object.assign(props, spreadValue);
+            }
+            return;
+        }
+        const name = getIdentifierName(attribute.name);
+        if (!attribute.value) {
+            props[name] = true;
+            return;
+        }
+        if (attribute.value.type === 'Literal') {
+            props[name] = attribute.value.value;
+            return;
+        }
+        if (attribute.value.type === 'JSXExpressionContainer') {
+            if (attribute.value.expression.type === 'JSXEmptyExpression') {
+                return;
+            }
+            props[name] = evaluateExpression(attribute.value.expression, ctx);
+        }
+    });
+    return props;
+};
+const applyDomAttributes = (element, attributes, ctx) => {
+    const props = resolveAttributes(attributes, ctx);
+    Object.entries(props).forEach(([name, value]) => {
+        if (name === 'key') {
+            return;
+        }
+        if (name === 'children') {
+            appendChildValue(element, value);
+            return;
+        }
+        setDomProp(element, name, value);
+    });
+};
+const evaluateJsxChildren = (children, ctx, namespace) => {
+    const resolved = [];
+    children.forEach(child => {
+        switch (child.type) {
+            case 'JSXText': {
+                const text = normalizeJsxText(child.value);
+                if (text) {
+                    resolved.push(text);
+                }
+                break;
+            }
+            case 'JSXExpressionContainer': {
+                if (child.expression.type === 'JSXEmptyExpression') {
+                    break;
+                }
+                resolved.push(evaluateExpression(child.expression, ctx));
+                break;
+            }
+            case 'JSXSpreadChild': {
+                const spreadValue = evaluateExpression(child.expression, ctx);
+                if (spreadValue !== undefined && spreadValue !== null) {
+                    resolved.push(spreadValue);
+                }
+                break;
+            }
+            case 'JSXElement':
+            case 'JSXFragment': {
+                resolved.push(evaluateJsxNode(child, ctx, namespace));
+                break;
+            }
+        }
+    });
+    return resolved;
+};
+const evaluateComponent = (element, ctx, component, namespace) => {
+    const props = resolveAttributes(element.openingElement.attributes, ctx);
+    const childValues = evaluateJsxChildren(element.children, ctx, namespace);
+    if (childValues.length === 1) {
+        props.children = childValues[0];
+    }
+    else if (childValues.length > 1) {
+        props.children = childValues;
+    }
+    const result = component(props);
+    if (isPromiseLike(result)) {
+        throw new Error('Async jsx components are not supported.');
+    }
+    return result;
+};
+const evaluateJsxElement = (element, ctx, namespace) => {
+    const opening = element.openingElement;
+    const tagName = getIdentifierName(opening.name);
+    const component = ctx.components.get(tagName);
+    if (component) {
+        return evaluateComponent(element, ctx, component, namespace);
+    }
+    if (/[A-Z]/.test(tagName[0] ?? '')) {
+        throw new Error(`Unknown component "${tagName}". Did you interpolate it with the template literal?`);
+    }
+    const nextNamespace = tagName === 'svg' ? 'svg' : namespace;
+    const childNamespace = tagName === 'foreignObject' ? null : nextNamespace;
+    const domElement = nextNamespace === 'svg'
+        ? document.createElementNS('http://www.w3.org/2000/svg', tagName)
+        : document.createElement(tagName);
+    applyDomAttributes(domElement, opening.attributes, ctx);
+    const childValues = evaluateJsxChildren(element.children, ctx, childNamespace);
+    childValues.forEach(value => appendChildValue(domElement, value));
+    return domElement;
+};
+const evaluateJsxNode = (node, ctx, namespace) => {
+    if (node.type === 'JSXFragment') {
+        const fragment = document.createDocumentFragment();
+        const children = evaluateJsxChildren(node.children, ctx, namespace);
+        children.forEach(child => appendChildValue(fragment, child));
+        return fragment;
+    }
+    return evaluateJsxElement(node, ctx, namespace);
+};
+const walkAst = (node, visitor) => {
+    if (!node || typeof node !== 'object') {
+        return;
+    }
+    const candidate = node;
+    if (typeof candidate.type !== 'string') {
+        return;
+    }
+    visitor(candidate);
+    Object.values(candidate).forEach(value => {
+        if (!value) {
+            return;
+        }
+        if (Array.isArray(value)) {
+            value.forEach(child => walkAst(child, visitor));
+            return;
+        }
+        if (typeof value === 'object') {
+            walkAst(value, visitor);
+        }
+    });
+};
+const collectPlaceholderNames = (expression, ctx) => {
+    const placeholders = new Set();
+    walkAst(expression, node => {
+        if (node.type === 'Identifier' && ctx.placeholders.has(node.name)) {
+            placeholders.add(node.name);
+        }
+    });
+    return Array.from(placeholders);
+};
+const evaluateExpression = (expression, ctx) => {
+    if (expression.type === 'JSXElement' || expression.type === 'JSXFragment') {
+        return evaluateJsxNode(expression, ctx, null);
+    }
+    if (!('range' in expression) || !expression.range) {
+        throw new Error('Unable to evaluate expression: missing source range information.');
+    }
+    const [start, end] = expression.range;
+    const source = ctx.source.slice(start, end);
+    const placeholders = collectPlaceholderNames(expression, ctx);
+    try {
+        const evaluator = new Function(...placeholders, `"use strict"; return (${source});`);
+        const args = placeholders.map(name => ctx.placeholders.get(name));
+        return evaluator(...args);
+    }
+    catch (error) {
+        throw new Error(`Failed to evaluate expression ${source}: ${error.message}`);
+    }
+};
+const sanitizeIdentifier = (value) => {
+    const cleaned = value.replace(/[^a-zA-Z0-9_$]/g, '');
+    if (!cleaned) {
+        return 'Component';
+    }
+    if (!/[A-Za-z_$]/.test(cleaned[0])) {
+        return `Component${cleaned}`;
+    }
+    return cleaned;
+};
+const ensureBinding = (value, bindings, bindingLookup) => {
+    const existing = bindingLookup.get(value);
+    if (existing) {
+        return existing;
+    }
+    const descriptor = value.displayName || value.name || `Component${bindings.length}`;
+    const baseName = sanitizeIdentifier(descriptor);
+    let candidate = baseName;
+    let suffix = 1;
+    while (bindings.some(binding => binding.name === candidate)) {
+        candidate = `${baseName}${suffix++}`;
+    }
+    const binding = { name: candidate, value };
+    bindings.push(binding);
+    bindingLookup.set(value, binding);
+    return binding;
+};
+const buildTemplate = (strings, values) => {
+    const raw = strings.raw ?? strings;
+    const placeholders = new Map();
+    const bindings = [];
+    const bindingLookup = new Map();
+    let source = raw[0] ?? '';
+    const templateId = invocationCounter++;
+    let placeholderIndex = 0;
+    for (let idx = 0; idx < values.length; idx++) {
+        const chunk = raw[idx] ?? '';
+        const nextChunk = raw[idx + 1] ?? '';
+        const value = values[idx];
+        const isTagNamePosition = OPEN_TAG_RE.test(chunk) || CLOSE_TAG_RE.test(chunk);
+        if (isTagNamePosition && typeof value === 'function') {
+            const binding = ensureBinding(value, bindings, bindingLookup);
+            source += binding.name + nextChunk;
+            continue;
+        }
+        if (isTagNamePosition && typeof value === 'string') {
+            source += value + nextChunk;
+            continue;
+        }
+        const placeholder = `${PLACEHOLDER_PREFIX}${templateId}_${placeholderIndex++}__`;
+        placeholders.set(placeholder, value);
+        source += placeholder + nextChunk;
+    }
+    return { source, placeholders, bindings };
+};
+export const jsx = (templates, ...values) => {
+    ensureDomAvailable();
+    const build = buildTemplate(templates, values);
+    const result = parseSync('inline.jsx', build.source, parserOptions);
+    if (result.errors.length > 0) {
+        throw new Error(formatParserError(result.errors[0]));
+    }
+    const root = extractRootNode(result.program);
+    const ctx = {
+        source: build.source,
+        placeholders: build.placeholders,
+        components: new Map(build.bindings.map(binding => [binding.name, binding.value])),
+    };
+    return evaluateJsxNode(root, ctx, null);
+};

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@knighted/jsx",
+  "version": "1.0.0-alpha.0",
+  "description": "A simple JSX transpiler that runs in node.js or the browser.",
+  "keywords": [
+    "jsx transform"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "engineStrict": true,
+  "scripts": {
+    "build": "duel",
+    "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 .",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest",
+    "dev": "vite dev --config vite.config.ts",
+    "build:demo": "vite build --config vite.config.ts",
+    "preview": "vite preview --config vite.config.ts",
+    "prepack": "npm run build"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@knighted/duel": "^2.1.6",
+    "@types/jsdom": "^27.0.0",
+    "@vitest/coverage-v8": "^4.0.14",
+    "eslint": "^9.39.1",
+    "jsdom": "^27.2.0",
+    "prettier": "^3.7.3",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.2.4",
+    "vitest": "^4.0.14"
+  },
+  "dependencies": {
+    "oxc-parser": "^0.99.0"
+  },
+  "optionalDependencies": {
+    "@oxc-parser/binding-darwin-arm64": "^0.99.0",
+    "@oxc-parser/binding-linux-x64-gnu": "^0.99.0",
+    "@oxc-parser/binding-wasm32-wasi": "^0.99.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "author": "KCM <knightedcodemonkey@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/knightedcodemonkey/jsx.git"
+  },
+  "bugs": {
+    "url": "https://github.com/knightedcodemonkey/jsx/issues"
+  },
+  "prettier": {
+    "arrowParens": "avoid",
+    "printWidth": 90,
+    "semi": false,
+    "singleQuote": true
+  }
+}