From 331d58dc9451222b3d6927392a09a41ab2822c19 Mon Sep 17 00:00:00 2001 From: Michael Rawlings Date: Thu, 6 May 2021 16:04:02 -0700 Subject: [PATCH] feat: new queuing/dirty checking approach --- .sizes.json | 6 +- packages/runtime/src/dom/control-flow.ts | 8 +- packages/runtime/src/dom/index.ts | 10 +- packages/runtime/src/dom/queue.ts | 92 ++++++++++--------- packages/runtime/src/dom/renderer.ts | 9 +- packages/runtime/src/dom/scope.ts | 33 ++++++- .../fixtures/create-and-clear-rows/index.ts | 3 +- .../test/dom/fixtures/event-handlers/index.ts | 4 +- .../fixtures/move-and-clear-children/index.ts | 13 ++- .../snapshot.expected.md | 2 +- .../move-and-clear-top-level/index.ts | 3 +- .../snapshot.expected.md | 4 +- .../dom/fixtures/remove-and-add-rows/index.ts | 11 ++- .../switch-adjacent-only-children/index.ts | 11 ++- .../snapshot.expected.md | 6 +- .../fixtures/toggle-detached-state/index.ts | 5 +- .../dom/fixtures/toggle-first-child/index.ts | 3 +- .../dom/fixtures/toggle-last-child/index.ts | 3 +- .../dom/fixtures/toggle-middle-child/index.ts | 3 +- .../test/dom/fixtures/toggle-nested/index.ts | 22 ++--- .../dom/fixtures/toggle-only-child/index.ts | 3 +- .../test/dom/fixtures/update-attr/index.ts | 3 +- .../fixtures/update-dynamic-attrs/index.ts | 3 +- .../test/dom/fixtures/update-text/index.ts | 3 +- 24 files changed, 159 insertions(+), 104 deletions(-) diff --git a/.sizes.json b/.sizes.json index 7c1c7504f..a7b002bac 100644 --- a/.sizes.json +++ b/.sizes.json @@ -6,9 +6,9 @@ { "name": "*", "individual": { - "min": 8522, - "gzip": 3629, - "brotli": 3330 + "min": 8729, + "gzip": 3767, + "brotli": 3466 } } ] diff --git a/packages/runtime/src/dom/control-flow.ts b/packages/runtime/src/dom/control-flow.ts index 332fa5c41..587e43ccf 100644 --- a/packages/runtime/src/dom/control-flow.ts +++ b/packages/runtime/src/dom/control-flow.ts @@ -1,8 +1,7 @@ import { Context, setContext } from "../common/context"; import { reconcile } from "./reconcile"; import { Renderer, initRenderer } from "./renderer"; -import { getQueuedScope } from "./queue"; -import { Scope, createScope, getEmptyScope } from "./scope"; +import { Scope, createScope, getEmptyScope, set } from "./scope"; import { NodeType } from "./dom"; export type Conditional = { @@ -199,9 +198,8 @@ export function setLoopOf(loop: Loop, newArray: unknown[]) { loop.___parentOffset ); } else { - const queuedScope = getQueuedScope(childScope); - queuedScope[0] = item; - queuedScope[1] = index; + set(childScope, 0, item); + set(childScope, 1, index); } newScopes.set(key, childScope); } diff --git a/packages/runtime/src/dom/index.ts b/packages/runtime/src/dom/index.ts index e50c88a3f..9cd53f48c 100644 --- a/packages/runtime/src/dom/index.ts +++ b/packages/runtime/src/dom/index.ts @@ -31,14 +31,8 @@ export { init, register } from "./hydrate"; export { pushContext, popContext, getInContext } from "../common/context"; -export { - queue, - getQueuedScope, - run, - checkDirty, - checkDirtyNotEqual -} from "./queue"; +export { queue, setQueued, run } from "./queue"; -export { Scope } from "./scope"; +export { Scope, set, checkDirty } from "./scope"; export { createRenderer, createRenderFn } from "./renderer"; diff --git a/packages/runtime/src/dom/queue.ts b/packages/runtime/src/dom/queue.ts index 84d43ee44..fb41e9629 100644 --- a/packages/runtime/src/dom/queue.ts +++ b/packages/runtime/src/dom/queue.ts @@ -1,63 +1,73 @@ -import { Scope } from "./scope"; +import { set, cleanScopes, Scope } from "./scope"; type ExecFn = (scope: Scope, offset: number) => void; +const { port1, port2 } = new MessageChannel(); +let queued: boolean; + +port1.onmessage = () => { + queued = false; + run(); +}; + +function flushAndWaitFrame() { + run(); + requestAnimationFrame(triggerMacroTask); +} + +function triggerMacroTask() { + port2.postMessage(0); +} + const fns: Set = new Set(); let queuedFns: unknown[] = []; -export function queue(fn: ExecFn, scope: Scope, offset: number) { - // TODO: maybe don't do this and - // 1. required a queued scope to be passed in OR - // 2. get the queued scope when running the queue - const stagedScope = getQueuedScope(scope); +export function queue(fn: ExecFn, scope: Scope, offset: number) { if (fns.has(fn)) for (let i = 0; i < queuedFns.length; i += 3) if ( queuedFns[i] === fn && - queuedFns[i + 1] === stagedScope && + queuedFns[i + 1] === scope && queuedFns[i + 2] === offset ) return; else fns.add(fn); - queuedFns.push(fn, stagedScope, offset); + if (!queued) { + queued = true; + queueMicrotask(flushAndWaitFrame); + } + + queuedFns.push(fn, scope, offset); } -let queuedScopes: Map = new Map(); -export function getQueuedScope(scope: Scope) { - let queuedScope = queuedScopes.get(scope); - if (!queuedScope) { - queuedScopes.set(scope, (queuedScope = Object.create(scope))); - } - return queuedScope || scope; +let queuedValues: unknown[] = []; +export function setQueued(scope: Scope, index: number, value: unknown) { + // TODO: if the same index is set twice for a scope, + // the first one should be removed from the queue + queuedValues.push(scope, index, value); } export function run() { - const runningFns = queuedFns; - const runningScopes = queuedScopes; - queuedFns = []; - queuedScopes = new Map(); - fns.clear(); - for (let i = 0; i < runningFns.length; i += 3) { - (runningFns[i] as ExecFn)( - runningFns[i + 1] as Scope, - runningFns[i + 2] as number - ); - } - for (const runningScope of runningScopes.values()) { - Object.assign(Object.getPrototypeOf(runningScope), runningScope); + if (queuedFns.length) { + const runningFns = queuedFns; + const runningValues = queuedValues; + queuedFns = []; + queuedValues = []; + fns.clear(); + for (let i = 0; i < runningValues.length; i += 3) { + set( + runningValues[i] as Scope, + runningValues[i + 1] as number, + runningValues[i + 2] as unknown + ); + } + for (let i = 0; i < runningFns.length; i += 3) { + (runningFns[i] as ExecFn)( + runningFns[i + 1] as Scope, + runningFns[i + 2] as number + ); + } + cleanScopes(); } } - -export function getRunningScope() {} - -export function checkDirty(scope: unknown[], index: number) { - return scope.hasOwnProperty(index); -} - -export function checkDirtyNotEqual(scope: unknown[], index: number) { - return ( - checkDirty(scope, index) && - scope[index] !== Object.getPrototypeOf(scope)[index] - ); -} diff --git a/packages/runtime/src/dom/renderer.ts b/packages/runtime/src/dom/renderer.ts index f5ae32f85..78e907f81 100644 --- a/packages/runtime/src/dom/renderer.ts +++ b/packages/runtime/src/dom/renderer.ts @@ -1,7 +1,6 @@ import { Conditional, Loop } from "./control-flow"; import { DOMMethods } from "./dom"; -import { getQueuedScope, queue, run } from "./queue"; -import { createScope, Scope } from "./scope"; +import { createScope, Scope, cleanScopes } from "./scope"; import { WalkCodes, detachedWalk } from "./walker"; const enum NodeType { @@ -94,11 +93,11 @@ export function createRenderFn( const scope = createScope(size!, domMethods!); const dom = initRenderer(renderer, scope, 0) as RenderResult; dynamicInput && dynamicInput(input, scope, 0); + cleanScopes(); dom.update = (newInput: I) => { - const queuedScope = getQueuedScope(scope); - dynamicInput && dynamicInput(newInput, queuedScope, 0); - run(); + dynamicInput && dynamicInput(newInput, scope, 0); + cleanScopes(); }; dom.destroy = () => { diff --git a/packages/runtime/src/dom/scope.ts b/packages/runtime/src/dom/scope.ts index 49e6e29c6..8e29e066c 100644 --- a/packages/runtime/src/dom/scope.ts +++ b/packages/runtime/src/dom/scope.ts @@ -1,16 +1,21 @@ import { Conditional, Loop } from "./control-flow"; import { DOMMethods, staticNodeMethods } from "./dom"; +const dirtyScopes: Set = new Set(); + export type Scope = unknown[] & DOMMethods & { ___startNode: Conditional | Loop | Node | undefined; ___endNode: Conditional | Loop | Node | undefined; + ___dirty: Record | true | undefined; }; export function createScope(size: number, methods: DOMMethods): Scope { const scope = new Array(size).fill(undefined) as Scope; scope.___startNode = scope.___endNode = undefined; - return Object.assign(scope, methods); + scope.___dirty = true; + dirtyScopes.add(Object.assign(scope, methods)); + return scope; } const emptyScope = createScope(0, staticNodeMethods); @@ -19,4 +24,28 @@ export function getEmptyScope(marker?: Comment) { return emptyScope; } -export function attachDOMToScope(scope: Scope, dom: Node) {} +export function set(scope: Scope, index: number, value: unknown) { + if (scope[index] !== value) { + if (!scope.___dirty) { + scope.___dirty = {}; + dirtyScopes.add(scope); + } + + scope[index] = value; + if (scope.___dirty !== true) { + scope.___dirty[index] = true; + } + } +} + +export function checkDirty(scope: Scope, index: number) { + const dirty = scope.___dirty; + return dirty === true || (dirty && dirty[index]); +} + +export function cleanScopes() { + for (const scope of dirtyScopes) { + scope.___dirty = undefined; + } + dirtyScopes.clear(); +} 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 904e7a0d7..82640dbdc 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 @@ -2,6 +2,7 @@ import { walk, data, loop, + set, setLoopOf, Loop, Scope, @@ -73,7 +74,7 @@ export const execDynamicInput = ( scope: Scope, offset: number ) => { - scope[offset] = input.children; + set(scope, offset, input.children); execInputChildren(scope, offset); }; diff --git a/packages/runtime/test/dom/fixtures/event-handlers/index.ts b/packages/runtime/test/dom/fixtures/event-handlers/index.ts index 21bfee271..170d8dba0 100644 --- a/packages/runtime/test/dom/fixtures/event-handlers/index.ts +++ b/packages/runtime/test/dom/fixtures/event-handlers/index.ts @@ -6,7 +6,7 @@ import { Scope, on, ensureDelegated, - getQueuedScope, + setQueued, queue, checkDirty } from "../../../../src/dom/index"; @@ -39,7 +39,7 @@ const execClickCount = (scope: Scope, offset: number) => { "click", scope[offset] <= 1 ? () => { - (getQueuedScope(scope)[offset] as number)++; + setQueued(scope, offset, (scope[offset] as number) + 1); queue(execClickCount, scope, offset); } : false 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 5b67b2780..46810c1aa 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 @@ -2,12 +2,14 @@ import { walk, data, loop, + set, setLoopOf, Loop, Scope, createRenderer, createRenderFn, - staticNodeMethods + staticNodeMethods, + checkDirty } from "../../../../src/dom/index"; import { get, next, over } from "../../utils/walks"; @@ -73,7 +75,7 @@ export const execDynamicInput = ( scope: Scope, offset: number ) => { - scope[offset] = input.children; + set(scope, offset, input.children); execInputChildren(scope, offset); }; @@ -90,5 +92,10 @@ const iter0 = createRenderer( ); const iter0_execItem = (scope: Scope) => { - data(scope[3] as Text, (scope[0] as Input["children"][number]).text); + if (checkDirty(scope, 0)) { + set(scope, 4, (scope[0] as Input["children"][number]).text); + if (checkDirty(scope, 4)) { + data(scope[3] as Text, scope[4]); + } + } }; diff --git a/packages/runtime/test/dom/fixtures/move-and-clear-children/snapshot.expected.md b/packages/runtime/test/dom/fixtures/move-and-clear-children/snapshot.expected.md index 4ae97a729..4705583af 100644 --- a/packages/runtime/test/dom/fixtures/move-and-clear-children/snapshot.expected.md +++ b/packages/runtime/test/dom/fixtures/move-and-clear-children/snapshot.expected.md @@ -20,7 +20,7 @@ inserted div0 # Mutations ``` -removed #text before div0/#text0 +removed div0/#text2 before div0/#text0 inserted div0/#text2 ``` 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 fdb3d0ff7..ccab29b02 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 @@ -2,6 +2,7 @@ import { walk, data, loop, + set, setLoopOf, Loop, Scope, @@ -73,7 +74,7 @@ export const execDynamicInput = ( scope: Scope, offset: number ) => { - scope[offset] = input.children; + set(scope, offset, input.children); execInputChildren(scope, offset); }; diff --git a/packages/runtime/test/dom/fixtures/move-and-clear-top-level/snapshot.expected.md b/packages/runtime/test/dom/fixtures/move-and-clear-top-level/snapshot.expected.md index 135ce44f5..55d96145e 100644 --- a/packages/runtime/test/dom/fixtures/move-and-clear-top-level/snapshot.expected.md +++ b/packages/runtime/test/dom/fixtures/move-and-clear-top-level/snapshot.expected.md @@ -17,8 +17,8 @@ inserted #text0, #text1, #text2 # Mutations ``` inserted #comment0 -removed #text before -removed #text before +removed #text before #text +removed #text before #text removed #text before #comment0 ``` 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 aca15a125..f6b297ed2 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 @@ -2,9 +2,11 @@ import { walk, data, loop, + set, setLoopOf, Loop, Scope, + checkDirty, createRenderer, createRenderFn, staticNodeMethods @@ -78,7 +80,7 @@ export const execDynamicInput = ( scope: Scope, offset: number ) => { - scope[offset] = input.children; + set(scope, offset, input.children); execInputChildren(scope, offset); }; @@ -95,5 +97,10 @@ const iter0 = createRenderer( ); const iter0_execItem = (scope: Scope) => { - data(scope[3] as Text, (scope[0] as Input["children"][number]).text); + if (checkDirty(scope, 0)) { + set(scope, 4, (scope[0] as Input["children"][number]).text); + if (checkDirty(scope, 4)) { + data(scope[3] as Text, scope[4]); + } + } }; 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 ee60e2efa..927a01045 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,9 +2,11 @@ import { walk, data, loop, + set, setLoopOf, Loop, Scope, + checkDirty, createRenderer, createRenderFn, staticNodeMethods @@ -74,7 +76,7 @@ export const execDynamicInput = ( scope: Scope, offset: number ) => { - scope[offset] = input.children; + set(scope, offset, input.children); execInputChildren(scope, offset); }; @@ -91,5 +93,10 @@ const iter0 = createRenderer( ); const iter0_execItem = (scope: Scope) => { - data(scope[3] as Text, (scope[0] as Input["children"][number]).text); + if (checkDirty(scope, 0)) { + set(scope, 4, (scope[0] as Input["children"][number]).text); + if (checkDirty(scope, 4)) { + data(scope[3] as Text, scope[4]); + } + } }; diff --git a/packages/runtime/test/dom/fixtures/switch-adjacent-only-children/snapshot.expected.md b/packages/runtime/test/dom/fixtures/switch-adjacent-only-children/snapshot.expected.md index b818898e7..3488c4859 100644 --- a/packages/runtime/test/dom/fixtures/switch-adjacent-only-children/snapshot.expected.md +++ b/packages/runtime/test/dom/fixtures/switch-adjacent-only-children/snapshot.expected.md @@ -20,10 +20,10 @@ inserted div0 # Mutations ``` -removed #text after div0/#text1 +removed div0/#text0 after div0/#text1 inserted div0/#text0 -div0/#text1: "a" => "d" div0/#text0: "b" => "c" +div0/#text1: "a" => "d" ``` @@ -36,6 +36,6 @@ div0/#text0: "b" => "c" # Mutations ``` -removed #text after div0/#text1 +removed div0/#text0 after div0/#text1 inserted div0/#text0 ``` \ No newline at end of file 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 e0dc2b103..2aae6b251 100644 --- a/packages/runtime/test/dom/fixtures/toggle-detached-state/index.ts +++ b/packages/runtime/test/dom/fixtures/toggle-detached-state/index.ts @@ -1,6 +1,7 @@ import { walk, data, + set, conditional, setConditionalRenderer, Conditional, @@ -49,8 +50,8 @@ export const execDynamicInput = ( scope: Scope, offset: number ) => { - scope[offset] = input.value; - scope[offset + 1] = input.visible; + set(scope, offset, input.value); + set(scope, offset + 1, input.visible); execInputValueVisible(scope, offset); }; 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 826860f9a..4e2084c52 100644 --- a/packages/runtime/test/dom/fixtures/toggle-first-child/index.ts +++ b/packages/runtime/test/dom/fixtures/toggle-first-child/index.ts @@ -5,6 +5,7 @@ import { setConditionalRenderer, Conditional, Scope, + set, createRenderer, createRenderFn, staticNodeMethods @@ -46,7 +47,7 @@ export const execDynamicInput = ( scope: Scope, offset: number ) => { - scope[offset] = input.value; + set(scope, offset, input.value); execInputValue(scope, offset); }; 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 33bf10982..09b7e1da4 100644 --- a/packages/runtime/test/dom/fixtures/toggle-last-child/index.ts +++ b/packages/runtime/test/dom/fixtures/toggle-last-child/index.ts @@ -5,6 +5,7 @@ import { setConditionalRenderer, Conditional, Scope, + set, createRenderer, createRenderFn, staticNodeMethods @@ -46,7 +47,7 @@ export const execDynamicInput = ( scope: Scope, offset: number ) => { - scope[offset] = input.value; + set(scope, offset, input.value); execInputValue(scope, offset); }; 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 26c1acc4f..9b0fa0550 100644 --- a/packages/runtime/test/dom/fixtures/toggle-middle-child/index.ts +++ b/packages/runtime/test/dom/fixtures/toggle-middle-child/index.ts @@ -5,6 +5,7 @@ import { setConditionalRenderer, Conditional, Scope, + set, createRenderer, createRenderFn, staticNodeMethods @@ -46,7 +47,7 @@ export const execDynamicInput = ( scope: Scope, offset: number ) => { - scope[offset] = input.value; + set(scope, offset, input.value); execInputValue(scope, offset); }; diff --git a/packages/runtime/test/dom/fixtures/toggle-nested/index.ts b/packages/runtime/test/dom/fixtures/toggle-nested/index.ts index cf30d70cc..9f2f71a2a 100644 --- a/packages/runtime/test/dom/fixtures/toggle-nested/index.ts +++ b/packages/runtime/test/dom/fixtures/toggle-nested/index.ts @@ -5,12 +5,12 @@ import { setConditionalRenderer, Conditional, Scope, + set, createRenderer, createRenderFn, staticNodeMethods, dynamicFragmentMethods, - checkDirty, - checkDirtyNotEqual + checkDirty } from "../../../../src/dom/index"; import { next, over, get } from "../../utils/walks"; @@ -59,15 +59,12 @@ export const hydrate = (scope: Scope, offset: number) => { export const execInputShowValue1Value2 = (scope: Scope, offset: number) => { const cond0 = scope[offset + 3] as Conditional; - if (checkDirtyNotEqual(scope, offset)) { + if (checkDirty(scope, offset)) { setConditionalRenderer(cond0, scope[offset] ? branch0 : undefined); } if (cond0.renderer === branch0) { const cond0_scope = cond0.scope; - if ( - checkDirtyNotEqual(scope, offset) || - checkDirtyNotEqual(scope, offset + 1) - ) { + if (checkDirty(scope, offset) || checkDirty(scope, offset + 1)) { const cond0_0 = cond0_scope[0] as Conditional; setConditionalRenderer( cond0_0, @@ -78,10 +75,7 @@ export const execInputShowValue1Value2 = (scope: Scope, offset: number) => { data(cond0_0_scope[0] as Text, scope[offset + 1]); } } - if ( - checkDirtyNotEqual(scope, offset) || - checkDirtyNotEqual(scope, offset + 2) - ) { + if (checkDirty(scope, offset) || checkDirty(scope, offset + 2)) { const cond0_1 = cond0_scope[1] as Conditional; setConditionalRenderer( cond0_1, @@ -100,9 +94,9 @@ export const execDynamicInput = ( scope: Scope, offset: number ) => { - scope[offset] = input.show; - scope[offset + 1] = input.value1; - scope[offset + 2] = input.value2; + set(scope, offset, input.show); + set(scope, offset + 1, input.value1); + set(scope, offset + 2, input.value2); execInputShowValue1Value2(scope, offset); }; 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 a2865f684..6fbd12d94 100644 --- a/packages/runtime/test/dom/fixtures/toggle-only-child/index.ts +++ b/packages/runtime/test/dom/fixtures/toggle-only-child/index.ts @@ -5,6 +5,7 @@ import { setConditionalRendererOnlyChild, Conditional, Scope, + set, createRenderer, createRenderFn, staticNodeMethods @@ -46,7 +47,7 @@ export const execDynamicInput = ( scope: Scope, offset: number ) => { - scope[offset] = input.value; + set(scope, offset, input.value); execInputValue(scope, offset); }; diff --git a/packages/runtime/test/dom/fixtures/update-attr/index.ts b/packages/runtime/test/dom/fixtures/update-attr/index.ts index ca5a13e1a..20b52ab48 100644 --- a/packages/runtime/test/dom/fixtures/update-attr/index.ts +++ b/packages/runtime/test/dom/fixtures/update-attr/index.ts @@ -2,6 +2,7 @@ import { attr, walk, register, + set, createRenderFn, Scope } from "../../../../src/dom/index"; @@ -44,7 +45,7 @@ export const execDynamicInput = ( scope: Scope, offset: number ) => { - scope[offset] = input.value; + set(scope, offset, input.value); execInputValue(scope, offset); }; 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 b3276e680..f14d3c7b6 100644 --- a/packages/runtime/test/dom/fixtures/update-dynamic-attrs/index.ts +++ b/packages/runtime/test/dom/fixtures/update-dynamic-attrs/index.ts @@ -1,6 +1,7 @@ import { attrs, walk, + set, register, createRenderFn, Scope @@ -41,7 +42,7 @@ export const execDynamicInput = ( scope: Scope, offset: number ) => { - scope[offset] = input.value; + set(scope, offset, input.value); execInputValue(scope, offset); }; diff --git a/packages/runtime/test/dom/fixtures/update-text/index.ts b/packages/runtime/test/dom/fixtures/update-text/index.ts index e6f08059b..e0374698c 100644 --- a/packages/runtime/test/dom/fixtures/update-text/index.ts +++ b/packages/runtime/test/dom/fixtures/update-text/index.ts @@ -1,6 +1,7 @@ import { data, walk, + set, enableExtendedWalk, register, createRenderFn, @@ -36,7 +37,7 @@ export const execDynamicInput = ( scope: Scope, offset: number ) => { - scope[offset] = input.value; + set(scope, offset, input.value); execInputValue(scope, offset); };