@gtkx/react 0.21.0 → 1.0.0-rc.1

package/src/reconciler/signal-store.ts

@@ -0,0 +1,103 @@
+import type * as GObject from "@gtkx/gi/gobject";
+import type { SignalHandler } from "@gtkx/runtime";
+
+const UNBLOCKED_SIGNALS = new Set([
+    "realize",
+    "unrealize",
+    "map",
+    "unmap",
+    "show",
+    "hide",
+    "destroy",
+    "resize",
+    "render",
+    "input",
+    "output",
+]);
+
+type SignalBinding = {
+    instance: GObject.Object;
+    signal: string;
+    handler?: SignalHandler | undefined;
+};
+
+export class SignalStore {
+    private instanceHandlers: Map<GObject.Object, Map<string, number>> = new Map();
+
+    private blockDepth: number = 0;
+
+    private getInstanceMap(instance: GObject.Object): Map<string, number> {
+        let instanceMap = this.instanceHandlers.get(instance);
+        if (!instanceMap) {
+            instanceMap = new Map();
+            this.instanceHandlers.set(instance, instanceMap);
+        }
+        return instanceMap;
+    }
+
+    private gateHandler(handler: SignalHandler, signal: string, instance: GObject.Object): SignalHandler {
+        return (...args: unknown[]) => {
+            if (this.blockDepth > 0 && !UNBLOCKED_SIGNALS.has(signal)) {
+                return;
+            }
+            return handler(...args, instance);
+        };
+    }
+
+    private disconnect(instance: GObject.Object, signal: string): void {
+        const instanceMap = this.instanceHandlers.get(instance);
+        if (!instanceMap) return;
+        const handlerId = instanceMap.get(signal);
+        if (handlerId === undefined) return;
+        instance.disconnect(handlerId);
+        instanceMap.delete(signal);
+        if (instanceMap.size === 0) this.instanceHandlers.delete(instance);
+    }
+
+    private connect(binding: SignalBinding & { handler: SignalHandler }): void {
+        const { instance, signal, handler } = binding;
+        const gatedHandler = this.gateHandler(handler, signal, instance);
+        const handlerId = instance.connect(signal, gatedHandler);
+        this.getInstanceMap(instance).set(signal, handlerId);
+    }
+
+    public set(binding: SignalBinding): void {
+        const { instance, signal, handler } = binding;
+        this.disconnect(instance, signal);
+
+        if (handler) {
+            this.connect({ instance, signal, handler });
+        }
+    }
+
+    public clear(instance: GObject.Object): void {
+        const instanceMap = this.instanceHandlers.get(instance);
+
+        if (instanceMap) {
+            for (const [, handlerId] of instanceMap) {
+                instance.disconnect(handlerId);
+            }
+
+            this.instanceHandlers.delete(instance);
+        }
+    }
+
+    public block(): void {
+        this.blockDepth += 1;
+    }
+
+    public unblock(): void {
+        if (this.blockDepth > 0) this.blockDepth -= 1;
+    }
+}
+
+const signalStores = new WeakMap<object, SignalStore>();
+
+export function getSignalStore(rootContainer: object): SignalStore {
+    let store = signalStores.get(rootContainer);
+    if (!store) {
+        store = new SignalStore();
+        signalStores.set(rootContainer, store);
+    }
+    return store;
+}

package/src/reconciler/state.ts

@@ -0,0 +1,72 @@
+import * as GObject from "@gtkx/gi/gobject";
+import { isRootElement, type RootElement } from "./root-element.js";
+import { getSignalStore, type SignalStore } from "./signal-store.js";
+import type { Container, Props } from "./types.js";
+import { isWrapperNode, type WrapperNode } from "./wrapper-node.js";
+import type { WrapperKind } from "./wrapper-protocol.js";
+
+export type Node = GObject.Object | WrapperNode | RootElement;
+
+export type ElementHandler = {
+    attach(anchor?: GObject.Object | null, fresh?: boolean): void;
+    detach(): void;
+};
+
+export type ElementMapping = (child: Node, parent: Node) => ElementHandler | null;
+
+export type State = {
+    kind?: WrapperKind | undefined;
+    props: Props;
+    parent: Node | null;
+    children: Node[];
+    rootContainer: Container;
+    signalStore: SignalStore;
+    adoptedInstance?: GObject.Object | undefined;
+    hidden?: boolean | undefined;
+    visibleWhenShown?: boolean | undefined;
+};
+
+const stateMap = new WeakMap<Node, State>();
+
+type StateSeed = {
+    kind?: WrapperKind;
+    props: Props;
+    rootContainer: Container;
+};
+
+export const registerState = (node: Node, { kind, props, rootContainer }: StateSeed): State => {
+    const state: State = {
+        kind,
+        props,
+        parent: null,
+        children: [],
+        rootContainer,
+        signalStore: getSignalStore(rootContainer),
+    };
+    stateMap.set(node, state);
+    return state;
+};
+
+export const ensureState = (container: Container): State =>
+    stateMap.get(container) ?? registerState(container, { props: {}, rootContainer: container });
+
+export const registeredStateOf = (node: Node): State | undefined => stateMap.get(node);
+
+export const stateOf = (node: Node): State => {
+    const state = stateMap.get(node);
+    if (state) return state;
+    if (node instanceof GObject.Object || isRootElement(node)) return ensureState(node);
+    throw new Error("reconciler node has no registered state");
+};
+
+export const hasWrapperKind = (node: Node, kind: WrapperKind): boolean =>
+    isWrapperNode(node) && stateOf(node).kind === kind;
+
+export const closestInstance = <T extends Node>(node: Node, matches: (node: Node) => node is T): T | null => {
+    let current: Node | null = node;
+    while (current !== null) {
+        if (matches(current)) return current;
+        current = stateOf(current).parent;
+    }
+    return null;
+};

package/src/reconciler/text-buffer-controller.ts

@@ -0,0 +1,107 @@
+import type * as Gdk from "@gtkx/gi/gdk";
+import * as GObject from "@gtkx/gi/gobject";
+import * as Gtk from "@gtkx/gi/gtk";
+import { unparentWidget } from "./container-attach.js";
+import { type Node, stateOf } from "./state.js";
+import { isAnchorNode, isBufferContentNode, isBufferTextNode, isPaintableNode } from "./text-node.js";
+
+export class TextBufferController {
+    private managesContent = false;
+    private owner: Gtk.TextBuffer;
+
+    constructor(owner: Gtk.TextBuffer) {
+        this.owner = owner;
+    }
+
+    private resolveView(): Gtk.TextView | null {
+        let ancestor = stateOf(this.owner).parent;
+        while (ancestor && !(ancestor instanceof GObject.Object)) ancestor = stateOf(ancestor).parent;
+        return ancestor instanceof Gtk.TextView ? ancestor : null;
+    }
+
+    private hasManagedChildren(): boolean {
+        return stateOf(this.owner).children.some((child) => isBufferContentNode(child) || child instanceof Gtk.TextTag);
+    }
+
+    public rebuild = (): void => {
+        const buffer = this.owner;
+
+        if (this.hasManagedChildren()) this.managesContent = true;
+        if (!this.managesContent) return;
+
+        const state = stateOf(this.owner);
+        buffer.beginIrreversibleAction();
+        try {
+            this.clearBuffer(buffer);
+            this.insertChildren(buffer, state.children);
+        } finally {
+            buffer.endIrreversibleAction();
+        }
+    };
+
+    private clearBuffer(buffer: Gtk.TextBuffer): void {
+        const start = buffer.getStartIter();
+        const end = buffer.getEndIter();
+        if (!start.equal(end)) buffer.delete(start, end);
+
+        const tagTable = buffer.getTagTable();
+        const tags: Gtk.TextTag[] = [];
+        tagTable.foreach((tag) => tags.push(tag));
+        for (const tag of tags) tagTable.remove(tag);
+    }
+
+    private insertChildren(buffer: Gtk.TextBuffer, children: Node[]): void {
+        for (const child of children) {
+            this.insertChild(buffer, child);
+        }
+    }
+
+    private insertChild(buffer: Gtk.TextBuffer, child: Node): void {
+        if (stateOf(child).hidden) return;
+        if (isBufferTextNode(child)) {
+            this.insertText(buffer, stateOf(child).props.text as string);
+        } else if (isPaintableNode(child)) {
+            this.insertPaintable(buffer, stateOf(child).props.paintable as Gdk.Paintable);
+        } else if (isAnchorNode(child)) {
+            this.insertAnchor(buffer, child);
+        } else if (child instanceof Gtk.TextTag) {
+            this.insertTag(buffer, child);
+        }
+    }
+
+    private insertTag(buffer: Gtk.TextBuffer, tag: Gtk.TextTag): void {
+        const tagTable = buffer.getTagTable();
+        if (tag.name && !tagTable.lookup(tag.name)) tagTable.add(tag);
+
+        const start = buffer.getCharCount();
+        this.insertChildren(buffer, stateOf(tag).children);
+        const end = buffer.getCharCount();
+        if (end > start) {
+            buffer.applyTag(tag, buffer.getIterAtOffset(start), buffer.getIterAtOffset(end));
+        }
+    }
+
+    private insertAnchor(buffer: Gtk.TextBuffer, node: Node): void {
+        const child = stateOf(node).children[0];
+        const replacement = stateOf(node).props.replacementChar;
+        const anchor =
+            typeof replacement === "string"
+                ? Gtk.TextChildAnchor.newWithReplacement(replacement)
+                : Gtk.TextChildAnchor.new();
+        buffer.insertChildAnchor(buffer.getEndIter(), anchor);
+        const view = this.resolveView();
+        if (view && child instanceof Gtk.Widget) {
+            unparentWidget(child);
+            view.addChildAtAnchor(child, anchor);
+        }
+    }
+
+    private insertPaintable(buffer: Gtk.TextBuffer, paintable: Gdk.Paintable): void {
+        buffer.insertPaintable(buffer.getEndIter(), paintable);
+    }
+
+    private insertText(buffer: Gtk.TextBuffer, text: string): void {
+        if (text.length === 0) return;
+        buffer.insert(buffer.getEndIter(), text, -1);
+    }
+}

package/src/reconciler/text-buffer-rebuild.ts

@@ -0,0 +1,12 @@
+import * as Gtk from "@gtkx/gi/gtk";
+import { scheduleContentRebuild } from "./content-rebuild.js";
+import type { Node } from "./state.js";
+import { TextBufferController } from "./text-buffer-controller.js";
+
+export const scheduleBufferRebuild = (node: Node): void => {
+    scheduleContentRebuild(
+        node,
+        (candidate): candidate is Gtk.TextBuffer => candidate instanceof Gtk.TextBuffer,
+        (owner) => new TextBufferController(owner).rebuild,
+    );
+};

package/src/reconciler/text-node.ts

@@ -0,0 +1,13 @@
+import { hasWrapperKind, type Node } from "./state.js";
+import { BUFFER_TEXT_KIND, LABEL_TEXT_KIND, TEXT_ANCHOR_KIND, TEXT_PAINTABLE_KIND } from "./wrapper-protocol.js";
+
+export const isBufferTextNode = (node: Node): boolean => hasWrapperKind(node, BUFFER_TEXT_KIND);
+
+export const isPaintableNode = (node: Node): boolean => hasWrapperKind(node, TEXT_PAINTABLE_KIND);
+
+export const isAnchorNode = (node: Node): boolean => hasWrapperKind(node, TEXT_ANCHOR_KIND);
+
+export const isBufferContentNode = (node: Node): boolean =>
+    isBufferTextNode(node) || isPaintableNode(node) || isAnchorNode(node);
+
+export const isLabelTextNode = (node: Node): boolean => hasWrapperKind(node, LABEL_TEXT_KIND);

package/src/reconciler/types.ts

@@ -0,0 +1,6 @@
+import type * as GObject from "@gtkx/gi/gobject";
+import type { RootElement } from "./root-element.js";
+
+export type Container = GObject.Object | RootElement;
+
+export type Props = Record<string, unknown>;

package/src/reconciler/visibility.ts

@@ -0,0 +1,52 @@
+import * as Gtk from "@gtkx/gi/gtk";
+import { scheduleLabelTextRebuild } from "./label-text-rebuild.js";
+import { type Node, stateOf } from "./state.js";
+import { scheduleBufferRebuild } from "./text-buffer-rebuild.js";
+import { isBufferContentNode } from "./text-node.js";
+
+const widgetOf = (node: Node): Gtk.Widget | null => {
+    if (node instanceof Gtk.Widget) return node;
+    const adopted = stateOf(node).adoptedInstance;
+    return adopted instanceof Gtk.Widget ? adopted : null;
+};
+
+export const hideNode = (node: Node): void => {
+    const state = stateOf(node);
+    if (state.hidden) return;
+    state.hidden = true;
+    const widget = widgetOf(node);
+    if (!widget) return;
+    state.visibleWhenShown = widget.getVisible();
+    widget.setVisible(false);
+};
+
+export const unhideNode = (node: Node): void => {
+    const state = stateOf(node);
+    if (!state.hidden) return;
+    state.hidden = false;
+    const widget = widgetOf(node);
+    if (!widget) return;
+    widget.setVisible(state.visibleWhenShown ?? true);
+    state.visibleWhenShown = undefined;
+};
+
+export const reassertHidden = (node: Node): void => {
+    const state = stateOf(node);
+    if (!state.hidden) return;
+    const widget = widgetOf(node);
+    if (!widget?.getVisible()) return;
+    state.visibleWhenShown = true;
+    widget.setVisible(false);
+};
+
+const scheduleTextNodeRebuild = (node: Node): void => {
+    if (isBufferContentNode(node)) scheduleBufferRebuild(node);
+    else scheduleLabelTextRebuild(node);
+};
+
+export const setTextNodeHidden = (node: Node, hidden: boolean): void => {
+    const state = stateOf(node);
+    if ((state.hidden ?? false) === hidden) return;
+    state.hidden = hidden;
+    scheduleTextNodeRebuild(node);
+};

package/src/reconciler/wrapper-apply.ts

@@ -0,0 +1,308 @@
+import type { ContainerProp } from "@gtkx/config";
+import * as GObject from "@gtkx/gi/gobject";
+import * as Gtk from "@gtkx/gi/gtk";
+import { applyProps } from "./apply-props.js";
+import { attachChild, detachChild, getFocusWidget, isDescendantOf, unparentWidget } from "./container-attach.js";
+import {
+    adoptContainerPropFor,
+    type CallScope,
+    nullSetterCurrentHolder,
+    resolveContainerProp,
+    runCall,
+    runCallValue,
+} from "./element-props.js";
+import { type ElementMapping, hasWrapperKind, type Node, registeredStateOf, registerState, stateOf } from "./state.js";
+import type { Props } from "./types.js";
+import { trackedInstance, trackedWidget, wrapperChildInstances } from "./wrapper-content.js";
+import { CONTAINER_PROP_KIND, LAZY_ELEMENT_KIND, OBJECT_PROP_KIND } from "./wrapper-protocol.js";
+
+const attachedParent = new WeakMap<GObject.Object, GObject.Object>();
+
+const scopeFor = (child: GObject.Object, extra?: Partial<CallScope>): CallScope => ({
+    child,
+    props: stateOf(child).props,
+    ...extra,
+});
+
+const runRemove = (parent: GObject.Object, child: GObject.Object, cp: ContainerProp): void => {
+    if (cp.remove !== undefined) runCall(parent, cp.remove, [child], scopeFor(child));
+};
+
+const collectContainerSiblings = (parent: GObject.Object, cp: ContainerProp): GObject.Object[] => {
+    const siblings: GObject.Object[] = [];
+    for (const sibling of stateOf(parent).children) {
+        if (!(sibling instanceof GObject.Object) || sibling instanceof Gtk.Widget) continue;
+        if (resolveContainerProp(parent.__type__, sibling.__type__, undefined) === cp) siblings.push(sibling);
+    }
+    return siblings;
+};
+
+const insertContainerChildAt = (
+    parent: GObject.Object,
+    child: GObject.Object,
+    cp: ContainerProp,
+    index: number,
+): void => {
+    if (cp.insert !== undefined && runCall(parent, cp.insert, [child, index], scopeFor(child, { index }))) {
+        attachedParent.set(child, parent);
+    }
+};
+
+const attachContainerChild = (
+    parent: GObject.Object,
+    child: GObject.Object,
+    cp: ContainerProp,
+    anchor: GObject.Object | null | undefined,
+): void => {
+    const isMove = attachedParent.get(child) === parent;
+    if (cp.insert !== undefined && (anchor != null || isMove)) {
+        if (isMove) runRemove(parent, child, cp);
+        const siblings = collectContainerSiblings(parent, cp);
+        const index = siblings.indexOf(child);
+        insertContainerChildAt(parent, child, cp, index);
+        if (!isMove) {
+            for (const trailing of siblings.slice(index + 1)) {
+                runRemove(parent, trailing, cp);
+                insertContainerChildAt(parent, trailing, cp, siblings.indexOf(trailing));
+            }
+        }
+        return;
+    }
+    if (isMove) return;
+    if (cp.append !== undefined && runCall(parent, cp.append, [child], scopeFor(child))) {
+        attachedParent.set(child, parent);
+    }
+};
+
+const detachContainerChild = (parent: GObject.Object, child: GObject.Object, cp: ContainerProp): void => {
+    if (attachedParent.get(child) !== parent) return;
+    const holder = cp.remove !== undefined ? nullSetterCurrentHolder(parent, cp.remove) : undefined;
+    if (holder === undefined || holder === child) runRemove(parent, child, cp);
+    attachedParent.delete(child);
+};
+
+type ContainerChildMatch = { child: GObject.Object; parent: GObject.Object; cp: ContainerProp };
+
+const resolveContainerChild = (child: Node, parent: Node): ContainerChildMatch | null => {
+    if (!(child instanceof GObject.Object) || child instanceof Gtk.Widget) return null;
+    if (!(parent instanceof GObject.Object)) return null;
+    const cp = resolveContainerProp(parent.__type__, child.__type__, undefined);
+    return cp === null ? null : { child, parent, cp };
+};
+
+export const containerChildMapping: ElementMapping = (child, parent) => {
+    const match = resolveContainerChild(child, parent);
+    if (match === null) return null;
+    return {
+        attach: (anchor) => attachContainerChild(match.parent, match.child, match.cp, anchor),
+        detach: () => detachContainerChild(match.parent, match.child, match.cp),
+    };
+};
+
+const attachPropChild = (parent: GObject.Object, child: GObject.Object, propName: string): void => {
+    const cp = resolveContainerProp(parent.__type__, child.__type__, propName);
+    if (cp !== null) attachContainerChild(parent, child, cp, null);
+};
+
+const detachPropChild = (parent: GObject.Object, child: GObject.Object, propName: string): void => {
+    const cp = resolveContainerProp(parent.__type__, child.__type__, propName);
+    if (cp !== null) detachContainerChild(parent, child, cp);
+};
+
+const isRooted = (instance: GObject.Object): boolean =>
+    instance instanceof Gtk.Widget ? instance.getRoot() !== null : true;
+
+const rescueFocus = (parent: GObject.Object, child: GObject.Object | undefined): void => {
+    if (!(parent instanceof Gtk.Widget) || !(child instanceof Gtk.Widget)) return;
+    const focus = getFocusWidget(child);
+    if (focus && isDescendantOf(focus, child)) parent.grabFocus();
+};
+
+type ObjectPropState = { prop: string; value: GObject.Object };
+
+const objectPropState = new WeakMap<Node, ObjectPropState>();
+
+export const objectPropMapping: ElementMapping = (child, parent) => {
+    if (!hasWrapperKind(child, OBJECT_PROP_KIND) || !(parent instanceof GObject.Object)) return null;
+    return {
+        attach: () => {
+            const prop = propNameOf(child);
+            if (prop === undefined) return;
+            const value = trackedInstance(child);
+            const state = objectPropState.get(child);
+            if (state && state.value === value) return;
+            Reflect.set(parent, prop, value ?? null);
+            if (value) objectPropState.set(child, { prop, value });
+            else objectPropState.delete(child);
+        },
+        detach: () => {
+            const state = objectPropState.get(child);
+            objectPropState.delete(child);
+            if (!state || !isRooted(parent)) return;
+            rescueFocus(parent, state.value);
+            Reflect.set(parent, state.prop, null);
+        },
+    };
+};
+
+const sameInstances = (a: Node[], b: Node[]): boolean =>
+    a.length === b.length && a.every((instance, index) => instance === b[index]);
+
+const propNameOf = (node: Node): string | undefined => {
+    const propName = stateOf(node).props.propName;
+    return typeof propName === "string" ? propName : undefined;
+};
+
+const containerPropState = new WeakMap<Node, GObject.Object[]>();
+
+const detachContainerPropChild = (instance: GObject.Object, parent: GObject.Object, propName: string): void => {
+    detachPropChild(parent, instance, propName);
+    if (instance instanceof Gtk.Widget && instance.getParent() !== null) unparentWidget(instance);
+};
+
+export const containerPropMapping: ElementMapping = (child, parent) => {
+    if (!hasWrapperKind(child, CONTAINER_PROP_KIND) || !(parent instanceof GObject.Object)) return null;
+    return {
+        attach: () => {
+            const propName = propNameOf(child);
+            if (propName === undefined) return;
+            const desired = wrapperChildInstances(child);
+            const prev = containerPropState.get(child) ?? [];
+            if (sameInstances(prev, desired)) return;
+            for (const instance of prev) detachContainerPropChild(instance, parent, propName);
+            for (const instance of desired) attachPropChild(parent, instance, propName);
+            containerPropState.set(child, desired);
+        },
+        detach: () => {
+            const propName = propNameOf(child);
+            const instances = containerPropState.get(child) ?? [];
+            containerPropState.delete(child);
+            if (propName === undefined) return;
+            for (const instance of instances) detachContainerPropChild(instance, parent, propName);
+        },
+    };
+};
+
+type LazyState = { content: Gtk.Widget | null; instance: GObject.Object | null; appliedProps: Props; ordinal: number };
+
+const lazyState = new WeakMap<Node, LazyState>();
+
+const freshLazyState = (): LazyState => ({ content: null, instance: null, appliedProps: {}, ordinal: -1 });
+
+const RESERVED_LAZY_PROPS = new Set(["children", "ref", "key", "kind"]);
+
+const lazyPropsOf = (nodeProps: Props): Props => {
+    const built: Props = {};
+    for (const [name, value] of Object.entries(nodeProps)) {
+        if (RESERVED_LAZY_PROPS.has(name)) continue;
+        built[name] = value;
+    }
+    return built;
+};
+
+const lazyOrdinal = (parent: Node, node: Node): number => {
+    let ordinal = 0;
+    for (const sibling of stateOf(parent).children) {
+        if (sibling === node) return ordinal;
+        if (hasWrapperKind(sibling, LAZY_ELEMENT_KIND)) ordinal++;
+    }
+    return ordinal;
+};
+
+const appendLazyContent = (
+    parent: GObject.Object,
+    cp: ContainerProp,
+    node: Node,
+    content: Gtk.Widget,
+): GObject.Object | undefined => {
+    let appended: unknown;
+    if (cp.insert !== undefined) {
+        const ordinal = lazyOrdinal(parent, node);
+        appended = runCallValue(parent, cp.insert, [content, ordinal], {
+            child: content,
+            index: ordinal,
+            props: stateOf(node).props,
+        }).value;
+    } else if (cp.append !== undefined) {
+        appended = runCallValue(parent, cp.append, [content], { child: content, props: stateOf(node).props }).value;
+    } else {
+        attachChild(content, parent);
+    }
+    const accessor = typeof cp.adopt === "string" ? cp.adopt : undefined;
+    const acquired =
+        accessor !== undefined ? runCallValue(parent, accessor, [content], { child: content }).value : appended;
+    return acquired instanceof GObject.Object ? acquired : undefined;
+};
+
+const applyAdoptedProps = (state: LazyState, node: Node): void => {
+    if (state.instance === null) return;
+    const built = lazyPropsOf(stateOf(node).props);
+    applyProps(state.instance, state.appliedProps, built, {});
+    state.appliedProps = built;
+};
+
+const releaseLazyContent = (node: Node, state: LazyState, parent: GObject.Object, cp: ContainerProp): void => {
+    const { content, instance } = state;
+    if (instance !== null) {
+        registeredStateOf(instance)?.signalStore.clear(instance);
+        stateOf(node).adoptedInstance = undefined;
+    }
+    state.instance = null;
+    state.appliedProps = {};
+    if (content !== null) {
+        if (cp.remove !== undefined) {
+            const stillInside =
+                !(parent instanceof Gtk.Widget) || (content.getParent() !== null && isDescendantOf(content, parent));
+            if (stillInside) runCall(parent, cp.remove, [content], { child: content, adopted: instance ?? undefined });
+        } else {
+            detachChild(content, parent);
+        }
+    }
+    state.content = null;
+};
+
+const syncLazyElement = (parent: GObject.Object, cp: ContainerProp, node: Node): void => {
+    const state = lazyState.get(node) ?? freshLazyState();
+    lazyState.set(node, state);
+    const content = trackedWidget(node);
+    if (state.content !== null && state.content !== content) releaseLazyContent(node, state, parent, cp);
+    if (content === null) return;
+    if (state.instance === null) {
+        const instance = appendLazyContent(parent, cp, node, content);
+        state.content = content;
+        state.ordinal = lazyOrdinal(parent, node);
+        if (instance !== undefined) {
+            state.instance = instance;
+            stateOf(node).adoptedInstance = instance;
+            if (!registeredStateOf(instance)) {
+                registerState(instance, { props: {}, rootContainer: stateOf(node).rootContainer });
+            }
+        }
+    } else if (cp.reorder !== undefined) {
+        const ordinal = lazyOrdinal(parent, node);
+        if (ordinal !== state.ordinal) {
+            runCall(parent, cp.reorder, [content, ordinal], {
+                child: content,
+                index: ordinal,
+                adopted: state.instance ?? undefined,
+            });
+            state.ordinal = ordinal;
+        }
+    }
+    applyAdoptedProps(state, node);
+};
+
+export const lazyElementMapping: ElementMapping = (child, parent) => {
+    if (!hasWrapperKind(child, LAZY_ELEMENT_KIND) || !(parent instanceof GObject.Object)) return null;
+    const cp = adoptContainerPropFor(parent.__type__);
+    if (cp === null) return null;
+    return {
+        attach: () => syncLazyElement(parent, cp, child),
+        detach: () => {
+            const state = lazyState.get(child);
+            lazyState.delete(child);
+            if (!state) return;
+            releaseLazyContent(child, state, parent, cp);
+        },
+    };
+};