diff --git a/.changeset/cozy-drinks-roll.md b/.changeset/cozy-drinks-roll.md new file mode 100644 index 0000000000..dd98854508 --- /dev/null +++ b/.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 diff --git a/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/dom.bundle.debug.js b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/dom.bundle.debug.js new file mode 100644 index 0000000000..ce53006e27 --- /dev/null +++ b/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 = ""; +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", "
static content
", "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); diff --git a/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/dom.bundle.js b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/dom.bundle.js new file mode 100644 index 0000000000..6acffd620b --- /dev/null +++ b/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", "
static content
", "b"); diff --git a/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/html.bundle.debug.js b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/html.bundle.debug.js new file mode 100644 index 0000000000..15f8512921 --- /dev/null +++ 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(`${_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("
static content
"); + }, $scope0_id) }); +}, 1); diff --git a/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/html.bundle.js b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/html.bundle.js new file mode 100644 index 0000000000..9702495967 --- /dev/null +++ b/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(`${_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("
static content
"); + }, _scope_id()) }); +}, 1); diff --git a/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/render.debug.md b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/render.debug.md new file mode 100644 index 0000000000..705235b9f5 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/render.debug.md @@ -0,0 +1,43 @@ +# Render +```html + +``` + +# Update +```js +container.querySelector("button#toggle").click(); +``` +```html + +
+ static content +
+``` +## Change +``` +INSERT: #toggle + div +``` + +# Update +```js +container.querySelector("button#toggle").click(); +``` +```html + +``` +## Change +``` +REMOVE: #toggle + div +``` diff --git a/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/render.md b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/render.md new file mode 100644 index 0000000000..705235b9f5 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/render.md @@ -0,0 +1,43 @@ +# Render +```html + +``` + +# Update +```js +container.querySelector("button#toggle").click(); +``` +```html + +
+ static content +
+``` +## Change +``` +INSERT: #toggle + div +``` + +# Update +```js +container.querySelector("button#toggle").click(); +``` +```html + +``` +## Change +``` +REMOVE: #toggle + div +``` diff --git a/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/writes.debug.html b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/writes.debug.html new file mode 100644 index 0000000000..acf7e97eb8 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/writes.debug.html @@ -0,0 +1,14 @@ + + diff --git a/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/writes.html b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/writes.html new file mode 100644 index 0000000000..b4e0ac3c00 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/__snapshots__/writes.html @@ -0,0 +1,10 @@ + + + diff --git a/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/tags/consumer.marko b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/tags/consumer.marko new file mode 100644 index 0000000000..d3f9eb9ff1 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/tags/consumer.marko @@ -0,0 +1,5 @@ + +toggle + + <${input.content}/> + diff --git a/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/template.marko b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/template.marko new file mode 100644 index 0000000000..1aa9c2ec05 --- /dev/null +++ b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/template.marko @@ -0,0 +1,3 @@ + +
static content
+ diff --git a/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/test.ts b/packages/runtime-tags/src/__tests__/fixtures/static-content-conditional-consumer/test.ts new file mode 100644 index 0000000000..792545e3d8 --- /dev/null +++ b/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("button#toggle")!.click(); +} + +export const config: TestConfig = { + steps: [{}, toggle, toggle], +}; diff --git a/packages/runtime-tags/src/translator/util/sections.ts b/packages/runtime-tags/src/translator/util/sections.ts index 607dbbafdc..1ff98b0157 100644 --- a/packages/runtime-tags/src/translator/util/sections.ts +++ b/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 &&