@knighted/jsx 1.6.3 → 1.7.0

package/dist/cjs/loader/dom-template-builder.cjs

@@ -0,0 +1,217 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DOM_HELPER_SNIPPETS = exports.compileDomTemplate = void 0;
+const oxc_parser_1 = require("oxc-parser");
+const template_diagnostics_js_1 = require("../internal/template-diagnostics.cjs");
+const dom_snippets_js_1 = require("./helpers/dom-snippets.cjs");
+Object.defineProperty(exports, "DOM_HELPER_SNIPPETS", { enumerable: true, get: function () { return dom_snippets_js_1.DOM_HELPER_SNIPPETS; } });
+const normalize_text_js_1 = require("../shared/normalize-text.cjs");
+const TEMPLATE_PARSER_OPTIONS = {
+    lang: 'tsx',
+    sourceType: 'module',
+    range: true,
+    preserveParens: true,
+};
+const NAMESPACE_URIS = {
+    html: 'http://www.w3.org/1999/xhtml',
+    svg: 'http://www.w3.org/2000/svg',
+    math: 'http://www.w3.org/1998/Math/MathML',
+};
+const createPlaceholderMap = (placeholders) => new Map(placeholders.map(entry => [entry.marker, entry.code]));
+const isLoaderPlaceholderIdentifier = (node) => {
+    const name = node.name;
+    return typeof name === 'string' && name.startsWith('__JSX_LOADER');
+};
+class DomTemplateBuilder {
+    placeholderMap;
+    helpers;
+    id = 0;
+    constructor(placeholderSource) {
+        this.placeholderMap = createPlaceholderMap(placeholderSource);
+        this.helpers = new Set();
+    }
+    compile(root) {
+        const code = this.compileNode(root, 'html');
+        return { code, helpers: this.helpers };
+    }
+    nextId(prefix) {
+        return `__jsxDom_${prefix}_${this.id++}`;
+    }
+    compileNode(node, namespace) {
+        if (node.type === 'JSXFragment') {
+            const fragVar = this.nextId('frag');
+            const lines = [`const ${fragVar} = document.createDocumentFragment()`];
+            node.children.forEach(child => {
+                const childExpr = this.compileChild(child, namespace);
+                if (childExpr) {
+                    this.helpers.add('dom');
+                    lines.push(`__jsxDomAppend(${fragVar}, ${childExpr})`);
+                }
+            });
+            lines.push(`return ${fragVar}`);
+            return `(() => { ${lines.join('; ')} })()`;
+        }
+        const { tagExpr, namespace: tagNs } = this.compileTagName(node.openingElement.name);
+        const resolvedNs = tagNs ?? namespace;
+        const creator = resolvedNs === 'html'
+            ? `document.createElement(${tagExpr})`
+            : `document.createElementNS('${NAMESPACE_URIS[resolvedNs]}', ${tagExpr})`;
+        const elVar = this.nextId('el');
+        const lines = [`const ${elVar} = ${creator}`];
+        node.openingElement.attributes.forEach(attr => {
+            if (attr.type === 'JSXSpreadAttribute') {
+                this.helpers.add('dom');
+                const value = this.compileExpression(attr.argument);
+                lines.push(`__jsxDomAssignProps(${elVar}, ${value}, '${resolvedNs}')`);
+                return;
+            }
+            const name = this.compileAttributeName(attr.name);
+            const valueExpr = this.compileAttributeValue(attr);
+            if (!valueExpr) {
+                /* c8 ignore next */
+                return;
+            }
+            this.helpers.add('dom');
+            lines.push(`__jsxDomSetProp(${elVar}, ${name}, ${valueExpr}, '${resolvedNs}')`);
+        });
+        node.children.forEach(child => {
+            const childExpr = this.compileChild(child, resolvedNs);
+            if (childExpr) {
+                this.helpers.add('dom');
+                lines.push(`__jsxDomAppend(${elVar}, ${childExpr})`);
+            }
+        });
+        lines.push(`return ${elVar}`);
+        return `(() => { ${lines.join('; ')} })()`;
+    }
+    compileAttributeValue(attr) {
+        if (!attr.value) {
+            return 'true';
+        }
+        if (attr.value.type === 'Literal') {
+            return JSON.stringify(attr.value.value);
+        }
+        if (attr.value.type === 'JSXExpressionContainer') {
+            const expr = attr.value.expression;
+            if (expr.type === 'JSXEmptyExpression') {
+                /* c8 ignore next */
+                return null;
+            }
+            return this.compileExpression(expr);
+        }
+        /* c8 ignore next */
+        return 'undefined';
+    }
+    compileAttributeName(name) {
+        if (name.type === 'JSXIdentifier') {
+            return JSON.stringify(name.name);
+        }
+        if (name.type === 'JSXNamespacedName') {
+            return JSON.stringify(`${name.namespace.name}:${name.name.name}`);
+        }
+        if (name.type === 'JSXMemberExpression') {
+            return JSON.stringify(`${this.compileAttributeName(name.object).replace(/"/g, '')}.${name.property.name}`);
+        }
+        /* c8 ignore next */
+        return '""';
+    }
+    compileChild(child, namespace) {
+        switch (child.type) {
+            case 'JSXText': {
+                const text = (0, normalize_text_js_1.normalizeJsxText)(child.value);
+                if (!text)
+                    return null;
+                return JSON.stringify(text);
+            }
+            case 'JSXExpressionContainer': {
+                if (child.expression.type === 'JSXEmptyExpression')
+                    return null;
+                return this.compileExpression(child.expression);
+            }
+            case 'JSXSpreadChild': {
+                return this.compileExpression(child.expression);
+            }
+            case 'JSXElement':
+            case 'JSXFragment': {
+                return this.compileNode(child, namespace);
+            }
+            default:
+                /* c8 ignore next */
+                return null;
+        }
+    }
+    compileTagName(name) {
+        if (!name) {
+            /* c8 ignore next */
+            throw new Error('[jsx-loader] Encountered JSX element without a tag name.');
+        }
+        if (name.type === 'JSXIdentifier') {
+            if (isLoaderPlaceholderIdentifier(name)) {
+                const resolved = this.placeholderMap.get(name.name);
+                if (!resolved) {
+                    throw new Error('[jsx-loader] Unable to resolve placeholder for tag expression.');
+                }
+                return { tagExpr: resolved, namespace: null };
+            }
+            const tagName = name.name;
+            const lower = tagName.toLowerCase();
+            if (lower === 'svg')
+                return { tagExpr: JSON.stringify(tagName), namespace: 'svg' };
+            if (lower === 'math')
+                return { tagExpr: JSON.stringify(tagName), namespace: 'math' };
+            return { tagExpr: JSON.stringify(tagName), namespace: null };
+        }
+        if (name.type === 'JSXMemberExpression') {
+            const tagExpr = `${this.compileAttributeName(name.object).replace(/"/g, '')}.${name.property.name}`;
+            return { tagExpr: JSON.stringify(tagExpr), namespace: null };
+        }
+        if (name.type === 'JSXNamespacedName') {
+            const tagExpr = `${name.namespace.name}:${name.name.name}`;
+            return { tagExpr: JSON.stringify(tagExpr), namespace: null };
+        }
+        /* c8 ignore next */
+        throw new Error('[jsx-loader] Unsupported tag expression in dom mode.');
+    }
+    compileExpression(node) {
+        if (node.type === 'JSXElement' || node.type === 'JSXFragment') {
+            return this.compileNode(node, 'html');
+        }
+        if (node.type === 'Identifier') {
+            const resolved = this.placeholderMap.get(node.name);
+            if (resolved)
+                return resolved;
+            return node.name;
+        }
+        if (node.type === 'Literal') {
+            return JSON.stringify(node.value);
+        }
+        if ('range' in node && Array.isArray(node.range)) {
+            throw new Error('[jsx-loader] Unable to inline complex expressions in dom mode.');
+        }
+        /* c8 ignore next */
+        throw new Error('[jsx-loader] Unable to compile expression for dom mode.');
+    }
+}
+const compileDomTemplate = (templateSource, placeholders, resourcePath, tagName, templates, diagnostics) => {
+    const parsed = (0, oxc_parser_1.parseSync)(`${resourcePath}?jsx-dom-template`, templateSource, TEMPLATE_PARSER_OPTIONS);
+    if (parsed.errors.length > 0) {
+        throw new Error((0, template_diagnostics_js_1.formatTaggedTemplateParserError)(tagName, templates, diagnostics, parsed.errors[0], {
+            label: 'jsx-loader',
+        }));
+    }
+    const root = extractJsxRoot(parsed.program);
+    const builder = new DomTemplateBuilder(placeholders);
+    return builder.compile(root);
+};
+exports.compileDomTemplate = compileDomTemplate;
+const extractJsxRoot = (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('[jsx-loader] Expected the template to contain a single JSX root node.');
+};

package/dist/cjs/loader/dom-template-builder.d.cts

@@ -0,0 +1,12 @@
+import { type TemplateDiagnostics } from '../internal/template-diagnostics.cjs';
+import { DOM_HELPER_SNIPPETS, type DomHelperKind } from './helpers/dom-snippets.cjs';
+export type TemplatePlaceholder = {
+    marker: string;
+    code: string;
+};
+type DomCompileResult = {
+    code: string;
+    helpers: Set<DomHelperKind>;
+};
+export declare const compileDomTemplate: (templateSource: string, placeholders: TemplatePlaceholder[], resourcePath: string, tagName: string, templates: TemplateStringsArray, diagnostics: TemplateDiagnostics) => DomCompileResult;
+export { DOM_HELPER_SNIPPETS };

package/dist/cjs/loader/helpers/dom-snippets.cjs

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DOM_HELPER_SNIPPETS = void 0;
+exports.DOM_HELPER_SNIPPETS = {
+    dom: `const __jsxDomAppend = (parent, child) => {
+  if (child === null || child === undefined || typeof child === 'boolean') return
+  if (Array.isArray(child)) { child.forEach(entry => __jsxDomAppend(parent, entry)); return }
+  if (typeof child === 'object' && typeof child[Symbol.iterator] === 'function') {
+    for (const entry of child) __jsxDomAppend(parent, entry); return
+  }
+  if (child instanceof Node) { parent.appendChild(child); return }
+  parent.appendChild(document.createTextNode(String(child)))
+}
+
+const __jsxDomClass = (el, value) => {
+  if (value === null || value === undefined || value === false) return
+  if (typeof value === 'string' || typeof value === 'number') { el.classList.add(...String(value).trim().split(/\\s+/u).filter(Boolean)); return }
+  if (Array.isArray(value)) { value.forEach(entry => __jsxDomClass(el, entry)); return }
+  if (typeof value === 'object') {
+    Object.entries(value).forEach(([key, active]) => {
+      if (active) el.classList.add(key)
+      else el.classList.remove(key)
+    })
+  }
+}
+
+const __jsxDomStyle = (el, value) => {
+  if (value === null || value === undefined || value === false) return
+  const style = el.style
+  if (!style) return
+  if (typeof value === 'string') { style.cssText += value; return }
+  if (typeof value === 'object') {
+    Object.entries(value).forEach(([key, v]) => {
+      if (v === null || v === undefined) return
+      if (key.startsWith('--')) { style.setProperty(key, String(v)); return }
+      style[key] = v
+    })
+  }
+}
+
+const __jsxDomResolveHandler = (propName, value) => {
+  if (typeof value === 'function' || (value && typeof value === 'object' && typeof value.handleEvent === 'function')) {
+    return { listener: value }
+  }
+  if (!value || typeof value !== 'object' || !('handler' in value)) {
+    return null
+  }
+  const handler = value.handler
+  if (typeof handler !== 'function' && !(handler && typeof handler === 'object' && typeof handler.handleEvent === 'function')) {
+    return null
+  }
+  const options = value.options ? { ...value.options } : undefined
+  const assign = (key, v) => {
+    if (v === undefined || v === null) return
+    if (!options) options = {}
+    options[key] = v
+  }
+  assign('capture', value.capture)
+  assign('once', value.once)
+  assign('passive', value.passive)
+  assign('signal', value.signal ?? undefined)
+  return { listener: handler, options }
+}
+
+const __jsxDomParseEventName = raw => {
+  if (!raw.startsWith('on')) return null
+  if (raw.startsWith('on:')) {
+    const name = raw.slice(3)
+    if (!name) return null
+    const capture = name.endsWith('Capture')
+    const eventName = capture ? name.slice(0, -7) : name
+    if (!eventName) return null
+    return { eventName, capture }
+  }
+  const name = raw.slice(2)
+  if (!name) return null
+  const capture = name.endsWith('Capture')
+  const eventName = (capture ? name.slice(0, -7) : name).toLowerCase()
+  if (!eventName) return null
+  return { eventName, capture }
+}
+
+const __jsxDomEvent = (el, propName, value) => {
+  const parsed = __jsxDomParseEventName(propName)
+  if (!parsed) return false
+  const resolved = __jsxDomResolveHandler(propName, value)
+  if (!resolved) return true
+  let options = resolved.options ? { ...resolved.options } : undefined
+  if (parsed.capture) {
+    if (!options) options = { capture: true }
+    else options.capture = true
+  }
+  el.addEventListener(parsed.eventName, resolved.listener, options)
+  return true
+}
+
+const __jsxDomNamespaceForAttr = (raw, namespace) => {
+  if (!raw.includes(':')) return null
+  const prefix = raw.split(':', 1)[0]
+  if (prefix === 'xml') return 'http://www.w3.org/XML/1998/namespace'
+  if (prefix === 'xlink') return 'http://www.w3.org/1999/xlink'
+  if (namespace === 'svg') return 'http://www.w3.org/2000/svg'
+  if (namespace === 'math') return 'http://www.w3.org/1998/Math/MathML'
+  return null
+}
+
+const __jsxDomSetProp = (el, name, value, namespace) => {
+  if (value === null || value === undefined) return
+  if (name === 'dangerouslySetInnerHTML' && value && typeof value === 'object' && '__html' in value) {
+    el.innerHTML = String(value.__html ?? '')
+    return
+  }
+  const ns = __jsxDomNamespaceForAttr(name, namespace)
+  if (name === 'ref') {
+    if (typeof value === 'function') { value(el); return }
+    if (value && typeof value === 'object') { value.current = el; return }
+  }
+  if (name === 'class' || name === 'className') { __jsxDomClass(el, value); return }
+  if (name === 'style') { __jsxDomStyle(el, value); return }
+  if (__jsxDomEvent(el, name, value)) return
+  if (typeof value === 'boolean') {
+    if (value) {
+      if (ns) el.setAttributeNS(ns, name, '')
+      else el.setAttribute(name, '')
+    } else {
+      if (ns) el.removeAttributeNS(ns, name)
+      else el.removeAttribute(name)
+    }
+    if (name in el) { try { el[name] = value } catch {}
+    }
+    return
+  }
+  if (name.startsWith('data-')) { el.setAttribute(name, value as any); return }
+  if (name in el && name !== 'list') {
+    try { (el as any)[name] = value } catch {}
+    return
+  }
+  if (ns) el.setAttributeNS(ns, name, value as any)
+  else el.setAttribute(name, value as any)
+}
+
+const __jsxDomAssignProps = (el, props, namespace) => {
+  if (!props) return
+  Object.entries(props).forEach(([name, value]) => {
+    __jsxDomSetProp(el, name, value, namespace)
+  })
+}
+`,
+};

package/dist/cjs/loader/helpers/dom-snippets.d.cts

@@ -0,0 +1,2 @@
+export type DomHelperKind = 'dom';
+export declare const DOM_HELPER_SNIPPETS: Record<DomHelperKind, string>;

package/dist/cjs/loader/helpers/format-import-specifier.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatImportSpecifier = void 0;
+const formatImportSpecifier = (spec) => {
+    const node = spec;
+    if (node.type === 'ImportDefaultSpecifier') {
+        const name = node.local?.name;
+        if (!name) {
+            throw new Error('[jsx-loader] Encountered default import without a local name.');
+        }
+        return name;
+    }
+    if (node.type === 'ImportNamespaceSpecifier') {
+        const name = node.local?.name;
+        if (!name) {
+            throw new Error('[jsx-loader] Encountered namespace import without a local name.');
+        }
+        return `* as ${name}`;
+    }
+    if (node.type === 'ImportSpecifier') {
+        const imported = node.imported?.name;
+        if (!imported) {
+            throw new Error('[jsx-loader] Encountered named import without an imported name.');
+        }
+        const local = node.local?.name ?? imported;
+        return imported === local ? imported : `${imported} as ${local}`;
+    }
+    return '';
+};
+exports.formatImportSpecifier = formatImportSpecifier;

package/dist/cjs/loader/helpers/format-import-specifier.d.cts

@@ -0,0 +1,13 @@
+type AnyNode = {
+    type: string;
+    local?: {
+        name?: string;
+    };
+    imported?: {
+        name?: string;
+        value?: string;
+    };
+    [key: string]: unknown;
+};
+export declare const formatImportSpecifier: (spec: AnyNode) => string;
+export {};

package/dist/cjs/loader/helpers/materialize-slice.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.materializeSlice = void 0;
+const parse_range_key_js_1 = require("./parse-range-key.cjs");
+const materializeSlice = (start, end, source, replacements) => {
+    const exact = replacements.get(`${start}:${end}`);
+    if (exact !== undefined) {
+        return exact;
+    }
+    const nested = [];
+    replacements.forEach((code, key) => {
+        const range = (0, parse_range_key_js_1.parseRangeKey)(key);
+        if (!range)
+            return;
+        const [rStart, rEnd] = range;
+        if (rStart >= start && rEnd <= end) {
+            nested.push({ start: rStart, end: rEnd, code });
+        }
+    });
+    if (!nested.length) {
+        return source.slice(start, end);
+    }
+    nested.sort((a, b) => a.start - b.start);
+    let cursor = start;
+    let output = '';
+    nested.forEach(entry => {
+        if (entry.start < cursor) {
+            throw new Error(`[jsx-loader] Overlapping replacement ranges detected (${entry.start}:${entry.end}) within ${start}:${end}. Nested replacements must not overlap.`);
+        }
+        output += source.slice(cursor, entry.start);
+        output += entry.code;
+        cursor = entry.end;
+    });
+    output += source.slice(cursor, end);
+    return output;
+};
+exports.materializeSlice = materializeSlice;

package/dist/cjs/loader/helpers/materialize-slice.d.cts

@@ -0,0 +1 @@
+export declare const materializeSlice: (start: number, end: number, source: string, replacements: Map<string, string>) => string;

package/dist/cjs/loader/helpers/parse-range-key.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseRangeKey = void 0;
+const parseRangeKey = (key) => {
+    const [start, end] = key.split(':').map(entry => Number.parseInt(entry, 10));
+    if (!Number.isFinite(start) || !Number.isFinite(end)) {
+        return null;
+    }
+    if (end < start) {
+        return null;
+    }
+    return [start, end];
+};
+exports.parseRangeKey = parseRangeKey;

package/dist/cjs/loader/helpers/parse-range-key.d.cts

@@ -0,0 +1 @@
+export declare const parseRangeKey: (key: string) => [number, number] | null;

package/dist/cjs/loader/helpers/rewrite-imports-without-tags.cjs

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rewriteImportsWithoutTags = void 0;
+const format_import_specifier_js_1 = require("./format-import-specifier.cjs");
+const rewriteImportsWithoutTags = (program, magic, inlineTagNames, originalSource) => {
+    if (!inlineTagNames.size) {
+        return false;
+    }
+    let mutated = false;
+    program.body.forEach(node => {
+        if (node.type !== 'ImportDeclaration') {
+            return;
+        }
+        const specifiers = node.specifiers;
+        const kept = [];
+        let removed = false;
+        specifiers.forEach(spec => {
+            const localName = spec.local?.name;
+            if (!localName) {
+                kept.push(spec);
+                return;
+            }
+            const shouldDrop = inlineTagNames.has(localName);
+            if (shouldDrop) {
+                removed = true;
+                return;
+            }
+            kept.push(spec);
+        });
+        if (!removed) {
+            return;
+        }
+        if (!kept.length) {
+            magic.remove(node.start, node.end);
+            mutated = true;
+            return;
+        }
+        const keyword = node.importKind === 'type' ? 'import type' : 'import';
+        const bindings = [];
+        const defaultSpec = kept.find(spec => spec.type === 'ImportDefaultSpecifier');
+        const namespaceSpec = kept.find(spec => spec.type === 'ImportNamespaceSpecifier');
+        const namedSpecs = kept.filter(spec => spec.type === 'ImportSpecifier');
+        if (defaultSpec) {
+            bindings.push((0, format_import_specifier_js_1.formatImportSpecifier)(defaultSpec));
+        }
+        if (namespaceSpec) {
+            bindings.push((0, format_import_specifier_js_1.formatImportSpecifier)(namespaceSpec));
+        }
+        if (namedSpecs.length) {
+            bindings.push(`{ ${namedSpecs.map(format_import_specifier_js_1.formatImportSpecifier).join(', ')} }`);
+        }
+        const sourceLiteral = node.source;
+        const sourceText = sourceLiteral.raw
+            ? sourceLiteral.raw
+            : originalSource.slice(sourceLiteral.start ?? 0, sourceLiteral.end ?? 0);
+        const rewritten = `${keyword} ${bindings.join(', ')} from ${sourceText}`;
+        magic.overwrite(node.start, node.end, rewritten);
+        mutated = true;
+    });
+    return mutated;
+};
+exports.rewriteImportsWithoutTags = rewriteImportsWithoutTags;

package/dist/cjs/loader/helpers/rewrite-imports-without-tags.d.cts

@@ -0,0 +1,3 @@
+import type MagicString from 'magic-string';
+import type { Program } from '@oxc-project/types';
+export declare const rewriteImportsWithoutTags: (program: Program, magic: MagicString, inlineTagNames: Set<string>, originalSource: string) => boolean;