@knighted/jsx 1.5.2 → 1.6.0

package/dist/cjs/node/debug/index.cjs

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

package/dist/cjs/node/debug/index.d.cts

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

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

@@ -127,7 +127,7 @@ 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]));
+        throw new Error((0, shared_js_1.formatTaggedTemplateParserError)('reactJsx', templates, build.diagnostics, result.errors[0]));
     }
     const root = (0, shared_js_1.extractRootNode)(result.program);
     const ctx = {

package/dist/cjs/runtime/shared.cjs

@@ -1,31 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildTemplate = exports.ensureBinding = exports.sanitizeIdentifier = exports.evaluateExpression = exports.collectPlaceholderNames = exports.normalizeJsxTextSegments = exports.walkAst = exports.getIdentifierName = exports.extractRootNode = exports.formatParserError = exports.parserOptions = exports.placeholderPattern = exports.PLACEHOLDER_PREFIX = void 0;
+exports.buildTemplate = exports.ensureBinding = exports.sanitizeIdentifier = exports.evaluateExpression = exports.collectPlaceholderNames = exports.normalizeJsxTextSegments = exports.walkAst = exports.getIdentifierName = exports.extractRootNode = exports.parserOptions = exports.formatParserError = exports.placeholderPattern = exports.PLACEHOLDER_PREFIX = exports.formatTaggedTemplateParserError = void 0;
+var template_diagnostics_js_1 = require("../internal/template-diagnostics.cjs");
+Object.defineProperty(exports, "formatTaggedTemplateParserError", { enumerable: true, get: function () { return template_diagnostics_js_1.formatTaggedTemplateParserError; } });
 const OPEN_TAG_RE = /<\s*$/;
 const CLOSE_TAG_RE = /<\/\s*$/;
 exports.PLACEHOLDER_PREFIX = '__KX_EXPR__';
 exports.placeholderPattern = new RegExp(`${exports.PLACEHOLDER_PREFIX}\\d+_\\d+__`, 'g');
 let invocationCounter = 0;
-exports.parserOptions = {
-    lang: 'jsx',
-    sourceType: 'module',
-    range: true,
-    preserveParens: true,
-};
 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;
 };
 exports.formatParserError = formatParserError;
+exports.parserOptions = {
+    lang: 'jsx',
+    sourceType: 'module',
+    range: true,
+    preserveParens: true,
+};
 const extractRootNode = (program) => {
     for (const statement of program.body) {
         if (statement.type === 'ExpressionStatement') {
@@ -183,24 +186,40 @@ 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 = (0, exports.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 = `${exports.PLACEHOLDER_PREFIX}${templateId}_${placeholderIndex++}__`;
-        placeholders.set(placeholder, value);
-        source += placeholder + nextChunk;
-    }
-    return { source, placeholders, bindings };
+        else {
+            const placeholder = `${exports.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 },
+    };
 };
 exports.buildTemplate = buildTemplate;

package/dist/cjs/runtime/shared.d.cts

@@ -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.cjs';
+export { formatTaggedTemplateParserError } from '../internal/template-diagnostics.cjs';
+export type { TemplateDiagnostics, TemplateExpressionRange, } from '../internal/template-diagnostics.cjs';
 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/debug/diagnostics.d.ts

@@ -0,0 +1,6 @@
+export type JsxDiagnosticsMode = 'env' | 'always';
+export type EnableJsxDebugDiagnosticsOptions = {
+    mode?: JsxDiagnosticsMode;
+};
+export declare const enableJsxDebugDiagnostics: (options?: EnableJsxDebugDiagnosticsOptions) => void;
+export declare const disableJsxDebugDiagnostics: () => void;

package/dist/debug/diagnostics.js

@@ -0,0 +1,52 @@
+import { setAttributeDiagnosticsHooks, } from '../internal/attribute-resolution.js';
+import { setEventDiagnosticsHooks, } from '../internal/event-bindings.js';
+import { createDevError, describeValue, emitDevWarning, isDevEnvironment, } from '../internal/dev-environment.js';
+const isAsciiLowercase = (char) => char >= 'a' && char <= 'z';
+let diagnosticsMode = 'env';
+const shouldRunDiagnostics = () => diagnosticsMode === 'always' || (diagnosticsMode === 'env' && isDevEnvironment());
+const shouldForceWarnings = () => diagnosticsMode === 'always';
+const attributeDiagnostics = {
+    warnLowercaseEventProp(name) {
+        if (!shouldRunDiagnostics()) {
+            return;
+        }
+        if (!name.startsWith('on') || name.startsWith('on:') || name.length < 3) {
+            return;
+        }
+        const indicator = name[2] ?? '';
+        if (!isAsciiLowercase(indicator)) {
+            return;
+        }
+        const suggestion = `${name.slice(0, 2)}${indicator.toUpperCase()}${name.slice(3)}`;
+        emitDevWarning(`Use camelCase DOM event props when targeting runtime jsx templates. Received "${name}"; did you mean "${suggestion}"?`, shouldForceWarnings());
+    },
+    ensureValidDangerouslySetInnerHTML(value) {
+        if (!shouldRunDiagnostics()) {
+            return;
+        }
+        if (!value || typeof value !== 'object' || Array.isArray(value)) {
+            throw createDevError('dangerouslySetInnerHTML expects an object with a string __html field.');
+        }
+        const html = value.__html;
+        if (typeof html !== 'string') {
+            throw createDevError(`dangerouslySetInnerHTML.__html must be a string but received ${describeValue(html)}.`);
+        }
+    },
+};
+const eventDiagnostics = {
+    onInvalidHandler(propName, value) {
+        if (!shouldRunDiagnostics()) {
+            return;
+        }
+        throw createDevError(`The "${propName}" prop expects a function, EventListenerObject, or descriptor ({ handler }) but received ${describeValue(value)}.`);
+    },
+};
+export const enableJsxDebugDiagnostics = (options) => {
+    diagnosticsMode = options?.mode ?? 'env';
+    setAttributeDiagnosticsHooks(attributeDiagnostics);
+    setEventDiagnosticsHooks(eventDiagnostics);
+};
+export const disableJsxDebugDiagnostics = () => {
+    setAttributeDiagnosticsHooks(null);
+    setEventDiagnosticsHooks(null);
+};

package/dist/debug/index.d.ts

@@ -0,0 +1,2 @@
+export { jsx } from '../jsx.js';
+export type { JsxRenderable, JsxComponent } from '../jsx.js';

package/dist/debug/index.js

@@ -0,0 +1,3 @@
+import { enableJsxDebugDiagnostics } from './diagnostics.js';
+enableJsxDebugDiagnostics({ mode: 'always' });
+export { jsx } from '../jsx.js';

package/dist/internal/attribute-resolution.d.ts

@@ -1,5 +1,10 @@
 import type { Expression, JSXAttribute, JSXElement, JSXFragment, JSXSpreadAttribute } from '@oxc-project/types';
 import type { TemplateComponent, TemplateContext } from '../runtime/shared.js';
+export type AttributeDiagnosticsHooks = {
+    warnLowercaseEventProp?: (name: string) => void;
+    ensureValidDangerouslySetInnerHTML?: (value: unknown) => void;
+};
+export declare const setAttributeDiagnosticsHooks: (hooks: AttributeDiagnosticsHooks | null) => void;
 export type Namespace = 'svg' | null;
 export type EvaluateExpressionWithNamespace<TComponent extends TemplateComponent> = (expression: Expression | JSXElement | JSXFragment, ctx: TemplateContext<TComponent>, namespace: Namespace) => unknown;
 export type ResolveAttributesDependencies<TComponent extends TemplateComponent> = {

package/dist/internal/attribute-resolution.js

@@ -1,7 +1,23 @@
+let attributeDiagnostics = null;
+export const setAttributeDiagnosticsHooks = (hooks) => {
+    attributeDiagnostics = hooks;
+};
+const warnLowercaseEventProp = (name) => {
+    attributeDiagnostics?.warnLowercaseEventProp?.(name);
+};
+const ensureValidDangerouslySetInnerHTML = (value) => {
+    attributeDiagnostics?.ensureValidDangerouslySetInnerHTML?.(value);
+};
 export const createResolveAttributes = (deps) => {
     const { getIdentifierName, evaluateExpressionWithNamespace } = deps;
     return (attributes, ctx, namespace) => {
         const props = {};
+        const assignProp = (propName, propValue) => {
+            if (propName === 'dangerouslySetInnerHTML') {
+                ensureValidDangerouslySetInnerHTML(propValue);
+            }
+            props[propName] = propValue;
+        };
         attributes.forEach(attribute => {
             if (attribute.type === 'JSXSpreadAttribute') {
                 const spreadValue = evaluateExpressionWithNamespace(attribute.argument, ctx, namespace);
@@ -13,19 +29,20 @@ export const createResolveAttributes = (deps) => {
                 return;
             }
             const name = getIdentifierName(attribute.name);
+            warnLowercaseEventProp(name);
             if (!attribute.value) {
-                props[name] = true;
+                assignProp(name, true);
                 return;
             }
             if (attribute.value.type === 'Literal') {
-                props[name] = attribute.value.value;
+                assignProp(name, attribute.value.value);
                 return;
             }
             if (attribute.value.type === 'JSXExpressionContainer') {
                 if (attribute.value.expression.type === 'JSXEmptyExpression') {
                     return;
                 }
-                props[name] = evaluateExpressionWithNamespace(attribute.value.expression, ctx, namespace);
+                assignProp(name, evaluateExpressionWithNamespace(attribute.value.expression, ctx, namespace));
             }
         });
         return props;

package/dist/internal/dev-environment.d.ts

@@ -0,0 +1,4 @@
+export declare const isDevEnvironment: () => boolean;
+export declare const describeValue: (value: unknown) => string;
+export declare const createDevError: (message: string) => Error;
+export declare const emitDevWarning: (message: string, force?: boolean) => void;

package/dist/internal/dev-environment.js

@@ -0,0 +1,34 @@
+const DEV_PREFIX = '@knighted/jsx';
+const formatDevMessage = (message) => `${DEV_PREFIX}: ${message}`;
+export const isDevEnvironment = () => typeof process !== 'undefined' && process.env?.KNIGHTED_JSX_DEBUG === '1';
+export const describeValue = (value) => {
+    if (value === null) {
+        return 'null';
+    }
+    if (value === undefined) {
+        return 'undefined';
+    }
+    if (typeof value === 'function') {
+        return value.name ? `function ${value.name}` : 'function';
+    }
+    if (Array.isArray(value)) {
+        return 'array';
+    }
+    if (typeof value === 'object') {
+        const ctor = value.constructor;
+        if (ctor && typeof ctor.name === 'string' && ctor.name && ctor.name !== 'Object') {
+            return `${ctor.name} instance`;
+        }
+        return 'object';
+    }
+    return typeof value;
+};
+export const createDevError = (message) => new Error(formatDevMessage(message));
+export const emitDevWarning = (message, force = false) => {
+    if (!force && !isDevEnvironment()) {
+        return;
+    }
+    if (typeof console !== 'undefined' && typeof console.warn === 'function') {
+        console.warn(formatDevMessage(message));
+    }
+};

package/dist/internal/event-bindings.d.ts

@@ -1,3 +1,7 @@
+export type EventDiagnosticsHooks = {
+    onInvalidHandler?: (propName: string, value: unknown) => void;
+};
+export declare const setEventDiagnosticsHooks: (hooks: EventDiagnosticsHooks | null) => void;
 export type ParsedEventBinding = {
     eventName: string;
     capture: boolean;
@@ -15,4 +19,4 @@ export type ResolvedEventHandler = {
     listener: EventListenerOrEventListenerObject;
     options?: AddEventListenerOptions;
 };
-export declare const resolveEventHandlerValue: (value: unknown) => ResolvedEventHandler | null;
+export declare const resolveEventHandlerValue: (propName: string, value: unknown) => ResolvedEventHandler | null;

package/dist/internal/event-bindings.js

@@ -1,3 +1,7 @@
+let eventDiagnostics = null;
+export const setEventDiagnosticsHooks = (hooks) => {
+    eventDiagnostics = hooks;
+};
 const captureSuffix = 'Capture';
 const stripCaptureSuffix = (rawName) => {
     if (rawName.endsWith(captureSuffix)) {
@@ -50,11 +54,15 @@ const isEventHandlerDescriptor = (value) => {
     }
     return isEventListenerObject(handler);
 };
-export const resolveEventHandlerValue = (value) => {
+const throwInvalidHandlerError = (propName, value) => {
+    eventDiagnostics?.onInvalidHandler?.(propName, value);
+};
+export const resolveEventHandlerValue = (propName, value) => {
     if (typeof value === 'function' || isEventListenerObject(value)) {
         return { listener: value };
     }
     if (!isEventHandlerDescriptor(value)) {
+        throwInvalidHandlerError(propName, value);
         return null;
     }
     const descriptor = value;

package/dist/internal/template-diagnostics.d.ts

@@ -0,0 +1,13 @@
+import type { OxcError } from 'oxc-parser';
+export type TemplateExpressionRange = {
+    index: number;
+    sourceStart: number;
+    sourceEnd: number;
+};
+export type TemplateDiagnostics = {
+    expressionRanges: TemplateExpressionRange[];
+};
+export type TaggedTemplateFormatOptions = {
+    label?: string;
+};
+export declare const formatTaggedTemplateParserError: (tagName: string, templates: TemplateStringsArray, diagnostics: TemplateDiagnostics, error: OxcError, options?: TaggedTemplateFormatOptions) => string;

package/dist/internal/template-diagnostics.js

@@ -0,0 +1,167 @@
+const DEFAULT_LABEL = 'oxc-parser';
+const buildTemplateDisplaySource = (templates) => {
+    const raw = templates.raw ?? templates;
+    let source = raw[0] ?? '';
+    const spans = [];
+    for (let idx = 0; idx < raw.length - 1; idx++) {
+        const label = '${expr#' + idx + '}';
+        const templateStart = source.length;
+        source += label;
+        const templateEnd = source.length;
+        spans.push({ index: idx, templateStart, templateEnd, label });
+        source += raw[idx + 1] ?? '';
+    }
+    return { source, spans };
+};
+const combineExpressionSpans = (diagnostics, templateSpans) => {
+    const templateSpanMap = new Map();
+    templateSpans.forEach(span => {
+        templateSpanMap.set(span.index, span);
+    });
+    return diagnostics.expressionRanges
+        .map(span => {
+        const templateSpan = templateSpanMap.get(span.index);
+        if (!templateSpan) {
+            return null;
+        }
+        const sourceLength = Math.max(0, span.sourceEnd - span.sourceStart);
+        const templateLength = Math.max(0, templateSpan.templateEnd - templateSpan.templateStart);
+        return {
+            sourceStart: span.sourceStart,
+            sourceEnd: span.sourceEnd,
+            templateStart: templateSpan.templateStart,
+            templateEnd: templateSpan.templateEnd,
+            delta: templateLength - sourceLength,
+        };
+    })
+        .filter((span) => Boolean(span))
+        .sort((a, b) => a.sourceStart - b.sourceStart);
+};
+const mapIndexToTemplate = (index, spans, templateLength) => {
+    if (!Number.isFinite(index) || index <= 0) {
+        return 0;
+    }
+    let delta = 0;
+    for (const span of spans) {
+        if (index < span.sourceStart) {
+            break;
+        }
+        if (index < span.sourceEnd) {
+            const relative = Math.max(0, index - span.sourceStart);
+            const templateSpanLength = Math.max(0, span.templateEnd - span.templateStart);
+            if (templateSpanLength === 0) {
+                return span.templateStart;
+            }
+            const clamped = Math.min(relative, Math.max(0, templateSpanLength - 1));
+            return span.templateStart + clamped;
+        }
+        delta += span.delta;
+    }
+    const mapped = index + delta;
+    if (mapped <= 0) {
+        return 0;
+    }
+    if (mapped >= templateLength) {
+        return templateLength;
+    }
+    return mapped;
+};
+const getLineAndColumnFromIndex = (source, index) => {
+    const limit = Math.max(0, Math.min(index, source.length));
+    let line = 1;
+    let column = 1;
+    for (let idx = 0; idx < limit; idx++) {
+        if (source.charCodeAt(idx) === 10) {
+            line++;
+            column = 1;
+            continue;
+        }
+        column++;
+    }
+    return { line, column };
+};
+const computeLineOffsets = (lines) => {
+    const offsets = [];
+    let cursor = 0;
+    lines.forEach((line, index) => {
+        offsets.push(cursor);
+        cursor += line.length;
+        if (index < lines.length - 1) {
+            cursor += 1;
+        }
+    });
+    return offsets;
+};
+const createPointerLine = (lineNumber, lineText, lineStartOffset, rangeStart, rangeEnd, startLine, endLine) => {
+    const lineEndOffset = lineStartOffset + lineText.length;
+    const overlapStart = Math.max(rangeStart, lineStartOffset);
+    const overlapEnd = Math.min(rangeEnd, lineEndOffset);
+    if (overlapEnd > overlapStart) {
+        const pointerStart = Math.max(0, overlapStart - lineStartOffset);
+        const pointerWidth = Math.max(1, overlapEnd - overlapStart);
+        return ' '.repeat(pointerStart) + '^'.repeat(pointerWidth);
+    }
+    if (lineText.length === 0 && lineNumber >= startLine && lineNumber <= endLine) {
+        return '^';
+    }
+    if (lineNumber === startLine) {
+        const caretPos = Math.max(0, rangeStart - lineStartOffset);
+        return ' '.repeat(Math.min(caretPos, lineText.length)) + '^';
+    }
+    return '';
+};
+const buildCodeFrame = (source, start, end, startLine, endLine) => {
+    if (!source.length) {
+        return '';
+    }
+    const lines = source.split('\n');
+    const offsets = computeLineOffsets(lines);
+    const frameStart = Math.max(1, startLine - 1);
+    const frameEnd = Math.min(lines.length, endLine + 1);
+    const gutterWidth = String(frameEnd).length;
+    const frame = [];
+    for (let lineNumber = frameStart; lineNumber <= frameEnd; lineNumber++) {
+        const lineText = lines[lineNumber - 1] ?? '';
+        const gutter = String(lineNumber).padStart(gutterWidth, ' ');
+        frame.push(`${gutter} | ${lineText}`);
+        const pointer = createPointerLine(lineNumber, lineText, offsets[lineNumber - 1] ?? 0, start, end, startLine, endLine);
+        if (pointer) {
+            frame.push(`${' '.repeat(gutterWidth)} | ${pointer}`);
+        }
+    }
+    return frame.join('\n');
+};
+export const formatTaggedTemplateParserError = (tagName, templates, diagnostics, error, options) => {
+    const label = options?.label ?? DEFAULT_LABEL;
+    const fallback = `[${label}] ${error.message}`;
+    const primaryLabel = error.labels?.[0];
+    if (!primaryLabel) {
+        return fallback;
+    }
+    const { source: templateSource, spans } = buildTemplateDisplaySource(templates);
+    const combinedSpans = combineExpressionSpans(diagnostics, spans);
+    const mapIndex = (value) => {
+        const numeric = typeof value === 'number' ? value : 0;
+        return mapIndexToTemplate(numeric, combinedSpans, templateSource.length);
+    };
+    const startIndex = mapIndex(primaryLabel.start);
+    let endIndex = mapIndex(primaryLabel.end);
+    if (endIndex <= startIndex) {
+        endIndex = Math.min(templateSource.length, startIndex + 1);
+    }
+    const startLocation = getLineAndColumnFromIndex(templateSource, startIndex);
+    const endLocation = getLineAndColumnFromIndex(templateSource, Math.max(startIndex, endIndex - 1));
+    const codeframe = buildCodeFrame(templateSource, startIndex, endIndex, startLocation.line, endLocation.line);
+    let message = `[${label}] ${error.message}`;
+    message += `\n--> ${tagName} template:${startLocation.line}:${startLocation.column}`;
+    if (primaryLabel.message) {
+        message += `\n${primaryLabel.message}`;
+    }
+    if (codeframe) {
+        message += `\n${codeframe}`;
+    }
+    if (error.helpMessage) {
+        message += `\n${error.helpMessage}`;
+    }
+    return message;
+};

package/dist/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 { find as findPropertyInfo, html as htmlProperties, svg as svgProperties, } from 'property-information';
 import { createResolveAttributes, } from './internal/attribute-resolution.js';
 import { parseEventPropName, resolveEventHandlerValue, } from './internal/event-bindings.js';
@@ -113,7 +113,7 @@ const setDomProp = (element, name, value, namespace) => {
     }
     const eventBinding = parseEventPropName(name);
     if (eventBinding) {
-        const handlerValue = resolveEventHandlerValue(value);
+        const handlerValue = resolveEventHandlerValue(name, value);
         if (handlerValue) {
             let options = handlerValue.options ? { ...handlerValue.options } : undefined;
             if (eventBinding.capture) {
@@ -308,7 +308,7 @@ export const jsx = (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('jsx', templates, build.diagnostics, result.errors[0]));
     }
     const root = extractRootNode(result.program);
     const ctx = {

package/dist/lite/debug/diagnostics.js

@@ -0,0 +1 @@
+var k=e=>{e?.mode??"env";},A=()=>{};export{A as disableJsxDebugDiagnostics,k as enableJsxDebugDiagnostics};

package/dist/lite/debug/index.js

@@ -0,0 +1,8 @@
+import {parseSync}from'oxc-parser';import {find,svg,html}from'property-information';var T=null,$=e=>{T=e;},oe=e=>{T?.warnLowercaseEventProp?.(e);},se=e=>{T?.ensureValidDangerouslySetInnerHTML?.(e);},P=e=>{let{getIdentifierName:t,evaluateExpressionWithNamespace:n}=e;return (r,o,s)=>{let i={},p=(a,c)=>{a==="dangerouslySetInnerHTML"&&se(c),i[a]=c;};return r.forEach(a=>{if(a.type==="JSXSpreadAttribute"){let l=n(a.argument,o,s);l&&typeof l=="object"&&!Array.isArray(l)&&Object.assign(i,l);return}let c=t(a.name);if(oe(c),!a.value){p(c,true);return}if(a.value.type==="Literal"){p(c,a.value.value);return}if(a.value.type==="JSXExpressionContainer"){if(a.value.expression.type==="JSXEmptyExpression")return;p(c,n(a.value.expression,o,s));}}),i}};var L=null,O=e=>{L=e;},j="Capture",I=e=>e.endsWith(j)?{eventName:e.slice(0,-j.length),capture:true}:{eventName:e,capture:false},_=e=>{if(!e.startsWith("on"))return null;if(e.startsWith("on:")){let r=e.slice(3);if(!r)return null;let o=I(r);return o.eventName?o:null}let t=e.slice(2);if(!t)return null;let n=I(t);return n.eventName?{eventName:n.eventName.toLowerCase(),capture:n.capture}:null},H=e=>!e||typeof e!="object"?false:"handleEvent"in e&&typeof e.handleEvent=="function",ae=e=>{if(!e||typeof e!="object"||!("handler"in e))return  false;let t=e.handler;return typeof t=="function"?true:H(t)},ie=(e,t)=>{L?.onInvalidHandler?.(e,t);},F=(e,t)=>{if(typeof t=="function"||H(t))return {listener:t};if(!ae(t))return ie(e,t),null;let n=t,r=n.options?{...n.options}:void 0,o=(s,i)=>{i!=null&&(r||(r={}),r[s]=i);};return o("capture",n.capture),o("once",n.once),o("passive",n.passive),o("signal",n.signal??void 0),{listener:n.handler,options:r}};var pe="@knighted/jsx",B=e=>`${pe}: ${e}`,J=()=>typeof process<"u"&&process.env?.KNIGHTED_JSX_DEBUG==="1",C=e=>{if(e===null)return "null";if(e===void 0)return "undefined";if(typeof e=="function")return e.name?`function ${e.name}`:"function";if(Array.isArray(e))return "array";if(typeof e=="object"){let t=e.constructor;return t&&typeof t.name=="string"&&t.name&&t.name!=="Object"?`${t.name} instance`:"object"}return typeof e},b=e=>new Error(B(e)),W=(e,t=false)=>{!t&&!J()||typeof console<"u"&&typeof console.warn=="function"&&console.warn(B(e));};var ce=e=>e>="a"&&e<="z",S="env",A=()=>S==="always"||S==="env"&&J(),le=()=>S==="always",me={warnLowercaseEventProp(e){if(!A()||!e.startsWith("on")||e.startsWith("on:")||e.length<3)return;let t=e[2]??"";if(!ce(t))return;let n=`${e.slice(0,2)}${t.toUpperCase()}${e.slice(3)}`;W(`Use camelCase DOM event props when targeting runtime jsx templates. Received "${e}"; did you mean "${n}"?`,le());},ensureValidDangerouslySetInnerHTML(e){if(!A())return;if(!e||typeof e!="object"||Array.isArray(e))throw b("dangerouslySetInnerHTML expects an object with a string __html field.");let t=e.__html;if(typeof t!="string")throw b(`dangerouslySetInnerHTML.__html must be a string but received ${C(t)}.`)}},ue={onInvalidHandler(e,t){if(A())throw b(`The "${e}" prop expects a function, EventListenerObject, or descriptor ({ handler }) but received ${C(t)}.`)}},V=e=>{S=e?.mode,$(me),O(ue);};var de="oxc-parser",ge=e=>{let t=e.raw??e,n=t[0]??"",r=[];for(let o=0;o<t.length-1;o++){let s="${expr#"+o+"}",i=n.length;n+=s;let p=n.length;r.push({index:o,templateStart:i,templateEnd:p,label:s}),n+=t[o+1]??"";}return {source:n,spans:r}},fe=(e,t)=>{let n=new Map;return t.forEach(r=>{n.set(r.index,r);}),e.expressionRanges.map(r=>{let o=n.get(r.index);if(!o)return null;let s=Math.max(0,r.sourceEnd-r.sourceStart),i=Math.max(0,o.templateEnd-o.templateStart);return {sourceStart:r.sourceStart,sourceEnd:r.sourceEnd,templateStart:o.templateStart,templateEnd:o.templateEnd,delta:i-s}}).filter(r=>!!r).sort((r,o)=>r.sourceStart-o.sourceStart)},xe=(e,t,n)=>{if(!Number.isFinite(e)||e<=0)return 0;let r=0;for(let s of t){if(e<s.sourceStart)break;if(e<s.sourceEnd){let i=Math.max(0,e-s.sourceStart),p=Math.max(0,s.templateEnd-s.templateStart);if(p===0)return s.templateStart;let a=Math.min(i,Math.max(0,p-1));return s.templateStart+a}r+=s.delta;}let o=e+r;return o<=0?0:o>=n?n:o},U=(e,t)=>{let n=Math.max(0,Math.min(t,e.length)),r=1,o=1;for(let s=0;s<n;s++){if(e.charCodeAt(s)===10){r++,o=1;continue}o++;}return {line:r,column:o}},ye=e=>{let t=[],n=0;return e.forEach((r,o)=>{t.push(n),n+=r.length,o<e.length-1&&(n+=1);}),t},Ee=(e,t,n,r,o,s,i)=>{let p=n+t.length,a=Math.max(r,n),c=Math.min(o,p);if(c>a){let l=Math.max(0,a-n),u=Math.max(1,c-a);return " ".repeat(l)+"^".repeat(u)}if(t.length===0&&e>=s&&e<=i)return "^";if(e===s){let l=Math.max(0,r-n);return " ".repeat(Math.min(l,t.length))+"^"}return ""},he=(e,t,n,r,o)=>{if(!e.length)return "";let s=e.split(`
+`),i=ye(s),p=Math.max(1,r-1),a=Math.min(s.length,o+1),c=String(a).length,l=[];for(let u=p;u<=a;u++){let d=s[u-1]??"",m=String(u).padStart(c," ");l.push(`${m} | ${d}`);let g=Ee(u,d,i[u-1]??0,t,n,r,o);g&&l.push(`${" ".repeat(c)} | ${g}`);}return l.join(`
+`)},k=(e,t,n,r,o)=>{let s=de,i=`[${s}] ${r.message}`,p=r.labels?.[0];if(!p)return i;let{source:a,spans:c}=ge(t),l=fe(n,c),u=y=>xe(typeof y=="number"?y:0,l,a.length),d=u(p.start),m=u(p.end);m<=d&&(m=Math.min(a.length,d+1));let g=U(a,d),x=U(a,Math.max(d,m-1)),h=he(a,d,m,g.line,x.line),f=`[${s}] ${r.message}`;return f+=`
+--> ${e} template:${g.line}:${g.column}`,p.message&&(f+=`
+${p.message}`),h&&(f+=`
+${h}`),r.helpMessage&&(f+=`
+${r.helpMessage}`),f};var be=/<\s*$/,Se=/<\/\s*$/,K="__KX_EXPR__",z=new RegExp(`${K}\\d+_\\d+__`,"g"),we=0;var G={lang:"jsx",sourceType:"module",range:true,preserveParens:true},Z=e=>{for(let t of e.body)if(t.type==="ExpressionStatement"){let n=t.expression;if(n.type==="JSXElement"||n.type==="JSXFragment")return n}throw new Error("The jsx template must contain a single JSX element or fragment.")},w=e=>{switch(e.type){case "JSXIdentifier":return e.name;case "JSXNamespacedName":return `${e.namespace.name}:${e.name.name}`;case "JSXMemberExpression":return `${w(e.object)}.${e.property.name}`;default:return ""}},v=(e,t)=>{if(!e||typeof e!="object")return;let n=e;typeof n.type=="string"&&(t(n),Object.values(n).forEach(r=>{if(r){if(Array.isArray(r)){r.forEach(o=>v(o,t));return}typeof r=="object"&&v(r,t);}}));},q=(e,t)=>{let n=e.replace(/\r/g,"").replace(/\n\s+/g," "),r=e.match(/^\s*/)?.[0]??"",o=e.match(/\s*$/)?.[0]??"",s=/\n/.test(r),i=/\n/.test(o),p=n;if(s&&(p=p.replace(/^\s+/,"")),i&&(p=p.replace(/\s+$/,"")),p.length===0||p.trim().length===0)return [];let a=[];z.lastIndex=0;let c=0,l;for(;l=z.exec(p);){let d=l.index,m=p.slice(c,d);m&&a.push(m);let g=l[0];t.has(g)?a.push(t.get(g)):a.push(g),c=d+g.length;}let u=p.slice(c);return u&&a.push(u),a},Te=(e,t)=>{let n=new Set;return v(e,r=>{r.type==="Identifier"&&t.placeholders.has(r.name)&&n.add(r.name);}),Array.from(n)},Q=(e,t,n)=>{if(e.type==="JSXElement"||e.type==="JSXFragment")return n(e);if(!("range"in e)||!e.range)throw new Error("Unable to evaluate expression: missing source range information.");let[r,o]=e.range,s=t.source.slice(r,o),i=Te(e,t);try{let p=new Function(...i,`"use strict"; return (${s});`),a=i.map(c=>t.placeholders.get(c));return p(...a)}catch(p){throw new Error(`Failed to evaluate expression ${s}: ${p.message}`)}},Je=e=>{let t=e.replace(/[^a-zA-Z0-9_$]/g,"");return t?/[A-Za-z_$]/.test(t[0])?t:`Component${t}`:"Component"},Ce=(e,t,n)=>{let r=n.get(e);if(r)return r;let o=e.displayName||e.name||`Component${t.length}`,s=Je(o??""),i=s,p=1;for(;t.some(c=>c.name===i);)i=`${s}${p++}`;let a={name:i,value:e};return t.push(a),n.set(e,a),a},Y=(e,t)=>{let n=e.raw??e,r=new Map,o=[],s=new Map,i=n[0]??"",p=we++,a=0,c=[];for(let l=0;l<t.length;l++){let u=n[l]??"",d=n[l+1]??"",m=t[l],g=be.test(u)||Se.test(u),x;if(g&&typeof m=="function")x=Ce(m,o,s).name;else if(g&&typeof m=="string")x=m;else {let y=`${K}${p}_${a++}__`;r.set(y,m),x=y;}let h=i.length;i+=x;let f=i.length;c.push({index:l,sourceStart:h,sourceEnd:f}),i+=d;}return {source:i,placeholders:r,bindings:o,diagnostics:{expressionRanges:c}}};var Ne=()=>{if(typeof document>"u"||typeof document.createElement!="function")throw new Error("The jsx template tag requires a DOM-like environment (document missing).")},Xe=e=>typeof Node>"u"?false:e instanceof Node||e instanceof DocumentFragment,Re=e=>!e||typeof e=="string"?false:typeof e[Symbol.iterator]=="function",te=e=>!e||typeof e!="object"&&typeof e!="function"?false:typeof e.then=="function",Me={xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace",xmlns:"http://www.w3.org/2000/xmlns/"},ne=e=>{if(!(!e||e==="html"||e==="svg"))return Me[e]},$e=e=>e==="svg"?svg:html,D=(e,t,n)=>{let r=ne(t.space),o=String(n);if(r){e.setAttributeNS(r,t.attribute,o);return}e.setAttribute(t.attribute,o);},ee=(e,t)=>{let n=ne(t.space);if(n){e.removeAttributeNS(n,t.attribute);return}e.removeAttribute(t.attribute);},N=(e,t)=>Array.isArray(e)?e.filter(Boolean).join(t):e,Pe=(e,t,n)=>t==="svg"||!n.property||n.property.includes(":")?false:n.property in e,je=(e,t,n,r)=>{if(n==null)return;if(t==="dangerouslySetInnerHTML"&&typeof n=="object"&&n&&"__html"in n){e.innerHTML=String(n.__html??"");return}if(t==="ref"){if(typeof n=="function"){n(e);return}if(n&&typeof n=="object"){n.current=e;return}}if(t==="style"&&typeof n=="object"&&n!==null){let c=n,l=e.style;if(!l)return;let u=l;Object.entries(c).forEach(([d,m])=>{if(m!=null){if(d.startsWith("--")){l.setProperty(d,String(m));return}u[d]=m;}});return}let o=_(t);if(o){let c=F(t,n);if(c){let l=c.options?{...c.options}:void 0;o.capture&&(l?l.capture=true:l={capture:true}),e.addEventListener(o.eventName,c.listener,l);return}}let s=find($e(r),t),i=e,p=Pe(e,r,s);if(s.mustUseProperty){let c=s.boolean?!!n:n;i[s.property]=c;return}if(s.boolean){let c=!!n;p&&(i[s.property]=c),c?D(e,s,""):ee(e,s);return}let a=n;if(s.spaceSeparated?a=N(n," "):s.commaSeparated?a=N(n,","):s.commaOrSpaceSeparated&&(a=N(n," ")),s.booleanish&&typeof a=="boolean"&&(a=a?"true":"false"),s.overloadedBoolean){if(a===false){ee(e,s);return}if(a===true){D(e,s,"");return}}if(p){i[s.property]=a;return}a!==false&&D(e,s,a);},E=(e,t)=>{if(t!=null&&typeof t!="boolean"){if(te(t))throw new Error("Async values are not supported inside jsx template results.");if(Array.isArray(t)){t.forEach(n=>E(e,n));return}if(Re(t)){for(let n of t)E(e,n);return}if(Xe(t)){e.appendChild(t);return}e.appendChild(document.createTextNode(String(t)));}},X=(e,t,n)=>Q(e,t,r=>M(r,t,n)),re=P({getIdentifierName:w,evaluateExpressionWithNamespace:X}),Ie=(e,t,n,r)=>{let o=re(t,n,r);Object.entries(o).forEach(([s,i])=>{if(s!=="key"){if(s==="children"){E(e,i);return}je(e,s,i,r);}});},R=(e,t,n)=>{let r=[];return e.forEach(o=>{switch(o.type){case "JSXText":{q(o.value,t.placeholders).forEach(i=>{r.push(i);});break}case "JSXExpressionContainer":{if(o.expression.type==="JSXEmptyExpression")break;r.push(X(o.expression,t,n));break}case "JSXSpreadChild":{let s=X(o.expression,t,n);s!=null&&r.push(s);break}case "JSXElement":case "JSXFragment":{r.push(M(o,t,n));break}}}),r},Le=(e,t,n,r)=>{let o=re(e.openingElement.attributes,t,r),s=R(e.children,t,r);s.length===1?o.children=s[0]:s.length>1&&(o.children=s);let i=n(o);if(te(i))throw new Error("Async jsx components are not supported.");return i},Oe=(e,t,n)=>{let r=e.openingElement,o=w(r.name),s=t.components.get(o);if(s)return Le(e,t,s,n);if(/[A-Z]/.test(o[0]??""))throw new Error(`Unknown component "${o}". Did you interpolate it with the template literal?`);let i=o==="svg"?"svg":n,p=o==="foreignObject"?null:i,a=i==="svg"?document.createElementNS("http://www.w3.org/2000/svg",o):document.createElement(o);return Ie(a,r.attributes,t,i),R(e.children,t,p).forEach(l=>E(a,l)),a},M=(e,t,n)=>{if(e.type==="JSXFragment"){let r=document.createDocumentFragment();return R(e.children,t,n).forEach(s=>E(r,s)),r}return Oe(e,t,n)},_e=(e,...t)=>{Ne();let n=Y(e,t),r=parseSync("inline.jsx",n.source,G);if(r.errors.length>0)throw new Error(k("jsx",e,n.diagnostics,r.errors[0]));let o=Z(r.program),s={source:n.source,placeholders:n.placeholders,components:new Map(n.bindings.map(i=>[i.name,i.value]))};return M(o,s,null)};V({mode:"always"});
+export{_e as jsx};