perf: improve function serialization inlining

.changeset/hot-oranges-wonder.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Improve serialized function inlining (reduces html serialized state size).

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-tags-to-class/__snapshots__/writes.debug.html

@@ -3,18 +3,17 @@
   id=class data-parent=0>0</button><!--M/--><!--M_]1 #text/2 2-->
 <script>
   WALKER_RUNTIME("M")("_");
-  M._.r = [_ => (_.b = [0, _.a = {
-    "ConditionalRenderer:#text/2": _._[
+  M._.r = [_ => (_.a = [0, {
+    "ConditionalRenderer:#text/2": _._.$compat_renderer(_._[
       "packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-tags-to-class/components/class-counter.marko"
-      ],
+      ]),
     count: 0
   }, {
     m5c: "_0",
     m5i: {
       count: 0
     }
-  }], _.a["ConditionalRenderer:#text/2"] = _._.$compat_renderer(_.a[
-    "ConditionalRenderer:#text/2"]), _.b)];
+  }])];
   M._.w();
   $MC = (window.$MC || []).concat({
     "p": "_",

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-tags-to-class/__snapshots__/writes.html

@@ -1,17 +1,17 @@
-<!-- total: 628 (min) 390 (brotli) -->
+<!-- total: 606 (min) 380 (brotli) -->
 <button id=tags>0<!--M_*1 b--></button><!--M_*1 a--><!--M_[--><!--M#_0--><button
   id=class data-parent=0>0</button><!--M/--><!--M_]1 c 2-->
 <script>
   WALKER_RUNTIME("M")("_");
-  M._.r = [_ => (_.b = [0, _.a = {
-    Dc: _._.b,
+  M._.r = [_ => (_.a = [0, {
+    Dc: _._.$C_r(_._.b),
     d: 0
   }, {
     m5c: "_0",
     m5i: {
       count: 0
     }
-  }], _.a.Dc = _._.$C_r(_.a.Dc), _.b)];
+  }])];
   M._.w();
   $MC = (window.$MC || []).concat({
     "p": "_",

packages/runtime-tags/src/__tests__/fixtures-interop/interop-event-handler-render-body-tags-to-class/__snapshots__/writes.debug.html

@@ -1,22 +1,21 @@
 <!--M_[--><!--M#_0--><button><!--F#1-->0<!--M_*3 #text/0--><!--F/--></button><!--M/--><!--M_]1 #text/0 2-->
 <script>
   WALKER_RUNTIME("M")("_");
-  M._.r = [_ => (_.c = [0, _.a = {
-      "ConditionalRenderer:#text/0": _._[
+  M._.r = [_ => (_.c = [0, _.b = {
+      "ConditionalRenderer:#text/0": _._.$compat_renderer(_._[
         "packages/runtime-tags/src/__tests__/fixtures-interop/interop-event-handler-render-body-tags-to-class/components/my-button.marko"
-        ],
+        ]),
       count: 0,
       "ClosureScopes:count": _.d = new Set
     }, {
       m5c: "_0",
-      m5i: _.b = {}
+      m5i: _.a = {}
     }, _.e = {
       m5c: "_0-1",
-      _: _.a
-    }], _.a["ConditionalRenderer:#text/0"] = _._.$compat_renderer(_.a[
-      "ConditionalRenderer:#text/0"]), _.b.renderBody = _._[
+      _: _.b
+    }], _.a.renderBody = _._[
       "packages/runtime-tags/src/__tests__/fixtures-interop/interop-event-handler-render-body-tags-to-class/template.marko_1_content"
-      ](_.a), (_.d).add(_.e), _.c), _ => (_.f = [-3, _.a]),
+      ](_.b), (_.d).add(_.e), _.c), _ => (_.f = [-3, _.b]),
     "$compat_setScope 3"
   ];
   M._.w();

packages/runtime-tags/src/__tests__/fixtures-interop/interop-event-handler-render-body-tags-to-class/__snapshots__/writes.html

@@ -1,19 +1,20 @@
-<!-- total: 722 (min) 464 (brotli) -->
+<!-- total: 708 (min) 467 (brotli) -->
 <!--M_[--><!--M#_0--><button><!--F#1-->0<!--M_*3 a--><!--F/--></button><!--M/--><!--M_]1 a 2-->
 <script>
   WALKER_RUNTIME("M")("_");
-  M._.r = [_ => (_.c = [0, _.a = {
-    Da: _._.b,
+  M._.r = [_ => (_.c = [0, _.b = {
+    Da: _._.$C_r(_._.b),
     b: 0,
     Bb: _.d = new Set
   }, {
     m5c: "_0",
-    m5i: _.b = {}
+    m5i: _.a = {}
   }, _.e = {
     m5c: "_0-1",
-    _: _.a
-  }], _.a.Da = _._.$C_r(_.a.Da), _.b.renderBody = _._.a1(_.a), (_.d).add(_
-    .e), _.c), _ => (_.f = [-3, _.a]), "$C_s 3"];
+    _: _.b
+  }], _.a.renderBody = _._.a1(_.b), (_.d).add(_.e), _.c), _ => (_.f = [-3, _
+    .b
+  ]), "$C_s 3"];
   M._.w();
   $MC = (window.$MC || []).concat({
     "p": "_",

packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/__snapshots__/writes.debug.html

@@ -4,14 +4,14 @@
   WALKER_RUNTIME("M")("_");
   M._.r = [_ => (_.b = [0, 1, {
     m5c: "_0",
-    m5i: _.a = {
-      renderBody: _.c = {}
+    m5i: {
+      renderBody: _._[
+        "packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/template.marko_1_content"
+        ](_.a = {})
     }
   }, {
     m5c: "_0-1"
-  }], _.a.renderBody = _._[
-    "packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/template.marko_1_content"
-    ](_.c), _.b), _ => (_.d = [-3, _.c]), "$compat_setScope 3"];
+  }]), _ => (_.c = [-3, _.a]), "$compat_setScope 3"];
   M._.w();
   $MC = (window.$MC || []).concat({
     "p": "_",

packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/__snapshots__/writes.html

@@ -1,16 +1,16 @@
-<!-- total: 652 (min) 407 (brotli) -->
+<!-- total: 625 (min) 397 (brotli) -->
 <!--M#_0--><button><!--F#1-->Say Hi<!--F/--></button><!--M/--><span
   id=display></span>
 <script>
   WALKER_RUNTIME("M")("_");
   M._.r = [_ => (_.b = [0, 1, {
     m5c: "_0",
-    m5i: _.a = {
-      renderBody: _.c = {}
+    m5i: {
+      renderBody: _._.a1(_.a = {})
     }
   }, {
     m5c: "_0-1"
-  }], _.a.renderBody = _._.a1(_.c), _.b), _ => (_.d = [-3, _.c]), "$C_s 3"];
+  }]), _ => (_.c = [-3, _.a]), "$C_s 3"];
   M._.w();
   $MC = (window.$MC || []).concat({
     "p": "_",

packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/writes.debug.html

@@ -8,12 +8,12 @@
 <t M_=4><!--M_#b--></t>
 <script>
   WALKER_RUNTIME("M")("_");
-  M._.r = [_ => (_.b = [0, 3, _.a = {
+  M._.r = [_ => (_.b = [0, 3, {
     "#BranchAccessor": "#text/1",
-    "#PlaceholderContent": _.c = {}
-  }], _.a["#PlaceholderContent"] = _._[
-    "packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/tags/recurse.marko_4_content"
-    ](_.c), _.b)];
+    "#PlaceholderContent": _._[
+      "packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/tags/recurse.marko_4_content"
+      ](_.a = {})
+  }])];
   REORDER_RUNTIME(M._);
   M._.w()
 </script>
@@ -26,12 +26,12 @@
 </t>
 <t M_=9><!--M_#c--></t>
 <script>
-  M._.r.push(_ => (_.e = [4, _.d = {
+  M._.r.push(_ => (_.d = [4, {
     "#BranchAccessor": "#text/1",
-    "#PlaceholderContent": _.f = {}
-  }], _.d["#PlaceholderContent"] = _._[
-    "packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/tags/recurse.marko_4_content"
-    ](_.f), _.e));
+    "#PlaceholderContent": _._[
+      "packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/tags/recurse.marko_4_content"
+      ](_.c = {})
+  }]));
   M._.w()
 </script>
 
@@ -43,12 +43,12 @@
 </t>
 <t M_=14><!--M_#d--></t>
 <script>
-  M._.r.push(_ => (_.h = [4, _.g = {
+  M._.r.push(_ => (_.f = [4, {
     "#BranchAccessor": "#text/1",
-    "#PlaceholderContent": _.i = {}
-  }], _.g["#PlaceholderContent"] = _._[
-    "packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/tags/recurse.marko_4_content"
-    ](_.i), _.h));
+    "#PlaceholderContent": _._[
+      "packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/tags/recurse.marko_4_content"
+      ](_.e = {})
+  }]));
   M._.w()
 </script>
 
@@ -60,12 +60,12 @@
 </t>
 <t M_=19><!--M_#e--></t>
 <script>
-  M._.r.push(_ => (_.k = [4, _.j = {
+  M._.r.push(_ => (_.h = [4, {
     "#BranchAccessor": "#text/1",
-    "#PlaceholderContent": _.l = {}
-  }], _.j["#PlaceholderContent"] = _._[
-    "packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/tags/recurse.marko_4_content"
-    ](_.l), _.k));
+    "#PlaceholderContent": _._[
+      "packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/tags/recurse.marko_4_content"
+      ](_.g = {})
+  }]));
   M._.w()
 </script>
 

packages/runtime-tags/src/__tests__/fixtures/async-deep-recursive/__snapshots__/writes.html

@@ -1,4 +1,4 @@
-<!-- total: 1682 (min) 717 (brotli) -->
+<!-- total: 1610 (min) 686 (brotli) -->
 <div data-level=4><!--M_[--><!--M_!^4-->LOADING...<!--M_!4--><!--M_]3 b 4-->
 </div>
 <style M_>
@@ -9,10 +9,10 @@
 <t M_=4><!--M_#b--></t>
 <script>
   WALKER_RUNTIME("M")("_");
-  M._.r = [_ => (_.b = [0, 3, _.a = {
+  M._.r = [_ => (_.b = [0, 3, {
     C: "b",
-    Q: _.c = {}
-  }], _.a.Q = _._.b1(_.c), _.b)];
+    Q: _._.b1(_.a = {})
+  }])];
   REORDER_RUNTIME(M._);
   M._.w()
 </script>
@@ -25,10 +25,10 @@
 </t>
 <t M_=9><!--M_#c--></t>
 <script>
-  M._.r.push(_ => (_.e = [4, _.d = {
+  M._.r.push(_ => (_.d = [4, {
     C: "b",
-    Q: _.f = {}
-  }], _.d.Q = _._.b1(_.f), _.e));
+    Q: _._.b1(_.c = {})
+  }]));
   M._.w()
 </script>
 
@@ -40,10 +40,10 @@
 </t>
 <t M_=14><!--M_#d--></t>
 <script>
-  M._.r.push(_ => (_.h = [4, _.g = {
+  M._.r.push(_ => (_.f = [4, {
     C: "b",
-    Q: _.i = {}
-  }], _.g.Q = _._.b1(_.i), _.h));
+    Q: _._.b1(_.e = {})
+  }]));
   M._.w()
 </script>
 
@@ -55,10 +55,10 @@
 </t>
 <t M_=19><!--M_#e--></t>
 <script>
-  M._.r.push(_ => (_.k = [4, _.j = {
+  M._.r.push(_ => (_.h = [4, {
     C: "b",
-    Q: _.l = {}
-  }], _.j.Q = _._.b1(_.l), _.k));
+    Q: _._.b1(_.g = {})
+  }]));
   M._.w()
 </script>
 

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-before-and-after-isolated-boundaries/__snapshots__/writes.debug.html

@@ -1,20 +1,20 @@
 <!--M_[--><!--M_!^b-->
 <script>
   WALKER_RUNTIME("M")("_");
-  M._.r = [_ => (_.d = [0, 1, _.a = {
+  M._.r = [_ => (_.d = [0, 1, {
     "#BranchAccessor": "#text/0",
-    "#CatchContent": _.e = {}
+    "#CatchContent": _._[
+      "packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-before-and-after-isolated-boundaries/template.marko_2_content"
+      ](_.a = {})
   }, _.b = {
     "#BranchAccessor": "#text/1"
   }, _.c = {
     "#BranchAccessor": "#text/2"
-  }], _.a["#CatchContent"] = _._[
-    "packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-before-and-after-isolated-boundaries/template.marko_2_content"
-    ](_.e), _.b["#CatchContent"] = _._[
+  }], _.b["#CatchContent"] = _._[
     "packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-before-and-after-isolated-boundaries/template.marko_5_content"
-    ](_.e), _.c["#CatchContent"] = _._[
+    ](_.a), _.c["#CatchContent"] = _._[
     "packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-before-and-after-isolated-boundaries/template.marko_8_content"
-    ](_.e), _.d)]
+    ](_.a), _.d)]
 </script>
 
 <!-- FLUSH -->

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-before-and-after-isolated-boundaries/__snapshots__/writes.html

@@ -1,15 +1,15 @@
-<!-- total: 1310 (min) 697 (brotli) -->
+<!-- total: 1296 (min) 696 (brotli) -->
 <!--M_[--><!--M_!^b-->
 <script>
   WALKER_RUNTIME("M")("_");
-  M._.r = [_ => (_.d = [0, 1, _.a = {
+  M._.r = [_ => (_.d = [0, 1, {
     C: "a",
-    E: _.e = {}
+    E: _._.a0(_.a = {})
   }, _.b = {
     C: "b"
   }, _.c = {
     C: "c"
-  }], _.a.E = _._.a0(_.e), _.b.E = _._.a2(_.e), _.c.E = _._.a5(_.e), _.d)]
+  }], _.b.E = _._.a2(_.a), _.c.E = _._.a5(_.a), _.d)]
 </script>
 
 <!-- FLUSH -->

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/__snapshots__/writes.debug.html

@@ -1,16 +1,16 @@
 <!--M_[--><!--M_!^b-->
 <script>
   WALKER_RUNTIME("M")("_");
-  M._.r = [_ => (_.c = [0, 1, _.a = {
+  M._.r = [_ => (_.c = [0, 1, {
     "#BranchAccessor": "#text/0",
-    "#CatchContent": _.d = {}
+    "#CatchContent": _._[
+      "packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/template.marko_2_content"
+      ](_.a = {})
   }, _.b = {
     "#BranchAccessor": "#text/1"
-  }], _.a["#CatchContent"] = _._[
-    "packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/template.marko_2_content"
-    ](_.d), _.b["#CatchContent"] = _._[
+  }], _.b["#CatchContent"] = _._[
     "packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/template.marko_5_content"
-    ](_.d), _.c)]
+    ](_.a), _.c)]
 </script>
 
 <!-- FLUSH -->

packages/runtime-tags/src/__tests__/fixtures/async-reject-then-resolve-isolated-boundaries/__snapshots__/writes.html

@@ -1,13 +1,13 @@
-<!-- total: 1122 (min) 642 (brotli) -->
+<!-- total: 1108 (min) 635 (brotli) -->
 <!--M_[--><!--M_!^b-->
 <script>
   WALKER_RUNTIME("M")("_");
-  M._.r = [_ => (_.c = [0, 1, _.a = {
+  M._.r = [_ => (_.c = [0, 1, {
     C: "a",
-    E: _.d = {}
+    E: _._.a0(_.a = {})
   }, _.b = {
     C: "b"
-  }], _.a.E = _._.a0(_.d), _.b.E = _._.a2(_.d), _.c)]
+  }], _.b.E = _._.a2(_.a), _.c)]
 </script>
 
 <!-- FLUSH -->