@fluixi/compiler 1.0.0-alpha.82 → 1.0.0-alpha.84

package/dist/codegen/backends/imperative.js

@@ -1,6 +1,8 @@
 import { planPartialTemplate } from '../partial-template.js';
-import { isSerializable, serializeStatic, isPlainLiteralAttr, htmlAttrName, } from '../serialize-static.js';
+import { isSerializable, serializeStatic, templatePositions, isPlainLiteralAttr, htmlAttrName, } from '../serialize-static.js';
 import { RUNTIME_CONTRACT_V1 } from '../contract.js';
+import { markHole, markProps, SOURCE_MARKER } from '../../transform/source-locations.js';
+import { paren } from '../../analyze/paren.js';
 /**
  * Imperative fine-grained backend — emits createNativeElement/insert/spread/
  * createComponent (RUNTIME_CONTRACT_V1), the runtime proven by the @fluixi/dom
@@ -34,9 +36,17 @@ function propKey(name) {
 }
 function propValue(p) {
     if (p.expr !== undefined) {
+        // A ref is not reactive, but which variable ends up holding the element is worth
+        // saying, so it carries its own text and position.
+        if (p.name === 'ref' && p.at)
+            return markHole(paren(p.expr, 'value'), p.at.line, p.at.column, p.expr);
         // Events and non-reactive expressions pass through; reactive ones become thunks
         // so the runtime (spread/insert) can wire a render effect.
-        return p.reactive ? `() => (${p.expr})` : `(${p.expr})`;
+        if (!p.reactive)
+            return paren(p.expr, 'value');
+        const accessor = `() => ${paren(p.expr, 'arrowBody')}`;
+        // `at` is the gate: a production build carries no marker.
+        return p.at ? markHole(accessor, p.at.line, p.at.column, p.directive) : accessor;
     }
     return JSON.stringify(p.literal ?? true);
 }
@@ -49,8 +59,9 @@ function propValue(p) {
  * function instead of the value (e.g. `history.get is not a function`).
  */
 function componentPropValue(p) {
+    // Sits in a `return`, where a top-level comma would read as a sequence.
     if (p.expr !== undefined)
-        return `(${p.expr})`;
+        return paren(p.expr, 'value');
     return JSON.stringify(p.literal ?? true);
 }
 /** Build a props object literal (or mergeProps(...) when spreads are present). */
@@ -67,12 +78,20 @@ function emitProps(props, childrenExpr, used) {
     }
     return obj;
 }
+/**
+ * The memo a component lowers to is an accessor, so it takes the same hole mark as any
+ * other reactive binding. Without it, the insert that places the subtree reports whatever
+ * the runtime stack says — a position in the compiled file.
+ */
+function markBind(code, at) {
+    return at ? markHole(code, at.line, at.column) : code;
+}
 function emitChildren(children, used, templates) {
     if (children.length === 1)
         return emitNode(children[0], used, templates);
     return `[${children.map((c) => emitNode(c, used, templates)).join(', ')}]`;
 }
-function emitComponent(name, props, children, used, templates) {
+function emitComponent(name, props, children, used, templates, at) {
     used.add('createMemo');
     used.add('createComponent');
     const spreads = props.filter((p) => p.kind === 'spread');
@@ -95,6 +114,14 @@ function emitComponent(name, props, children, used, templates) {
         used.add('mergeProps');
         obj = `mergeProps(${spreads.map((s) => s.expr).join(', ')}, ${obj})`;
     }
+    // Every prop is a getter, so none of them can carry a position. The map rides alongside,
+    // and a build that recorded no locations emits nothing.
+    const propAt = {};
+    for (const p of normal)
+        if (p.at)
+            propAt[p.name] = [p.at.line, p.at.column];
+    if (Object.keys(propAt).length)
+        obj = markProps(obj, propAt);
     // The memo never recomputes — every prop is a getter, so this callback reads nothing
     // reactive. It is here for what it makes `insert` do, and it cannot be elided.
     //
@@ -115,7 +142,14 @@ function emitComponent(name, props, children, used, templates) {
     // Control flow does use a bare arrow, and that is not a counter-example: control flow
     // is the reactive boundary and is *meant* to re-run. A user component is meant to run
     // once.
-    return `createMemo(() => createComponent(${name}, ${obj}))`;
+    // The mark goes inside the call, where it runs before createMemo makes the node and so
+    // is the one the node takes. Devtools installs the global; without it this is a no-op.
+    const mark = at
+        ? `globalThis.${SOURCE_MARKER}?.(${JSON.stringify(at.file)},${at.line},${at.column},${JSON.stringify(name)}), `
+        : '';
+    // The mark makes this a sequence, which has to stay wrapped to pass as one argument.
+    // Without one there is nothing to wrap, and a production build never has one.
+    return `createMemo(${paren(`${mark}() => createComponent(${name}, ${obj})`, 'value')})`;
 }
 /** `el.setAttribute("class", "card")` for a compile-time constant. */
 function staticAttrAssignment(el, prop) {
@@ -133,18 +167,25 @@ function emitNode(node, used, templates) {
     switch (node.kind) {
         case 'text':
             return JSON.stringify(node.value);
-        case 'expr':
-            return node.reactive ? `() => (${node.code})` : `(${node.code})`;
+        case 'expr': {
+            if (!node.reactive)
+                return paren(node.code, 'value');
+            const accessor = `() => ${paren(node.code, 'arrowBody')}`;
+            return node.at ? markHole(accessor, node.at.line, node.at.column) : accessor;
+        }
         case 'fragment':
             if (node.children.length === 0)
                 return 'null';
             return emitChildren(node.children, used, templates);
         case 'component':
-            return emitComponent(node.name, node.props, node.children, used, templates);
+            // No reactive prop means no `bindAt`, which is most tags. The insert that places the
+            // subtree still has to report somewhere, and the tag itself is where it was written —
+            // without this it reports whatever the runtime stack says, a line in the compiled file.
+            return markBind(emitComponent(node.name, node.props, node.children, used, templates, node.at), node.bindAt ?? node.at);
         case 'control': {
             const name = CONTROL_COMPONENT[node.control] ?? node.control;
             used.add(name);
-            return emitComponent(name, node.props, node.children, used, templates);
+            return markBind(emitComponent(name, node.props, node.children, used, templates), node.bindAt);
         }
         case 'element': {
             // A static subtree is parsed once into a <template> and cloned per instance:
@@ -157,7 +198,12 @@ function emitNode(node, used, templates) {
                 used.add('templateNode');
                 const id = `_tmpl$${templates.length}`;
                 templates.push({ id, html: serializeStatic(node), tag: node.tag, svg: false });
-                return `templateNode(${id}, ${JSON.stringify(node.tag)})`;
+                // The positions ride along so devtools can name the line each element was written
+                // on; the template string itself maps back to the root and nothing finer.
+                const at = templatePositions(node);
+                return at
+                    ? `templateNode(${id}, ${JSON.stringify(node.tag)}, false, false, ${JSON.stringify(at)})`
+                    : `templateNode(${id}, ${JSON.stringify(node.tag)})`;
             }
             // Structure static, contents dynamic — the common shape. One template for the
             // structure, then each hole filled through a reference into the clone. Every
@@ -172,7 +218,10 @@ function emitNode(node, used, templates) {
                     used.add('holeScope');
                     const id = `_tmpl$${templates.length}`;
                     templates.push({ id, html: plan.html, tag: plan.tag, svg: false });
-                    const lines = [`const _el$ = templateNode(${id}, ${JSON.stringify(plan.tag)}, true);`];
+                    const at = templatePositions(node);
+                    const lines = [
+                        `const _el$ = templateNode(${id}, ${JSON.stringify(plan.tag)}, true${at ? `, false, ${JSON.stringify(at)}` : ''});`,
+                    ];
                     // Every reference first: inserting shifts what follows, so the walk has to be
                     // complete before any content goes in.
                     for (const step of plan.steps)
@@ -184,7 +233,7 @@ function emitNode(node, used, templates) {
                         // `holeScope` places the hydration cursor at what the server rendered for
                         // this hole, so anything the content builds internally adopts too.
                         lines.push(`insert(${hole.parentRef}, holeScope(${hole.startRef}, () => ` +
-                            `(${emitNode(hole.node, used, templates)})), ` +
+                            `${paren(emitNode(hole.node, used, templates), 'arrowBody')}), ` +
                             `${hole.endRef}, holeContent(${hole.startRef}, ${hole.endRef}));`);
                     }
                     lines.push('return _el$;');
@@ -195,7 +244,13 @@ function emitNode(node, used, templates) {
             const tag = JSON.stringify(node.tag);
             const el = '_el$';
             const parts = [];
-            const createArgs = node.svg ? `${tag}, true` : tag;
+            // The third argument is where the tag was written. An element built this way is not
+            // in a template, so nothing else records it.
+            const createArgs = node.at
+                ? `${tag}, ${node.svg}, ${JSON.stringify(node.at)}`
+                : node.svg
+                    ? `${tag}, true`
+                    : tag;
             parts.push(`const ${el} = createNativeElement(${createArgs});`);
             if (node.props.length > 0) {
                 // Literal attributes are written straight on. `spread` is a generic helper that