From 96fbeaf260cc43c47e031c831e3b7afbbb2c6220 Mon Sep 17 00:00:00 2001 From: Michael Rawlings Date: Thu, 1 Jul 2021 21:04:00 -0700 Subject: [PATCH] feat: dom helpers recieve indexes rather than nodes --- .sizes.json | 6 +- packages/runtime/src/dom/control-flow.ts | 45 +++++++++++--- packages/runtime/src/dom/dom.ts | 23 +++---- packages/runtime/src/dom/index.ts | 4 +- .../fixtures/batched-updates-cleanup/index.ts | 28 ++++----- .../dom/fixtures/batched-updates/index.ts | 2 +- .../create-and-clear-rows-loop-from/index.ts | 16 ++--- .../create-and-clear-rows-loop-in/index.ts | 15 ++--- .../fixtures/create-and-clear-rows/index.ts | 13 ++-- .../test/dom/fixtures/event-handlers/index.ts | 6 +- .../fixtures/move-and-clear-children/index.ts | 15 ++--- .../move-and-clear-top-level/index.ts | 15 ++--- .../dom/fixtures/remove-and-add-rows/index.ts | 15 ++--- .../switch-adjacent-only-children/index.ts | 16 ++--- .../fixtures/toggle-detached-state/index.ts | 11 ++-- .../dom/fixtures/toggle-first-child/index.ts | 16 ++--- .../dom/fixtures/toggle-last-child/index.ts | 23 ++++--- .../dom/fixtures/toggle-middle-child/index.ts | 16 ++--- .../test/dom/fixtures/toggle-nested/index.ts | 60 ++++++++++--------- .../dom/fixtures/toggle-only-child/index.ts | 13 ++-- .../test/dom/fixtures/update-attr/index.ts | 2 +- .../fixtures/update-dynamic-attrs/index.ts | 3 +- .../test/dom/fixtures/update-text/index.ts | 5 +- .../dom/fixtures/user-effect-cleanup/index.ts | 5 +- 24 files changed, 182 insertions(+), 191 deletions(-) diff --git a/.sizes.json b/.sizes.json index 1cb526be0..f73088bb6 100644 --- a/.sizes.json +++ b/.sizes.json @@ -6,9 +6,9 @@ { "name": "*", "individual": { - "min": 10033, - "gzip": 4292, - "brotli": 3922 + "min": 10252, + "gzip": 4379, + "brotli": 3991 } } ] diff --git a/packages/runtime/src/dom/control-flow.ts b/packages/runtime/src/dom/control-flow.ts index e0eb31ace..3939aea9d 100644 --- a/packages/runtime/src/dom/control-flow.ts +++ b/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; 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) { - setLoopOf(loop, Object.entries(object)); +export function setLoopIn(loopIndex: number, object: Record) { + setLoopOf(loopIndex, Object.entries(object)); } diff --git a/packages/runtime/src/dom/dom.ts b/packages/runtime/src/dom/dom.ts index 8134b59e6..bdc1afa99 100644 --- a/packages/runtime/src/dom/dom.ts +++ b/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; const prevAttrs = read(index + 1) as Record | 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; const prevProps = read(index + 1) as Record | 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) { diff --git a/packages/runtime/src/dom/index.ts b/packages/runtime/src/dom/index.ts index c461d169a..f44617862 100644 --- a/packages/runtime/src/dom/index.ts +++ b/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 { diff --git a/packages/runtime/test/dom/fixtures/batched-updates-cleanup/index.ts b/packages/runtime/test/dom/fixtures/batched-updates-cleanup/index.ts index 2ee6f0bf3..8465663c6 100644 --- a/packages/runtime/test/dom/fixtures/batched-updates-cleanup/index.ts +++ b/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(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( - 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"); diff --git a/packages/runtime/test/dom/fixtures/batched-updates/index.ts b/packages/runtime/test/dom/fixtures/batched-updates/index.ts index 3833df341..cf267ede3 100644 --- a/packages/runtime/test/dom/fixtures/batched-updates/index.ts +++ b/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(Index.TEXT), + Index.TEXT, read(Index.A) + read(Index.B) ); } diff --git a/packages/runtime/test/dom/fixtures/create-and-clear-rows-loop-from/index.ts b/packages/runtime/test/dom/fixtures/create-and-clear-rows-loop-from/index.ts index cca5cfa17..9cec4da52 100644 --- a/packages/runtime/test/dom/fixtures/create-and-clear-rows-loop-from/index.ts +++ 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(Index.LOOP), + Index.LOOP, read(Index.INPUT_FROM), read(Index.INPUT_TO), read(Index.INPUT_STEP) ); - for (const loopScope of read(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(Iter0Index.TEXT), - read(Iter0Index.ITEM) - ); + data(Iter0Index.TEXT, read(Iter0Index.ITEM)); } }; diff --git a/packages/runtime/test/dom/fixtures/create-and-clear-rows-loop-in/index.ts b/packages/runtime/test/dom/fixtures/create-and-clear-rows-loop-in/index.ts index b610d54d8..f59a6004f 100644 --- a/packages/runtime/test/dom/fixtures/create-and-clear-rows-loop-in/index.ts +++ b/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(Index.LOOP), + Index.LOOP, read(Index.INPUT_CHILDREN) ); - for (const loopScope of read(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(Iter0Index.ITEM)[1] ); if (isDirty(Iter0Index.ITEM_TEXT)) { - data( - read(Iter0Index.TEXT), - read(Iter0Index.ITEM_TEXT) - ); + data(Iter0Index.TEXT, read(Iter0Index.ITEM_TEXT)); } } }; diff --git a/packages/runtime/test/dom/fixtures/create-and-clear-rows/index.ts b/packages/runtime/test/dom/fixtures/create-and-clear-rows/index.ts index 7a1692d05..da0b01dcf 100644 --- a/packages/runtime/test/dom/fixtures/create-and-clear-rows/index.ts +++ b/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(Index.LOOP), + Index.LOOP, read(Index.INPUT_CHILDREN) ); - for (const loopScope of read(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(Iter0Index.ITEM).text ); if (isDirty(Iter0Index.ITEM_TEXT)) { - data( - read(Iter0Index.TEXT), - read(Iter0Index.ITEM_TEXT) - ); + data(Iter0Index.TEXT, read(Iter0Index.ITEM_TEXT)); } } }; diff --git a/packages/runtime/test/dom/fixtures/event-handlers/index.ts b/packages/runtime/test/dom/fixtures/event-handlers/index.ts index 454cfbc68..324224566 100644 --- a/packages/runtime/test/dom/fixtures/event-handlers/index.ts +++ b/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(Index.BUTTON_TEXT), - read(Index.CLICK_COUNT) - ); + data(Index.BUTTON_TEXT, read(Index.CLICK_COUNT)); } }; diff --git a/packages/runtime/test/dom/fixtures/move-and-clear-children/index.ts b/packages/runtime/test/dom/fixtures/move-and-clear-children/index.ts index 8170e56dc..eff76e236 100644 --- a/packages/runtime/test/dom/fixtures/move-and-clear-children/index.ts +++ b/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(Index.LOOP), + Index.LOOP, read(Index.INPUT_CHILDREN) ); - for (const loopScope of read(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(Iter0Index.ITEM).text ); if (isDirty(Iter0Index.ITEM_TEXT)) { - data( - read(Iter0Index.TEXT), - read(Iter0Index.ITEM_TEXT) - ); + data(Iter0Index.TEXT, read(Iter0Index.ITEM_TEXT)); } } }; diff --git a/packages/runtime/test/dom/fixtures/move-and-clear-top-level/index.ts b/packages/runtime/test/dom/fixtures/move-and-clear-top-level/index.ts index 7d62bea61..17d305c97 100644 --- a/packages/runtime/test/dom/fixtures/move-and-clear-top-level/index.ts +++ b/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(Index.LOOP), + Index.LOOP, read(Index.INPUT_CHILDREN) ); - for (const loopScope of read(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(Iter0Index.ITEM).text ); if (isDirty(Iter0Index.ITEM_TEXT)) { - data( - read(Iter0Index.TEXT), - read(Iter0Index.ITEM_TEXT) - ); + data(Iter0Index.TEXT, read(Iter0Index.ITEM_TEXT)); } } }; diff --git a/packages/runtime/test/dom/fixtures/remove-and-add-rows/index.ts b/packages/runtime/test/dom/fixtures/remove-and-add-rows/index.ts index 43b4049aa..e049f0957 100644 --- a/packages/runtime/test/dom/fixtures/remove-and-add-rows/index.ts +++ b/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(Index.LOOP), + Index.LOOP, read(Index.INPUT_CHILDREN) ); - for (const loopScope of read(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(Iter0Index.ITEM).text ); if (isDirty(Iter0Index.ITEM_TEXT)) { - data( - read(Iter0Index.TEXT), - read(Iter0Index.ITEM_TEXT) - ); + data(Iter0Index.TEXT, read(Iter0Index.ITEM_TEXT)); } } }; diff --git a/packages/runtime/test/dom/fixtures/switch-adjacent-only-children/index.ts b/packages/runtime/test/dom/fixtures/switch-adjacent-only-children/index.ts index 806881293..3d3d9d16a 100644 --- a/packages/runtime/test/dom/fixtures/switch-adjacent-only-children/index.ts +++ b/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(Index.LOOP), + Index.LOOP, read(Index.INPUT_CHILDREN) ); - for (const loopScope of read(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(Iter0Index.ITEM).text ); if (isDirty(Iter0Index.ITEM_TEXT)) { - data( - read(Iter0Index.TEXT), - read(Iter0Index.ITEM_TEXT) - ); + data(Iter0Index.TEXT, read(Iter0Index.ITEM_TEXT)); } } }; diff --git a/packages/runtime/test/dom/fixtures/toggle-detached-state/index.ts b/packages/runtime/test/dom/fixtures/toggle-detached-state/index.ts index 70277c872..b4acae2c5 100644 --- a/packages/runtime/test/dom/fixtures/toggle-detached-state/index.ts +++ b/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(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(Branch0Index.TEXT), + Branch0Index.TEXT, readInOwner(Index.INPUT_VALUE).name ); } diff --git a/packages/runtime/test/dom/fixtures/toggle-first-child/index.ts b/packages/runtime/test/dom/fixtures/toggle-first-child/index.ts index 771f99ec2..fd95bc4d1 100644 --- a/packages/runtime/test/dom/fixtures/toggle-first-child/index.ts +++ b/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(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(Branch0Index.TEXT), + Branch0Index.TEXT, readInOwner(Index.INPUT_VALUE) ); } diff --git a/packages/runtime/test/dom/fixtures/toggle-last-child/index.ts b/packages/runtime/test/dom/fixtures/toggle-last-child/index.ts index b1502203b..7d6f8e506 100644 --- a/packages/runtime/test/dom/fixtures/toggle-last-child/index.ts +++ b/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(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(Index.INPUT_VALUE) + ); +} + export const execDynamicInput = (input: typeof inputs[number]) => { write(Index.INPUT_VALUE, input.value); execInputValue(); diff --git a/packages/runtime/test/dom/fixtures/toggle-middle-child/index.ts b/packages/runtime/test/dom/fixtures/toggle-middle-child/index.ts index ec5ea9041..81837e525 100644 --- a/packages/runtime/test/dom/fixtures/toggle-middle-child/index.ts +++ b/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(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(Branch0Index.TEXT), + Branch0Index.TEXT, readInOwner(Index.INPUT_VALUE) ); } diff --git a/packages/runtime/test/dom/fixtures/toggle-nested/index.ts b/packages/runtime/test/dom/fixtures/toggle-nested/index.ts index ff8e74914..47ec53f83 100644 --- a/packages/runtime/test/dom/fixtures/toggle-nested/index.ts +++ b/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(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) => { diff --git a/packages/runtime/test/dom/fixtures/toggle-only-child/index.ts b/packages/runtime/test/dom/fixtures/toggle-only-child/index.ts index 31b2851fd..1bed014d1 100644 --- a/packages/runtime/test/dom/fixtures/toggle-only-child/index.ts +++ b/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(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(Branch0Index.TEXT), + Branch0Index.TEXT, readInOwner(Index.INPUT_VALUE) ); } diff --git a/packages/runtime/test/dom/fixtures/update-attr/index.ts b/packages/runtime/test/dom/fixtures/update-attr/index.ts index c15636c99..dc5c7aa98 100644 --- a/packages/runtime/test/dom/fixtures/update-attr/index.ts +++ b/packages/runtime/test/dom/fixtures/update-attr/index.ts @@ -47,7 +47,7 @@ export const hydrate = register("", () => { }); export const execInputValue = () => { - attr(read(Index.DIV), "b", read(Index.INPUT_VALUE)); + attr(Index.DIV, "b", read(Index.INPUT_VALUE)); }; export const execDynamicInput = (input: typeof inputs[number]) => { diff --git a/packages/runtime/test/dom/fixtures/update-dynamic-attrs/index.ts b/packages/runtime/test/dom/fixtures/update-dynamic-attrs/index.ts index 6aaa8db3c..603d9bb3e 100644 --- a/packages/runtime/test/dom/fixtures/update-dynamic-attrs/index.ts +++ b/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(Index.DIV), Index.INPUT_VALUE); + attrs(Index.DIV, Index.INPUT_VALUE); }; export const execDynamicInput = (input: typeof inputs[number]) => { diff --git a/packages/runtime/test/dom/fixtures/update-text/index.ts b/packages/runtime/test/dom/fixtures/update-text/index.ts index 1a8d1cf32..c8d394437 100644 --- a/packages/runtime/test/dom/fixtures/update-text/index.ts +++ b/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(Index.TEXT), read(Index.INPUT_VALUE)); + data(Index.TEXT, read(Index.INPUT_VALUE)); }; export const execDynamicInput = (input: typeof inputs[number]) => { diff --git a/packages/runtime/test/dom/fixtures/user-effect-cleanup/index.ts b/packages/runtime/test/dom/fixtures/user-effect-cleanup/index.ts index b1b992bdc..b9f2b8faf 100644 --- a/packages/runtime/test/dom/fixtures/user-effect-cleanup/index.ts +++ b/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(Index.DIV_TEXT), - "" + read(Index.A) + read(Index.B) - ); + data(Index.DIV_TEXT, "" + read(Index.A) + read(Index.B)); } }