fix: optimize pure signals as plain functions

Author: rturnq

.changeset/cute-melons-vanish.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Optimize pure const signals which cache downstream as plain functions

.sizes.json

@@ -44,16 +44,16 @@
     {
       "name": "comments",
       "user": {
-        "min": 745,
-        "brotli": 396
+        "min": 701,
+        "brotli": 372
       },
       "runtime": {
         "min": 7059,
         "brotli": 3086
       },
       "total": {
-        "min": 7804,
-        "brotli": 3482
+        "min": 7760,
+        "brotli": 3458
       }
     },
     {

.sizes/comments.csr/entry.js

@@ -1,4 +1,4 @@
-// size: 745 (min) 396 (brotli)
+// size: 701 (min) 372 (brotli)
 const $if_content__setup = ($scope) => {
     ($scope.a,
       $if_content__comment_comments._($scope),
@@ -29,42 +29,37 @@ const $if_content__setup = ($scope) => {
   $for_content__setup = ($scope) => {
     ($for_content__input_path._($scope), $for_content__open($scope, !0));
   },
-  $for_content__comment_text = _const(7, ($scope) => _text($scope.b, $scope.h)),
   $for_content__if = _if(4, "<ul></ul>", "/ b&", $if_content__setup),
   $for_content__comment_comments = _const(8, ($scope) => {
     ($for_content__if($scope, $scope.i ? 0 : 1),
       $if_content__comment_comments($scope));
   }),
-  $for_content__$params = _const(5, ($scope) =>
-    $for_content__comment($scope, $scope.f[0]),
-  ),
-  $for_content__comment = _const(6, ($scope) => {
-    ($for_content__comment_text($scope, $scope.g?.text),
-      $for_content__comment_comments($scope, $scope.g?.comments));
-  }),
+  $for_content__$params = ($scope, $params2) =>
+    $for_content__comment($scope, $params2[0]),
+  $for_content__comment = ($scope, comment) => {
+    ((($scope, comment_text) => {
+      _text($scope.b, comment_text);
+    })($scope, comment?.text),
+      $for_content__comment_comments($scope, comment?.comments));
+  },
   $for = _for_of(
     0,
     "<li><span> </span><button> </button><!></li>",
     " E l D l%l",
     $for_content__setup,
     $for_content__$params,
   ),
-  $input_comments$1 = _const(3, ($scope) => $for($scope, [$scope.d])),
+  $input_comments$1 = ($scope, input_comments) =>
+    $for($scope, [input_comments]),
   $input_path$1 = _const(4, $for_content__input_path);
 function $setup($scope) {
   $scope.a;
 }
-const $input_comments = _const(3, ($scope) =>
-    $input_comments$1($scope.a, $scope.d),
-  ),
-  $input_path = _const(4, ($scope) => $input_path$1($scope.a, $scope.e));
-_template(
-  "b",
-  "<ul></ul>",
-  "/ b&",
-  $setup,
-  _const(2, ($scope) => {
-    ($input_comments($scope, $scope.c.comments),
-      $input_path($scope, $scope.c.path));
-  }),
-).mount();
+_template("b", "<ul></ul>", "/ b&", $setup, ($scope, input) => {
+  ((($scope, input_comments) => {
+    $input_comments$1($scope.a, input_comments);
+  })($scope, input.comments),
+    (($scope, input_path) => {
+      $input_path$1($scope.a, input_path);
+    })($scope, input.path));
+}).mount();

packages/runtime-tags/src/__tests__/fixtures-interop/custom-tag-parameters-from-args/__snapshots__/dom.expected/components/custom-tag.js

@@ -23,5 +23,5 @@ export function $setup($scope) {
   $y($scope, 10);
 }
 export const $input_content = /* @__PURE__ */_._const("input_content", $input_content__OR__x__OR__y);
-export const $input = /* @__PURE__ */_._const("input", $scope => $input_content($scope, $scope.input.content));
+export const $input = ($scope, input) => $input_content($scope, input.content);
 export default /* @__PURE__ */_._template("__tests__/components/custom-tag.marko", $template, $walks, $setup, $input);

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-class-to-tags/__snapshots__/dom.expected/components/tags-counter.js

@@ -11,6 +11,6 @@ const $count = /* @__PURE__ */_._let("count/5", $scope => {
 export function $setup($scope) {
   $count($scope, 0);
 }
-export const $input_count = /* @__PURE__ */_._const("input_count", $scope => _._attr($scope["#button/0"], "data-parent", $scope.input_count));
-export const $input = /* @__PURE__ */_._const("input", $scope => $input_count($scope, $scope.input.count));
+export const $input_count = ($scope, input_count) => _._attr($scope["#button/0"], "data-parent", input_count);
+export const $input = ($scope, input) => $input_count($scope, input.count);
 export default /* @__PURE__ */_._template("__tests__/components/tags-counter.marko", $template, $walks, $setup, $input);

packages/runtime-tags/src/__tests__/fixtures-interop/interop-class-to-tags-import/__snapshots__/dom.expected/components/tags-counter.js

@@ -11,6 +11,6 @@ const $count = /* @__PURE__ */_._let("count/5", $scope => {
 export function $setup($scope) {
   $count($scope, 0);
 }
-export const $input_count = /* @__PURE__ */_._const("input_count", $scope => _._attr($scope["#button/0"], "data-parent", $scope.input_count));
-export const $input = /* @__PURE__ */_._const("input", $scope => $input_count($scope, $scope.input.count));
+export const $input_count = ($scope, input_count) => _._attr($scope["#button/0"], "data-parent", input_count);
+export const $input = ($scope, input) => $input_count($scope, input.count);
 export default /* @__PURE__ */_._template("__tests__/components/tags-counter.marko", $template, $walks, $setup, $input);

packages/runtime-tags/src/__tests__/fixtures-interop/interop-nested-attr-tags-class-to-tags/__snapshots__/dom.expected/components/tags-layout.js

@@ -12,7 +12,7 @@ export function $setup($scope) {
   $count($scope, 0);
 }
 const $dynamicTag = /* @__PURE__ */_._dynamic_tag("#text/2");
-export const $input_stuff_content = /* @__PURE__ */_._const("input_stuff_content", $scope => $dynamicTag($scope, $scope.input_stuff_content));
-export const $input = /* @__PURE__ */_._const("input", $scope => $input_stuff($scope, $scope.input.stuff));
-export const $input_stuff = /* @__PURE__ */_._const("input_stuff", $scope => $input_stuff_content($scope, $scope.input_stuff?.content));
+export const $input_stuff_content = ($scope, input_stuff_content) => $dynamicTag($scope, input_stuff_content);
+export const $input = ($scope, input) => $input_stuff($scope, input.stuff);
+export const $input_stuff = ($scope, input_stuff) => $input_stuff_content($scope, input_stuff?.content);
 export default /* @__PURE__ */_._template("__tests__/components/tags-layout.marko", $template, $walks, $setup, $input);

packages/runtime-tags/src/__tests__/fixtures-interop/interop-nested-class-to-tags/__snapshots__/dom.expected/components/tags-layout.js

@@ -12,6 +12,6 @@ export function $setup($scope) {
   $count($scope, 0);
 }
 const $dynamicTag = /* @__PURE__ */_._dynamic_tag("#text/2");
-export const $input_content = /* @__PURE__ */_._const("input_content", $scope => $dynamicTag($scope, $scope.input_content));
-export const $input = /* @__PURE__ */_._const("input", $scope => $input_content($scope, $scope.input.content));
+export const $input_content = ($scope, input_content) => $dynamicTag($scope, input_content);
+export const $input = ($scope, input) => $input_content($scope, input.content);
 export default /* @__PURE__ */_._template("__tests__/components/tags-layout.marko", $template, $walks, $setup, $input);

packages/runtime-tags/src/__tests__/fixtures-interop/interop-tag-params-class-to-tags/__snapshots__/dom.expected/components/tags-layout.js

@@ -15,5 +15,5 @@ export function $setup($scope) {
   $count($scope, 0);
 }
 export const $input_content = /* @__PURE__ */_._const("input_content", $input_content__OR__count);
-export const $input = /* @__PURE__ */_._const("input", $scope => $input_content($scope, $scope.input.content));
+export const $input = ($scope, input) => $input_content($scope, input.content);
 export default /* @__PURE__ */_._template("__tests__/components/tags-layout.marko", $template, $walks, $setup, $input);

packages/runtime-tags/src/__tests__/fixtures-interop/interop-tag-params-tags-to-class/__snapshots__/dom.expected/template.js

@@ -4,7 +4,7 @@ export const $walks = /* over(1), replace, over(2) */"b%c";
 import * as _ from "@marko/runtime-tags/debug/dom";
 import _classLayout from "./components/class-layout.marko";
 _._resume("__tests__/components/class-layout.marko", _classLayout);
-const $classlayout_content__message = /* @__PURE__ */_._const("message", $scope => _._text($scope["#text/0"], $scope.message));
+const $classlayout_content__message = ($scope, message) => _._text($scope["#text/0"], message);
 const $classlayout_content__multiplier__OR__baseCount = /* @__PURE__ */_._or(7, $scope => _._text($scope["#text/4"], $scope._.multiplier * $scope.baseCount));
 const $classlayout_content__multiplier__script = _._script("__tests__/template.marko_1_multiplier", $scope => _._on($scope["#button/1"], "click", function () {
   $multiplier($scope._, $scope._.multiplier + 1);
@@ -19,10 +19,10 @@ const $classlayout_content__baseCount = /* @__PURE__ */_._const("baseCount", $sc
   $classlayout_content__multiplier__OR__baseCount($scope);
 });
 const $classlayout_content__setup = $classlayout_content__multiplier;
-const $classlayout_content__$params = /* @__PURE__ */_._const("$params2", $scope => {
-  $classlayout_content__baseCount($scope, $scope.$params2[0]);
-  $classlayout_content__message($scope, $scope.$params2[1]);
-});
+const $classlayout_content__$params = ($scope, $params2) => {
+  $classlayout_content__baseCount($scope, $params2[0]);
+  $classlayout_content__message($scope, $params2[1]);
+};
 const $classlayout_content = _._content_resume("__tests__/template.marko_1_content", "<h1> </h1><button id=tags><!> * <!> = <!></button>", /* next(1), get, out(1), get, next(1), replace, over(2), replace, over(2), replace, out(1) */"D l D%c%c%l", $classlayout_content__setup, $classlayout_content__$params);
 const $multiplier__closure = /* @__PURE__ */_._closure($classlayout_content__multiplier);
 const $multiplier = /* @__PURE__ */_._let("multiplier/1", $multiplier__closure);