@knighted/jsx 1.1.0 → 1.2.0-rc.1

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,15 +1,18 @@
 {
   "name": "@knighted/jsx",
-  "version": "1.1.0",
-  "description": "A simple JSX transpiler that runs in node.js or the browser.",
+  "version": "1.2.0-rc.1",
+  "description": "Runtime JSX tagged template that renders DOM or React trees anywhere without a build step.",
   "keywords": [
-    "jsx browser transform",
-    "jsx transpiler",
-    "jsx compiler",
-    "jsx parser",
     "jsx runtime",
-    "jsx node",
-    "jsx"
+    "jsx template literal",
+    "tagged template",
+    "no-build jsx",
+    "dom runtime",
+    "react runtime",
+    "ssr",
+    "lit",
+    "webpack loader",
+    "oxc parser"
   ],
   "type": "module",
   "main": "./dist/index.js",
@@ -25,6 +28,21 @@
       "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"
+    },
+    "./node": {
+      "types": "./dist/node/index.d.ts",
+      "import": "./dist/node/index.js",
+      "default": "./dist/node/index.js"
+    },
+    "./node/react": {
+      "types": "./dist/node/react/index.d.ts",
+      "import": "./dist/node/react/index.js",
+      "default": "./dist/node/react/index.js"
+    },
     "./loader": {
       "import": "./dist/loader/jsx.js",
       "default": "./dist/loader/jsx.js"
@@ -46,6 +64,7 @@
     "test": "vitest run --coverage",
     "test:watch": "vitest",
     "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",
     "build:demo": "vite build --config vite.config.ts",
     "preview": "vite preview --config vite.config.ts",
@@ -56,15 +75,19 @@
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@knighted/duel": "^2.1.6",
+    "@types/node": "^22.10.1",
     "@rspack/core": "^1.0.5",
     "@types/jsdom": "^27.0.0",
     "@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",
     "http-server": "^14.1.1",
     "jsdom": "^27.2.0",
     "lit": "^3.2.1",
+    "next": "^16.0.0",
     "prettier": "^3.7.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -79,6 +102,22 @@
     "magic-string": "^0.30.21",
     "oxc-parser": "^0.99.0"
   },
+  "peerDependencies": {
+    "react": ">=18",
+    "jsdom": "*",
+    "linkedom": "*"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "jsdom": {
+      "optional": true
+    },
+    "linkedom": {
+      "optional": true
+    }
+  },
   "optionalDependencies": {
     "@oxc-parser/binding-darwin-arm64": "^0.99.0",
     "@oxc-parser/binding-linux-x64-gnu": "^0.99.0",