fix: improve debug info for member expressions

marko-js · Feb 3, 2025 · 8dbff7a · 8dbff7a
1 parent 4ed82e2
commit 8dbff7a
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 10 deletions.
diff --git a/...tags/src/__tests__/fixtures/basic-execution-order/__snapshots__/html.expected/template.js b/...tags/src/__tests__/fixtures/basic-execution-order/__snapshots__/html.expected/template.js
@@ -25,6 +25,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
     "#text/1!": _$.getScopeById(_ifScopeId)
   }), "__tests__/template.marko", 0, {
     "message": "1:6",
+    "message_text": ["message.text", "1:6"],
     "show": "2:6"
   });
   _$.resumeClosestBranch(_scope0_id);

diff --git a/...ests__/fixtures/basic-inert-collapsible-tree/__snapshots__/html.expected/tags/comments.js b/...ests__/fixtures/basic-inert-collapsible-tree/__snapshots__/html.expected/tags/comments.js
@@ -38,6 +38,8 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
       "_": _$.ensureScopeWithId(_scope0_id)
     }), "__tests__/tags/comments.marko", "2:4", {
       "comment": "2:8",
+      "comment_text": ["comment.text", "2:8"],
+      "comment_comments": ["comment.comments", "2:8"],
       "i": "2:17",
       "id": "3:12",
       "open": "4:10"

diff --git a/...tests__/fixtures/basic-member-expression-computed/__snapshots__/html.expected/template.js b/...tests__/fixtures/basic-member-expression-computed/__snapshots__/html.expected/template.js
@@ -10,6 +10,7 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
     "index": index
   }), "__tests__/template.marko", 0, {
     "items": "1:5",
+    "items_0": ["items[0]", "1:5"],
     "index": "2:5"
   });
   _$.resumeClosestBranch(_scope0_id);

diff --git a/...gs/src/__tests__/fixtures/move-and-clear-children/__snapshots__/html.expected/template.js b/...gs/src/__tests__/fixtures/move-and-clear-children/__snapshots__/html.expected/template.js
@@ -14,7 +14,8 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
     _scope1_.set(_by(child, _index), _$.ensureScopeWithId(_scope1_id));
     _$.write(`${_$.escapeXML(child.text)}${_$.markResumeNode(_scope1_id, "#text/0")}`);
     _$.debug(_$.writeScope(_scope1_id, {}), "__tests__/template.marko", "3:4", {
-      "child": "3:8"
+      "child": "3:8",
+      "child_text": ["child.text", "3:8"]
     });
   }, _scope0_id, "#div/0");
   _$.write(`</div>${_$.markResumeNode(_scope0_id, "#div/0")}`);

diff --git a/...s/src/__tests__/fixtures/move-and-clear-top-level/__snapshots__/html.expected/template.js b/...s/src/__tests__/fixtures/move-and-clear-top-level/__snapshots__/html.expected/template.js
@@ -10,7 +10,8 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
     _scope1_.set(_by(child, _index), _$.ensureScopeWithId(_scope1_id));
     _$.write(`${_$.escapeXML(child.text)}${_$.markResumeNode(_scope1_id, "#text/0")}`);
     _$.debug(_$.writeScope(_scope1_id, {}), "__tests__/template.marko", "1:2", {
-      "child": "1:6"
+      "child": "1:6",
+      "child_text": ["child.text", "1:6"]
     });
   }, _scope0_id, "#text/0");
   _$.debug(_$.writeScope(_scope0_id, {

diff --git a/...e-tags/src/__tests__/fixtures/remove-and-add-rows/__snapshots__/html.expected/template.js b/...e-tags/src/__tests__/fixtures/remove-and-add-rows/__snapshots__/html.expected/template.js
@@ -14,7 +14,8 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
     _scope1_.set(_by(child, _index), _$.ensureScopeWithId(_scope1_id));
     _$.write(`${_$.escapeXML(child.text)}${_$.markResumeNode(_scope1_id, "#text/0")}`);
     _$.debug(_$.writeScope(_scope1_id, {}), "__tests__/template.marko", "3:4", {
-      "child": "3:8"
+      "child": "3:8",
+      "child_text": ["child.text", "3:8"]
     });
   }, _scope0_id, "#div/0");
   _$.write(`</div>${_$.markResumeNode(_scope0_id, "#div/0")}`);

diff --git a/packages/runtime-tags/src/html/serializer.ts b/packages/runtime-tags/src/html/serializer.ts
@@ -293,7 +293,7 @@ class Reference {
 interface Debug {
   file: string;
   loc: string | 0;
-  vars: Record<string, string> | undefined;
+  vars: Record<string, string | [loc: string, name: string]> | undefined;
 }
 const DEBUG = new WeakMap<WeakKey, Debug>();
 export function debug(
@@ -1245,7 +1245,11 @@ function throwUnserializable(
       if (debug) {
         const varLoc = debug.vars?.[ref.accessor];
         if (varLoc) {
-          message += ` "${ref.accessor}" in ${debug.file}:${varLoc}`;
+          if (Array.isArray(varLoc)) {
+            message += ` "${varLoc[0]}" in ${debug.file}:${varLoc[1]}`;
+          } else {
+            message += ` "${ref.accessor}" in ${debug.file}:${varLoc}`;
+          }
         } else {
           message += ` ${JSON.stringify(ref.accessor)} in ${debug.file}`;
           if (debug.loc) {
@@ -1320,7 +1324,7 @@ function toObjectKey(name: string) {
   return name;
 }
 
-function toAccess(accessor: string) {
+export function toAccess(accessor: string) {
   const start = accessor[0];
   return start === '"' || (start >= "0" && start <= "9")
     ? "[" + accessor + "]"

diff --git a/packages/runtime-tags/src/translator/util/signals.ts b/packages/runtime-tags/src/translator/util/signals.ts
@@ -2,6 +2,7 @@ import { types as t } from "@marko/compiler";
 import { getTemplateId } from "@marko/compiler/babel-utils";
 
 import { AccessorChar } from "../../common/types";
+import { toAccess } from "../../html/serializer";
 import { returnId } from "../core/return";
 import {
   cleanIdentifier,
@@ -1026,13 +1027,28 @@ export function writeHTMLResumeStatements(
     if (!isOptimize()) {
       let debugVars: t.ObjectProperty[] | undefined;
       forEach(section.bindings, (binding) => {
-        if (binding.loc) {
+        let root = binding;
+        let access = "";
+        while (!root.loc && root.upstreamAlias) {
+          if (root.property !== undefined) {
+            access = toAccess(root.property) + access;
+          }
+          root = root.upstreamAlias;
+        }
+
+        if (root.loc) {
+          const locStr = t.stringLiteral(
+            `${root.loc.start.line}:${root.loc.start.column + 1}`,
+          );
           (debugVars ||= []).push(
             t.objectProperty(
               getScopeAccessorLiteral(binding),
-              t.stringLiteral(
-                `${binding.loc.start.line}:${binding.loc.start.column + 1}`,
-              ),
+              root !== binding
+                ? t.arrayExpression([
+                    t.stringLiteral(root.name + access),
+                    locStr,
+                  ])
+                : locStr,
             ),
           );
         }