@b9g/crank 0.7.5 → 0.7.7

package/jsx-tag.d.ts

@@ -2,3 +2,44 @@ import type { Element } from "./crank.js";
 export declare function jsx(spans: TemplateStringsArray, ...expressions: Array<unknown>): Element;
 /** Alias for `jsx` template tag. */
 export declare const html: typeof jsx;
+export interface ParseElement {
+    type: "element";
+    open: ParseTag;
+    close: ParseTag | null;
+    props: Array<ParseProp | ParseValue>;
+    children: Array<ParseElement | ParseValue>;
+}
+export interface ParseValue {
+    type: "value";
+    value: any;
+}
+export interface ParseTag {
+    type: "tag";
+    slash: string;
+    value: any;
+    spanIndex?: number;
+    charIndex?: number;
+}
+export interface ParseProp {
+    type: "prop";
+    name: string;
+    value: ParseValue | ParsePropString;
+}
+export interface ParsePropString {
+    type: "propString";
+    parts: Array<string | ParseValue>;
+}
+export interface ParseError {
+    type: "error";
+    message: string;
+    value: any;
+    spanIndex?: number;
+    charIndex?: number;
+}
+export type ExpressionTarget = ParseValue | ParseTag | ParseProp | ParseError;
+export interface ParseResult {
+    element: ParseElement;
+    targets: Array<ExpressionTarget | null>;
+    spans: ArrayLike<string>;
+}
+export declare function parse(spans: ArrayLike<string>): ParseResult;

package/jsx-tag.js

@@ -7,7 +7,17 @@ function jsx(spans, ...expressions) {
     let parseResult = cache.get(key);
     if (parseResult == null) {
         parseResult = parse(spans.raw);
-        cache.set(key, parseResult);
+        let hasError = false;
+        for (let i = 0; i < parseResult.targets.length; i++) {
+            const t = parseResult.targets[i];
+            if (t && t.type === "error") {
+                hasError = true;
+                break;
+            }
+        }
+        if (!hasError) {
+            cache.set(key, parseResult);
+        }
     }
     const { element, targets } = parseResult;
     for (let i = 0; i < expressions.length; i++) {
@@ -15,12 +25,15 @@ function jsx(spans, ...expressions) {
         const target = targets[i];
         if (target) {
             if (target.type === "error") {
-                throw new SyntaxError(target.message.replace("${}", formatTagForError(exp)));
+                const msg = target.message.replace("${}", formatTagForError(exp));
+                throw new SyntaxError(target.spanIndex != null && target.charIndex != null
+                    ? formatSyntaxError(msg, spans.raw, target.spanIndex, target.charIndex)
+                    : msg);
             }
             target.value = exp;
         }
     }
-    return build(element);
+    return build(element, parseResult.spans);
 }
 /** Alias for `jsx` template tag. */
 const html = jsx;
@@ -112,16 +125,20 @@ function parse(spans) {
                                     type: "tag",
                                     slash: closingSlash,
                                     value: tagName,
+                                    spanIndex: s,
+                                    charIndex: match.index,
                                 };
                                 if (!stack.length) {
                                     if (end !== span.length) {
-                                        throw new SyntaxError(`Unmatched closing tag "${tagName}"`);
+                                        throw new SyntaxError(formatSyntaxError(`Unmatched closing tag "${tagName}"`, spans, s, match.index));
                                     }
                                     // ERROR EXPRESSION
                                     expressionTarget = {
                                         type: "error",
                                         message: "Unmatched closing tag ${}",
                                         value: null,
+                                        spanIndex: s,
+                                        charIndex: match.index,
                                     };
                                 }
                                 else {
@@ -140,6 +157,8 @@ function parse(spans) {
                                         type: "tag",
                                         slash: "",
                                         value: tagName,
+                                        spanIndex: s,
+                                        charIndex: match.index,
                                     },
                                     close: null,
                                     props: [],
@@ -174,7 +193,7 @@ function parse(spans) {
                     if (match) {
                         const [, tagEnd, spread, name, equals, string] = match;
                         if (i < match.index) {
-                            throw new SyntaxError(`Unexpected text \`${span.slice(i, match.index).trim()}\``);
+                            throw new SyntaxError(formatSyntaxError(`Unexpected text \`${span.slice(i, match.index).trim()}\``, spans, s, i));
                         }
                         if (tagEnd) {
                             if (tagEnd[0] === "/") {
@@ -193,7 +212,7 @@ function parse(spans) {
                             // SPREAD PROP EXPRESSION
                             expressionTarget = value;
                             if (!(expressing && end === span.length)) {
-                                throw new SyntaxError('Expression expected after "..."');
+                                throw new SyntaxError(formatSyntaxError('Expression expected after "..."', spans, s, match.index));
                             }
                         }
                         else if (name) {
@@ -203,14 +222,14 @@ function parse(spans) {
                                     value = { type: "value", value: true };
                                 }
                                 else if (end < span.length) {
-                                    throw new SyntaxError(`Unexpected text \`${span.slice(end, end + 20)}\``);
+                                    throw new SyntaxError(formatSyntaxError(`Unexpected text \`${span.slice(end, end + 20)}\``, spans, s, end));
                                 }
                                 else {
                                     value = { type: "value", value: null };
                                     // PROP EXPRESSION
                                     expressionTarget = value;
                                     if (!(expressing && end === span.length)) {
-                                        throw new SyntaxError(`Expression expected for prop "${name}"`);
+                                        throw new SyntaxError(formatSyntaxError(`Expression expected for prop "${name}"`, spans, s, match.index));
                                     }
                                 }
                             }
@@ -236,10 +255,10 @@ function parse(spans) {
                     else {
                         if (!expressing) {
                             if (i === span.length) {
-                                throw new SyntaxError(`Expected props but reached end of document`);
+                                throw new SyntaxError(formatSyntaxError(`Expected props but reached end of document`, spans, s, i));
                             }
                             else {
-                                throw new SyntaxError(`Unexpected text \`${span.slice(i, i + 20).trim()}\``);
+                                throw new SyntaxError(formatSyntaxError(`Unexpected text \`${span.slice(i, i + 20).trim()}\``, spans, s, i));
                             }
                         }
                         // Unexpected expression errors are handled in the outer loop.
@@ -254,13 +273,13 @@ function parse(spans) {
                     // We're in a closing tag and looking for the >.
                     if (match) {
                         if (i < match.index) {
-                            throw new SyntaxError(`Unexpected text \`${span.slice(i, match.index).trim()}\``);
+                            throw new SyntaxError(formatSyntaxError(`Unexpected text \`${span.slice(i, match.index).trim()}\``, spans, s, i));
                         }
                         matcher = CHILDREN_RE;
                     }
                     else {
                         if (!expressing) {
-                            throw new SyntaxError(`Unexpected text \`${span.slice(i, i + 20).trim()}\``);
+                            throw new SyntaxError(formatSyntaxError(`Unexpected text \`${span.slice(i, i + 20).trim()}\``, spans, s, i));
                         }
                     }
                     break;
@@ -276,7 +295,7 @@ function parse(spans) {
                     }
                     else {
                         if (!expressing) {
-                            throw new SyntaxError(`Missing \`${matcher === CLOSING_SINGLE_QUOTE_RE ? "'" : '"'}\``);
+                            throw new SyntaxError(formatSyntaxError(`Missing \`${matcher === CLOSING_SINGLE_QUOTE_RE ? "'" : '"'}\``, spans, s, i));
                         }
                     }
                     break;
@@ -287,7 +306,7 @@ function parse(spans) {
                     }
                     else {
                         if (!expressing) {
-                            throw new SyntaxError("Expected `-->` but reached end of template");
+                            throw new SyntaxError(formatSyntaxError("Expected `-->` but reached end of template", spans, s, i));
                         }
                     }
                     break;
@@ -321,40 +340,45 @@ function parse(spans) {
                     targets.push(null);
                     break;
                 default:
-                    throw new SyntaxError("Unexpected expression");
+                    throw new SyntaxError(formatSyntaxError("Unexpected expression", spans, s, spans[s].length));
             }
         }
         else if (expressionTarget) {
-            throw new SyntaxError("Expression expected");
+            throw new SyntaxError(formatSyntaxError("Expression expected", spans, s, spans[s].length));
         }
         lineStart = false;
     }
     if (stack.length) {
         const ti = targets.indexOf(element.open);
         if (ti === -1) {
-            throw new SyntaxError(`Unmatched opening tag "${element.open.value}"`);
+            throw new SyntaxError(formatSyntaxError(`Unmatched opening tag "${element.open.value}"`, spans, element.open.spanIndex ?? 0, element.open.charIndex ?? 0));
         }
         targets[ti] = {
             type: "error",
             message: "Unmatched opening tag ${}",
             value: null,
+            spanIndex: element.open.spanIndex,
+            charIndex: element.open.charIndex,
         };
     }
     if (element.children.length === 1 && element.children[0].type === "element") {
         element = element.children[0];
     }
-    return { element, targets };
+    return { element, targets, spans };
 }
-function build(parsed) {
+function build(parsed, spans) {
     if (parsed.close !== null &&
         parsed.close.slash !== "//" &&
         parsed.open.value !== parsed.close.value) {
-        throw new SyntaxError(`Unmatched closing tag ${formatTagForError(parsed.close.value)}, expected ${formatTagForError(parsed.open.value)}`);
+        const msg = `Unmatched closing tag ${formatTagForError(parsed.close.value)}, expected ${formatTagForError(parsed.open.value)}`;
+        throw new SyntaxError(spans && parsed.close.spanIndex != null && parsed.close.charIndex != null
+            ? formatSyntaxError(msg, spans, parsed.close.spanIndex, parsed.close.charIndex)
+            : msg);
     }
     const children = [];
     for (let i = 0; i < parsed.children.length; i++) {
         const child = parsed.children[i];
-        children.push(child.type === "element" ? build(child) : child.value);
+        children.push(child.type === "element" ? build(child, spans) : child.value);
     }
     let props = parsed.props.length ? {} : null;
     for (let i = 0; i < parsed.props.length; i++) {
@@ -425,6 +449,46 @@ function formatTagForError(tag) {
             ? `"${tag}"`
             : JSON.stringify(tag);
 }
+function formatSyntaxError(message, spans, spanIndex, charIndex) {
+    // Reconstruct full template source with ${} placeholders
+    let source = spans[0];
+    for (let i = 1; i < spans.length; i++) {
+        source += "${}" + spans[i];
+    }
+    // Compute absolute offset
+    let offset = 0;
+    for (let i = 0; i < spanIndex; i++) {
+        offset += spans[i].length + 3; // 3 = "${}".length
+    }
+    offset += charIndex;
+    // Split into lines and find line/column
+    const lines = source.split(/\n/);
+    let line = 0;
+    let col = offset;
+    for (let i = 0; i < lines.length; i++) {
+        if (col <= lines[i].length) {
+            line = i;
+            break;
+        }
+        col -= lines[i].length + 1; // +1 for the newline
+    }
+    // Build context lines
+    let result = `${message}\n\n`;
+    const start = Math.max(0, line - 1);
+    const end = Math.min(lines.length - 1, line + 1);
+    const gutterWidth = String(end + 1).length;
+    for (let i = start; i <= end; i++) {
+        const num = String(i + 1).padStart(gutterWidth);
+        if (i === line) {
+            result += `> ${num} | ${lines[i]}\n`;
+            result += `  ${" ".repeat(gutterWidth)} | ${" ".repeat(col)}^\n`;
+        }
+        else {
+            result += `  ${num} | ${lines[i]}\n`;
+        }
+    }
+    return result.trimEnd();
+}
 
-export { html, jsx };
+export { html, jsx, parse };
 //# sourceMappingURL=jsx-tag.js.map