@nutin/cli 2.1.0 → 3.0.0

package/templates/base/src/core/base-classes/base-component/helpers/catalog.helper.ts.hbs

@@ -1,92 +1,62 @@
-import { Component, ComponentConfig, ComponentOptions } from "../../index.js";
+import type { KeepableComponentConfig } from './children.helper.js';
 
-export interface CatalogConfig extends ComponentOptions {
-  items: CatalogItemConfig[];
-  elementName: string;
-  elementTag?: keyof HTMLElementTagNameMap;
-  selector: string;
-  component: new (el: HTMLElement, data: any, props?: any) => Component;
-};
+export function generateCatalog(config: Nutin.CatalogConfig, scope: Element = document.documentElement): Nutin.ComponentConfig[] {
+  if (!config.items || config.items.length < 1) return [];
 
-export interface CatalogItemBase {
-  index: number;
-}
+  const componentConfigs: Nutin.ComponentConfig[] = [];
+  const containers = scope.querySelectorAll(`[data-catalog="${config.selector}"]`);
 
-export type CatalogItemObject<T extends object> = T & CatalogItemBase;
+  containers.forEach((container) => {
+    if (!container || !(container instanceof HTMLElement)) return;
+    componentConfigs.push(...getComponentConfigItems(config, container))
+  })
 
-export interface CatalogItemPrimitive extends CatalogItemBase {
-  value: string | number | boolean | null | undefined;
+  return componentConfigs;
 }
 
-export type CatalogItemConfig<T = any> =
-  T extends object ? CatalogItemObject<T> : CatalogItemPrimitive;
-
-/**
- * ```typescript
-interface CatalogConfig extends ComponentOptions {
-  items: CatalogItemConfig[];
-  elementName: string;
-  elementTag?: keyof HTMLElementTagNameMap;
-  selector: string;
-  component: new (el: HTMLElement, data: any) => Component;
-};
-
-type CatalogItemConfig<T = any> =
-  T extends object ? CatalogItemObject<T> : CatalogItemPrimitive;
-  ```
-*/
-export class CatalogHelper {
-  public static generateCatalog(config: CatalogConfig, scope: Element = document.documentElement): ComponentConfig[] {
-    if (!config.items || config.items.length < 1) return [];
-
-    const componentConfigs: ComponentConfig[] = [];
-    const containers = scope.querySelectorAll(`[data-catalog="${config.selector}"]`);
-
-    containers.forEach((container) => {
-      if (!container || !(container instanceof HTMLElement)) return;
-      componentConfigs.push(...this.getComponentConfigItems(config, container))
-    })
-
-    return componentConfigs;
-  }
-
-  private static getComponentConfigItems(config: CatalogConfig, container: HTMLElement): ComponentConfig[] {
-    container.innerHTML = '';
-    const componentConfigs: ComponentConfig[] = [];
-    for (let i = 0; i < config.items.length; i++) {
-      this.createElements(i, config, container);
-      this.pushConfig(i, componentConfigs, config);
-    }
-    return componentConfigs;
+function getComponentConfigItems(config: Nutin.CatalogConfig, container: HTMLElement): Nutin.ComponentConfig[] {
+  container.innerHTML = '';
+  const componentConfigs: Nutin.ComponentConfig[] = [];
+  for (let i = 0; i < config.items.length; i++) {
+    createElements(i, config, container);
+    pushConfig(i, componentConfigs, config);
   }
+  return componentConfigs;
+}
 
-  private static createElements(index: number, config: CatalogConfig, container: HTMLElement): void {
-    const wrapper = document.createElement(config.elementTag || 'div');
-    const el = document.createElement('div');
-    wrapper.appendChild(el);
-    el.setAttribute('data-component', `${config.elementName}-${index}`);
-    wrapper.dataset.index = String(index);
-    container?.appendChild(wrapper);
-  }
+function createElements(index: number, config: Nutin.CatalogConfig, container: HTMLElement): void {
+  const wrapper = document.createElement(config.elementTag || 'div');
+  const el = document.createElement('div');
+  wrapper.appendChild(el);
+  el.setAttribute('data-component', `${config.elementName}-${index}`);
+  wrapper.dataset.index = String(index);
+  container?.appendChild(wrapper);
+}
 
-  private static pushConfig(index: number, componentConfigs: ComponentConfig[], config: CatalogConfig): void {
-    const configWithIndex = this.getConfigWithIndex(config, index)
+function pushConfig(index: number, componentConfigs: Nutin.ComponentConfig[], config: Nutin.CatalogConfig): void {
+  const configWithIndex = getConfigWithIndex(config, index)
 
-    const { props, defaults, normalizeKeys } = config;
-    const options = { ...props, ...defaults, ...normalizeKeys };
+  const { props, defaults } = config;
+  const options = { ...props, ...defaults };
 
-    componentConfigs.push(
-      { 
-        selector: `${config.elementName}-${index}`,
-        factory: (el) => new config.component(el, configWithIndex, options),
-      },
-    )
-  }
+  const componentConfig: KeepableComponentConfig = {
+    selector: `${config.elementName}-${index}`,
+    factory: (el) => new config.component(el, configWithIndex, options),
+  };
 
-  private static getConfigWithIndex(config: CatalogConfig, index: number): CatalogItemConfig {
+  if (config.keepBy) {
     const item = config.items[index];
-    return (item && typeof item === 'object')
-      ? { ...(item as object), index: index }
-      : { value: item, index: index };    
+    componentConfig.keep = config.keepBy(item, index);
+    componentConfig.scope = `catalog:${config.selector}:${config.elementName}`;
+    componentConfig.keepIf = { item, options, component: config.component };
   }
+
+  componentConfigs.push(componentConfig);
+}
+
+function getConfigWithIndex(config: Nutin.CatalogConfig, index: number): Nutin.CatalogItemConfig {
+  const item = config.items[index];
+  return (item && typeof item === 'object')
+    ? { ...(item as object), index: index }
+    : { value: item, index: index };    
 }

package/templates/base/src/core/base-classes/base-component/helpers/children.helper.test.js.hbs

@@ -1,4 +1,23 @@
-import { ChildrenHelper } from '#root/dist/src/core/base-classes/base-component/helpers/children.helper.js';
+import * as ChildrenHelper from '#root/dist/src/core/base-classes/base-component/helpers/children.helper.js';
+import { BaseComponent } from '#root/dist/src/core/index.js';
+
+class Widget extends BaseComponent {
+  constructor(options) {
+    super(options);
+    this.renders = 0;
+    this.destroyed = false;
+  }
+  generateTemplate() { return '<p>widget</p>'; }
+  render() {
+    this.renders++;
+    return super.render();
+  }
+  destroy() {
+    this.destroyed = true;
+    this.onDestroy?.();
+    super.destroy();
+  }
+}
 
 describe('ChildrenHelper', () => {
   let element;
@@ -31,13 +50,13 @@ describe('ChildrenHelper', () => {
       }],
     };
 
-    const children = [];
-    ChildrenHelper.addChildren(component, element, children);
+    const registry = ChildrenHelper.createRegistry();
+    ChildrenHelper.addChildren(component, element, registry);
 
     expect(factoryCalls.length).toBe(1);
     expect(factoryCalls[0]).toBe(element.querySelector('[data-component="widget"]'));
     expect(rendered.length).toBe(1);
-    expect(children.length).toBe(1);
+    expect(registry.rebuilt.length).toBe(1);
   });
 
   it('instantiates one child per matched element for a single registerChildren entry', () => {
@@ -49,17 +68,41 @@ describe('ChildrenHelper', () => {
       }],
     };
 
-    const children = [];
-    ChildrenHelper.addChildren(component, element, children);
+    const registry = ChildrenHelper.createRegistry();
+    ChildrenHelper.addChildren(component, element, registry);
+
+    expect(registry.rebuilt.length).toBe(2);
+  });
+
+  it('keeps the placeholder attributes (except data-component) on the mounted child element', () => {
+    class Widget extends BaseComponent {
+      generateTemplate() { return '<p>widget</p>'; }
+    }
+    element.innerHTML = '<div data-component="widget" class="my-class" id="my-widget"></div>';
+    const component = {
+      registerChildren: () => [{
+        selector: 'widget',
+        factory: (el) => new Widget({ mountTarget: el }),
+      }],
+    };
+
+    const registry = ChildrenHelper.createRegistry();
+    ChildrenHelper.addChildren(component, element, registry);
 
-    expect(children.length).toBe(2);
+    const childEl = registry.rebuilt[0].getElement();
+    expect(element.contains(childEl)).toBe(true);
+    expect(childEl.classList.contains('my-class')).toBe(true);
+    expect(childEl.id).toBe('my-widget');
+    expect(childEl.hasAttribute('data-component')).toBe(false);
+    expect(childEl.innerHTML).toBe('<p>widget</p>');
   });
 
   it('does nothing when there are no registerChildren', () => {
     const component = { registerChildren: () => [] };
-    const children = [];
-    ChildrenHelper.addChildren(component, element, children);
-    expect(children.length).toBe(0);
+    const registry = ChildrenHelper.createRegistry();
+    ChildrenHelper.addChildren(component, element, registry);
+    expect(registry.rebuilt.length).toBe(0);
+    expect(registry.keepable.size).toBe(0);
   });
 
   it('destroys previously-tracked children and resets the array before mounting new ones on a second call', () => {
@@ -72,25 +115,268 @@ describe('ChildrenHelper', () => {
       }],
     };
 
-    const children = [];
-    ChildrenHelper.addChildren(component, element, children);
-    expect(children.length).toBe(1);
+    const registry = ChildrenHelper.createRegistry();
+    ChildrenHelper.addChildren(component, element, registry);
+    expect(registry.rebuilt.length).toBe(1);
     expect(destroyCount).toBe(0);
 
     element.innerHTML = '<div data-component="widget"></div>';
-    ChildrenHelper.addChildren(component, element, children);
+    ChildrenHelper.addChildren(component, element, registry);
 
     expect(destroyCount).toBe(1);
-    expect(children.length).toBe(1);
+    expect(registry.rebuilt.length).toBe(1);
   });
 
-  it('destroyChildren calls destroy on every child', () => {
+  it('destroyChildren calls destroy on every keepable and rebuilt child and empties the registry', () => {
     let destroyCount = 0;
-    const children = [
-      { destroy: () => destroyCount++ },
-      { destroy: () => destroyCount++ },
-    ];
-    ChildrenHelper.destroyChildren(children);
+    const registry = ChildrenHelper.createRegistry();
+    registry.rebuilt.push({ destroy: () => destroyCount++ });
+    registry.keepable.set('a', { instance: { destroy: () => destroyCount++ } });
+    ChildrenHelper.destroyChildren(registry);
     expect(destroyCount).toBe(2);
+    expect(registry.rebuilt.length).toBe(0);
+    expect(registry.keepable.size).toBe(0);
+  });
+
+  it('child with an unchanged keep value is moved into the new placeholder without calling its factory or rendering it', () => {
+    const created = [];
+    const component = {
+      registerChildren: () => [{
+        selector: 'widget',
+        keep: 'w',
+        factory: (el) => { const w = new Widget({ mountTarget: el }); created.push(w); return w; },
+      }],
+    };
+    const registry = ChildrenHelper.createRegistry();
+
+    element.innerHTML = '<div data-component="widget"></div>';
+    ChildrenHelper.addChildren(component, element, registry);
+    element.innerHTML = '<div data-component="widget"></div>';
+    ChildrenHelper.addChildren(component, element, registry);
+
+    expect(created.length).toBe(1);
+    expect(created[0].renders).toBe(1);
+    expect(created[0].destroyed).toBe(false);
+    expect(element.contains(created[0].getElement())).toBe(true);
+    expect(element.querySelector('[data-component="widget"]')).toBe(null);
+    expect(registry.kept).toEqual([created[0]]);
+  });
+
+  it('child whose keep value changed is destroyed and recreated', () => {
+    let keep = 1;
+    const created = [];
+    const component = {
+      registerChildren: () => [{
+        selector: 'widget',
+        keep,
+        factory: (el) => { const w = new Widget({ mountTarget: el }); created.push(w); return w; },
+      }],
+    };
+    const registry = ChildrenHelper.createRegistry();
+
+    element.innerHTML = '<div data-component="widget"></div>';
+    ChildrenHelper.addChildren(component, element, registry);
+    keep = 2;
+    element.innerHTML = '<div data-component="widget"></div>';
+    ChildrenHelper.addChildren(component, element, registry);
+
+    expect(created.length).toBe(2);
+    expect(created[0].destroyed).toBe(true);
+    expect(created[1].destroyed).toBe(false);
+    expect(registry.keepable.size).toBe(1);
+    expect(registry.kept.length).toBe(0);
+  });
+
+  it('keepable child whose placeholder disappeared is destroyed', () => {
+    const created = [];
+    const component = {
+      registerChildren: () => [{
+        selector: 'widget',
+        keep: 'w',
+        factory: (el) => { const w = new Widget({ mountTarget: el }); created.push(w); return w; },
+      }],
+    };
+    const registry = ChildrenHelper.createRegistry();
+
+    element.innerHTML = '<div data-component="widget"></div>';
+    ChildrenHelper.addChildren(component, element, registry);
+    element.innerHTML = '';
+    ChildrenHelper.addChildren(component, element, registry);
+
+    expect(created[0].destroyed).toBe(true);
+    expect(registry.keepable.size).toBe(0);
+  });
+
+  it('destroys removed children before creating new ones', () => {
+    const order = [];
+    let keep = 1;
+    const component = {
+      registerChildren: () => [{
+        selector: 'widget',
+        keep,
+        factory: (el) => {
+          const w = new Widget({ mountTarget: el });
+          const id = keep;
+          order.push(`create ${id}`);
+          w.onDestroy = () => order.push(`destroy ${id}`);
+          return w;
+        },
+      }],
+    };
+    const registry = ChildrenHelper.createRegistry();
+
+    element.innerHTML = '<div data-component="widget"></div>';
+    ChildrenHelper.addChildren(component, element, registry);
+    keep = 2;
+    element.innerHTML = '<div data-component="widget"></div>';
+    ChildrenHelper.addChildren(component, element, registry);
+
+    expect(order).toEqual(['create 1', 'destroy 1', 'create 2']);
+  });
+
+  it('the same keep value under two placeholders of one selector gives each its own identity', () => {
+    const created = [];
+    const component = {
+      registerChildren: () => [{
+        selector: 'widget',
+        keep: 'w',
+        factory: (el) => { const w = new Widget({ mountTarget: el }); created.push(w); return w; },
+      }],
+    };
+    const registry = ChildrenHelper.createRegistry();
+
+    element.innerHTML = '<div data-component="widget"></div><div data-component="widget"></div>';
+    ChildrenHelper.addChildren(component, element, registry);
+    element.innerHTML = '<div data-component="widget"></div><div data-component="widget"></div>';
+    ChildrenHelper.addChildren(component, element, registry);
+
+    expect(created.length).toBe(2);
+    expect(registry.kept.length).toBe(2);
+  });
+
+  it('warns about a duplicate keep value and recreates the duplicate on every render', () => {
+    const warnSpy = spyOn(console, 'warn').andCallFake(() => {});
+    const component = {
+      registerChildren: () => [
+        { selector: 'widget', keep: 'w', factory: (el) => new Widget({ mountTarget: el }) },
+        { selector: 'widget', keep: 'w', factory: (el) => new Widget({ mountTarget: el }) },
+      ],
+    };
+    const registry = ChildrenHelper.createRegistry();
+
+    element.innerHTML = '<div data-component="widget"></div>';
+    ChildrenHelper.addChildren(component, element, registry);
+    warnSpy.restore();
+
+    expect(warnSpy.callCount).toBe(1);
+    expect(registry.keepable.size).toBe(1);
+    expect(registry.rebuilt.length).toBe(1);
+  });
+
+  it('keptCount a catalog-style child only when its keepIf item, options and component are shallow-equal', () => {
+    const created = [];
+    let item = { id: 1, name: 'a' };
+    let options = { tone: 'x' };
+    const component = {
+      registerChildren: () => [{
+        selector: 'item-0',
+        keep: item.id,
+        scope: 'catalog:list:item',
+        keepIf: { item, options, component: Widget },
+        factory: (el) => { const w = new Widget({ mountTarget: el }); created.push(w); return w; },
+      }],
+    };
+    const registry = ChildrenHelper.createRegistry();
+    const rerender = () => {
+      element.innerHTML = '<div data-component="item-0"></div>';
+      ChildrenHelper.addChildren(component, element, registry);
+    };
+
+    rerender();
+    item = { id: 1, name: 'a' };
+    options = { tone: 'x' };
+    rerender();
+    expect(created.length).toBe(1);
+
+    item = { id: 1, name: 'b' };
+    rerender();
+    expect(created.length).toBe(2);
+
+    options = { tone: 'y' };
+    rerender();
+    expect(created.length).toBe(3);
+  });
+
+  it('recreates a catalog-style child when its keepIf item changes between null, an object and an array', () => {
+    const created = [];
+    let item = null;
+    const component = {
+      registerChildren: () => [{
+        selector: 'item-0',
+        keep: 1,
+        scope: 'catalog:list:item',
+        keepIf: { item, options: undefined, component: Widget },
+        factory: (el) => { const w = new Widget({ mountTarget: el }); created.push(w); return w; },
+      }],
+    };
+    const registry = ChildrenHelper.createRegistry();
+    const rerender = () => {
+      element.innerHTML = '<div data-component="item-0"></div>';
+      ChildrenHelper.addChildren(component, element, registry);
+    };
+
+    rerender();
+    item = { 0: 'a' };
+    rerender();
+    expect(created.length).toBe(2);
+
+    item = ['a'];
+    rerender();
+    expect(created.length).toBe(3);
+  });
+
+  it('ignores a non-HTML placeholder element', () => {
+    let calls = 0;
+    const component = {
+      registerChildren: () => [{
+        selector: 'icon',
+        factory: (el) => { calls++; return new Widget({ mountTarget: el }); },
+      }],
+    };
+    element.innerHTML = '<svg data-component="icon"></svg>';
+
+    ChildrenHelper.addChildren(component, element, ChildrenHelper.createRegistry());
+
+    expect(calls).toBe(0);
+  });
+
+  it('moves a kept child with Element.moveBefore when the browser supports it', () => {
+    const moved = [];
+    const proto = Element.prototype;
+    proto.moveBefore = function (node, child) {
+      moved.push(node);
+      this.insertBefore(node, child);
+    };
+
+    try {
+      const component = {
+        registerChildren: () => [{ selector: 'widget', keep: 'w', factory: (el) => new Widget({ mountTarget: el }) }],
+      };
+      const registry = ChildrenHelper.createRegistry();
+      element.innerHTML = '<div data-component="widget"></div>';
+      ChildrenHelper.addChildren(component, element, registry);
+      const [{ instance }] = registry.keepable.values();
+
+      // Stand-in for a parked child: still connected, outside the new placeholder.
+      document.body.appendChild(instance.getElement());
+      element.innerHTML = '<div data-component="widget"></div>';
+      ChildrenHelper.addChildren(component, element, registry);
+
+      expect(moved).toEqual([instance.getElement()]);
+      expect(element.contains(instance.getElement())).toBe(true);
+      expect(element.querySelector('[data-component="widget"]')).toBe(null);
+    } finally {
+      delete proto.moveBefore;
+    }
   });
 });

package/templates/base/src/core/base-classes/base-component/helpers/children.helper.ts.hbs

@@ -1,31 +1,149 @@
-import { BaseComponent, ComponentConfig } from '../base-component.js';
-
-export class ChildrenHelper {
-  public static addChildren(
-    component: BaseComponent,
-    element: HTMLElement,
-    children: BaseComponent[]
-  ): void {
-    this.destroyChildren(children);
-    children.length = 0;
-
-    const configs: ComponentConfig[] = component.registerChildren();
-    configs.forEach(config => {
-      element.querySelectorAll(`[data-component="${config.selector}"]`).forEach(el => {
-        if (el instanceof HTMLElement) {
-          const childComponent = config.factory(el);
-          childComponent.render();
-          this.registerChild(childComponent, children);
-        }
-      });
+import type { BaseComponent } from '../base-component.js';
+import * as DomHelper from './dom.helper.js';
+
+// What a catalog item was built from: a kept item must still match it.
+export interface KeepCondition {
+  item: unknown;
+  options: Record<string, unknown>;
+  component: unknown;
+}
+
+// Internal fields CatalogHelper sets on top of the public ComponentConfig.
+export interface KeepableComponentConfig extends Nutin.ComponentConfig {
+  scope?: string;
+  keepIf?: KeepCondition;
+}
+
+interface KeepableChild {
+  instance: BaseComponent;
+  keepIf?: KeepCondition;
+}
+
+export interface ChildRegistry {
+  keepable: Map<string, KeepableChild>;
+  rebuilt: BaseComponent[];
+  kept: BaseComponent[];
+}
+
+interface Placement {
+  config: KeepableComponentConfig;
+  placeholder: HTMLElement;
+  id?: string;
+  kept?: KeepableChild;
+}
+
+export function createRegistry(): ChildRegistry {
+  return { keepable: new Map(), rebuilt: [], kept: [] };
+}
+
+// Children whose keep value is unchanged are moved into their new
+// placeholder as-is; everything else is destroyed and recreated.
+export function addChildren(
+  component: BaseComponent,
+  element: HTMLElement,
+  registry: ChildRegistry
+): void {
+  const placements = matchPlaceholders(component.registerChildren(), element, registry);
+  destroyUnkept(registry, placements);
+
+  // Every kept child moves before any new one renders, so move targets are
+  // prepared once rather than after each DOM change.
+  const kept = placements.filter(({ kept }) => kept);
+  kept.forEach(({ kept, placeholder }) => DomHelper.prepareMoveTarget(placeholder.parentNode, kept!.instance.getElement()));
+  kept.forEach(placement => keep(placement, registry));
+  placements.filter(({ kept }) => !kept).forEach(placement => create(placement, registry));
+}
+
+export function getKeepableElements(registry: ChildRegistry): HTMLElement[] {
+  return Array.from(registry.keepable.values(), ({ instance }) => instance.getElement());
+}
+
+export function destroyChildren(registry: ChildRegistry): void {
+  registry.rebuilt.forEach(child => child.destroy());
+  registry.keepable.forEach(({ instance }) => instance.destroy());
+  registry.rebuilt = [];
+  registry.keepable.clear();
+  registry.kept = [];
+}
+
+function matchPlaceholders(
+  configs: KeepableComponentConfig[],
+  element: HTMLElement,
+  registry: ChildRegistry
+): Placement[] {
+  const placements: Placement[] = [];
+  const seen = new Set<string>();
+
+  configs.forEach(config => {
+    element.querySelectorAll(`[data-component="${config.selector}"]`).forEach((placeholder, occurrence) => {
+      if (!(placeholder instanceof HTMLElement)) return;
+      const id = getId(config, occurrence, seen);
+      const previous = id === undefined ? undefined : registry.keepable.get(id);
+      const kept = previous && canKeep(previous, config) ? previous : undefined;
+      placements.push({ config, placeholder, id, kept });
     });
-  }
+  });
 
-  public static destroyChildren(children: BaseComponent[]): void {
-    children.forEach(child => child.destroy());
-  }
+  return placements;
+}
 
-  private static registerChild(child: BaseComponent, children: BaseComponent[]): void {
-    children.push(child);
+function getId(config: KeepableComponentConfig, occurrence: number, seen: Set<string>): string | undefined {
+  if (config.keep === undefined) return undefined;
+
+  const scope = config.scope ?? config.selector;
+  const id = JSON.stringify([scope, config.keep, occurrence]);
+  if (seen.has(id)) {
+    console.warn(`Duplicate child keep value "${config.keep}" in "${scope}" - it will be recreated on every render.`);
+    return undefined;
   }
+  seen.add(id);
+  return id;
+}
+
+function canKeep(previous: KeepableChild, config: KeepableComponentConfig): boolean {
+  const before = previous.keepIf;
+  const after = config.keepIf;
+  if (!before || !after) return before === after;
+
+  return before.component === after.component
+    && shallowEqual(before.item, after.item)
+    && shallowEqual(before.options, after.options);
+}
+
+function destroyUnkept(registry: ChildRegistry, placements: Placement[]): void {
+  const keptIds = new Set(placements.filter(({ kept }) => kept).map(({ id }) => id));
+
+  registry.rebuilt.forEach(child => child.destroy());
+  registry.rebuilt = [];
+  registry.kept = [];
+  registry.keepable.forEach((entry, id) => {
+    if (keptIds.has(id)) return;
+    entry.instance.destroy();
+    registry.keepable.delete(id);
+  });
+}
+
+function keep({ config, placeholder, kept }: Placement, registry: ChildRegistry): void {
+  DomHelper.replacePlaceholder(kept!.instance.getElement(), placeholder);
+  kept!.keepIf = config.keepIf;
+  registry.kept.push(kept!.instance);
+}
+
+function create({ config, placeholder, id }: Placement, registry: ChildRegistry): void {
+  const child = config.factory(placeholder);
+  child.render();
+  if (id === undefined) registry.rebuilt.push(child);
+  else registry.keepable.set(id, { instance: child, keepIf: config.keepIf });
+}
+
+function shallowEqual(a: unknown, b: unknown): boolean {
+  if (Object.is(a, b)) return true;
+  if (!a || !b || typeof a !== 'object' || typeof b !== 'object') return false;
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+
+  const aRecord = a as Record<string, unknown>;
+  const bRecord = b as Record<string, unknown>;
+  const aKeys = Object.keys(aRecord);
+  return aKeys.length === Object.keys(bRecord).length
+    && aKeys.every(key => Object.prototype.hasOwnProperty.call(bRecord, key) && Object.is(aRecord[key], bRecord[key]));
 }