@knighted/jsx 1.6.3-rc.1 → 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,11 +1,13 @@
 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;
+    target?: string;
+    emitWarning?: (warning: Error | string) => void;
     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,23 +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) => {
@@ -410,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 = [];
@@ -471,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 = '';
@@ -530,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;
@@ -627,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);
@@ -645,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;
         }
@@ -652,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 */
@@ -660,12 +658,22 @@ 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)
         .join('\n');
     if (helperSource) {
-        magic.append(`\n${helperSource}`);
+        const helperBlock = `${helperSource.trimEnd()}\n\n`;
+        const shebangIndex = source.startsWith('#!') ? source.indexOf('\n') : -1;
+        if (shebangIndex >= 0) {
+            magic.appendLeft(shebangIndex + 1, helperBlock);
+        }
+        else {
+            magic.prepend(helperBlock);
+        }
         mutated = true;
     }
     const code = mutated ? magic.toString() : source;
@@ -686,6 +694,8 @@ export default function jsxLoader(input) {
     const callback = this.async();
     try {
         const options = this.getOptions?.() ?? {};
+        const warn = this.emitWarning?.bind(this);
+        const webTarget = isWebTarget(this.target);
         const explicitTags = Array.isArray(options.tags)
             ? options.tags.filter((value) => typeof value === 'string' && value.length > 0)
             : null;
@@ -699,6 +709,9 @@ export default function jsxLoader(input) {
         const configuredTagModes = options.tagModes && typeof options.tagModes === 'object'
             ? options.tagModes
             : undefined;
+        const userSpecifiedMode = parseLoaderMode(options.mode);
+        const defaultMode = userSpecifiedMode ?? DEFAULT_MODE;
+        const userConfiguredTags = new Set();
         if (configuredTagModes) {
             Object.entries(configuredTagModes).forEach(([tagName, mode]) => {
                 const parsed = parseLoaderMode(mode);
@@ -706,15 +719,26 @@ export default function jsxLoader(input) {
                     return;
                 }
                 tagModes.set(tagName, parsed);
+                userConfiguredTags.add(tagName);
             });
         }
-        const defaultMode = parseLoaderMode(options.mode) ?? DEFAULT_MODE;
         const tags = Array.from(new Set([...tagList, ...tagModes.keys()]));
         tags.forEach(tagName => {
             if (!tagModes.has(tagName)) {
                 tagModes.set(tagName, defaultMode);
             }
         });
+        /**
+         * If targeting the web and runtime mode is only implied (not explicitly requested),
+         * keep the runtime output but surface a warning so users can opt into react mode when
+         * bundling for the browser.
+         */
+        if (webTarget && userSpecifiedMode === null) {
+            const hasImplicitRuntime = tags.some(tagName => tagModes.get(tagName) === 'runtime' && !userConfiguredTags.has(tagName));
+            if (hasImplicitRuntime) {
+                warn?.(new Error('[jsx-loader] Web target detected while defaulting to runtime mode; the shipped parser expects a Node-like environment. Set mode: "react" (or configure per-tag) when bundling client code, or provide a browser-safe runtime parser if you intentionally need runtime output.'));
+            }
+        }
         const source = typeof input === 'string' ? input : input.toString('utf8');
         const enableSourceMap = options.sourceMap === true;
         const { code, map } = transformSource(source, {

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-rc.1",
+  "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": {
@@ -119,9 +119,9 @@
     "check-types:lib": "tsc --noEmit --project tsconfig.json",
     "check-types:demo": "tsc --noEmit --project examples/browser/tsconfig.json",
     "check-types:test": "tsc --noEmit --project tsconfig.vitest.json",
-    "clean:deps": "rimraf \"**/node_modules\"",
-    "clean:dist": "rimraf \"**/dist\"",
-    "clean": "npm run clean:deps && npm run clean:dist",
+    "clean:deps": "rimraf node_modules",
+    "clean:dist": "rimraf dist",
+    "clean": "npm run clean:dist && npm run clean:deps",
     "lint": "eslint src test",
     "pretest": "npm run build",
     "cycles": "madge src --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json",
@@ -143,7 +143,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
-    "@knighted/duel": "^4.0.0-rc.5",
+    "@knighted/duel": "^4.0.0",
     "@oxc-project/types": "^0.105.0",
     "@playwright/test": "^1.57.0",
     "@rspack/core": "^1.0.5",