feat: dom helpers recieve indexes rather than nodes

.sizes.json

@@ -6,9 +6,9 @@
     {
       "name": "*",
       "individual": {
-        "min": 10033,
-        "gzip": 4292,
-        "brotli": 3922
+        "min": 10252,
+        "gzip": 4379,
+        "brotli": 3991
       }
     }
   ]

packages/runtime/src/dom/control-flow.ts

@@ -1,7 +1,15 @@
 import { Context, setContext } from "../common/context";
 import { reconcile } from "./reconcile";
 import { Renderer, initRenderer } from "./renderer";
-import { Scope, createScope, getEmptyScope, set, destroyScope } from "./scope";
+import {
+  Scope,
+  createScope,
+  getEmptyScope,
+  set,
+  destroyScope,
+  read,
+  runWithScope
+} from "./scope";
 import { NodeType } from "./dom";
 
 export type Conditional = (
@@ -31,10 +39,23 @@ export function conditional(referenceNode: Comment | Element): Conditional {
   };
 }
 
+export function runInBranch(
+  conditionalIndex: number,
+  branch: Renderer,
+  fn: () => void
+) {
+  const cond = read(conditionalIndex) as Conditional;
+  if (cond.renderer === branch) {
+    runWithScope(fn, 0, cond.scope!);
+    return 1;
+  }
+}
+
 export function setConditionalRenderer(
-  conditonal: Conditional,
+  conditionalIndex: number,
   newRenderer: Renderer | undefined
 ) {
+  const conditonal = read(conditionalIndex) as Conditional;
   if (conditonal.renderer !== (conditonal.renderer = newRenderer)) {
     let newScope: Scope;
     let prevScope = conditonal.scope!;
@@ -63,9 +84,10 @@ export function setConditionalRenderer(
 }
 
 export function setConditionalRendererOnlyChild(
-  conditonal: Conditional,
+  conditionalIndex: number,
   newRenderer: Renderer | undefined
 ) {
+  const conditonal = read(conditionalIndex) as Conditional;
   if (conditonal.renderer !== (conditonal.renderer = newRenderer)) {
     (conditonal.___referenceNode as Element).textContent = "";
 
@@ -133,6 +155,12 @@ export function loop(
   };
 }
 
+export function runForEach(loopIndex: number, fn: () => void) {
+  for (const scope of (read(loopIndex) as Loop).___scopeArray) {
+    runWithScope(fn, 0, scope);
+  }
+}
+
 function loopIterator(this: Loop) {
   return (this.___scopeArray === emptyMarkerArray
     ? emptyArray
@@ -148,7 +176,8 @@ function getLastNodeLoop(this: Loop) {
   return this.___scopeArray[this.___scopeArray.length - 1].___getLastNode();
 }
 
-export function setLoopOf(loop: Loop, newValues: unknown[]) {
+export function setLoopOf(loopIndex: number, newValues: unknown[]) {
+  const loop = read(loopIndex) as Loop;
   let newMap: Map<unknown, Scope>;
   let newArray: Scope[];
   const len = newValues.length;
@@ -224,7 +253,7 @@ export function setLoopOf(loop: Loop, newValues: unknown[]) {
 }
 
 export function setLoopFromTo(
-  loop: Loop,
+  loopIndex: number,
   from: number,
   to: number,
   step: number
@@ -235,9 +264,9 @@ export function setLoopFromTo(
     range.push(i);
   }
 
-  setLoopOf(loop, range);
+  setLoopOf(loopIndex, range);
 }
 
-export function setLoopIn(loop: Loop, object: Record<string, unknown>) {
-  setLoopOf(loop, Object.entries(object));
+export function setLoopIn(loopIndex: number, object: Record<string, unknown>) {
+  setLoopOf(loopIndex, Object.entries(object));
 }

packages/runtime/src/dom/dom.ts

@@ -116,27 +116,27 @@ export function isDocumentFragment(node: Node): node is DocumentFragment {
   return node.nodeType === NodeType.DocumentFragment;
 }
 
-export function attr(el: Element, name: string, value: unknown) {
+export function attr(elementIndex: number, name: string, value: unknown) {
   const normalizedValue = normalizeAttrValue(value);
   if (normalizedValue === undefined) {
-    el.removeAttribute(name);
+    (read(elementIndex) as Element).removeAttribute(name);
   } else {
-    el.setAttribute(name, normalizedValue);
+    (read(elementIndex) as Element).setAttribute(name, normalizedValue);
   }
 }
 
-export function data(node: Text | Comment, value: unknown) {
-  node.data = normalizeString(value);
+export function data(textOrCommentIndex: number, value: unknown) {
+  (read(textOrCommentIndex) as Text | Comment).data = normalizeString(value);
 }
 
-export function attrs(el: Element, index: number) {
+export function attrs(elementIndex: number, index: number) {
   const nextAttrs = read(index) as Record<string, unknown>;
   const prevAttrs = read(index + 1) as Record<string, unknown> | undefined;
 
   if (prevAttrs) {
     for (const name in prevAttrs) {
       if (!(nextAttrs && name in nextAttrs)) {
-        el.removeAttribute(name);
+        (read(elementIndex) as Element).removeAttribute(name);
       }
     }
   }
@@ -144,7 +144,7 @@ export function attrs(el: Element, index: number) {
   for (const name in nextAttrs) {
     if (!(prevAttrs && nextAttrs[name] === prevAttrs[name])) {
       if (name !== "renderBody") {
-        attr(el, name, nextAttrs[name]);
+        attr(elementIndex, name, nextAttrs[name]);
       }
     }
   }
@@ -175,9 +175,10 @@ export function html(value: string, index: number) {
   }
 }
 
-export function props(node: Node, index: number) {
+export function props(nodeIndex: number, index: number) {
   const nextProps = read(index) as Record<string, unknown>;
   const prevProps = read(index + 1) as Record<string, unknown> | undefined;
+  const node = read(nodeIndex) as Node;
 
   if (prevProps) {
     for (const name in prevProps) {
@@ -194,8 +195,8 @@ export function props(node: Node, index: number) {
   write(index + 1, nextProps);
 }
 
-export function innerHTML(el: Element, value: string) {
-  el.innerHTML = normalizeString(value);
+export function innerHTML(elementIndex: number, value: string) {
+  (read(elementIndex) as Element).innerHTML = normalizeString(value);
 }
 
 export function dynamicTagString(tag: string, input: Record<string, unknown>) {

packages/runtime/src/dom/index.ts

@@ -4,10 +4,12 @@ export {
   conditional,
   setConditionalRenderer,
   setConditionalRendererOnlyChild,
+  runInBranch,
   loop,
   setLoopOf,
   setLoopFromTo,
-  setLoopIn
+  setLoopIn,
+  runForEach
 } from "./control-flow";
 
 export {

packages/runtime/test/dom/fixtures/batched-updates-cleanup/index.ts

@@ -14,7 +14,9 @@ import {
   write,
   read,
   bind,
-  isDirty
+  isDirty,
+  readInOwner,
+  runInBranch
 } from "../../../../src/dom/index";
 
 import { get, next, over } from "../../utils/walks";
@@ -67,25 +69,21 @@ export const hydrate = register("", () => {
 });
 
 const execShowMessage = () => {
-  const cond0 = read<scope, Index.CONDITIONAL>(Index.CONDITIONAL);
   if (isDirty(Index.SHOW)) {
-    setConditionalRenderer(cond0, read(Index.SHOW) ? branch0 : undefined);
+    setConditionalRenderer(
+      Index.CONDITIONAL,
+      read(Index.SHOW) ? branch0 : undefined
+    );
   }
-  if (cond0.renderer === branch0) {
-    const cond0_scope = cond0.scope;
-    if (isDirty(Index.MESSAGE)) {
-      data(
-        read<Branch0Scope, Branch0Index.TEXT>(
-          Branch0Index.TEXT,
-          cond0_scope,
-          0
-        ),
-        read(Index.MESSAGE)
-      );
-    }
+  if (isDirty(Index.MESSAGE)) {
+    runInBranch(Index.CONDITIONAL, branch0, execMessageBranch0);
   }
 };
 
+const execMessageBranch0 = () => {
+  data(Branch0Index.TEXT, readInOwner(Index.MESSAGE));
+};
+
 export default createRenderFn(template, walks, hydrate, 0);
 
 ensureDelegated("click");

packages/runtime/test/dom/fixtures/batched-updates/index.ts

@@ -59,7 +59,7 @@ export const hydrate = register("", () => {
 const execAB = () => {
   if (isDirty(Index.A) || isDirty(Index.B)) {
     data(
-      read<scope, Index.TEXT>(Index.TEXT),
+      Index.TEXT,
       read<scope, Index.A>(Index.A) + read<scope, Index.B>(Index.B)
     );
   }

packages/runtime/test/dom/fixtures/create-and-clear-rows-loop-from/index.ts

@@ -4,14 +4,13 @@ import {
   loop,
   setLoopFromTo,
   Loop,
-  Scope,
   createRenderer,
   createRenderFn,
   isDirty,
-  runWithScope,
   staticNodeMethods,
   write,
-  read
+  read,
+  runForEach
 } from "../../../../src/dom/index";
 import { over, get, next } from "../../utils/walks";
 
@@ -68,14 +67,12 @@ export const hydrate = () => {
 
 export const execInputFromToStep = () => {
   setLoopFromTo(
-    read<scope, Index.LOOP>(Index.LOOP),
+    Index.LOOP,
     read<scope, Index.INPUT_FROM>(Index.INPUT_FROM),
     read<scope, Index.INPUT_TO>(Index.INPUT_TO),
     read<scope, Index.INPUT_STEP>(Index.INPUT_STEP)
   );
-  for (const loopScope of read<scope, Index.LOOP>(Index.LOOP)) {
-    runWithScope(iter0_execItem, 0, loopScope);
-  }
+  runForEach(Index.LOOP, iter0_execItem);
 };
 
 export const execDynamicInput = (input: Input) => {
@@ -108,9 +105,6 @@ const iter0 = createRenderer(
 
 const iter0_execItem = () => {
   if (isDirty(Iter0Index.ITEM)) {
-    data(
-      read<iterScope, Iter0Index.TEXT>(Iter0Index.TEXT),
-      read(Iter0Index.ITEM)
-    );
+    data(Iter0Index.TEXT, read(Iter0Index.ITEM));
   }
 };

packages/runtime/test/dom/fixtures/create-and-clear-rows-loop-in/index.ts

@@ -9,8 +9,8 @@ import {
   createRenderer,
   createRenderFn,
   isDirty,
-  runWithScope,
-  staticNodeMethods
+  staticNodeMethods,
+  runForEach
 } from "../../../../src/dom/index";
 import { over, get, next } from "../../utils/walks";
 
@@ -65,12 +65,10 @@ export const hydrate = () => {
 
 export const execInputChildren = () => {
   setLoopIn(
-    read<scope, Index.LOOP>(Index.LOOP),
+    Index.LOOP,
     read<scope, Index.INPUT_CHILDREN>(Index.INPUT_CHILDREN)
   );
-  for (const loopScope of read<scope, Index.LOOP>(Index.LOOP)) {
-    runWithScope(iter0_execItem, 0, loopScope);
-  }
+  runForEach(Index.LOOP, iter0_execItem);
 };
 
 export const execDynamicInput = (input: Input) => {
@@ -116,10 +114,7 @@ const iter0_execItem = () => {
       read<iterScope, Iter0Index.ITEM>(Iter0Index.ITEM)[1]
     );
     if (isDirty(Iter0Index.ITEM_TEXT)) {
-      data(
-        read<iterScope, Iter0Index.TEXT>(Iter0Index.TEXT),
-        read(Iter0Index.ITEM_TEXT)
-      );
+      data(Iter0Index.TEXT, read(Iter0Index.ITEM_TEXT));
     }
   }
 };

packages/runtime/test/dom/fixtures/create-and-clear-rows/index.ts

@@ -9,7 +9,7 @@ import {
   createRenderer,
   createRenderFn,
   isDirty,
-  runWithScope,
+  runForEach,
   staticNodeMethods
 } from "../../../../src/dom/index";
 import { next, over, get } from "../../utils/walks";
@@ -87,12 +87,10 @@ export const hydrate = () => {
 
 export const execInputChildren = () => {
   setLoopOf(
-    read<scope, Index.LOOP>(Index.LOOP),
+    Index.LOOP,
     read<scope, Index.INPUT_CHILDREN>(Index.INPUT_CHILDREN)
   );
-  for (const loopScope of read<scope, Index.LOOP>(Index.LOOP)) {
-    runWithScope(iter0_execItem, 0, loopScope);
-  }
+  runForEach(Index.LOOP, iter0_execItem);
 };
 
 export const execDynamicInput = (input: Input) => {
@@ -135,10 +133,7 @@ const iter0_execItem = () => {
       read<iterScope, Iter0Index.ITEM>(Iter0Index.ITEM).text
     );
     if (isDirty(Iter0Index.ITEM_TEXT)) {
-      data(
-        read<iterScope, Iter0Index.TEXT>(Iter0Index.TEXT),
-        read(Iter0Index.ITEM_TEXT)
-      );
+      data(Iter0Index.TEXT, read(Iter0Index.ITEM_TEXT));
     }
   }
 };

packages/runtime/test/dom/fixtures/event-handlers/index.ts

@@ -3,7 +3,6 @@ import {
   walk,
   register,
   createRenderFn,
-  Scope,
   on,
   read,
   writeQueued,
@@ -63,10 +62,7 @@ const execClickCount = () => {
           })
         : false
     );
-    data(
-      read<scope, Index.BUTTON_TEXT>(Index.BUTTON_TEXT),
-      read<scope, Index.CLICK_COUNT>(Index.CLICK_COUNT)
-    );
+    data(Index.BUTTON_TEXT, read<scope, Index.CLICK_COUNT>(Index.CLICK_COUNT));
   }
 };
 

packages/runtime/test/dom/fixtures/move-and-clear-children/index.ts

@@ -6,11 +6,11 @@ import {
   write,
   setLoopOf,
   Loop,
-  runWithScope,
   createRenderer,
   createRenderFn,
   staticNodeMethods,
-  isDirty
+  isDirty,
+  runForEach
 } from "../../../../src/dom/index";
 import { get, next, over } from "../../utils/walks";
 
@@ -87,12 +87,10 @@ export const hydrate = () => {
 
 export const execInputChildren = () => {
   setLoopOf(
-    read<scope, Index.LOOP>(Index.LOOP),
+    Index.LOOP,
     read<scope, Index.INPUT_CHILDREN>(Index.INPUT_CHILDREN)
   );
-  for (const loopScope of read<scope, Index.LOOP>(Index.LOOP)) {
-    runWithScope(iter0_execItem, 0, loopScope);
-  }
+  runForEach(Index.LOOP, iter0_execItem);
 };
 
 export const execDynamicInput = (input: Input) => {
@@ -135,10 +133,7 @@ const iter0_execItem = () => {
       read<iterScope, Iter0Index.ITEM>(Iter0Index.ITEM).text
     );
     if (isDirty(Iter0Index.ITEM_TEXT)) {
-      data(
-        read<iterScope, Iter0Index.TEXT>(Iter0Index.TEXT),
-        read(Iter0Index.ITEM_TEXT)
-      );
+      data(Iter0Index.TEXT, read(Iter0Index.ITEM_TEXT));
     }
   }
 };

packages/runtime/test/dom/fixtures/move-and-clear-top-level/index.ts

@@ -7,10 +7,10 @@ import {
   setLoopOf,
   Loop,
   isDirty,
-  runWithScope,
   createRenderer,
   createRenderFn,
-  staticNodeMethods
+  staticNodeMethods,
+  runForEach
 } from "../../../../src/dom/index";
 import { next, over, get } from "../../utils/walks";
 
@@ -85,12 +85,10 @@ export const hydrate = () => {
 
 export const execInputChildren = () => {
   setLoopOf(
-    read<scope, Index.LOOP>(Index.LOOP),
+    Index.LOOP,
     read<scope, Index.INPUT_CHILDREN>(Index.INPUT_CHILDREN)
   );
-  for (const loopScope of read<scope, Index.LOOP>(Index.LOOP)) {
-    runWithScope(iter0_execItem, 0, loopScope);
-  }
+  runForEach(Index.LOOP, iter0_execItem);
 };
 
 export const execDynamicInput = (input: Input) => {
@@ -133,10 +131,7 @@ const iter0_execItem = () => {
       read<iterScope, Iter0Index.ITEM>(Iter0Index.ITEM).text
     );
     if (isDirty(Iter0Index.ITEM_TEXT)) {
-      data(
-        read<iterScope, Iter0Index.TEXT>(Iter0Index.TEXT),
-        read(Iter0Index.ITEM_TEXT)
-      );
+      data(Iter0Index.TEXT, read(Iter0Index.ITEM_TEXT));
     }
   }
 };

packages/runtime/test/dom/fixtures/remove-and-add-rows/index.ts

@@ -9,8 +9,8 @@ import {
   isDirty,
   createRenderer,
   createRenderFn,
-  runWithScope,
-  staticNodeMethods
+  staticNodeMethods,
+  runForEach
 } from "../../../../src/dom/index";
 import { get, next } from "../../utils/walks";
 
@@ -92,12 +92,10 @@ export const hydrate = () => {
 
 export const execInputChildren = () => {
   setLoopOf(
-    read<scope, Index.LOOP>(Index.LOOP),
+    Index.LOOP,
     read<scope, Index.INPUT_CHILDREN>(Index.INPUT_CHILDREN)
   );
-  for (const loopScope of read<scope, Index.LOOP>(Index.LOOP)) {
-    runWithScope(iter0_execItem, 0, loopScope);
-  }
+  runForEach(Index.LOOP, iter0_execItem);
 };
 
 export const execDynamicInput = (input: Input) => {
@@ -140,10 +138,7 @@ const iter0_execItem = () => {
       read<iterScope, Iter0Index.ITEM>(Iter0Index.ITEM).text
     );
     if (isDirty(Iter0Index.ITEM_TEXT)) {
-      data(
-        read<iterScope, Iter0Index.TEXT>(Iter0Index.TEXT),
-        read(Iter0Index.ITEM_TEXT)
-      );
+      data(Iter0Index.TEXT, read(Iter0Index.ITEM_TEXT));
     }
   }
 };

packages/runtime/test/dom/fixtures/switch-adjacent-only-children/index.ts

@@ -2,16 +2,15 @@ import {
   walk,
   data,
   loop,
-  set,
   read,
   write,
   isDirty,
-  runWithScope,
   setLoopOf,
   Loop,
   createRenderer,
   createRenderFn,
-  staticNodeMethods
+  staticNodeMethods,
+  runForEach
 } from "../../../../src/dom/index";
 import { get, next } from "../../utils/walks";
 
@@ -89,12 +88,10 @@ export const hydrate = () => {
 
 export const execInputChildren = () => {
   setLoopOf(
-    read<scope, Index.LOOP>(Index.LOOP),
+    Index.LOOP,
     read<scope, Index.INPUT_CHILDREN>(Index.INPUT_CHILDREN)
   );
-  for (const loopScope of read<scope, Index.LOOP>(Index.LOOP)) {
-    runWithScope(iter0_execItem, 0, loopScope);
-  }
+  runForEach(Index.LOOP, iter0_execItem);
 };
 
 export const execDynamicInput = (input: Input) => {
@@ -137,10 +134,7 @@ const iter0_execItem = () => {
       read<iterScope, Iter0Index.ITEM>(Iter0Index.ITEM).text
     );
     if (isDirty(Iter0Index.ITEM_TEXT)) {
-      data(
-        read<iterScope, Iter0Index.TEXT>(Iter0Index.TEXT),
-        read(Iter0Index.ITEM_TEXT)
-      );
+      data(Iter0Index.TEXT, read(Iter0Index.ITEM_TEXT));
     }
   }
 };

packages/runtime/test/dom/fixtures/toggle-detached-state/index.ts

@@ -10,7 +10,7 @@ import {
   createRenderer,
   createRenderFn,
   staticNodeMethods,
-  runWithScope
+  runInBranch
 } from "../../../../src/dom/index";
 import { next, get, over } from "../../utils/walks";
 
@@ -58,19 +58,16 @@ export const hydrate = () => {
 };
 
 export const execInputValue = () => {
-  const cond0 = read<scope, Index.CONDITIONAL>(Index.CONDITIONAL);
   setConditionalRenderer(
-    cond0,
+    Index.CONDITIONAL,
     read(Index.INPUT_VISIBLE) ? branch0 : undefined
   );
-  if (cond0.renderer === branch0) {
-    runWithScope(execInputBranch0, 0, cond0.scope);
-  }
+  runInBranch(Index.CONDITIONAL, branch0, execInputBranch0);
 };
 
 function execInputBranch0() {
   data(
-    read<Branch0Scope, Branch0Index.TEXT>(Branch0Index.TEXT),
+    Branch0Index.TEXT,
     readInOwner<scope, Index.INPUT_VALUE>(Index.INPUT_VALUE).name
   );
 }

packages/runtime/test/dom/fixtures/toggle-first-child/index.ts

@@ -9,8 +9,8 @@ import {
   createRenderer,
   createRenderFn,
   staticNodeMethods,
-  runWithScope,
-  readInOwner
+  readInOwner,
+  runInBranch
 } from "../../../../src/dom/index";
 import { next, over, get } from "../../utils/walks";
 
@@ -56,16 +56,16 @@ export const hydrate = () => {
 };
 
 export const execInputValue = () => {
-  const cond0 = read<scope, Index.CONDITIONAL>(Index.CONDITIONAL);
-  setConditionalRenderer(cond0, read(Index.INPUT_VALUE) ? branch0 : undefined);
-  if (cond0.renderer === branch0) {
-    runWithScope(execInputBranch0, 0, cond0.scope);
-  }
+  setConditionalRenderer(
+    Index.CONDITIONAL,
+    read(Index.INPUT_VALUE) ? branch0 : undefined
+  );
+  runInBranch(Index.CONDITIONAL, branch0, execInputBranch0);
 };
 
 function execInputBranch0() {
   data(
-    read<Branch0Scope, Branch0Index.TEXT>(Branch0Index.TEXT),
+    Branch0Index.TEXT,
     readInOwner<scope, Index.INPUT_VALUE>(Index.INPUT_VALUE)
   );
 }

packages/runtime/test/dom/fixtures/toggle-last-child/index.ts

@@ -4,12 +4,13 @@ import {
   conditional,
   setConditionalRenderer,
   Conditional,
-  Scope,
   read,
   write,
   createRenderer,
   createRenderFn,
-  staticNodeMethods
+  staticNodeMethods,
+  readInOwner,
+  runInBranch
 } from "../../../../src/dom/index";
 import { next, over, get } from "../../utils/walks";
 
@@ -55,14 +56,20 @@ export const hydrate = () => {
 };
 
 export const execInputValue = () => {
-  const cond0 = read<scope, Index.CONDITIONAL>(Index.CONDITIONAL);
-  setConditionalRenderer(cond0, read(Index.INPUT_VALUE) ? branch0 : undefined);
-  if (cond0.renderer === branch0) {
-    const cond0_scope = cond0.scope;
-    data(cond0_scope[0] as Text, read(Index.INPUT_VALUE));
-  }
+  setConditionalRenderer(
+    Index.CONDITIONAL,
+    read(Index.INPUT_VALUE) ? branch0 : undefined
+  );
+  runInBranch(Index.CONDITIONAL, branch0, execInputBranch0);
 };
 
+function execInputBranch0() {
+  data(
+    Branch0Index.TEXT,
+    readInOwner<scope, Index.INPUT_VALUE>(Index.INPUT_VALUE)
+  );
+}
+
 export const execDynamicInput = (input: typeof inputs[number]) => {
   write(Index.INPUT_VALUE, input.value);
   execInputValue();

packages/runtime/test/dom/fixtures/toggle-middle-child/index.ts

@@ -9,8 +9,8 @@ import {
   createRenderer,
   createRenderFn,
   staticNodeMethods,
-  runWithScope,
-  readInOwner
+  readInOwner,
+  runInBranch
 } from "../../../../src/dom/index";
 import { next, over, get } from "../../utils/walks";
 
@@ -56,16 +56,16 @@ export const hydrate = () => {
 };
 
 export const execInputValue = () => {
-  const cond0 = read<scope, Index.CONDITIONAL>(Index.CONDITIONAL);
-  setConditionalRenderer(cond0, read(Index.INPUT_VALUE) ? branch0 : undefined);
-  if (cond0.renderer === branch0) {
-    runWithScope(execInputBranch0, 0, cond0.scope);
-  }
+  setConditionalRenderer(
+    Index.CONDITIONAL,
+    read(Index.INPUT_VALUE) ? branch0 : undefined
+  );
+  runInBranch(Index.CONDITIONAL, branch0, execInputBranch0);
 };
 
 function execInputBranch0() {
   data(
-    read<Branch0Scope, Branch0Index.TEXT>(Branch0Index.TEXT),
+    Branch0Index.TEXT,
     readInOwner<scope, Index.INPUT_VALUE>(Index.INPUT_VALUE)
   );
 }

packages/runtime/test/dom/fixtures/toggle-nested/index.ts

@@ -10,7 +10,10 @@ import {
   dynamicFragmentMethods,
   write,
   isDirty,
-  read
+  read,
+  readInOwner,
+  isDirtyInOwner,
+  runInBranch
 } from "../../../../src/dom/index";
 import { next, over, get } from "../../utils/walks";
 
@@ -72,35 +75,38 @@ export const hydrate = () => {
 };
 
 export const execInputShowValue1Value2 = () => {
-  const cond0 = read<scope, Index.CONDITIONAL>(Index.CONDITIONAL);
   if (isDirty(Index.INPUT_SHOW)) {
-    setConditionalRenderer(cond0, read(Index.INPUT_SHOW) ? branch0 : undefined);
+    setConditionalRenderer(
+      Index.CONDITIONAL,
+      read(Index.INPUT_SHOW) ? branch0 : undefined
+    );
   }
-  if (cond0.renderer === branch0) {
-    const cond0_scope = cond0.scope;
-    if (isDirty(Index.INPUT_SHOW) || isDirty(Index.INPUT_VALUE1)) {
-      const cond0_0 = cond0_scope[0] as Conditional;
-      setConditionalRenderer(
-        cond0_0,
-        read(Index.INPUT_VALUE1) ? branch0_0 : undefined
-      );
-      if (cond0_0.renderer === branch0_0) {
-        const cond0_0_scope = cond0_0.scope;
-        data(cond0_0_scope[0] as Text, read(Index.INPUT_VALUE1));
-      }
-    }
-    if (isDirty(Index.INPUT_SHOW) || isDirty(Index.INPUT_VALUE2)) {
-      const cond0_1 = cond0_scope[1] as Conditional;
-      setConditionalRenderer(
-        cond0_1,
-        read(Index.INPUT_VALUE2) ? branch0_1 : undefined
-      );
-      if (cond0_1.renderer === branch0_1) {
-        const cond0_1_scope = cond0_1.scope;
-        data(cond0_1_scope[0] as Text, read(Index.INPUT_VALUE2));
-      }
-    }
+  runInBranch(Index.CONDITIONAL, branch0, execInputShowValue1Value2Branch0);
+};
+
+const execInputShowValue1Value2Branch0 = () => {
+  if (isDirtyInOwner(Index.INPUT_SHOW) || isDirtyInOwner(Index.INPUT_VALUE1)) {
+    setConditionalRenderer(
+      Branch0Index.COND1,
+      readInOwner(Index.INPUT_VALUE1) ? branch0_0 : undefined
+    );
+    runInBranch(Branch0Index.COND1, branch0_0, execInputValue1Branch0_0);
   }
+  if (isDirtyInOwner(Index.INPUT_SHOW) || isDirtyInOwner(Index.INPUT_VALUE2)) {
+    setConditionalRenderer(
+      Branch0Index.COND2,
+      readInOwner(Index.INPUT_VALUE2) ? branch0_1 : undefined
+    );
+    runInBranch(Branch0Index.COND2, branch0_1, execInputValue2Branch0_1);
+  }
+};
+
+const execInputValue1Branch0_0 = () => {
+  data(Branch0_0Index.TEXT, readInOwner(Index.INPUT_VALUE1, 2));
+};
+
+const execInputValue2Branch0_1 = () => {
+  data(Branch0_1Index.TEXT, readInOwner(Index.INPUT_VALUE2, 2));
 };
 
 export const execDynamicInput = (input: Input) => {

packages/runtime/test/dom/fixtures/toggle-only-child/index.ts

@@ -9,8 +9,8 @@ import {
   staticNodeMethods,
   read,
   write,
-  runWithScope,
-  readInOwner
+  readInOwner,
+  runInBranch
 } from "../../../../src/dom/index";
 import { get, next, over } from "../../utils/walks";
 
@@ -54,19 +54,16 @@ export const hydrate = () => {
 };
 
 export const execInputValue = () => {
-  const cond0 = read<scope, Index.CONDITIONAL>(Index.CONDITIONAL);
   setConditionalRendererOnlyChild(
-    cond0,
+    Index.CONDITIONAL,
     read(Index.INPUT_VALUE) ? branch0 : undefined
   );
-  if (cond0.renderer === branch0) {
-    runWithScope(execInputBranch0, 0, cond0.scope);
-  }
+  runInBranch(Index.CONDITIONAL, branch0, execInputBranch0);
 };
 
 function execInputBranch0() {
   data(
-    read<Branch0Scope, Branch0Index.TEXT>(Branch0Index.TEXT),
+    Branch0Index.TEXT,
     readInOwner<scope, Index.INPUT_VALUE>(Index.INPUT_VALUE)
   );
 }

packages/runtime/test/dom/fixtures/update-attr/index.ts

@@ -47,7 +47,7 @@ export const hydrate = register("", () => {
 });
 
 export const execInputValue = () => {
-  attr(read<scope, Index.DIV>(Index.DIV), "b", read(Index.INPUT_VALUE));
+  attr(Index.DIV, "b", read(Index.INPUT_VALUE));
 };
 
 export const execDynamicInput = (input: typeof inputs[number]) => {

packages/runtime/test/dom/fixtures/update-dynamic-attrs/index.ts

@@ -3,7 +3,6 @@ import {
   walk,
   register,
   createRenderFn,
-  read,
   write
 } from "../../../../src/dom/index";
 import { get, over } from "../../utils/walks";
@@ -44,7 +43,7 @@ export const hydrate = register("", () => {
 });
 
 export const execInputValue = () => {
-  attrs(read<scope, Index.DIV>(Index.DIV), Index.INPUT_VALUE);
+  attrs(Index.DIV, Index.INPUT_VALUE);
 };
 
 export const execDynamicInput = (input: typeof inputs[number]) => {

packages/runtime/test/dom/fixtures/update-text/index.ts

@@ -5,8 +5,7 @@ import {
   write,
   enableExtendedWalk,
   register,
-  createRenderFn,
-  Scope
+  createRenderFn
 } from "../../../../src/dom/index";
 import { after, over } from "../../utils/walks";
 
@@ -40,7 +39,7 @@ export const hydrate = register("", () => {
 });
 
 export const execInputValue = () => {
-  data(read<scope, Index.TEXT>(Index.TEXT), read(Index.INPUT_VALUE));
+  data(Index.TEXT, read(Index.INPUT_VALUE));
 };
 
 export const execDynamicInput = (input: typeof inputs[number]) => {

packages/runtime/test/dom/fixtures/user-effect-cleanup/index.ts

@@ -50,10 +50,7 @@ export const hydrate = register("", () => {
 
 function execAB() {
   if (isDirty(Index.A) || isDirty(Index.B)) {
-    data(
-      read<scope, Index.DIV_TEXT>(Index.DIV_TEXT),
-      "" + read(Index.A) + read(Index.B)
-    );
+    data(Index.DIV_TEXT, "" + read(Index.A) + read(Index.B));
   }
 }