fix: missing serialisation when child tag has its own state

.changeset/cozy-drinks-roll.md

@@ -0,0 +1,6 @@
+---
+"@marko/runtime-tags": patch
+"marko": patch
+---
+
+fix: register content renderer when downstream component has own state

packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/dom.bundle.debug.js

@@ -0,0 +1,30 @@
+// tags/consumer.marko
+const $template$1 = "<button id=toggle>toggle</button><!><!>";
+const $walks$1 = " b%c";
+const $if_content__dynamicTag = /* @__PURE__ */ _dynamic_tag("#text/0");
+const $if_content__input_content = /* @__PURE__ */ _if_closure("#text/1", 0, ($scope) => $if_content__dynamicTag($scope, $scope._.input_content));
+const $if_content__setup = $if_content__input_content;
+const $if = /* @__PURE__ */ _if("#text/1", "<!><!><!>", "b%c", $if_content__setup);
+const $show__script = _script("__tests__/tags/consumer.marko_0_show", ($scope) => _on($scope["#button/0"], "click", function() {
+	$show($scope, !$scope.show);
+}));
+const $show = /* @__PURE__ */ _let("show/5", ($scope) => {
+	$if($scope, $scope.show ? 0 : 1);
+	$show__script($scope);
+});
+function $setup$1($scope) {
+	$show($scope, false);
+}
+const $input = ($scope, input) => $input_content($scope, input.content);
+const $input_content = /* @__PURE__ */ _const("input_content", $if_content__input_content);
+var consumer_default = /* @__PURE__ */ _template("__tests__/tags/consumer.marko", $template$1, $walks$1, $setup$1, $input);
+
+// template.marko
+const $template = /* @__PURE__ */ ((_w0) => `${_w0}<!>`)($template$1);
+const $walks = /* @__PURE__ */ ((_w0) => `/${_w0}&b`)($walks$1);
+const $consumer_content = _content_resume("__tests__/template.marko_1_content", "<div>static content</div>", "b");
+function $setup($scope) {
+	$setup$1($scope["#childScope/0"]);
+	$input_content($scope["#childScope/0"], $consumer_content($scope));
+}
+var template_default = /* @__PURE__ */ _template("__tests__/template.marko", $template, $walks, $setup);

packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/dom.bundle.js

@@ -0,0 +1,15 @@
+// total: 13125 (min) 5073 (brotli)
+// tags/consumer.marko: 175 (min) 131 (brotli)
+const $if_content__dynamicTag = /* @__PURE__ */ _dynamic_tag(0);
+const $if_content__input_content = /* @__PURE__ */ _if_closure(1, 0, ($scope) => $if_content__dynamicTag($scope, $scope._.e));
+const $if = /* @__PURE__ */ _if(1, "<!><!><!>", "b%c", $if_content__input_content);
+const $show__script = _script("b0", ($scope) => _on($scope.a, "click", function() {
+	$show($scope, !$scope.f);
+}));
+const $show = /* @__PURE__ */ _let(5, ($scope) => {
+	$if($scope, $scope.f ? 0 : 1);
+	$show__script($scope);
+});
+
+// template.marko: 54 (min) 58 (brotli)
+const $consumer_content = _content_resume("a0", "<div>static content</div>", "b");

packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/html.bundle.debug.js

@@ -0,0 +1,35 @@
+// tags/consumer.marko
+var consumer_default = _template("__tests__/tags/consumer.marko", (input) => {
+	const $scope0_reason = _scope_reason();
+	const $scope0_id = _scope_id();
+	let show = false;
+	_html(`<button id=toggle>toggle</button>${_el_resume($scope0_id, "#button/0")}`);
+	_if(() => {
+		if (show) {
+			const $scope1_id = _scope_id();
+			_dynamic_tag($scope1_id, "#text/0", input.content, {}, 0, 0, _serialize_guard($scope0_reason, 0));
+			writeScope($scope1_id, { _: _serialize_if($scope0_reason, 0) && _scope_with_id($scope0_id) }, "__tests__/tags/consumer.marko", "3:2");
+			return 0;
+		}
+	}, $scope0_id, "#text/1");
+	_script($scope0_id, "__tests__/tags/consumer.marko_0_show");
+	writeScope($scope0_id, {
+		input_content: input.content,
+		show
+	}, "__tests__/tags/consumer.marko", 0, {
+		input_content: ["input.content"],
+		show: "1:6"
+	});
+	_resume_branch($scope0_id);
+});
+
+// template.marko
+var template_default = _template("__tests__/template.marko", (input) => {
+	_scope_reason();
+	const $scope0_id = _scope_id();
+	consumer_default({ content: _content_resume("__tests__/template.marko_1_content", () => {
+		_scope_reason();
+		const $scope1_id = _scope_id();
+		_html("<div>static content</div>");
+	}, $scope0_id) });
+}, 1);

packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/html.bundle.js

@@ -0,0 +1,24 @@
+// tags/consumer.marko
+var consumer_default = _template("b", (input) => {
+	_scope_reason();
+	const $scope0_id = _scope_id();
+	let show = false;
+	_html(`<button id=toggle>toggle</button>${_el_resume($scope0_id, "a")}`);
+	_if(() => {}, $scope0_id, "b");
+	_script($scope0_id, "b0");
+	writeScope($scope0_id, {
+		e: input.content,
+		f: show
+	});
+	_resume_branch($scope0_id);
+});
+
+// template.marko
+var template_default = _template("a", (input) => {
+	_scope_reason();
+	consumer_default({ content: _content_resume("a0", () => {
+		_scope_reason();
+		_scope_id();
+		_html("<div>static content</div>");
+	}, _scope_id()) });
+}, 1);

packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/render.debug.md

@@ -0,0 +1,43 @@
+# Render
+```html
+<button
+  id="toggle"
+>
+  toggle
+</button>
+```
+
+# Update
+```js
+container.querySelector("button#toggle").click();
+```
+```html
+<button
+  id="toggle"
+>
+  toggle
+</button>
+<div>
+  static content
+</div>
+```
+## Change
+```
+INSERT: #toggle + div
+```
+
+# Update
+```js
+container.querySelector("button#toggle").click();
+```
+```html
+<button
+  id="toggle"
+>
+  toggle
+</button>
+```
+## Change
+```
+REMOVE: #toggle + div
+```

packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/render.md

@@ -0,0 +1,43 @@
+# Render
+```html
+<button
+  id="toggle"
+>
+  toggle
+</button>
+```
+
+# Update
+```js
+container.querySelector("button#toggle").click();
+```
+```html
+<button
+  id="toggle"
+>
+  toggle
+</button>
+<div>
+  static content
+</div>
+```
+## Change
+```
+INSERT: #toggle + div
+```
+
+# Update
+```js
+container.querySelector("button#toggle").click();
+```
+```html
+<button
+  id="toggle"
+>
+  toggle
+</button>
+```
+## Change
+```
+REMOVE: #toggle + div
+```

packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/writes.debug.html

@@ -0,0 +1,14 @@
+<button
+  id=toggle>toggle</button><!--M_*2 #button/0--><!--M_[--><!--M_]2 #text/1-->
+<script>
+  WALKER_RUNTIME("M")("_");
+  M._.r = [_ => (_.b = [0, 1, {
+      input_content: _._[
+        "packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/template.marko_1_content"
+        ](_.a = {}),
+      show: !1
+    }]),
+    "packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/tags/consumer.marko_0_show 2"
+  ];
+  M._.w()
+</script>

packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/writes.html

@@ -0,0 +1,10 @@
+<!-- total: 412 (min) 273 (brotli) -->
+<button id=toggle>toggle</button><!--M_*2 a--><!--M_[--><!--M_]2 b-->
+<script>
+  WALKER_RUNTIME("M")("_");
+  M._.r = [_ => (_.b = [0, 1, {
+    e: _._.a0(_.a = {}),
+    f: !1
+  }]), "b0 2"];
+  M._.w()
+</script>

packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/tags/consumer.marko

@@ -0,0 +1,5 @@
+<let/show=false/>
+<button#toggle onClick() { show = !show }>toggle</button>
+<if=show>
+  <${input.content}/>
+</if>

packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/template.marko

@@ -0,0 +1,3 @@
+<consumer>
+  <div>static content</div>
+</consumer>

packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/test.ts

@@ -0,0 +1,9 @@
+import type { TestConfig } from "../../main.test";
+
+function toggle(container: Element) {
+  container.querySelector<HTMLButtonElement>("button#toggle")!.click();
+}
+
+export const config: TestConfig = {
+  steps: [{}, toggle, toggle],
+};

packages/runtime-tags/src/translator/util/sections.ts

@@ -323,7 +323,7 @@ export function getSectionRegisterReasons(section: Section) {
     );
     if (!downstreamReasons) return false;
     if (
-      downstreamReasons !== true &&
+      isReasonDynamic(downstreamReasons) &&
       !section.serializeReason &&
       !section.serializeReasons.size &&
       !section.parent?.serializeReason &&