@knighted/jsx 1.6.3 → 1.7.0

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

@@ -0,0 +1,33 @@
+import { parseRangeKey } from './parse-range-key.js';
+export 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 = 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;
+};

package/dist/loader/helpers/parse-range-key.d.ts

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

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

@@ -0,0 +1,10 @@
+export 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];
+};

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

@@ -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;

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

@@ -0,0 +1,58 @@
+import { formatImportSpecifier } from './format-import-specifier.js';
+export 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(formatImportSpecifier(defaultSpec));
+        }
+        if (namespaceSpec) {
+            bindings.push(formatImportSpecifier(namespaceSpec));
+        }
+        if (namedSpecs.length) {
+            bindings.push(`{ ${namedSpecs.map(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;
+};

package/dist/loader/jsx.d.ts

@@ -1,4 +1,5 @@
 import { type SourceMap } from 'magic-string';
+import { type LoaderMode } from './modes.js';
 type LoaderCallback = (error: Error | null, content?: string, map?: SourceMap | null) => void;
 type LoaderContext<TOptions> = {
     resourcePath: string;
@@ -7,7 +8,6 @@ type LoaderContext<TOptions> = {
     async(): LoaderCallback;
     getOptions?: () => Partial<TOptions>;
 };
-type LoaderMode = 'runtime' | 'react';
 type LoaderOptions = {
     /**
      * Name of the tagged template function. Defaults to `jsx`.

package/dist/loader/jsx.js

@@ -1,6 +1,11 @@
 import MagicString from 'magic-string';
 import { parseSync } from 'oxc-parser';
 import { formatTaggedTemplateParserError, } from '../internal/template-diagnostics.js';
+import { compileDomTemplate, DOM_HELPER_SNIPPETS } from './dom-template-builder.js';
+import { materializeSlice } from './helpers/materialize-slice.js';
+import { rewriteImportsWithoutTags } from './helpers/rewrite-imports-without-tags.js';
+import { DEFAULT_MODE, parseLoaderMode } from './modes.js';
+import { normalizeJsxText } from '../shared/normalize-text.js';
 const createPlaceholderMap = (placeholders) => new Map(placeholders.map(entry => [entry.marker, entry.code]));
 class ReactTemplateBuilder {
     placeholderMap;
@@ -217,25 +222,13 @@ const TEMPLATE_PARSER_OPTIONS = {
     preserveParens: true,
 };
 const DEFAULT_TAGS = ['jsx', 'reactJsx'];
-const DEFAULT_MODE = 'runtime';
 const WEB_TARGETS = new Set(['web', 'webworker', 'electron-renderer', 'node-webkit']);
 const isWebTarget = (target) => target ? WEB_TARGETS.has(target) : false;
 const HELPER_SNIPPETS = {
     react: `const __jsxReactMergeProps = (...sources) => Object.assign({}, ...sources)
 const __jsxReact = (type, props, ...children) => React.createElement(type, props, ...children)
 `,
-};
-const parseLoaderMode = (value) => {
-    if (typeof value !== 'string') {
-        return null;
-    }
-    switch (value) {
-        case 'runtime':
-        case 'react':
-            return value;
-        default:
-            return null;
-    }
+    ...DOM_HELPER_SNIPPETS,
 };
 const escapeTemplateChunk = (chunk) => chunk.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\${/g, '\\${');
 const formatParserError = (error) => {
@@ -412,19 +405,8 @@ const extractJsxRoot = (program) => {
     throw new Error('[jsx-loader] Expected the template to contain a single JSX root node.');
 };
 const normalizeJsxTextSegments = (value, placeholders) => {
-    const collapsed = value.replace(/\r/g, '').replace(/\n\s+/g, ' ');
-    const leadingWhitespace = value.match(/^\s*/)?.[0] ?? '';
-    const trailingWhitespace = value.match(/\s*$/)?.[0] ?? '';
-    const trimStart = /\n/.test(leadingWhitespace);
-    const trimEnd = /\n/.test(trailingWhitespace);
-    let normalized = collapsed;
-    if (trimStart) {
-        normalized = normalized.replace(/^\s+/, '');
-    }
-    if (trimEnd) {
-        normalized = normalized.replace(/\s+$/, '');
-    }
-    if (normalized.length === 0 || normalized.trim().length === 0) {
+    const normalized = normalizeJsxText(value);
+    if (!normalized) {
         return [];
     }
     const segments = [];
@@ -473,7 +455,7 @@ const materializeTemplateStrings = (quasis) => {
     });
     return templates;
 };
-const buildTemplateSource = (quasis, expressions, source, tag) => {
+const buildTemplateSource = (quasis, expressions, source, tag, replacements) => {
     const placeholderMap = new Map();
     const tagPlaceholderMap = new Map();
     let template = '';
@@ -532,7 +514,7 @@ const buildTemplateSource = (quasis, expressions, source, tag) => {
         const nextValue = nextChunk?.value;
         const rightText = nextValue?.cooked ?? nextValue?.raw ?? '';
         const context = getTemplateExpressionContext(chunk, rightText);
-        const code = source.slice(start, end);
+        const code = materializeSlice(start, end, source, replacements);
         const marker = registerMarker(code, context.type === 'tag');
         const appendMarker = (wrapper) => {
             const insertion = wrapper ? wrapper(marker) : marker;
@@ -629,13 +611,15 @@ const transformSource = (source, config, options) => {
     const magic = new MagicString(source);
     let mutated = false;
     const helperKinds = new Set();
+    const replacements = new Map();
+    const inlineTags = new Set();
     taggedTemplates
         .sort((a, b) => b.node.start - a.node.start)
         .forEach(entry => {
         const { node, tagName } = entry;
         const mode = config.tagModes.get(tagName) ?? DEFAULT_MODE;
         const quasi = node.quasi;
-        const templateSource = buildTemplateSource(quasi.quasis, quasi.expressions, source, tagName);
+        const templateSource = buildTemplateSource(quasi.quasis, quasi.expressions, source, tagName, replacements);
         const templateStrings = materializeTemplateStrings(quasi.quasis);
         if (mode === 'runtime') {
             const { code, changed } = transformTemplateLiteral(templateSource.source, config.resourcePath, tagName, templateStrings, templateSource.diagnostics);
@@ -647,6 +631,7 @@ const transformSource = (source, config, options) => {
             const tagSource = source.slice(node.tag.start, node.tag.end);
             const replacement = `${tagSource}\`${restored}\``;
             magic.overwrite(node.start, node.end, replacement);
+            replacements.set(`${node.start}:${node.end}`, replacement);
             mutated = true;
             return;
         }
@@ -654,7 +639,18 @@ const transformSource = (source, config, options) => {
             const compiled = compileReactTemplate(templateSource.source, templateSource.placeholders, config.resourcePath, tagName, templateStrings, templateSource.diagnostics);
             helperKinds.add('react');
             magic.overwrite(node.start, node.end, compiled);
+            replacements.set(`${node.start}:${node.end}`, compiled);
             mutated = true;
+            inlineTags.add(tagName);
+            return;
+        }
+        if (mode === 'dom') {
+            const result = compileDomTemplate(templateSource.source, templateSource.placeholders, config.resourcePath, tagName, templateStrings, templateSource.diagnostics);
+            result.helpers.forEach(helper => helperKinds.add(helper));
+            magic.overwrite(node.start, node.end, result.code);
+            replacements.set(`${node.start}:${node.end}`, result.code);
+            mutated = true;
+            inlineTags.add(tagName);
             return;
         }
         /* c8 ignore next */
@@ -662,6 +658,9 @@ const transformSource = (source, config, options) => {
         // Modes are validated during option parsing; this fallback guards future extensions.
         throw new Error(`[jsx-loader] Transformation mode "${mode}" not implemented yet for tag "${tagName}".`);
     });
+    if (rewriteImportsWithoutTags(ast.program, magic, inlineTags, source)) {
+        mutated = true;
+    }
     const helperSource = Array.from(helperKinds)
         .map(kind => HELPER_SNIPPETS[kind])
         .filter(Boolean)

package/dist/loader/modes.d.ts

@@ -0,0 +1,3 @@
+export type LoaderMode = 'runtime' | 'react' | 'dom';
+export declare const DEFAULT_MODE: LoaderMode;
+export declare const parseLoaderMode: (value: unknown) => LoaderMode | null;

package/dist/loader/modes.js

@@ -0,0 +1,13 @@
+export const DEFAULT_MODE = 'runtime';
+export const parseLoaderMode = (value) => {
+    if (typeof value !== 'string')
+        return null;
+    switch (value) {
+        case 'runtime':
+        case 'react':
+        case 'dom':
+            return value;
+        default:
+            return null;
+    }
+};

package/dist/runtime/shared.js

@@ -1,3 +1,4 @@
+import { normalizeJsxText } from '../shared/normalize-text.js';
 export { formatTaggedTemplateParserError } from '../internal/template-diagnostics.js';
 const OPEN_TAG_RE = /<\s*$/;
 const CLOSE_TAG_RE = /<\/\s*$/;
@@ -70,19 +71,8 @@ export const walkAst = (node, visitor) => {
     });
 };
 export const normalizeJsxTextSegments = (value, placeholders) => {
-    const collapsed = value.replace(/\r/g, '').replace(/\n\s+/g, ' ');
-    const leadingWhitespace = value.match(/^\s*/)?.[0] ?? '';
-    const trailingWhitespace = value.match(/\s*$/)?.[0] ?? '';
-    const trimStart = /\n/.test(leadingWhitespace);
-    const trimEnd = /\n/.test(trailingWhitespace);
-    let normalized = collapsed;
-    if (trimStart) {
-        normalized = normalized.replace(/^\s+/, '');
-    }
-    if (trimEnd) {
-        normalized = normalized.replace(/\s+$/, '');
-    }
-    if (normalized.length === 0 || normalized.trim().length === 0) {
+    const normalized = normalizeJsxText(value);
+    if (!normalized) {
         return [];
     }
     const segments = [];

package/dist/shared/normalize-text.d.ts

@@ -0,0 +1 @@
+export declare const normalizeJsxText: (value: string) => string | null;

package/dist/shared/normalize-text.js

@@ -0,0 +1,18 @@
+export const normalizeJsxText = (value) => {
+    const collapsed = value.replace(/\r/g, '').replace(/\n\s+/g, ' ');
+    const leadingWhitespace = value.match(/^\s*/)?.[0] ?? '';
+    const trailingWhitespace = value.match(/\s*$/)?.[0] ?? '';
+    const trimStart = /\n/.test(leadingWhitespace);
+    const trimEnd = /\n/.test(trailingWhitespace);
+    let normalized = collapsed;
+    if (trimStart) {
+        normalized = normalized.replace(/^\s+/, '');
+    }
+    if (trimEnd) {
+        normalized = normalized.replace(/\s+$/, '');
+    }
+    if (normalized.length === 0 || normalized.trim().length === 0) {
+        return null;
+    }
+    return normalized;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knighted/jsx",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "description": "Runtime JSX tagged template that renders DOM or React trees anywhere without a build step.",
   "keywords": [
     "jsx runtime",
@@ -108,7 +108,7 @@
     "./package.json": "./package.json"
   },
   "engines": {
-    "node": ">=22.17.0"
+    "node": ">=22.21.1"
   },
   "engineStrict": true,
   "scripts": {