TAGS API: Serializer debug info

.changeset/happy-cycles-smash.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Fix issue where streams that had aborted but then finished were swallowing the abort error.

.changeset/tame-balloons-turn.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Add errors with debug info when attempting to serialize a non serializable value.

.changeset/thin-vans-fail.md

@@ -0,0 +1,8 @@
+---
+"marko": patch
+"@marko/runtime-tags": patch
+"@marko/compiler": patch
+"@marko/translator-interop-class-tags": patch
+---
+
+Ensure Marko 5 renderBodies are serialized properly across the compat layer.

.sizes.json

@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 18072,
-        "brotli": 6619
+        "min": 18085,
+        "brotli": 6624
       }
     },
     {

.sizes/dom.js

@@ -1,4 +1,4 @@
-// size: 18072 (min) 6619 (brotli)
+// size: 18085 (min) 6624 (brotli)
 var empty = [],
   rest = Symbol();
 function attrTag(attrs2) {
@@ -1535,10 +1535,11 @@ var classIdToBranch = new Map(),
         (conditionalOnlyChild = fn(conditionalOnlyChild));
     },
     queueEffect: queueEffect,
-    init() {
+    init(warp10Noop) {
       register("$C_s", (branch) => {
         classIdToBranch.set(branch.m5c, branch);
-      });
+      }),
+        register("$C_b", warp10Noop);
     },
     registerRenderer(fn) {
       register("$C_r", fn);

packages/runtime-class/src/runtime/helpers/tags-compat/runtime-dom.js

@@ -144,7 +144,7 @@ exports.p = function (domCompat) {
   }
 
   domCompat.registerRenderer(create5to6Renderer);
-  domCompat.init();
+  domCompat.init(require("../serialize-noop").___noop);
 
   function renderAndMorph(scope, renderer, renderBody, input) {
     const out = defaultCreateOut();

packages/runtime-class/src/runtime/helpers/tags-compat/runtime-html.js

@@ -75,6 +75,9 @@ exports.p = function (htmlCompat) {
         tag.renderer;
       const renderBody5 = tag.renderBody || tag;
 
+      if (!renderer5 && renderBody5) {
+        htmlCompat.registerRenderBody(renderBody5);
+      }
       return (input, ...args) => {
         const out = defaultCreateOut();
         let customEvents;

packages/runtime-tags/src/__tests__/fixtures/assignment-before-tag-var/__snapshots__/html.expected/template.js

@@ -5,8 +5,11 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const lastClickCount = undefined;
   _$.write(`<button>+</button>${_$.markResumeNode(_scope0_id, "#button/0")}<span>${_$.escapeXML(clickCount)}${_$.markResumeNode(_scope0_id, "#text/1")} was <!>${_$.escapeXML(lastClickCount)}${_$.markResumeNode(_scope0_id, "#text/2")}</span>`);
   _$.writeEffect(_scope0_id, "__tests__/template.marko_0_clickCount");
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "clickCount": clickCount
+  }), "__tests__/template.marko", 0, {
+    "clickCount": "6:6",
+    "lastClickCount": "7:6"
   });
   _$.resumeClosestBranch(_scope0_id);
 });

packages/runtime-tags/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/html.expected/tags/custom-tag/index.js

@@ -10,9 +10,13 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _dynamicScope = _$.peekNextScope();
   _$.dynamicTagInput(_scope0_id, "#text/0", content, {});
   _$.write(`<div>${_$.escapeXML(x)}${_$.markResumeNode(_scope0_id, "#text/1")}</div>`);
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "#text/0!": _$.writeExistingScope(_dynamicScope),
     "#text/0(": _$.normalizeDynamicRenderer(content)
+  }), "__tests__/tags/custom-tag/index.marko", 0, {
+    "_pattern_": "1:17",
+    "x": "1:19",
+    "content": "1:22"
   });
 });
 export default /* @__PURE__ */_$.createTemplate("__tests__/tags/custom-tag/index.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/html.expected/template.js

@@ -27,8 +27,10 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   _customTag({
     thing: _thing
   });
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "#childScope/0": _$.writeExistingScope(_childScope)
+  }), "__tests__/template.marko", 0, {
+    "x": "1:10"
   });
 });
 export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/at-tags-dynamic-and-static/__snapshots__/html.expected/template.js

@@ -4,8 +4,8 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
   const _childScope = _$.peekNextScope();
   _hello({});
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "#childScope/0": _$.writeExistingScope(_childScope)
-  });
+  }), "__tests__/template.marko", 0);
 });
 export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/at-tags-dynamic-tag-parent/__snapshots__/html.expected/template.js

@@ -24,9 +24,11 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
     const _scope1_id = _$.nextScopeId();
     _$.write("Body content");
   }), "__tests__/template.marko_1_renderer", _scope0_id));
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "#text/0!": _$.writeExistingScope(_dynamicScope),
     "#text/0(": _$.normalizeDynamicRenderer(x)
+  }), "__tests__/template.marko", 0, {
+    "x": "1:10"
   });
 });
 export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/at-tags-dynamic-with-params/__snapshots__/html.expected/template.js

@@ -7,8 +7,8 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   } = input;
   const _childScope = _$.peekNextScope();
   _hello({});
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "#childScope/0": _$.writeExistingScope(_childScope)
-  });
+  }), "__tests__/template.marko", 0);
 });
 export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/at-tags-dynamic/__snapshots__/html.expected/template.js

@@ -4,8 +4,8 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
   const _childScope = _$.peekNextScope();
   _hello({});
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "#childScope/0": _$.writeExistingScope(_childScope)
-  });
+  }), "__tests__/template.marko", 0);
 });
 export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/at-tags/__snapshots__/html.expected/tags/hello/index.js

@@ -3,9 +3,9 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
   const _dynamicScope = _$.peekNextScope();
   _$.dynamicTagInput(_scope0_id, "#text/0", input.foo, {});
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "#text/0!": _$.writeExistingScope(_dynamicScope),
     "#text/0(": _$.normalizeDynamicRenderer(input.foo)
-  });
+  }), "__tests__/tags/hello/index.marko", 0);
 });
 export default /* @__PURE__ */_$.createTemplate("__tests__/tags/hello/index.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/at-tags/__snapshots__/html.expected/template.js

@@ -11,8 +11,8 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
       }), "__tests__/template.marko_1_renderer", _scope0_id)
     })
   });
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "#childScope/0": _$.writeExistingScope(_childScope)
-  });
+  }), "__tests__/template.marko", 0);
 });
 export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/attr-boolean-dynamic/__snapshots__/html.expected/template.js

@@ -4,8 +4,10 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const disabled = true;
   _$.write(`<input${_$.attr("disabled", disabled)}>${_$.markResumeNode(_scope0_id, "#input/0")}<button>${_$.escapeXML(disabled ? "enable" : "disable")}${_$.markResumeNode(_scope0_id, "#text/2")}</button>${_$.markResumeNode(_scope0_id, "#button/1")}`);
   _$.writeEffect(_scope0_id, "__tests__/template.marko_0_disabled");
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "disabled": disabled
+  }), "__tests__/template.marko", 0, {
+    "disabled": "1:6"
   });
   _$.resumeClosestBranch(_scope0_id);
 });

packages/runtime-tags/src/__tests__/fixtures/attr-class/__snapshots__/html.expected/template.js

@@ -38,13 +38,16 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
       }), "__tests__/template.marko_1_renderer", _scope0_id)
     })
   });
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "c": c,
     "d": d,
     "#childScope/1": _$.writeExistingScope(_childScope),
     "#childScope/2": _$.writeExistingScope(_childScope2),
     "#text/3!": _$.writeExistingScope(_dynamicScope),
     "#text/3(": _$.normalizeDynamicRenderer(input.test)
+  }), "__tests__/template.marko", 0, {
+    "c": "2:10",
+    "d": "2:13"
   });
 });
 export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/attr-escape/__snapshots__/html.expected/template.js

@@ -2,9 +2,9 @@ import * as _$ from "@marko/runtime-tags/debug/html";
 const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   const _scope0_id = _$.nextScopeId();
   _$.write(`<div${_$.classAttr(input.foo)}${_$.attr("foo", 'a' + input.foo + 'b')}${_$.attr("bar", `a ${input.bar} b`)}${_$.attr("nested", `a ${input.foo + ` nested ${input.bar}`} b`)}></div>${_$.markResumeNode(_scope0_id, "#div/0")}`);
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "input_foo": input.foo,
     "input_bar": input.bar
-  });
+  }), "__tests__/template.marko", 0);
 });
 export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/attr-style/__snapshots__/html.expected/template.js

@@ -40,12 +40,15 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
       }), "__tests__/template.marko_1_renderer", _scope0_id)
     })
   });
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "#childScope/1": _$.writeExistingScope(_childScope),
     "#childScope/2": _$.writeExistingScope(_childScope2),
     "#childScope/3": _$.writeExistingScope(_childScope3),
     "#text/4!": _$.writeExistingScope(_dynamicScope),
     "#text/4(": _$.normalizeDynamicRenderer(test)
+  }), "__tests__/template.marko", 0, {
+    "color": "1:10",
+    "test": "1:17"
   });
 });
 export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/await-tag/__snapshots__/html.expected/template.js

@@ -8,33 +8,41 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
     const _scope1_id = _$.nextScopeId();
     _$.write(`Got: ${_$.escapeXML(value)} <!>${_$.escapeXML(count)}${_$.markResumeNode(_scope1_id, "#text/1")}`);
     _$.writeEffect(_scope1_id, "__tests__/template.marko_1_count/subscriber");
-    _$.writeScope(_scope1_id, {
+    _$.debug(_$.writeScope(_scope1_id, {
       "_": _$.ensureScopeWithId(_scope0_id)
+    }), "__tests__/template.marko", "5:4", {
+      "value": "5:10"
     });
     _$.resumeClosestBranch(_scope1_id);
   });
   _$.fork(resolveAfter("b", 2), value => {
     const _scope2_id = _$.nextScopeId();
     _$.write(`Got: ${_$.escapeXML(value)} <!>${_$.escapeXML(count)}${_$.markResumeNode(_scope2_id, "#text/1")}`);
     _$.writeEffect(_scope2_id, "__tests__/template.marko_2_count/subscriber");
-    _$.writeScope(_scope2_id, {
+    _$.debug(_$.writeScope(_scope2_id, {
       "_": _$.ensureScopeWithId(_scope0_id)
+    }), "__tests__/template.marko", "9:4", {
+      "value": "9:10"
     });
     _$.resumeClosestBranch(_scope2_id);
   });
   _$.fork(resolveAfter("c", 1), value => {
     const _scope3_id = _$.nextScopeId();
     _$.write(`Got: ${_$.escapeXML(value)} <!>${_$.escapeXML(count)}${_$.markResumeNode(_scope3_id, "#text/1")}`);
     _$.writeEffect(_scope3_id, "__tests__/template.marko_3_count/subscriber");
-    _$.writeScope(_scope3_id, {
+    _$.debug(_$.writeScope(_scope3_id, {
       "_": _$.ensureScopeWithId(_scope0_id)
+    }), "__tests__/template.marko", "13:4", {
+      "value": "13:10"
     });
     _$.resumeClosestBranch(_scope3_id);
   });
   _$.write(`<button>Inc</button>${_$.markResumeNode(_scope0_id, "#button/0")}</div>`);
   _$.writeEffect(_scope0_id, "__tests__/template.marko_0_count");
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "count": count
+  }), "__tests__/template.marko", 0, {
+    "count": "3:6"
   });
   _$.resumeClosestBranch(_scope0_id);
 });

packages/runtime-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/html.expected/tags/my-button.js

@@ -7,8 +7,11 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   } = input;
   _$.write(`<button>${_$.escapeXML(text)}${_$.markResumeNode(_scope0_id, "#text/1")}</button>${_$.markResumeNode(_scope0_id, "#button/0")}`);
   _$.writeEffect(_scope0_id, "__tests__/tags/my-button.marko_0_onClick");
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "onClick": onClick
+  }), "__tests__/tags/my-button.marko", 0, {
+    "onClick": "1:10",
+    "text": "1:19"
   });
 });
 export default /* @__PURE__ */_$.createTemplate("__tests__/tags/my-button.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/html.expected/template.js

@@ -10,9 +10,11 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
       clickCount++;
     }, "__tests__/template.marko_0/onClick", _scope0_id)
   });
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "clickCount": clickCount,
     "#childScope/0": _$.writeExistingScope(_childScope)
+  }), "__tests__/template.marko", 0, {
+    "clickCount": "1:6"
   });
   _$.resumeClosestBranch(_scope0_id);
 });

packages/runtime-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/html.expected/tags/my-button.js

@@ -10,8 +10,11 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   } = attrs;
   _$.write(`<button>${_$.escapeXML(text)}${_$.markResumeNode(_scope0_id, "#text/1")}</button>${_$.markResumeNode(_scope0_id, "#button/0")}`);
   _$.writeEffect(_scope0_id, "__tests__/tags/my-button.marko_0_onClick");
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "onClick": onClick
+  }), "__tests__/tags/my-button.marko", 0, {
+    "text": "2:10",
+    "onClick": "3:10"
   });
 });
 export default /* @__PURE__ */_$.createTemplate("__tests__/tags/my-button.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/html.expected/template.js

@@ -10,9 +10,11 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
       clickCount++;
     }, "__tests__/template.marko_0/onClick", _scope0_id)
   });
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "clickCount": clickCount,
     "#childScope/0": _$.writeExistingScope(_childScope)
+  }), "__tests__/template.marko", 0, {
+    "clickCount": "1:6"
   });
   _$.resumeClosestBranch(_scope0_id);
 });

packages/runtime-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/html.expected/tags/my-button.js

@@ -14,8 +14,13 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   } = input;
   _$.write(`<button>${_$.escapeXML(text)}${_$.markResumeNode(_scope0_id, "#text/1")} <!>${_$.escapeXML(textAlias)}${_$.markResumeNode(_scope0_id, "#text/2")}</button>${_$.markResumeNode(_scope0_id, "#button/0")}`);
   _$.writeEffect(_scope0_id, "__tests__/tags/my-button.marko_0_onClick");
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "onClick": onClick
+  }), "__tests__/tags/my-button.marko", 0, {
+    "onClick": "1:10",
+    "_pattern_": "1:26",
+    "text": "1:28",
+    "textAlias": "2:25"
   });
 });
 export default /* @__PURE__ */_$.createTemplate("__tests__/tags/my-button.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/html.expected/template.js

@@ -21,10 +21,12 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
       text: clickCount
     })
   });
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "clickCount": clickCount,
     "#childScope/0": _$.writeExistingScope(_childScope),
     "#childScope/1": _$.writeExistingScope(_childScope2)
+  }), "__tests__/template.marko", 0, {
+    "clickCount": "1:6"
   });
   _$.resumeClosestBranch(_scope0_id);
 });

packages/runtime-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/html.expected/tags/my-button.js

@@ -10,8 +10,12 @@ const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
   } = input;
   _$.write(`<button>${_$.escapeXML(text)}${_$.markResumeNode(_scope0_id, "#text/1")} <!>${_$.escapeXML(textAlias)}${_$.markResumeNode(_scope0_id, "#text/2")}</button>${_$.markResumeNode(_scope0_id, "#button/0")}`);
   _$.writeEffect(_scope0_id, "__tests__/tags/my-button.marko_0_onClick");
-  _$.writeScope(_scope0_id, {
+  _$.debug(_$.writeScope(_scope0_id, {
     "onClick": onClick
+  }), "__tests__/tags/my-button.marko", 0, {
+    "onClick": "1:10",
+    "text": "1:19",
+    "textAlias": "2:16"
   });
 });
 export default /* @__PURE__ */_$.createTemplate("__tests__/tags/my-button.marko", _renderer);