@knighted/jsx 1.5.2 → 1.6.1

package/dist/loader/jsx.js

@@ -1,5 +1,6 @@
 import MagicString from 'magic-string';
 import { parseSync } from 'oxc-parser';
+import { formatTaggedTemplateParserError, } from '../internal/template-diagnostics.js';
 const createPlaceholderMap = (placeholders) => new Map(placeholders.map(entry => [entry.marker, entry.code]));
 class ReactTemplateBuilder {
     placeholderMap;
@@ -377,10 +378,12 @@ const renderTemplateWithSlots = (source, slots) => {
     output += escapeTemplateChunk(source.slice(cursor));
     return { code: output, changed: slots.length > 0 };
 };
-const transformTemplateLiteral = (templateSource, resourcePath) => {
+const transformTemplateLiteral = (templateSource, resourcePath, tagName, templates, diagnostics) => {
     const result = parseSync(`${resourcePath}?jsx-template`, templateSource, TEMPLATE_PARSER_OPTIONS);
     if (result.errors.length > 0) {
-        throw new Error(formatParserError(result.errors[0]));
+        throw new Error(formatTaggedTemplateParserError(tagName, templates, diagnostics, result.errors[0], {
+            label: 'jsx-loader',
+        }));
     }
     const slots = collectSlots(result.program, templateSource);
     return renderTemplateWithSlots(templateSource, slots);
@@ -449,6 +452,25 @@ const normalizeJsxTextSegments = (value, placeholders) => {
     return segments;
 };
 const TAG_PLACEHOLDER_PREFIX = '__JSX_LOADER_TAG_EXPR_';
+const materializeTemplateStrings = (quasis) => {
+    const cooked = [];
+    const raw = [];
+    quasis.forEach(quasi => {
+        const value = quasi.value;
+        const cookedChunk = typeof value.cooked === 'string' ? value.cooked : (value.raw ?? '');
+        const rawChunk = typeof value.raw === 'string' ? value.raw : cookedChunk;
+        cooked.push(cookedChunk);
+        raw.push(rawChunk);
+    });
+    const templates = cooked;
+    Object.defineProperty(templates, 'raw', {
+        value: raw,
+        writable: false,
+        configurable: false,
+        enumerable: false,
+    });
+    return templates;
+};
 const buildTemplateSource = (quasis, expressions, source, tag) => {
     const placeholderMap = new Map();
     const tagPlaceholderMap = new Map();
@@ -456,6 +478,7 @@ const buildTemplateSource = (quasis, expressions, source, tag) => {
     let placeholderIndex = 0;
     let trimStartNext = 0;
     let mutated = false;
+    const expressionRanges = [];
     const registerMarker = (code, isTag) => {
         if (isTag) {
             const existing = tagPlaceholderMap.get(code);
@@ -471,6 +494,12 @@ const buildTemplateSource = (quasis, expressions, source, tag) => {
         placeholderMap.set(marker, code);
         return marker;
     };
+    const appendInsertion = (expressionIndex, insertion) => {
+        const start = template.length;
+        template += insertion;
+        const end = template.length;
+        expressionRanges.push({ index: expressionIndex, sourceStart: start, sourceEnd: end });
+    };
     quasis.forEach((quasi, index) => {
         let chunk = quasi.value.cooked;
         if (typeof chunk !== 'string') {
@@ -488,6 +517,7 @@ const buildTemplateSource = (quasis, expressions, source, tag) => {
         if (!expression) {
             return;
         }
+        const expressionIndex = index;
         const start = expression.start ?? null;
         const end = expression.end ?? null;
         if (start === null || end === null) {
@@ -503,7 +533,8 @@ const buildTemplateSource = (quasis, expressions, source, tag) => {
         const code = source.slice(start, end);
         const marker = registerMarker(code, context.type === 'tag');
         const appendMarker = (wrapper) => {
-            template += wrapper ? wrapper(marker) : marker;
+            const insertion = wrapper ? wrapper(marker) : marker;
+            appendInsertion(expressionIndex, insertion);
         };
         switch (context.type) {
             case 'tag':
@@ -545,15 +576,22 @@ const buildTemplateSource = (quasis, expressions, source, tag) => {
             marker,
             code,
         })),
+        diagnostics: { expressionRanges },
     };
 };
 const restoreTemplatePlaceholders = (code, placeholders) => placeholders.reduce((result, placeholder) => {
     return result.split(placeholder.marker).join(`\${${placeholder.code}}`);
 }, code);
-const compileReactTemplate = (templateSource, placeholders, resourcePath) => {
+const createInlineSourceMapComment = (map) => {
+    const payload = Buffer.from(JSON.stringify(map), 'utf8').toString('base64');
+    return `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${payload}`;
+};
+const compileReactTemplate = (templateSource, placeholders, resourcePath, tagName, templates, diagnostics) => {
     const parsed = parseSync(`${resourcePath}?jsx-react-template`, templateSource, TEMPLATE_PARSER_OPTIONS);
     if (parsed.errors.length > 0) {
-        throw new Error(formatParserError(parsed.errors[0]));
+        throw new Error(formatTaggedTemplateParserError(tagName, templates, diagnostics, parsed.errors[0], {
+            label: 'jsx-loader',
+        }));
     }
     const root = extractJsxRoot(parsed.program);
     const builder = new ReactTemplateBuilder(placeholders);
@@ -571,7 +609,7 @@ const isLoaderPlaceholderIdentifier = (node) => {
     return (node.name.startsWith(TEMPLATE_EXPR_PLACEHOLDER_PREFIX) ||
         node.name.startsWith(TAG_PLACEHOLDER_PREFIX));
 };
-const transformSource = (source, config) => {
+const transformSource = (source, config, options) => {
     const ast = parseSync(config.resourcePath, source, MODULE_PARSER_OPTIONS);
     if (ast.errors.length > 0) {
         throw new Error(formatParserError(ast.errors[0]));
@@ -584,7 +622,7 @@ const transformSource = (source, config) => {
         }
     });
     if (!taggedTemplates.length) {
-        return { code: source, helpers: [] };
+        return { code: source, mutated: false };
     }
     const magic = new MagicString(source);
     let mutated = false;
@@ -596,8 +634,9 @@ const transformSource = (source, config) => {
         const mode = config.tagModes.get(tagName) ?? DEFAULT_MODE;
         const quasi = node.quasi;
         const templateSource = buildTemplateSource(quasi.quasis, quasi.expressions, source, tagName);
+        const templateStrings = materializeTemplateStrings(quasi.quasis);
         if (mode === 'runtime') {
-            const { code, changed } = transformTemplateLiteral(templateSource.source, config.resourcePath);
+            const { code, changed } = transformTemplateLiteral(templateSource.source, config.resourcePath, tagName, templateStrings, templateSource.diagnostics);
             const restored = restoreTemplatePlaceholders(code, templateSource.placeholders);
             const templateChanged = changed || templateSource.mutated;
             if (!templateChanged) {
@@ -610,7 +649,7 @@ const transformSource = (source, config) => {
             return;
         }
         if (mode === 'react') {
-            const compiled = compileReactTemplate(templateSource.source, templateSource.placeholders, config.resourcePath);
+            const compiled = compileReactTemplate(templateSource.source, templateSource.placeholders, config.resourcePath, tagName, templateStrings, templateSource.diagnostics);
             helperKinds.add('react');
             magic.overwrite(node.start, node.end, compiled);
             mutated = true;
@@ -621,11 +660,26 @@ const transformSource = (source, config) => {
         // 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}".`);
     });
+    const helperSource = Array.from(helperKinds)
+        .map(kind => HELPER_SNIPPETS[kind])
+        .filter(Boolean)
+        .join('\n');
+    if (helperSource) {
+        magic.append(`\n${helperSource}`);
+        mutated = true;
+    }
+    const code = mutated ? magic.toString() : source;
+    const map = options?.sourceMap && mutated
+        ? magic.generateMap({
+            hires: true,
+            source: config.resourcePath,
+            includeContent: true,
+        })
+        : undefined;
     return {
-        code: mutated ? magic.toString() : source,
-        helpers: Array.from(helperKinds)
-            .map(kind => HELPER_SNIPPETS[kind])
-            .filter(Boolean),
+        code,
+        map,
+        mutated,
     };
 };
 export default function jsxLoader(input) {
@@ -662,16 +716,14 @@ export default function jsxLoader(input) {
             }
         });
         const source = typeof input === 'string' ? input : input.toString('utf8');
-        const { code, helpers } = transformSource(source, {
+        const enableSourceMap = options.sourceMap === true;
+        const { code, map } = transformSource(source, {
             resourcePath: this.resourcePath,
             tags,
             tagModes,
-        });
-        if (helpers.length) {
-            callback(null, `${code}\n${helpers.join('\n')}`);
-            return;
-        }
-        callback(null, code);
+        }, { sourceMap: enableSourceMap });
+        const output = map && enableSourceMap ? `${code}\n${createInlineSourceMapComment(map)}` : code;
+        callback(null, output, map);
     }
     catch (error) {
         callback(error);

package/dist/node/debug/index.d.ts

@@ -0,0 +1,2 @@
+export declare const jsx: (templates: TemplateStringsArray, ...values: unknown[]) => import("../../jsx.js").JsxRenderable;
+export type { JsxRenderable, JsxComponent } from '../../jsx.js';

package/dist/node/debug/index.js

@@ -0,0 +1,6 @@
+import { enableJsxDebugDiagnostics } from '../../debug/diagnostics.js';
+import { ensureNodeDom } from '../bootstrap.js';
+import { jsx as baseJsx } from '../../jsx.js';
+enableJsxDebugDiagnostics({ mode: 'always' });
+ensureNodeDom();
+export const jsx = baseJsx;

package/dist/react/react-jsx.js

@@ -1,5 +1,5 @@
 import { parseSync } from 'oxc-parser';
-import { buildTemplate, evaluateExpression, extractRootNode, formatParserError, getIdentifierName, normalizeJsxTextSegments, parserOptions, } from '../runtime/shared.js';
+import { buildTemplate, evaluateExpression, extractRootNode, formatTaggedTemplateParserError, getIdentifierName, normalizeJsxTextSegments, parserOptions, } from '../runtime/shared.js';
 import { Fragment, createElement, } from 'react';
 const isIterable = (value) => {
     if (!value || typeof value === 'string') {
@@ -124,7 +124,7 @@ export const reactJsx = (templates, ...values) => {
     const build = buildTemplate(templates, values);
     const result = parseSync('inline.jsx', build.source, parserOptions);
     if (result.errors.length > 0) {
-        throw new Error(formatParserError(result.errors[0]));
+        throw new Error(formatTaggedTemplateParserError('reactJsx', templates, build.diagnostics, result.errors[0]));
     }
     const root = extractRootNode(result.program);
     const ctx = {

package/dist/runtime/shared.d.ts

@@ -1,7 +1,11 @@
 import type { Expression, JSXElement, JSXFragment, JSXIdentifier, JSXMemberExpression, JSXNamespacedName, Program } from '@oxc-project/types';
 import type { OxcError, ParserOptions } from 'oxc-parser';
+import type { TemplateDiagnostics } from '../internal/template-diagnostics.js';
+export { formatTaggedTemplateParserError } from '../internal/template-diagnostics.js';
+export type { TemplateDiagnostics, TemplateExpressionRange, } from '../internal/template-diagnostics.js';
 export declare const PLACEHOLDER_PREFIX = "__KX_EXPR__";
 export declare const placeholderPattern: RegExp;
+export declare const formatParserError: (error: OxcError) => string;
 type AnyTemplateFunction = (...args: any[]) => unknown;
 type AnyTemplateConstructor = abstract new (...args: any[]) => unknown;
 export type TemplateComponent = (AnyTemplateFunction | AnyTemplateConstructor) & {
@@ -16,6 +20,7 @@ export type TemplateBuildResult<TComponent extends TemplateComponent> = {
     source: string;
     placeholders: Map<string, unknown>;
     bindings: BindingEntry<TComponent>[];
+    diagnostics: TemplateDiagnostics;
 };
 export type TemplateContext<TComponent extends TemplateComponent> = {
     source: string;
@@ -23,7 +28,6 @@ export type TemplateContext<TComponent extends TemplateComponent> = {
     components: Map<string, TComponent>;
 };
 export declare const parserOptions: ParserOptions;
-export declare const formatParserError: (error: OxcError) => string;
 export declare const extractRootNode: (program: Program) => JSXElement | JSXFragment;
 export declare const getIdentifierName: (identifier: JSXIdentifier | JSXNamespacedName | JSXMemberExpression) => string;
 type AnyOxcNode = {
@@ -37,4 +41,3 @@ export declare const evaluateExpression: <TComponent extends TemplateComponent>(
 export declare const sanitizeIdentifier: (value: string) => string;
 export declare const ensureBinding: <TComponent extends TemplateComponent>(value: TComponent, bindings: BindingEntry<TComponent>[], bindingLookup: Map<TComponent, BindingEntry<TComponent>>) => BindingEntry<TComponent>;
 export declare const buildTemplate: <TComponent extends TemplateComponent>(strings: TemplateStringsArray, values: unknown[]) => TemplateBuildResult<TComponent>;
-export {};

package/dist/runtime/shared.js

@@ -1,27 +1,29 @@
+export { formatTaggedTemplateParserError } from '../internal/template-diagnostics.js';
 const OPEN_TAG_RE = /<\s*$/;
 const CLOSE_TAG_RE = /<\/\s*$/;
 export const PLACEHOLDER_PREFIX = '__KX_EXPR__';
 export const placeholderPattern = new RegExp(`${PLACEHOLDER_PREFIX}\\d+_\\d+__`, 'g');
 let invocationCounter = 0;
-export const parserOptions = {
-    lang: 'jsx',
-    sourceType: 'module',
-    range: true,
-    preserveParens: true,
-};
 export const formatParserError = (error) => {
     let message = `[oxc-parser] ${error.message}`;
-    if (error.labels?.length) {
-        const label = error.labels[0];
-        if (label.message) {
-            message += `\n${label.message}`;
-        }
+    const primaryLabel = error.labels?.[0];
+    if (primaryLabel?.message) {
+        message += `\n${primaryLabel.message}`;
     }
     if (error.codeframe) {
         message += `\n${error.codeframe}`;
     }
+    if (error.helpMessage) {
+        message += `\n${error.helpMessage}`;
+    }
     return message;
 };
+export const parserOptions = {
+    lang: 'jsx',
+    sourceType: 'module',
+    range: true,
+    preserveParens: true,
+};
 export const extractRootNode = (program) => {
     for (const statement of program.body) {
         if (statement.type === 'ExpressionStatement') {
@@ -171,23 +173,39 @@ export const buildTemplate = (strings, values) => {
     let source = raw[0] ?? '';
     const templateId = invocationCounter++;
     let placeholderIndex = 0;
+    const expressionRanges = [];
     for (let idx = 0; idx < values.length; idx++) {
         const chunk = raw[idx] ?? '';
         const nextChunk = raw[idx + 1] ?? '';
         const value = values[idx];
         const isTagNamePosition = OPEN_TAG_RE.test(chunk) || CLOSE_TAG_RE.test(chunk);
+        let insertion;
         if (isTagNamePosition && typeof value === 'function') {
             const binding = ensureBinding(value, bindings, bindingLookup);
-            source += binding.name + nextChunk;
-            continue;
+            insertion = binding.name;
         }
-        if (isTagNamePosition && typeof value === 'string') {
-            source += value + nextChunk;
-            continue;
+        else if (isTagNamePosition && typeof value === 'string') {
+            insertion = value;
         }
-        const placeholder = `${PLACEHOLDER_PREFIX}${templateId}_${placeholderIndex++}__`;
-        placeholders.set(placeholder, value);
-        source += placeholder + nextChunk;
-    }
-    return { source, placeholders, bindings };
+        else {
+            const placeholder = `${PLACEHOLDER_PREFIX}${templateId}_${placeholderIndex++}__`;
+            placeholders.set(placeholder, value);
+            insertion = placeholder;
+        }
+        const sourceStart = source.length;
+        source += insertion;
+        const sourceEnd = source.length;
+        expressionRanges.push({
+            index: idx,
+            sourceStart,
+            sourceEnd,
+        });
+        source += nextChunk;
+    }
+    return {
+        source,
+        placeholders,
+        bindings,
+        diagnostics: { expressionRanges },
+    };
 };

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@knighted/jsx",
-  "version": "1.5.2",
+  "version": "1.6.1",
   "description": "Runtime JSX tagged template that renders DOM or React trees anywhere without a build step.",
   "keywords": [
     "jsx runtime",
-    "jsx template literal",
     "tagged template",
     "no-build jsx",
-    "dom runtime",
-    "react runtime",
+    "dom rendering",
+    "react rendering",
     "ssr",
-    "lit",
+    "rspack loader",
     "webpack loader",
-    "oxc parser"
+    "wasm parser",
+    "typescript plugin"
   ],
   "type": "module",
   "main": "./dist/index.js",
@@ -36,11 +36,31 @@
       "import": "./dist/jsx-runtime.js",
       "default": "./dist/jsx-runtime.js"
     },
+    "./debug": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/debug/index.js",
+      "default": "./dist/debug/index.js"
+    },
+    "./debug-tools": {
+      "types": "./dist/debug/diagnostics.d.ts",
+      "import": "./dist/debug/diagnostics.js",
+      "default": "./dist/debug/diagnostics.js"
+    },
     "./lite": {
       "types": "./dist/index.d.ts",
       "import": "./dist/lite/index.js",
       "default": "./dist/lite/index.js"
     },
+    "./lite/debug": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/lite/debug/index.js",
+      "default": "./dist/lite/debug/index.js"
+    },
+    "./lite/debug-tools": {
+      "types": "./dist/debug/diagnostics.d.ts",
+      "import": "./dist/lite/debug/diagnostics.js",
+      "default": "./dist/lite/debug/diagnostics.js"
+    },
     "./react": {
       "types": "./dist/react/index.d.ts",
       "import": "./dist/react/index.js",
@@ -56,11 +76,21 @@
       "import": "./dist/node/index.js",
       "default": "./dist/node/index.js"
     },
+    "./node/debug": {
+      "types": "./dist/node/index.d.ts",
+      "import": "./dist/node/debug/index.js",
+      "default": "./dist/node/debug/index.js"
+    },
     "./node/lite": {
       "types": "./dist/node/index.d.ts",
       "import": "./dist/lite/node/index.js",
       "default": "./dist/lite/node/index.js"
     },
+    "./node/lite/debug": {
+      "types": "./dist/node/index.d.ts",
+      "import": "./dist/lite/node/debug/index.js",
+      "default": "./dist/lite/node/debug/index.js"
+    },
     "./node/react": {
       "types": "./dist/node/react/index.d.ts",
       "import": "./dist/node/react/index.js",
@@ -85,9 +115,10 @@
     "build": "duel && npm run build:lite && npm run build:cli",
     "prepare": "husky",
     "precheck-types": "npm run build",
-    "check-types": "npm run check-types:lib && npm run check-types:demo",
+    "check-types": "npm run check-types:lib && npm run check-types:demo && npm run check-types:test",
     "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",
     "lint": "eslint src test",
     "cycles": "madge src --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json",
     "prettier": "prettier -w .",
@@ -103,6 +134,7 @@
     "build:lite": "tsup --config tsup.config.ts",
     "build:cli": "tsup --config tsup.cli.config.ts",
     "setup:wasm": "node scripts/setup-wasm.mjs",
+    "sizecheck": "node scripts/sizecheck.mjs",
     "prepack": "npm run build"
   },
   "devDependencies": {