fix: ensure serizlie reason is set before child call (#2864)

Author: rturnq

.changeset/fluffy-cars-grow.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Ensure serialize reason is set before child call in server compilation

packages/runtime-tags/src/__tests__/fixtures/at-tag-inside-if-tag/__snapshots__/html.expected/template.js

@@ -7,6 +7,11 @@ export default _._template("__tests__/template.marko", input => {
     x
   } = input;
   const $childScope = _._peek_scope_id();
+  _._set_serialize_reason({
+    /* input.thing.x, input.thing.content */0: _._serialize_guard($serialize, /* x */0),
+    /* input.thing.x */1: _._serialize_guard($serialize, /* x */0),
+    /* input.thing.content */2: _._serialize_guard($serialize, /* x */0)
+  });
   let $thing;
   if (x) {
     $thing = _.attrTag({
@@ -25,11 +30,6 @@ export default _._template("__tests__/template.marko", input => {
       })
     });
   }
-  _._set_serialize_reason({
-    /* input.thing.x, input.thing.content */0: _._serialize_guard($serialize, /* x */0),
-    /* input.thing.x */1: _._serialize_guard($serialize, /* x */0),
-    /* input.thing.content */2: _._serialize_guard($serialize, /* x */0)
-  });
   _customTag({
     thing: $thing
   });

packages/runtime-tags/src/__tests__/fixtures/at-tags-dynamic-with-params/__snapshots__/html.expected/template.js

@@ -4,6 +4,7 @@ export default _._template("__tests__/template.marko", input => {
   const $scope0_id = _._scope_id();
   let x = true;
   const $childScope = _._peek_scope_id();
+  _._set_serialize_reason(/* state: x */1);
   let $item;
   if (x) {
     $item = _.attrTag({
@@ -15,7 +16,6 @@ export default _._template("__tests__/template.marko", input => {
       })
     });
   }
-  _._set_serialize_reason(/* state: x */1);
   _hello({
     item: $item
   });

packages/runtime-tags/src/__tests__/fixtures/tag-var-with-serialize-reason/__snapshots__/.name-cache.json

@@ -0,0 +1,13 @@
+{
+  "vars": {
+    "props": {
+      "$_": "m",
+      "$init": "o",
+      "$$count__script": "r",
+      "$$count": "t",
+      "$$if_content": "n",
+      "$$if": "_",
+      "$$input_value": "a"
+    }
+  }
+}

packages/runtime-tags/src/__tests__/fixtures/tag-var-with-serialize-reason/__snapshots__/csr-sanitized.expected.md

@@ -0,0 +1,43 @@
+# Render
+```html
+<button>
+  1
+</button>
+<span />
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  2
+</button>
+<span />
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  3
+</button>
+<span />
+```
+
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  4
+</button>
+<span />
+```

packages/runtime-tags/src/__tests__/fixtures/tag-var-with-serialize-reason/__snapshots__/csr.expected.md

@@ -0,0 +1,72 @@
+# Render
+```html
+<button>
+  1
+</button>
+<!---->
+<span />
+<!---->
+<!---->
+```
+
+# Mutations
+```
+INSERT button, #comment0, span, #comment1, #comment2
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  2
+</button>
+<!---->
+<span />
+<!---->
+<!---->
+```
+
+# Mutations
+```
+UPDATE button/#text "1" => "2"
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  3
+</button>
+<!---->
+<span />
+<!---->
+<!---->
+```
+
+# Mutations
+```
+UPDATE button/#text "2" => "3"
+```
+
+# Render
+```js
+container.querySelector("button").click();
+```
+```html
+<button>
+  4
+</button>
+<!---->
+<span />
+<!---->
+<!---->
+```
+
+# Mutations
+```
+UPDATE button/#text "3" => "4"
+```

packages/runtime-tags/src/__tests__/fixtures/tag-var-with-serialize-reason/__snapshots__/dom.expected/tags/child.js

@@ -0,0 +1,11 @@
+export const $template = "<!><!><!>";
+export const $walks = /* over(1), replace, over(2) */"b%c";
+import * as _ from "@marko/runtime-tags/debug/dom";
+const $if_content = /* @__PURE__ */_._content_branch("<span></span>", /* over(1) */"b");
+const $if = /* @__PURE__ */_._if("#text/0", $if_content);
+export const $input_value = /* @__PURE__ */_._const("input_value", ($scope, input_value) => $if($scope, input_value ? 0 : 1));
+export function $setup($scope) {
+  _._return($scope, 1);
+}
+export const $input = /* @__PURE__ */_._const("input", ($scope, input) => $input_value($scope, input.value));
+export default /* @__PURE__ */_._template("__tests__/tags/child.marko", $template, $walks, $setup, $input);

packages/runtime-tags/src/__tests__/fixtures/tag-var-with-serialize-reason/__snapshots__/dom.expected/template.hydrate.js

@@ -0,0 +1,17 @@
+// size: 244 (min) 173 (brotli)
+const $if_content = _._content_branch("<span></span>", "b"),
+  $if = _._if(0, $if_content),
+  $input_value = _._const(3, ($scope, input_value) =>
+    $if($scope, input_value ? 0 : 1),
+  ),
+  $count__script = _._script("b0", ($scope, { 4: count }) =>
+    _._on($scope[0], "click", function () {
+      $count($scope, ++count);
+    }),
+  ),
+  $count = _._let(4, ($scope, count) => {
+    (_._text($scope[1], count),
+      $input_value($scope[2], count),
+      $count__script($scope));
+  });
+(_._var_resume("b1", ($scope) => {}), init());

packages/runtime-tags/src/__tests__/fixtures/tag-var-with-serialize-reason/__snapshots__/dom.expected/template.js

@@ -0,0 +1,21 @@
+export const $template = `<button> </button>${_child_template}<!>`;
+export const $walks = /* get, next(1), get, out(1), beginChildWithVar, _child_walks, endChild, over(1) */` D l0${_child_walks}&b`;
+import * as _ from "@marko/runtime-tags/debug/dom";
+import { $setup as _child, $input_value as _child_input_value, $template as _child_template, $walks as _child_walks } from "./tags/child.marko";
+const $count__script = _._script("__tests__/template.marko_0_count", ($scope, {
+  count
+}) => _._on($scope["#button/0"], "click", function () {
+  $count($scope, ++count);
+}));
+const $count = /* @__PURE__ */_._let("count/4", ($scope, count) => {
+  _._text($scope["#text/1"], count);
+  _child_input_value($scope["#childScope/2"], count);
+  $count__script($scope);
+});
+export function $setup($scope) {
+  _._var($scope, "#childScope/2", $x);
+  _child($scope["#childScope/2"]);
+  $count($scope, 1);
+}
+const $x = _._var_resume("__tests__/template.marko_0_x/var", $scope => {});
+export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup);

packages/runtime-tags/src/__tests__/fixtures/tag-var-with-serialize-reason/__snapshots__/html.expected/tags/child.js

@@ -0,0 +1,16 @@
+import * as _ from "@marko/runtime-tags/debug/html";
+export default _._template("__tests__/tags/child.marko", input => {
+  const $serialize = _._get_serialize_reason();
+  const $scope0_id = _._scope_id();
+  _._if(() => {
+    if (input.value) {
+      const $scope1_id = _._scope_id();
+      _._html("<span></span>");
+      _._serialize_guard($serialize, /* input.value */0) && _._scope($scope1_id, {}, "__tests__/tags/child.marko", "1:2");
+      return 0;
+    }
+  }, $scope0_id, "#text/0", _._serialize_guard($serialize, /* input.value */0), _._serialize_guard($serialize, /* input.value */0), _._serialize_guard($serialize, /* input.value */0), 0, 1);
+  const $return = 1;
+  _._serialize_guard($serialize, /* input.value */0) && _._scope($scope0_id, {}, "__tests__/tags/child.marko", 0);
+  return $return;
+});