@knighted/jsx 1.7.9 → 1.8.0

package/README.md

@@ -68,6 +68,32 @@ const button = jsx`
 document.body.append(button)
 ```
 
+### Source transpilation (`transpileJsxSource`)
+
+Need to transform raw JSX source text (e.g. code typed in an editor) without Babel? Use `transpileJsxSource`:
+
+```ts
+import { transpileJsxSource } from '@knighted/jsx/transpile'
+
+const input = `
+const App = () => {
+  return <button>click me</button>
+}
+`
+
+const { code } = transpileJsxSource(input)
+// -> const App = () => { return React.createElement("button", null, "click me") }
+```
+
+By default this emits `React.createElement(...)` and `React.Fragment`. Override them when needed:
+
+```ts
+transpileJsxSource(input, {
+  createElement: '__jsx',
+  fragment: '__fragment',
+})
+```
+
 ### React runtime (`reactJsx`)
 
 Need to compose React elements instead of DOM nodes? Import the dedicated helper from the `@knighted/jsx/react` subpath (React 18+ and `react-dom` are still required to mount the tree):

package/dist/cjs/transpile.cjs

@@ -0,0 +1,255 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transpileJsxSource = transpileJsxSource;
+const magic_string_1 = __importDefault(require("magic-string"));
+const oxc_parser_1 = require("oxc-parser");
+const normalize_text_js_1 = require("./shared/normalize-text.cjs");
+const createModuleParserOptions = (sourceType) => ({
+    lang: 'tsx',
+    sourceType,
+    range: true,
+    preserveParens: true,
+});
+const formatParserError = (error) => {
+    let message = `[jsx] ${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}`;
+    }
+    if (error.helpMessage) {
+        message += `\n${error.helpMessage}`;
+    }
+    return message;
+};
+const isObjectRecord = (value) => typeof value === 'object' && value !== null;
+const isSourceRange = (value) => Array.isArray(value) &&
+    value.length === 2 &&
+    typeof value[0] === 'number' &&
+    typeof value[1] === 'number';
+const hasSourceRange = (value) => isObjectRecord(value) && isSourceRange(value.range);
+const compareByRangeStartDesc = (first, second) => second.range[0] - first.range[0];
+class SourceJsxReactBuilder {
+    source;
+    createElementRef;
+    fragmentRef;
+    constructor(source, createElementRef, fragmentRef) {
+        this.source = source;
+        this.createElementRef = createElementRef;
+        this.fragmentRef = fragmentRef;
+    }
+    compile(node) {
+        return this.compileNode(node);
+    }
+    compileNode(node) {
+        if (node.type === 'JSXFragment') {
+            const children = this.compileChildren(node.children);
+            return this.buildCreateElement(this.fragmentRef, 'null', children);
+        }
+        const opening = node.openingElement;
+        const tagExpr = this.compileTagName(opening.name);
+        const propsExpr = this.compileProps(opening.attributes);
+        const children = this.compileChildren(node.children);
+        return this.buildCreateElement(tagExpr, propsExpr, children);
+    }
+    compileChildren(children) {
+        const compiled = [];
+        children.forEach(child => {
+            switch (child.type) {
+                case 'JSXText': {
+                    const normalized = (0, normalize_text_js_1.normalizeJsxText)(child.value);
+                    if (normalized) {
+                        compiled.push(JSON.stringify(normalized));
+                    }
+                    break;
+                }
+                case 'JSXExpressionContainer': {
+                    if (child.expression.type === 'JSXEmptyExpression') {
+                        break;
+                    }
+                    compiled.push(this.compileExpression(child.expression));
+                    break;
+                }
+                case 'JSXSpreadChild': {
+                    compiled.push(this.compileExpression(child.expression));
+                    break;
+                }
+                case 'JSXElement':
+                case 'JSXFragment': {
+                    compiled.push(this.compileNode(child));
+                    break;
+                }
+            }
+        });
+        return compiled;
+    }
+    compileProps(attributes) {
+        const segments = [];
+        let staticEntries = [];
+        const flushStatics = () => {
+            if (!staticEntries.length) {
+                return;
+            }
+            segments.push(`{ ${staticEntries.join(', ')} }`);
+            staticEntries = [];
+        };
+        attributes.forEach(attribute => {
+            if (attribute.type === 'JSXSpreadAttribute') {
+                flushStatics();
+                const spreadValue = this.compileExpression(attribute.argument);
+                segments.push(`(${spreadValue} ?? {})`);
+                return;
+            }
+            const name = this.compileAttributeName(attribute.name);
+            let value;
+            if (!attribute.value) {
+                value = 'true';
+            }
+            else if (attribute.value.type === 'Literal') {
+                value = JSON.stringify(attribute.value.value);
+            }
+            else if (attribute.value.type === 'JSXExpressionContainer') {
+                if (attribute.value.expression.type === 'JSXEmptyExpression') {
+                    return;
+                }
+                value = this.compileExpression(attribute.value.expression);
+            }
+            else {
+                value = 'undefined';
+            }
+            staticEntries.push(`${JSON.stringify(name)}: ${value}`);
+        });
+        flushStatics();
+        if (!segments.length) {
+            return 'null';
+        }
+        if (segments.length === 1) {
+            return segments[0] ?? 'null';
+        }
+        return `Object.assign({}, ${segments.join(', ')})`;
+    }
+    compileAttributeName(name) {
+        switch (name.type) {
+            case 'JSXIdentifier':
+                return name.name;
+            case 'JSXNamespacedName':
+                return `${name.namespace.name}:${name.name.name}`;
+            case 'JSXMemberExpression':
+                return `${this.compileAttributeName(name.object)}.${name.property.name}`;
+            default:
+                return '';
+        }
+    }
+    compileMemberExpressionTagName(name) {
+        const parts = [];
+        let current = name;
+        while (current.type === 'JSXMemberExpression') {
+            parts.unshift(current.property.name);
+            current = current.object;
+        }
+        parts.unshift(current.name);
+        return parts.join('.');
+    }
+    compileTagName(name) {
+        if (!name) {
+            throw new Error('[jsx] Encountered JSX element without a tag name.');
+        }
+        if (name.type === 'JSXIdentifier') {
+            if (/^[A-Z]/.test(name.name)) {
+                return name.name;
+            }
+            return JSON.stringify(name.name);
+        }
+        if (name.type === 'JSXMemberExpression') {
+            return this.compileMemberExpressionTagName(name);
+        }
+        if (name.type === 'JSXNamespacedName') {
+            return JSON.stringify(`${name.namespace.name}:${name.name.name}`);
+        }
+        throw new Error('[jsx] Unsupported JSX tag expression.');
+    }
+    compileExpression(node) {
+        if (node.type === 'JSXElement' || node.type === 'JSXFragment') {
+            return this.compileNode(node);
+        }
+        if (!hasSourceRange(node)) {
+            throw new Error('[jsx] Unable to read source range for expression node.');
+        }
+        const range = node.range;
+        const nestedJsxRoots = collectRootJsxNodes(node);
+        if (!nestedJsxRoots.length) {
+            return this.source.slice(range[0], range[1]);
+        }
+        const expressionSource = this.source.slice(range[0], range[1]);
+        const magic = new magic_string_1.default(expressionSource);
+        nestedJsxRoots.sort(compareByRangeStartDesc).forEach(jsxNode => {
+            magic.overwrite(jsxNode.range[0] - range[0], jsxNode.range[1] - range[0], this.compileNode(jsxNode));
+        });
+        return magic.toString();
+    }
+    buildCreateElement(type, props, children) {
+        const args = [type, props];
+        if (children.length) {
+            args.push(children.join(', '));
+        }
+        return `${this.createElementRef}(${args.join(', ')})`;
+    }
+}
+const collectRootJsxNodes = (root) => {
+    const nodes = [];
+    const isJsxElementOrFragment = (node) => {
+        if (!isObjectRecord(node)) {
+            return false;
+        }
+        return node.type === 'JSXElement' || node.type === 'JSXFragment';
+    };
+    const walk = (value, insideJsx) => {
+        if (!isObjectRecord(value)) {
+            return;
+        }
+        if (Array.isArray(value)) {
+            value.forEach(entry => walk(entry, insideJsx));
+            return;
+        }
+        const node = value;
+        const isJsxNode = isJsxElementOrFragment(node);
+        if (isJsxNode && hasSourceRange(node) && !insideJsx) {
+            nodes.push(node);
+        }
+        for (const entry of Object.values(node)) {
+            walk(entry, insideJsx || isJsxNode);
+        }
+    };
+    walk(root, false);
+    return nodes;
+};
+function transpileJsxSource(source, options = {}) {
+    const sourceType = options.sourceType ?? 'module';
+    const createElementRef = options.createElement ?? 'React.createElement';
+    const fragmentRef = options.fragment ?? 'React.Fragment';
+    const parsed = (0, oxc_parser_1.parseSync)('transpile-jsx-source.tsx', source, createModuleParserOptions(sourceType));
+    const firstError = parsed.errors[0];
+    if (firstError) {
+        throw new Error(formatParserError(firstError));
+    }
+    const jsxRoots = collectRootJsxNodes(parsed.program);
+    if (!jsxRoots.length) {
+        return { code: source, changed: false };
+    }
+    const builder = new SourceJsxReactBuilder(source, createElementRef, fragmentRef);
+    const magic = new magic_string_1.default(source);
+    jsxRoots.sort(compareByRangeStartDesc).forEach(node => {
+        magic.overwrite(node.range[0], node.range[1], builder.compile(node));
+    });
+    return {
+        code: magic.toString(),
+        changed: true,
+    };
+}

package/dist/cjs/transpile.d.cts

@@ -0,0 +1,12 @@
+type TranspileSourceType = 'module' | 'script';
+export type TranspileJsxSourceOptions = {
+    sourceType?: TranspileSourceType;
+    createElement?: string;
+    fragment?: string;
+};
+export type TranspileJsxSourceResult = {
+    code: string;
+    changed: boolean;
+};
+export declare function transpileJsxSource(source: string, options?: TranspileJsxSourceOptions): TranspileJsxSourceResult;
+export {};

package/dist/transpile.d.ts

@@ -0,0 +1,12 @@
+type TranspileSourceType = 'module' | 'script';
+export type TranspileJsxSourceOptions = {
+    sourceType?: TranspileSourceType;
+    createElement?: string;
+    fragment?: string;
+};
+export type TranspileJsxSourceResult = {
+    code: string;
+    changed: boolean;
+};
+export declare function transpileJsxSource(source: string, options?: TranspileJsxSourceOptions): TranspileJsxSourceResult;
+export {};

package/dist/transpile.js

@@ -0,0 +1,249 @@
+import MagicString from 'magic-string';
+import { parseSync } from 'oxc-parser';
+import { normalizeJsxText } from './shared/normalize-text.js';
+const createModuleParserOptions = (sourceType) => ({
+    lang: 'tsx',
+    sourceType,
+    range: true,
+    preserveParens: true,
+});
+const formatParserError = (error) => {
+    let message = `[jsx] ${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}`;
+    }
+    if (error.helpMessage) {
+        message += `\n${error.helpMessage}`;
+    }
+    return message;
+};
+const isObjectRecord = (value) => typeof value === 'object' && value !== null;
+const isSourceRange = (value) => Array.isArray(value) &&
+    value.length === 2 &&
+    typeof value[0] === 'number' &&
+    typeof value[1] === 'number';
+const hasSourceRange = (value) => isObjectRecord(value) && isSourceRange(value.range);
+const compareByRangeStartDesc = (first, second) => second.range[0] - first.range[0];
+class SourceJsxReactBuilder {
+    source;
+    createElementRef;
+    fragmentRef;
+    constructor(source, createElementRef, fragmentRef) {
+        this.source = source;
+        this.createElementRef = createElementRef;
+        this.fragmentRef = fragmentRef;
+    }
+    compile(node) {
+        return this.compileNode(node);
+    }
+    compileNode(node) {
+        if (node.type === 'JSXFragment') {
+            const children = this.compileChildren(node.children);
+            return this.buildCreateElement(this.fragmentRef, 'null', children);
+        }
+        const opening = node.openingElement;
+        const tagExpr = this.compileTagName(opening.name);
+        const propsExpr = this.compileProps(opening.attributes);
+        const children = this.compileChildren(node.children);
+        return this.buildCreateElement(tagExpr, propsExpr, children);
+    }
+    compileChildren(children) {
+        const compiled = [];
+        children.forEach(child => {
+            switch (child.type) {
+                case 'JSXText': {
+                    const normalized = normalizeJsxText(child.value);
+                    if (normalized) {
+                        compiled.push(JSON.stringify(normalized));
+                    }
+                    break;
+                }
+                case 'JSXExpressionContainer': {
+                    if (child.expression.type === 'JSXEmptyExpression') {
+                        break;
+                    }
+                    compiled.push(this.compileExpression(child.expression));
+                    break;
+                }
+                case 'JSXSpreadChild': {
+                    compiled.push(this.compileExpression(child.expression));
+                    break;
+                }
+                case 'JSXElement':
+                case 'JSXFragment': {
+                    compiled.push(this.compileNode(child));
+                    break;
+                }
+            }
+        });
+        return compiled;
+    }
+    compileProps(attributes) {
+        const segments = [];
+        let staticEntries = [];
+        const flushStatics = () => {
+            if (!staticEntries.length) {
+                return;
+            }
+            segments.push(`{ ${staticEntries.join(', ')} }`);
+            staticEntries = [];
+        };
+        attributes.forEach(attribute => {
+            if (attribute.type === 'JSXSpreadAttribute') {
+                flushStatics();
+                const spreadValue = this.compileExpression(attribute.argument);
+                segments.push(`(${spreadValue} ?? {})`);
+                return;
+            }
+            const name = this.compileAttributeName(attribute.name);
+            let value;
+            if (!attribute.value) {
+                value = 'true';
+            }
+            else if (attribute.value.type === 'Literal') {
+                value = JSON.stringify(attribute.value.value);
+            }
+            else if (attribute.value.type === 'JSXExpressionContainer') {
+                if (attribute.value.expression.type === 'JSXEmptyExpression') {
+                    return;
+                }
+                value = this.compileExpression(attribute.value.expression);
+            }
+            else {
+                value = 'undefined';
+            }
+            staticEntries.push(`${JSON.stringify(name)}: ${value}`);
+        });
+        flushStatics();
+        if (!segments.length) {
+            return 'null';
+        }
+        if (segments.length === 1) {
+            return segments[0] ?? 'null';
+        }
+        return `Object.assign({}, ${segments.join(', ')})`;
+    }
+    compileAttributeName(name) {
+        switch (name.type) {
+            case 'JSXIdentifier':
+                return name.name;
+            case 'JSXNamespacedName':
+                return `${name.namespace.name}:${name.name.name}`;
+            case 'JSXMemberExpression':
+                return `${this.compileAttributeName(name.object)}.${name.property.name}`;
+            default:
+                return '';
+        }
+    }
+    compileMemberExpressionTagName(name) {
+        const parts = [];
+        let current = name;
+        while (current.type === 'JSXMemberExpression') {
+            parts.unshift(current.property.name);
+            current = current.object;
+        }
+        parts.unshift(current.name);
+        return parts.join('.');
+    }
+    compileTagName(name) {
+        if (!name) {
+            throw new Error('[jsx] Encountered JSX element without a tag name.');
+        }
+        if (name.type === 'JSXIdentifier') {
+            if (/^[A-Z]/.test(name.name)) {
+                return name.name;
+            }
+            return JSON.stringify(name.name);
+        }
+        if (name.type === 'JSXMemberExpression') {
+            return this.compileMemberExpressionTagName(name);
+        }
+        if (name.type === 'JSXNamespacedName') {
+            return JSON.stringify(`${name.namespace.name}:${name.name.name}`);
+        }
+        throw new Error('[jsx] Unsupported JSX tag expression.');
+    }
+    compileExpression(node) {
+        if (node.type === 'JSXElement' || node.type === 'JSXFragment') {
+            return this.compileNode(node);
+        }
+        if (!hasSourceRange(node)) {
+            throw new Error('[jsx] Unable to read source range for expression node.');
+        }
+        const range = node.range;
+        const nestedJsxRoots = collectRootJsxNodes(node);
+        if (!nestedJsxRoots.length) {
+            return this.source.slice(range[0], range[1]);
+        }
+        const expressionSource = this.source.slice(range[0], range[1]);
+        const magic = new MagicString(expressionSource);
+        nestedJsxRoots.sort(compareByRangeStartDesc).forEach(jsxNode => {
+            magic.overwrite(jsxNode.range[0] - range[0], jsxNode.range[1] - range[0], this.compileNode(jsxNode));
+        });
+        return magic.toString();
+    }
+    buildCreateElement(type, props, children) {
+        const args = [type, props];
+        if (children.length) {
+            args.push(children.join(', '));
+        }
+        return `${this.createElementRef}(${args.join(', ')})`;
+    }
+}
+const collectRootJsxNodes = (root) => {
+    const nodes = [];
+    const isJsxElementOrFragment = (node) => {
+        if (!isObjectRecord(node)) {
+            return false;
+        }
+        return node.type === 'JSXElement' || node.type === 'JSXFragment';
+    };
+    const walk = (value, insideJsx) => {
+        if (!isObjectRecord(value)) {
+            return;
+        }
+        if (Array.isArray(value)) {
+            value.forEach(entry => walk(entry, insideJsx));
+            return;
+        }
+        const node = value;
+        const isJsxNode = isJsxElementOrFragment(node);
+        if (isJsxNode && hasSourceRange(node) && !insideJsx) {
+            nodes.push(node);
+        }
+        for (const entry of Object.values(node)) {
+            walk(entry, insideJsx || isJsxNode);
+        }
+    };
+    walk(root, false);
+    return nodes;
+};
+export function transpileJsxSource(source, options = {}) {
+    const sourceType = options.sourceType ?? 'module';
+    const createElementRef = options.createElement ?? 'React.createElement';
+    const fragmentRef = options.fragment ?? 'React.Fragment';
+    const parsed = parseSync('transpile-jsx-source.tsx', source, createModuleParserOptions(sourceType));
+    const firstError = parsed.errors[0];
+    if (firstError) {
+        throw new Error(formatParserError(firstError));
+    }
+    const jsxRoots = collectRootJsxNodes(parsed.program);
+    if (!jsxRoots.length) {
+        return { code: source, changed: false };
+    }
+    const builder = new SourceJsxReactBuilder(source, createElementRef, fragmentRef);
+    const magic = new MagicString(source);
+    jsxRoots.sort(compareByRangeStartDesc).forEach(node => {
+        magic.overwrite(node.range[0], node.range[1], builder.compile(node));
+    });
+    return {
+        code: magic.toString(),
+        changed: true,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knighted/jsx",
-  "version": "1.7.9",
+  "version": "1.8.0",
   "description": "Runtime JSX tagged template that renders DOM or React trees anywhere with or without a build step.",
   "keywords": [
     "jsx runtime",
@@ -101,6 +101,11 @@
       "import": "./dist/lite/node/react/index.js",
       "default": "./dist/lite/node/react/index.js"
     },
+    "./transpile": {
+      "types": "./dist/transpile.d.ts",
+      "import": "./dist/transpile.js",
+      "default": "./dist/transpile.js"
+    },
     "./loader": {
       "import": "./dist/loader/jsx.js",
       "default": "./dist/loader/jsx.js"