@faiwer/react 0.8.0

package/README.md

@@ -0,0 +1,90 @@
+## What is it?
+
+A naive React implementation. Why? What's wrong with the existing one? Nothing. I just wanted to implement it from scratch by myself. It can be used as a drop-in replacement for some simple React apps. May require some trivial changes, though.
+
+## It supports
+
+- JSX
+- Functional components
+- Hooks:
+  - `useState`
+  - `useRef`
+  - `useMemo`, `useCallback`
+  - `useStableCallback` (better version of `useEffectEvent`)
+  - `useLayoutEffect`, `useEffect` (improved versions)
+  - `useId`
+  - `useContext`
+- Tag-based refs
+- Context
+- Portals
+- Fragments
+
+## Installation
+
+- `npm i --save @faiwer/react`
+- Update your `tsconfig.json`:
+  ```json
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@faiwer/react"
+  }
+  ```
+
+### Usage
+
+To mount an app:
+
+```tsx
+const container = document.getElementById('root');
+createRoot(container).render(<App />);
+```
+
+## TODO
+
+- 1st line
+  - Support tag-`style` attribute
+  - Events:
+    - "capture"-kind of events
+    - camelCase events
+    - custom `onChange` like in ReactDOM
+  - Error handling
+  - Direct component refs, `forwardRef`, `useImperativeHandle`
+- 2nd line
+  - prepare an NPM-package
+- 3rd line
+  - `RunComponent` is not pure. Some hooks change the state during the rendering phase. Fix it.
+  - `useReducer`
+
+## It does NOT support
+
+… and probably never will:
+
+- Class Components
+- Synthetic events
+- Portals:
+  - Event bubbling from portals
+  - Rendering multiple portals in the same DOM node
+- `memo` (because components are memoized by default)
+- Some less popular tools
+  - `useInsertionEffect`
+  - `useOptimistic` (could be polyfilled)
+  - `useDeferredValue` (could be polyfilled)
+  - `useDebugValue` (dev tools are not supported)
+  - `<StrictMode/>`.
+  - `<Profiler/>`.
+  - `preconnect`, `prefetchDNS`, `preinit`, `preinitModule`, `preload`, `preloadModule`
+- Modern stuff:
+  - `useTransition`, `startTransition`
+  - `<Suspense/>`, `lazy`.
+- Form-based hooks (like `useActionState`, `useFormStatus`)
+- React Dev Tools. Just take a look at `__REACT_DEVTOOLS_GLOBAL_HOOK__`, it's huge. E.g., it has `reactDevtoolsAgent`, a class with 20-30 methods…
+- `flushSync` (not supported by the engine)
+- SSR
+
+## Major differences
+
+- It renders HTML-comment for nullable nodes and some fragments. Why? It helps a lot to keep the reconciliation algorithm simple. Took this idea from Angular.
+- No synthetic events. I don't see any reason to implement them.
+- All components are memoized by default. Why not?
+- No custom DOM-related code. This library is supposed to be simple and silly. Whereas React-DOM lib is huge.
+- No modern fiber-driven stuff like `<Suspense>`, `cacheSignal`, or `use`. Too much work. It took React many years to cook it well :)

package/dist/core/actions/applyAction.d.ts

@@ -0,0 +1,11 @@
+import type { Action } from '../../types/actions';
+/**
+ * The commit phase of the rendering process contains two parts:
+ * - Applying DOM changes
+ * - Running effects
+ *
+ * DOM changes are described in actions. This function applies the given action
+ * to the DOM and updates the bound fiber node accordingly.
+ */
+export declare const applyAction: (action: Action) => void;
+//# sourceMappingURL=applyAction.d.ts.map

package/dist/core/actions/applyAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyAction.d.ts","sourceRoot":"","sources":["../../../src/core/actions/applyAction.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAYzD;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,0BAGvB,CAAC"}

package/dist/core/actions/applyAction.js

@@ -0,0 +1,35 @@
+import { createTagAction } from './createTag.action';
+import { createTextAction } from './createText.action';
+import { createCommentAction } from './createComment.action';
+import { setPropsAction } from './setProps.action';
+import { setRefAction } from './setRef.action';
+import { setAttrAction } from './setAttr.action';
+import { setTextAction } from './setText.action';
+import { removeAction } from './remove.action';
+import { replaceAction } from './replace.action';
+import { relayoutAction } from './relayout.action';
+/**
+ * The commit phase of the rendering process contains two parts:
+ * - Applying DOM changes
+ * - Running effects
+ *
+ * DOM changes are described in actions. This function applies the given action
+ * to the DOM and updates the bound fiber node accordingly.
+ */
+export const applyAction = (action) => {
+    // @ts-ignore -- too complex type.
+    actionHandlers[action.type](action.fiber, action);
+};
+const actionHandlers = {
+    CreateTag: createTagAction,
+    CreateText: createTextAction,
+    CreateComment: createCommentAction,
+    SetProps: setPropsAction,
+    SetRef: setRefAction,
+    SetAttr: setAttrAction,
+    SetText: setTextAction,
+    Remove: removeAction,
+    Replace: replaceAction,
+    Relayout: relayoutAction,
+};
+//# sourceMappingURL=applyAction.js.map

package/dist/core/actions/applyAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyAction.js","sourceRoot":"","sources":["../../../src/core/actions/applyAction.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAc,EAAQ,EAAE,CAAC;IACnD,kCAAkC;IAClC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,MAAa,CAAC,CAAC;AAAA,CAC1D,CAAC;AAEF,MAAM,cAAc,GAKhB;IACF,SAAS,EAAE,eAAe;IAC1B,UAAU,EAAE,gBAAgB;IAC5B,aAAa,EAAE,mBAAmB;IAClC,QAAQ,EAAE,cAAc;IACxB,MAAM,EAAE,YAAY;IACpB,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,OAAO,EAAE,aAAa;IACtB,QAAQ,EAAE,cAAc;CACzB,CAAC"}

package/dist/core/actions/createComment.action.d.ts

@@ -0,0 +1,7 @@
+import type { FiberNode } from '../../types';
+import type { CreateCommentAction } from '../../types/actions';
+/**
+ * Creates a new comment DOM node (<!--r:${mode}:${fiber.id}-->).
+ */
+export declare function createCommentAction(fiber: FiberNode, { mode }: CreateCommentAction): void;
+//# sourceMappingURL=createComment.action.d.ts.map

package/dist/core/actions/createComment.action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createComment.action.d.ts","sourceRoot":"","sources":["../../../src/core/actions/createComment.action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAKtE;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,SAAS,EAChB,EAAE,IAAI,EAAE,EAAE,mBAAmB,QAc9B"}

package/dist/core/actions/createComment.action.js

@@ -0,0 +1,20 @@
+import { getParentElement } from './helpers';
+import { tryToCompactNode } from '../compact';
+import { buildComment } from '../reconciliation/comments';
+/**
+ * Creates a new comment DOM node (<!--r:${mode}:${fiber.id}-->).
+ */
+export function createCommentAction(fiber, { mode }) {
+    // Only two scenarios lead here:
+    // - First render of a fragment or component. The parent's element is a
+    //   comment `r:begin:{id}`
+    // - Render of a portal. The parent element is the portal target node.
+    fiber.element = buildComment(mode, fiber.id);
+    getParentElement(fiber).appendChild(fiber.element);
+    if (mode === 'end') {
+        // All children are added. If the current fiber is the only child, we can
+        // compact the parent node: "<!--begin-->child<!--end-->" -> "child".
+        tryToCompactNode(fiber);
+    }
+}
+//# sourceMappingURL=createComment.action.js.map

package/dist/core/actions/createComment.action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createComment.action.js","sourceRoot":"","sources":["../../../src/core/actions/createComment.action.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D;;GAEG;AACH,MAAM,UAAU,mBAAmB,CACjC,KAAgB,EAChB,EAAE,IAAI,EAAuB,EAC7B;IACA,gCAAgC;IAChC,uEAAuE;IACvE,2BAA2B;IAC3B,sEAAsE;IACtE,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IAC7C,gBAAgB,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEnD,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;QACnB,yEAAyE;QACzE,qEAAqE;QACrE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;AAAA,CACF"}

package/dist/core/actions/createTag.action.d.ts

@@ -0,0 +1,10 @@
+import type { FiberNode } from '../../types';
+/**
+ * Handles two scenarios:
+ * - Creates a <!--r:portal:id--> comment for portal fibers
+ * - Creates a new tag DOM element for tag fibers
+ *
+ * This doesn't create child nodes or set attributes/event handlers.
+ */
+export declare function createTagAction(fiber: FiberNode): void;
+//# sourceMappingURL=createTag.action.d.ts.map

package/dist/core/actions/createTag.action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTag.action.d.ts","sourceRoot":"","sources":["../../../src/core/actions/createTag.action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAgBtD"}

package/dist/core/actions/createTag.action.js

@@ -0,0 +1,27 @@
+import { getParentElement } from './helpers';
+import { applyAction } from './applyAction';
+/**
+ * Handles two scenarios:
+ * - Creates a <!--r:portal:id--> comment for portal fibers
+ * - Creates a new tag DOM element for tag fibers
+ *
+ * This doesn't create child nodes or set attributes/event handlers.
+ */
+export function createTagAction(fiber) {
+    if (fiber.type !== 'tag') {
+        throw new Error(`createTagAction supports only tag-fiber-nodes.`);
+    }
+    if (fiber.data instanceof HTMLElement) {
+        // This is a portal, not a regular tag. We shouldn't create it since it
+        // already exists outside the app's DOM subtree. Instead, create a
+        // <!--r:portal:id--> comment node.
+        applyAction({ type: 'CreateComment', fiber, mode: 'portal' });
+    }
+    else if (fiber.tag !== 'root') {
+        // 'root' is a special case - it's the node where the app is mounted.
+        const tag = document.createElement(fiber.tag);
+        fiber.element = tag;
+        getParentElement(fiber).appendChild(fiber.element);
+    }
+}
+//# sourceMappingURL=createTag.action.js.map

package/dist/core/actions/createTag.action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTag.action.js","sourceRoot":"","sources":["../../../src/core/actions/createTag.action.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,KAAgB,EAAQ;IACtD,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;QACzB,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;IACpE,CAAC;IAED,IAAI,KAAK,CAAC,IAAI,YAAY,WAAW,EAAE,CAAC;QACtC,uEAAuE;QACvE,kEAAkE;QAClE,mCAAmC;QACnC,WAAW,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;IAChE,CAAC;SAAM,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC;QAChC,qEAAqE;QACrE,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC9C,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;QACpB,gBAAgB,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC;AAAA,CACF"}

package/dist/core/actions/createText.action.d.ts

@@ -0,0 +1,6 @@
+import type { FiberNode } from '../../types';
+/**
+ * Creates a new text DOM node.
+ */
+export declare function createTextAction(fiber: FiberNode): void;
+//# sourceMappingURL=createText.action.d.ts.map

package/dist/core/actions/createText.action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createText.action.d.ts","sourceRoot":"","sources":["../../../src/core/actions/createText.action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGpD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,SAAS,QAWhD"}

package/dist/core/actions/createText.action.js

@@ -0,0 +1,16 @@
+import { getParentElement } from './helpers';
+/**
+ * Creates a new text DOM node.
+ */
+export function createTextAction(fiber) {
+    if (fiber.type !== 'text') {
+        throw new Error(`Can't apply CreateText for a ${fiber.type} node`);
+    }
+    // Only two scenarios lead here:
+    // - First render of a fragment or component. The parent's element is
+    //   a comment `r:begin:{id}`
+    // - Render of a portal. The parent element is the portal target node.
+    fiber.element = new Text(fiber.props.text);
+    getParentElement(fiber).appendChild(fiber.element);
+}
+//# sourceMappingURL=createText.action.js.map

package/dist/core/actions/createText.action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createText.action.js","sourceRoot":"","sources":["../../../src/core/actions/createText.action.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAE7C;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAgB,EAAE;IACjD,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,gCAAgC,KAAK,CAAC,IAAI,OAAO,CAAC,CAAC;IACrE,CAAC;IAED,gCAAgC;IAChC,qEAAqE;IACrE,6BAA6B;IAC7B,sEAAsE;IACtE,KAAK,CAAC,OAAO,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC3C,gBAAgB,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AAAA,CACpD"}

package/dist/core/actions/helpers.d.ts

@@ -0,0 +1,43 @@
+import type { DomNode, FiberNode, Ref, RefSetter } from '../../types';
+/**
+ * Determines if a prop name represents an event handler by checking if it
+ * starts with "on". This follows React's convention where any prop beginning
+ * with "on" is treated as an event listener rather than a regular DOM
+ * attribute.
+ *
+ * While HTML technically allows non-event attributes starting with "on", no
+ * such attributes could be found in practice. React filters out all "on*" props
+ * as event handlers, and this implementation follows the same pattern for
+ * consistency.
+ */
+export declare const isEventName: (name: string) => boolean;
+/**
+ * Returns the DOM container for the given fiber node. This isn't always the
+ * direct parent's element since the parent might be a compact node or a
+ * fragment-like range (<!--begin|end-->), or it could be a portal node.
+ */
+export declare const getParentElement: (fiber: FiberNode) => Element;
+/**
+ * Finds the anchor node for attaching other nodes. There are two scenarios:
+ * 1) [element, null] - the new node should be added to the beginning of the
+ *    element;
+ * 2) [element, child] - the new node should be added right after `child`.
+ */
+export declare const getAnchor: (fiber: FiberNode) => [Element, Node | null];
+/**
+ * Returns all direct DOM nodes associated with the given fiber. This isn't
+ * always a single node since components and fragments may be in expanded state
+ * (<!--begin--> + content + <!--end-->).
+ */
+export declare const getFiberDomNodes: (fiber: FiberNode) => DomNode[];
+/**
+ * When a node leaves the DOM tree, we need to update all associated ref
+ * objects and ref handlers.
+ */
+export declare const unsetRef: <T>(ref: Ref<T | null> | RefSetter<T | null>) => void;
+/**
+ * To help avoid memory leaks, this method removes fiber properties that
+ * can hold references to other objects.
+ */
+export declare const emptyFiberNode: (fiber: FiberNode) => void;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/core/actions/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/core/actions/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAM7E;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,2BAAmD,CAAC;AAE5E;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,+BAa5B,CAAC;AA6BF;;;;;GAKG;AACH,eAAO,MAAM,SAAS,8CAiCrB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,iCAwB5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,mDAMzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,4BAQ1B,CAAC"}

package/dist/core/actions/helpers.js

@@ -0,0 +1,141 @@
+import { nullthrows } from '../../utils';
+import { isBeginOf, isCompactNone, isCompactSingleChild } from '../compact';
+import { NULL_FIBER } from '../reconciliation/fibers';
+import { buildCommentText } from '../reconciliation/comments';
+/**
+ * Determines if a prop name represents an event handler by checking if it
+ * starts with "on". This follows React's convention where any prop beginning
+ * with "on" is treated as an event listener rather than a regular DOM
+ * attribute.
+ *
+ * While HTML technically allows non-event attributes starting with "on", no
+ * such attributes could be found in practice. React filters out all "on*" props
+ * as event handlers, and this implementation follows the same pattern for
+ * consistency.
+ */
+export const isEventName = (name) => name.startsWith('on');
+/**
+ * Returns the DOM container for the given fiber node. This isn't always the
+ * direct parent's element since the parent might be a compact node or a
+ * fragment-like range (<!--begin|end-->), or it could be a portal node.
+ */
+export const getParentElement = (fiber) => {
+    while (fiber.parent.type === 'component' ||
+        fiber.parent.type === 'fragment') {
+        fiber = fiber.parent; // Has to be "tag".
+    }
+    if (fiber.parent.data instanceof HTMLElement) {
+        return fiber.parent.data; // Portal.
+    }
+    return nullthrows(fiber.parent?.element);
+};
+/**
+ * Finds the !--begin comment for the given !--end comment.
+ */
+const getBeginComment = (fiber) => {
+    let node = asComment(fiber.element).previousSibling;
+    const text = buildCommentText('begin', fiber.id);
+    while (!(node instanceof Comment) || node.textContent !== text)
+        node = nullthrows(node.previousSibling);
+    return node;
+};
+const asElement = (node) => {
+    if (!(node instanceof Element)) {
+        throw new Error(`node is not element`);
+    }
+    return node;
+};
+const asComment = (node) => {
+    if (!(node instanceof Comment)) {
+        throw new Error(`node is not comment`);
+    }
+    return node;
+};
+/**
+ * Finds the anchor node for attaching other nodes. There are two scenarios:
+ * 1) [element, null] - the new node should be added to the beginning of the
+ *    element;
+ * 2) [element, child] - the new node should be added right after `child`.
+ */
+export const getAnchor = (fiber) => {
+    if (fiber.type === 'tag') {
+        return [
+            asElement(fiber.data instanceof HTMLElement
+                ? fiber.data // Portal's `element` is !--r:portal
+                : fiber.element),
+            null,
+        ];
+    }
+    if (fiber.type === 'component' || fiber.type === 'fragment') {
+        if (isCompactSingleChild(fiber)) {
+            throw new Error(`Solo-compact fibers cannot be used as an anchor`);
+        }
+        if (isCompactNone(fiber)) {
+            throw new Error(`Cannot use !--empty node as an anchor`);
+        }
+        // E.g.
+        // <div>
+        //   <something/>
+        //   <!--r:begin:1--> // a component or a fragment
+        //   … // the content of the `fiber`
+        //   <!--r:end:1-->
+        //   <something/>
+        return [getParentElement(fiber), getBeginComment(fiber)];
+    }
+    // "text" & "null" types cannot contain children.
+    throw new Error(`Unsupported anchor type: ${fiber.type}`);
+};
+/**
+ * Returns all direct DOM nodes associated with the given fiber. This isn't
+ * always a single node since components and fragments may be in expanded state
+ * (<!--begin--> + content + <!--end-->).
+ */
+export const getFiberDomNodes = (fiber) => {
+    switch (fiber.type) {
+        case 'component':
+        case 'fragment': {
+            if (isCompactSingleChild(fiber) || isCompactNone(fiber)) {
+                return [fiber.element];
+            }
+            // Collect [!--begin, …content, !--end]:
+            const list = [nullthrows(fiber.element)];
+            let prev = nullthrows(list[0].previousSibling);
+            while (prev && !isBeginOf(prev, fiber)) {
+                list.push(prev);
+                prev = nullthrows(prev.previousSibling);
+            }
+            list.push(prev);
+            return list.reverse();
+        }
+        case 'null':
+        case 'tag':
+        case 'text':
+            return [nullthrows(fiber.element)];
+    }
+};
+/**
+ * When a node leaves the DOM tree, we need to update all associated ref
+ * objects and ref handlers.
+ */
+export const unsetRef = (ref) => {
+    if (typeof ref === 'function') {
+        ref(null);
+    }
+    else {
+        ref.current = null;
+    }
+};
+/**
+ * To help avoid memory leaks, this method removes fiber properties that
+ * can hold references to other objects.
+ */
+export const emptyFiberNode = (fiber) => {
+    fiber.data = null;
+    fiber.element = null;
+    fiber.component = null;
+    fiber.children = [];
+    fiber.props = null;
+    fiber.ref = null;
+    fiber.parent = NULL_FIBER;
+};
+//# sourceMappingURL=helpers.js.map

package/dist/core/actions/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/core/actions/helpers.ts"],"names":[],"mappings":"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"}

package/dist/core/actions/relayout.action.d.ts

@@ -0,0 +1,20 @@
+import type { FiberNode } from '../../types';
+import type { RelayoutAction } from '../../types/actions';
+/**
+ * Handles fiber tree layout updates when children have been modified. This
+ * action is triggered when:
+ * - A direct child was removed or replaced
+ * - Child order changed (for keyed children)
+ * - A new child was added
+ *
+ * The relayout process:
+ * - Moves new children from temporary containers (`<x-container/>`) to their
+ *   final DOM position
+ * - Repositions existing children to match the new order
+ * - Updates the fiber's children array to reflect the new structure
+ *
+ * Note: This action only handles positioning and insertion. All node removals
+ * must be completed before this action runs.
+ */
+export declare function relayoutAction(fiber: FiberNode, { before, after }: RelayoutAction): void;
+//# sourceMappingURL=relayout.action.d.ts.map

package/dist/core/actions/relayout.action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relayout.action.d.ts","sourceRoot":"","sources":["../../../src/core/actions/relayout.action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAUjE;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,SAAS,EAChB,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,cAAc,QAuClC"}

package/dist/core/actions/relayout.action.js

@@ -0,0 +1,113 @@
+import { isCompactNone, isCompactSingleChild, tryToCompactNode, unwrapCompactFiber, } from '../compact';
+import { getAnchor, getFiberDomNodes } from './helpers';
+import { nullthrows } from '../../utils';
+/**
+ * Handles fiber tree layout updates when children have been modified. This
+ * action is triggered when:
+ * - A direct child was removed or replaced
+ * - Child order changed (for keyed children)
+ * - A new child was added
+ *
+ * The relayout process:
+ * - Moves new children from temporary containers (`<x-container/>`) to their
+ *   final DOM position
+ * - Repositions existing children to match the new order
+ * - Updates the fiber's children array to reflect the new structure
+ *
+ * Note: This action only handles positioning and insertion. All node removals
+ * must be completed before this action runs.
+ */
+export function relayoutAction(fiber, { before, after }) {
+    if (after.size > 0) {
+        // If `fiber` is in compact mode we may need to unwrap it.
+        expandFiberWhenNeeded(fiber, after);
+    }
+    if (after.size > 0) {
+        // Determine what can be used as a starting point for inserting new children.
+        // If `prev` is `null`, new nodes should be added to the beginning.
+        // Otherwise, add them right after the `prev` node.
+        let [container, prev] = getAnchor(fiber);
+        for (const [key, r] of after) {
+            const l = before.get(key);
+            if (!l) {
+                // No nodes from `left` correlate with this node from `right`.
+                // Consider it a brand new node and put it at the current position.
+                prev = insertNewFiber(fiber, container, prev, r.fiber);
+            }
+            else {
+                // Keep DOM nodes from the previous render. Any requested updates for
+                // them are already applied, but we might need to reposition them
+                // within their parent.
+                prev = repositionFiberWhenNeeded(l.fiber, container, prev);
+            }
+        }
+    }
+    // Replace fiber.children with fibers from the `after` set.
+    // Skip any nodes whose keys exist in `before`, since those are either
+    // unchanged or already updated (their `after` entries served only as
+    // references for the update process).
+    fiber.children = [...after.keys()].map((key) => nullthrows(before.get(key) ?? after.get(key)).fiber);
+    // If `fiber` has 0 or 1 DOM children, we can remove <!--begin|end--> brackets.
+    tryToCompactNode(fiber);
+}
+/**
+ * If the given fiber (a container) is in the compact mode we might need to
+ * unwrap it.
+ */
+const expandFiberWhenNeeded = (fiber, after) => {
+    if (isCompactNone(fiber)) {
+        // Case 1: it's <!--empty-->. It can't have children, so fix it.
+        unwrapCompactFiber(fiber);
+    }
+    else if (isCompactSingleChild(fiber)) {
+        if (after.size > 1) {
+            // Case 2: It's in "single child" mode. Fix it to support multiple children.
+            unwrapCompactFiber(fiber);
+        }
+        else {
+            throw new Error(`Invalid state: "remove" action didn't unwrap the parent container node during deletion of the only child`);
+        }
+    }
+};
+/**
+ * Puts the given `child` DOM nodes into the `parent`'s DOM area at the anchor
+ * position (`container` + `prev`). Updates the `child`'s parent node.
+ */
+const insertNewFiber = (parent, container, prev, child) => {
+    const newChildren = [...child.parent.element.childNodes];
+    if (!prev) {
+        container.prepend(...newChildren);
+        prev = nullthrows(newChildren.at(-1));
+    }
+    else {
+        for (const n of newChildren) {
+            container.insertBefore(n, prev.nextSibling);
+            prev = n;
+        }
+    }
+    child.parent = parent; // <x-container/> -> real parent.
+    return prev;
+};
+/**
+ * Repositioning is needed in such situations:
+ * - before: <a/><b/><c key="c"/> -> <c key="c"/><a/><b/>.
+ */
+const repositionFiberWhenNeeded = (fiber, container, prev) => {
+    const nodes = getFiberDomNodes(fiber);
+    if (nodes[0].previousSibling !== prev) {
+        for (const n of nodes) {
+            if (!prev) {
+                // Couldn't find a way to test this, because even without this move the
+                // following `repositionFiberWhenNeeded` will heal this gap. Anyway,
+                // it seems right to keep it.
+                container.prepend(n);
+            }
+            else {
+                container.insertBefore(n, prev.nextSibling);
+            }
+            prev = n;
+        }
+    }
+    return nullthrows(fiber.element);
+};
+//# sourceMappingURL=relayout.action.js.map

package/dist/core/actions/relayout.action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"relayout.action.js","sourceRoot":"","sources":["../../../src/core/actions/relayout.action.ts"],"names":[],"mappings":"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"}

package/dist/core/actions/remove.action.d.ts

@@ -0,0 +1,7 @@
+import type { FiberNode } from '../../types';
+/**
+ * This action can be called directly (<div/> -> []), or indirectly (<div/> ->
+ * false) from the replace action. `replaced` is `true` in the 2nd scenario.
+ */
+export declare function removeAction(fiber: FiberNode): void;
+//# sourceMappingURL=remove.action.d.ts.map

package/dist/core/actions/remove.action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remove.action.d.ts","sourceRoot":"","sources":["../../../src/core/actions/remove.action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,SAAS,EAEV,MAAM,oBAAoB,CAAC;AAK5B;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,QAkC5C"}