fix: store section with scope reads

DylanPiercey · DylanPiercey · commit 7acdc2c4fc7b · 2026-01-08T09:26:50.000-07:00
diff --git a/.changeset/eager-rabbits-live.md b/.changeset/eager-rabbits-live.md
@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Fix cases where compiler was not storing section information with scope reads.
diff --git a/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/.name-cache.json b/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/.name-cache.json
@@ -0,0 +1,9 @@
+{
+  "vars": {
+    "props": {
+      "$_": "t",
+      "$init": "m",
+      "$$getbutton": "o"
+    }
+  }
+}
diff --git a/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/csr-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/csr-sanitized.expected.md
@@ -0,0 +1,8 @@
+# Render
+```html
+<button
+  data-count="0"
+>
+  after
+</button>
+```
diff --git a/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/csr.expected.md b/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/csr.expected.md
@@ -0,0 +1,15 @@
+# Render
+```html
+<button
+  data-count="0"
+>
+  after
+</button>
+```
+
+# Mutations
+```
+INSERT button
+REMOVE #text in button
+INSERT button/#text
+```
diff --git a/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/dom.expected/template.hydrate.js b/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/dom.expected/template.hydrate.js
@@ -0,0 +1,4 @@
+// size: 72 (min) 73 (brotli)
+const $getbutton = _._el("a0", 0);
+(_._script("a1", ($scope) => ($getbutton($scope)().textContent = "after")),
+  init());
diff --git a/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/dom.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/dom.expected/template.js
@@ -0,0 +1,11 @@
+export const $template = "<button>Initial</button>";
+export const $walks = /* get, over(1) */" b";
+import * as _ from "@marko/runtime-tags/debug/dom";
+const $getbutton = _._el("__tests__/template.marko_0/#button", "#button/0");
+const $count = /* @__PURE__ */_._let("count/1", $scope => _._attr($scope["#button/0"], "data-count", $scope.count));
+const $setup__script = _._script("__tests__/template.marko_0", $scope => ((0, $getbutton($scope))().textContent = "after"));
+export function $setup($scope) {
+  $count($scope, 0);
+  $setup__script($scope);
+}
+export default /* @__PURE__ */_._template("__tests__/template.marko", $template, $walks, $setup);
diff --git a/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/html.expected/template.js b/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/html.expected/template.js
@@ -0,0 +1,10 @@
+import * as _ from "@marko/runtime-tags/debug/html";
+export default _._template("__tests__/template.marko", input => {
+  const $scope0_id = _._scope_id();
+  const btn = _._el($scope0_id, "__tests__/template.marko_0/#button");
+  let count = 0;
+  _._html(`<button${_._attr("data-count", count)}>Initial</button>${_._el_resume($scope0_id, "#button/0")}`);
+  _._script($scope0_id, "__tests__/template.marko_0");
+  _._scope($scope0_id, {}, "__tests__/template.marko", 0);
+  _._resume_branch($scope0_id);
+});
diff --git a/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/resume-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/resume-sanitized.expected.md
@@ -0,0 +1,8 @@
+# Render
+```html
+<button
+  data-count="0"
+>
+  after
+</button>
+```
diff --git a/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/resume.expected.md b/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/resume.expected.md
@@ -0,0 +1,28 @@
+# Render
+```html
+<html>
+  <head />
+  <body>
+    <button
+      data-count="0"
+    >
+      after
+    </button>
+    <!--M_*1 #button/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.a = [0,
+        {}]),
+        "__tests__/template.marko_0 1"
+      ];
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+REMOVE #text in html/body/button
+INSERT html/body/button/#text
+```
diff --git a/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/ssr-sanitized.expected.md b/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/ssr-sanitized.expected.md
@@ -0,0 +1,8 @@
+# Render End
+```html
+<button
+  data-count="0"
+>
+  Initial
+</button>
+```
diff --git a/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/ssr.expected.md b/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/__snapshots__/ssr.expected.md
@@ -0,0 +1,39 @@
+# Write
+```html
+  <button data-count=0>Initial</button><!--M_*1 #button/0--><script>WALKER_RUNTIME("M")("_");M._.r=[_=>(_.a=[0,{}]),"__tests__/template.marko_0 1"];M._.w()</script>
+```
+
+# Render End
+```html
+<html>
+  <head />
+  <body>
+    <button
+      data-count="0"
+    >
+      Initial
+    </button>
+    <!--M_*1 #button/0-->
+    <script>
+      WALKER_RUNTIME("M")("_");
+      M._.r = [_ =&gt; (_.a = [0,
+        {}]),
+        "__tests__/template.marko_0 1"
+      ];
+      M._.w()
+    </script>
+  </body>
+</html>
+```
+
+# Mutations
+```
+INSERT html
+INSERT html/head
+INSERT html/body
+INSERT html/body/button
+INSERT html/body/button/#text
+INSERT html/body/#comment
+INSERT html/body/script
+INSERT html/body/script/#text
+```
diff --git a/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/template.marko b/packages/runtime-tags/src/__tests__/fixtures/native-tag-ref-and-update/template.marko
@@ -0,0 +1,5 @@
+<let/count=0>
+<button/btn data-count=count>
+  Initial
+</button>
+<script>(0, btn)().textContent = "after"</script>
diff --git a/packages/runtime-tags/src/translator/util/references.ts b/packages/runtime-tags/src/translator/util/references.ts
@@ -260,7 +260,9 @@ export function trackDomVarReferences(
     const refSection = getOrCreateSection(ref);
     setReferencesScope(ref);
     if (isSameOrChildSection(binding.section, refSection)) {
-      (ref.node.extra ??= {}).read = createRead(binding, undefined);
+      const refExtra = (ref.node.extra ??= {});
+      refExtra.read = createRead(binding, undefined);
+      refExtra.section = refSection;
 
       if (!isInvokedFunction(ref)) {
         section.domGetterBindings.set(
diff --git a/packages/runtime-tags/src/translator/util/scope-read.ts b/packages/runtime-tags/src/translator/util/scope-read.ts
@@ -76,21 +76,21 @@ export function getScopeExpression(section: Section, targetSection: Section) {
 
 export function createScopeReadExpression(
   reference: Binding,
-  section?: Section | undefined,
+  section = reference.section,
 ) {
   const propName = toPropertyName(getScopeAccessor(reference));
-  const scope =
-    section && reference.type !== BindingType.local
-      ? getScopeExpression(section, reference.section)
-      : scopeIdentifier;
   const expr = t.memberExpression(
-    scope,
+    reference.type === BindingType.local
+      ? scopeIdentifier
+      : getScopeExpression(section, reference.section),
     propName,
     propName.type !== "Identifier",
   );
 
-  if (scope === scopeIdentifier) {
-    (expr.extra ??= {}).read = createRead(reference, undefined);
+  if (section === reference.section && reference.type !== BindingType.dom) {
+    const exprExtra = (expr.extra ??= {});
+    exprExtra.read = createRead(reference, undefined);
+    exprExtra.section = section;
   }
   return expr;
 }
diff --git a/packages/runtime-tags/src/translator/util/signals.ts b/packages/runtime-tags/src/translator/util/signals.ts
@@ -60,7 +60,7 @@ import {
 import { traverseReplace } from "./traverse";
 import { withLeadingComment } from "./with-comment";
 
-export type Signal = {
+export interface Signal {
   identifier: t.Identifier;
   referencedBindings: ReferencedBindings;
   section: Section;
@@ -75,16 +75,15 @@ export type Signal = {
   renderReferencedBindings: ReferencedBindings;
   effect: t.Statement[];
   effectReferencedBindings: ReferencedBindings;
-  hasDynamicSubscribers?: true;
-  hasSideEffect?: true;
+  hasDynamicSubscribers: boolean;
+  hasSideEffect: boolean;
   export: boolean;
-  extraArgs?: t.Expression[];
-  prependStatements?: t.Statement[];
-  buildAssignment?: (
-    valueSection: Section,
-    value: t.Expression,
-  ) => t.Expression | undefined;
-};
+  extraArgs: t.Expression[] | undefined;
+  prependStatements: t.Statement[] | undefined;
+  buildAssignment:
+    | ((valueSection: Section, value: t.Expression) => t.Expression | undefined)
+    | undefined;
+}
 
 type closureSignalBuilder = (
   closure: Binding,
@@ -224,10 +223,22 @@ export function getSignal(
         renderReferencedBindings: undefined,
         effect: [],
         effectReferencedBindings: undefined,
-        subscribers: [],
         build: undefined,
         export: !!exportName,
-      } as Signal),
+        hasSideEffect: !!(
+          referencedBindings &&
+          (Array.isArray(referencedBindings) ||
+            referencedBindings.type === BindingType.dom ||
+            referencedBindings.type === BindingType.let ||
+            referencedBindings.section !== section ||
+            referencedBindings.closureSections ||
+            referencedBindings.hoists.size)
+        ),
+        hasDynamicSubscribers: false,
+        extraArgs: undefined,
+        prependStatements: undefined,
+        buildAssignment: undefined,
+      }),
     );
 
     if (isOutputHTML()) {
@@ -524,7 +535,6 @@ export function getSignalFn(signal: Signal): t.Expression {
 
   if (signal.effect.length) {
     const effectIdentifier = t.identifier(`${signal.identifier.name}__script`);
-    signal.hasSideEffect = true;
     signal.render.push(
       t.expressionStatement(
         t.callExpression(effectIdentifier, [scopeIdentifier]),
@@ -601,6 +611,7 @@ export function subscribe(references: ReferencedBindings, subscriber: Signal) {
             binding.upstreamAlias) ||
           binding;
         const providerSignal = getSignal(subscriber.section, source);
+        providerSignal.hasSideEffect = true;
         providerSignal.intersection = push(
           providerSignal.intersection,
           subscriber,
@@ -820,21 +831,6 @@ export function writeSignals(section: Section) {
 
     forEach(signal.intersection, writeSignal);
 
-    if (!signal.hasSideEffect) {
-      const binding = signal.referencedBindings;
-      if (
-        binding &&
-        (signal.intersection ||
-          Array.isArray(binding) ||
-          binding.type === BindingType.let ||
-          binding.closureSections ||
-          binding.hoists.size ||
-          binding.section !== signal.section)
-      ) {
-        signal.hasSideEffect = true;
-      }
-    }
-
     let effectDeclarator: t.VariableDeclarator | undefined;
     if (signal.effect.length) {
       traverseReplace(signal, "effect", replaceEffectNode);

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@marko/runtime-tags": patch
 +---
++
 +Fix cases where compiler was not storing section information with scope reads.