refactor: make loop/conditional regular fns, not classes

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

@@ -4,100 +4,106 @@ import { Renderer, initRenderer } from "./renderer";
 import { getQueuedScope } from "./queue";
 import { Scope, createScope, getEmptyScope } from "./scope";
 import { NodeType } from "./dom";
-export class Conditional {
-  private ___scope?: Scope;
-  private ___parentScopeOrScopes?: Scope | Array<Scope | number>;
-  private ___parentOffset?: number;
-  private ___renderer?: Renderer;
-  private ___referenceNode: Comment | Element;
-  private ___context: typeof Context;
 
-  constructor(
-    referenceNode: Comment | Element,
-    parentScopeOrScopes?: Scope | Array<Scope | number>,
-    parentOffset?: number
-  ) {
-    this.___scope = this.___renderer = undefined;
-    this.___referenceNode = referenceNode;
-    this.___parentScopeOrScopes = parentScopeOrScopes;
-    this.___parentOffset = parentOffset;
-    this.___context = Context;
-  }
+export type Conditional = {
+  scope?: Scope;
+  renderer?: Renderer;
+  ___parentScopeOrScopes?: Scope | Array<Scope | number>;
+  ___parentOffset?: number;
+  ___referenceNode: Comment | Element;
+  ___context: typeof Context;
+  ___getFirstNode: () => Node;
+  ___getLastNode: () => Node;
+};
 
-  get renderer() {
-    return this.___renderer;
-  }
+export function conditional(
+  referenceNode: Comment | Element,
+  parentScopeOrScopes?: Scope | Array<Scope | number>,
+  parentOffset?: number
+): Conditional {
+  return {
+    scope: undefined,
+    renderer: undefined,
+    ___referenceNode: referenceNode,
+    ___parentScopeOrScopes: parentScopeOrScopes,
+    ___parentOffset: parentOffset,
+    ___context: Context,
+    ___getFirstNode: getFirstNodeConditional,
+    ___getLastNode: getLastNodeConditional
+  };
+}
 
-  set renderer(newRenderer: Renderer | undefined) {
-    if (this.___renderer !== (this.___renderer = newRenderer)) {
-      let newScope: Scope;
-      let prevScope = this.___scope!;
+export function setConditionalRenderer(
+  conditonal: Conditional,
+  newRenderer: Renderer | undefined
+) {
+  if (conditonal.renderer !== (conditonal.renderer = newRenderer)) {
+    let newScope: Scope;
+    let prevScope = conditonal.scope!;
 
-      if (newRenderer) {
-        setContext(this.___context);
-        newScope = this.___scope = createScope(
-          newRenderer.___size,
-          newRenderer.___domMethods!
-        );
-        initRenderer(
-          newRenderer,
-          newScope,
-          this.___parentScopeOrScopes,
-          this.___parentOffset
-        );
-        prevScope =
-          prevScope || getEmptyScope(this.___referenceNode as Comment);
-        setContext(null);
-      } else {
-        newScope = getEmptyScope(this.___referenceNode as Comment);
-        this.___scope = undefined;
-      }
-
-      newScope.___insertBefore(
-        prevScope.___getParentNode(),
-        prevScope.___getFirstNode()
+    if (newRenderer) {
+      setContext(conditonal.___context);
+      newScope = conditonal.scope = createScope(
+        newRenderer.___size,
+        newRenderer.___domMethods!
       );
-      prevScope.___remove();
+      initRenderer(
+        newRenderer,
+        newScope,
+        conditonal.___parentScopeOrScopes,
+        conditonal.___parentOffset
+      );
+      prevScope =
+        prevScope || getEmptyScope(conditonal.___referenceNode as Comment);
+      setContext(null);
+    } else {
+      newScope = getEmptyScope(conditonal.___referenceNode as Comment);
+      conditonal.scope = undefined;
+    }
+
+    newScope.___insertBefore(
+      prevScope.___getParentNode(),
+      prevScope.___getFirstNode()
+    );
+    prevScope.___remove();
+  }
+}
+
+export function setConditionalRendererOnlyChild(
+  conditonal: Conditional,
+  newRenderer: Renderer | undefined
+) {
+  if (conditonal.renderer !== (conditonal.renderer = newRenderer)) {
+    (conditonal.___referenceNode as Element).textContent = "";
+
+    if (newRenderer) {
+      setContext(conditonal.___context);
+      const newScope = (conditonal.scope = createScope(
+        newRenderer.___size,
+        newRenderer.___domMethods!
+      ));
+      initRenderer(
+        newRenderer,
+        newScope,
+        conditonal.___parentScopeOrScopes,
+        conditonal.___parentOffset
+      );
+      newScope.___insertBefore(conditonal.___referenceNode as Element, null);
+      setContext(null);
     }
   }
+}
 
-  set rendererOnlyChild(newRenderer: Renderer | undefined) {
-    if (this.___renderer !== (this.___renderer = newRenderer)) {
-      (this.___referenceNode as Element).textContent = "";
+function getFirstNodeConditional(this: Conditional) {
+  return this.scope
+    ? this.scope.___getFirstNode()
+    : (this.___referenceNode as Comment);
+}
 
-      if (newRenderer) {
-        setContext(this.___context);
-        const newScope = (this.___scope = createScope(
-          newRenderer.___size,
-          newRenderer.___domMethods!
-        ));
-        initRenderer(
-          newRenderer,
-          newScope,
-          this.___parentScopeOrScopes,
-          this.___parentOffset
-        );
-        newScope.___insertBefore(this.___referenceNode as Element, null);
-        setContext(null);
-      }
-    }
-  }
-
-  get scope() {
-    return this.___scope!;
-  }
-
-  ___getFirstNode() {
-    return this.___scope
-      ? this.___scope.___getFirstNode()
-      : (this.___referenceNode as Comment);
-  }
-
-  ___getLastNode() {
-    return this.___scope
-      ? this.___scope.___getLastNode()
-      : (this.___referenceNode as Comment);
-  }
+function getLastNodeConditional(this: Conditional) {
+  return this.scope
+    ? this.scope.___getLastNode()
+    : (this.___referenceNode as Comment);
 }
 
 const emptyMarkerScopes = new Map();
@@ -105,174 +111,135 @@ const emptyMarkerKeys = [Symbol("empty")];
 emptyMarkerScopes.set(emptyMarkerKeys[0], getEmptyScope());
 const emptyScopes = new Map();
 const emptyKeys = [];
-export class Loop {
-  private ___referenceIsMarker: boolean;
-  private ___scopes: Map<unknown, Scope>;
-  private ___scopeKeys: unknown[];
-  private ___parentScopeOrScopes?: Scope | Array<Scope | number>;
-  private ___parentOffset?: number;
-  private ___referenceNode?: Comment | Element;
-  private ___renderer: Renderer;
-  private ___keyFn: (item: unknown, index: number) => string;
-  private ___execItem: (...args: unknown[]) => unknown;
-  private ___execIndex: (...args: unknown[]) => unknown;
-  private ___execArray: (...args: unknown[]) => unknown;
-  private ___context: typeof Context;
 
-  constructor(
-    referenceNode: Comment | Element,
-    renderer: Renderer,
-    keyFn: (item: unknown) => string,
-    execItem,
-    execIndex,
-    execArray,
-    parentScopeOrScopes?: Scope | Array<Scope | number>,
-    parentOffset?: number
-  ) {
-    const referenceIsMarker = referenceNode.nodeType === NodeType.Comment;
-    this.___scopes = referenceIsMarker ? emptyMarkerScopes : emptyScopes;
-    this.___scopeKeys = referenceIsMarker ? emptyMarkerKeys : emptyKeys;
-    this.___referenceNode = referenceNode;
-    this.___referenceIsMarker = referenceIsMarker;
-    this.___renderer = renderer;
-    this.___keyFn = keyFn;
-    this.___parentScopeOrScopes = parentScopeOrScopes;
-    this.___parentOffset = parentOffset;
-    this.___execItem = execItem;
-    this.___execIndex = execIndex;
-    this.___execArray = execArray;
-    this.___context = Context;
-  }
+export type Loop = {
+  ___scopes: Map<unknown, Scope>;
+  ___scopeKeys: unknown[];
+  ___referenceNode: Comment | Element;
+  ___referenceIsMarker: boolean;
+  ___renderer: Renderer;
+  ___keyFn: undefined | ((item: unknown, index: number) => unknown);
+  ___parentScopeOrScopes: Scope | Array<Scope | number> | undefined;
+  ___parentOffset: number | undefined;
+  ___context: typeof Context;
+  ___getFirstNode: () => Node;
+  ___getLastNode: () => Node;
+  [Symbol.iterator]: () => IterableIterator<Scope>;
+};
 
-  [Symbol.iterator]() {
-    return this.___scopes.values();
-  }
-
-  ___execChildScope(childScope: Scope) {
-    // TODO: these could all be the same function... in which case we shouldn't call it 3 times
-    this.___execItem &&
-      this.___execItem(
-        childScope,
-        this.___parentScopeOrScopes,
-        this.___parentOffset
-      );
-    this.___execIndex &&
-      this.___execIndex(
-        childScope,
-        this.___parentScopeOrScopes,
-        this.___parentOffset
-      );
-    this.___execArray &&
-      this.___execArray(
-        childScope,
-        this.___parentScopeOrScopes,
-        this.___parentOffset
-      );
-  }
-
-  ___getFirstNode() {
-    return this.___scopes.get(this.___scopeKeys[0])!.___getFirstNode();
-  }
-
-  ___getLastNode() {
-    return this.___scopes
-      .get(this.___scopeKeys[this.___scopeKeys.length - 1])!
-      .___getLastNode();
-  }
-
-  setOf(newArray: unknown[]) {
-    let newScopes: Map<unknown, Scope>;
-    let newKeys: unknown[];
-    const len = newArray.length;
-    const oldScopes = this.___scopes;
-    const oldKeys = this.___scopeKeys;
-    let newItems = 0;
-    let moved = false;
-    const referenceIsMarker = this.___referenceIsMarker;
-    let afterReference: Node | null;
-    let parentNode: Node & ParentNode;
-
-    if (len > 0) {
-      newScopes = new Map();
-      setContext(this.___context);
-      for (let index = 0; index < len; index++) {
-        const item = newArray[index];
-        const key = this.___keyFn ? this.___keyFn(item, index) : "" + index;
-        let childScope = oldScopes.get(key);
-        if (!childScope) {
-          newItems++;
-          childScope = createScope(
-            this.___renderer.___size,
-            this.___renderer.___domMethods!
-          );
-          childScope[0] = item;
-          childScope[1] = index;
-          childScope[2] = newArray;
-          initRenderer(
-            this.___renderer,
-            childScope,
-            this.___parentScopeOrScopes,
-            this.___parentOffset
-          );
-          this.___execChildScope(childScope);
-        } else {
-          const queuedScope = getQueuedScope(childScope);
-          queuedScope[0] = item;
-          queuedScope[1] = index;
-          queuedScope[2] = newArray;
-          moved = moved || key !== oldKeys[index];
-          this.___execChildScope(queuedScope);
-        }
-        newScopes.set(key, childScope);
-      }
-      setContext(null);
-      newKeys = Array.from(newScopes.keys());
-    }
-
-    // TODO: if we have an empty scope with the empty marker as an item, these numbers are off by one
-    // const removals = newScopes.size - oldScopes.size - newItems < 0;
-    // if (removals) {
-    //   for (const k of oldKeys) {
-    //     if (!newScopes.has(k)) {
-    //       // TODO: markScopeDestroyed(oldScopes.get(k)!);
-    //     }
-    //   }
-    // } else if (!newItems && !moved) {
-    //   return;
-    // }
-
-    if (referenceIsMarker) {
-      if (oldScopes === emptyMarkerScopes) {
-        getEmptyScope(this.___referenceNode as Comment);
-      }
-      const oldLastChild = oldScopes.get(oldKeys[oldKeys.length - 1])!;
-      afterReference = oldLastChild.___getAfterNode();
-      parentNode = oldLastChild.___getParentNode();
-      if (len === 0) {
-        newScopes = emptyMarkerScopes;
-        newKeys = emptyMarkerKeys;
-        getEmptyScope(this.___referenceNode as Comment);
-      }
-    } else {
-      afterReference = null;
-      parentNode = this.___referenceNode as Node & ParentNode;
-
-      if (len === 0) {
-        newScopes = emptyScopes;
-        newKeys = emptyKeys;
-      }
-    }
-
-    reconcile(
-      parentNode,
-      oldKeys,
-      oldScopes,
-      newKeys!,
-      newScopes!,
-      afterReference
-    );
-
-    this.___scopeKeys = newKeys!;
-    this.___scopes = newScopes!;
-  }
+export function loop(
+  referenceNode: Comment | Element,
+  renderer: Renderer,
+  keyFn: (item: unknown) => string,
+  parentScopeOrScopes?: Scope | Array<Scope | number>,
+  parentOffset?: number
+): Loop {
+  const referenceIsMarker = referenceNode.nodeType === NodeType.Comment;
+  return {
+    ___scopes: referenceIsMarker ? emptyMarkerScopes : emptyScopes,
+    ___scopeKeys: referenceIsMarker ? emptyMarkerKeys : emptyKeys,
+    ___referenceNode: referenceNode,
+    ___referenceIsMarker: referenceIsMarker,
+    ___renderer: renderer,
+    ___keyFn: keyFn,
+    ___parentScopeOrScopes: parentScopeOrScopes,
+    ___parentOffset: parentOffset,
+    ___context: Context,
+    ___getFirstNode: getFirstNodeLoop,
+    ___getLastNode: getLastNodeLoop,
+    [Symbol.iterator]: loopIterator
+  };
+}
+
+function loopIterator(this: Loop) {
+  return (this.___scopes === emptyMarkerScopes
+    ? emptyScopes
+    : this.___scopes
+  ).values();
+}
+
+function getFirstNodeLoop(this: Loop) {
+  return this.___scopes.get(this.___scopeKeys[0])!.___getFirstNode();
+}
+
+function getLastNodeLoop(this: Loop) {
+  return this.___scopes
+    .get(this.___scopeKeys[this.___scopeKeys.length - 1])!
+    .___getLastNode();
+}
+
+export function setLoopOf(loop: Loop, newArray: unknown[]) {
+  let newScopes: Map<unknown, Scope>;
+  let newKeys: unknown[];
+  const len = newArray.length;
+  const oldScopes = loop.___scopes;
+  const oldKeys = loop.___scopeKeys;
+  const referenceIsMarker = loop.___referenceIsMarker;
+  let afterReference: Node | null;
+  let parentNode: Node & ParentNode;
+
+  if (len > 0) {
+    newScopes = new Map();
+    setContext(loop.___context);
+    for (let index = 0; index < len; index++) {
+      const item = newArray[index];
+      const key = loop.___keyFn ? loop.___keyFn(item, index) : "" + index;
+      let childScope = oldScopes.get(key);
+      if (!childScope) {
+        childScope = createScope(
+          loop.___renderer.___size,
+          loop.___renderer.___domMethods!
+        );
+        childScope[0] = item;
+        childScope[1] = index;
+        initRenderer(
+          loop.___renderer,
+          childScope,
+          loop.___parentScopeOrScopes,
+          loop.___parentOffset
+        );
+      } else {
+        const queuedScope = getQueuedScope(childScope);
+        queuedScope[0] = item;
+        queuedScope[1] = index;
+      }
+      newScopes.set(key, childScope);
+    }
+    setContext(null);
+    newKeys = Array.from(newScopes.keys());
+  }
+
+  if (referenceIsMarker) {
+    if (oldScopes === emptyMarkerScopes) {
+      getEmptyScope(loop.___referenceNode as Comment);
+    }
+    const oldLastChild = oldScopes.get(oldKeys[oldKeys.length - 1])!;
+    afterReference = oldLastChild.___getAfterNode();
+    parentNode = oldLastChild.___getParentNode();
+    if (len === 0) {
+      newScopes = emptyMarkerScopes;
+      newKeys = emptyMarkerKeys;
+      getEmptyScope(loop.___referenceNode as Comment);
+    }
+  } else {
+    afterReference = null;
+    parentNode = loop.___referenceNode as Node & ParentNode;
+
+    if (len === 0) {
+      newScopes = emptyScopes;
+      newKeys = emptyKeys;
+    }
+  }
+
+  reconcile(
+    parentNode,
+    oldKeys,
+    oldScopes,
+    newKeys!,
+    newScopes!,
+    afterReference
+  );
+
+  loop.___scopeKeys = newKeys!;
+  loop.___scopes = newScopes!;
 }

packages/runtime/src/dom/index.ts

@@ -1,4 +1,12 @@
-export { Conditional, Loop } from "./control-flow";
+export {
+  Conditional,
+  Loop,
+  conditional,
+  setConditionalRenderer,
+  setConditionalRendererOnlyChild,
+  loop,
+  setLoopOf
+} from "./control-flow";
 
 export {
   data,

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

@@ -1,6 +1,8 @@
 import {
   walk,
   data,
+  loop,
+  setLoopOf,
   Loop,
   Scope,
   createRenderer,
@@ -52,18 +54,18 @@ type Input = typeof inputs[number];
 export const template = `<div><!></div>`;
 export const walks = next(1) + get + next(1);
 export const hydrate = (scope: Scope, offset: number) => {
-  scope[offset + 1] = new Loop(
+  scope[offset + 1] = loop(
     walk() as Comment,
     iter0,
-    i => "" + (i as Input["children"][number]).id,
-    iter0_execItem,
-    null,
-    null
+    i => "" + (i as Input["children"][number]).id
   );
 };
 
 export const execInputChildren = (scope: Scope, offset: number) => {
-  (scope[offset + 1] as Loop).setOf(scope[offset] as Input["children"]);
+  setLoopOf(scope[offset + 1] as Loop, scope[offset] as Input["children"]);
+  for (const loopScope of scope[offset + 1] as Loop) {
+    iter0_execItem(loopScope);
+  }
 };
 
 export const execDynamicInput = (

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

@@ -1,6 +1,8 @@
 import {
   walk,
   data,
+  loop,
+  setLoopOf,
   Loop,
   Scope,
   createRenderer,
@@ -52,18 +54,18 @@ type Input = typeof inputs[number];
 export const template = `<div></div>`;
 export const walks = get + over(1);
 export const hydrate = (scope: Scope, offset: number) => {
-  scope[offset + 1] = new Loop(
+  scope[offset + 1] = loop(
     walk() as HTMLDivElement,
     iter0,
-    i => "" + (i as Input["children"][number]).id,
-    iter0_execItem,
-    null,
-    null
+    i => "" + (i as Input["children"][number]).id
   );
 };
 
 export const execInputChildren = (scope: Scope, offset: number) => {
-  (scope[offset + 1] as Loop).setOf(scope[offset] as Input["children"]);
+  setLoopOf(scope[offset + 1] as Loop, scope[offset] as Input["children"]);
+  for (const loopScope of scope[offset + 1] as Loop) {
+    iter0_execItem(loopScope);
+  }
 };
 
 export const execDynamicInput = (

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

@@ -1,6 +1,8 @@
 import {
   walk,
   data,
+  loop,
+  setLoopOf,
   Loop,
   Scope,
   createRenderer,
@@ -52,18 +54,18 @@ type Input = typeof inputs[number];
 export const template = `<!>`;
 export const walks = get + over(1);
 export const hydrate = (scope: Scope, offset: number) => {
-  scope[offset + 1] = new Loop(
+  scope[offset + 1] = loop(
     walk() as Comment,
     iter0,
-    i => "" + (i as Input["children"][number]).id,
-    iter0_execItem,
-    null,
-    null
+    i => "" + (i as Input["children"][number]).id
   );
 };
 
 export const execInputChildren = (scope: Scope, offset: number) => {
-  (scope[offset + 1] as Loop).setOf(scope[offset] as Input["children"]);
+  setLoopOf(scope[offset + 1] as Loop, scope[offset] as Input["children"]);
+  for (const loopScope of scope[offset + 1] as Loop) {
+    iter0_execItem(loopScope);
+  }
 };
 
 export const execDynamicInput = (

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

@@ -1,6 +1,8 @@
 import {
   walk,
   data,
+  loop,
+  setLoopOf,
   Loop,
   Scope,
   createRenderer,
@@ -57,18 +59,18 @@ type Input = typeof inputs[number];
 export const template = `<div></div>`;
 export const walks = get + next(1);
 export const hydrate = (scope: Scope, offset: number) => {
-  scope[offset + 1] = new Loop(
+  scope[offset + 1] = loop(
     walk() as Comment,
     iter0,
-    i => "" + (i as Input["children"][number]).id,
-    iter0_execItem,
-    null,
-    null
+    i => "" + (i as Input["children"][number]).id
   );
 };
 
 export const execInputChildren = (scope: Scope, offset: number) => {
-  (scope[offset + 1] as Loop).setOf(scope[offset] as Input["children"]);
+  setLoopOf(scope[offset + 1] as Loop, scope[offset] as Input["children"]);
+  for (const loopScope of scope[offset + 1] as Loop) {
+    iter0_execItem(loopScope);
+  }
 };
 
 export const execDynamicInput = (

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

@@ -1,6 +1,8 @@
 import {
   walk,
   data,
+  loop,
+  setLoopOf,
   Loop,
   Scope,
   createRenderer,
@@ -53,18 +55,18 @@ type Input = typeof inputs[number];
 export const template = `<div><!></div>`;
 export const walks = next(1) + get + next(1);
 export const hydrate = (scope: Scope, offset: number) => {
-  scope[offset + 1] = new Loop(
+  scope[offset + 1] = loop(
     walk() as Comment,
     iter0,
-    i => "" + (i as Input["children"][number]).id,
-    iter0_execItem,
-    null,
-    null
+    i => "" + (i as Input["children"][number]).id
   );
 };
 
 export const execInputChildren = (scope: Scope, offset: number) => {
-  (scope[offset + 1] as Loop).setOf(scope[offset] as Input["children"]);
+  setLoopOf(scope[offset + 1] as Loop, scope[offset] as Input["children"]);
+  for (const loopScope of scope[offset + 1] as Loop) {
+    iter0_execItem(loopScope);
+  }
 };
 
 export const execDynamicInput = (

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

@@ -1,6 +1,8 @@
 import {
   walk,
   data,
+  conditional,
+  setConditionalRenderer,
   Conditional,
   Scope,
   createRenderer,
@@ -30,12 +32,12 @@ type Input = typeof inputs[number];
 export const template = `<div><!></div>`;
 export const walks = next(1) + get + over(1);
 export const hydrate = (scope: Scope, offset: number) => {
-  scope[offset + 2] = new Conditional(walk() as Comment, scope, offset);
+  scope[offset + 2] = conditional(walk() as Comment, scope, offset);
 };
 
 export const execInputValueVisible = (scope: Scope, offset: number) => {
   const cond0 = scope[offset + 2] as Conditional;
-  cond0.renderer = scope[offset + 1] ? branch0 : undefined;
+  setConditionalRenderer(cond0, scope[offset + 1] ? branch0 : undefined);
   if (cond0.renderer === branch0) {
     const cond0_scope = cond0.scope;
     data(cond0_scope[0] as Text, (scope[offset] as Input["value"]).name);

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

@@ -1,6 +1,8 @@
 import {
   walk,
   data,
+  conditional,
+  setConditionalRenderer,
   Conditional,
   Scope,
   createRenderer,
@@ -27,12 +29,12 @@ export const inputs = [
 export const template = `<div><!><span></span><span></span></div>`;
 export const walks = next(1) + get + over(3);
 export const hydrate = (scope: Scope, offset: number) => {
-  scope[offset + 1] = new Conditional(walk() as Comment, scope, offset);
+  scope[offset + 1] = conditional(walk() as Comment, scope, offset);
 };
 
 export const execInputValue = (scope: Scope, offset: number) => {
   const cond0 = scope[offset + 1] as Conditional;
-  cond0.renderer = scope[offset] ? branch0 : undefined;
+  setConditionalRenderer(cond0, scope[offset] ? branch0 : undefined);
   if (cond0.renderer === branch0) {
     const cond0_scope = cond0.scope;
     data(cond0_scope[0] as Text, scope[offset]);

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

@@ -1,6 +1,8 @@
 import {
   walk,
   data,
+  conditional,
+  setConditionalRenderer,
   Conditional,
   Scope,
   createRenderer,
@@ -27,12 +29,12 @@ export const inputs = [
 export const template = `<div><span></span><span></span><!></div>`;
 export const walks = next(3) + get + over(1);
 export const hydrate = (scope: Scope, offset: number) => {
-  scope[offset + 1] = new Conditional(walk() as Comment, scope, offset);
+  scope[offset + 1] = conditional(walk() as Comment, scope, offset);
 };
 
 export const execInputValue = (scope: Scope, offset: number) => {
   const cond0 = scope[offset + 1] as Conditional;
-  cond0.renderer = scope[offset] ? branch0 : undefined;
+  setConditionalRenderer(cond0, scope[offset] ? branch0 : undefined);
   if (cond0.renderer === branch0) {
     const cond0_scope = cond0.scope;
     data(cond0_scope[0] as Text, scope[offset]);

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

@@ -1,6 +1,8 @@
 import {
   walk,
   data,
+  conditional,
+  setConditionalRenderer,
   Conditional,
   Scope,
   createRenderer,
@@ -27,12 +29,12 @@ export const inputs = [
 export const template = `<div><span></span><!><span></span></div>`;
 export const walks = next(2) + get + over(2);
 export const hydrate = (scope: Scope, offset: number) => {
-  scope[offset + 1] = new Conditional(walk() as Comment, scope, offset);
+  scope[offset + 1] = conditional(walk() as Comment, scope, offset);
 };
 
 export const execInputValue = (scope: Scope, offset: number) => {
   const cond0 = scope[offset + 1] as Conditional;
-  cond0.renderer = scope[offset] ? branch0 : undefined;
+  setConditionalRenderer(cond0, scope[offset] ? branch0 : undefined);
   if (cond0.renderer === branch0) {
     const cond0_scope = cond0.scope;
     data(cond0_scope[0] as Text, scope[offset]);

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

@@ -1,6 +1,8 @@
 import {
   walk,
   data,
+  conditional,
+  setConditionalRenderer,
   Conditional,
   Scope,
   createRenderer,
@@ -52,13 +54,13 @@ type Input = typeof inputs[number];
 export const template = `<div><!></div>`;
 export const walks = next(1) + get + over(1);
 export const hydrate = (scope: Scope, offset: number) => {
-  scope[offset + 3] = new Conditional(walk() as Comment, scope, offset);
+  scope[offset + 3] = conditional(walk() as Comment, scope, offset);
 };
 
 export const execInputShowValue1Value2 = (scope: Scope, offset: number) => {
   const cond0 = scope[offset + 3] as Conditional;
   if (checkDirtyNotEqual(scope, offset)) {
-    cond0.renderer = scope[offset] ? branch0 : undefined;
+    setConditionalRenderer(cond0, scope[offset] ? branch0 : undefined);
   }
   if (cond0.renderer === branch0) {
     const cond0_scope = cond0.scope;
@@ -67,7 +69,10 @@ export const execInputShowValue1Value2 = (scope: Scope, offset: number) => {
       checkDirtyNotEqual(scope, offset + 1)
     ) {
       const cond0_0 = cond0_scope[0] as Conditional;
-      cond0_0.renderer = scope[offset + 1] ? branch0_0 : undefined;
+      setConditionalRenderer(
+        cond0_0,
+        scope[offset + 1] ? branch0_0 : undefined
+      );
       if (cond0_0.renderer === branch0_0) {
         const cond0_0_scope = cond0_0.scope;
         data(cond0_0_scope[0] as Text, scope[offset + 1]);
@@ -78,7 +83,10 @@ export const execInputShowValue1Value2 = (scope: Scope, offset: number) => {
       checkDirtyNotEqual(scope, offset + 2)
     ) {
       const cond0_1 = cond0_scope[1] as Conditional;
-      cond0_1.renderer = scope[offset + 2] ? branch0_1 : undefined;
+      setConditionalRenderer(
+        cond0_1,
+        scope[offset + 2] ? branch0_1 : undefined
+      );
       if (cond0_1.renderer === branch0_1) {
         const cond0_1_scope = cond0_1.scope;
         data(cond0_1_scope[0] as Text, scope[offset + 2]);
@@ -104,8 +112,8 @@ const branch0 = createRenderer(
   "<!><!>",
   get + over(1) + get + over(1),
   (scope: Scope) => {
-    scope[0] = new Conditional(walk() as Comment, scope, 0);
-    scope[1] = new Conditional(walk() as Comment, scope, 0);
+    scope[0] = conditional(walk() as Comment, scope, 0);
+    scope[1] = conditional(walk() as Comment, scope, 0);
   },
   0,
   dynamicFragmentMethods,

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

@@ -1,6 +1,8 @@
 import {
   walk,
   data,
+  conditional,
+  setConditionalRendererOnlyChild,
   Conditional,
   Scope,
   createRenderer,
@@ -27,12 +29,12 @@ export const inputs = [
 export const template = `<div></div>`;
 export const walks = get + over(1);
 export const hydrate = (scope: Scope, offset: number) => {
-  scope[offset + 1] = new Conditional(walk() as Comment, scope, offset);
+  scope[offset + 1] = conditional(walk() as Comment, scope, offset);
 };
 
 export const execInputValue = (scope: Scope, offset: number) => {
   const cond0 = scope[offset + 1] as Conditional;
-  cond0.rendererOnlyChild = scope[offset] ? branch0 : undefined;
+  setConditionalRendererOnlyChild(cond0, scope[offset] ? branch0 : undefined);
   if (cond0.renderer === branch0) {
     const cond0_scope = cond0.scope;
     data(cond0_scope[0] as Text, scope[offset]);