@knighted/jsx 1.0.0 → 1.2.0-rc.0

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.0.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,15 @@
       "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"
+    },
     "./package.json": "./package.json"
   },
   "engines": {
@@ -41,29 +50,48 @@
     "prettier": "prettier -w .",
     "test": "vitest run --coverage",
     "test:watch": "vitest",
+    "build:fixture": "node scripts/build-rspack-fixture.mjs",
     "dev": "vite dev --config vite.config.ts",
     "build:demo": "vite build --config vite.config.ts",
     "preview": "vite preview --config vite.config.ts",
     "build:lite": "tsup --config tsup.config.ts",
+    "setup:wasm": "node scripts/setup-wasm.mjs",
     "prepack": "npm run build"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@knighted/duel": "^2.1.6",
+    "@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",
+    "http-server": "^14.1.1",
     "jsdom": "^27.2.0",
+    "lit": "^3.2.1",
     "prettier": "^3.7.3",
-    "tsup": "^8.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tar": "^7.4.3",
+    "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.48.0",
     "vite": "^7.2.4",
     "vitest": "^4.0.14"
   },
   "dependencies": {
+    "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",