chore: update compilations to split out hydration functions

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<string, Renderer["___hydrate"]> = {};
+type HydrateFn = () => void;
 
-export function register<H extends Renderer["___hydrate"]>(
-  id: string,
-  hydrate: H
-) {
+const hydrateById: Record<string, HydrateFn> = {};
+
+export function register<H extends HydrateFn>(id: string, hydrate: H) {
   hydrateById[id] = hydrate;
   return hydrate;
 }

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<string, unknown>;
-type HydrateFn =
-  | ((scope: Scope) => void)
-  | ((scope: Scope, offset: number) => void)
-  | ((scope: Scope, parentScope: Scope, parentOffset: number) => void)
-  | ((scope: Scope, parentScopesAndOffsets: Array<Scope | number>) => void);
-type DynamicInputFn<I extends Input> = (
-  input: I,
-  scope: Scope,
-  offset: number
-) => void;
+type RenderFn = () => void;
+type DynamicInputFn<I extends Input> = (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<I extends Input>(
   template: string,
   walks: string,
-  hydrate?: HydrateFn,
+  render?: RenderFn,
   size?: number,
   dynamicInput?: DynamicInputFn<I>,
   hasUserEffects?: 0 | 1,
@@ -77,7 +69,7 @@ export function createRenderFn<I extends Input>(
   const renderer = createRenderer(
     template,
     walks,
-    hydrate,
+    render,
     size,
     hasUserEffects,
     domMethods,
@@ -105,10 +97,10 @@ export function createRenderFn<I extends Input>(
   };
 }
 
-export function createRenderer<H extends HydrateFn>(
+export function createRenderer<R extends RenderFn>(
   template: string,
   walks?: string,
-  hydrate?: H,
+  render?: R,
   size = 0,
   hasUserEffects: 0 | 1 = 0,
   domMethods: DOMMethods = staticNodeMethods,
@@ -120,7 +112,7 @@ export function createRenderer<H extends HydrateFn>(
   return {
     ___template: template,
     ___walks: walks && trimWalkString(walks),
-    ___hydrate: hydrate,
+    ___render: render,
     ___clone: _clone,
     ___size: size,
     ___hasUserEffects: hasUserEffects,

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

@@ -46,13 +46,15 @@ type scope = {
 
 export const template = `<button></button><!>`;
 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");
 

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

@@ -39,11 +39,15 @@ type scope = {
 
 export const template = `<button> </button>`;
 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");

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

@@ -36,12 +36,23 @@ type scope = {
 
 export const template = `<button> </button>`;
 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<scope, Index.CLICK_COUNT>(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<scope, Index.CLICK_COUNT>(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");

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

@@ -40,11 +40,11 @@ type scope = {
 // }/>
 export const template = `<div> </div>`;
 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);