@knighted/jsx 1.1.0 → 1.2.0-rc.0

package/dist/react/react-jsx.js

@@ -0,0 +1,138 @@
+import { parseSync } from 'oxc-parser';
+import { buildTemplate, evaluateExpression, extractRootNode, formatParserError, getIdentifierName, normalizeJsxText, parserOptions, } from '../runtime/shared.js';
+import { Fragment, createElement, } from 'react';
+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 appendReactChild = (bucket, value) => {
+    if (value === null || value === undefined) {
+        return;
+    }
+    if (typeof value === 'boolean') {
+        return;
+    }
+    if (isPromiseLike(value)) {
+        throw new Error('Async values are not supported inside reactJsx template results.');
+    }
+    if (Array.isArray(value)) {
+        value.forEach(entry => appendReactChild(bucket, entry));
+        return;
+    }
+    if (isIterable(value)) {
+        for (const entry of value) {
+            appendReactChild(bucket, entry);
+        }
+        return;
+    }
+    bucket.push(value);
+};
+const evaluateExpressionForReact = (expression, ctx) => evaluateExpression(expression, ctx, node => evaluateReactJsxNode(node, ctx));
+const resolveAttributes = (attributes, ctx) => {
+    const props = {};
+    attributes.forEach(attribute => {
+        if (attribute.type === 'JSXSpreadAttribute') {
+            const spreadValue = evaluateExpressionForReact(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] = evaluateExpressionForReact(attribute.value.expression, ctx);
+        }
+    });
+    return props;
+};
+const evaluateReactJsxChildren = (children, ctx) => {
+    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;
+                }
+                appendReactChild(resolved, evaluateExpressionForReact(child.expression, ctx));
+                break;
+            }
+            case 'JSXSpreadChild': {
+                const spreadValue = evaluateExpressionForReact(child.expression, ctx);
+                if (spreadValue !== undefined && spreadValue !== null) {
+                    appendReactChild(resolved, spreadValue);
+                }
+                break;
+            }
+            case 'JSXElement':
+            case 'JSXFragment': {
+                resolved.push(evaluateReactJsxNode(child, ctx));
+                break;
+            }
+        }
+    });
+    return resolved;
+};
+const createReactElement = (type, props, children) => {
+    return createElement(type, props, ...children);
+};
+const evaluateReactJsxElement = (element, ctx) => {
+    const opening = element.openingElement;
+    const tagName = getIdentifierName(opening.name);
+    const component = ctx.components.get(tagName);
+    const props = resolveAttributes(opening.attributes, ctx);
+    const childValues = evaluateReactJsxChildren(element.children, ctx);
+    if (component) {
+        return createReactElement(component, props, childValues);
+    }
+    if (/[A-Z]/.test(tagName[0] ?? '')) {
+        throw new Error(`Unknown component "${tagName}". Did you interpolate it with the template literal?`);
+    }
+    return createReactElement(tagName, props, childValues);
+};
+const evaluateReactJsxNode = (node, ctx) => {
+    if (node.type === 'JSXFragment') {
+        const children = evaluateReactJsxChildren(node.children, ctx);
+        return createElement(Fragment, null, ...children);
+    }
+    return evaluateReactJsxElement(node, ctx);
+};
+export const reactJsx = (templates, ...values) => {
+    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 evaluateReactJsxNode(root, ctx);
+};

package/dist/runtime/shared.d.ts

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

package/dist/runtime/shared.js

@@ -0,0 +1,156 @@
+const OPEN_TAG_RE = /<\s*$/;
+const CLOSE_TAG_RE = /<\/\s*$/;
+const PLACEHOLDER_PREFIX = '__KX_EXPR__';
+let invocationCounter = 0;
+export const parserOptions = {
+    lang: 'jsx',
+    sourceType: 'module',
+    range: true,
+    preserveParens: true,
+};
+export 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;
+};
+export 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.');
+};
+export 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 '';
+    }
+};
+export 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);
+        }
+    });
+};
+export const normalizeJsxText = (value) => {
+    const collapsed = value.replace(/\r/g, '').replace(/\n\s+/g, ' ');
+    const trimmed = collapsed.trim();
+    return trimmed.length > 0 ? trimmed : '';
+};
+export 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);
+};
+export const evaluateExpression = (expression, ctx, evaluateJsxNode) => {
+    if (expression.type === 'JSXElement' || expression.type === 'JSXFragment') {
+        return evaluateJsxNode(expression);
+    }
+    if (!('range' in expression) || !expression.range) {
+        throw new Error('Unable to evaluate expression: missing source range information.');
+    }
+    const [start, end] = expression.range;
+    const source = ctx.source.slice(start, end);
+    const placeholders = 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}`);
+    }
+};
+export 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;
+};
+export 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;
+};
+export 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 };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knighted/jsx",
-  "version": "1.1.0",
+  "version": "1.2.0-rc.0",
   "description": "A simple JSX transpiler that runs in node.js or the browser.",
   "keywords": [
     "jsx browser transform",
@@ -25,6 +25,11 @@
       "import": "./dist/lite/index.js",
       "default": "./dist/lite/index.js"
     },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "default": "./dist/react/index.js"
+    },
     "./loader": {
       "import": "./dist/loader/jsx.js",
       "default": "./dist/loader/jsx.js"
@@ -79,6 +84,14 @@
     "magic-string": "^0.30.21",
     "oxc-parser": "^0.99.0"
   },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "optionalDependencies": {
     "@oxc-parser/binding-darwin-arm64": "^0.99.0",
     "@oxc-parser/binding-linux-x64-gnu": "^0.99.0",