@knighted/jsx 1.0.0 → 1.2.0-rc.0

package/dist/cjs/loader/jsx.cjs

@@ -0,0 +1,363 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = jsxLoader;
+const magic_string_1 = __importDefault(require("magic-string"));
+const oxc_parser_1 = require("oxc-parser");
+const stripTrailingWhitespace = (value) => value.replace(/\s+$/g, '');
+const stripLeadingWhitespace = (value) => value.replace(/^\s+/g, '');
+const getTemplateExpressionContext = (left, right) => {
+    const trimmedLeft = stripTrailingWhitespace(left);
+    const trimmedRight = stripLeadingWhitespace(right);
+    if (trimmedLeft.endsWith('<') || trimmedLeft.endsWith('</')) {
+        return { type: 'tag' };
+    }
+    if (/{\s*\.\.\.$/.test(trimmedLeft) && trimmedRight.startsWith('}')) {
+        return { type: 'spread' };
+    }
+    const attrStringMatch = trimmedLeft.match(/=\s*(["'])$/);
+    if (attrStringMatch) {
+        const quoteChar = attrStringMatch[1];
+        if (trimmedRight.startsWith(quoteChar)) {
+            return { type: 'attributeString', quote: quoteChar };
+        }
+    }
+    if (trimmedLeft.endsWith('={') && trimmedRight.startsWith('}')) {
+        return { type: 'attributeExisting' };
+    }
+    if (/=\s*$/.test(trimmedLeft)) {
+        return { type: 'attributeUnquoted' };
+    }
+    if (trimmedLeft.endsWith('{') && trimmedRight.startsWith('}')) {
+        return { type: 'childExisting' };
+    }
+    return { type: 'childText' };
+};
+const TEMPLATE_EXPR_PLACEHOLDER_PREFIX = '__JSX_LOADER_TEMPLATE_EXPR_';
+const MODULE_PARSER_OPTIONS = {
+    lang: 'tsx',
+    sourceType: 'module',
+    range: true,
+    preserveParens: true,
+};
+const TEMPLATE_PARSER_OPTIONS = {
+    lang: 'tsx',
+    sourceType: 'module',
+    range: true,
+    preserveParens: true,
+};
+const DEFAULT_TAGS = ['jsx', 'reactJsx'];
+const escapeTemplateChunk = (chunk) => chunk.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\${/g, '\\${');
+const formatParserError = (error) => {
+    let message = `[jsx-loader] ${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 walkAst = (node, visitor) => {
+    if (!node || typeof node !== 'object') {
+        return;
+    }
+    const current = node;
+    if (typeof current.type === 'string') {
+        visitor(current);
+    }
+    for (const value of Object.values(current)) {
+        if (!value) {
+            continue;
+        }
+        if (Array.isArray(value)) {
+            value.forEach(child => walkAst(child, visitor));
+            continue;
+        }
+        if (typeof value === 'object') {
+            walkAst(value, visitor);
+        }
+    }
+};
+const shouldInterpolateName = (name) => /^[A-Z]/.test(name.name);
+const addSlot = (slots, source, range) => {
+    if (!range) {
+        return;
+    }
+    const [start, end] = range;
+    if (start === end) {
+        return;
+    }
+    slots.push({
+        start,
+        end,
+        code: source.slice(start, end),
+    });
+};
+const collectSlots = (program, source) => {
+    const slots = [];
+    const recordComponentName = (name) => {
+        if (!name) {
+            return;
+        }
+        switch (name.type) {
+            case 'JSXIdentifier': {
+                if (!shouldInterpolateName(name)) {
+                    return;
+                }
+                addSlot(slots, source, name.range);
+                break;
+            }
+            case 'JSXMemberExpression': {
+                addSlot(slots, source, name.range);
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    walkAst(program, node => {
+        switch (node.type) {
+            case 'JSXExpressionContainer': {
+                const expression = node.expression;
+                if (expression.type === 'JSXEmptyExpression') {
+                    break;
+                }
+                if (isLoaderPlaceholderIdentifier(expression)) {
+                    break;
+                }
+                addSlot(slots, source, (expression.range ?? node.range));
+                break;
+            }
+            case 'JSXSpreadAttribute': {
+                const argument = node.argument;
+                if (isLoaderPlaceholderIdentifier(argument)) {
+                    break;
+                }
+                addSlot(slots, source, argument?.range);
+                break;
+            }
+            case 'JSXSpreadChild': {
+                const expression = node.expression;
+                if (isLoaderPlaceholderIdentifier(expression)) {
+                    break;
+                }
+                addSlot(slots, source, expression?.range);
+                break;
+            }
+            case 'JSXElement': {
+                const opening = node.openingElement;
+                recordComponentName(opening.name);
+                const closing = node.closingElement;
+                if (closing?.name) {
+                    recordComponentName(closing.name);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    });
+    return slots.sort((a, b) => a.start - b.start);
+};
+const renderTemplateWithSlots = (source, slots) => {
+    let cursor = 0;
+    let output = '';
+    slots.forEach(slot => {
+        if (slot.start < cursor) {
+            throw new Error('Overlapping JSX expressions detected inside template literal.');
+        }
+        output += escapeTemplateChunk(source.slice(cursor, slot.start));
+        output += `\${${slot.code}}`;
+        cursor = slot.end;
+    });
+    output += escapeTemplateChunk(source.slice(cursor));
+    return { code: output, changed: slots.length > 0 };
+};
+const transformTemplateLiteral = (templateSource, resourcePath) => {
+    const result = (0, oxc_parser_1.parseSync)(`${resourcePath}?jsx-template`, templateSource, TEMPLATE_PARSER_OPTIONS);
+    if (result.errors.length > 0) {
+        throw new Error(formatParserError(result.errors[0]));
+    }
+    const slots = collectSlots(result.program, templateSource);
+    return renderTemplateWithSlots(templateSource, slots);
+};
+const getTaggedTemplateName = (node) => {
+    if (node.type !== 'TaggedTemplateExpression') {
+        return null;
+    }
+    const tagNode = node.tag;
+    if (tagNode.type !== 'Identifier') {
+        return null;
+    }
+    return tagNode.name;
+};
+const TAG_PLACEHOLDER_PREFIX = '__JSX_LOADER_TAG_EXPR_';
+const buildTemplateSource = (quasis, expressions, source, tag) => {
+    const placeholderMap = new Map();
+    const tagPlaceholderMap = new Map();
+    let template = '';
+    let placeholderIndex = 0;
+    let trimStartNext = 0;
+    let mutated = false;
+    const registerMarker = (code, isTag) => {
+        if (isTag) {
+            const existing = tagPlaceholderMap.get(code);
+            if (existing) {
+                return existing;
+            }
+            const marker = `${TAG_PLACEHOLDER_PREFIX}${tagPlaceholderMap.size}__`;
+            tagPlaceholderMap.set(code, marker);
+            placeholderMap.set(marker, code);
+            return marker;
+        }
+        const marker = `${TEMPLATE_EXPR_PLACEHOLDER_PREFIX}${placeholderIndex++}__`;
+        placeholderMap.set(marker, code);
+        return marker;
+    };
+    quasis.forEach((quasi, index) => {
+        let chunk = quasi.value.cooked;
+        if (typeof chunk !== 'string') {
+            chunk = quasi.value.raw ?? '';
+        }
+        if (trimStartNext > 0) {
+            chunk = chunk.slice(trimStartNext);
+            trimStartNext = 0;
+        }
+        template += chunk;
+        const expression = expressions[index];
+        if (!expression) {
+            return;
+        }
+        const start = expression.start ?? null;
+        const end = expression.end ?? null;
+        if (start === null || end === null) {
+            throw new Error('Unable to read template expression source range.');
+        }
+        const nextChunk = quasis[index + 1];
+        const nextValue = nextChunk?.value;
+        const rightText = nextValue?.cooked ?? nextValue?.raw ?? '';
+        const context = getTemplateExpressionContext(chunk, rightText);
+        const code = source.slice(start, end);
+        const marker = registerMarker(code, context.type === 'tag');
+        const appendMarker = (wrapper) => {
+            template += wrapper ? wrapper(marker) : marker;
+        };
+        switch (context.type) {
+            case 'tag':
+            case 'spread':
+            case 'attributeExisting':
+            case 'childExisting': {
+                appendMarker();
+                break;
+            }
+            case 'attributeString': {
+                const quoteChar = context.quote;
+                if (!template.endsWith(quoteChar)) {
+                    throw new Error(`[jsx-loader] Expected attribute quote ${quoteChar} before template expression inside ${tag}\`\` block.`);
+                }
+                template = template.slice(0, -1);
+                appendMarker(identifier => `{${identifier}}`);
+                mutated = true;
+                if (rightText.startsWith(quoteChar)) {
+                    trimStartNext = 1;
+                }
+                break;
+            }
+            case 'attributeUnquoted': {
+                appendMarker(identifier => `{${identifier}}`);
+                mutated = true;
+                break;
+            }
+            case 'childText': {
+                appendMarker(identifier => `{${identifier}}`);
+                mutated = true;
+                break;
+            }
+        }
+    });
+    return {
+        source: template,
+        mutated,
+        placeholders: Array.from(placeholderMap.entries()).map(([marker, code]) => ({
+            marker,
+            code,
+        })),
+    };
+};
+const restoreTemplatePlaceholders = (code, placeholders) => placeholders.reduce((result, placeholder) => {
+    return result.split(placeholder.marker).join(`\${${placeholder.code}}`);
+}, code);
+const isLoaderPlaceholderIdentifier = (node) => {
+    if (node?.type !== 'Identifier' || typeof node.name !== 'string') {
+        return false;
+    }
+    return (node.name.startsWith(TEMPLATE_EXPR_PLACEHOLDER_PREFIX) ||
+        node.name.startsWith(TAG_PLACEHOLDER_PREFIX));
+};
+const transformSource = (source, config) => {
+    const ast = (0, oxc_parser_1.parseSync)(config.resourcePath, source, MODULE_PARSER_OPTIONS);
+    if (ast.errors.length > 0) {
+        throw new Error(formatParserError(ast.errors[0]));
+    }
+    const taggedTemplates = [];
+    walkAst(ast.program, node => {
+        const tagName = getTaggedTemplateName(node);
+        if (tagName && config.tags.includes(tagName)) {
+            taggedTemplates.push({ node, tagName });
+        }
+    });
+    if (!taggedTemplates.length) {
+        return source;
+    }
+    const magic = new magic_string_1.default(source);
+    let mutated = false;
+    taggedTemplates
+        .sort((a, b) => b.node.start - a.node.start)
+        .forEach(entry => {
+        const { node, tagName } = entry;
+        const quasi = node.quasi;
+        const templateSource = buildTemplateSource(quasi.quasis, quasi.expressions, source, tagName);
+        const { code, changed } = transformTemplateLiteral(templateSource.source, config.resourcePath);
+        const restored = restoreTemplatePlaceholders(code, templateSource.placeholders);
+        const templateChanged = changed || templateSource.mutated;
+        if (!templateChanged) {
+            return;
+        }
+        const tagSource = source.slice(node.tag.start, node.tag.end);
+        const replacement = `${tagSource}\`${restored}\``;
+        magic.overwrite(node.start, node.end, replacement);
+        mutated = true;
+    });
+    return mutated ? magic.toString() : source;
+};
+function jsxLoader(input) {
+    const callback = this.async();
+    try {
+        const options = this.getOptions?.() ?? {};
+        const explicitTags = Array.isArray(options.tags)
+            ? options.tags.filter((value) => typeof value === 'string' && value.length > 0)
+            : null;
+        const legacyTag = typeof options.tag === 'string' && options.tag.length > 0 ? options.tag : null;
+        const tagList = explicitTags?.length
+            ? explicitTags
+            : legacyTag
+                ? [legacyTag]
+                : DEFAULT_TAGS;
+        const tags = Array.from(new Set(tagList));
+        const source = typeof input === 'string' ? input : input.toString('utf8');
+        const output = transformSource(source, {
+            resourcePath: this.resourcePath,
+            tags,
+        });
+        callback(null, output);
+    }
+    catch (error) {
+        callback(error);
+    }
+}

package/dist/cjs/loader/jsx.d.cts

@@ -0,0 +1,19 @@
+type LoaderCallback = (err: Error | null, content?: string) => void;
+type LoaderContext<TOptions> = {
+    resourcePath: string;
+    async(): LoaderCallback;
+    getOptions?: () => Partial<TOptions>;
+};
+type LoaderOptions = {
+    /**
+     * Name of the tagged template function. Defaults to `jsx`.
+     * Deprecated in favor of `tags`.
+     */
+    tag?: string;
+    /**
+     * List of tagged template function names to transform. Defaults to `['jsx', 'reactJsx']`.
+     */
+    tags?: string[];
+};
+export default function jsxLoader(this: LoaderContext<LoaderOptions>, input: string | Buffer): void;
+export {};

package/dist/cjs/react/index.cjs

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

package/dist/cjs/react/index.d.cts

@@ -0,0 +1,2 @@
+export { reactJsx } from './react-jsx.cjs';
+export type { ReactJsxComponent } from './react-jsx.cjs';

package/dist/cjs/react/react-jsx.cjs

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactJsx = void 0;
+const oxc_parser_1 = require("oxc-parser");
+const shared_js_1 = require("../runtime/shared.cjs");
+const react_1 = require("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) => (0, shared_js_1.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 = (0, shared_js_1.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 = (0, shared_js_1.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 (0, react_1.createElement)(type, props, ...children);
+};
+const evaluateReactJsxElement = (element, ctx) => {
+    const opening = element.openingElement;
+    const tagName = (0, shared_js_1.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 (0, react_1.createElement)(react_1.Fragment, null, ...children);
+    }
+    return evaluateReactJsxElement(node, ctx);
+};
+const reactJsx = (templates, ...values) => {
+    const build = (0, shared_js_1.buildTemplate)(templates, values);
+    const result = (0, oxc_parser_1.parseSync)('inline.jsx', build.source, shared_js_1.parserOptions);
+    if (result.errors.length > 0) {
+        throw new Error((0, shared_js_1.formatParserError)(result.errors[0]));
+    }
+    const root = (0, shared_js_1.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);
+};
+exports.reactJsx = reactJsx;

package/dist/cjs/react/react-jsx.d.cts

@@ -0,0 +1,5 @@
+import { type ComponentType, type ReactElement, type ReactNode } from 'react';
+export type ReactJsxComponent<Props = Record<string, unknown>> = ComponentType<Props & {
+    children?: ReactNode;
+}>;
+export declare const reactJsx: (templates: TemplateStringsArray, ...values: unknown[]) => ReactElement;