fix(runtime-tags): compare renderer owners so dynamic tags distinguish instances of the same content

.changeset/dynamic-tag-owner-compare.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Fix a dynamic tag silently ignoring a switch between two instances of the same content section (e.g. two `<define>` contents from two instances of one provider tag, or the list-detail pattern `<${selected.content}/>`). The change check compared only the shared content id, so no teardown or re-render occurred and closures stayed subscribed to the old owner. Renderers now also compare their owner scope, and SSR serializes an owned renderer's registered reference so resumed slots stay instance-aware.

.sizes.json

@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 25964,
-        "brotli": 9537
+        "min": 26049,
+        "brotli": 9582
       }
     },
     {

.sizes/dom.js

@@ -1,4 +1,4 @@
-// size: 25964 (min) 9537 (brotli)
+// size: 26049 (min) 9582 (brotli)
 //#region packages/runtime-tags/dist/dom.mjs
 let empty = [],
   rest = Symbol(),
@@ -99,9 +99,7 @@ let empty = [],
       (scope, newRenderer, getInput) => {
         let normalizedRenderer = normalizeDynamicRenderer(newRenderer);
         if (
-          scope[rendererAccessor] !==
-            (scope[rendererAccessor] =
-              normalizedRenderer?.a || normalizedRenderer) ||
+          rendererChanged(scope, rendererAccessor, normalizedRenderer) ||
           (getContent && !(normalizedRenderer || scope[childScopeAccessor]))
         )
           if (
@@ -1633,7 +1631,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
 }
 function _attr_content(scope, nodeAccessor, value) {
   let content = normalizeClientRender(value);
-  scope["D" + nodeAccessor] !== (scope["D" + nodeAccessor] = content?.a) &&
+  rendererChanged(scope, "D" + nodeAccessor, content) &&
     (setConditionalRenderer(scope, nodeAccessor, content, createAndSetupBranch),
     content?.f &&
       subscribeToScopeSet(content.e, content.f, scope["A" + nodeAccessor]));
@@ -2044,6 +2042,15 @@ function _show(nodeAccessor, startNodeAccessor) {
 function patchDynamicTag(fn) {
   _dynamic_tag = fn(_dynamic_tag);
 }
+function rendererChanged(scope, rendererAccessor, renderer) {
+  let prev = scope[rendererAccessor],
+    changed =
+      (prev?.a || prev) !== (renderer?.a || renderer) ||
+      (typeof prev != "string" &&
+        typeof renderer != "string" &&
+        prev?.e !== renderer?.e);
+  return ((scope[rendererAccessor] = renderer), changed);
+}
 function _dynamic_tag_content(nodeAccessor) {
   nodeAccessor = decodeAccessor(nodeAccessor);
   let childScopeAccessor = "A" + nodeAccessor,
@@ -2052,8 +2059,7 @@ function _dynamic_tag_content(nodeAccessor) {
     enableBranches(),
     (scope, renderer) => {
       if (
-        (scope[rendererAccessor] !==
-          (scope[rendererAccessor] = renderer?.a || renderer) &&
+        (rendererChanged(scope, rendererAccessor, renderer) &&
           (setConditionalRenderer(
             scope,
             nodeAccessor,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-class-to-tags/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 66703,
-        "brotli": 20489
+        "min": 66801,
+        "brotli": 20512
       },
       "files": {
         "components/tags-counter.marko": 681,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-basic-tags-to-class/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 68311,
-        "brotli": 21125
+        "min": 68409,
+        "brotli": 21195
       },
       "files": {
         "components/class-counter.marko": 1028,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-class-to-tags-import/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 66703,
-        "brotli": 20489
+        "min": 66801,
+        "brotli": 20512
       },
       "files": {
         "components/tags-counter.marko": 681,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-dynamic-tag-class-to-tags/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 66601,
-        "brotli": 20409
+        "min": 66699,
+        "brotli": 20493
       },
       "files": {
         "components/tags-child.marko": 509,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-dynamic-tag-conditional-class-to-tags/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 66642,
-        "brotli": 20447
+        "min": 66740,
+        "brotli": 20468
       },
       "files": {
         "components/tags-child.marko": 509,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-emit-inline-tags-to-class/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 68303,
-        "brotli": 21107
+        "min": 68404,
+        "brotli": 21141
       },
       "files": {
         "components/inline-button.marko": 1094,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-emit-split-tags-to-class/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 68422,
-        "brotli": 21165
+        "min": 68520,
+        "brotli": 21234
       },
       "files": {
         "components/split-button/component-browser.js": 373,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-event-class-to-tags/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 66741,
-        "brotli": 20505
+        "min": 66839,
+        "brotli": 20551
       },
       "files": {
         "components/tags-pinger.marko": 663,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-event-handler-render-body-tags-to-class/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 68607,
-        "brotli": 21263
+        "min": 68705,
+        "brotli": 21320
       },
       "files": {
         "components/my-button.marko": 1048,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-event-split-class-to-tags/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 69833,
-        "brotli": 21527
+        "min": 69931,
+        "brotli": 21607
       },
       "files": {
         "components/tags-pinger.marko": 706,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-events-tags-to-class/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 68243,
-        "brotli": 21070
+        "min": 68343,
+        "brotli": 21134
       },
       "files": {
         "components/class-counter.marko": 1043,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-mixed-inert-and-stateful-tags-to-class/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 68311,
-        "brotli": 21154
+        "min": 68409,
+        "brotli": 21217
       },
       "files": {
         "components/class-counter.marko": 1028,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-nested-attr-tags-class-to-tags/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 67008,
-        "brotli": 20605
+        "min": 67106,
+        "brotli": 20602
       },
       "files": {
         "components/tags-layout.marko": 838,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-nested-class-to-tags/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 66680,
-        "brotli": 20507
+        "min": 66778,
+        "brotli": 20548
       },
       "files": {
         "components/tags-layout.marko": 696,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-nested-tags-to-class/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 68751,
-        "brotli": 21327
+        "min": 68849,
+        "brotli": 21357
       },
       "files": {
         "components/class-layout.marko": 1227,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-reactive-split-tags-to-class/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 68253,
-        "brotli": 21082
+        "min": 68351,
+        "brotli": 21118
       },
       "files": {
         "components/split-display/component-browser.js": 182,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-rerender-inert-class/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 67923,
-        "brotli": 20984
+        "min": 68021,
+        "brotli": 21056
       },
       "files": {
         "components/class-display.marko": 856,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-roundtrip-split-tags-to-class/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 68416,
-        "brotli": 21169
+        "min": 68517,
+        "brotli": 21210
       },
       "files": {
         "components/split-counter/component-browser.js": 228,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-stateless-tags-to-class/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 68026,
-        "brotli": 21034
+        "min": 68124,
+        "brotli": 21003
       },
       "files": {
         "components/my-button/component-browser.js": 457,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-tag-params-class-to-tags/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 67062,
-        "brotli": 20656
+        "min": 67160,
+        "brotli": 20696
       },
       "files": {
         "components/tags-layout.marko": 912,

packages/runtime-tags/src/__tests__/fixtures-interop/interop-tag-params-tags-to-class/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 69111,
-        "brotli": 21500
+        "min": 69209,
+        "brotli": 21508
       },
       "files": {
         "components/class-layout.marko": 1245,

packages/runtime-tags/src/__tests__/fixtures/at-tags-dynamic-with-params/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 13437,
-        "brotli": 5145
+        "min": 13535,
+        "brotli": 5178
       },
       "files": {
         "tags/hello/index.marko": 194,

packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/writes.debug.html

@@ -11,10 +11,10 @@
       y: 2,
       "#childScope/1": _(2)
     }, {
-      "ConditionalRenderer:#text/0": "packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/template.marko_1_content",
-      content: _(1,
+      "ConditionalRenderer:#text/0": _.a = _(1,
         "packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/template.marko_1_content"
-        )
+        ),
+      content: _.a
     }, {
       outer: 1,
       _: _(1),

packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/__snapshots__/writes.html

@@ -11,8 +11,8 @@
     d: 2,
     b: _(2)
   }, {
-    Da: "a1",
-    d: _(1, "a1")
+    Da: _.a = _(1, "a1"),
+    d: _.a
   }, {
     c: 1,
     _: _(1),

packages/runtime-tags/src/__tests__/fixtures/basic-nested-params/sizes.json

@@ -2,8 +2,8 @@
   "dom": {
     "template.marko.page.mjs": {
       "total": {
-        "min": 14018,
-        "brotli": 5390
+        "min": 14116,
+        "brotli": 5421
       },
       "files": {
         "tags/child.marko": 432,
@@ -12,7 +12,7 @@
     }
   },
   "html": {
-    "min": 494,
-    "brotli": 330
+    "min": 497,
+    "brotli": 333
   }
 }

packages/runtime-tags/src/__tests__/fixtures/conditional-dynamic-tag-in-loop-closure/__snapshots__/writes.debug.html

@@ -6,11 +6,11 @@
     "ClosureScopes:count": new Set([_(5)]),
     "#childScope/0": _(2)
   }, 1, {
-    content: _(1,
+    content: _.a = _(1,
       "packages/runtime-tags/src/__tests__/fixtures/conditional-dynamic-tag-in-loop-closure/template.marko_1_content"
       )
   }, {
-    "ConditionalRenderer:#text/0": "packages/runtime-tags/src/__tests__/fixtures/conditional-dynamic-tag-in-loop-closure/template.marko_1_content",
+    "ConditionalRenderer:#text/0": _.a,
     _: _(3)
   }, {
     _: _(1)

packages/runtime-tags/src/__tests__/fixtures/conditional-dynamic-tag-in-loop-closure/__snapshots__/writes.html

@@ -6,9 +6,9 @@
     c: new Set([_(5)]),
     a: _(2)
   }, 1, {
-    d: _(1, "a1")
+    d: _.a = _(1, "a1")
   }, {
-    Da: "a1",
+    Da: _.a,
     _: _(3)
   }, {
     _: _(1)