@simpreact/simpreact 0.0.4 → 0.0.6

package/core/rerender.js

@@ -1,128 +1,83 @@
-import { findParentReferenceFromElement, updateFunctionalComponent } from './patching.js';
 import { lifecycleEventBus } from './lifecycleEventBus.js';
+import { patch } from './patching.js';
+import { findParentReferenceFromElement } from './utils.js';
+const rerenderSpecificDataByRuntime = new WeakMap();
+function getRerenderSpecificData(renderRuntime) {
+    let data = rerenderSpecificDataByRuntime.get(renderRuntime);
+    if (!data) {
+        data = {
+            asyncQueue: new Set(),
+            syncQueue: new Set(),
+            syncLockDepth: 0,
+            isAsyncFlushScheduled: false,
+        };
+        rerenderSpecificDataByRuntime.set(renderRuntime, data);
+    }
+    return data;
+}
 lifecycleEventBus.subscribe(event => {
+    const data = getRerenderSpecificData(event.renderRuntime);
     if (event.type === 'afterRender' || event.type === 'errored' || event.type === 'unmounted') {
-        batchingRerenderLocker._untrack(event.element.store);
-        renderingRerenderLocker._untrack(event.element.store);
+        data.asyncQueue.delete(event.element.store);
+        data.syncQueue.delete(event.element.store);
     }
 });
-export function rerender(element) {
-    if (element.flag !== 'FC') {
-        throw new TypeError('Re-rendering is only supported for FC elements.');
+function scheduleAsyncFlush(renderRuntime) {
+    const data = getRerenderSpecificData(renderRuntime);
+    if (data.isAsyncFlushScheduled) {
+        return;
     }
+    data.isAsyncFlushScheduled = true;
+    const process = () => {
+        if (data.asyncQueue.size === 0) {
+            data.isAsyncFlushScheduled = false;
+            return;
+        }
+        flushQueue(data.asyncQueue, renderRuntime);
+        queueMicrotask(process);
+    };
+    queueMicrotask(process);
+}
+export function rerender(store, renderRuntime) {
+    const data = getRerenderSpecificData(renderRuntime);
+    const element = store.latestElement;
     if (element.unmounted) {
         console.warn('The component is unmounted.');
-    }
-    lifecycleEventBus.publish({ type: 'triedToRerender', element });
-    if (batchingRerenderLocker._isLocked) {
-        batchingRerenderLocker._track(element.store);
         return;
     }
-    if (renderingRerenderLocker._isLocked) {
-        renderingRerenderLocker._track(element.store);
+    lifecycleEventBus.publish({ type: 'triedToRerender', element, renderRuntime });
+    if (data.syncLockDepth > 0) {
+        data.syncQueue.add(store);
         return;
     }
-    renderingRerenderLocker.lock();
-    updateFunctionalComponent(element, findParentReferenceFromElement(element), null, element.context || null, element.store.hostNamespace);
-    renderingRerenderLocker.flush();
+    data.asyncQueue.add(store);
+    scheduleAsyncFlush(renderRuntime);
 }
-export const batchingRerenderLocker = {
-    _isLocked: false,
-    _elementStores: new Set(),
-    _last: undefined,
-    _track(store) {
-        if (this._elementStores.has(store)) {
-            return;
-        }
-        if (this._elementStores.size === 0 || store.forceRender) {
-            this._elementStores.add(store);
-            this._last = store;
-            return;
-        }
-        if (isParentOf(store.latestElement, this._last.latestElement)) {
-            return;
-        }
-        if (isParentOf(this._last.latestElement, store.latestElement)) {
-            this._elementStores.clear();
-            this._elementStores.add(store);
-            this._last = store;
-        }
-    },
-    _untrack(store) {
-        if (this._elementStores.delete(store) && store === this._last) {
-            this._last = undefined;
-            for (const val of this._elementStores) {
-                this._last = val;
-            }
-        }
-    },
-    lock() {
-        this._isLocked = true;
-    },
-    flush() {
-        this._isLocked = false;
-        if (this._elementStores.size === 0) {
-            return;
-        }
-        for (const store of this._elementStores) {
-            this._untrack(store);
-            rerender(store.latestElement);
-        }
-    },
-};
-export const renderingRerenderLocker = {
-    _isLocked: false,
-    _elementStores: new Set(),
-    _last: undefined,
-    _track(store) {
-        if (this._elementStores.has(store)) {
-            return;
-        }
-        if (this._elementStores.size === 0 || store.forceRender) {
-            this._elementStores.add(store);
-            this._last = store;
-            return;
-        }
-        if (isParentOf(store.latestElement, this._last.latestElement)) {
-            return;
-        }
-        if (isParentOf(this._last.latestElement, store.latestElement)) {
-            this._elementStores.clear();
-            this._elementStores.add(store);
-            this._last = store;
-        }
-    },
-    _untrack(store) {
-        if (this._elementStores.delete(store) && store === this._last) {
-            this._last = undefined;
-            for (const val of this._elementStores) {
-                this._last = val;
-            }
-        }
-    },
-    lock() {
-        this._isLocked = true;
-    },
-    flush() {
-        this._isLocked = false;
-        if (this._elementStores.size === 0) {
-            return;
-        }
-        queueMicrotask(() => {
-            for (const store of this._elementStores) {
-                this._untrack(store);
-                rerender(store.latestElement);
-            }
-        });
-    },
-};
-function isParentOf(element, parent) {
-    let current = element.parent;
-    while (current) {
-        if (current.store === parent.store) {
-            return true;
+export function withSyncRerender(renderRuntime, callback) {
+    const data = getRerenderSpecificData(renderRuntime);
+    data.syncLockDepth++;
+    try {
+        callback();
+    }
+    finally {
+        data.syncLockDepth--;
+        if (data.syncLockDepth === 0) {
+            flushQueue(data.syncQueue, renderRuntime);
         }
-        current = current.parent;
     }
-    return false;
+}
+function flushQueue(queue, renderRuntime) {
+    for (const store of queue) {
+        queue.delete(store);
+        performRerender(store.latestElement, renderRuntime);
+    }
+}
+function performRerender(element, renderRuntime) {
+    element.store.forceRerender = true;
+    try {
+        patch(element, element, findParentReferenceFromElement(element), null, element.context || null, element.store.hostNamespace, renderRuntime);
+    }
+    finally {
+        element.store.forceRerender = false;
+    }
 }

package/core/runtime.d.ts

@@ -0,0 +1,17 @@
+import type { Nullable } from '../shared/index.js';
+import type { FC, SimpElement, SimpNode } from './createElement.js';
+import type { HostAdapter } from './hostAdapter.js';
+import type { SimpRenderStack } from './processStack.js';
+export interface SimpRuntimeFCRenderer {
+    (component: FC, element: SimpElement, renderRuntime: SimpRenderRuntime): SimpNode;
+}
+export declare const MOUNTING_PHASE = 0;
+export declare const UPDATING_PHASE = 1;
+export interface SimpRenderRuntime {
+    hostAdapter: HostAdapter;
+    renderer: SimpRuntimeFCRenderer;
+    renderStack: SimpRenderStack;
+    elementToHostMap: Map<unknown, SimpElement>;
+    currentRenderingFCElement: Nullable<SimpElement>;
+    renderPhase: Nullable<typeof MOUNTING_PHASE | typeof UPDATING_PHASE>;
+}

package/core/runtime.js

@@ -0,0 +1,2 @@
+export const MOUNTING_PHASE = 0;
+export const UPDATING_PHASE = 1;

package/core/unmounting.d.ts

@@ -1,6 +1,11 @@
-import type { Many, Maybe } from '../shared/index.js';
-import type { SimpElement } from './createElement.js';
-import type { HostReference } from './hostAdapter.js';
-export declare function unmount(element: Many<SimpElement>): void;
-export declare function clearElementHostReference(element: Maybe<SimpElement>, parentHostReference: HostReference): void;
-export declare function remove(element: SimpElement, parentReference: HostReference): void;
+import type { Maybe } from '../shared/index.js';
+import { type SimpElement } from './createElement.js';
+import { type UnmountFrame } from './processStack.js';
+import type { SimpRenderRuntime } from './runtime.js';
+export declare function unmount(element: SimpElement, renderRuntime: SimpRenderRuntime): void;
+export declare function _unmount(frame: UnmountFrame): void;
+export declare function _pushUnmountEnterFrame(element: SimpElement, renderRuntime: SimpRenderRuntime): void;
+export declare function _pushUnmountExitFrame(element: SimpElement, renderRuntime: SimpRenderRuntime): void;
+export declare function _pushUnmountArrayChildrenFrame(element: SimpElement, renderRuntime: SimpRenderRuntime): void;
+export declare function _clearElementHostReference(element: Maybe<SimpElement>, parentHostReference: unknown, renderRuntime: SimpRenderRuntime): void;
+export declare function _remove(element: SimpElement, parentReference: unknown, renderRuntime: SimpRenderRuntime): void;

package/core/unmounting.js

@@ -1,68 +1,109 @@
-import { hostAdapter } from './hostAdapter.js';
-import { unmountRef } from './ref.js';
+import { SIMP_ELEMENT_CHILD_FLAG_ELEMENT, SIMP_ELEMENT_CHILD_FLAG_LIST, SIMP_ELEMENT_FLAG_FC, SIMP_ELEMENT_FLAG_FRAGMENT, SIMP_ELEMENT_FLAG_HOST, SIMP_ELEMENT_FLAG_PORTAL, SIMP_ELEMENT_FLAG_TEXT, } from './createElement.js';
 import { lifecycleEventBus } from './lifecycleEventBus.js';
-export function unmount(element) {
-    if (Array.isArray(element)) {
-        for (const child of element) {
-            unmount(child);
+import { processStack, UNMOUNT_ENTER, UNMOUNT_EXIT } from './processStack.js';
+import { unmountRef } from './ref.js';
+import { isHostLike } from './utils.js';
+export function unmount(element, renderRuntime) {
+    if (renderRuntime.renderStack.length !== 0) {
+        throw new Error('Cannot unmount while rendering.');
+    }
+    _pushUnmountEnterFrame(element, renderRuntime);
+    processStack(renderRuntime);
+}
+export function _unmount(frame) {
+    const current = frame.node;
+    if (frame.kind === UNMOUNT_EXIT) {
+        if ((current.flag & SIMP_ELEMENT_FLAG_FC) !== 0) {
+            current.unmounted = true;
+            lifecycleEventBus.publish({ type: 'unmounted', element: current, renderRuntime: frame.meta.renderRuntime });
+            current.store = null;
+            return;
+        }
+        if ((current.flag & SIMP_ELEMENT_FLAG_HOST) !== 0) {
+            unmountRef(current);
+            frame.meta.renderRuntime.hostAdapter.unmountProps(current.reference, current, frame.meta.renderRuntime);
+            frame.meta.renderRuntime.hostAdapter.detachElementFromReference(current.reference, frame.meta.renderRuntime);
         }
         return;
     }
-    if (element.flag === 'FC') {
-        // Skip — element is already unmounted.
-        if (element.unmounted) {
+    if ((current.flag & SIMP_ELEMENT_FLAG_FC) !== 0) {
+        if (current.unmounted) {
             return;
         }
-        // FC element always has Maybe<SimpElement> due to normalization.
-        if (element.children) {
-            unmount(element.children);
+        _pushUnmountExitFrame(current, frame.meta.renderRuntime);
+        if (current.children) {
+            _pushUnmountEnterFrame(current.children, frame.meta.renderRuntime);
         }
-        element.unmounted = true;
-        lifecycleEventBus.publish({ type: 'unmounted', element });
         return;
     }
-    if (element.flag === 'TEXT') {
+    if ((current.flag & SIMP_ELEMENT_FLAG_TEXT) !== 0) {
         return;
     }
-    if (element.flag === 'PORTAL') {
-        remove(element.children, element.ref);
+    if ((current.flag & SIMP_ELEMENT_FLAG_PORTAL) !== 0) {
+        _remove(current.children, current.ref, frame.meta.renderRuntime);
         return;
     }
-    // Only FRAGMENT and HOST elements remain,
-    // with Maybe<Many<SimpElement>> children due to normalization.
-    if (element.children) {
-        unmount(element.children);
+    if ((current.flag & SIMP_ELEMENT_FLAG_HOST) !== 0) {
+        _pushUnmountExitFrame(current, frame.meta.renderRuntime);
     }
-    if (element.flag === 'HOST') {
-        unmountRef(element);
-        hostAdapter.unmountProps(element.reference, element);
+    if (current.childFlag === SIMP_ELEMENT_CHILD_FLAG_ELEMENT) {
+        _pushUnmountEnterFrame(current.children, frame.meta.renderRuntime);
+        return;
     }
+    if (current.childFlag === SIMP_ELEMENT_CHILD_FLAG_LIST) {
+        _pushUnmountArrayChildrenFrame(current, frame.meta.renderRuntime);
+    }
+}
+export function _pushUnmountEnterFrame(element, renderRuntime) {
+    renderRuntime.renderStack.push({
+        node: element,
+        kind: UNMOUNT_ENTER,
+        meta: {
+            renderRuntime,
+        },
+    });
+}
+export function _pushUnmountExitFrame(element, renderRuntime) {
+    renderRuntime.renderStack.push({
+        node: element,
+        kind: UNMOUNT_EXIT,
+        meta: {
+            renderRuntime,
+        },
+    });
 }
-export function clearElementHostReference(element, parentHostReference) {
+export function _pushUnmountArrayChildrenFrame(element, renderRuntime) {
+    const children = element.children;
+    for (let i = children.length - 1; i >= 0; i -= 1) {
+        _pushUnmountEnterFrame(children[i], renderRuntime);
+    }
+}
+export function _clearElementHostReference(element, parentHostReference, renderRuntime) {
     while (element != null) {
-        if (element.flag === 'HOST' || element.flag === 'TEXT' || element.flag === 'PORTAL') {
-            hostAdapter.removeChild(parentHostReference, element.reference);
+        if (isHostLike(element.flag)) {
+            renderRuntime.hostAdapter.removeChild(parentHostReference, element.reference);
             return;
         }
         const children = element.children;
-        if (element.flag === 'FC') {
+        const childFlag = element.childFlag;
+        if ((element.flag & SIMP_ELEMENT_FLAG_FC) !== 0) {
             element = children;
             continue;
         }
-        if (element.flag === 'FRAGMENT') {
-            if (Array.isArray(children)) {
-                for (let i = 0, len = children.length; i < len; ++i) {
-                    clearElementHostReference(children[i], parentHostReference);
-                }
-                return;
-            }
-            else if (children) {
-                element = children;
+        if ((element.flag & SIMP_ELEMENT_FLAG_FRAGMENT) !== 0) {
+            switch (childFlag) {
+                case SIMP_ELEMENT_CHILD_FLAG_LIST:
+                    for (let i = 0, len = children.length; i < len; ++i) {
+                        _clearElementHostReference(children[i], parentHostReference, renderRuntime);
+                    }
+                    return;
+                case SIMP_ELEMENT_CHILD_FLAG_ELEMENT:
+                    element = children;
             }
         }
     }
 }
-export function remove(element, parentReference) {
-    unmount(element);
-    clearElementHostReference(element, parentReference);
+export function _remove(element, parentReference, renderRuntime) {
+    _clearElementHostReference(element, parentReference, renderRuntime);
+    _pushUnmountEnterFrame(element, renderRuntime);
 }

package/core/utils.d.ts

@@ -0,0 +1,10 @@
+import type { Nullable } from '../shared/index.js';
+import { type SimpElement } from './createElement.js';
+import type { SimpRenderRuntime } from './runtime.js';
+export declare function bitScanForwardIndex(flag: number): number;
+export declare function isHostLike(flag: number): boolean;
+export declare function findParentReferenceFromElement(element: SimpElement): unknown | null;
+export declare function placeElementBeforeAnchor(element: SimpElement, anchor: unknown, parentReference: unknown, renderRuntime: SimpRenderRuntime): void;
+export declare function resolveAnchorReference(rightSibling: Nullable<SimpElement>): unknown | null;
+export declare function findHostReferenceFromElement(element: Nullable<SimpElement>): unknown | null;
+export declare function getLongestIncreasingSubsequenceIndexes(sequence: Int32Array): Int32Array;

package/core/utils.js

@@ -0,0 +1,143 @@
+import { SIMP_ELEMENT_CHILD_FLAG_ELEMENT, SIMP_ELEMENT_CHILD_FLAG_LIST, SIMP_ELEMENT_FLAG_HOST, SIMP_ELEMENT_FLAG_PORTAL, SIMP_ELEMENT_FLAG_TEXT, } from './createElement.js';
+export function bitScanForwardIndex(flag) {
+    const lsb = (flag & -flag) >>> 0;
+    return 31 - Math.clz32(lsb);
+}
+export function isHostLike(flag) {
+    return ((flag & SIMP_ELEMENT_FLAG_HOST) !== 0 ||
+        (flag & SIMP_ELEMENT_FLAG_TEXT) !== 0 ||
+        (flag & SIMP_ELEMENT_FLAG_PORTAL) !== 0);
+}
+export function findParentReferenceFromElement(element) {
+    let flag;
+    let temp = element;
+    while (temp != null) {
+        flag = temp.flag;
+        if ((flag & SIMP_ELEMENT_FLAG_HOST) !== 0) {
+            return temp.reference;
+        }
+        temp = temp.parent;
+    }
+    return null;
+}
+const placeStack = [];
+export function placeElementBeforeAnchor(element, anchor, parentReference, renderRuntime) {
+    const { hostAdapter } = renderRuntime;
+    placeStack.push(element);
+    let nextAnchor = anchor;
+    while (placeStack.length !== 0) {
+        const current = placeStack.pop();
+        if (isHostLike(current.flag)) {
+            hostAdapter.insertOrAppend(parentReference, current.reference, nextAnchor);
+            nextAnchor = current.reference;
+            continue;
+        }
+        if (current.childFlag === SIMP_ELEMENT_CHILD_FLAG_LIST) {
+            const children = current.children;
+            for (let i = 0; i < children.length; i++) {
+                placeStack.push(children[i]);
+            }
+        }
+        else if (current.childFlag === SIMP_ELEMENT_CHILD_FLAG_ELEMENT) {
+            placeStack.push(current.children);
+        }
+    }
+}
+export function resolveAnchorReference(rightSibling) {
+    let current = rightSibling;
+    while (current != null) {
+        const reference = findHostReferenceFromElement(current);
+        if (reference != null) {
+            return reference;
+        }
+        current = findNextLogicalElement(current);
+    }
+    return null;
+}
+export function findHostReferenceFromElement(element) {
+    if (element == null) {
+        return null;
+    }
+    const stack = [element];
+    while (stack.length) {
+        const node = stack.pop();
+        if (node == null) {
+            continue;
+        }
+        if (isHostLike(node.flag)) {
+            return node.reference;
+        }
+        if (node.childFlag === SIMP_ELEMENT_CHILD_FLAG_LIST) {
+            const list = node.children;
+            for (let i = list.length - 1; i >= 0; i--) {
+                stack.push(list[i]);
+            }
+        }
+        else if (node.childFlag === SIMP_ELEMENT_CHILD_FLAG_ELEMENT) {
+            stack.push(node.children);
+        }
+    }
+    return null;
+}
+function findNextLogicalElement(element) {
+    let current = element;
+    while (true) {
+        const parent = current.parent;
+        if (parent == null || isHostLike(parent.flag)) {
+            return null;
+        }
+        if (parent.childFlag !== SIMP_ELEMENT_CHILD_FLAG_LIST) {
+            current = parent;
+            continue;
+        }
+        const nextSibling = parent.children[current.index + 1];
+        if (nextSibling != null) {
+            return nextSibling;
+        }
+        current = parent;
+    }
+}
+export function getLongestIncreasingSubsequenceIndexes(sequence) {
+    const predecessors = new Int32Array(sequence.length);
+    const result = [];
+    predecessors.fill(-1);
+    for (let i = 0; i < sequence.length; i++) {
+        const value = sequence[i];
+        if (value === 0) {
+            continue;
+        }
+        const lastResultIndex = result[result.length - 1];
+        if (lastResultIndex == null || sequence[lastResultIndex] < value) {
+            if (lastResultIndex != null) {
+                predecessors[i] = lastResultIndex;
+            }
+            result.push(i);
+            continue;
+        }
+        let start = 0;
+        let end = result.length - 1;
+        while (start < end) {
+            const middle = (start + end) >> 1;
+            if (sequence[result[middle]] < value) {
+                start = middle + 1;
+            }
+            else {
+                end = middle;
+            }
+        }
+        if (value < sequence[result[start]]) {
+            if (start > 0) {
+                predecessors[i] = result[start - 1];
+            }
+            result[start] = i;
+        }
+    }
+    let resultIndex = result.length;
+    let sequenceIndex = result[resultIndex - 1] ?? -1;
+    const indexes = new Int32Array(resultIndex);
+    while (resultIndex-- > 0) {
+        indexes[resultIndex] = sequenceIndex;
+        sequenceIndex = predecessors[sequenceIndex];
+    }
+    return indexes;
+}

package/dom/attach-element-to-dom.d.ts

@@ -1,4 +1,5 @@
+import { type SimpElement, type SimpRenderRuntime } from '../core/internal.js';
 import type { Nullable } from '../shared/index.js';
-import type { SimpElement } from '../core/internal.js';
-export declare function attachElementToDom(element: SimpElement, dom: Node): void;
-export declare function getElementFromDom(target: Nullable<EventTarget>): Nullable<SimpElement>;
+export declare function attachElementToDom(element: SimpElement, dom: Node, renderRuntime: SimpRenderRuntime): void;
+export declare function getElementFromDom(target: Nullable<EventTarget>, renderRuntime: SimpRenderRuntime): Nullable<SimpElement>;
+export declare function detachElementFromDom(dom: Node, renderRuntime: SimpRenderRuntime): void;

package/dom/attach-element-to-dom.js

@@ -1,18 +1,23 @@
-const elementPropertyName = '__SIMP_ELEMENT__';
-export function attachElementToDom(element, dom) {
-    if (element.flag !== 'TEXT') {
-        Object.defineProperty(dom, elementPropertyName, { value: element, writable: true });
+import { SIMP_ELEMENT_FLAG_TEXT } from '../core/internal.js';
+export function attachElementToDom(element, dom, renderRuntime) {
+    if ((element.flag & SIMP_ELEMENT_FLAG_TEXT) === 0) {
+        renderRuntime.elementToHostMap.set(dom, element);
     }
 }
-export function getElementFromDom(target) {
+export function getElementFromDom(target, renderRuntime) {
     if (!target) {
         return null;
     }
-    while (target && !(elementPropertyName in target)) {
+    while (target && !renderRuntime.elementToHostMap.has(target)) {
         target = target.parentElement;
     }
     if (!target) {
         return null;
     }
-    return target[elementPropertyName];
+    return renderRuntime.elementToHostMap.get(target);
+}
+export function detachElementFromDom(dom, renderRuntime) {
+    if (renderRuntime.elementToHostMap.has(dom)) {
+        renderRuntime.elementToHostMap.delete(dom);
+    }
 }

package/dom/domAdapter.js

@@ -1,6 +1,6 @@
-import { attachElementToDom } from './attach-element-to-dom.js';
-import { mountProps, patchProps, unmountProps } from './props/index.js';
+import { attachElementToDom, detachElementFromDom, getElementFromDom } from './attach-element-to-dom.js';
 import { defaultNamespace } from './namespace.js';
+import { mountProps, patchProps, unmountProps } from './props/index.js';
 export const domAdapter = {
     createReference(type, namespace) {
         if (namespace) {
@@ -13,14 +13,14 @@ export const domAdapter = {
     createTextReference(text) {
         return document.createTextNode(text);
     },
-    mountProps(dom, element, namespace) {
-        mountProps(dom, element, namespace || defaultNamespace);
+    mountProps(dom, element, renderRuntime, namespace) {
+        mountProps(dom, element, namespace || defaultNamespace, renderRuntime);
     },
-    patchProps(dom, prevElement, nextElement, namespace) {
-        patchProps(dom, prevElement, nextElement, namespace || defaultNamespace);
+    patchProps(dom, prevElement, nextElement, renderRuntime, namespace) {
+        patchProps(dom, prevElement, nextElement, namespace || defaultNamespace, renderRuntime);
     },
-    unmountProps(dom, element) {
-        unmountProps(dom, element);
+    unmountProps(dom, element, renderRuntime) {
+        unmountProps(dom, element, renderRuntime);
     },
     setClassname(reference, className, namespace) {
         if (!className) {
@@ -41,18 +41,12 @@ export const domAdapter = {
             reference.textContent = text;
         }
     },
-    appendChild(parent, child) {
-        parent.appendChild(child);
-    },
-    insertBefore(parent, child, before) {
-        parent.insertBefore(child, before);
-    },
     insertOrAppend(parent, child, before) {
         if (before) {
-            domAdapter.insertBefore(parent, child, before);
+            parent.insertBefore(child, before);
         }
         else {
-            domAdapter.appendChild(parent, child);
+            parent.appendChild(child);
         }
     },
     removeChild(parent, child) {
@@ -61,21 +55,24 @@ export const domAdapter = {
     replaceChild(parent, replacer, toBeReplaced) {
         parent.replaceChild(replacer, toBeReplaced);
     },
-    findParentReference(reference) {
-        return reference.parentElement;
-    },
-    findNextSiblingReference(reference) {
-        return reference.nextSibling;
-    },
     clearNode(reference) {
         reference.textContent = '';
     },
-    attachElementToReference(element, reference) {
-        attachElementToDom(element, reference);
+    attachElementToReference(element, reference, renderRuntime) {
+        attachElementToDom(element, reference, renderRuntime);
+    },
+    getElementFromReference(reference, renderRuntime) {
+        return getElementFromDom(reference, renderRuntime);
+    },
+    detachElementFromReference(reference, renderRuntime) {
+        detachElementFromDom(reference, renderRuntime);
     },
     getHostNamespaces(element, currentNamespace) {
         if (element.type === 'svg') {
-            return { self: 'http://www.w3.org/2000/svg', children: 'http://www.w3.org/2000/svg' };
+            return {
+                self: 'http://www.w3.org/2000/svg',
+                children: 'http://www.w3.org/2000/svg',
+            };
         }
         if (element.type === 'foreignObject') {
             return { self: 'http://www.w3.org/2000/svg', children: null };