@simpreact/simpreact 0.0.5 → 0.0.6

package/core/patchingChildren.js

@@ -0,0 +1,330 @@
+import { SIMP_ELEMENT_CHILD_FLAG_ELEMENT, SIMP_ELEMENT_CHILD_FLAG_LIST, SIMP_ELEMENT_CHILD_FLAG_TEXT, SIMP_ELEMENT_FLAG_FRAGMENT, } from './createElement.js';
+import { _pushHostOperationPlaceElement } from './hostOperations.js';
+import { _pushMountArrayChildrenFrame, _pushMountEnterFrame } from './mounting.js';
+import { _pushPatchEnterFrame } from './patching.js';
+import { PATCH_CHILDREN, PATCH_KEYED_CHILDREN } from './processStack.js';
+import { _clearElementHostReference, _pushUnmountArrayChildrenFrame, _pushUnmountEnterFrame, _remove, } from './unmounting.js';
+import { getLongestIncreasingSubsequenceIndexes } from './utils.js';
+export function _pushPatchChildrenFrame(element, meta) {
+    meta.renderRuntime.renderStack.push({
+        node: element,
+        kind: PATCH_CHILDREN,
+        meta,
+    });
+}
+export function _pushPatchKeyedChildrenFrame(element, meta) {
+    meta.renderRuntime.renderStack.push({
+        node: element,
+        kind: PATCH_KEYED_CHILDREN,
+        meta,
+    });
+}
+export function _patchChildren(frame) {
+    const nextElement = frame.node;
+    const { renderRuntime, rightSibling, parentReference, context, hostNamespace, placeHolderElement, prevElement } = frame.meta;
+    const nextChildFlag = nextElement.childFlag;
+    const prevChildFlag = prevElement.childFlag;
+    let nextChildren = nextElement.children;
+    let prevChildren = prevElement.children;
+    switch (prevChildFlag) {
+        case SIMP_ELEMENT_CHILD_FLAG_LIST: {
+            switch (nextChildFlag) {
+                case SIMP_ELEMENT_CHILD_FLAG_LIST: {
+                    for (const child of nextChildren) {
+                        child.parent = nextElement;
+                    }
+                    _pushPatchKeyedChildrenFrame(frame.node, {
+                        prevElement,
+                        context,
+                        parentReference,
+                        rightSibling,
+                        hostNamespace,
+                        placeHolderElement,
+                        renderRuntime,
+                    });
+                    break;
+                }
+                case SIMP_ELEMENT_CHILD_FLAG_ELEMENT: {
+                    if (prevElement.flag & SIMP_ELEMENT_FLAG_FRAGMENT) {
+                        _clearElementHostReference(prevElement, parentReference, renderRuntime);
+                    }
+                    else {
+                        renderRuntime.hostAdapter.clearNode(parentReference);
+                    }
+                    _pushMountEnterFrame(nextChildren, {
+                        parentReference,
+                        rightSibling,
+                        context,
+                        hostNamespace,
+                        renderRuntime,
+                        placeHolderElement: null,
+                    });
+                    _pushUnmountArrayChildrenFrame(prevElement, renderRuntime);
+                    break;
+                }
+                case SIMP_ELEMENT_CHILD_FLAG_TEXT: {
+                    _pushUnmountArrayChildrenFrame(prevElement, renderRuntime);
+                    renderRuntime.hostAdapter.setTextContent(parentReference, nextElement.props?.children);
+                    break;
+                }
+                default: {
+                    _pushUnmountArrayChildrenFrame(prevElement, renderRuntime);
+                    renderRuntime.hostAdapter.clearNode(parentReference);
+                }
+            }
+            break;
+        }
+        case SIMP_ELEMENT_CHILD_FLAG_ELEMENT: {
+            switch (nextChildFlag) {
+                case SIMP_ELEMENT_CHILD_FLAG_LIST: {
+                    _pushUnmountEnterFrame(prevChildren, renderRuntime);
+                    _pushMountArrayChildrenFrame(nextElement, {
+                        parentReference,
+                        renderRuntime,
+                        rightSibling,
+                        context,
+                        hostNamespace,
+                        placeHolderElement: null,
+                    });
+                    _clearElementHostReference(prevChildren, parentReference, renderRuntime);
+                    break;
+                }
+                case SIMP_ELEMENT_CHILD_FLAG_ELEMENT: {
+                    nextChildren.parent = nextElement;
+                    _pushPatchEnterFrame(nextChildren, {
+                        prevElement: prevChildren,
+                        parentReference,
+                        renderRuntime,
+                        rightSibling,
+                        context,
+                        hostNamespace,
+                        placeHolderElement: null,
+                    });
+                    break;
+                }
+                case SIMP_ELEMENT_CHILD_FLAG_TEXT: {
+                    _pushUnmountArrayChildrenFrame(prevElement, renderRuntime);
+                    renderRuntime.hostAdapter.setTextContent(parentReference, nextElement.props?.children);
+                    break;
+                }
+                default: {
+                    _remove(prevChildren, parentReference, renderRuntime);
+                }
+            }
+            break;
+        }
+        case SIMP_ELEMENT_CHILD_FLAG_TEXT: {
+            switch (nextChildFlag) {
+                case SIMP_ELEMENT_CHILD_FLAG_LIST: {
+                    renderRuntime.hostAdapter.clearNode(parentReference);
+                    _pushMountArrayChildrenFrame(nextElement, {
+                        parentReference,
+                        renderRuntime,
+                        rightSibling,
+                        context,
+                        hostNamespace,
+                        placeHolderElement: null,
+                    });
+                    break;
+                }
+                case SIMP_ELEMENT_CHILD_FLAG_ELEMENT: {
+                    renderRuntime.hostAdapter.clearNode(parentReference);
+                    nextChildren.parent = nextElement;
+                    _pushMountEnterFrame(nextChildren, {
+                        parentReference,
+                        rightSibling,
+                        context,
+                        hostNamespace,
+                        renderRuntime,
+                        placeHolderElement: null,
+                    });
+                    break;
+                }
+                case SIMP_ELEMENT_CHILD_FLAG_TEXT: {
+                    prevChildren = prevElement.props?.children;
+                    nextChildren = nextElement.props?.children;
+                    if (prevChildren !== nextChildren) {
+                        renderRuntime.hostAdapter.setTextContent(parentReference, nextChildren, true);
+                    }
+                }
+            }
+            break;
+        }
+        default: {
+            switch (nextChildFlag) {
+                case SIMP_ELEMENT_CHILD_FLAG_LIST: {
+                    _pushMountArrayChildrenFrame(nextElement, {
+                        parentReference,
+                        rightSibling,
+                        context,
+                        hostNamespace,
+                        renderRuntime,
+                        placeHolderElement: null,
+                    });
+                    break;
+                }
+                case SIMP_ELEMENT_CHILD_FLAG_ELEMENT: {
+                    nextChildren.parent = nextElement;
+                    _pushMountEnterFrame(nextChildren, {
+                        parentReference,
+                        rightSibling,
+                        context,
+                        hostNamespace,
+                        renderRuntime,
+                        placeHolderElement: null,
+                    });
+                    break;
+                }
+                case SIMP_ELEMENT_CHILD_FLAG_TEXT: {
+                    renderRuntime.hostAdapter.setTextContent(parentReference, nextElement.props?.children);
+                }
+            }
+        }
+    }
+}
+export function _patchKeyedChildren(frame) {
+    const { node: nextElement, meta } = frame;
+    const { renderRuntime, parentReference, prevElement, context, hostNamespace } = meta;
+    const nextChildren = nextElement.children;
+    const prevChildren = prevElement.children;
+    const nextLen = nextChildren.length;
+    const prevLen = prevChildren.length;
+    const base = {
+        parentReference,
+        renderRuntime,
+        context,
+        hostNamespace,
+        placeHolderElement: null,
+    };
+    const getRightSibling = (child) => {
+        return nextChildren[child.index + 1] ?? null;
+    };
+    let prevStart = 0;
+    let nextStart = 0;
+    let prevEnd = prevLen - 1;
+    let nextEnd = nextLen - 1;
+    while (prevStart <= prevEnd &&
+        nextStart <= nextEnd &&
+        prevChildren[prevStart].key === nextChildren[nextStart].key) {
+        prevStart++;
+        nextStart++;
+    }
+    while (prevStart <= prevEnd && nextStart <= nextEnd && prevChildren[prevEnd].key === nextChildren[nextEnd].key) {
+        prevEnd--;
+        nextEnd--;
+    }
+    const pushPrefixPatches = () => {
+        for (let i = 0; i < nextStart; i++) {
+            const nextChild = nextChildren[i];
+            const prevChild = prevChildren[nextChild.index];
+            _pushPatchEnterFrame(nextChild, {
+                ...base,
+                prevElement: prevChild,
+                rightSibling: getRightSibling(nextChild),
+            });
+        }
+    };
+    const pushSuffixPatches = () => {
+        const delta = nextLen - prevLen;
+        for (let i = nextEnd + 1; i < nextLen; i++) {
+            const nextChild = nextChildren[i];
+            const prevChild = prevChildren[nextChild.index - delta];
+            _pushPatchEnterFrame(nextChild, {
+                ...base,
+                prevElement: prevChild,
+                rightSibling: getRightSibling(nextChild),
+            });
+        }
+    };
+    if (nextStart > nextEnd) {
+        pushPrefixPatches();
+        for (let i = prevStart; i <= prevEnd; i++) {
+            _remove(prevChildren[i], parentReference, renderRuntime);
+        }
+        pushSuffixPatches();
+        return;
+    }
+    if (prevStart > prevEnd) {
+        pushPrefixPatches();
+        for (let i = nextStart; i <= nextEnd; i++) {
+            const nextChild = nextChildren[i];
+            _pushMountEnterFrame(nextChild, {
+                ...base,
+                rightSibling: getRightSibling(nextChild),
+            });
+        }
+        pushSuffixPatches();
+        return;
+    }
+    const keyToPrevChild = new Map();
+    for (let i = prevStart; i <= prevEnd; i++) {
+        const prevChild = prevChildren[i];
+        const key = prevChild.key;
+        if (key != null) {
+            keyToPrevChild.set(key, prevChild);
+        }
+    }
+    const middleLen = nextEnd - nextStart + 1;
+    const newIndexToOldIndex = new Int32Array(middleLen);
+    let moved = false;
+    let maxPrevIndexSoFar = -1;
+    for (let i = nextStart; i <= nextEnd; i++) {
+        const nextChild = nextChildren[i];
+        const prevChild = keyToPrevChild.get(nextChild.key);
+        if (prevChild != null) {
+            const prevIndex = prevChild.index;
+            newIndexToOldIndex[nextChild.index - nextStart] = prevIndex + 1;
+            if (prevIndex < maxPrevIndexSoFar) {
+                moved = true;
+            }
+            else {
+                maxPrevIndexSoFar = prevIndex;
+            }
+        }
+    }
+    pushPrefixPatches();
+    const matchedPrev = new Uint8Array(prevEnd - prevStart + 1);
+    for (let i = 0; i < middleLen; i++) {
+        const oldIndex = newIndexToOldIndex[i];
+        if (oldIndex !== 0) {
+            matchedPrev[oldIndex - 1 - prevStart] = 1;
+        }
+    }
+    for (let i = prevStart; i <= prevEnd; i++) {
+        if (!matchedPrev[i - prevStart]) {
+            _remove(prevChildren[i], parentReference, renderRuntime);
+        }
+    }
+    const stableNewIndexes = moved ? getLongestIncreasingSubsequenceIndexes(newIndexToOldIndex) : new Int32Array(0);
+    let stableCursor = 0;
+    for (let i = nextStart; i <= nextEnd; i++) {
+        const nextChild = nextChildren[i];
+        const newIndex = nextChild.index - nextStart;
+        const oldIndex = newIndexToOldIndex[newIndex];
+        if (oldIndex === 0) {
+            _pushMountEnterFrame(nextChild, {
+                ...base,
+                rightSibling: getRightSibling(nextChild),
+            });
+            continue;
+        }
+        const prevChild = prevChildren[oldIndex - 1];
+        const isStable = moved && stableNewIndexes[stableCursor] === newIndex;
+        if (isStable) {
+            stableCursor++;
+        }
+        else if (moved) {
+            _pushHostOperationPlaceElement(nextChild, {
+                parentReference,
+                renderRuntime,
+                rightSibling: getRightSibling(nextChild),
+            });
+        }
+        _pushPatchEnterFrame(nextChild, {
+            ...base,
+            prevElement: prevChild,
+            rightSibling: null,
+        });
+    }
+    pushSuffixPatches();
+}

package/core/portal.d.ts

@@ -1,2 +1,2 @@
-import type { SimpElement, SimpNode } from './createElement.js';
+import { type SimpElement, type SimpNode } from './createElement.js';
 export declare function createPortal(children: SimpNode, container: any): SimpElement;

package/core/portal.js

@@ -1,9 +1,19 @@
-import { normalizeRoot } from './createElement.js';
+import { normalizeRoot, SIMP_ELEMENT_CHILD_FLAG_UNKNOWN, SIMP_ELEMENT_FLAG_PORTAL, } from './createElement.js';
 export function createPortal(children, container) {
-    const element = { flag: 'PORTAL', parent: null };
-    if ((children = normalizeRoot(children, false))) {
-        element.children = children;
-    }
-    element.ref = container;
-    return element;
+    return normalizeRoot({
+        flag: SIMP_ELEMENT_FLAG_PORTAL,
+        childFlag: SIMP_ELEMENT_CHILD_FLAG_UNKNOWN,
+        parent: null,
+        key: null,
+        type: null,
+        props: null,
+        children: null,
+        className: null,
+        reference: null,
+        store: null,
+        context: null,
+        ref: container,
+        unmounted: null,
+        index: 0,
+    }, children, false);
 }

package/core/processStack.d.ts

@@ -0,0 +1,69 @@
+import type { Maybe, Nullable } from '../shared/index.js';
+import type { SimpElement } from './createElement.js';
+import type { SimpRenderRuntime } from './runtime.js';
+export declare const MOUNT_ENTER = 1;
+export declare const MOUNT_EXIT = 2;
+export declare const PATCH_ENTER = 3;
+export declare const PATCH_EXIT = 4;
+export declare const PATCH_CHILDREN = 5;
+export declare const PATCH_KEYED_CHILDREN = 6;
+export declare const UNMOUNT_ENTER = 7;
+export declare const UNMOUNT_EXIT = 8;
+export declare const HOST_OPS_PLACE_ELEMENT_BEFORE_ANCHOR = 9;
+export declare const HOST_OPS_REPLACE_CHILD = 10;
+export interface MountFrameMeta {
+    parentReference: unknown;
+    rightSibling: Nullable<SimpElement>;
+    context: unknown;
+    hostNamespace: Maybe<string>;
+    renderRuntime: SimpRenderRuntime;
+    placeHolderElement: Nullable<SimpElement>;
+}
+export interface PatchFrameMeta extends MountFrameMeta {
+    prevElement: SimpElement;
+}
+export interface UnmountFrameMeta {
+    renderRuntime: SimpRenderRuntime;
+}
+export interface PlaceElementFrameMeta {
+    parentReference: unknown;
+    rightSibling: Nullable<SimpElement>;
+    renderRuntime: SimpRenderRuntime;
+}
+export interface ReplaceElementFrameMeta {
+    parentReference: unknown;
+    prevElement: SimpElement;
+}
+export interface MountFrame {
+    node: SimpElement;
+    kind: typeof MOUNT_ENTER | typeof MOUNT_EXIT;
+    meta: MountFrameMeta;
+}
+export interface PatchFrame {
+    node: SimpElement;
+    kind: typeof PATCH_ENTER | typeof PATCH_EXIT;
+    meta: PatchFrameMeta;
+}
+export interface PatchChildrenFrame {
+    node: SimpElement;
+    kind: typeof PATCH_CHILDREN | typeof PATCH_KEYED_CHILDREN;
+    meta: PatchFrameMeta;
+}
+export interface UnmountFrame {
+    node: SimpElement;
+    kind: typeof UNMOUNT_ENTER | typeof UNMOUNT_EXIT;
+    meta: UnmountFrameMeta;
+}
+export interface PlaceElementFrame {
+    node: SimpElement;
+    kind: typeof HOST_OPS_PLACE_ELEMENT_BEFORE_ANCHOR;
+    meta: PlaceElementFrameMeta;
+}
+export interface ReplaceElementFrame {
+    node: SimpElement;
+    kind: typeof HOST_OPS_REPLACE_CHILD;
+    meta: ReplaceElementFrameMeta;
+}
+export type SimpRenderFrame = MountFrame | PatchFrame | PatchChildrenFrame | UnmountFrame | PlaceElementFrame | ReplaceElementFrame;
+export type SimpRenderStack = SimpRenderFrame[];
+export declare function processStack(renderRuntime: SimpRenderRuntime): void;

package/core/processStack.js

@@ -0,0 +1,63 @@
+import { _mount } from './mounting.js';
+import { _patch } from './patching.js';
+import { _patchChildren, _patchKeyedChildren } from './patchingChildren.js';
+import { _unmount } from './unmounting.js';
+import { placeElementBeforeAnchor, resolveAnchorReference } from './utils.js';
+export const MOUNT_ENTER = 1;
+export const MOUNT_EXIT = 2;
+export const PATCH_ENTER = 3;
+export const PATCH_EXIT = 4;
+export const PATCH_CHILDREN = 5;
+export const PATCH_KEYED_CHILDREN = 6;
+export const UNMOUNT_ENTER = 7;
+export const UNMOUNT_EXIT = 8;
+export const HOST_OPS_PLACE_ELEMENT_BEFORE_ANCHOR = 9;
+export const HOST_OPS_REPLACE_CHILD = 10;
+export function processStack(renderRuntime) {
+    const stack = renderRuntime.renderStack;
+    while (stack.length > 0) {
+        const frame = stack.pop();
+        switch (frame.kind) {
+            case MOUNT_ENTER: {
+                _mount(frame);
+                break;
+            }
+            case MOUNT_EXIT: {
+                _mount(frame);
+                break;
+            }
+            case PATCH_ENTER: {
+                _patch(frame);
+                break;
+            }
+            case PATCH_EXIT: {
+                _patch(frame);
+                break;
+            }
+            case PATCH_CHILDREN: {
+                _patchChildren(frame);
+                break;
+            }
+            case PATCH_KEYED_CHILDREN: {
+                _patchKeyedChildren(frame);
+                break;
+            }
+            case UNMOUNT_ENTER: {
+                _unmount(frame);
+                break;
+            }
+            case UNMOUNT_EXIT: {
+                _unmount(frame);
+                break;
+            }
+            case HOST_OPS_PLACE_ELEMENT_BEFORE_ANCHOR: {
+                const anchor = resolveAnchorReference(frame.meta.rightSibling);
+                placeElementBeforeAnchor(frame.node, anchor, frame.meta.parentReference, renderRuntime);
+                break;
+            }
+            case HOST_OPS_REPLACE_CHILD: {
+                renderRuntime.hostAdapter.replaceChild(frame.meta.parentReference, frame.node.reference, frame.meta.prevElement.reference);
+            }
+        }
+    }
+}

package/core/ref.d.ts

@@ -1,9 +1,10 @@
+import type { Nullable } from '../shared/index.js';
 import type { SimpElement } from './createElement.js';
 interface RefSimpElement extends SimpElement {
-    ref?: {
+    ref: Nullable<{
         value: NonNullable<Ref<unknown>>;
-        cleanup?: () => void;
-    };
+        cleanup: Nullable<() => void>;
+    }>;
 }
 export type RefObject<T> = {
     current: T;

package/core/rerender.d.ts

@@ -1,14 +1,4 @@
-import type { SimpElement, SimpElementStore } from './createElement.js';
-export declare function rerender(element: SimpElement): void;
-interface IRendererLocker {
-    _isLocked: boolean;
-    _elementStores: Set<SimpElementStore>;
-    _last: SimpElementStore | undefined;
-    _track(element: SimpElementStore): void;
-    _untrack(element: SimpElementStore): void;
-    lock(): void;
-    flush(): void;
-}
-export declare const batchingRerenderLocker: IRendererLocker;
-export declare const renderingRerenderLocker: IRendererLocker;
-export {};
+import type { SimpElementStore } from './createElement.js';
+import type { SimpRenderRuntime } from './runtime.js';
+export declare function rerender(store: SimpElementStore, renderRuntime: SimpRenderRuntime): void;
+export declare function withSyncRerender(renderRuntime: SimpRenderRuntime, callback: () => void): void;