fix: add debug info for unserializable values

.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/unserializable-warning/__snapshots__/html.expected/template.js

@@ -0,0 +1,34 @@
+import * as _$ from "@marko/runtime-tags/debug/html";
+const _renderer = /* @__PURE__ */_$.createRenderer((input, _tagVar) => {
+  const _scope0_id = _$.nextScopeId();
+  const Foo = {
+    content: _$.register(/* @__PURE__ */_$.createRenderer(() => {
+      const _scope1_id = _$.nextScopeId();
+      const unserializable = {
+        nested: {
+          thing: Buffer.from("")
+        }
+      };
+      const test = _$.register(function () {
+        return unserializable;
+      }, "__tests__/template.marko_1/test", _scope1_id);
+      _$.writeEffect(_scope1_id, "__tests__/template.marko_1_test");
+      _$.debug(_$.writeScope(_scope1_id, {
+        "unserializable": unserializable,
+        "test": test
+      }), "__tests__/template.marko", "1:2", {
+        "unserializable": "2:10",
+        "test": "7:10"
+      });
+    }), "__tests__/template.marko_1_renderer", _scope0_id)
+  };
+  const _dynamicScope = _$.peekNextScope();
+  _$.dynamicTagInput(_scope0_id, "#text/0", Foo, {});
+  _$.debug(_$.writeScope(_scope0_id, {
+    "#text/0!": _$.writeExistingScope(_dynamicScope),
+    "#text/0(": _$.normalizeDynamicRenderer(Foo)
+  }), "__tests__/template.marko", 0, {
+    "Foo": "1:9"
+  });
+});
+export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _renderer);

packages/runtime-tags/src/__tests__/fixtures/unserializable-warning/__snapshots__/ssr.expected.md

@@ -0,0 +1,4 @@
+# Emit error
+```
+  TypeError: Unable to serialize "unserializable" in __tests__/template.marko:2:10 (reading nested.thing)
+```

packages/runtime-tags/src/__tests__/fixtures/unserializable-warning/template.marko

@@ -0,0 +1,15 @@
+<define/Foo>
+  <const/unserializable = {
+    nested: {
+      thing: Buffer.from("")
+    }
+  }/>
+  <const/test() {
+    return unserializable;
+  }/>
+  <script>
+    test();
+  </script>
+</>
+
+<Foo/>

packages/runtime-tags/src/__tests__/fixtures/unserializable-warning/test.ts

@@ -0,0 +1 @@
+export const skip_dom = true;

packages/runtime-tags/src/common/compat-meta.ts

@@ -1,3 +1,4 @@
 const prefix = MARKO_DEBUG ? "$compat_" : "$C_";
 export const RENDERER_REGISTER_ID = prefix + (MARKO_DEBUG ? "renderer" : "r");
 export const SET_SCOPE_REGISTER_ID = prefix + (MARKO_DEBUG ? "setScope" : "s");
+export const RENDER_BODY_ID = prefix + (MARKO_DEBUG ? "renderBody" : "b");

packages/runtime-tags/src/dom/compat.ts

@@ -1,4 +1,5 @@
 import {
+  RENDER_BODY_ID,
   RENDERER_REGISTER_ID,
   SET_SCOPE_REGISTER_ID,
 } from "../common/compat-meta";
@@ -15,10 +16,12 @@ const classIdToBranch = new Map<string, BranchScope>();
 export const compat = {
   patchConditionals,
   queueEffect,
-  init() {
+  init(warp10Noop: any) {
     register(SET_SCOPE_REGISTER_ID, (branch: BranchScope & { m5c: string }) => {
       classIdToBranch.set(branch.m5c, branch);
     });
+
+    register(RENDER_BODY_ID, warp10Noop);
   },
   registerRenderer(fn: any) {
     register(RENDERER_REGISTER_ID, fn);

packages/runtime-tags/src/html.ts

@@ -22,6 +22,7 @@ export {
   dynamicTagInput,
 } from "./html/dynamic-tag";
 export { forIn, forInBy, forOf, forOfBy, forTo, forToBy } from "./html/for";
+export { debug } from "./html/serializer";
 export { createTemplate } from "./html/template";
 export {
   $global,

packages/runtime-tags/src/html/compat.ts

@@ -1,4 +1,5 @@
 import {
+  RENDER_BODY_ID,
   RENDERER_REGISTER_ID,
   SET_SCOPE_REGISTER_ID,
 } from "../common/compat-meta";
@@ -104,11 +105,16 @@ export const compat = {
           asyncOut.error(boundary.signal.reason);
         } else {
           queueMicrotask(() => {
-            const { scripts, html } = (head = prepareChunk(head));
-            asyncOut.script(scripts);
-            asyncOut.write(html);
-            asyncOut.end();
-            head.html = head.scripts = "";
+            head = prepareChunk(head);
+            // `prepareChunk` will call the serializer which could
+            // have new promises, the boundary may no longer be `done`.
+            if (boundary.done) {
+              const { scripts, html } = head;
+              asyncOut.script(scripts);
+              asyncOut.write(html);
+              asyncOut.end();
+              head.html = head.scripts = "";
+            }
           });
         }
       }
@@ -121,4 +127,7 @@ export const compat = {
       register(id, () => {}),
     );
   },
+  registerRenderBody(fn: any) {
+    register(RENDER_BODY_ID, fn);
+  },
 };

packages/runtime-tags/src/html/serializer.ts

@@ -272,6 +272,7 @@ class State {
 }
 
 class Reference {
+  declare debug?: Debug;
   public init = "";
   public assigns = "";
   constructor(
@@ -289,6 +290,29 @@ class Reference {
   }
 }
 
+interface Debug {
+  file: string;
+  loc: string | 0;
+  vars: Record<string, string> | undefined;
+}
+const DEBUG = new WeakMap<WeakKey, Debug>();
+export function debug(
+  obj: WeakKey,
+  file: string,
+  loc: string | 0,
+  vars?: Record<string, string>,
+) {
+  if (MARKO_DEBUG) {
+    DEBUG.set(obj, {
+      file,
+      loc,
+      vars,
+    });
+  }
+
+  return obj;
+}
+
 export class Serializer {
   #state = new State();
   get flushed() {
@@ -420,6 +444,7 @@ function writeProp(
       return writeObject(state, val, parent, accessor);
 
     default:
+      MARKO_DEBUG && throwUnserializable(state, val, parent, accessor);
       return false;
   }
 }
@@ -459,6 +484,11 @@ function writeReferenceOr(
     val,
     (ref = new Reference(parent, accessor, state.flush, state.buf.length)),
   );
+
+  if (MARKO_DEBUG) {
+    ref.debug = DEBUG.get(val);
+  }
+
   if (write(state, val, ref)) return true;
 
   state.refs.delete(ref);
@@ -567,7 +597,8 @@ function writeUnknownSymbol(state: State) {
   return true;
 }
 
-function writeNever() {
+function writeNever(state: State, val: unknown, ref: Reference) {
+  MARKO_DEBUG && throwUnserializable(state, val, ref);
   return false;
 }
 
@@ -658,6 +689,8 @@ function writeUnknownObject(state: State, val: object, ref: Reference) {
     case globalThis.Response:
       return writeResponse(state, val as Response, ref);
   }
+
+  MARKO_DEBUG && throwUnserializable(state, val, ref);
   return false;
 }
 
@@ -1198,6 +1231,51 @@ function writeAsyncCall(
   boundary.endAsync();
 }
 
+function throwUnserializable(
+  state: State,
+  cause: unknown,
+  ref: Reference | null = null,
+  accessor: string = "",
+) {
+  if (cause !== undefined && state.boundary?.abort) {
+    let message = "Unable to serialize";
+    let access = "";
+    while (ref?.accessor) {
+      const debug = ref.parent?.debug;
+      if (debug) {
+        const varLoc = debug.vars?.[ref.accessor];
+        if (varLoc) {
+          message += ` "${ref.accessor}" in ${debug.file}:${varLoc}`;
+        } else {
+          message += ` ${JSON.stringify(ref.accessor)} in ${debug.file}`;
+          if (debug.loc) {
+            message += `:${debug.loc}`;
+          }
+        }
+        break;
+      }
+      access = toAccess(ref.accessor) + access;
+      ref = ref.parent;
+    }
+
+    if (accessor) {
+      access = toAccess(accessor) + access;
+    }
+
+    if (access[0] === ".") {
+      access = access.slice(1);
+    }
+
+    if (access) {
+      message += ` (reading ${access})`;
+    }
+
+    const err = new TypeError(message, { cause });
+    err.stack = undefined;
+    state.boundary.abort(err);
+  }
+}
+
 function isCircular(
   parent: Reference | null,
   ref: Reference,