[Tags API] fix: avoid long assignment chains in serializer

.changeset/three-monkeys-boil.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Deoptimize serializer assignments after 100 assignments to the same reference. This avoids an issue where 1192 assignments in a chain caused a Maximum callstack error in chrome.

packages/runtime-tags/src/__tests__/serializer.test.ts

@@ -277,6 +277,24 @@ describe("serializer", () => {
       );
     });
 
+    it("circular assignments > 100 (deopt for chrome :crying-emoji:)", () => {
+      const parent = {
+        name: "parent",
+        children: [],
+      } as any;
+
+      for (let i = 0; i < 101; i++) {
+        parent.children.push({
+          parent,
+        });
+      }
+
+      assertStringify(
+        { parent },
+        `{parent:_.a={name:"parent",children:[_.b={},_.c={},_.d={},_.e={},_.f={},_.g={},_.h={},_.i={},_.j={},_.k={},_.l={},_.m={},_.n={},_.o={},_.p={},_.q={},_.r={},_.s={},_.t={},_.u={},_.v={},_.w={},_.x={},_.y={},_.z={},_.A={},_.B={},_.C={},_.D={},_.E={},_.F={},_.G={},_.H={},_.I={},_.J={},_.K={},_.L={},_.M={},_.N={},_.O={},_.P={},_.Q={},_.R={},_.S={},_.T={},_.U={},_.V={},_.W={},_.X={},_.Y={},_.Z={},_.$={},_.ab={},_.bb={},_.cb={},_.db={},_.eb={},_.fb={},_.gb={},_.hb={},_.ib={},_.jb={},_.kb={},_.lb={},_.mb={},_.nb={},_.ob={},_.pb={},_.qb={},_.rb={},_.sb={},_.tb={},_.ub={},_.vb={},_.wb={},_.xb={},_.yb={},_.zb={},_.Ab={},_.Bb={},_.Cb={},_.Db={},_.Eb={},_.Fb={},_.Gb={},_.Hb={},_.Ib={},_.Jb={},_.Kb={},_.Lb={},_.Mb={},_.Nb={},_.Ob={},_.Pb={},_.Qb={},_.Rb={},_.Sb={},_.Tb={},_.Ub={},_.Vb={},_.Wb={}]}},($=>(_.b.parent=$,_.c.parent=$,_.d.parent=$,_.e.parent=$,_.f.parent=$,_.g.parent=$,_.h.parent=$,_.i.parent=$,_.j.parent=$,_.k.parent=$,_.l.parent=$,_.m.parent=$,_.n.parent=$,_.o.parent=$,_.p.parent=$,_.q.parent=$,_.r.parent=$,_.s.parent=$,_.t.parent=$,_.u.parent=$,_.v.parent=$,_.w.parent=$,_.x.parent=$,_.y.parent=$,_.z.parent=$,_.A.parent=$,_.B.parent=$,_.C.parent=$,_.D.parent=$,_.E.parent=$,_.F.parent=$,_.G.parent=$,_.H.parent=$,_.I.parent=$,_.J.parent=$,_.K.parent=$,_.L.parent=$,_.M.parent=$,_.N.parent=$,_.O.parent=$,_.P.parent=$,_.Q.parent=$,_.R.parent=$,_.S.parent=$,_.T.parent=$,_.U.parent=$,_.V.parent=$,_.W.parent=$,_.X.parent=$,_.Y.parent=$,_.Z.parent=$,_.$.parent=$,_.ab.parent=$,_.bb.parent=$,_.cb.parent=$,_.db.parent=$,_.eb.parent=$,_.fb.parent=$,_.gb.parent=$,_.hb.parent=$,_.ib.parent=$,_.jb.parent=$,_.kb.parent=$,_.lb.parent=$,_.mb.parent=$,_.nb.parent=$,_.ob.parent=$,_.pb.parent=$,_.qb.parent=$,_.rb.parent=$,_.sb.parent=$,_.tb.parent=$,_.ub.parent=$,_.vb.parent=$,_.wb.parent=$,_.xb.parent=$,_.yb.parent=$,_.zb.parent=$,_.Ab.parent=$,_.Bb.parent=$,_.Cb.parent=$,_.Db.parent=$,_.Eb.parent=$,_.Fb.parent=$,_.Gb.parent=$,_.Hb.parent=$,_.Ib.parent=$,_.Jb.parent=$,_.Kb.parent=$,_.Lb.parent=$,_.Mb.parent=$,_.Nb.parent=$,_.Ob.parent=$,_.Pb.parent=$,_.Qb.parent=$,_.Rb.parent=$,_.Sb.parent=$,_.Tb.parent=$,_.Ub.parent=$,_.Vb.parent=$,_.Wb.parent=$))(_.a)`,
+      );
+    });
+
     it("known objects", () => {
       assertStringify(
         [console, Math, JSON, globalThis],

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

@@ -287,7 +287,7 @@
 class Reference {
   declare debug?: Debug;
   public init = "";
-  public assigns = "";
+  public assigns: null | string[] = null;
   constructor(
     public parent: Reference | null,
     public accessor: string | null,
@@ -414,7 +414,12 @@
       if (assigned.size || calls.length) {
         assigned.delete(rootRef!);
         writeAssigned(state);
-        buf.push("," + rootRef.assigns + rootId);
+        buf.push(
+          "," +
+            (rootRef.assigns
+              ? assignsToString(rootRef.assigns, rootId)
+              : rootId),
+        );
       }
     }
 
@@ -440,9 +445,17 @@
 function writeAssigned(state: State) {
   if (state.assigned.size) {
     for (const valueRef of state.assigned) {
-      if (valueRef.assigns || valueRef.init) {
-        state.buf.push("," + valueRef.assigns + (valueRef.init || valueRef.id));
+      if (valueRef.init) {
+        if (valueRef.assigns) {
+          state.buf.push(
+            "," + assignsToString(valueRef.assigns, valueRef.init),
+          );
+        } else {
+          state.buf.push("," + valueRef.init);
+        }
         valueRef.init = "";
+      } else if (valueRef.assigns) {
+        state.buf.push("," + assignsToString(valueRef.assigns, valueRef.id!));
       }
     }
     state.assigned = new Set();
@@ -535,7 +548,7 @@
   let ref = state.refs.get(val);
   if (ref) {
     if (ref.init) {
-      ref.assigns += ensureId(state, parent!) + toAccess(accessor) + "=";
+      addAssignment(ref, ensureId(state, parent!) + toAccess(accessor));
       return false;
     }
 
@@ -544,7 +557,7 @@
         ensureId(state, ref);
         state.assigned.add(ref);
       }
-      ref.assigns += ensureId(state, parent!) + toAccess(accessor) + "=";
+      addAssignment(ref, ensureId(state, parent!) + toAccess(accessor));
       return false;
     }
 
@@ -611,7 +624,7 @@
         state.assigned.add(parent);
         state.assigned.add(fnRef);
         fnRef.init = access + "(" + ensureId(state, scopeRef) + ")";
-        fnRef.assigns += ensureId(state, parent) + toAccess(accessor) + "=";
+        addAssignment(fnRef, ensureId(state, parent) + toAccess(accessor));
         return false;
       }
 
@@ -629,7 +642,7 @@
         state.assigned.add(parent);
         state.assigned.add(fnRef);
         fnRef.init = access + "(" + scopeId + ")";
-        fnRef.assigns += ensureId(state, parent) + toAccess(accessor) + "=";
+        addAssignment(fnRef, ensureId(state, parent) + toAccess(accessor));
       } else {
         state.buf[pos] = access + "(" + state.buf[pos];
         state.buf.push(")");
@@ -853,16 +866,16 @@
   }
 
   const items: (undefined | [unknown?, unknown?])[] = [];
-  let assigns = "";
+  let assigns: undefined | string[];
   for (let [itemKey, itemValue] of val) {
     if (itemKey === val) {
       itemKey = undefined;
-      assigns += "i[" + items.length + "][0]=";
+      (assigns ||= []).push("i[" + items.length + "][0]");
     }
 
     if (itemValue === val) {
       itemValue = undefined;
-      assigns += "i[" + items.length + "][1]=";
+      (assigns ||= []).push("i[" + items.length + "][1]");
     }
 
     if (itemValue === undefined) {
@@ -881,7 +894,9 @@
   );
   state.buf.push(
     (assigns
-      ? "((m,i)=>(" + assigns + "m,i.forEach(i=>m.set(i[0],i[1])),m))(new Map,"
+      ? "((m,i)=>(" +
+        assignsToString(assigns, "m") +
+        ",i.forEach(i=>m.set(i[0],i[1])),m))(new Map,"
       : "new Map(") +
       arrayRef.id +
       "=",
@@ -898,11 +913,11 @@
   }
 
   const items: (unknown | undefined)[] = [];
-  let assigns = "";
+  let assigns: undefined | string[];
   for (let item of val) {
     if (item === val) {
       item = undefined;
-      assigns += "i[" + items.length + "]=";
+      (assigns ||= []).push("i[" + items.length + "]");
     }
 
     items.push(item);
@@ -917,7 +932,9 @@
   );
   state.buf.push(
     (assigns
-      ? "((s,i)=>(" + assigns + "s,i.forEach(i=>s.add(i)),s))(new Set,"
+      ? "((s,i)=>(" +
+        assignsToString(assigns, "s") +
+        ",i.forEach(i=>s.add(i)),s))(new Set,"
       : "new Set(") +
       arrayRef.id +
       "=",
@@ -1529,6 +1546,22 @@
   return ref.id + "=" + accessPrevValue;
 }
 
+function assignsToString(assigns: string[], value: string) {
+  if (assigns.length > 100) {
+    return "($=>(" + assigns.join("=$,") + "=$))(" + value + ")";
+  }
+
+  return assigns.join("=") + "=" + value;
+}
+
+function addAssignment(ref: Reference, assign: string) {
+  if (ref.assigns) {
+    ref.assigns.push(assign);
+  } else {
+    ref.assigns = [assign];
+  }
+}
+
 function nextRefAccess(state: State) {
   return "_." + nextId(state);
 }