Tags API: New HTML writer implementation (#2268)

* feat: new tags api writer

.sizes.json

@@ -7,68 +7,68 @@
     {
       "name": "*",
       "total": {
-        "min": 13988,
-        "brotli": 5409
+        "min": 14514,
+        "brotli": 5587
       }
     },
     {
       "name": "counter",
       "user": {
         "min": 301,
-        "brotli": 211
+        "brotli": 210
       },
       "runtime": {
-        "min": 3670,
-        "brotli": 1543
+        "min": 3774,
+        "brotli": 1588
       },
       "total": {
-        "min": 3971,
-        "brotli": 1754
+        "min": 4075,
+        "brotli": 1798
       }
     },
     {
       "name": "counter 💧",
       "user": {
         "min": 219,
-        "brotli": 160
+        "brotli": 161
       },
       "runtime": {
-        "min": 2297,
-        "brotli": 1086
+        "min": 2555,
+        "brotli": 1162
       },
       "total": {
-        "min": 2516,
-        "brotli": 1246
+        "min": 2774,
+        "brotli": 1323
       }
     },
     {
       "name": "comments",
       "user": {
-        "min": 1071,
-        "brotli": 588
+        "min": 1066,
+        "brotli": 592
       },
       "runtime": {
-        "min": 7435,
-        "brotli": 3064
+        "min": 7677,
+        "brotli": 3176
       },
       "total": {
-        "min": 8506,
-        "brotli": 3652
+        "min": 8743,
+        "brotli": 3768
       }
     },
     {
       "name": "comments 💧",
       "user": {
-        "min": 934,
+        "min": 939,
         "brotli": 544
       },
       "runtime": {
-        "min": 7927,
-        "brotli": 3302
+        "min": 8178,
+        "brotli": 3379
       },
       "total": {
-        "min": 8861,
-        "brotli": 3846
+        "min": 9117,
+        "brotli": 3923
       }
     }
   ]

.sizes/comments.csr/entry.js

@@ -2,30 +2,30 @@ import {
   r as s,
   c as n,
   a,
-  i as o,
-  v as t,
-  b as l,
-  l as i,
+  o,
+  b as t,
+  v as l,
+  q as i,
   d as c,
   e as u,
   f as m,
-  g as d,
-  q as e,
+  i as d,
+  g as e,
   h as r,
   j as v,
-  o as $,
-  k as f,
+  k as $,
+  l as f,
   m as b,
   n as p,
-} from "./runtime-BUIbQm-R.js";
-const h = o(2, (s) => {
+} from "./runtime-BHYPJMig.js";
+const h = e(2, (s) => {
     const {
       _: { 6: n, 8: a },
     } = s;
     H(s[0], { comments: n.comments, path: a });
   }),
-  k = a(8, null, void 0, h),
-  K = a(6, null, void 0, h),
+  k = t(8, null, void 0, h),
+  K = t(6, null, void 0, h),
   T = s(
     "QURHKITf",
     n(
@@ -37,47 +37,47 @@ const h = o(2, (s) => {
       [K, k],
     ),
   ),
-  _ = o(2, (s) => {
+  _ = e(2, (s) => {
     const {
       _: { 2: n },
       7: a,
     } = s;
     U(s, `${n.path || "c"}-${a}`);
   }),
-  j = r(4),
-  E = v("ZcKJNKFe", (s) =>
-    $(
+  j = v(4),
+  E = a("ZcKJNKFe", (s) =>
+    o(
       s[2],
       "click",
       ((s) => {
         const { 9: n } = s;
         return function () {
-          f(s, F, !n);
+          i(s, F, !n);
         };
       })(s),
     ),
   ),
-  F = t(9, (s, n) => {
-    m(s[0], "hidden", !n), d(s[3], n ? "[-]" : "[+]"), e(s, E);
+  F = l(9, (s, n) => {
+    c(s[0], "hidden", !n), u(s[3], n ? "[-]" : "[+]"), m(s, E);
   }),
-  U = t(8, (s, n) => m(s[0], "id", n), u(k, 4)),
-  Z = t(7, null, _),
-  g = t(
+  U = l(8, (s, n) => c(s[0], "id", n), r(k, 4)),
+  Z = l(7, null, _),
+  g = l(
     6,
     (s, n) => {
-      d(s[1], n.text), j(s, n.comments ? T : null);
+      u(s[1], n.text), j(s, n.comments ? T : null);
     },
-    l([j, u(K, 4)]),
+    d([j, r(K, 4)]),
   ),
-  q = t(
+  q = l(
     5,
     (s, n) => {
       g(s, n[0]), Z(s, n[1]);
     },
-    l([g, Z]),
+    d([g, Z]),
   ),
-  x = a(2, null, void 0, _),
-  D = i(
+  x = t(2, null, void 0, _),
+  D = f(
     0,
     s(
       "$F_EaYZk",
@@ -93,11 +93,11 @@ const h = o(2, (s) => {
       ),
     ),
   ),
-  H = t(2, (s, n) => D(s, [n.comments]), l([D, c(x, 0)])),
+  H = l(2, (s, n) => D(s, [n.comments]), d([D, $(x, 0)])),
   I = "<ul></ul>",
   J = " b",
   N = function () {},
-  Q = t(2, (s, n) => H(s[0], n), p(0, H));
+  Q = l(2, (s, n) => H(s[0], n), p(0, H));
 b(
   n(
     `${I}`,
@@ -107,7 +107,7 @@ b(
     },
     void 0,
     void 0,
-    t(1, (s, n) => Q(s, n[0]), Q),
+    l(1, (s, n) => Q(s, n[0]), Q),
   ),
   "rUbTinTf",
 ).mount();

.sizes/comments.ssr/entry.js

@@ -2,29 +2,29 @@ import {
   r as s,
   c as n,
   a,
-  b as t,
-  o,
+  o as t,
+  b as o,
   v as l,
-  d as c,
-  e as i,
-  i as u,
-  f as m,
-  q as e,
+  q as c,
+  d as i,
+  e as u,
+  i as m,
+  f as e,
   g as d,
   h as r,
   j as f,
   k as p,
   l as v,
   m as $,
-} from "./runtime-C35w6ZnD.js";
-const b = m(2, (s) => {
+} from "./runtime-CcsLIbdY.js";
+const b = e(2, (s) => {
     const {
       _: { 6: n, 8: a },
     } = s;
     I(s[0], { comments: n.comments, path: a });
   }),
-  h = t(8, null, void 0, b),
-  k = t(6, null, void 0, b),
+  h = o(8, null, void 0, b),
+  k = o(6, null, void 0, b),
   K = s(
     "QURHKITf",
     n(
@@ -36,7 +36,7 @@ const b = m(2, (s) => {
       [k, h],
     ),
   ),
-  _ = m(2, (s) => {
+  _ = e(2, (s) => {
     const {
       _: { 2: n },
       7: a,
@@ -45,37 +45,37 @@ const b = m(2, (s) => {
   }),
   j = r(4),
   E = a("ZcKJNKFe", (s) =>
-    o(
+    t(
       s[2],
       "click",
       ((s) => {
         const { 9: n } = s;
         return function () {
-          e(s, F, !n);
+          c(s, F, !n);
         };
       })(s),
     ),
   ),
   F = l(9, (s, n) => {
-    c(s[0], "hidden", !n), i(s[3], n ? "[-]" : "[+]"), p(s, E);
+    i(s[0], "hidden", !n), u(s[3], n ? "[-]" : "[+]"), f(s, E);
   }),
-  Z = l(8, (s, n) => c(s[0], "id", n), d(h, 4)),
+  Z = l(8, (s, n) => i(s[0], "id", n), d(h, 4)),
   g = l(7, null, _),
   q = l(
     6,
     (s, n) => {
-      i(s[1], n.text), j(s, n.comments ? K : null);
+      u(s[1], n.text), j(s, n.comments ? K : null);
     },
-    u([j, d(k, 4)]),
+    m([j, d(k, 4)]),
   ),
   x = l(
     5,
     (s, n) => {
       q(s, n[0]), g(s, n[1]);
     },
-    u([q, g]),
+    m([q, g]),
   ),
-  D = t(2, null, void 0, _),
+  D = o(2, null, void 0, _),
   H = v(
     0,
     s(
@@ -92,7 +92,7 @@ const b = m(2, (s) => {
       ),
     ),
   ),
-  I = l(2, (s, n) => H(s, [n.comments]), u([H, f(D, 0)])),
+  I = l(2, (s, n) => H(s, [n.comments]), m([H, p(D, 0)])),
   J = "<ul></ul>",
   N = " b",
   Q = function () {};

.sizes/counter.csr/entry.js

@@ -1,30 +1,30 @@
 import {
-  c as s,
-  a as t,
-  v as a,
-  d as n,
+  r as s,
+  c as t,
+  o as a,
+  a as n,
   q as o,
-  r as c,
-  o as i,
+  v as c,
+  d as i,
   b as r,
-} from "./runtime-C853KoX8.js";
-const u = c("XBSGKvBc", (s) =>
-    i(
+} from "./runtime-BhCks4YK.js";
+const u = s("XBSGKvBc", (s) =>
+    a(
       s[0],
       "click",
       ((s) => {
         const { 2: t } = s;
         return function () {
-          r(s, m, t + 1);
+          o(s, m, t + 1);
         };
       })(s),
     ),
   ),
-  m = a(2, (s, t) => {
-    n(s[1], t), o(s, u);
+  m = c(2, (s, t) => {
+    i(s[1], t), r(s, u);
   });
-s(
-  t("<div><button> </button></div>", "D D m", (s) => {
+t(
+  n("<div><button> </button></div>", "D D m", (s) => {
     m(s, 0);
   }),
   "tPaZsVqd",

.sizes/counter.ssr/entry.js

@@ -6,7 +6,7 @@ import {
   d as o,
   a as r,
   i as t,
-} from "./runtime-BOMPXhWq.js";
+} from "./runtime-BP-z7kLQ.js";
 const i = s("XBSGKvBc", (s) =>
     a(
       s[0],

packages/marko/src/node_modules/@internal/components-entry/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 var warp10 = require("warp10");
-var w10NOOP = require("warp10/constants").NOOP;
+var w10ToJSON = require("../../../runtime/helpers/serialize-noop").___toJSON;
 var safeJSONRegExp = /<\/|\u2028|\u2029/g;
 var IGNORE_GLOBAL_TYPES = new Set(["undefined", "function", "symbol"]);
 var DEFAULT_RUNTIME_ID = "M";
@@ -136,7 +136,7 @@ function addComponentsFromContext(componentsContext, componentsToHydrate) {
       }
     }
 
-    if (typeof renderBody === "function" && renderBody.toJSON && renderBody.toJSON() === w10NOOP) {
+    if (typeof renderBody === "function" && renderBody.toJSON === w10ToJSON) {
       flags |= FLAG_HAS_RENDER_BODY;
       renderBody = input.renderBody = undefined;
     }

packages/marko/src/node_modules/@internal/components-registry/index-browser.js

@@ -449,7 +449,7 @@ function initServerRendered(renderedComponents, host) {
     }
   }
 
-  var prefix = renderedComponents.p || "";
+  var prefix = renderedComponents.p || "s";
   var meta = serverRenderedMeta[prefix];
   var isLast = renderedComponents.l;
 
@@ -470,8 +470,11 @@ function initServerRendered(renderedComponents, host) {
   indexServerComponentBoundaries(host, runtimeId);
   eventDelegation.___init(host);
 
-  if (renderedComponents.g) {
-    meta.___globals = renderedComponents.g;
+  if (!meta.___globals) {
+    meta.___globals = Object.assign({
+      runtimeId: runtimeId,
+      componentIdPrefix: prefix,
+    }, renderedComponents.g);
   }
 
   if (renderedComponents.t) {

packages/marko/src/runtime/components/ComponentDef.js

@@ -1,8 +1,8 @@
 "use strict";
 var complain = "MARKO_DEBUG" && require("complain");
 var extend = require("raptor-util/extend");
-var w10Noop = require("warp10/constants").NOOP;
 var componentUtil = require("@internal/components-util");
+var w10NOOP = require("../helpers/serialize-noop").___noop;
 var attachBubblingEvent = componentUtil.___attachBubblingEvent;
 var addDelegatedEventHandler =
   require("./event-delegation").___addDelegatedEventHandler;
@@ -98,7 +98,7 @@ ComponentDef.___deserialize = function (o, types, global, registry) {
   var componentProps = extra.w || EMPTY_OBJECT;
   var flags = extra.f;
   var isLegacy = flags & FLAG_IS_LEGACY;
-  var renderBody = flags & FLAG_HAS_RENDER_BODY ? w10Noop : extra.r;
+  var renderBody = flags & FLAG_HAS_RENDER_BODY ? w10NOOP : extra.r;
 
   var component =
     typeName /* legacy */ &&
@@ -107,6 +107,7 @@ ComponentDef.___deserialize = function (o, types, global, registry) {
   // Prevent newly created component from being queued for update since we area
   // just building it from the server info
   component.___updateQueued = true;
+  component.___global = global;
 
   if (isLegacy) {
     component.widgetConfig = componentProps;
@@ -156,8 +157,6 @@ ComponentDef.___deserialize = function (o, types, global, registry) {
     component.___setCustomEvents(customEvents, scope);
   }
 
-  component.___global = global;
-
   return {
     id: id,
     ___component: component,

packages/marko/src/runtime/helpers/dynamic-tag.js

@@ -1,14 +1,13 @@
 "use strict";
 
 var complain = "MARKO_DEBUG" && require("complain");
-var w10NOOP = require("warp10/constants").NOOP;
 var ComponentDef = require("../components/ComponentDef");
 var ComponentsContext = require("../components/ComponentsContext");
+var serializeNOOP = require("../helpers/serialize-noop");
+var w10NOOP = serializeNOOP.___noop;
+var w10ToJSON = serializeNOOP.___toJSON;
 var changeCase = require("./_change-case");
 var getComponentsContext = ComponentsContext.___getComponentsContext;
-var RENDER_BODY_TO_JSON = function () {
-  return w10NOOP;
-};
 
 var FLAG_WILL_RERENDER_IN_BROWSER = 1;
 // var FLAG_HAS_RENDER_BODY = 2;
@@ -80,7 +79,12 @@ module.exports = function dynamicTag(
       }
 
       if (dynamicTag.___runtimeCompat) {
-        renderer = dynamicTag.___runtimeCompat(renderer, render, args);
+        renderer = dynamicTag.___runtimeCompat(
+          renderer,
+          render,
+          args,
+          out.global,
+        );
       }
 
       if (renderer) {
@@ -113,7 +117,7 @@ module.exports = function dynamicTag(
               parentComponentDef.id + "-" + parentComponentDef.___nextKey(key),
               globalContext,
             );
-            render.toJSON = RENDER_BODY_TO_JSON;
+            render.toJSON = w10ToJSON;
 
             if (args) {
               render.apply(null, [out].concat(args, attrs));

packages/marko/src/runtime/helpers/serialize-noop.js

@@ -0,0 +1,5 @@
+var w10NOOP = require("warp10/constants").NOOP;
+exports.___noop = w10NOOP;
+exports.___toJSON = function () {
+  return w10NOOP;
+};

packages/marko/src/runtime/helpers/tags-compat/html-debug.js

@@ -1,3 +1,3 @@
 exports.s = require("./runtime-html.js").p(
-  require("@marko/runtime-tags/debug/html"),
+  require("@marko/runtime-tags/debug/html").compat,
 );

packages/marko/src/runtime/helpers/tags-compat/html-debug.mjs

@@ -1,3 +1,3 @@
-import * as api from "@marko/runtime-tags/debug/html";
+import { compat } from "@marko/runtime-tags/debug/html";
 import { p } from "./runtime-html.js";
-export const s = p(api);
+export const s = p(compat);

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

@@ -1 +1,3 @@
-exports.s = require("./runtime-html.js").p(require("@marko/runtime-tags/html"));
+exports.s = require("./runtime-html.js").p(
+  require("@marko/runtime-tags/html").compat,
+);

packages/marko/src/runtime/helpers/tags-compat/html.mjs

@@ -1,3 +1,3 @@
-import * as api from "@marko/runtime-tags/html";
+import { compat } from "@marko/runtime-tags/html";
 import { p } from "./runtime-html.js";
-export const s = p(api);
+export const s = p(compat);

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

@@ -15,12 +15,17 @@ exports.p = function (domCompat) {
     renderer,
     renderBody,
     args,
+    global,
   ) {
-    const tagsRenderer = domCompat.resolveRenderer(renderer || renderBody);
+    const tagsRenderer = domCompat.resolveRegistered(
+      renderer || renderBody,
+      global,
+    );
 
-    if (tagsRenderer) {
-      return (input, out) =>
-        TagsCompat({ i: args ? args : input, r: tagsRenderer }, out);
+    if (tagsRenderer && domCompat.isRenderer(tagsRenderer)) {
+      return (input, out) => {
+        return TagsCompat({ i: args ? args : input, r: tagsRenderer }, out);
+      };
     }
 
     return renderer;
@@ -29,17 +34,9 @@ exports.p = function (domCompat) {
   const TagsCompatId = "tags-compat";
   const TagsCompat = createRenderer(
     function (_, out, componentDef, component) {
-      const isHydrate =
-        ___getComponentsContext(out).___globalContext.___isHydrate;
       const input = Array.isArray(_.i) ? _.i : [_.i];
-      const tagsRenderer = domCompat.resolveRenderer(_.r);
-      const newNode = domCompat.render(
-        isHydrate,
-        out,
-        component,
-        tagsRenderer,
-        input,
-      );
+      const tagsRenderer = domCompat.resolveRegistered(_.r, global);
+      const newNode = domCompat.render(out, component, tagsRenderer, input);
 
       out.bf(out.___assignedKey, component, !newNode);
       if (newNode) {
@@ -111,8 +108,12 @@ exports.p = function (domCompat) {
               customEvents,
               scopeId,
             ) {
+              const global = this.___global;
               for (const customEvent of customEvents) {
-                customEvent[1] = domCompat.resolveRenderer(customEvent[1]);
+                customEvent[1] = domCompat.resolveRegistered(
+                  customEvent[1],
+                  global,
+                );
               }
 
               setCustomEvents.call(this, customEvents, scopeId);
@@ -141,19 +142,21 @@ exports.p = function (domCompat) {
     return newRenderer;
   }
 
-  domCompat.register("@marko/tags-compat-5-to-6", create5to6Renderer);
+  domCompat.registerRenderer(create5to6Renderer);
+  domCompat.init();
 
   function renderAndMorph(scope, renderer, renderBody, input) {
     const out = defaultCreateOut();
     let host = domCompat.getStartNode(scope);
     let rootNode = host.fragment;
     if (!rootNode) {
-      const component = (scope.marko5Component = ___componentLookup[scope.m5c]);
+      const component = (scope.___marko5Component =
+        ___componentLookup[scope.m5c]);
       rootNode = component.___rootNode;
       host = rootNode.startNode;
       domCompat.setScopeNodes(host, rootNode.endNode);
     }
-    const existingComponent = scope.marko5Component;
+    const existingComponent = scope.___marko5Component;
     const componentsContext = ___getComponentsContext(out);
     const globalComponentsContext = componentsContext.___globalContext;
     let customEvents;
@@ -191,7 +194,7 @@ exports.p = function (domCompat) {
       component.___rootNode = rootNode;
       component.___input = input[0];
       component.___customEvents = customEvents;
-      scope.marko5Component = component;
+      scope.___marko5Component = component;
     });
   }
 

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

@@ -6,37 +6,28 @@ const createRenderer = require("../../components/renderer");
 const defaultCreateOut = require("../../createOut");
 const dynamicTag5 = require("../dynamic-tag");
 
-exports.p = function (tagsAPI) {
-  const {
-    patchDynamicTag,
-    createRenderFn,
-    fork,
-    write,
-    serializerRegister,
-    writeScope,
-    nextScopeId,
-    getRegistryInfo,
-  } = tagsAPI;
-  const FN_TO_JSON = function () {
-    // TODO: this should instead return an object that contains getRegistryInfo
-    // then in the dom-compat, handle that object to lookup the function in the registry
-    // (we also need to do this for events)
-    return getRegistryInfo(this);
-  };
-
+exports.p = function (htmlCompat) {
   const isMarko6 = (fn) => !!fn.___isTagsAPI;
   const isMarko5 = (fn) => !fn.___isTagsAPI;
+  const writeHTML = (result) => {
+    const state = result.out._state;
+    const writer = state.writer;
+    state.events.emit("___toString", writer);
+    htmlCompat.writeScript(writer._scripts);
+    htmlCompat.write(writer._content);
+  };
 
   dynamicTag5.___runtimeCompat = function tagsToVdom(
     tagsRenderer,
     renderBody,
     args,
   ) {
-    if (tagsRenderer ? isMarko5(tagsRenderer) : isMarko5(renderBody))
+    if (tagsRenderer ? isMarko5(tagsRenderer) : isMarko5(renderBody)) {
       return tagsRenderer;
+    }
 
     if (!tagsRenderer && renderBody) {
-      renderBody.toJSON = FN_TO_JSON;
+      renderBody.toJSON = htmlCompat.toJSON;
     }
 
     return (input, out) =>
@@ -53,29 +44,9 @@ exports.p = function (tagsAPI) {
     function (_, out, componentDef, component) {
       const input = _.i;
       const tagsRenderer = _.r;
-      const renderFn = createRenderFn(tagsRenderer);
       const willRerender = componentDef._wrr;
-      const $global = out.global;
-      const streamData = ($global.streamData = $global.streamData || {});
-
-      if (willRerender) {
-        $global.serializedGlobals = $global.serializedGlobals || {};
-        $global.serializedGlobals.componentIdToScopeId = true;
-        $global.componentIdToScopeId = $global.componentIdToScopeId || {};
-        $global.componentIdToScopeId[component.id] = streamData.scopeId || 0;
-      }
-
       out.bf(out.___assignedKey, component, willRerender);
-      renderFn(
-        out.beginAsync(),
-        input,
-        {
-          ...$global,
-          componentIdToScopeId: undefined,
-          streamData: undefined,
-        },
-        streamData,
-      );
+      htmlCompat.render(tagsRenderer, willRerender, out, component, input);
       out.ef();
     },
     // eslint-disable-next-line no-constant-condition
@@ -92,7 +63,7 @@ exports.p = function (tagsAPI) {
     {},
   );
 
-  patchDynamicTag(
+  htmlCompat.patchDynamicTag(
     function getRenderer(tag) {
       const renderer = tag._ || tag.renderBody || tag;
       if (isMarko6(renderer)) return renderer;
@@ -108,8 +79,6 @@ exports.p = function (tagsAPI) {
         const out = defaultCreateOut();
         let customEvents;
 
-        out.global.streamData = tagsAPI.getStreamData();
-
         if (renderer5) {
           const normalizedInput = {};
 
@@ -122,7 +91,7 @@ exports.p = function (tagsAPI) {
                 (c === "-" ? "" : c.toLowerCase()) + key.slice(3),
                 value,
               ]);
-              value.toJSON = FN_TO_JSON;
+              value.toJSON = htmlCompat.toJSON;
             } else {
               normalizedInput[key] = input[key];
             }
@@ -136,9 +105,7 @@ exports.p = function (tagsAPI) {
         const component = componentsContext.___components[0];
         if (component) {
           component.___component.___customEvents = customEvents;
-          writeScope(nextScopeId(), {
-            m5c: component.id,
-          });
+          htmlCompat.writeSetScopeForComponent(component.id);
         }
 
         initComponentsTag({}, out);
@@ -147,7 +114,7 @@ exports.p = function (tagsAPI) {
         out.once("finish", (result) => {
           if (!async) {
             async = false;
-            write(result.toString());
+            writeHTML(result);
           }
         });
 
@@ -155,9 +122,7 @@ exports.p = function (tagsAPI) {
 
         if (async !== false) {
           async = true;
-          fork(out, (result) => {
-            write(result.toString());
-          });
+          htmlCompat.fork(out, writeHTML);
         }
       };
     },
@@ -167,11 +132,5 @@ exports.p = function (tagsAPI) {
     },
   );
 
-  return function serialized5to6(renderer, id) {
-    return serializerRegister(
-      "@marko/tags-compat-5-to-6",
-      renderer,
-      serializerRegister(id, () => {}),
-    );
-  };
+  return htmlCompat.registerRenderer;
 };

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

@@ -0,0 +1,3 @@
+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");

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

@@ -0,0 +1,2 @@
+export const DEFAULT_RUNTIME_ID = "M";
+export const DEFAULT_RENDER_ID = "_";

packages/runtime-tags/src/common/types.ts

@@ -33,7 +33,6 @@ export enum ResumeSymbol {
   PlaceholderStart = "",
   PlaceholderEnd = "",
   ReplacementId = "",
-  VarResume = "$h",
   VarReorderRuntime = "$r",
 }
 
@@ -97,8 +96,19 @@ export enum WalkRangeSize {
 }
 
 export type Accessor = string | number;
-export type Input = Record<string, unknown>;
-export type Context = Record<string, unknown>;
+export interface $Global {
+  [x: PropertyKey]: unknown;
+  signal?: AbortSignal;
+  cspNonce?: string;
+  renderId?: string;
+  runtimeId?: string;
+}
+export interface Input {
+  [x: PropertyKey]: unknown;
+}
+export interface TemplateInput extends Input {
+  $global?: $Global;
+}
 
 export interface Template {
   _: unknown;
@@ -115,7 +125,7 @@ export interface TemplateInstance {
   destroy(): void;
 }
 
-export type RenderResult = Promise<string> &
+export type RenderResult = PromiseLike<string> &
   AsyncIterable<string> & {
     toReadable(): ReadableStream;
   };

packages/runtime-tags/src/dom.ts

@@ -30,7 +30,6 @@ export {
   registerRenderer,
   registerBoundSignal,
   registerSubscriber,
-  scopeLookup,
 } from "./dom/resume";
 
 export {

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

@@ -1,3 +1,8 @@
+import {
+  RENDERER_REGISTER_ID,
+  SET_SCOPE_REGISTER_ID,
+} from "../common/compat-meta";
+import type { Scope } from "../dom";
 import { patchConditionals } from "./control-flow";
 import { prepare, queueEffect, runEffects } from "./queue";
 import {
@@ -5,13 +10,21 @@ import {
   createScopeWithRenderer,
   type Renderer,
 } from "./renderer";
-import { getRegisteredWithScope, register, scopeLookup } from "./resume";
+import { getRegisteredWithScope, register } from "./resume";
 import { CLEAN, DIRTY, MARK } from "./signals";
+const classIdToScope = new Map<string, Scope>();
 
 export const compat = {
-  register,
   patchConditionals,
   queueEffect,
+  init() {
+    register(SET_SCOPE_REGISTER_ID, (scope: Scope & { m5c: string }) => {
+      classIdToScope.set(scope.m5c, scope);
+    });
+  },
+  registerRenderer(fn: any) {
+    register(RENDERER_REGISTER_ID, fn);
+  },
   isOp(value: any) {
     return value === MARK || value === CLEAN || value === DIRTY;
   },
@@ -28,18 +41,24 @@ export const compat = {
   runComponentEffects(this: any) {
     runEffects(this.effects);
   },
-  resolveRenderer(renderer: any) {
-    if (renderer && typeof renderer === "object") {
-      if (Array.isArray(renderer)) {
-        const [registerId, scopeId] = renderer;
-        const scope = scopeLookup[scopeId];
-        return getRegisteredWithScope(registerId, scope);
-      }
-
-      if (renderer.___clone) {
-        return renderer;
-      }
+  resolveRegistered(
+    value: any,
+    {
+      runtimeId,
+      componentIdPrefix,
+    }: { runtimeId: string; componentIdPrefix: string },
+  ) {
+    if (Array.isArray(value) && typeof value[0] === "string") {
+      return getRegisteredWithScope(
+        value[0],
+        value.length === 2 &&
+          (window as any)[runtimeId]?.[
+            componentIdPrefix === "s" ? "_" : componentIdPrefix
+          ]?.___scopeLookup[value[1]],
+      );
     }
+
+    return value;
   },
   createRenderer(
     setup: Renderer["___setup"],
@@ -50,19 +69,19 @@ export const compat = {
     renderer.___clone = clone;
     return renderer;
   },
-  render(
-    isHydrate: boolean,
-    out: any,
-    component: any,
-    renderer: Renderer,
-    input: any,
-  ) {
+  render(out: any, component: any, renderer: Renderer, input: any) {
+    let scope: Scope = component.scope;
+
+    if (!scope) {
+      scope = classIdToScope.get(component.id)!;
+      if (scope) {
+        component.scope = scope;
+        classIdToScope.delete(component.id);
+      }
+    }
+
     const args = renderer.___args || noop;
     let existing = false;
-    let scope: any = isHydrate
-      ? (component.scope =
-          scopeLookup[(out.global.componentIdToScopeId as any)[component.id]])
-      : component.scope;
 
     component.effects = prepare(() => {
       if (!scope) {

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

@@ -3,10 +3,156 @@ import type { Renderer } from "./renderer";
 import { bindRenderer } from "./scope";
 import type { IntersectionSignal, SignalOp, ValueSignal } from "./signals";
 
+interface Renders {
+  (renderId: string): Render | RenderData;
+  [renderId: string]: Render | RenderData;
+}
+interface RenderData {
+  // RuntimeID + ResumeID
+  i: string;
+  // Marked nodes to visit
+  v: Comment[];
+  // Effect calls.
+  e?: (string | number)[];
+  // Scopes
+  s?: ((ctx: object) => Record<number | string, Scope>)[];
+  // Indicates that the render is done.
+  d?: 1;
+  w(): void;
+}
 type RegisteredFn<S extends Scope = Scope> = (scope: S) => void;
 
 const registeredValues: Record<string, unknown> = {};
-const doc = document;
+
+class Render implements RenderData {
+  declare i: string;
+  declare v: Comment[];
+  declare e?: (string | number)[];
+  declare s?: ((ctx: object) => Record<number | string, Scope>)[];
+  private declare ___currentScopeId: number;
+  private declare ___data: RenderData;
+  private declare ___renders: Renders;
+  private declare ___runtimeId: string;
+  private declare ___renderId: string;
+  private ___scopeStack: number[] = [];
+  private ___scopeLookup: Record<number | string, Scope> = {};
+  private ___serializeContext: Record<string, unknown> = {
+    _: registeredValues,
+  };
+  constructor(renders: Renders, runtimeId: string, renderId: string) {
+    this.___renders = renders;
+    this.___runtimeId = runtimeId;
+    this.___renderId = renderId;
+    this.___data = renders[renderId] as RenderData;
+    this.___resume();
+  }
+  w() {
+    this.___data.w();
+    this.___resume();
+  }
+  ___resume() {
+    const data = this.___data;
+    const serializeContext = this.___serializeContext;
+    const scopeLookup = this.___scopeLookup;
+    const visits = data.v;
+
+    if (visits.length) {
+      const commentPrefix = data.i;
+      const commentPrefixLen = commentPrefix.length;
+      data.v = [];
+
+      for (const visit of visits) {
+        const commentText = visit.data!;
+        const token = commentText[commentPrefixLen];
+        const scopeId = parseInt(commentText.slice(commentPrefixLen + 1));
+        const scope = (scopeLookup[scopeId] ??= {} as Scope);
+        const data = commentText.slice(commentText.indexOf(" ") + 1);
+
+        if (token === ResumeSymbol.Node) {
+          scope[data] = visit.previousSibling;
+        } else if (token === ResumeSymbol.SectionStart) {
+          this.___scopeStack.push(this.___currentScopeId);
+          this.___currentScopeId = scopeId;
+          scope.___startNode = visit;
+        } else if (token === ResumeSymbol.SectionEnd) {
+          scope[data] = visit;
+          if (scopeId < this.___currentScopeId) {
+            const currScope = scopeLookup[this.___currentScopeId];
+            const currParent = visit.parentNode!;
+            const startNode = currScope.___startNode as Node;
+            if (currParent !== startNode.parentNode) {
+              currParent.prepend(startNode);
+            }
+            currScope.___endNode = visit.previousSibling!;
+            this.___currentScopeId = this.___scopeStack.pop()!;
+          }
+        } else if (token === ResumeSymbol.SectionSingleNodesEnd) {
+          scope[
+            MARKO_DEBUG ? data.slice(0, data.indexOf(" ")) : parseInt(data)
+          ] = visit;
+          // https://jsben.ch/dR7uk
+          const childScopeIds = JSON.parse(
+            "[" + data.slice(data.indexOf(" ") + 1) + "]",
+          );
+          let curNode: ChildNode = visit;
+          for (let i = childScopeIds.length - 1; i >= 0; i--) {
+            const childScope = (scopeLookup[childScopeIds[i]] ??= {} as Scope);
+            // TODO: consider whether the single node optimization
+            // should only apply to elements which means could
+            // use previousElementSibling instead of a while loop
+            while (
+              (curNode = curNode.previousSibling!).nodeType ===
+              8 /* Node.COMMENT_NODE */
+            );
+            // TODO: consider only setting ___startNode?
+            childScope.___startNode = childScope.___endNode = curNode;
+          }
+        }
+      }
+    }
+
+    const serializedScopes = data.s;
+    if (serializedScopes) {
+      data.s = [];
+
+      for (const deserializeScopes of serializedScopes) {
+        const scopes = deserializeScopes(serializeContext);
+        let { $global } = scopeLookup;
+
+        if (!$global) {
+          scopeLookup.$global = $global = scopes.$ || {};
+          $global.runtimeId = this.___runtimeId;
+          $global.renderId = this.___renderId;
+        }
+
+        for (const scopeId in scopes) {
+          if (scopeId !== "$") {
+            const scope = scopes[scopeId];
+            const prevScope = scopeLookup[scopeId];
+            scope.$global = $global;
+            if (prevScope !== scope) {
+              scopeLookup[scopeId] = Object.assign(scope, prevScope) as Scope;
+            }
+          }
+        }
+      }
+    }
+
+    const effects = data.e;
+    if (effects) {
+      data.e = [];
+      for (let i = 0; i < effects.length; i += 2) {
+        (registeredValues[effects[i + 1] as string] as RegisteredFn)(
+          scopeLookup[effects[i] as number],
+        );
+      }
+    }
+
+    if (data.d) {
+      delete this.___renders[this.___renderId];
+    }
+  }
+}
 
 export function register<T>(id: string, obj: T): T {
   registeredValues[id] = obj;
@@ -42,133 +188,47 @@ export function getRegisteredWithScope(id: string, scope?: Scope) {
   return val;
 }
 
-export const scopeLookup = {} as Record<number | string, Scope>;
-
 export function init(runtimeId = ResumeSymbol.DefaultRuntimeId) {
-  const runtimeLength = runtimeId.length;
-  const resumeVar = runtimeId + ResumeSymbol.VarResume;
-  const initialHydration = (window as any)[resumeVar];
-
   if (MARKO_DEBUG) {
     if (!runtimeId.match(/^[_$a-z][_$a-z0-9]*$/i)) {
       throw new Error(
         `Invalid runtimeId: "${runtimeId}". The runtimeId must be a valid JavaScript identifier.`,
       );
     }
-
-    if (initialHydration && !Array.isArray(initialHydration)) {
-      throw new Error(
-        "Marko tried to initialize multiple times. It could be that there are multiple instances of Marko running on the page.",
-      );
-    }
   }
 
-  const walker = doc.createTreeWalker(doc, 128 /** NodeFilter.SHOW_COMMENT */);
-  let currentScopeId: number;
-  let currentNode: Node & ChildNode;
-  // const scopeLookup: Record<number, Scope> = {};
-  const getScope = (id: number) =>
-    scopeLookup[id] ?? (scopeLookup[id] = {} as Scope);
-  const stack: number[] = [];
-  const fakeArray = { push: resume };
-  const serializeContext: Record<string, unknown> = { _: registeredValues };
+  const resumeRender = ((renderId: string) =>
+    (resumeRender[renderId] = renders![renderId] =
+      new Render(renders!, runtimeId, renderId))) as Renders;
+  let renders: Renders | undefined;
 
-  if (initialHydration) {
-    for (let i = 0; i < initialHydration.length; i += 2) {
-      resume(initialHydration[i], initialHydration[i + 1]);
-    }
+  if ((window as any)[runtimeId] as Renders | undefined) {
+    setRenders((window as any)[runtimeId] as Renders);
   } else {
-    (window as any)[resumeVar] = fakeArray;
+    Object.defineProperty(window, runtimeId, {
+      configurable: true,
+      set: setRenders,
+    });
   }
 
-  function resume(
-    scopesFn: (ctx: typeof serializeContext) => Record<string, Scope> | null,
-    calls: Array<string | number>,
-  ) {
-    // TODO: Can be refactored/removed when adding runtimeId and componentIdPrefix
-    /**
-     * Necessary for injecting content into an existing document (e.g. microframe)
-     */
-    if (doc.readyState !== "loading") {
-      walker.currentNode = doc;
-    }
-
-    const scopes = scopesFn(serializeContext);
-    if (scopes) {
-      scopeLookup.$global ||= scopes.$global || {};
-
-      /**
-       * Loop over all the new hydration scopes and see if a previous walk
-       * had to create a dummy scope to store Nodes of interest.
-       * If so merge them and set/replace the scope in the scopeLookup.
-       */
-      for (const scopeIdAsString in scopes) {
-        if (scopeIdAsString === "$global") continue;
-        const scopeId = parseInt(scopeIdAsString);
-        const scope = scopes[scopeId];
-        const storedScope = scopeLookup[scopeId];
-        scope.$global = scopes.$global;
-        if (storedScope !== scope) {
-          scopeLookup[scopeId] = Object.assign(scope, storedScope) as Scope;
-        }
+  function setRenders(v: Renders) {
+    if (MARKO_DEBUG) {
+      if (renders) {
+        throw new Error(
+          "Marko tried to initialize multiple times. It could be that there are multiple instances of Marko running on the page.",
+        );
       }
     }
 
-    while ((currentNode = walker.nextNode() as ChildNode)) {
-      const nodeValue = currentNode.nodeValue!;
-      if (nodeValue.startsWith(runtimeId)) {
-        const token = nodeValue[runtimeLength];
-        const scopeId = parseInt(nodeValue.slice(runtimeLength + 1));
-        const scope = getScope(scopeId);
-        const data = nodeValue.slice(nodeValue.indexOf(" ") + 1);
-
-        if (token === ResumeSymbol.Node) {
-          scope[data] = currentNode.previousSibling;
-        } else if (token === ResumeSymbol.SectionStart) {
-          stack.push(currentScopeId);
-          currentScopeId = scopeId;
-          scope.___startNode = currentNode;
-        } else if (token === ResumeSymbol.SectionEnd) {
-          scope[data] = currentNode;
-          if (scopeId < currentScopeId) {
-            const currScope = scopeLookup[currentScopeId];
-            const currParent = currentNode.parentNode!;
-            const startNode = currScope.___startNode as Node;
-            if (currParent !== startNode.parentNode) {
-              currParent.prepend(startNode);
-            }
-            currScope.___endNode = currentNode.previousSibling!;
-            currentScopeId = stack.pop()!;
-          }
-        } else if (token === ResumeSymbol.SectionSingleNodesEnd) {
-          scope[
-            MARKO_DEBUG ? data.slice(0, data.indexOf(" ")) : parseInt(data)
-          ] = currentNode;
-          // https://jsben.ch/dR7uk
-          const childScopeIds = JSON.parse(
-            "[" + data.slice(data.indexOf(" ") + 1) + "]",
-          );
-          for (let i = childScopeIds.length - 1; i >= 0; i--) {
-            const childScope = getScope(childScopeIds[i]);
-            // TODO: consider whether the single node optimization
-            // should only apply to elements which means could
-            // use previousElementSibling instead of a while loop
-            while (
-              (currentNode = currentNode.previousSibling!).nodeType ===
-              8 /* Node.COMMENT_NODE */
-            );
-            // TODO: consider only setting ___startNode?
-            childScope.___startNode = childScope.___endNode = currentNode;
-          }
-        }
-      }
+    renders = v;
+    for (const renderId in v) {
+      resumeRender(renderId);
     }
 
-    for (let i = 0; i < calls.length; i += 2) {
-      (registeredValues[calls[i + 1] as string] as RegisteredFn)(
-        scopeLookup[calls[i] as number]!,
-      );
-    }
+    Object.defineProperty(window, runtimeId, {
+      configurable: true,
+      value: resumeRender,
+    });
   }
 }
 

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

@@ -129,7 +129,7 @@ export function intersection(
   };
 }
 
-const defaultGetOwnerScope = (scope: Scope) => scope._!;
+const defaultGetOwnerScope = (scope: Scope) => scope._ as Scope;
 
 export function closure<T>(
   ownerValueAccessor: Accessor | ((scope: Scope) => Accessor),
@@ -289,9 +289,11 @@ export const inMany = (
   }
 };
 
-let tagId = 0;
-export function nextTagId() {
-  return "c" + tagId++;
+const tagIdsByGlobal = new WeakMap<Scope["___global"], number>();
+export function nextTagId({ $global }: Scope) {
+  const id = tagIdsByGlobal.get($global) || 0;
+  tagIdsByGlobal.set($global, id + 1);
+  return "c" + $global.runtimeId + $global.renderId + id.toString(36);
 }
 
 export function inChild(childAccessor: Accessor, signal: ValueSignal) {

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

@@ -1,3 +1,4 @@
+import { DEFAULT_RUNTIME_ID, DEFAULT_RENDER_ID } from "../common/meta";
 import type { Template, Input, TemplateInstance, Scope } from "../common/types";
 import { prepare, runEffects, runSync } from "./queue";
 import { type Renderer, initRenderer } from "./renderer";
@@ -16,12 +17,26 @@ export class ClientTemplate implements Template {
   }
 
   mount(
-    templateInput: Input & { $global?: Record<string, unknown> } = {},
+    input: Input & { $global?: Record<string, unknown> } = {},
     reference: ParentNode & Node,
     position?: InsertPosition,
   ): TemplateInstance {
     let scope!: Scope, dom!: Node;
-    const { $global = {}, ...input } = templateInput;
+    let { $global } = input;
+    if ($global) {
+      ({ $global, ...input } = input);
+      $global = {
+        runtimeId: DEFAULT_RUNTIME_ID,
+        renderId: DEFAULT_RENDER_ID,
+        ...$global,
+      };
+    } else {
+      $global = {
+        runtimeId: DEFAULT_RUNTIME_ID,
+        renderId: DEFAULT_RENDER_ID,
+      };
+    }
+
     const args = this._.___args;
     const effects = prepare(() => {
       scope = createScope($global);

packages/runtime-tags/src/html.ts

@@ -6,12 +6,10 @@ export {
   dynamicTagInput,
   dynamicTagArgs,
   createRenderer,
-  patchDynamicTag,
 } from "./html/dynamic-tag";
 
 export {
   write,
-  maybeFlush,
   fork,
   tryPlaceholder,
   tryCatch,
@@ -23,14 +21,13 @@ export {
   markResumeScopeStart,
   markResumeControlEnd,
   markResumeControlSingleNodeEnd,
-  createRenderFn,
   peekNextScope,
   ensureScopeWithId,
   getScopeById,
   getStreamData,
   register,
-  serializerRegister,
-  getRegistryInfo,
 } from "./html/writer";
 
 export { createTemplate } from "./html/template";
+
+export { compat } from "./html/compat";

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

@@ -85,7 +85,7 @@ function attrAssignment(val: string) {
 }
 
 const unsafeAttrChars = /["'>\s]/g;
-function escapeAttrValue(str: string) {
+export function escapeAttrValue(str: string) {
   if (unsafeAttrChars.test(str)) {
     const c = str[unsafeAttrChars.lastIndex - 1];
     unsafeAttrChars.lastIndex = 0;

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

@@ -0,0 +1,112 @@
+import {
+  RENDERER_REGISTER_ID,
+  SET_SCOPE_REGISTER_ID,
+} from "../common/compat-meta";
+import { DEFAULT_RUNTIME_ID, DEFAULT_RENDER_ID } from "../common/meta";
+import type { Renderer, Scope } from "../common/types";
+import { patchDynamicTag } from "./dynamic-tag";
+import { getRegistered, register } from "./serializer";
+import {
+  Chunk,
+  Boundary,
+  State,
+  prepareChunk,
+  fork,
+  getChunk,
+  getScopeId,
+  nextScopeId,
+  peekNextScopeId,
+  write,
+  writeEffect,
+  writeScope,
+  writeScript,
+} from "./writer";
+
+const K_TAGS_API_STATE = Symbol();
+const COMPAT_REGISTRY = new WeakMap<
+  WeakKey,
+  [registryId: string, scopeId: unknown]
+>();
+
+export const compat = {
+  fork,
+  write,
+  writeScript,
+  nextScopeId,
+  patchDynamicTag,
+  writeSetScopeForComponent(m5c: string) {
+    const scopeId = nextScopeId();
+    writeScope(scopeId, { m5c });
+    writeEffect(scopeId, SET_SCOPE_REGISTER_ID);
+  },
+  toJSON(this: WeakKey) {
+    let compatRegistered = COMPAT_REGISTRY.get(this);
+    if (!compatRegistered) {
+      const registered = getRegistered(this);
+      if (registered) {
+        const scopeId = getScopeId(registered.scope as Scope);
+        if (scopeId !== undefined) {
+          writeScope(scopeId, {});
+        }
+        COMPAT_REGISTRY.set(
+          this,
+          (compatRegistered = [registered.id, scopeId]),
+        );
+      }
+    }
+
+    return compatRegistered;
+  },
+  render(
+    renderer: Renderer,
+    willRerender: boolean,
+    classAPIOut: any,
+    component: any,
+    input: any,
+  ) {
+    const $global = classAPIOut.global;
+    let state: State | undefined = ($global[K_TAGS_API_STATE] ||=
+      getChunk()?.boundary.state);
+    if (!state) {
+      $global.runtimeId ||= DEFAULT_RUNTIME_ID;
+      $global.renderId ||= $global.componentIdPrefix || DEFAULT_RENDER_ID;
+      $global[K_TAGS_API_STATE] = state = new State($global);
+    }
+
+    const boundary = new Boundary(state);
+    let head = new Chunk(boundary, null);
+    head.render(() => {
+      if (willRerender) {
+        const scopeId = peekNextScopeId();
+        writeScope(scopeId, { m5c: component.id });
+        writeEffect(scopeId, SET_SCOPE_REGISTER_ID);
+      }
+
+      renderer(input);
+    });
+
+    const asyncOut = classAPIOut.beginAsync();
+    (boundary.onNext = () => {
+      if (boundary.done) {
+        if (boundary.signal.aborted) {
+          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 = "";
+          });
+        }
+      }
+    })();
+  },
+  registerRenderer(renderer: any, id: string) {
+    return register(
+      RENDERER_REGISTER_ID,
+      renderer,
+      register(id, () => {}),
+    );
+  },
+};

packages/runtime-tags/src/html/dynamic-tag.ts

@@ -99,7 +99,10 @@ export function dynamicTagArgs(
 
 let getDynamicRenderer = (
   tag: unknown | string | Renderer | RenderBodyObject | Template,
-) => (tag as Template)._ || (tag as RenderBodyObject).renderBody || tag;
+) =>
+  (tag as { _?: Renderer })._ ||
+  (tag as { renderBody?: Renderer }).renderBody ||
+  (tag as Renderer);
 export let createRenderer = (fn: Renderer) => fn;
 
 export function patchDynamicTag(

packages/runtime-tags/src/html/inlined-runtimes.ts

@@ -0,0 +1,106 @@
+export const WALKER_RUNTIME_CODE = MARKO_DEBUG
+  ? `((runtimeId) =>
+(self[runtimeId] =
+  self[runtimeId] ||
+  ((renderId) => {
+    let id,
+      markers = {},
+      visits = [],
+      doc = document,
+      walker = doc.createTreeWalker(
+        doc,
+        129,
+      ) /* NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_ELEMENT */,
+      op = (self[runtimeId][renderId] = {
+        i: (renderId = runtimeId + renderId),
+        d: doc,
+        l: markers,
+        v: visits,
+        x() {},
+        w(node) {
+          while ((node = walker.nextNode())) {
+            this.x(
+              (op =
+                (op = node.data) &&
+                !op.indexOf(renderId) &&
+                ((markers[(id = op.slice(prefix + 1))] = node), op[prefix])),
+              id,
+              node,
+            );
+
+            if (op > "#") {
+              visits.push(node);
+            }
+          }
+        },
+      }),
+      prefix = renderId.length;
+  })))`
+  : `(e=>self[e]=self[e]||(l=>{let t,d={},f=[],s=document,a=s.createTreeWalker(s,129),r=self[e][l]={i:l=e+l,d:s,l:d,v:f,x(){},w(e){for(;e=a.nextNode();)this.x(r=(r=e.data)&&!r.indexOf(l)&&(d[t=r.slice(x+1)]=e,r[x]),t,e),r>"#"&&f.push(e)}},x=l.length}))`;
+export const REORDER_RUNTIME_CODE = MARKO_DEBUG
+  ? `((runtime) => {
+let insertOne,
+  placeholder,
+  nextSibling,
+  previousSibling,
+  placeholders = {},
+  replace = (marker, container) => {
+    marker.replaceWith(...container.childNodes);
+    container.remove();
+  };
+runtime.d.head.append(
+  runtime.d.querySelector("style[" + runtime.i + "]") || "",
+);
+runtime.j = {};
+runtime.x = (op, id, node, start, placeholderCallback) => {
+  // "node" and "end" are all closed over and can't be repurposed. "start" is too but only in the new placeholder case
+
+  if (op == "#") {
+    (placeholders[id] = placeholder).i++;
+  } else if (node == nextSibling) {
+    insertOne();
+  }
+
+  if (node.tagName == "T" && (id = node.getAttribute(runtime.i))) {
+    start = runtime.l["^" + id];
+
+    if (start) {
+      placeholder = placeholders[id] = {
+        i: 0,
+        c(end = runtime.l[id] || previousSibling || node) {
+          while (end.parentNode !== start.parentNode) {
+            end = end.parentNode;
+          }
+
+          for (
+            ;
+            end != nextSibling;
+            (nextSibling = start.nextSibling).remove()
+          );
+          replace(start, node);
+        },
+      };
+    } else {
+      insertOne = () => {
+        previousSibling = node.previousSibling;
+        replace(runtime.l[id], node);
+        if (!--start.i) {
+          start.c();
+        }
+      };
+
+      // repurpose "start" to hold this placeholder
+      start = placeholder = placeholders[id];
+      nextSibling = node.nextElementSibling || insertOne();
+    }
+
+    // repurpose "op" for callbacks ...carefully
+    placeholderCallback = placeholder.c;
+    (op = runtime.j[id]) &&
+      (placeholder.c = () => placeholderCallback() + op());
+
+    if (node.attributes.c) placeholder.c();
+  }
+};
+})`
+  : `(e=>{let t,i,r,l,o={},a=(e,t)=>{e.replaceWith(...t.childNodes),t.remove()};e.d.head.append(e.d.querySelector("style["+e.i+"]")||""),e.j={},e.x=(d,n,c,p,b)=>{"#"==d?(o[n]=i).i++:c==r&&t(),"T"==c.tagName&&(n=c.getAttribute(e.i))&&((p=e.l["^"+n])?i=o[n]={i:0,c(t=e.l[n]||l||c){for(;t.parentNode!==p.parentNode;)t=t.parentNode;for(;t!=r;(r=p.nextSibling).remove());a(p,c)}}:(t=()=>{l=c.previousSibling,a(e.l[n],c),--p.i||p.c()},p=i=o[n],r=c.nextElementSibling||t()),b=i.c,(d=e.j[n])&&(i.c=()=>b()+d()),c.attributes.c&&i.c())}})`;

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

@@ -1,53 +0,0 @@
-/* tslint:disable */
-
-import type { CommentWalker } from "../common/types";
-
-export default function (
-  id: string,
-  doc: Document,
-  walker: TreeWalker,
-  node: Comment,
-  replacementNode: Node,
-  targetParent: ParentNode & Node,
-  targetNode: Node | null | undefined,
-  refNode: Node | null | undefined,
-  nextNode: Node | null | undefined,
-  runtimePrefix: string,
-) {
-  runtimePrefix = "RUNTIME_ID$";
-  id = runtimePrefix + id;
-  doc = document;
-  walker =
-    (doc as any)[runtimePrefix + "w"] ||
-    ((doc as any)[runtimePrefix + "w"] = doc.createTreeWalker(
-      doc,
-      128 /** NodeFilter.SHOW_COMMENT */,
-    ) as CommentWalker);
-  while ((node = walker.nextNode() as Comment)) {
-    if (node.data.indexOf(runtimePrefix) === 0) {
-      (walker as any)[node.data] = node;
-    }
-  }
-
-  replacementNode = doc.getElementById(id)!;
-  targetNode = (walker as any)[id];
-  targetParent = targetNode!.parentNode!;
-
-  while ((refNode = replacementNode.firstChild)) {
-    targetParent.insertBefore(refNode, targetNode!);
-  }
-
-  nextNode = replacementNode.parentNode!;
-  nextNode.removeChild(replacementNode.nextSibling!);
-  nextNode.removeChild(replacementNode);
-
-  refNode = (walker as any)[id + "/"];
-
-  while (
-    targetNode &&
-    ((nextNode = targetNode!.nextSibling),
-    targetParent.removeChild(targetNode!) !== refNode)
-  ) {
-    targetNode = nextNode;
-  }
-}

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

@@ -1,3 +1,5 @@
+import type { Boundary } from "./writer";
+
 const { hasOwnProperty } = {};
 const Generator = (function* () {})().constructor;
 const AsyncGenerator = (async function* () {})().constructor;
@@ -15,11 +17,6 @@ type TypedArray =
   | Float64Array;
 
 const REGISTRY = new WeakMap<WeakKey, Registered>();
-const REF_START_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$"; // Avoids chars that cannot start a property name and reserves _ for user refs.
-const REF_START_CHARS_LEN = REF_START_CHARS.length;
-const REF_CHARS =
-  "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789$_";
-const REF_CHARS_LEN = REF_CHARS.length;
 const KNOWN_SYMBOLS = (() => {
   const KNOWN_SYMBOLS = new Map<symbol, string>();
   for (const name of Object.getOwnPropertyNames(Symbol)) {
@@ -267,34 +264,11 @@ const KNOWN_OBJECTS = new Map<object, string>([
 class State {
   ids = 0;
   flush = 0;
+  flushed = false;
   buf = [] as string[];
   refs = new WeakMap<WeakKey, Reference>();
   assigned = new Set<Reference>();
-  promises: Promises | null = null;
-}
-
-class Promises {
-  public remaining = 0;
-  public next: Promise<void> | null = null;
-  #resolve: (() => void) | null = null;
-  start() {
-    if (++this.remaining === 1) {
-      this.#next();
-    }
-  }
-  end() {
-    this.#resolve?.();
-
-    if (--this.remaining > 0) {
-      this.#next();
-    } else {
-      this.#resolve = null;
-      this.next = null;
-    }
-  }
-  #next() {
-    this.next = new Promise((resolve) => (this.#resolve = resolve));
-  }
+  boundary: Boundary | undefined = undefined;
 }
 
 class Reference {
@@ -302,7 +276,7 @@ class Reference {
   public assigns = "";
   constructor(
     public parent: Reference | null,
-    public accessor: string | number | null,
+    public accessor: string | null,
     public flush: number,
     public pos: number | null = null,
     public id: string | null = null,
@@ -317,36 +291,18 @@ class Reference {
 
 export class Serializer {
   #state = new State();
-  get pending() {
-    return this.#state.buf.length
-      ? this.#consumePending()
-      : this.#state.promises?.next?.then(() => this.#consumePending());
-  }
-  stringify(val: unknown) {
+  stringify(val: unknown, boundary: Boundary) {
     try {
+      this.#state.flushed = false;
+      this.#state.boundary = boundary;
       return writeRoot(this.#state, val);
     } finally {
       this.#flush();
     }
   }
 
-  #consumePending() {
-    const state = this.#state;
-    let result = state.buf[0];
-
-    for (let i = 1; i < state.buf.length; i++) {
-      result += state.buf[i];
-    }
-
-    if (state.assigned.size) {
-      for (const valueRef of state.assigned) {
-        result += ";" + valueRef.assigns + (valueRef.init || valueRef.id);
-        valueRef.init = "";
-      }
-    }
-
-    this.#flush();
-    return "_=>{" + result + "}";
+  get flushed() {
+    return this.#state.flushed;
   }
 
   #flush() {
@@ -380,41 +336,60 @@ export function stringify(val: unknown) {
 }
 
 function writeRoot(state: State, root: unknown) {
+  const { buf, assigned } = state;
+  const hadBuf = buf.length !== 0;
+  let result = "";
+  if (hadBuf) {
+    buf.push(",");
+  }
+
   if (writeProp(state, root, null, "")) {
     const rootRef = state.refs.get(root as object);
-    const { buf, assigned } = state;
-    if (rootRef) ensureId(state, rootRef);
-    let returnsRoot = true;
-    let result = buf[0];
-
-    for (let i = 1; i < buf.length; i++) {
-      result += buf[i];
+    if (rootRef) {
+      ensureId(state, rootRef);
     }
 
     if (assigned.size) {
       if (assigned.delete(rootRef!)) {
         assigned.add(rootRef!);
+        writeAssigned(state);
       } else {
-        returnsRoot = false;
-      }
-
-      for (const valueRef of assigned) {
-        result += "," + valueRef.assigns + (valueRef.init || valueRef.id);
-        valueRef.init = "";
+        writeAssigned(state);
+        buf.push("," + rootRef!.id!);
       }
     }
 
-    return "_=>(" + (returnsRoot ? result : result + "," + rootRef!.id!) + ")";
+    result = "(";
+    buf.push(")");
+  } else {
+    if (hadBuf) {
+      buf.pop();
+      writeAssigned(state);
+    }
+
+    result = "{";
+    buf.push("}");
   }
 
-  return "_=>{}";
+  for (const chunk of buf) {
+    result += chunk;
+  }
+
+  return "_=>" + result;
+}
+
+function writeAssigned(state: State) {
+  for (const valueRef of state.assigned) {
+    state.buf.push("," + valueRef.assigns + (valueRef.init || valueRef.id));
+    valueRef.init = "";
+  }
 }
 
 function writeProp(
   state: State,
   val: unknown,
   parent: Reference | null,
-  accessor: string | number,
+  accessor: string,
 ): boolean {
   switch (typeof val) {
     case "string":
@@ -448,7 +423,7 @@ function writeReferenceOr(
   write: (state: State, val: any, ref: Reference) => boolean,
   val: WeakKey,
   parent: Reference | null,
-  accessor: string | number,
+  accessor: string,
 ) {
   let ref = state.refs.get(val);
   if (ref) {
@@ -488,7 +463,7 @@ function writeRegistered(
   state: State,
   val: WeakKey,
   parent: Reference | null,
-  accessor: string | number,
+  accessor: string,
   { access, scope }: Registered,
 ) {
   if (scope) {
@@ -549,7 +524,7 @@ function writeFunction(
   // eslint-disable-next-line @typescript-eslint/ban-types
   val: Function,
   parent: Reference | null,
-  accessor: string | number,
+  accessor: string,
 ) {
   const wellKnownFunction = KNOWN_FUNCTIONS.get(val);
   if (wellKnownFunction) {
@@ -564,7 +539,7 @@ function writeSymbol(
   state: State,
   val: symbol,
   parent: Reference | null,
-  accessor: string | number,
+  accessor: string,
 ) {
   const wellKnownSymbol = KNOWN_SYMBOLS.get(val);
   if (wellKnownSymbol) {
@@ -599,7 +574,7 @@ function writeObject(
   state: State,
   val: object | null,
   parent: Reference | null,
-  accessor: string | number,
+  accessor: string,
 ) {
   if (val === null) return writeNull(state);
 
@@ -689,11 +664,11 @@ function writePlainObject(state: State, val: object, ref: Reference) {
 
 function writeArray(state: State, val: unknown[], ref: Reference) {
   state.buf.push("[");
-  writeProp(state, val[0], ref, 0);
+  writeProp(state, val[0], ref, "0");
 
   for (let i = 1; i < val.length; i++) {
     state.buf.push(",");
-    writeProp(state, val[i], ref, i);
+    writeProp(state, val[i], ref, "" + i);
   }
 
   state.buf.push("]");
@@ -711,14 +686,17 @@ function writeRegExp(state: State, val: RegExp) {
 }
 
 function writePromise(state: State, val: Promise<unknown>, ref: Reference) {
+  const { boundary } = state;
+  if (!boundary) return false;
+
   const pId = nextRefAccess(state);
   const pRef = new Reference(ref, null, state.flush, null, pId);
   state.buf.push("new Promise((f,r)=>" + pId + "={f,r})");
   val.then(
-    (v) => writeAsyncCall(state, pRef, "f", v, pId),
-    (v) => writeAsyncCall(state, pRef, "r", v, pId),
+    (v) => writeAsyncCall(state, boundary, pRef, "f", v, pId),
+    (v) => writeAsyncCall(state, boundary, pRef, "r", v, pId),
   );
-  (state.promises ||= new Promises()).start();
+  boundary.startAsync();
   return true;
 }
 
@@ -1041,33 +1019,33 @@ function writeReadableStream(
   val: ReadableStream<unknown>,
   ref: Reference,
 ) {
-  if (val.locked) return false;
+  const { boundary } = state;
+  if (!boundary || val.locked) return false;
 
+  const reader = val.getReader();
   const iterId = nextRefAccess(state);
   const iterRef = new Reference(ref, null, state.flush, null, iterId);
+  const onFulfilled = ({ value, done }: ReadableStreamReadResult<unknown>) => {
+    if (done) {
+      writeAsyncCall(state, boundary, iterRef, "r", value);
+    } else if (!boundary.signal.aborted) {
+      reader.read().then(onFulfilled, onRejected);
+      boundary.startAsync();
+      writeAsyncCall(state, boundary, iterRef, "f", value);
+    }
+  };
+  const onRejected = (reason: unknown) => {
+    writeAsyncCall(state, boundary, iterRef, "j", reason);
+  };
+
   state.buf.push(
     "new ReadableStream({start(c){(async(_,f,v,l,i,p=a=>l=new Promise((r,j)=>{f=_.r=r;_.j=j}),a=((_.f=v=>{f(v);a.push(p())}),[p()]))=>{for(i of a)v=await i,i==l?c.close():c.enqueue(v)})(" +
       iterId +
       "={}).catch(e=>c.error(e))}})",
   );
-  const reader = val.getReader();
-  const promises = (state.promises ||= new Promises());
-  promises.start();
+
   reader.read().then(onFulfilled, onRejected);
-
-  function onFulfilled({ value, done }: ReadableStreamReadResult<unknown>) {
-    if (done) {
-      writeAsyncCall(state, iterRef, "r", value);
-    } else {
-      promises.start();
-      reader.read().then(onFulfilled, onRejected);
-      writeAsyncCall(state, iterRef, "f", value);
-    }
-  }
-
-  function onRejected(reason: unknown) {
-    writeAsyncCall(state, iterRef, "j", reason);
-  }
+  boundary.startAsync();
 
   return true;
 }
@@ -1104,30 +1082,31 @@ function writeAsyncGenerator(
   iter: AsyncGenerator,
   ref: Reference,
 ) {
+  const { boundary } = state;
+  if (!boundary) return false;
+
   const iterId = nextRefAccess(state);
   const iterRef = new Reference(ref, null, state.flush, null, iterId);
+  const onFulfilled = ({ value, done }: IteratorResult<unknown>) => {
+    if (done) {
+      writeAsyncCall(state, boundary, iterRef, "r", value);
+    } else if (!boundary.signal.aborted) {
+      iter.next().then(onFulfilled, onRejected);
+      boundary.startAsync();
+      writeAsyncCall(state, boundary, iterRef, "f", value);
+    }
+  };
+  const onRejected = (reason: unknown) => {
+    writeAsyncCall(state, boundary, iterRef, "j", reason);
+  };
+
   state.buf.push(
     "(async function*(_,f,v,l,i,p=a=>l=new Promise((r,j)=>{f=_.r=r;_.j=j}),a=((_.f=v=>{f(v);a.push(p())}),[p()])){for(i of a)v=await i,i!=l&&(yield v);return v})(" +
       iterId +
       "={})",
   );
-  const promises = (state.promises ||= new Promises());
-  promises.start();
   iter.next().then(onFulfilled, onRejected);
-
-  function onFulfilled({ value, done }: IteratorResult<unknown>) {
-    if (done) {
-      writeAsyncCall(state, iterRef, "r", value);
-    } else {
-      promises.start();
-      iter.next().then(onFulfilled, onRejected);
-      writeAsyncCall(state, iterRef, "f", value);
-    }
-  }
-
-  function onRejected(reason: unknown) {
-    writeAsyncCall(state, iterRef, "j", reason);
-  }
+  boundary.startAsync();
 
   return true;
 }
@@ -1189,14 +1168,17 @@ function writeObjectProps(state: State, val: object, ref: Reference) {
 
 function writeAsyncCall(
   state: State,
+  boundary: Boundary,
   ref: Reference,
   method: string,
   value: unknown,
   preferredValueId: string | null = null,
 ) {
-  state.promises!.end();
+  if (boundary.signal.aborted) return;
+
+  state.flushed = true;
   const valueStartIndex = state.buf.push(
-    (state.buf.length === 0 ? "" : ";") + ref.id + "." + method + "(",
+    (state.buf.length === 0 ? "" : ",") + ref.id + "." + method + "(",
   );
   if (writeProp(state, value, ref, "")) {
     const valueRef = state.refs.get(value as object);
@@ -1207,6 +1189,7 @@ function writeAsyncCall(
     }
   }
   state.buf.push(")");
+  boundary.endAsync();
 }
 
 function isCircular(
@@ -1223,33 +1206,41 @@ function isCircular(
 }
 
 function toObjectKey(name: string) {
-  const invalidKeyStart = getInvalidObjectKeyPos(name);
-  return invalidKeyStart === -1 ? name : quote(name, invalidKeyStart);
-}
-
-function toAccess(accessor: string | number) {
-  return typeof accessor === "number" || accessor[0] === '"'
-    ? "[" + accessor + "]"
-    : "." + accessor;
-}
-
-function getInvalidObjectKeyPos(name: string) {
-  for (let i = 0; i < name.length; i++) {
-    const char = name[i];
-    if (
-      !(
-        (char >= "a" && char <= "z") ||
-        (char >= "A" && char <= "Z") ||
-        (char >= "0" && char <= "9") ||
-        char === "$" ||
-        char === "_"
-      )
-    ) {
-      return i;
-    }
+  if (name === "") {
+    return '""';
   }
 
-  return -1;
+  const startChar = name[0];
+  if (isDigit(startChar)) {
+    if (startChar === "0") {
+      if (name !== "0") {
+        return quote(name, 1);
+      }
+    } else {
+      for (let i = 1; i < name.length; i++) {
+        if (!isDigit(name[i])) {
+          return quote(name, i);
+        }
+      }
+    }
+  } else if (isWord(startChar)) {
+    for (let i = 1; i < name.length; i++) {
+      if (!isWordOrDigit(name[i])) {
+        return quote(name, i);
+      }
+    }
+  } else {
+    return quote(name, 0);
+  }
+
+  return name;
+}
+
+function toAccess(accessor: string) {
+  const start = accessor[0];
+  return start === '"' || (start >= "0" && start <= "9")
+    ? "[" + accessor + "]"
+    : "." + accessor;
 }
 
 // Creates a JavaScript double quoted string and escapes all characters not listed as DoubleStringCharacters on
@@ -1336,15 +1327,19 @@ function assignId(state: State, ref: Reference) {
 }
 
 function nextRefAccess(state: State) {
+  const encodeChars =
+    "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ$_0123456789";
+  const encodeLen = encodeChars.length;
+  const encodeStartLen = encodeLen - 11; // Avoids chars that cannot start a property name and _ (reserved).
   let index = state.ids++;
-  let mod = index % REF_START_CHARS_LEN;
-  let id = "_." + REF_START_CHARS[mod];
-  index = (index - mod) / REF_START_CHARS_LEN;
+  let mod = index % encodeStartLen;
+  let id = "_." + encodeChars[mod];
+  index = (index - mod) / encodeStartLen;
 
   while (index > 0) {
-    mod = index % REF_CHARS_LEN;
-    id += REF_CHARS[mod];
-    index = (index - mod) / REF_CHARS_LEN;
+    mod = index % encodeLen;
+    id += encodeChars[mod];
+    index = (index - mod) / encodeLen;
   }
 
   return id;
@@ -1386,3 +1381,20 @@ function hasOnlyZeros(typedArray: TypedArray) {
 
   return true;
 }
+
+function isWordOrDigit(char: string) {
+  return isWord(char) || isDigit(char);
+}
+
+function isDigit(char: string) {
+  return char >= "0" && char <= "9";
+}
+
+function isWord(char: string) {
+  return (
+    (char >= "a" && char <= "z") ||
+    (char >= "A" && char <= "Z") ||
+    char === "_" ||
+    char === "$"
+  );
+}

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

@@ -1,55 +1,168 @@
+import { DEFAULT_RUNTIME_ID, DEFAULT_RENDER_ID } from "../common/meta";
 import type {
-  Context,
   Template,
   Input,
+  TemplateInput,
   TemplateInstance,
   Renderer,
   RenderResult,
 } from "../common/types";
-import { type Writable, createRenderFn, register } from "./writer";
+import {
+  register,
+  queueTick,
+  offTick,
+  prepareChunk,
+  Boundary,
+  Chunk,
+  State,
+  flushChunk,
+} from "./writer";
 
 export const createTemplate = (renderer: Renderer, id = "") =>
   register(new ServerTemplate(renderer), id);
 
-interface Deferred<T> {
-  promise: Promise<T>;
-  resolve(value: T): void;
-  reject(reason?: any): void;
-}
-
-function deferred<T>(): Deferred<T> {
-  let resolve!: (value: T) => void;
-  let reject!: (reason?: any) => void;
-  const promise = new Promise<T>((res, rej) => {
-    resolve = res;
-    reject = rej;
-  });
-  return { promise, resolve, reject };
-}
-
-async function stringFromAsync(
-  iterable: AsyncIterable<string>,
-): Promise<string> {
-  let str = "";
-  for await (const part of iterable) {
-    str += part;
+export class ServerTemplate implements Template {
+  public _: (input: Input) => void;
+  constructor(renderer: (input: Input) => void) {
+    this._ = renderer;
+  }
+
+  render(input: TemplateInput = {}) {
+    let { $global } = input;
+    if ($global) {
+      ({ $global, ...input } = input);
+      $global = {
+        runtimeId: DEFAULT_RUNTIME_ID,
+        renderId: DEFAULT_RENDER_ID,
+        ...$global,
+      };
+    } else {
+      $global = {
+        runtimeId: DEFAULT_RUNTIME_ID,
+        renderId: DEFAULT_RENDER_ID,
+      };
+    }
+
+    const head = new Chunk(
+      new Boundary(new State($global as State["$global"]), $global.signal),
+      null,
+    );
+    head.render(this._, input);
+    return new ServerRenderResult(head);
+  }
+
+  mount(): TemplateInstance {
+    throw new Error(
+      `mount() is not implemented for the HTML compilation of a Marko template`,
+    );
   }
-  return str;
 }
 
 class ServerRenderResult implements RenderResult {
-  #iterable: AsyncIterableIterator<string>;
-  #promise: Promise<string> | undefined;
-
-  constructor(iterable: AsyncIterableIterator<string>) {
-    this.#iterable = iterable;
+  #head: Chunk | null;
+  #cachedPromise: Promise<string> | null = null;
+  constructor(head: Chunk) {
+    this.#head = head;
   }
 
   [Symbol.asyncIterator]() {
-    return this.#iterable;
+    type Iter = { value: string; done: boolean };
+    let resolve: (value: Iter) => void;
+    let reject: (reason: unknown) => void;
+    let value = "";
+    let done = false;
+    let aborted = false;
+    let reason: unknown;
+    this.#read(
+      (html) => {
+        value += html;
+        if (resolve) {
+          resolve({ value, done });
+          value = "";
+        }
+      },
+      (err) => {
+        aborted = true;
+        reason = err;
+
+        if (reject) {
+          reject(err);
+        }
+      },
+      () => {
+        done = true;
+        if (resolve) {
+          resolve({ value, done: !value });
+        }
+      },
+    );
+
+    return {
+      next() {
+        if (value) {
+          const result = { value, done: false };
+          value = "";
+          return Promise.resolve(result);
+        }
+
+        return done
+          ? Promise.resolve({ value, done })
+          : aborted
+            ? Promise.reject(reason)
+            : new Promise(exec);
+      },
+    };
+
+    function exec(_resolve: typeof resolve, _reject: typeof reject) {
+      resolve = _resolve;
+      reject = _reject;
+    }
   }
 
-  [Symbol.toStringTag] = "RenderResult";
+  pipe(stream: {
+    write: (chunk: string) => void;
+    end: () => void;
+    flush?: () => void;
+    emit?: (eventName: string, ...args: any[]) => any;
+  }) {
+    this.#read(
+      (html) => {
+        stream.write(html);
+      },
+      (err) => {
+        const socket = ("socket" in stream && stream.socket) as Record<
+          PropertyKey,
+          unknown
+        >;
+        if (typeof socket.destroySoon === "function") {
+          socket.destroySoon();
+        }
+
+        stream.emit?.("error", err);
+      },
+      () => {
+        stream.end();
+      },
+    );
+  }
+
+  toReadable() {
+    return new ReadableStream({
+      start: (ctrl) => {
+        this.#read(
+          (html) => {
+            ctrl.enqueue(html);
+          },
+          (err) => {
+            ctrl.error(err);
+          },
+          () => {
+            ctrl.close();
+          },
+        );
+      },
+    });
+  }
 
   then<TResult1 = string, TResult2 = never>(
     onfulfilled?:
@@ -61,107 +174,94 @@ class ServerRenderResult implements RenderResult {
       | undefined
       | null,
   ): Promise<TResult1 | TResult2> {
-    return (this.#promise ||= stringFromAsync(this.#iterable)).then(
-      onfulfilled,
-      onrejected,
-    );
+    return this.#promise().then(onfulfilled, onrejected);
   }
 
   catch<TResult = never>(
     onrejected?:
-      | ((reason: any) => TResult | PromiseLike<TResult>)
+      | ((reason: unknown) => TResult | PromiseLike<TResult>)
       | undefined
       | null,
   ): Promise<string | TResult> {
-    return this.then(undefined, onrejected);
+    return this.#promise().catch(onrejected);
   }
 
   finally(onfinally?: (() => void) | undefined | null): Promise<string> {
-    return this.then(undefined, undefined).finally(onfinally);
+    return this.#promise().finally(onfinally);
   }
 
-  toReadable() {
-    return new ReadableStream({
-      start: async (controller) => {
-        try {
-          for await (const chunk of this.#iterable) {
-            if (chunk) {
-              controller.enqueue(chunk);
-            }
+  #promise() {
+    return (this.#cachedPromise ||= new Promise<string>((resolve, reject) => {
+      let head = this.#head!;
+      this.#head = null;
+
+      if (!head) {
+        return reject(new Error("Cannot read from a consumed render result"));
+      }
+
+      const { boundary } = head;
+      (boundary.onNext = () => {
+        if (boundary.done) {
+          if (boundary.signal.aborted) {
+            reject(boundary.signal.reason);
+          } else {
+            head = prepareChunk(head);
+            if (boundary.done) resolve(flushChunk(head));
           }
-          controller.close();
-        } catch (err) {
-          controller.error(err);
         }
-      },
-    });
-  }
-}
-
-export class ServerTemplate implements Template {
-  #writeTo: (writable: Writable, input?: Input, context?: Context) => void;
-
-  public _: Renderer;
-
-  constructor(renderer: Renderer) {
-    this._ = renderer;
-    this.#writeTo = createRenderFn(renderer);
-  }
-
-  mount(): TemplateInstance {
-    throw new Error(
-      `mount() is not implemented for the HTML compilation of a Marko template`,
-    );
-  }
-
-  render(templateInput: Input = {}): RenderResult {
-    const { $global, ...input } = templateInput;
-    let buffer = "";
-    let done = false;
-    let pending = deferred<IteratorResult<string>>();
-
-    this.#writeTo(
-      {
-        write(data: string) {
-          buffer += data;
-        },
-        flush() {
-          pending.resolve({
-            value: buffer,
-            done: false,
-          });
-          buffer = "";
-          pending = deferred();
-        },
-        emit(name, error: Error) {
-          if (name === "error") {
-            pending.reject(error);
-          }
-        },
-        end() {
-          done = true;
-          pending.resolve({
-            value: "",
-            done,
-          });
-        },
-      },
-      input,
-      $global as Context,
-    );
-
-    return new ServerRenderResult({
-      [Symbol.asyncIterator]() {
-        return this;
-      },
-      async next() {
-        if (buffer || done) {
-          const value = buffer;
-          buffer = "";
-          return { value, done };
-        }
-        return pending.promise;
-      },
+      })();
+    }));
+  }
+
+  #read(
+    onWrite: (html: string) => void,
+    onAbort: (err: unknown) => void,
+    onClose: () => void,
+  ) {
+    let tick = true;
+    let head = this.#head!;
+    this.#head = null;
+
+    if (!head) {
+      onAbort(new Error("Cannot read from a consumed render result"));
+      return;
+    }
+
+    const { boundary } = head;
+    const onNext = (boundary.onNext = (write?: boolean) => {
+      if (write || boundary.done) {
+        if (boundary.signal.aborted) {
+          if (!tick) offTick(onNext);
+          onAbort(boundary.signal.reason);
+          return;
+        }
+
+        head = prepareChunk(head);
+      }
+
+      if (write || boundary.done) {
+        const html = flushChunk(head);
+        if (html) onWrite(html);
+        if (boundary.done) {
+          if (!tick) offTick(onNext);
+          onClose();
+        } else {
+          tick = true;
+        }
+      } else if (tick) {
+        tick = false;
+        queueTick(onNext);
+      }
     });
+
+    onNext();
+  }
+
+  toString() {
+    const head = this.#head;
+    if (!head) throw new Error("Cannot read from a consumed render result");
+    if (head.next) throw new Error("Cannot fork in sync mode");
+    this.#head = null;
+    return flushChunk(prepareChunk(head));
   }
 }

packages/translator-interop/src/__tests__/fixtures/custom-tag-parameters-from-args/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button class=inc>1<!M*0 #text/1>,<!>10<!M*0 #text/2></button><!M*0 #button/0><!M[1><div>Counts: 1,10</div><!M]0 #text/3><script>(M$h=[]).push(_=>(_.b={0:{x:1,y:10,"#text/3!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/custom-tag-parameters-from-args/components/custom-tag.marko_0_x_y",])</script>
+  <button class=inc>1<!--M_*0 #text/1-->,<!>10<!--M_*0 #text/2--></button><!--M_*0 #button/0--><!--M_[1--><div>Counts: 1,10</div><!--M_]0 #text/3--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.b={0:{x:1,y:10,"#text/3!":_.a={}},1:_.a})];M._.e=[0,"packages/translator-interop/src/__tests__/fixtures/custom-tag-parameters-from-args/components/custom-tag.marko_0_x_y"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -11,20 +11,20 @@
       class="inc"
     >
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
       ,
       <!---->
       10
-      <!--M*0 #text/2-->
+      <!--M_*0 #text/2-->
     </button>
-    <!--M*0 #button/0-->
-    <!--M[1-->
+    <!--M_*0 #button/0-->
+    <!--M_[1-->
     <div>
       Counts: 1,10
     </div>
-    <!--M]0 #text/3-->
+    <!--M_]0 #text/3-->
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{x:1,y:10,"#text/3!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/custom-tag-parameters-from-args/components/custom-tag.marko_0_x_y",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{x:1,y:10,"#text/3!":_.a={}},1:_.a})];M._.e=[0,"packages/translator-interop/src/__tests__/fixtures/custom-tag-parameters-from-args/components/custom-tag.marko_0_x_y"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/__snapshots__/resume.expected.md

@@ -13,14 +13,11 @@
       id="tags"
     >
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0}}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-1":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{m5c:"s0-1",count:0}})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -29,18 +26,18 @@
 # Mutations
 ```
 inserted #document/html0/body1/#text0
-inserted #document/html0/body1/#text9
+inserted #document/html0/body1/#text8
 removed #comment before #document/html0/body1/#text0
-removed #comment after #document/html0/body1/#text9
+removed #comment after #document/html0/body1/#text8
 #document/html0/body1/button4: attr(data-parent) "0" => "0"
 inserted #document/html0/body1/#text2
-inserted #document/html0/body1/#text8
-inserted #document/html0/body1/#text3
 inserted #document/html0/body1/#text7
+inserted #document/html0/body1/#text3
+inserted #document/html0/body1/#text6
 removed #comment after #document/html0/body1/#text3
-removed #comment after #document/html0/body1/script6
-removed #document/html0/body1/#text8 after #document/html0/body1/#text7
-inserted #document/html0/body1/#text8
+removed #comment after #document/html0/body1/#comment5
+removed #document/html0/body1/#text7 after #document/html0/body1/#text6
+inserted #document/html0/body1/#text7
 ```
 
 
@@ -61,14 +58,11 @@ container.querySelector("#tags").click()
       id="tags"
     >
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0}}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-1":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{m5c:"s0-1",count:0}})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -97,14 +91,11 @@ container.querySelector("#class").click()
       id="tags"
     >
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0}}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-1":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{m5c:"s0-1",count:0}})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -134,14 +125,11 @@ container.querySelector("#tags").click()
       id="tags"
     >
       2
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0}}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-1":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{m5c:"s0-1",count:0}})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -170,14 +158,11 @@ container.querySelector("#class").click()
       id="tags"
     >
       2
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0}}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-1":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{m5c:"s0-1",count:0}})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -207,14 +192,11 @@ container.querySelector("#tags").click()
       id="tags"
     >
       3
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0}}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-1":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{m5c:"s0-1",count:0}})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>

packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <!--M#s0--><button id=class>0</button><!--F#1--><button id=tags data-parent=0>0<!M*0 #text/1></button><!M*0 #button/0><script>(M$h=[]).push(_=>(_.a={0:{count:0}}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count",])</script><!--F/--><!--M/--><script>$MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-1":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})</script>
+  <!--M#s0--><button id=class>0</button><!--F#1--><button id=tags data-parent=0>0<!--M_*0 #text/1--></button><!--M_*0 #button/0--><!--F/--><!--M/--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.a={0:{m5c:"s0-1",count:0}})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})</script>
 
 
 # Render "End"
@@ -19,16 +19,13 @@
       id="tags"
     >
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0}}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count",])
-    </script>
+    <!--M_*0 #button/0-->
     <!--F/-->
     <!--M/-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-1":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{m5c:"s0-1",count:0}})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/components/tags-counter.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -47,10 +44,8 @@ inserted #document/html0/body1/button3
 inserted #document/html0/body1/button3/#text0
 inserted #document/html0/body1/button3/#comment1
 inserted #document/html0/body1/#comment4
-inserted #document/html0/body1/script5
-inserted #document/html0/body1/script5/#text0
+inserted #document/html0/body1/#comment5
 inserted #document/html0/body1/#comment6
-inserted #document/html0/body1/#comment7
-inserted #document/html0/body1/script8
-inserted #document/html0/body1/script8/#text0
+inserted #document/html0/body1/script7
+inserted #document/html0/body1/script7/#text0
 ```

packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/__snapshots__/resume.expected.md

@@ -7,22 +7,19 @@
       id="tags"
     >
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
-    <!--M[1-->
+    <!--M_*0 #button/0-->
+    <!--M_[1-->
     <button
       data-parent="0"
       id="class"
     >
       0
     </button>
+    <!--M_]0 #text/2-->
     <script>
-      $MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]})
-    </script>
-    <!--M]0 #text/2-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count",])
+      $MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]});WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a})];M._.e=[1,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -48,22 +45,19 @@ container.querySelector("#tags").click()
       id="tags"
     >
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
-    <!--M[1-->
+    <!--M_*0 #button/0-->
+    <!--M_[1-->
     <button
       data-parent="1"
       id="class"
     >
       0
     </button>
+    <!--M_]0 #text/2-->
     <script>
-      $MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]})
-    </script>
-    <!--M]0 #text/2-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count",])
+      $MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]});WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a})];M._.e=[1,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -87,22 +81,19 @@ container.querySelector("#class").click()
       id="tags"
     >
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
-    <!--M[1-->
+    <!--M_*0 #button/0-->
+    <!--M_[1-->
     <button
       data-parent="1"
       id="class"
     >
       1
     </button>
+    <!--M_]0 #text/2-->
     <script>
-      $MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]})
-    </script>
-    <!--M]0 #text/2-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count",])
+      $MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]});WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a})];M._.e=[1,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -125,22 +116,19 @@ container.querySelector("#tags").click()
       id="tags"
     >
       2
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
-    <!--M[1-->
+    <!--M_*0 #button/0-->
+    <!--M_[1-->
     <button
       data-parent="2"
       id="class"
     >
       1
     </button>
+    <!--M_]0 #text/2-->
     <script>
-      $MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]})
-    </script>
-    <!--M]0 #text/2-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count",])
+      $MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]});WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a})];M._.e=[1,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -164,22 +152,19 @@ container.querySelector("#class").click()
       id="tags"
     >
       2
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
-    <!--M[1-->
+    <!--M_*0 #button/0-->
+    <!--M_[1-->
     <button
       data-parent="2"
       id="class"
     >
       2
     </button>
+    <!--M_]0 #text/2-->
     <script>
-      $MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]})
-    </script>
-    <!--M]0 #text/2-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count",])
+      $MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]});WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a})];M._.e=[1,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -202,22 +187,19 @@ container.querySelector("#tags").click()
       id="tags"
     >
       3
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
-    <!--M[1-->
+    <!--M_*0 #button/0-->
+    <!--M_[1-->
     <button
       data-parent="3"
       id="class"
     >
       2
     </button>
+    <!--M_]0 #text/2-->
     <script>
-      $MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]})
-    </script>
-    <!--M]0 #text/2-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count",])
+      $MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]});WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a})];M._.e=[1,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button id=tags>0<!M*0 #text/1></button><!M*0 #button/0><!M[1><!--M#s0--><button id=class data-parent=0>0</button><!--M/--><script>$MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]})</script><!M]0 #text/2><script>(M$h=[]).push(_=>(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count",])</script>
+  <button id=tags>0<!--M_*0 #text/1--></button><!--M_*0 #button/0--><!--M_[1--><!--M#s0--><button id=class data-parent=0>0</button><!--M/--><!--M_]0 #text/2--><script>$MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]});WALKER_RUNTIME("M")("_");M._.s=[_=>(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a})];M._.e=[1,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -11,10 +11,10 @@
       id="tags"
     >
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
-    <!--M[1-->
+    <!--M_*0 #button/0-->
+    <!--M_[1-->
     <!--M#s0-->
     <button
       data-parent="0"
@@ -23,12 +23,9 @@
       0
     </button>
     <!--M/-->
+    <!--M_]0 #text/2-->
     <script>
-      $MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]})
-    </script>
-    <!--M]0 #text/2-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count",])
+      $MC=(window.$MC||[]).concat({"w":[["s0",0,{"count":0},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"]});WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{count:0,"#text/2!":_.a={m5c:"s0"},"#text/2(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/components/class-counter.marko"])},1:_.a})];M._.e=[1,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-basic-tags-to-class/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -48,9 +45,7 @@ inserted #document/html0/body1/#comment3
 inserted #document/html0/body1/button4
 inserted #document/html0/body1/button4/#text0
 inserted #document/html0/body1/#comment5
-inserted #document/html0/body1/script6
-inserted #document/html0/body1/script6/#text0
-inserted #document/html0/body1/#comment7
-inserted #document/html0/body1/script8
-inserted #document/html0/body1/script8/#text0
+inserted #document/html0/body1/#comment6
+inserted #document/html0/body1/script7
+inserted #document/html0/body1/script7/#text0
 ```

packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/__snapshots__/resume.expected.md

@@ -3,24 +3,21 @@
 <html>
   <head />
   <body>
-    <!--M[1-->
+    <!--M_[1-->
     <button
       id="class-api"
     >
       0
     </button>
-    <script>
-      $MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"e":[["count",["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/template.marko_0/onCount",0]]],"f":1,"p":null}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"]})
-    </script>
-    <!--M]0 #text/0-->
+    <!--M_]0 #text/0-->
     <div
       id="tags-api"
     >
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{"#text/0!":_.a={m5c:"s0"},"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"])},1:_.a}),[])
+      $MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"e":[["count",["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/template.marko_0/onCount",0]]],"f":1,"p":null}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"]});WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{"#text/0!":_.a={m5c:"s0"},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"])},1:_.a})];M._.e=[1,"$compat_setScope"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -42,24 +39,21 @@ container.querySelector("#class-api").click()
 <html>
   <head />
   <body>
-    <!--M[1-->
+    <!--M_[1-->
     <button
       id="class-api"
     >
       1
     </button>
-    <script>
-      $MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"e":[["count",["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/template.marko_0/onCount",0]]],"f":1,"p":null}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"]})
-    </script>
-    <!--M]0 #text/0-->
+    <!--M_]0 #text/0-->
     <div
       id="tags-api"
     >
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{"#text/0!":_.a={m5c:"s0"},"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"])},1:_.a}),[])
+      $MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"e":[["count",["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/template.marko_0/onCount",0]]],"f":1,"p":null}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"]});WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{"#text/0!":_.a={m5c:"s0"},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"])},1:_.a})];M._.e=[1,"$compat_setScope"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -67,7 +61,7 @@ container.querySelector("#class-api").click()
 
 # Mutations
 ```
-#document/html0/body1/div6/#text0: "0" => "1"
+#document/html0/body1/div5/#text0: "0" => "1"
 #document/html0/body1/button2/#text0: "0" => "1"
 ```
 
@@ -79,24 +73,21 @@ container.querySelector("#class-api").click()
 <html>
   <head />
   <body>
-    <!--M[1-->
+    <!--M_[1-->
     <button
       id="class-api"
     >
       2
     </button>
-    <script>
-      $MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"e":[["count",["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/template.marko_0/onCount",0]]],"f":1,"p":null}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"]})
-    </script>
-    <!--M]0 #text/0-->
+    <!--M_]0 #text/0-->
     <div
       id="tags-api"
     >
       2
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{"#text/0!":_.a={m5c:"s0"},"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"])},1:_.a}),[])
+      $MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"e":[["count",["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/template.marko_0/onCount",0]]],"f":1,"p":null}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"]});WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{"#text/0!":_.a={m5c:"s0"},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"])},1:_.a})];M._.e=[1,"$compat_setScope"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -104,6 +95,6 @@ container.querySelector("#class-api").click()
 
 # Mutations
 ```
-#document/html0/body1/div6/#text0: "1" => "2"
+#document/html0/body1/div5/#text0: "1" => "2"
 #document/html0/body1/button2/#text0: "1" => "2"
 ```

packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <!M[1><!--M#s0--><button id=class-api>0</button><!--M/--><script>$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"e":[["count",["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/template.marko_0/onCount",0]]],"f":1,"p":null}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"]})</script><!M]0 #text/0><div id=tags-api>0<!M*0 #text/1></div><script>(M$h=[]).push(_=>(_.b={0:{"#text/0!":_.a={m5c:"s0"},"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"])},1:_.a}),[])</script>
+  <!--M_[1--><!--M#s0--><button id=class-api>0</button><!--M/--><!--M_]0 #text/0--><div id=tags-api>0<!--M_*0 #text/1--></div><script>$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"e":[["count",["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/template.marko_0/onCount",0]]],"f":1,"p":null}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"]});WALKER_RUNTIME("M")("_");M._.s=[_=>(_.b={0:{"#text/0!":_.a={m5c:"s0"},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"])},1:_.a})];M._.e=[1,"$compat_setScope"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -7,7 +7,7 @@
 <html>
   <head />
   <body>
-    <!--M[1-->
+    <!--M_[1-->
     <!--M#s0-->
     <button
       id="class-api"
@@ -15,18 +15,15 @@
       0
     </button>
     <!--M/-->
-    <script>
-      $MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"e":[["count",["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/template.marko_0/onCount",0]]],"f":1,"p":null}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"]})
-    </script>
-    <!--M]0 #text/0-->
+    <!--M_]0 #text/0-->
     <div
       id="tags-api"
     >
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{"#text/0!":_.a={m5c:"s0"},"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"])},1:_.a}),[])
+      $MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"e":[["count",["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/template.marko_0/onCount",0]]],"f":1,"p":null}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"]});WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{"#text/0!":_.a={m5c:"s0"},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-events-tags-to-class/components/class-counter.marko"])},1:_.a})];M._.e=[1,"$compat_setScope"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -42,12 +39,10 @@ inserted #document/html0/body1/#comment1
 inserted #document/html0/body1/button2
 inserted #document/html0/body1/button2/#text0
 inserted #document/html0/body1/#comment3
-inserted #document/html0/body1/script4
-inserted #document/html0/body1/script4/#text0
-inserted #document/html0/body1/#comment5
-inserted #document/html0/body1/div6
-inserted #document/html0/body1/div6/#text0
-inserted #document/html0/body1/div6/#comment1
-inserted #document/html0/body1/script7
-inserted #document/html0/body1/script7/#text0
+inserted #document/html0/body1/#comment4
+inserted #document/html0/body1/div5
+inserted #document/html0/body1/div5/#text0
+inserted #document/html0/body1/div5/#comment1
+inserted #document/html0/body1/script6
+inserted #document/html0/body1/script6/#text0
 ```

packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/__snapshots__/resume.expected.md

@@ -7,22 +7,19 @@
       id="tags"
     >
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <div>
       <button
         id="class"
       >
         0
       </button>
-      <!--M]0 #text/2-->
+      <!--M_]0 #text/2-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -31,21 +28,21 @@
 # Mutations
 ```
 inserted #document/html0/body1/#text0
-inserted #document/html0/body1/#text9
+inserted #document/html0/body1/#text8
 removed #comment before #document/html0/body1/#text0
-removed #comment after #document/html0/body1/#text9
+removed #comment after #document/html0/body1/#text8
 inserted #document/html0/body1/div5/#text0
 inserted #document/html0/body1/div5/#text4
 removed #comment after #document/html0/body1/div5/#text4
 removed button after #document/html0/body1/div5/#text4
 inserted #document/html0/body1/#text1
-inserted #document/html0/body1/#text8
-inserted #document/html0/body1/#text2
 inserted #document/html0/body1/#text7
+inserted #document/html0/body1/#text2
+inserted #document/html0/body1/#text6
 removed #comment after #document/html0/body1/#text2
-removed #comment after #document/html0/body1/script6
-removed #document/html0/body1/#text8 after #document/html0/body1/#text7
-inserted #document/html0/body1/#text8
+removed #comment after #document/html0/body1/div5
+removed #document/html0/body1/#text7 after #document/html0/body1/#text6
+inserted #document/html0/body1/#text7
 inserted #document/html0/body1/div5/#text1
 inserted #document/html0/body1/div5/#text3
 inserted #document/html0/body1/div5/button2
@@ -64,22 +61,19 @@ container.querySelector("#tags").click()
       id="tags"
     >
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <div>
       <button
         id="class"
       >
         0
       </button>
-      <!--M]0 #text/2-->
+      <!--M_]0 #text/2-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -102,22 +96,19 @@ container.querySelector("#class").click()
       id="tags"
     >
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <div>
       <button
         id="class"
       >
         1
       </button>
-      <!--M]0 #text/2-->
+      <!--M_]0 #text/2-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -150,22 +141,19 @@ container.querySelector("#tags").click()
       id="tags"
     >
       2
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <div>
       <button
         id="class"
       >
         1
       </button>
-      <!--M]0 #text/2-->
+      <!--M_]0 #text/2-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -188,22 +176,19 @@ container.querySelector("#class").click()
       id="tags"
     >
       2
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <div>
       <button
         id="class"
       >
         2
       </button>
-      <!--M]0 #text/2-->
+      <!--M_]0 #text/2-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -236,22 +221,19 @@ container.querySelector("#tags").click()
       id="tags"
     >
       3
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <div>
       <button
         id="class"
       >
         2
       </button>
-      <!--M]0 #text/2-->
+      <!--M_]0 #text/2-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>

packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <!--M#s0--><!--F#0--><button id=tags>0<!M*0 #text/1></button><!M*0 #button/0><div><!M[1><button id=class>0</button><!M]0 #text/2></div><script>(M$h=[]).push(_=>(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count",])</script><!--F/--><!--M/--><script>$MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})</script>
+  <!--M#s0--><!--F#0--><button id=tags>0<!--M_*0 #text/1--></button><!--M_*0 #button/0--><div><!--M_[1--><button id=class>0</button><!--M_]0 #text/2--></div><!--F/--><!--M/--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})</script>
 
 
 # Render "End"
@@ -13,25 +13,22 @@
       id="tags"
     >
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <div>
-      <!--M[1-->
+      <!--M_[1-->
       <button
         id="class"
       >
         0
       </button>
-      <!--M]0 #text/2-->
+      <!--M_]0 #text/2-->
     </div>
-    <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count",])
-    </script>
     <!--F/-->
     <!--M/-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -53,10 +50,8 @@ inserted #document/html0/body1/div4/#comment0
 inserted #document/html0/body1/div4/button1
 inserted #document/html0/body1/div4/button1/#text0
 inserted #document/html0/body1/div4/#comment2
-inserted #document/html0/body1/script5
-inserted #document/html0/body1/script5/#text0
+inserted #document/html0/body1/#comment5
 inserted #document/html0/body1/#comment6
-inserted #document/html0/body1/#comment7
-inserted #document/html0/body1/script8
-inserted #document/html0/body1/script8/#text0
+inserted #document/html0/body1/script7
+inserted #document/html0/body1/script7/#text0
 ```

packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/__snapshots__/resume.expected.md

@@ -3,10 +3,7 @@
 <html>
   <head />
   <body>
-    <!--M[1-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.c={1:_.a={_:_.b={count:0,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])
-    </script>
+    <!--M_[1-->
     <button
       id="class"
     >
@@ -17,19 +14,13 @@
         id="tags"
       >
         0
-        <!--M*1 #text/1-->
+        <!--M_*1 #text/1-->
       </button>
-      <!--M*1 #button/0-->
-      <script>
-        M$h.push(_=&gt;(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count",])
-      </script>
+      <!--M_*1 #button/0-->
     </div>
+    <!--M_]0 #text/0-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]})
-    </script>
-    <!--M]0 #text/0-->
-    <script>
-      M$h.push(_=&gt;(_.e={0:_.b}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={count:0,"#text/0!":_.b={m5c:"s0-2"},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=&gt;(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -37,18 +28,18 @@
 
 # Mutations
 ```
-inserted #document/html0/body1/#text2
-inserted #document/html0/body1/#text5
-removed #comment after #document/html0/body1/script1
-removed #comment after #document/html0/body1/#text5
-inserted #document/html0/body1/div4/#text0
-inserted #document/html0/body1/div4/#text6
-inserted #document/html0/body1/div4/#text1
-inserted #document/html0/body1/div4/#text5
-removed #comment after #document/html0/body1/div4/#text1
-removed #comment after #document/html0/body1/div4/script4
-removed #document/html0/body1/div4/#text6 after #document/html0/body1/div4/#text5
-inserted #document/html0/body1/div4/#text6
+inserted #document/html0/body1/#text1
+inserted #document/html0/body1/#text4
+removed #comment after #document/html0/body1/#comment0
+removed #comment after #document/html0/body1/#text4
+inserted #document/html0/body1/div3/#text0
+inserted #document/html0/body1/div3/#text5
+inserted #document/html0/body1/div3/#text1
+inserted #document/html0/body1/div3/#text4
+removed #comment after #document/html0/body1/div3/#text1
+removed #comment after #document/html0/body1/div3/#comment3
+removed #document/html0/body1/div3/#text5 after #document/html0/body1/div3/#text4
+inserted #document/html0/body1/div3/#text5
 ```
 
 
@@ -59,10 +50,7 @@ container.querySelector("#tags").click()
 <html>
   <head />
   <body>
-    <!--M[1-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.c={1:_.a={_:_.b={count:0,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])
-    </script>
+    <!--M_[1-->
     <button
       id="class"
     >
@@ -73,19 +61,13 @@ container.querySelector("#tags").click()
         id="tags"
       >
         1
-        <!--M*1 #text/1-->
+        <!--M_*1 #text/1-->
       </button>
-      <!--M*1 #button/0-->
-      <script>
-        M$h.push(_=&gt;(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count",])
-      </script>
+      <!--M_*1 #button/0-->
     </div>
+    <!--M_]0 #text/0-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]})
-    </script>
-    <!--M]0 #text/0-->
-    <script>
-      M$h.push(_=&gt;(_.e={0:_.b}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={count:0,"#text/0!":_.b={m5c:"s0-2"},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=&gt;(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -93,7 +75,7 @@ container.querySelector("#tags").click()
 
 # Mutations
 ```
-#document/html0/body1/div4/button2/#text0: "0" => "1"
+#document/html0/body1/div3/button2/#text0: "0" => "1"
 ```
 
 
@@ -104,10 +86,7 @@ container.querySelector("#class").click()
 <html>
   <head />
   <body>
-    <!--M[1-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.c={1:_.a={_:_.b={count:0,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])
-    </script>
+    <!--M_[1-->
     <button
       id="class"
     >
@@ -118,19 +97,13 @@ container.querySelector("#class").click()
         id="tags"
       >
         1
-        <!--M*1 #text/1-->
+        <!--M_*1 #text/1-->
       </button>
-      <!--M*1 #button/0-->
-      <script>
-        M$h.push(_=&gt;(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count",])
-      </script>
+      <!--M_*1 #button/0-->
     </div>
+    <!--M_]0 #text/0-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]})
-    </script>
-    <!--M]0 #text/0-->
-    <script>
-      M$h.push(_=&gt;(_.e={0:_.b}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={count:0,"#text/0!":_.b={m5c:"s0-2"},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=&gt;(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -138,7 +111,7 @@ container.querySelector("#class").click()
 
 # Mutations
 ```
-#document/html0/body1/button3/#text0: "0" => "1"
+#document/html0/body1/button2/#text0: "0" => "1"
 ```
 
 
@@ -149,10 +122,7 @@ container.querySelector("#tags").click()
 <html>
   <head />
   <body>
-    <!--M[1-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.c={1:_.a={_:_.b={count:0,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])
-    </script>
+    <!--M_[1-->
     <button
       id="class"
     >
@@ -163,19 +133,13 @@ container.querySelector("#tags").click()
         id="tags"
       >
         2
-        <!--M*1 #text/1-->
+        <!--M_*1 #text/1-->
       </button>
-      <!--M*1 #button/0-->
-      <script>
-        M$h.push(_=&gt;(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count",])
-      </script>
+      <!--M_*1 #button/0-->
     </div>
+    <!--M_]0 #text/0-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]})
-    </script>
-    <!--M]0 #text/0-->
-    <script>
-      M$h.push(_=&gt;(_.e={0:_.b}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={count:0,"#text/0!":_.b={m5c:"s0-2"},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=&gt;(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -183,7 +147,7 @@ container.querySelector("#tags").click()
 
 # Mutations
 ```
-#document/html0/body1/div4/button2/#text0: "1" => "2"
+#document/html0/body1/div3/button2/#text0: "1" => "2"
 ```
 
 
@@ -194,10 +158,7 @@ container.querySelector("#class").click()
 <html>
   <head />
   <body>
-    <!--M[1-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.c={1:_.a={_:_.b={count:0,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])
-    </script>
+    <!--M_[1-->
     <button
       id="class"
     >
@@ -208,19 +169,13 @@ container.querySelector("#class").click()
         id="tags"
       >
         2
-        <!--M*1 #text/1-->
+        <!--M_*1 #text/1-->
       </button>
-      <!--M*1 #button/0-->
-      <script>
-        M$h.push(_=&gt;(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count",])
-      </script>
+      <!--M_*1 #button/0-->
     </div>
+    <!--M_]0 #text/0-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]})
-    </script>
-    <!--M]0 #text/0-->
-    <script>
-      M$h.push(_=&gt;(_.e={0:_.b}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={count:0,"#text/0!":_.b={m5c:"s0-2"},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=&gt;(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -228,7 +183,7 @@ container.querySelector("#class").click()
 
 # Mutations
 ```
-#document/html0/body1/button3/#text0: "1" => "2"
+#document/html0/body1/button2/#text0: "1" => "2"
 ```
 
 
@@ -239,10 +194,7 @@ container.querySelector("#tags").click()
 <html>
   <head />
   <body>
-    <!--M[1-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.c={1:_.a={_:_.b={count:0,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])
-    </script>
+    <!--M_[1-->
     <button
       id="class"
     >
@@ -253,19 +205,13 @@ container.querySelector("#tags").click()
         id="tags"
       >
         3
-        <!--M*1 #text/1-->
+        <!--M_*1 #text/1-->
       </button>
-      <!--M*1 #button/0-->
-      <script>
-        M$h.push(_=&gt;(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count",])
-      </script>
+      <!--M_*1 #button/0-->
     </div>
+    <!--M_]0 #text/0-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]})
-    </script>
-    <!--M]0 #text/0-->
-    <script>
-      M$h.push(_=&gt;(_.e={0:_.b}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={count:0,"#text/0!":_.b={m5c:"s0-2"},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=&gt;(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -273,5 +219,5 @@ container.querySelector("#tags").click()
 
 # Mutations
 ```
-#document/html0/body1/div4/button2/#text0: "2" => "3"
+#document/html0/body1/div3/button2/#text0: "2" => "3"
 ```

packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/__snapshots__/ssr.expected.md

@@ -1,9 +1,5 @@
 # Write
-  <!M[1><script>(M$h=[]).push(_=>(_.c={1:_.a={_:_.b={count:0,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])</script>
-
-
-# Write
-  <!--M#s0--><button id=class>0</button><div><!--F#2--><button id=tags>0<!M*1 #text/1></button><!M*1 #button/0><script>M$h.push(_=>(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count",])</script><!--F/--></div><!--M/--><script>$MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]})</script><!M]0 #text/0><script>M$h.push(_=>(_.e={0:_.b}),[])</script>
+  <!--M_[1--><!--M#s0--><button id=class>0</button><div><!--F#2--><button id=tags>0<!--M_*1 #text/1--></button><!--M_*1 #button/0--><!--F/--></div><!--M/--><!--M_]0 #text/0--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.c={0:_.a={count:0,"#text/0!":_.b={m5c:"s0-2"},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=>(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -11,10 +7,7 @@
 <html>
   <head />
   <body>
-    <!--M[1-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.c={1:_.a={_:_.b={count:0,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])
-    </script>
+    <!--M_[1-->
     <!--M#s0-->
     <button
       id="class"
@@ -27,21 +20,15 @@
         id="tags"
       >
         0
-        <!--M*1 #text/1-->
+        <!--M_*1 #text/1-->
       </button>
-      <!--M*1 #button/0-->
-      <script>
-        M$h.push(_=&gt;(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count",])
-      </script>
+      <!--M_*1 #button/0-->
       <!--F/-->
     </div>
     <!--M/-->
+    <!--M_]0 #text/0-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]})
-    </script>
-    <!--M]0 #text/0-->
-    <script>
-      M$h.push(_=&gt;(_.e={0:_.b}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={count:0,"#text/0!":_.b={m5c:"s0-2"},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-nested-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=&gt;(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -53,24 +40,18 @@ inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/#comment0
-inserted #document/html0/body1/script1
-inserted #document/html0/body1/script1/#text0
-inserted #document/html0/body1/#comment2
-inserted #document/html0/body1/button3
-inserted #document/html0/body1/button3/#text0
-inserted #document/html0/body1/div4
-inserted #document/html0/body1/div4/#comment0
-inserted #document/html0/body1/div4/button1
-inserted #document/html0/body1/div4/button1/#text0
-inserted #document/html0/body1/div4/button1/#comment1
-inserted #document/html0/body1/div4/#comment2
-inserted #document/html0/body1/div4/script3
-inserted #document/html0/body1/div4/script3/#text0
-inserted #document/html0/body1/div4/#comment4
+inserted #document/html0/body1/#comment1
+inserted #document/html0/body1/button2
+inserted #document/html0/body1/button2/#text0
+inserted #document/html0/body1/div3
+inserted #document/html0/body1/div3/#comment0
+inserted #document/html0/body1/div3/button1
+inserted #document/html0/body1/div3/button1/#text0
+inserted #document/html0/body1/div3/button1/#comment1
+inserted #document/html0/body1/div3/#comment2
+inserted #document/html0/body1/div3/#comment3
+inserted #document/html0/body1/#comment4
 inserted #document/html0/body1/#comment5
 inserted #document/html0/body1/script6
 inserted #document/html0/body1/script6/#text0
-inserted #document/html0/body1/#comment7
-inserted #document/html0/body1/script8
-inserted #document/html0/body1/script8/#text0
 ```

packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/__snapshots__/resume.expected.md

@@ -7,9 +7,9 @@
       id="tags"
     >
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <div>
       <h1>
         hello
@@ -19,13 +19,10 @@
       >
         1 * 0 = 0
       </button>
-      <!--M]0 #text/2-->
+      <!--M_]0 #text/2-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -34,22 +31,22 @@
 # Mutations
 ```
 inserted #document/html0/body1/#text0
-inserted #document/html0/body1/#text9
+inserted #document/html0/body1/#text8
 removed #comment before #document/html0/body1/#text0
-removed #comment after #document/html0/body1/#text9
+removed #comment after #document/html0/body1/#text8
 inserted #document/html0/body1/div5/#text0
 inserted #document/html0/body1/div5/#text5
 removed #comment after #document/html0/body1/div5/#text5
 removed h1 after #document/html0/body1/div5/#text5
 removed button after #document/html0/body1/div5/#text5
 inserted #document/html0/body1/#text1
-inserted #document/html0/body1/#text8
-inserted #document/html0/body1/#text2
 inserted #document/html0/body1/#text7
+inserted #document/html0/body1/#text2
+inserted #document/html0/body1/#text6
 removed #comment after #document/html0/body1/#text2
-removed #comment after #document/html0/body1/script6
-removed #document/html0/body1/#text8 after #document/html0/body1/#text7
-inserted #document/html0/body1/#text8
+removed #comment after #document/html0/body1/div5
+removed #document/html0/body1/#text7 after #document/html0/body1/#text6
+inserted #document/html0/body1/#text7
 inserted #document/html0/body1/div5/#text1
 inserted #document/html0/body1/div5/#text4
 inserted #document/html0/body1/div5/h12
@@ -74,9 +71,9 @@ container.querySelector("#tags").click()
       id="tags"
     >
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <div>
       <h1>
         hello
@@ -86,13 +83,10 @@ container.querySelector("#tags").click()
       >
         1 * 1 = 1
       </button>
-      <!--M]0 #text/2-->
+      <!--M_]0 #text/2-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -117,9 +111,9 @@ container.querySelector("#class").click()
       id="tags"
     >
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <div>
       <h1>
         hello
@@ -129,13 +123,10 @@ container.querySelector("#class").click()
       >
         2 * 1 = 2
       </button>
-      <!--M]0 #text/2-->
+      <!--M_]0 #text/2-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -175,9 +166,9 @@ container.querySelector("#tags").click()
       id="tags"
     >
       2
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <div>
       <h1>
         hello
@@ -187,13 +178,10 @@ container.querySelector("#tags").click()
       >
         2 * 2 = 4
       </button>
-      <!--M]0 #text/2-->
+      <!--M_]0 #text/2-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -218,9 +206,9 @@ container.querySelector("#class").click()
       id="tags"
     >
       2
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <div>
       <h1>
         hello
@@ -230,13 +218,10 @@ container.querySelector("#class").click()
       >
         3 * 2 = 6
       </button>
-      <!--M]0 #text/2-->
+      <!--M_]0 #text/2-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -276,9 +261,9 @@ container.querySelector("#tags").click()
       id="tags"
     >
       3
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <div>
       <h1>
         hello
@@ -288,13 +273,10 @@ container.querySelector("#tags").click()
       >
         3 * 3 = 9
       </button>
-      <!--M]0 #text/2-->
+      <!--M_]0 #text/2-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count",])
-    </script>
-    <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>

packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <!--M#s0--><!--F#0--><button id=tags>0<!M*0 #text/1></button><!M*0 #button/0><div><!M[1><h1>hello</h1><button id=class>1 * 0 = 0</button><!M]0 #text/2></div><script>(M$h=[]).push(_=>(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count",])</script><!--F/--><!--M/--><script>$MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})</script>
+  <!--M#s0--><!--F#0--><button id=tags>0<!--M_*0 #text/1--></button><!--M_*0 #button/0--><div><!--M_[1--><h1>hello</h1><button id=class>1 * 0 = 0</button><!--M_]0 #text/2--></div><!--F/--><!--M/--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})</script>
 
 
 # Render "End"
@@ -13,11 +13,11 @@
       id="tags"
     >
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <div>
-      <!--M[1-->
+      <!--M_[1-->
       <h1>
         hello
       </h1>
@@ -26,15 +26,12 @@
       >
         1 * 0 = 0
       </button>
-      <!--M]0 #text/2-->
+      <!--M_]0 #text/2-->
     </div>
-    <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{count:0,"#text/2!":_.a={}},1:_.a}),[0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count",])
-    </script>
     <!--F/-->
     <!--M/-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-0":0}},"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{m5c:"s0-0",count:0,"#text/2!":_.a={}},1:_.a})];M._.e=[0,"$compat_setScope",0,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/components/tags-layout.marko_0_count"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"w":[["s0",0,{},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-class-to-tags/template.marko"]})
     </script>
   </body>
 </html>
@@ -58,10 +55,8 @@ inserted #document/html0/body1/div4/h11/#text0
 inserted #document/html0/body1/div4/button2
 inserted #document/html0/body1/div4/button2/#text0
 inserted #document/html0/body1/div4/#comment3
-inserted #document/html0/body1/script5
-inserted #document/html0/body1/script5/#text0
+inserted #document/html0/body1/#comment5
 inserted #document/html0/body1/#comment6
-inserted #document/html0/body1/#comment7
-inserted #document/html0/body1/script8
-inserted #document/html0/body1/script8/#text0
+inserted #document/html0/body1/script7
+inserted #document/html0/body1/script7/#text0
 ```

packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/__snapshots__/resume.expected.md

@@ -3,10 +3,7 @@
 <html>
   <head />
   <body>
-    <!--M[1-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.c={1:_.a={baseCount:0,_:_.b={multiplier:1,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])
-    </script>
+    <!--M_[1-->
     <button
       id="class"
     >
@@ -15,33 +12,27 @@
     <div>
       <h1>
         hello
-        <!--M*1 #text/0-->
+        <!--M_*1 #text/0-->
       </h1>
       <button
         id="tags"
       >
         1
-        <!--M*1 #text/2-->
+        <!--M_*1 #text/2-->
          * 
         <!---->
         0
-        <!--M*1 #text/3-->
+        <!--M_*1 #text/3-->
          = 
         <!---->
         0
-        <!--M*1 #text/4-->
+        <!--M_*1 #text/4-->
       </button>
-      <!--M*1 #button/1-->
-      <script>
-        M$h.push(_=&gt;(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier",])
-      </script>
+      <!--M_*1 #button/1-->
     </div>
+    <!--M_]0 #text/0-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]})
-    </script>
-    <!--M]0 #text/0-->
-    <script>
-      M$h.push(_=&gt;(_.e={0:_.b}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={multiplier:1,"#text/0!":_.b={m5c:"s0-2",baseCount:0},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=&gt;(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -49,18 +40,18 @@
 
 # Mutations
 ```
-inserted #document/html0/body1/#text2
-inserted #document/html0/body1/#text5
-removed #comment after #document/html0/body1/script1
-removed #comment after #document/html0/body1/#text5
-inserted #document/html0/body1/div4/#text0
-inserted #document/html0/body1/div4/#text7
-inserted #document/html0/body1/div4/#text1
-inserted #document/html0/body1/div4/#text6
-removed #comment after #document/html0/body1/div4/#text1
-removed #comment after #document/html0/body1/div4/script5
-removed #document/html0/body1/div4/#text7 after #document/html0/body1/div4/#text6
-inserted #document/html0/body1/div4/#text7
+inserted #document/html0/body1/#text1
+inserted #document/html0/body1/#text4
+removed #comment after #document/html0/body1/#comment0
+removed #comment after #document/html0/body1/#text4
+inserted #document/html0/body1/div3/#text0
+inserted #document/html0/body1/div3/#text6
+inserted #document/html0/body1/div3/#text1
+inserted #document/html0/body1/div3/#text5
+removed #comment after #document/html0/body1/div3/#text1
+removed #comment after #document/html0/body1/div3/#comment4
+removed #document/html0/body1/div3/#text6 after #document/html0/body1/div3/#text5
+inserted #document/html0/body1/div3/#text6
 ```
 
 
@@ -71,10 +62,7 @@ container.querySelector("#tags").click()
 <html>
   <head />
   <body>
-    <!--M[1-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.c={1:_.a={baseCount:0,_:_.b={multiplier:1,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])
-    </script>
+    <!--M_[1-->
     <button
       id="class"
     >
@@ -83,33 +71,27 @@ container.querySelector("#tags").click()
     <div>
       <h1>
         hello
-        <!--M*1 #text/0-->
+        <!--M_*1 #text/0-->
       </h1>
       <button
         id="tags"
       >
         2
-        <!--M*1 #text/2-->
+        <!--M_*1 #text/2-->
          * 
         <!---->
         0
-        <!--M*1 #text/3-->
+        <!--M_*1 #text/3-->
          = 
         <!---->
         0
-        <!--M*1 #text/4-->
+        <!--M_*1 #text/4-->
       </button>
-      <!--M*1 #button/1-->
-      <script>
-        M$h.push(_=&gt;(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier",])
-      </script>
+      <!--M_*1 #button/1-->
     </div>
+    <!--M_]0 #text/0-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]})
-    </script>
-    <!--M]0 #text/0-->
-    <script>
-      M$h.push(_=&gt;(_.e={0:_.b}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={multiplier:1,"#text/0!":_.b={m5c:"s0-2",baseCount:0},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=&gt;(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -117,7 +99,7 @@ container.querySelector("#tags").click()
 
 # Mutations
 ```
-#document/html0/body1/div4/button3/#text0: "1" => "2"
+#document/html0/body1/div3/button3/#text0: "1" => "2"
 ```
 
 
@@ -128,10 +110,7 @@ container.querySelector("#class").click()
 <html>
   <head />
   <body>
-    <!--M[1-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.c={1:_.a={baseCount:0,_:_.b={multiplier:1,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])
-    </script>
+    <!--M_[1-->
     <button
       id="class"
     >
@@ -140,33 +119,27 @@ container.querySelector("#class").click()
     <div>
       <h1>
         hello
-        <!--M*1 #text/0-->
+        <!--M_*1 #text/0-->
       </h1>
       <button
         id="tags"
       >
         2
-        <!--M*1 #text/2-->
+        <!--M_*1 #text/2-->
          * 
         <!---->
         1
-        <!--M*1 #text/3-->
+        <!--M_*1 #text/3-->
          = 
         <!---->
         2
-        <!--M*1 #text/4-->
+        <!--M_*1 #text/4-->
       </button>
-      <!--M*1 #button/1-->
-      <script>
-        M$h.push(_=&gt;(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier",])
-      </script>
+      <!--M_*1 #button/1-->
     </div>
+    <!--M_]0 #text/0-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]})
-    </script>
-    <!--M]0 #text/0-->
-    <script>
-      M$h.push(_=&gt;(_.e={0:_.b}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={multiplier:1,"#text/0!":_.b={m5c:"s0-2",baseCount:0},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=&gt;(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -174,9 +147,9 @@ container.querySelector("#class").click()
 
 # Mutations
 ```
-#document/html0/body1/div4/button3/#text4: "0" => "1"
-#document/html0/body1/div4/button3/#text8: "0" => "2"
-#document/html0/body1/button3/#text0: "0" => "1"
+#document/html0/body1/div3/button3/#text4: "0" => "1"
+#document/html0/body1/div3/button3/#text8: "0" => "2"
+#document/html0/body1/button2/#text0: "0" => "1"
 ```
 
 
@@ -187,10 +160,7 @@ container.querySelector("#tags").click()
 <html>
   <head />
   <body>
-    <!--M[1-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.c={1:_.a={baseCount:0,_:_.b={multiplier:1,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])
-    </script>
+    <!--M_[1-->
     <button
       id="class"
     >
@@ -199,33 +169,27 @@ container.querySelector("#tags").click()
     <div>
       <h1>
         hello
-        <!--M*1 #text/0-->
+        <!--M_*1 #text/0-->
       </h1>
       <button
         id="tags"
       >
         3
-        <!--M*1 #text/2-->
+        <!--M_*1 #text/2-->
          * 
         <!---->
         1
-        <!--M*1 #text/3-->
+        <!--M_*1 #text/3-->
          = 
         <!---->
         3
-        <!--M*1 #text/4-->
+        <!--M_*1 #text/4-->
       </button>
-      <!--M*1 #button/1-->
-      <script>
-        M$h.push(_=&gt;(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier",])
-      </script>
+      <!--M_*1 #button/1-->
     </div>
+    <!--M_]0 #text/0-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]})
-    </script>
-    <!--M]0 #text/0-->
-    <script>
-      M$h.push(_=&gt;(_.e={0:_.b}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={multiplier:1,"#text/0!":_.b={m5c:"s0-2",baseCount:0},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=&gt;(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -233,8 +197,8 @@ container.querySelector("#tags").click()
 
 # Mutations
 ```
-#document/html0/body1/div4/button3/#text0: "2" => "3"
-#document/html0/body1/div4/button3/#text8: "2" => "3"
+#document/html0/body1/div3/button3/#text0: "2" => "3"
+#document/html0/body1/div3/button3/#text8: "2" => "3"
 ```
 
 
@@ -245,10 +209,7 @@ container.querySelector("#class").click()
 <html>
   <head />
   <body>
-    <!--M[1-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.c={1:_.a={baseCount:0,_:_.b={multiplier:1,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])
-    </script>
+    <!--M_[1-->
     <button
       id="class"
     >
@@ -257,33 +218,27 @@ container.querySelector("#class").click()
     <div>
       <h1>
         hello
-        <!--M*1 #text/0-->
+        <!--M_*1 #text/0-->
       </h1>
       <button
         id="tags"
       >
         3
-        <!--M*1 #text/2-->
+        <!--M_*1 #text/2-->
          * 
         <!---->
         2
-        <!--M*1 #text/3-->
+        <!--M_*1 #text/3-->
          = 
         <!---->
         6
-        <!--M*1 #text/4-->
+        <!--M_*1 #text/4-->
       </button>
-      <!--M*1 #button/1-->
-      <script>
-        M$h.push(_=&gt;(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier",])
-      </script>
+      <!--M_*1 #button/1-->
     </div>
+    <!--M_]0 #text/0-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]})
-    </script>
-    <!--M]0 #text/0-->
-    <script>
-      M$h.push(_=&gt;(_.e={0:_.b}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={multiplier:1,"#text/0!":_.b={m5c:"s0-2",baseCount:0},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=&gt;(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -291,9 +246,9 @@ container.querySelector("#class").click()
 
 # Mutations
 ```
-#document/html0/body1/div4/button3/#text4: "1" => "2"
-#document/html0/body1/div4/button3/#text8: "3" => "6"
-#document/html0/body1/button3/#text0: "1" => "2"
+#document/html0/body1/div3/button3/#text4: "1" => "2"
+#document/html0/body1/div3/button3/#text8: "3" => "6"
+#document/html0/body1/button2/#text0: "1" => "2"
 ```
 
 
@@ -304,10 +259,7 @@ container.querySelector("#tags").click()
 <html>
   <head />
   <body>
-    <!--M[1-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.c={1:_.a={baseCount:0,_:_.b={multiplier:1,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])
-    </script>
+    <!--M_[1-->
     <button
       id="class"
     >
@@ -316,33 +268,27 @@ container.querySelector("#tags").click()
     <div>
       <h1>
         hello
-        <!--M*1 #text/0-->
+        <!--M_*1 #text/0-->
       </h1>
       <button
         id="tags"
       >
         4
-        <!--M*1 #text/2-->
+        <!--M_*1 #text/2-->
          * 
         <!---->
         2
-        <!--M*1 #text/3-->
+        <!--M_*1 #text/3-->
          = 
         <!---->
         8
-        <!--M*1 #text/4-->
+        <!--M_*1 #text/4-->
       </button>
-      <!--M*1 #button/1-->
-      <script>
-        M$h.push(_=&gt;(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier",])
-      </script>
+      <!--M_*1 #button/1-->
     </div>
+    <!--M_]0 #text/0-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]})
-    </script>
-    <!--M]0 #text/0-->
-    <script>
-      M$h.push(_=&gt;(_.e={0:_.b}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={multiplier:1,"#text/0!":_.b={m5c:"s0-2",baseCount:0},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=&gt;(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -350,6 +296,6 @@ container.querySelector("#tags").click()
 
 # Mutations
 ```
-#document/html0/body1/div4/button3/#text0: "3" => "4"
-#document/html0/body1/div4/button3/#text8: "6" => "8"
+#document/html0/body1/div3/button3/#text0: "3" => "4"
+#document/html0/body1/div3/button3/#text8: "6" => "8"
 ```

packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/__snapshots__/ssr.expected.md

@@ -1,9 +1,5 @@
 # Write
-  <!M[1><script>(M$h=[]).push(_=>(_.c={1:_.a={baseCount:0,_:_.b={multiplier:1,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])</script>
-
-
-# Write
-  <!--M#s0--><button id=class>0</button><div><!--F#2--><h1>hello<!M*1 #text/0></h1><button id=tags>1<!M*1 #text/2> * <!>0<!M*1 #text/3> = <!>0<!M*1 #text/4></button><!M*1 #button/1><script>M$h.push(_=>(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier",])</script><!--F/--></div><!--M/--><script>$MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]})</script><!M]0 #text/0><script>M$h.push(_=>(_.e={0:_.b}),[])</script>
+  <!--M_[1--><!--M#s0--><button id=class>0</button><div><!--F#2--><h1>hello<!--M_*1 #text/0--></h1><button id=tags>1<!--M_*1 #text/2--> * <!>0<!--M_*1 #text/3--> = <!>0<!--M_*1 #text/4--></button><!--M_*1 #button/1--><!--F/--></div><!--M/--><!--M_]0 #text/0--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.c={0:_.a={multiplier:1,"#text/0!":_.b={m5c:"s0-2",baseCount:0},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=>(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -11,10 +7,7 @@
 <html>
   <head />
   <body>
-    <!--M[1-->
-    <script>
-      (M$h=[]).push(_=&gt;(_.c={1:_.a={baseCount:0,_:_.b={multiplier:1,"#text/0(":_._["@marko/tags-compat-5-to-6"](_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])}},2:{m5c:"s0"}},_.b["#text/0!"]=_.a,_.c),[])
-    </script>
+    <!--M_[1-->
     <!--M#s0-->
     <button
       id="class"
@@ -25,35 +18,29 @@
       <!--F#2-->
       <h1>
         hello
-        <!--M*1 #text/0-->
+        <!--M_*1 #text/0-->
       </h1>
       <button
         id="tags"
       >
         1
-        <!--M*1 #text/2-->
+        <!--M_*1 #text/2-->
          * 
         <!---->
         0
-        <!--M*1 #text/3-->
+        <!--M_*1 #text/3-->
          = 
         <!---->
         0
-        <!--M*1 #text/4-->
+        <!--M_*1 #text/4-->
       </button>
-      <!--M*1 #button/1-->
-      <script>
-        M$h.push(_=&gt;(_.d={1:_.a}),[1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier",])
-      </script>
+      <!--M_*1 #button/1-->
       <!--F/-->
     </div>
     <!--M/-->
+    <!--M_]0 #text/0-->
     <script>
-      $MC=(window.$MC||[]).concat({"g":{"componentIdToScopeId":{"s0-2":1}},"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1,"r":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]})
-    </script>
-    <!--M]0 #text/0-->
-    <script>
-      M$h.push(_=&gt;(_.e={0:_.b}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={multiplier:1,"#text/0!":_.b={m5c:"s0-2",baseCount:0},"#text/0(":_._.$compat_renderer(_._["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"])},1:_.b,2:{m5c:"s0"}},_.b._=_.a,_.c)];M._.e=[1,"$compat_setScope",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier/subscriber",1,"packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_multiplier"];M._.d=1;M._.w();$MC=(window.$MC||[]).concat({"o":{"w":[["s0",0,{"renderBody":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/template.marko_1_renderer",0]},{"f":1}]],"t":["packages/translator-interop/src/__tests__/fixtures/interop-tag-params-tags-to-class/components/class-layout.marko"]},"$$":[{"l":["w",0,3,"r"],"r":["w",0,2,"renderBody"]}]});M._.s.push(_=&gt;(_.d={0:_.a}));M._.e.push(2,"$compat_setScope");M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -65,35 +52,29 @@ inserted #document/html0
 inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/#comment0
-inserted #document/html0/body1/script1
-inserted #document/html0/body1/script1/#text0
-inserted #document/html0/body1/#comment2
-inserted #document/html0/body1/button3
-inserted #document/html0/body1/button3/#text0
-inserted #document/html0/body1/div4
-inserted #document/html0/body1/div4/#comment0
-inserted #document/html0/body1/div4/h11
-inserted #document/html0/body1/div4/h11/#text0
-inserted #document/html0/body1/div4/h11/#comment1
-inserted #document/html0/body1/div4/button2
-inserted #document/html0/body1/div4/button2/#text0
-inserted #document/html0/body1/div4/button2/#comment1
-inserted #document/html0/body1/div4/button2/#text2
-inserted #document/html0/body1/div4/button2/#comment3
-inserted #document/html0/body1/div4/button2/#text4
-inserted #document/html0/body1/div4/button2/#comment5
-inserted #document/html0/body1/div4/button2/#text6
-inserted #document/html0/body1/div4/button2/#comment7
-inserted #document/html0/body1/div4/button2/#text8
-inserted #document/html0/body1/div4/button2/#comment9
-inserted #document/html0/body1/div4/#comment3
-inserted #document/html0/body1/div4/script4
-inserted #document/html0/body1/div4/script4/#text0
-inserted #document/html0/body1/div4/#comment5
+inserted #document/html0/body1/#comment1
+inserted #document/html0/body1/button2
+inserted #document/html0/body1/button2/#text0
+inserted #document/html0/body1/div3
+inserted #document/html0/body1/div3/#comment0
+inserted #document/html0/body1/div3/h11
+inserted #document/html0/body1/div3/h11/#text0
+inserted #document/html0/body1/div3/h11/#comment1
+inserted #document/html0/body1/div3/button2
+inserted #document/html0/body1/div3/button2/#text0
+inserted #document/html0/body1/div3/button2/#comment1
+inserted #document/html0/body1/div3/button2/#text2
+inserted #document/html0/body1/div3/button2/#comment3
+inserted #document/html0/body1/div3/button2/#text4
+inserted #document/html0/body1/div3/button2/#comment5
+inserted #document/html0/body1/div3/button2/#text6
+inserted #document/html0/body1/div3/button2/#comment7
+inserted #document/html0/body1/div3/button2/#text8
+inserted #document/html0/body1/div3/button2/#comment9
+inserted #document/html0/body1/div3/#comment3
+inserted #document/html0/body1/div3/#comment4
+inserted #document/html0/body1/#comment4
 inserted #document/html0/body1/#comment5
 inserted #document/html0/body1/script6
 inserted #document/html0/body1/script6/#text0
-inserted #document/html0/body1/#comment7
-inserted #document/html0/body1/script8
-inserted #document/html0/body1/script8/#text0
 ```

packages/translator-interop/src/__tests__/main.test.ts

@@ -3,7 +3,7 @@ import path from "path";
 import * as compiler from "@marko/compiler";
 import register from "@marko/compiler/register";
 import type { Input, Template } from "@marko/runtime-tags/common/types";
-import reorderRuntime from "@marko/runtime-tags/html/reorder-runtime";
+import { stripInlineRuntime } from "@marko/translator-tags/src/__tests__/utils/strip-inline-runtime";
 import type { DOMWindow } from "jsdom";
 import snap from "mocha-snap";
 import glob from "tiny-glob";
@@ -11,12 +11,6 @@ import createBrowser from "../../../translator-tags/src/__tests__/utils/create-b
 import { isWait } from "../../../translator-tags/src/__tests__/utils/resolve";
 import createMutationTracker from "../../../translator-tags/src/__tests__/utils/track-mutations";
 
-const runtimeId = "X";
-const reorderRuntimeString = String(reorderRuntime).replace(
-  "RUNTIME_ID",
-  runtimeId,
-);
-
 const baseConfig: compiler.Config = {
   translator: require.resolve(".."),
   babelConfig: {
@@ -58,7 +52,7 @@ describe("translator-interop", () => {
   after(() => {
     // TODO: remove this once we have a better way to patch dynamic tags
     delete require("marko/src/runtime/helpers/dynamic-tag").___runtimeCompat;
-    require("@marko/runtime-tags/html").patchDynamicTag(
+    require("@marko/runtime-tags/html").compat.patchDynamicTag(
       (tag: any) => tag._ || tag.renderBody || tag,
       (v: any) => v,
     );
@@ -180,14 +174,9 @@ describe("translator-interop", () => {
         const tracker = createMutationTracker(browser.window, document);
 
         try {
-          const iteratable = serverTemplate.render(input);
-          for await (const data of iteratable) {
-            buffer += data;
-            tracker.log(
-              `# Write\n${indent(
-                data.replace(reorderRuntimeString, "REORDER_RUNTIME"),
-              )}`,
-            );
+          for await (const chunk of serverTemplate.render(input)) {
+            buffer += chunk;
+            tracker.log(`# Write\n${indent(stripInlineRuntime(chunk))}`);
           }
           document.write(`<html><body>${buffer}</body></html>`);
           document.close();

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

@@ -1,4 +1,4 @@
-import { nextScopeId as _nextScopeId, maybeFlush as _maybeFlush, peekNextScope as _peekNextScope, writeScope as _writeScope, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { nextScopeId as _nextScopeId, peekNextScope as _peekNextScope, writeScope as _writeScope, createRenderer as _createRenderer, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 import _hello from "./components/hello/index.marko";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
@@ -10,7 +10,6 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   }) {
     const _scope2_id = _nextScopeId();
     _item.push({});
-    _maybeFlush();
   }
   const _childScope = _peekNextScope();
   _hello._({

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

@@ -1,4 +1,4 @@
-import { write as _write, createRenderer as _createRenderer, register as _register, ensureScopeWithId as _ensureScopeWithId, writeScope as _writeScope, nextScopeId as _nextScopeId, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, getScopeById as _getScopeById, maybeFlush as _maybeFlush, escapeXML as _escapeXML, markResumeNode as _markResumeNode, peekNextScope as _peekNextScope, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { write as _write, createRenderer as _createRenderer, register as _register, ensureScopeWithId as _ensureScopeWithId, writeScope as _writeScope, nextScopeId as _nextScopeId, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, getScopeById as _getScopeById, escapeXML as _escapeXML, markResumeNode as _markResumeNode, peekNextScope as _peekNextScope, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 import _hello from "./components/hello/index.marko";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
@@ -45,7 +45,6 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
       "#text/0(": _ifRenderer,
       "#text/0!": _getScopeById(_ifScopeId)
     });
-    _maybeFlush();
   }
   let _i3 = 0;
   for (const col of [["a", "b"], ["c", "d"]]) {
@@ -66,7 +65,6 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
         "row": row
       });
       _scope10_.set(_i, _getScopeById(_scope10_id));
-      _maybeFlush();
     }
     _col.push({
       x: i,
@@ -75,7 +73,6 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
     _writeScope(_scope8_id, {
       "col": col
     });
-    _maybeFlush();
   }
   _col.push({
     outside: true,

packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/__snapshots__/resume.expected.md

@@ -6,14 +6,14 @@
     <input
       disabled=""
     />
-    <!--M*0 #input/0-->
+    <!--M_*0 #input/0-->
     <button>
       enable
-      <!--M*0 #text/2-->
+      <!--M_*0 #text/2-->
     </button>
-    <!--M*0 #button/1-->
+    <!--M_*0 #button/1-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{disabled:!0}}),[0,"packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/template.marko_0_disabled",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{disabled:!0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/template.marko_0_disabled"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -33,14 +33,14 @@ container.querySelector("button").click()
   <head />
   <body>
     <input />
-    <!--M*0 #input/0-->
+    <!--M_*0 #input/0-->
     <button>
       disable
-      <!--M*0 #text/2-->
+      <!--M_*0 #text/2-->
     </button>
-    <!--M*0 #button/1-->
+    <!--M_*0 #button/1-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{disabled:!0}}),[0,"packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/template.marko_0_disabled",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{disabled:!0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/template.marko_0_disabled"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -63,14 +63,14 @@ container.querySelector("button").click()
     <input
       disabled=""
     />
-    <!--M*0 #input/0-->
+    <!--M_*0 #input/0-->
     <button>
       enable
-      <!--M*0 #text/2-->
+      <!--M_*0 #text/2-->
     </button>
-    <!--M*0 #button/1-->
+    <!--M_*0 #button/1-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{disabled:!0}}),[0,"packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/template.marko_0_disabled",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{disabled:!0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/template.marko_0_disabled"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -91,14 +91,14 @@ container.querySelector("button").click()
   <head />
   <body>
     <input />
-    <!--M*0 #input/0-->
+    <!--M_*0 #input/0-->
     <button>
       disable
-      <!--M*0 #text/2-->
+      <!--M_*0 #text/2-->
     </button>
-    <!--M*0 #button/1-->
+    <!--M_*0 #button/1-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{disabled:!0}}),[0,"packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/template.marko_0_disabled",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{disabled:!0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/template.marko_0_disabled"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <input disabled><!M*0 #input/0><button>enable<!M*0 #text/2></button><!M*0 #button/1><script>(M$h=[]).push(_=>(_.a={0:{disabled:!0}}),[0,"packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/template.marko_0_disabled",])</script>
+  <input disabled><!--M_*0 #input/0--><button>enable<!--M_*0 #text/2--></button><!--M_*0 #button/1--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.a={0:{disabled:!0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/template.marko_0_disabled"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -10,14 +10,14 @@
     <input
       disabled=""
     />
-    <!--M*0 #input/0-->
+    <!--M_*0 #input/0-->
     <button>
       enable
-      <!--M*0 #text/2-->
+      <!--M_*0 #text/2-->
     </button>
-    <!--M*0 #button/1-->
+    <!--M_*0 #button/1-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{disabled:!0}}),[0,"packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/template.marko_0_disabled",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{disabled:!0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/attr-boolean-dynamic/template.marko_0_disabled"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/attr-escape/__snapshots__/resume.expected.md

@@ -9,7 +9,10 @@
       foo="acb"
       nested="a c nested d b"
     />
-    <!--M*0 #div/0-->
+    <!--M_*0 #div/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");M._.d=1
+    </script>
   </body>
 </html>
 ```

packages/translator-tags/src/__tests__/fixtures/attr-escape/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <div class=c foo=acb bar="a d b" nested="a c nested d b"></div><!M*0 #div/0>
+  <div class=c foo=acb bar="a d b" nested="a c nested d b"></div><!--M_*0 #div/0--><script>WALKER_RUNTIME("M")("_");M._.d=1</script>
 
 
 # Render "End"
@@ -13,7 +13,10 @@
       foo="acb"
       nested="a c nested d b"
     />
-    <!--M*0 #div/0-->
+    <!--M_*0 #div/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");M._.d=1
+    </script>
   </body>
 </html>
 ```
@@ -25,4 +28,6 @@ inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
 inserted #document/html0/body1/#comment1
+inserted #document/html0/body1/script2
+inserted #document/html0/body1/script2/#text0
 ```

packages/translator-tags/src/__tests__/fixtures/attr-template-literal-escape/__snapshots__/resume.expected.md

@@ -6,7 +6,10 @@
     <div
       foo="Hello Marko"
     />
-    <!--M*0 #div/0-->
+    <!--M_*0 #div/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");M._.d=1
+    </script>
   </body>
 </html>
 ```

packages/translator-tags/src/__tests__/fixtures/attr-template-literal-escape/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <div foo="Hello Marko"></div><!M*0 #div/0>
+  <div foo="Hello Marko"></div><!--M_*0 #div/0--><script>WALKER_RUNTIME("M")("_");M._.d=1</script>
 
 
 # Render "End"
@@ -10,7 +10,10 @@
     <div
       foo="Hello Marko"
     />
-    <!--M*0 #div/0-->
+    <!--M_*0 #div/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");M._.d=1
+    </script>
   </body>
 </html>
 ```
@@ -22,4 +25,6 @@ inserted #document/html0/head0
 inserted #document/html0/body1
 inserted #document/html0/body1/div0
 inserted #document/html0/body1/#comment1
+inserted #document/html0/body1/script2
+inserted #document/html0/body1/script2/#text0
 ```

packages/translator-tags/src/__tests__/fixtures/basic-chain/__snapshots__/resume.expected.md

@@ -5,8 +5,11 @@
   <body>
     <div>
       6
-      <!--M*0 #text/0-->
+      <!--M_*0 #text/0-->
     </div>
+    <script>
+      WALKER_RUNTIME("M")("_");M._.d=1
+    </script>
   </body>
 </html>
 ```

packages/translator-tags/src/__tests__/fixtures/basic-chain/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <div>6<!M*0 #text/0></div>
+  <div>6<!--M_*0 #text/0--></div><script>WALKER_RUNTIME("M")("_");M._.d=1</script>
 
 
 # Render "End"
@@ -9,8 +9,11 @@
   <body>
     <div>
       6
-      <!--M*0 #text/0-->
+      <!--M_*0 #text/0-->
     </div>
+    <script>
+      WALKER_RUNTIME("M")("_");M._.d=1
+    </script>
   </body>
 </html>
 ```
@@ -23,4 +26,6 @@ inserted #document/html0/body1
 inserted #document/html0/body1/div0
 inserted #document/html0/body1/div0/#text0
 inserted #document/html0/body1/div0/#comment1
+inserted #document/html0/body1/script1
+inserted #document/html0/body1/script1/#text0
 ```

packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/resume.expected.md

@@ -5,11 +5,11 @@
   <body>
     <button>
       0
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -30,11 +30,11 @@ container.querySelector("button").click()
   <body>
     <button>
       1
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button>0<!M*1 #text/1></button><!M*1 #button/0><script>(M$h=[]).push(_=>(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/components/my-button.marko_0_onClick",])</script>
+  <button>0<!--M_*1 #text/1--></button><!--M_*1 #button/0--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/components/my-button.marko_0_onClick"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -9,11 +9,11 @@
   <body>
     <button>
       0
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-attrs/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/resume.expected.md

@@ -5,11 +5,11 @@
   <body>
     <button>
       0
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -30,11 +30,11 @@ container.querySelector("button").click()
   <body>
     <button>
       1
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -55,11 +55,11 @@ container.querySelector("button").click()
   <body>
     <button>
       2
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button>0<!M*1 #text/1></button><!M*1 #button/0><script>(M$h=[]).push(_=>(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/components/my-button.marko_0_onClick",])</script>
+  <button>0<!--M_*1 #text/1--></button><!--M_*1 #button/0--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/components/my-button.marko_0_onClick"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -9,11 +9,11 @@
   <body>
     <button>
       0
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-alias/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/resume.expected.md

@@ -5,15 +5,15 @@
   <body>
     <button>
       0
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
        
       <!---->
       0
-      <!--M*1 #text/2-->
+      <!--M_*1 #text/2-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -34,15 +34,15 @@ container.querySelector("button").click()
   <body>
     <button>
       1
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
        
       <!---->
       1
-      <!--M*1 #text/2-->
+      <!--M_*1 #text/2-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -64,15 +64,15 @@ container.querySelector("button").click()
   <body>
     <button>
       2
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
        
       <!---->
       2
-      <!--M*1 #text/2-->
+      <!--M_*1 #text/2-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button>0<!M*1 #text/1> <!>0<!M*1 #text/2></button><!M*1 #button/0><script>(M$h=[]).push(_=>(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/components/my-button.marko_0_onClick",])</script>
+  <button>0<!--M_*1 #text/1--> <!>0<!--M_*1 #text/2--></button><!--M_*1 #button/0--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/components/my-button.marko_0_onClick"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -9,15 +9,15 @@
   <body>
     <button>
       0
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
        
       <!---->
       0
-      <!--M*1 #text/2-->
+      <!--M_*1 #text/2-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias-within-pattern/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/resume.expected.md

@@ -5,15 +5,15 @@
   <body>
     <button>
       0
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
        
       <!---->
       0
-      <!--M*1 #text/2-->
+      <!--M_*1 #text/2-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -34,15 +34,15 @@ container.querySelector("button").click()
   <body>
     <button>
       1
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
        
       <!---->
       1
-      <!--M*1 #text/2-->
+      <!--M_*1 #text/2-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -64,15 +64,15 @@ container.querySelector("button").click()
   <body>
     <button>
       2
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
        
       <!---->
       2
-      <!--M*1 #text/2-->
+      <!--M_*1 #text/2-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button>0<!M*1 #text/1> <!>0<!M*1 #text/2></button><!M*1 #button/0><script>(M$h=[]).push(_=>(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/components/my-button.marko_0_onClick",])</script>
+  <button>0<!--M_*1 #text/1--> <!>0<!--M_*1 #text/2--></button><!--M_*1 #button/0--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/components/my-button.marko_0_onClick"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -9,15 +9,15 @@
   <body>
     <button>
       0
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
        
       <!---->
       0
-      <!--M*1 #text/2-->
+      <!--M_*1 #text/2-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input-same-source-alias/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/resume.expected.md

@@ -5,11 +5,11 @@
   <body>
     <button>
       0
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -30,11 +30,11 @@ container.querySelector("button").click()
   <body>
     <button>
       1
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -55,11 +55,11 @@ container.querySelector("button").click()
   <body>
     <button>
       2
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-component-input/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button>0<!M*1 #text/1></button><!M*1 #button/0><script>(M$h=[]).push(_=>(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input/components/my-button.marko_0_onClick",])</script>
+  <button>0<!--M_*1 #text/1--></button><!--M_*1 #button/0--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input/components/my-button.marko_0_onClick"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -9,11 +9,11 @@
   <body>
     <button>
       0
-      <!--M*1 #text/1-->
+      <!--M_*1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input/template.marko_0/onClick"](_.a),_.c),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={clickCount:0,"#childScope/0":_.b={}},1:_.b},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-input/template.marko_0/onClick"](_.a),_.c)];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component-input/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/resume.expected.md

@@ -4,14 +4,14 @@
   <head />
   <body>
     <button>
-      <!--M[2-->
+      <!--M_[2-->
       0
-      <!--M*2 #text/0-->
-      <!--M]1 #text/1-->
+      <!--M_*2 #text/0-->
+      <!--M_]1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.d={0:_.a={clickCount:0,"#childScope/0":_.b={"#text/1!":_.c={}}},1:_.b,2:_.c},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_0/onClick"](_.a),_.c._=_.a,_.b["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_renderer"](_.a),_.d),[2,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_clickCount/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.d={0:_.a={clickCount:0,"#childScope/0":_.b={"#text/1!":_.c={}}},1:_.b,2:_.c},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_0/onClick"](_.a),_.c._=_.a,_.b["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_renderer"](_.a),_.d)];M._.e=[2,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_clickCount/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -31,14 +31,14 @@ container.querySelector("button").click()
   <head />
   <body>
     <button>
-      <!--M[2-->
+      <!--M_[2-->
       1
-      <!--M*2 #text/0-->
-      <!--M]1 #text/1-->
+      <!--M_*2 #text/0-->
+      <!--M_]1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.d={0:_.a={clickCount:0,"#childScope/0":_.b={"#text/1!":_.c={}}},1:_.b,2:_.c},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_0/onClick"](_.a),_.c._=_.a,_.b["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_renderer"](_.a),_.d),[2,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_clickCount/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.d={0:_.a={clickCount:0,"#childScope/0":_.b={"#text/1!":_.c={}}},1:_.b,2:_.c},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_0/onClick"](_.a),_.c._=_.a,_.b["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_renderer"](_.a),_.d)];M._.e=[2,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_clickCount/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -58,14 +58,14 @@ container.querySelector("button").click()
   <head />
   <body>
     <button>
-      <!--M[2-->
+      <!--M_[2-->
       2
-      <!--M*2 #text/0-->
-      <!--M]1 #text/1-->
+      <!--M_*2 #text/0-->
+      <!--M_]1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.d={0:_.a={clickCount:0,"#childScope/0":_.b={"#text/1!":_.c={}}},1:_.b,2:_.c},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_0/onClick"](_.a),_.c._=_.a,_.b["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_renderer"](_.a),_.d),[2,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_clickCount/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.d={0:_.a={clickCount:0,"#childScope/0":_.b={"#text/1!":_.c={}}},1:_.b,2:_.c},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_0/onClick"](_.a),_.c._=_.a,_.b["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_renderer"](_.a),_.d)];M._.e=[2,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_clickCount/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -85,14 +85,14 @@ container.querySelector("button").click()
   <head />
   <body>
     <button>
-      <!--M[2-->
+      <!--M_[2-->
       3
-      <!--M*2 #text/0-->
-      <!--M]1 #text/1-->
+      <!--M_*2 #text/0-->
+      <!--M_]1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.d={0:_.a={clickCount:0,"#childScope/0":_.b={"#text/1!":_.c={}}},1:_.b,2:_.c},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_0/onClick"](_.a),_.c._=_.a,_.b["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_renderer"](_.a),_.d),[2,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_clickCount/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.d={0:_.a={clickCount:0,"#childScope/0":_.b={"#text/1!":_.c={}}},1:_.b,2:_.c},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_0/onClick"](_.a),_.c._=_.a,_.b["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_renderer"](_.a),_.d)];M._.e=[2,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_clickCount/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button><!M[2>0<!M*2 #text/0><!M]1 #text/1></button><!M*1 #button/0><script>(M$h=[]).push(_=>(_.d={0:_.a={clickCount:0,"#childScope/0":_.b={"#text/1!":_.c={}}},1:_.b,2:_.c},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_0/onClick"](_.a),_.c._=_.a,_.b["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_renderer"](_.a),_.d),[2,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_clickCount/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick",])</script>
+  <button><!--M_[2-->0<!--M_*2 #text/0--><!--M_]1 #text/1--></button><!--M_*1 #button/0--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.d={0:_.a={clickCount:0,"#childScope/0":_.b={"#text/1!":_.c={}}},1:_.b,2:_.c},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_0/onClick"](_.a),_.c._=_.a,_.b["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_renderer"](_.a),_.d)];M._.e=[2,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_clickCount/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -8,14 +8,14 @@
   <head />
   <body>
     <button>
-      <!--M[2-->
+      <!--M_[2-->
       0
-      <!--M*2 #text/0-->
-      <!--M]1 #text/1-->
+      <!--M_*2 #text/0-->
+      <!--M_]1 #text/1-->
     </button>
-    <!--M*1 #button/0-->
+    <!--M_*1 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.d={0:_.a={clickCount:0,"#childScope/0":_.b={"#text/1!":_.c={}}},1:_.b,2:_.c},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_0/onClick"](_.a),_.c._=_.a,_.b["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_renderer"](_.a),_.d),[2,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_clickCount/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.d={0:_.a={clickCount:0,"#childScope/0":_.b={"#text/1!":_.c={}}},1:_.b,2:_.c},_.b.onClick=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_0/onClick"](_.a),_.c._=_.a,_.b["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_renderer"](_.a),_.d)];M._.e=[2,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/template.marko_1_clickCount/subscriber",1,"packages/translator-tags/src/__tests__/fixtures/basic-component-renderBody/components/my-button.marko_0_onClick"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-component/__snapshots__/resume.expected.md

@@ -6,12 +6,12 @@
     <div>
       <button>
         0
-        <!--M*1 #text/1-->
+        <!--M_*1 #text/1-->
       </button>
-      <!--M*1 #button/0-->
+      <!--M_*1 #button/0-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{"#childScope/0":_.a={clickCount:0}},1:_.a}),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{"#childScope/0":_.a={clickCount:0}},1:_.a})];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -33,12 +33,12 @@ container.querySelector("button").click()
     <div>
       <button>
         1
-        <!--M*1 #text/1-->
+        <!--M_*1 #text/1-->
       </button>
-      <!--M*1 #button/0-->
+      <!--M_*1 #button/0-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{"#childScope/0":_.a={clickCount:0}},1:_.a}),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{"#childScope/0":_.a={clickCount:0}},1:_.a})];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-component/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <div><button>0<!M*1 #text/1></button><!M*1 #button/0></div><script>(M$h=[]).push(_=>(_.b={0:{"#childScope/0":_.a={clickCount:0}},1:_.a}),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount",])</script>
+  <div><button>0<!--M_*1 #text/1--></button><!--M_*1 #button/0--></div><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.b={0:{"#childScope/0":_.a={clickCount:0}},1:_.a})];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -10,12 +10,12 @@
     <div>
       <button>
         0
-        <!--M*1 #text/1-->
+        <!--M_*1 #text/1-->
       </button>
-      <!--M*1 #button/0-->
+      <!--M_*1 #button/0-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{"#childScope/0":_.a={clickCount:0}},1:_.a}),[1,"packages/translator-tags/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{"#childScope/0":_.a={clickCount:0}},1:_.a})];M._.e=[1,"packages/translator-tags/src/__tests__/fixtures/basic-component/components/counter.marko_0_clickCount"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/__snapshots__/resume.expected.md

@@ -6,19 +6,19 @@
     <button
       class="inc"
     />
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       class="toggle"
     />
-    <!--M*0 #button/1-->
-    <!--M[1-->
+    <!--M_*0 #button/1-->
+    <!--M_[1-->
     The count is 
     <!---->
     0
-    <!--M*1 #text/0-->
-    <!--M]0 #text/2-->
+    <!--M_*1 #text/0-->
+    <!--M_]0 #text/2-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -40,19 +40,19 @@ container.querySelector("button.inc").click()
     <button
       class="inc"
     />
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       class="toggle"
     />
-    <!--M*0 #button/1-->
-    <!--M[1-->
+    <!--M_*0 #button/1-->
+    <!--M_[1-->
     The count is 
     <!---->
     1
-    <!--M*1 #text/0-->
-    <!--M]0 #text/2-->
+    <!--M_*1 #text/0-->
+    <!--M_]0 #text/2-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -74,14 +74,14 @@ container.querySelector("button.toggle").click()
     <button
       class="inc"
     />
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       class="toggle"
     />
-    <!--M*0 #button/1-->
-    <!--M]0 #text/2-->
+    <!--M_*0 #button/1-->
+    <!--M_]0 #text/2-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -109,14 +109,14 @@ container.querySelector("button.inc").click()
     <button
       class="inc"
     />
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       class="toggle"
     />
-    <!--M*0 #button/1-->
-    <!--M]0 #text/2-->
+    <!--M_*0 #button/1-->
+    <!--M_]0 #text/2-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -138,14 +138,14 @@ container.querySelector("button.toggle").click()
     <button
       class="inc"
     />
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       class="toggle"
     />
-    <!--M*0 #button/1-->
+    <!--M_*0 #button/1-->
     The count is 2
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -170,14 +170,14 @@ container.querySelector("button.inc").click()
     <button
       class="inc"
     />
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       class="toggle"
     />
-    <!--M*0 #button/1-->
+    <!--M_*0 #button/1-->
     The count is 3
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button class=inc></button><!M*0 #button/0><button class=toggle></button><!M*0 #button/1><!M[1>The count is <!>0<!M*1 #text/0><!M]0 #text/2><script>(M$h=[]).push(_=>(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])</script>
+  <button class=inc></button><!--M_*0 #button/0--><button class=toggle></button><!--M_*0 #button/1--><!--M_[1-->The count is <!>0<!--M_*1 #text/0--><!--M_]0 #text/2--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -10,19 +10,19 @@
     <button
       class="inc"
     />
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       class="toggle"
     />
-    <!--M*0 #button/1-->
-    <!--M[1-->
+    <!--M_*0 #button/1-->
+    <!--M_[1-->
     The count is 
     <!---->
     0
-    <!--M*1 #text/0-->
-    <!--M]0 #text/2-->
+    <!--M_*1 #text/0-->
+    <!--M_]0 #text/2-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter-multiple-nodes/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/__snapshots__/resume.expected.md

@@ -6,18 +6,18 @@
     <button
       class="inc"
     />
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       class="toggle"
     />
-    <!--M*0 #button/1-->
+    <!--M_*0 #button/1-->
     <span>
       0
-      <!--M*1 #text/0-->
+      <!--M_*1 #text/0-->
     </span>
-    <!--M|0 #text/2 1-->
+    <!--M_|0 #text/2 1-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -39,18 +39,18 @@ container.querySelector("button.inc").click()
     <button
       class="inc"
     />
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       class="toggle"
     />
-    <!--M*0 #button/1-->
+    <!--M_*0 #button/1-->
     <span>
       1
-      <!--M*1 #text/0-->
+      <!--M_*1 #text/0-->
     </span>
-    <!--M|0 #text/2 1-->
+    <!--M_|0 #text/2 1-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -72,14 +72,14 @@ container.querySelector("button.toggle").click()
     <button
       class="inc"
     />
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       class="toggle"
     />
-    <!--M*0 #button/1-->
-    <!--M|0 #text/2 1-->
+    <!--M_*0 #button/1-->
+    <!--M_|0 #text/2 1-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -103,14 +103,14 @@ container.querySelector("button.inc").click()
     <button
       class="inc"
     />
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       class="toggle"
     />
-    <!--M*0 #button/1-->
-    <!--M|0 #text/2 1-->
+    <!--M_*0 #button/1-->
+    <!--M_|0 #text/2 1-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -132,16 +132,16 @@ container.querySelector("button.toggle").click()
     <button
       class="inc"
     />
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       class="toggle"
     />
-    <!--M*0 #button/1-->
+    <!--M_*0 #button/1-->
     <span>
       2
     </span>
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -165,16 +165,16 @@ container.querySelector("button.inc").click()
     <button
       class="inc"
     />
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       class="toggle"
     />
-    <!--M*0 #button/1-->
+    <!--M_*0 #button/1-->
     <span>
       3
     </span>
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button class=inc></button><!M*0 #button/0><button class=toggle></button><!M*0 #button/1><span>0<!M*1 #text/0></span><!M|0 #text/2 1><script>(M$h=[]).push(_=>(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])</script>
+  <button class=inc></button><!--M_*0 #button/0--><button class=toggle></button><!--M_*0 #button/1--><span>0<!--M_*1 #text/0--></span><!--M_|0 #text/2 1--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -10,18 +10,18 @@
     <button
       class="inc"
     />
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       class="toggle"
     />
-    <!--M*0 #button/1-->
+    <!--M_*0 #button/1-->
     <span>
       0
-      <!--M*1 #text/0-->
+      <!--M_*1 #text/0-->
     </span>
-    <!--M|0 #text/2 1-->
+    <!--M_|0 #text/2 1-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={show:!0,count:0,"#text/2!":_.b={}},1:_.b},_.a["#text/2("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_show",0,"packages/translator-tags/src/__tests__/fixtures/basic-conditional-counter/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-converge-in-if/__snapshots__/resume.expected.md

@@ -4,9 +4,9 @@
   <head />
   <body>
     0
-    <!--M*1 #text/0-->
+    <!--M_*1 #text/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={a:0,b:0,"#text/0!":_.b={}},1:_.b},_.b._=_.a,_.c),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={a:0,b:0,"#text/0!":_.b={}},1:_.b},_.b._=_.a,_.c)];M._.d=1
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-converge-in-if/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  0<!M*1 #text/0><script>(M$h=[]).push(_=>(_.c={0:_.a={a:0,b:0,"#text/0!":_.b={}},1:_.b},_.b._=_.a,_.c),[])</script>
+  0<!--M_*1 #text/0--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.c={0:_.a={a:0,b:0,"#text/0!":_.b={}},1:_.b},_.b._=_.a,_.c)];M._.d=1</script>
 
 
 # Render "End"
@@ -8,9 +8,9 @@
   <head />
   <body>
     0
-    <!--M*1 #text/0-->
+    <!--M_*1 #text/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={a:0,b:0,"#text/0!":_.b={}},1:_.b},_.b._=_.a,_.c),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={a:0,b:0,"#text/0!":_.b={}},1:_.b},_.b._=_.a,_.c)];M._.d=1
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/__snapshots__/resume.expected.md

@@ -9,22 +9,22 @@
       increase multiplier (
       <!---->
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
       )
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       id="count"
     >
       increase count
     </button>
-    <!--M*0 #button/2-->
+    <!--M_*0 #button/2-->
     <div>
       0
-      <!--M*0 #text/3-->
+      <!--M_*0 #text/3-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0,multiplier:1}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_count",0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_multiplier",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{count:0,multiplier:1}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_count",0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_multiplier"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -49,22 +49,22 @@ container.querySelector("button#count").click()
       increase multiplier (
       <!---->
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
       )
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       id="count"
     >
       increase count
     </button>
-    <!--M*0 #button/2-->
+    <!--M_*0 #button/2-->
     <div>
       1
-      <!--M*0 #text/3-->
+      <!--M_*0 #text/3-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0,multiplier:1}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_count",0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_multiplier",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{count:0,multiplier:1}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_count",0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_multiplier"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -89,22 +89,22 @@ container.querySelector("button#count").click()
       increase multiplier (
       <!---->
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
       )
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       id="count"
     >
       increase count
     </button>
-    <!--M*0 #button/2-->
+    <!--M_*0 #button/2-->
     <div>
       2
-      <!--M*0 #text/3-->
+      <!--M_*0 #text/3-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0,multiplier:1}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_count",0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_multiplier",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{count:0,multiplier:1}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_count",0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_multiplier"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -129,22 +129,22 @@ container.querySelector("button#multiplier").click()
       increase multiplier (
       <!---->
       2
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
       )
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       id="count"
     >
       increase count
     </button>
-    <!--M*0 #button/2-->
+    <!--M_*0 #button/2-->
     <div>
       4
-      <!--M*0 #text/3-->
+      <!--M_*0 #text/3-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0,multiplier:1}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_count",0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_multiplier",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{count:0,multiplier:1}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_count",0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_multiplier"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button id=multiplier>increase multiplier (<!>1<!M*0 #text/1>)</button><!M*0 #button/0><button id=count>increase count</button><!M*0 #button/2><div>0<!M*0 #text/3></div><script>(M$h=[]).push(_=>(_.a={0:{count:0,multiplier:1}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_count",0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_multiplier",])</script>
+  <button id=multiplier>increase multiplier (<!>1<!--M_*0 #text/1-->)</button><!--M_*0 #button/0--><button id=count>increase count</button><!--M_*0 #button/2--><div>0<!--M_*0 #text/3--></div><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.a={0:{count:0,multiplier:1}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_count",0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_multiplier"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -13,22 +13,22 @@
       increase multiplier (
       <!---->
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
       )
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <button
       id="count"
     >
       increase count
     </button>
-    <!--M*0 #button/2-->
+    <!--M_*0 #button/2-->
     <div>
       0
-      <!--M*0 #text/3-->
+      <!--M_*0 #text/3-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0,multiplier:1}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_count",0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_multiplier",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{count:0,multiplier:1}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_count",0,"packages/translator-tags/src/__tests__/fixtures/basic-counter-multiplier/template.marko_0_multiplier"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-counter/__snapshots__/resume.expected.md

@@ -6,12 +6,12 @@
     <div>
       <button>
         0
-        <!--M*0 #text/1-->
+        <!--M_*0 #text/1-->
       </button>
-      <!--M*0 #button/0-->
+      <!--M_*0 #button/0-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{clickCount:0}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{clickCount:0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -33,12 +33,12 @@ container.querySelector("button").click()
     <div>
       <button>
         1
-        <!--M*0 #text/1-->
+        <!--M_*0 #text/1-->
       </button>
-      <!--M*0 #button/0-->
+      <!--M_*0 #button/0-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{clickCount:0}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{clickCount:0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -60,12 +60,12 @@ container.querySelector("button").click()
     <div>
       <button>
         2
-        <!--M*0 #text/1-->
+        <!--M_*0 #text/1-->
       </button>
-      <!--M*0 #button/0-->
+      <!--M_*0 #button/0-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{clickCount:0}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{clickCount:0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -87,12 +87,12 @@ container.querySelector("button").click()
     <div>
       <button>
         3
-        <!--M*0 #text/1-->
+        <!--M_*0 #text/1-->
       </button>
-      <!--M*0 #button/0-->
+      <!--M_*0 #button/0-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{clickCount:0}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{clickCount:0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-counter/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <div><button>0<!M*0 #text/1></button><!M*0 #button/0></div><script>(M$h=[]).push(_=>(_.a={0:{clickCount:0}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount",])</script>
+  <div><button>0<!--M_*0 #text/1--></button><!--M_*0 #button/0--></div><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.a={0:{clickCount:0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -10,12 +10,12 @@
     <div>
       <button>
         0
-        <!--M*0 #text/1-->
+        <!--M_*0 #text/1-->
       </button>
-      <!--M*0 #button/0-->
+      <!--M_*0 #button/0-->
     </div>
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{clickCount:0}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{clickCount:0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-counter/template.marko_0_clickCount"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-dynamic-native-tag/__snapshots__/resume.expected.md

@@ -1,17 +1,17 @@
 # Render {"tagName":"h1"}
 ```html
+<!--M_[1-->
 <html>
   <head />
   <body>
-    <!--M[1-->
     <h1
       class="a b"
     >
       Hello World
     </h1>
-    <!--M]0 #text/0-->
+    <!--M_]0 #text/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{"#text/0!":_.a={},"#text/0(":"h1"},1:_.a}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{"#text/0!":_.a={},"#text/0(":"h1"},1:_.a})];M._.d=1
     </script>
   </body>
 </html>
@@ -19,6 +19,5 @@
 
 # Mutations
 ```
-removed #document/html0/body1/#comment0 before #document/html0
-inserted #document/html0/body1/#comment0
+
 ```

packages/translator-tags/src/__tests__/fixtures/basic-dynamic-native-tag/__snapshots__/ssr.expected.md

@@ -1,10 +1,10 @@
 # Write
-  <!M[1><h1 class="a b">Hello World</h1><!M]0 #text/0><script>(M$h=[]).push(_=>(_.b={0:{"#text/0!":_.a={},"#text/0(":"h1"},1:_.a}),[])</script>
+  <!--M_[1--><h1 class="a b">Hello World</h1><!--M_]0 #text/0--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.b={0:{"#text/0!":_.a={},"#text/0(":"h1"},1:_.a})];M._.d=1</script>
 
 
 # Render "End"
 ```html
-<!--M[1-->
+<!--M_[1-->
 <html>
   <head />
   <body>
@@ -13,9 +13,9 @@
     >
       Hello World
     </h1>
-    <!--M]0 #text/0-->
+    <!--M_]0 #text/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.b={0:{"#text/0!":_.a={},"#text/0(":"h1"},1:_.a}),[])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.b={0:{"#text/0!":_.a={},"#text/0(":"h1"},1:_.a})];M._.d=1
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/__snapshots__/resume.expected.md

@@ -3,7 +3,7 @@
 <html>
   <head>
     <script>
-      (M$h=[]).push(_=&gt;(null),[0,"packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/template.marko_0",])
+      WALKER_RUNTIME("M")("_");M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/template.marko_0"];M._.d=1;M._.w()
     </script>
   </head>
   <body

packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <script>(M$h=[]).push(_=>(null),[0,"packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/template.marko_0",])</script>
+  <script>WALKER_RUNTIME("M")("_");M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/template.marko_0"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -7,7 +7,7 @@
 <html>
   <head>
     <script>
-      (M$h=[]).push(_=&gt;(null),[0,"packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/template.marko_0",])
+      WALKER_RUNTIME("M")("_");M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-effect-no-deps/template.marko_0"];M._.d=1;M._.w()
     </script>
   </head>
   <body />

packages/translator-tags/src/__tests__/fixtures/basic-execution-order/__snapshots__/resume.expected.md

@@ -6,12 +6,12 @@
     <button>
       hide
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     hi
-    <!--M*1 #text/0-->
-    <!--M|0 #text/1 1-->
+    <!--M_*1 #text/0-->
+    <!--M_|0 #text/1 1-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={message:{text:"hi"},"#text/1!":_.b={}},1:_.b},_.a["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_0",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={message:{text:"hi"},"#text/1!":_.b={}},1:_.b},_.a["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_0"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -33,11 +33,11 @@ container.querySelector("button").click()
     <button>
       hide
     </button>
-    <!--M*0 #button/0-->
-    <!--M|0 #text/1 1-->
-    <!--M*1 #text/0-->
+    <!--M_*0 #button/0-->
+    <!--M_|0 #text/1 1-->
+    <!--M_*1 #text/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={message:{text:"hi"},"#text/1!":_.b={}},1:_.b},_.a["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_0",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={message:{text:"hi"},"#text/1!":_.b={}},1:_.b},_.a["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_0"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-execution-order/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button>hide</button><!M*0 #button/0>hi<!M*1 #text/0><!M|0 #text/1 1><script>(M$h=[]).push(_=>(_.c={0:_.a={message:{text:"hi"},"#text/1!":_.b={}},1:_.b},_.a["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_0",])</script>
+  <button>hide</button><!--M_*0 #button/0-->hi<!--M_*1 #text/0--><!--M_|0 #text/1 1--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.c={0:_.a={message:{text:"hi"},"#text/1!":_.b={}},1:_.b},_.a["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_0"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -10,12 +10,12 @@
     <button>
       hide
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     hi
-    <!--M*1 #text/0-->
-    <!--M|0 #text/1 1-->
+    <!--M_*1 #text/0-->
+    <!--M_|0 #text/1 1-->
     <script>
-      (M$h=[]).push(_=&gt;(_.c={0:_.a={message:{text:"hi"},"#text/1!":_.b={}},1:_.b},_.a["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_1_renderer"](_.a),_.b._=_.a,_.c),[0,"packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_0",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.c={0:_.a={message:{text:"hi"},"#text/1!":_.b={}},1:_.b},_.a["#text/1("]=_._["packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_1_renderer"](_.a),_.b._=_.a,_.c)];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-execution-order/template.marko_0"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-export/__snapshots__/resume.expected.md

@@ -5,8 +5,11 @@
   <body>
     <div>
       123
-      <!--M*0 #text/0-->
+      <!--M_*0 #text/0-->
     </div>
+    <script>
+      WALKER_RUNTIME("M")("_");M._.d=1
+    </script>
   </body>
 </html>
 ```

packages/translator-tags/src/__tests__/fixtures/basic-export/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <div>123<!M*0 #text/0></div>
+  <div>123<!--M_*0 #text/0--></div><script>WALKER_RUNTIME("M")("_");M._.d=1</script>
 
 
 # Render "End"
@@ -9,8 +9,11 @@
   <body>
     <div>
       123
-      <!--M*0 #text/0-->
+      <!--M_*0 #text/0-->
     </div>
+    <script>
+      WALKER_RUNTIME("M")("_");M._.d=1
+    </script>
   </body>
 </html>
 ```
@@ -23,4 +26,6 @@ inserted #document/html0/body1
 inserted #document/html0/body1/div0
 inserted #document/html0/body1/div0/#text0
 inserted #document/html0/body1/div0/#comment1
+inserted #document/html0/body1/script1
+inserted #document/html0/body1/script1/#text0
 ```

packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/__snapshots__/resume.expected.md

@@ -5,11 +5,11 @@
   <body>
     <button>
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{count:0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -30,11 +30,11 @@ container.querySelector("button").click()
   <body>
     <button>
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{count:0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -55,11 +55,11 @@ container.querySelector("button").click()
   <body>
     <button>
       2
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{count:0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -80,11 +80,11 @@ container.querySelector("button").click()
   <body>
     <button>
       3
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{count:0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button>0<!M*0 #text/1></button><!M*0 #button/0><script>(M$h=[]).push(_=>(_.a={0:{count:0}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count",])</script>
+  <button>0<!--M_*0 #text/1--></button><!--M_*0 #button/0--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.a={0:{count:0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -9,11 +9,11 @@
   <body>
     <button>
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{count:0}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{count:0}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-fn-with-block/template.marko_0_count"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/__snapshots__/resume.expected.md

@@ -5,11 +5,11 @@
   <body>
     <button>
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{a:[0],b:1}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{a:[0],b:1}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -30,11 +30,11 @@ container.querySelector("button").click()
   <body>
     <button>
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{a:[0],b:1}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{a:[0],b:1}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button>0<!M*0 #text/1></button><!M*0 #button/0><script>(M$h=[]).push(_=>(_.a={0:{a:[0],b:1}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b",])</script>
+  <button>0<!--M_*0 #text/1--></button><!--M_*0 #button/0--><script>WALKER_RUNTIME("M")("_");M._.s=[_=>(_.a={0:{a:[0],b:1}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -9,11 +9,11 @@
   <body>
     <button>
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(_.a={0:{a:[0],b:1}}),[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b",])
+      WALKER_RUNTIME("M")("_");M._.s=[_=&gt;(_.a={0:{a:[0],b:1}})];M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-multi-ref-nested/template.marko_0_a_b"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-handler-refless/__snapshots__/resume.expected.md

@@ -5,11 +5,11 @@
   <body>
     <button>
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(null),[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-refless/template.marko_0",])
+      WALKER_RUNTIME("M")("_");M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-refless/template.marko_0"];M._.d=1;M._.w()
     </script>
   </body>
 </html>
@@ -30,11 +30,11 @@ container.querySelector("button").click()
   <body>
     <button>
       1
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(null),[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-refless/template.marko_0",])
+      WALKER_RUNTIME("M")("_");M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-refless/template.marko_0"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-handler-refless/__snapshots__/ssr.expected.md

@@ -1,5 +1,5 @@
 # Write
-  <button>0<!M*0 #text/1></button><!M*0 #button/0><script>(M$h=[]).push(_=>(null),[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-refless/template.marko_0",])</script>
+  <button>0<!--M_*0 #text/1--></button><!--M_*0 #button/0--><script>WALKER_RUNTIME("M")("_");M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-refless/template.marko_0"];M._.d=1;M._.w()</script>
 
 
 # Render "End"
@@ -9,11 +9,11 @@
   <body>
     <button>
       0
-      <!--M*0 #text/1-->
+      <!--M_*0 #text/1-->
     </button>
-    <!--M*0 #button/0-->
+    <!--M_*0 #button/0-->
     <script>
-      (M$h=[]).push(_=&gt;(null),[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-refless/template.marko_0",])
+      WALKER_RUNTIME("M")("_");M._.e=[0,"packages/translator-tags/src/__tests__/fixtures/basic-handler-refless/template.marko_0"];M._.d=1;M._.w()
     </script>
   </body>
 </html>

packages/translator-tags/src/__tests__/fixtures/basic-inert-collapsible-tree/__snapshots__/html.expected/components/comments.js

@@ -1,4 +1,4 @@
-import { write as _write, markResumeScopeStart as _markResumeScopeStart, attr as _attr, escapeXML as _escapeXML, markResumeNode as _markResumeNode, peekNextScope as _peekNextScope, ensureScopeWithId as _ensureScopeWithId, writeScope as _writeScope, nextScopeId as _nextScopeId, createRenderer as _createRenderer, register as _register, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, getScopeById as _getScopeById, markResumeControlEnd as _markResumeControlEnd, writeEffect as _writeEffect, maybeFlush as _maybeFlush, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
+import { write as _write, markResumeScopeStart as _markResumeScopeStart, attr as _attr, escapeXML as _escapeXML, markResumeNode as _markResumeNode, peekNextScope as _peekNextScope, ensureScopeWithId as _ensureScopeWithId, writeScope as _writeScope, nextScopeId as _nextScopeId, createRenderer as _createRenderer, register as _register, markResumeControlSingleNodeEnd as _markResumeControlSingleNodeEnd, getScopeById as _getScopeById, markResumeControlEnd as _markResumeControlEnd, writeEffect as _writeEffect, createTemplate as _createTemplate } from "@marko/runtime-tags/debug/html";
 import _comments from "./comments.marko";
 const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
   const _scope0_id = _nextScopeId();
@@ -37,7 +37,6 @@ const _renderer = /* @__PURE__ */_createRenderer((input, _tagVar) => {
       "_": _ensureScopeWithId(_scope0_id)
     });
     _scope1_.set(i, _getScopeById(_scope1_id));
-    _maybeFlush();
   }
   _write(`${_markResumeControlEnd(_scope0_id, "#ul/0")}</ul>${_markResumeNode(_scope0_id, "#ul/0")}`);
   _writeScope(_scope0_id, {