From 55c9cef9a24e07b54546c73f600e4ce21547db90 Mon Sep 17 00:00:00 2001 From: Michael Rawlings Date: Tue, 31 Aug 2021 12:12:45 -0700 Subject: [PATCH] chore: update compilations to split out hydration functions --- packages/runtime/src/dom/hydrate.ts | 10 +++---- packages/runtime/src/dom/renderer.ts | 28 +++++++------------ .../fixtures/batched-updates-cleanup/index.ts | 12 ++++---- .../dom/fixtures/batched-updates/index.ts | 10 +++++-- .../test/dom/fixtures/event-handlers/index.ts | 25 +++++++++++++---- .../dom/fixtures/user-effect-cleanup/index.ts | 10 +++---- 6 files changed, 53 insertions(+), 42 deletions(-) diff --git a/packages/runtime/src/dom/hydrate.ts b/packages/runtime/src/dom/hydrate.ts index 9fec47b97..b90928734 100644 --- a/packages/runtime/src/dom/hydrate.ts +++ b/packages/runtime/src/dom/hydrate.ts @@ -1,13 +1,11 @@ import { CommentWalker, HydrateInstance } from "../common/types"; -import { Renderer } from "./renderer"; import { beginHydrate, endHydrate } from "./walker"; -const hydrateById: Record = {}; +type HydrateFn = () => void; -export function register( - id: string, - hydrate: H -) { +const hydrateById: Record = {}; + +export function register(id: string, hydrate: H) { hydrateById[id] = hydrate; return hydrate; } diff --git a/packages/runtime/src/dom/renderer.ts b/packages/runtime/src/dom/renderer.ts index 82a41b714..96834efe8 100644 --- a/packages/runtime/src/dom/renderer.ts +++ b/packages/runtime/src/dom/renderer.ts @@ -12,7 +12,7 @@ const enum NodeType { export type Renderer = { ___template: string; ___walks: string | undefined; - ___hydrate: HydrateFn | undefined; + ___render: RenderFn | undefined; ___clone: () => Node; ___size: number; ___hasUserEffects: 0 | 1; @@ -25,16 +25,8 @@ export type Renderer = { }; type Input = Record; -type HydrateFn = - | ((scope: Scope) => void) - | ((scope: Scope, offset: number) => void) - | ((scope: Scope, parentScope: Scope, parentOffset: number) => void) - | ((scope: Scope, parentScopesAndOffsets: Array) => void); -type DynamicInputFn = ( - input: I, - scope: Scope, - offset: number -) => void; +type RenderFn = () => void; +type DynamicInputFn = (input: I) => void; type RenderResult = Node & { update: (input: Input) => void; destroy: () => void; @@ -47,8 +39,8 @@ export function initRenderer(renderer: Renderer, scope: Scope) { scope.___endNode = dom.nodeType === NodeType.DocumentFragment ? dom.lastChild! : dom; walk(scope.___startNode, renderer.___walks!, scope); - if (renderer.___hydrate) { - runWithScope(renderer.___hydrate, 0, scope); + if (renderer.___render) { + runWithScope(renderer.___render, 0, scope); } if (renderer.___dynamicStartNodeMethod) { scope.___getFirstNode = renderer.___dynamicStartNodeMethod; @@ -64,7 +56,7 @@ export function initRenderer(renderer: Renderer, scope: Scope) { export function createRenderFn( template: string, walks: string, - hydrate?: HydrateFn, + render?: RenderFn, size?: number, dynamicInput?: DynamicInputFn, hasUserEffects?: 0 | 1, @@ -77,7 +69,7 @@ export function createRenderFn( const renderer = createRenderer( template, walks, - hydrate, + render, size, hasUserEffects, domMethods, @@ -105,10 +97,10 @@ export function createRenderFn( }; } -export function createRenderer( +export function createRenderer( template: string, walks?: string, - hydrate?: H, + render?: R, size = 0, hasUserEffects: 0 | 1 = 0, domMethods: DOMMethods = staticNodeMethods, @@ -120,7 +112,7 @@ export function createRenderer( return { ___template: template, ___walks: walks && trimWalkString(walks), - ___hydrate: hydrate, + ___render: render, ___clone: _clone, ___size: size, ___hasUserEffects: hasUserEffects, 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 0fb8c4531..fbdc6c897 100644 --- a/packages/runtime/test/dom/fixtures/batched-updates-cleanup/index.ts +++ b/packages/runtime/test/dom/fixtures/batched-updates-cleanup/index.ts @@ -46,13 +46,15 @@ type scope = { export const template = ``; export const walks = open(7) + get + over(1) + get + over(1) + close; -export const hydrate = register("", () => { +export const render = () => { write(Index.SHOW, true); write(Index.MESSAGE, "hi"); - - on(Index.BUTTON, "click", bind(clickHandler)); - execShowMessage(); + hydrate(); +}; + +export const hydrate = register("", () => { + on(Index.BUTTON, "click", bind(clickHandler)); }); const clickHandler = () => { @@ -77,7 +79,7 @@ const execMessageBranch0 = () => { data(Branch0Index.TEXT, readInOwner(Index.MESSAGE)); }; -export default createRenderFn(template, walks, hydrate, 0); +export default createRenderFn(template, walks, render, 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 85cad5bab..7ea160bed 100644 --- a/packages/runtime/test/dom/fixtures/batched-updates/index.ts +++ b/packages/runtime/test/dom/fixtures/batched-updates/index.ts @@ -39,11 +39,15 @@ type scope = { export const template = ``; export const walks = open(4) + get + next(1) + get + next(1) + close; -export const hydrate = register("", () => { +export const render = () => { write(Index.A, 0); write(Index.B, 0); - on(Index.BUTTON, "click", bind(clickHandler)); execAB(); + hydrate(); +}; + +export const hydrate = register("", () => { + on(Index.BUTTON, "click", bind(clickHandler)); }); const clickHandler = () => { @@ -61,6 +65,6 @@ const execAB = () => { } }; -export default createRenderFn(template, walks, hydrate, 0); +export default createRenderFn(template, walks, render, 0); ensureDelegated("click"); diff --git a/packages/runtime/test/dom/fixtures/event-handlers/index.ts b/packages/runtime/test/dom/fixtures/event-handlers/index.ts index f5649c064..a8ce9f966 100644 --- a/packages/runtime/test/dom/fixtures/event-handlers/index.ts +++ b/packages/runtime/test/dom/fixtures/event-handlers/index.ts @@ -36,12 +36,23 @@ type scope = { export const template = ``; export const walks = open(3) + get + next(1) + get + next(1) + close; -export const hydrate = register("", () => { +export const render = () => { write(Index.CLICK_COUNT, 0); - execClickCount(); + renderClickCount(); + hydrate(); +}; + +export const hydrate = register("", () => { + hydrateClickCount(); }); -const execClickCount = () => { +const renderClickCount = () => { + if (isDirty(Index.CLICK_COUNT)) { + data(Index.BUTTON_TEXT, read(Index.CLICK_COUNT)); + } +}; + +const hydrateClickCount = () => { if (isDirty(Index.CLICK_COUNT)) { on( Index.BUTTON, @@ -50,10 +61,14 @@ const execClickCount = () => { ? bind(clickHandler) : false ); - data(Index.BUTTON_TEXT, read(Index.CLICK_COUNT)); } }; +const execClickCount = () => { + renderClickCount(); + hydrateClickCount(); +}; + const clickHandler = () => { writeQueued( Index.CLICK_COUNT, @@ -62,6 +77,6 @@ const clickHandler = () => { queue(execClickCount); }; -export default createRenderFn(template, walks, hydrate, 0); +export default createRenderFn(template, walks, render, 0); ensureDelegated("click"); 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 c8d00bb3c..dffa01249 100644 --- a/packages/runtime/test/dom/fixtures/user-effect-cleanup/index.ts +++ b/packages/runtime/test/dom/fixtures/user-effect-cleanup/index.ts @@ -40,11 +40,11 @@ type scope = { // }/> export const template = `
`; export const walks = open(5) + next(1) + get + next(1) + close; -export const hydrate = register("", () => { +export const render = () => { write(Index.A, 0); write(Index.B, 0); execAB(); -}); +}; function execAB() { if (isDirty(Index.A) || isDirty(Index.B)) { @@ -52,7 +52,7 @@ function execAB() { } } -export const execInputValue = () => { +export const hydrateInputValue = () => { if (isDirty(Index.INPUT_VALUE)) { userEffect(Index.EFFECT_CLEANUP, effectFn); } @@ -70,7 +70,7 @@ const effectFn = () => { export const execDynamicInput = (input: typeof inputs[0]) => { write(Index.INPUT_VALUE, input.value); - execInputValue(); + hydrateInputValue(); }; -export default createRenderFn(template, walks, hydrate, 0, execDynamicInput); +export default createRenderFn(template, walks, render, 0, execDynamicInput);