@faiwer/react 0.8.3 → 0.9.0

package/dist/core/actions/dom/events.js

@@ -0,0 +1,45 @@
+import { ReactError } from '../../../core/reconciliation/errors/ReactError';
+export const setEventHandler = (fiber, element, name, value) => {
+    const { events } = fiber.data;
+    if (value == null || value === false) {
+        if (events[name]) {
+            // Event handler was added before but now it's removed.
+            events[name].handler = null;
+        }
+        return;
+    }
+    if (typeof value !== 'function') {
+        throw new ReactError(fiber, `Unsupported format of event handler. It has to be "undefined" or a function`);
+    }
+    // Instead of adding and removing event handlers on every render, we can add a
+    // wrapper that calls `events[name]` and update only the internal
+    // function when it changes.
+    if (!events[name]) {
+        const capture = name.endsWith('Capture');
+        let eventName = name.slice(2).toLowerCase(); // onClick -> click.
+        if (capture) {
+            eventName = eventName.slice(0, eventName.length - 7);
+        }
+        if (eventName === 'change' &&
+            (fiber.tag === 'input' ||
+                fiber.tag === 'textarea' ||
+                fiber.tag === 'select')) {
+            eventName = 'input'; // Custom behavior. @see `./value.ts`.
+        }
+        events[name] = {
+            name: eventName,
+            handler: value,
+            capture,
+            wrapper: (event) => {
+                // Original React doesn't support stopping propagation on `false` return.
+                events[name].handler?.(event);
+            },
+        };
+        element.addEventListener(eventName, events[name].wrapper, { capture });
+    }
+    else {
+        // The tag is already listening to this event. Just update the internal ref.
+        events[name].handler = value;
+    }
+};
+//# sourceMappingURL=events.js.map

package/dist/core/actions/dom/events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../../src/core/actions/dom/events.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,oDAAoD,CAAC;AAGhF,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,KAAmB,EACnB,OAAgB,EAChB,IAAY,EACZ,KAAmB,EACb,EAAE,CAAC;IACT,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IAE9B,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;QACrC,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;YACjB,uDAAuD;YACvD,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;QAC9B,CAAC;QACD,OAAO;IACT,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,UAAU,CAClB,KAAK,EACL,6EAA6E,CAC9E,CAAC;IACJ,CAAC;IAED,8EAA8E;IAC9E,iEAAiE;IACjE,4BAA4B;IAC5B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;QAClB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;QACzC,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,oBAAoB;QACjE,IAAI,OAAO,EAAE,CAAC;YACZ,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACvD,CAAC;QAED,IACE,SAAS,KAAK,QAAQ;YACtB,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO;gBACpB,KAAK,CAAC,GAAG,KAAK,UAAU;gBACxB,KAAK,CAAC,GAAG,KAAK,QAAQ,CAAC,EACzB,CAAC;YACD,SAAS,GAAG,OAAO,CAAC,CAAC,sCAAsC;QAC7D,CAAC;QAED,MAAM,CAAC,IAAI,CAAC,GAAG;YACb,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,KAAK;YACd,OAAO;YACP,OAAO,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC;gBACzB,yEAAyE;gBACzE,MAAM,CAAC,IAAI,CAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;YAAA,CAChC;SACF,CAAC;QACF,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;IACzE,CAAC;SAAM,CAAC;QACN,4EAA4E;QAC5E,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC;IAC/B,CAAC;AAAA,CACF,CAAC"}

package/dist/core/actions/dom/svg.d.ts

@@ -0,0 +1,7 @@
+/**
+ * SVG is weird. Some of the attributes are in camelCase, and some are in
+ * kebab-case. This methods takes into account SVG-based nuances and sets the
+ * given attribute in the right way.
+ */
+export declare const setSvgAttribute: (element: SVGElement, name: string, value: string) => void;
+//# sourceMappingURL=svg.d.ts.map

package/dist/core/actions/dom/svg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.d.ts","sourceRoot":"","sources":["../../../../src/core/actions/dom/svg.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,eAAe,4DAW3B,CAAC"}

package/dist/core/actions/dom/svg.js

@@ -0,0 +1,76 @@
+/**
+ * SVG is weird. Some of the attributes are in camelCase, and some are in
+ * kebab-case. This methods takes into account SVG-based nuances and sets the
+ * given attribute in the right way.
+ */
+export const setSvgAttribute = (element, name, value) => {
+    if (name === 'className') {
+        name = 'class';
+    }
+    else if (!SVG_CAMEL_ATTRS.has(name)) {
+        name = name.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+    }
+    element.setAttribute(name, value);
+};
+// Most of SVG attributes are in kebab-cases. Here is the list of exclusions.
+const SVG_CAMEL_ATTRS = new Set([
+    'attributeName',
+    'repeatCount',
+    'attributeType',
+    'baseFrequency',
+    'baseProfile',
+    'calcMode',
+    'clipPathUnits',
+    'diffuseConstant',
+    'edgeMode',
+    'Experimental',
+    'filterUnits',
+    'gradientTransform',
+    'gradientUnits',
+    'kernelMatrix',
+    'kernelUnitLength',
+    'keyPoints',
+    'keySplines',
+    'keyTimes',
+    'lengthAdjust',
+    'limitingConeAngle',
+    'markerHeight',
+    'markerUnits',
+    'markerWidth',
+    'maskContentUnits',
+    'maskUnits',
+    'numOctaves',
+    'pathLength',
+    'patternContentUnits',
+    'patternTransform',
+    'patternUnits',
+    'pointsAtX',
+    'pointsAtY',
+    'pointsAtZ',
+    'preserveAlpha',
+    'preserveAspectRatio',
+    'primitiveUnits',
+    'refX',
+    'refY',
+    'repeatDur',
+    'requiredExtensions',
+    'requiredFeatures',
+    'Experimental',
+    'specularConstant',
+    'specularExponent',
+    'spreadMethod',
+    'startOffset',
+    'stdDeviation',
+    'stitchTiles',
+    'surfaceScale',
+    'systemLanguage',
+    'tableValues',
+    'targetX',
+    'targetY',
+    'textLength',
+    'viewBox',
+    'xChannelSelector',
+    'yChannelSelector',
+    'zoomAndPan',
+]);
+//# sourceMappingURL=svg.js.map

package/dist/core/actions/dom/svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.js","sourceRoot":"","sources":["../../../../src/core/actions/dom/svg.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,OAAmB,EACnB,IAAY,EACZ,KAAa,EACP,EAAE,CAAC;IACT,IAAI,IAAI,KAAK,WAAW,EAAE,CAAC;QACzB,IAAI,GAAG,OAAO,CAAC;IACjB,CAAC;SAAM,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;QACtC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;IAC9D,CAAC;IACD,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAAA,CACnC,CAAC;AAEF,6EAA6E;AAC7E,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC;IAC9B,eAAe;IACf,aAAa;IACb,eAAe;IACf,eAAe;IACf,aAAa;IACb,UAAU;IACV,eAAe;IACf,iBAAiB;IACjB,UAAU;IACV,cAAc;IACd,aAAa;IACb,mBAAmB;IACnB,eAAe;IACf,cAAc;IACd,kBAAkB;IAClB,WAAW;IACX,YAAY;IACZ,UAAU;IACV,cAAc;IACd,mBAAmB;IACnB,cAAc;IACd,aAAa;IACb,aAAa;IACb,kBAAkB;IAClB,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,qBAAqB;IACrB,kBAAkB;IAClB,cAAc;IACd,WAAW;IACX,WAAW;IACX,WAAW;IACX,eAAe;IACf,qBAAqB;IACrB,gBAAgB;IAChB,MAAM;IACN,MAAM;IACN,WAAW;IACX,oBAAoB;IACpB,kBAAkB;IAClB,cAAc;IACd,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,aAAa;IACb,cAAc;IACd,aAAa;IACb,cAAc;IACd,gBAAgB;IAChB,aAAa;IACb,SAAS;IACT,SAAS;IACT,YAAY;IACZ,SAAS;IACT,kBAAkB;IAClB,kBAAkB;IAClB,YAAY;CACb,CAAC,CAAC"}

package/dist/core/actions/dom/value.d.ts

@@ -0,0 +1,17 @@
+import type { App, TagAttrValue, TagFiberNode } from '../../../types';
+/**
+ * Original React has a very special behavior for the "onChange" event:
+ * - It treats "onChange" as an "onInput" event for form controls
+ * - If the "value" prop is provided and is not `null` or `undefined`, React
+ *   treats the input as "controlled" and ignores user changes by restoring the
+ *   original value after each input event
+ * - Even for controlled inputs, React still calls the "onChange" handler with
+ *   the updated event.target.value before restoring the previous value
+ * - React overrides the property descriptor of the "value" property on the DOM
+ *   element to intercept and track all value changes
+ */
+export declare const setValueAttr: (fiber: TagFiberNode, attrName: "checked" | "value", attrValue: TagAttrValue) => void;
+export declare const changeControlValue: (app: App, element: FormControl, attrName: "checked" | "value", valueRaw: unknown, restoreCursor?: boolean) => void;
+type FormControl = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+export {};
+//# sourceMappingURL=value.d.ts.map

package/dist/core/actions/dom/value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../../../src/core/actions/dom/value.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAI1E;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,uFAsCxB,CAAC;AAmBF,eAAO,MAAM,kBAAkB,qHAiC9B,CAAC;AA2KF,KAAK,WAAW,GAAG,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC"}

package/dist/core/actions/dom/value.js

@@ -0,0 +1,204 @@
+import { getAppByFiber } from '../../../core/reconciliation/app';
+import { scheduleEffect } from '../../../core/reconciliation/effects';
+import { nullthrowsForFiber } from '../../../core/reconciliation/errors/ReactError';
+const stores = new WeakMap();
+/**
+ * Original React has a very special behavior for the "onChange" event:
+ * - It treats "onChange" as an "onInput" event for form controls
+ * - If the "value" prop is provided and is not `null` or `undefined`, React
+ *   treats the input as "controlled" and ignores user changes by restoring the
+ *   original value after each input event
+ * - Even for controlled inputs, React still calls the "onChange" handler with
+ *   the updated event.target.value before restoring the previous value
+ * - React overrides the property descriptor of the "value" property on the DOM
+ *   element to intercept and track all value changes
+ */
+export const setValueAttr = (fiber, attrName, attrValue) => {
+    const element = fiber.element;
+    const app = getAppByFiber(fiber);
+    // We continue to reference the same `events` object even after calling
+    // `displaceFiber`, so this assumption should hold
+    const { events } = fiber.data;
+    if (!events[VALUE_EVENT]) {
+        const store = setUpStore(app, element, attrName);
+        const onInput = createOnInputHandler(app, element, attrName, store);
+        events[VALUE_EVENT] = {
+            name: 'input',
+            handler: null,
+            capture: false,
+            wrapper: onInput,
+        };
+        element.addEventListener('input', onInput, {
+            capture: events[VALUE_EVENT].capture,
+        });
+    }
+    const store = nullthrowsForFiber(fiber, stores.get(element));
+    store.prev = attrValue;
+    if (attrValue != null) {
+        store.set(attrValue, true);
+    }
+};
+const VALUE_EVENT = 'x:input';
+const setUpStore = (app, element, attrName) => {
+    const store = {
+        prev: null,
+        cursor: null,
+        set: changeControlValue.bind(null, app, element, attrName),
+    };
+    stores.set(element, store);
+    return store;
+};
+export const changeControlValue = (app, element, attrName, valueRaw, restoreCursor = false) => {
+    const value = toNativeValue(attrName, valueRaw);
+    if (element instanceof HTMLSelectElement) {
+        setSelectValue(app, element, value);
+        return;
+    }
+    if (element[attrName] === value) {
+        // Don't touch the value to avoid moving the cursor.
+        return;
+    }
+    // Non-reactively update the native value.
+    element[attrName] = value;
+    if ((element instanceof HTMLInputElement ||
+        element instanceof HTMLTextAreaElement) &&
+        attrName === 'value' &&
+        restoreCursor) {
+        const store = stores.get(element);
+        if (store.cursor != null) {
+            element.selectionStart = element.selectionEnd = store.cursor;
+        }
+    }
+};
+const createOnInputHandler = (app, element, attrName, store) => {
+    return function onInput() {
+        if (element instanceof HTMLInputElement &&
+            element.type === 'radio' &&
+            element.name) {
+            // Radio buttons require special group-based handling
+            onRadioClick(app, element);
+            return;
+        }
+        const newValue = element[attrName];
+        if (store.prev == null)
+            return; // Uncontrolled component - allow changes
+        if (store.prev === newValue)
+            return; // No actual change occurred
+        scheduleResetValueEffect(app, () => {
+            // The following render could make the control uncontrolled. In such a
+            // case we shouldn't restore the value. Now it's in free flight.
+            if (store.prev == null)
+                return;
+            if ((element instanceof HTMLInputElement ||
+                element instanceof HTMLTextAreaElement) &&
+                attrName === 'value') {
+                store.cursor = element.selectionStart;
+            }
+            // Restore the previous value since this is a controlled element
+            store.set(store.prev);
+        });
+    };
+};
+/**
+ * Radio button group handling:
+ *
+ * - Browsers don't emit "change" or "input" events for radio buttons that lose
+ *   their "checked" state when another radio in the group is selected. The
+ *   state change happens silently.
+ * - When a user selects a different radio button, the browser only emits an
+ *   "input" event for the newly selected button. The event provides no
+ *   information about which radio button was previously active.
+ * - Radio buttons form a group when they share the same "name" attribute within
+ *   their containing <form> (or document if no form exists).
+ *
+ * This function enforces React's "controlled component" behavior for radio
+ * button groups. If any radio button in the group has "checked=true", all other
+ * radio buttons in the group must have "checked=false", even if they don't
+ * explicitly define a "checked" attribute (React assumes they do).
+ */
+const onRadioClick = (app, element) => {
+    scheduleResetValueEffect(app, () => {
+        // Find all radio buttons in the same group (same name within the form)
+        const form = element.closest('form') ?? app.root.element;
+        const radios = form.querySelectorAll(`input[type="radio"]`);
+        // Look for a radio button that was previously controlled with checked=true
+        for (let i = 0; i < radios.length; ++i) {
+            const radio = radios[i];
+            if (radio.name === element.name && stores.get(radio)?.prev === true) {
+                // Restore the previously checked radio button's state, which will
+                // automatically uncheck the currently selected one. The correct state
+                // will be updated in the next render if setState was called from the
+                // user's onChange handler
+                stores.get(radio).set(true);
+                return;
+            }
+        }
+        const store = stores.get(element);
+        if (typeof store?.prev === 'boolean') {
+            // A single uncontrolled radio button with checked="false".
+            store.set(store.prev);
+        }
+    });
+};
+/**
+ * Converts React prop values to native DOM values:
+ * - value: null | undefined → '' (empty string, not "null")
+ * - checked: any value → boolean conversion
+ */
+const toNativeValue = (attrName, newValue) => attrName === 'checked'
+    ? !!newValue
+    : newValue == null
+        ? '' // not "null"
+        : Array.isArray(newValue)
+            ? newValue.map((v) => String(v))
+            : String(newValue);
+/**
+ * Schedules value restoration for controlled form elements.
+ *
+ * React maintains the value attribute for "controlled" HTML form controls,
+ * where only setState and subsequent renders can update their value. However,
+ * there's a brief window between the "onInput" event and the DOM/React render
+ * where the new value hasn't been reset yet. This function ensures the callback
+ * runs at the appropriate time to restore the controlled value.
+ */
+const scheduleResetValueEffect = (app, fn) => {
+    let executed = false;
+    requestAnimationFrame(() => {
+        if (!executed) {
+            executed = true;
+            fn();
+        }
+    });
+    scheduleEffect(app, () => {
+        if (!executed) {
+            executed = true;
+            fn();
+        }
+    }, 'afterActions');
+};
+/**
+ * <select/> & <select multiple/> are very special cases.
+ * - When it has only one item selected its behavior is similar to single-mode
+ *   selects. `value` reflects the only selected option's value.
+ * - When there is a multiple selection `value` reflects only the name of the
+ *   1st selected option, completely ignoring the rest of them.
+ *
+ * So, how do we handle it without `value`? We just need to update `selected`
+ * for each of the <option/>s.
+ */
+const setSelectValue = (app, element, value) => {
+    // Unfortunately, we can't do it right away, because:
+    // 1. on the 1st render we have no inner options here yet
+    // 2. on subsequent render the inner options may not be fully updated yet.
+    scheduleResetValueEffect(app, () => {
+        const arr = Array.isArray(value) ? value : [value];
+        const set = new Set(arr.map((v) => String(v)));
+        for (const option of element.options) {
+            const selected = set.has(option.value);
+            if (option.selected !== selected) {
+                option.selected = selected;
+            }
+        }
+    });
+};
+//# sourceMappingURL=value.js.map

package/dist/core/actions/dom/value.js.map

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

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

@@ -1,4 +1,4 @@
-import type { DomNode, FiberNode, Ref, RefSetter } from '../../types';
+import { type DomNode, type FiberNode, type TagFiberNode } 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
@@ -13,31 +13,38 @@ import type { DomNode, FiberNode, Ref, RefSetter } from '../../types';
 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.
+ * direct parent's element since the parent might be a component, a fragment, or
+ * a portal node.
  */
 export declare const getParentElement: (fiber: FiberNode) => Element;
+export declare const asElement: (node: Node | null) => 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`.
+ * Returns the 1st DOM-node of the given auto-container fiber. Pass custom
+ * `children` if `fiber`'s children are incorrect.
  */
-export declare const getAnchor: (fiber: FiberNode) => [Element, Node | null];
+export declare const getFirstContainerElement: (fiber: FiberNode, children?: FiberNode[]) => DomNode;
+/** Returns the last DOM-node of the given auto-container fiber */
+export declare const getLastContainerElement: (fiber: FiberNode) => DomNode;
 /**
  * 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-->).
+ * always a single node since components and fragments may be in the
+ * auto-container mode. That means they contain more then one direct DOM-nodes
+ * that are inlined into the `fiber`'s DOM container.
  */
 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;
+export declare const unsetRef: (fiber: TagFiberNode, immediate: boolean) => 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;
+/**
+ * Calls the given fn against every single child in the fiben fiber tree.
+ * Return `false` to stop traversing right away.
+ */
+export declare const traverseFiberTree: (fiber: FiberNode, fn: (fiber: FiberNode) => void | boolean) => boolean;
 //# sourceMappingURL=helpers.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/core/actions/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,SAAS,EACd,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAc5B;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,2BAAmD,CAAC;AAE5E;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,+BAa5B,CAAC;AAEF,eAAO,MAAM,SAAS,gCAMrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,uDAUpC,CAAC;AAEF,kEAAkE;AAClE,eAAO,MAAM,uBAAuB,+BAOnC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,iCAuC5B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,mDAsBpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,4BAW1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,yEAe7B,CAAC"}

package/dist/core/actions/helpers.js

@@ -1,7 +1,8 @@
-import { nullthrows } from '../../utils';
-import { isBeginOf, isCompactNone, isCompactSingleChild } from '../compact';
-import { NULL_FIBER } from '../reconciliation/fibers';
-import { buildCommentText } from '../reconciliation/comments';
+import { isEmptyContainer, isSingleChildContainer, isAutoContainer, } from '../compact';
+import { isFiberDead, NULL_FIBER } from '../reconciliation/fibers';
+import { scheduleEffect } from '../reconciliation/effects';
+import { getAppByFiber } from '../reconciliation/app';
+import { nullthrowsForFiber, ReactError, } from '../reconciliation/errors/ReactError';
 /**
  * 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
@@ -16,8 +17,8 @@ import { buildCommentText } from '../reconciliation/comments';
 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.
+ * direct parent's element since the parent might be a component, a fragment, or
+ * a portal node.
  */
 export const getParentElement = (fiber) => {
     while (fiber.parent.type === 'component' ||
@@ -27,99 +28,91 @@ export const getParentElement = (fiber) => {
     if (fiber.parent.data instanceof HTMLElement) {
         return fiber.parent.data; // Portal.
     }
-    return nullthrows(fiber.parent?.element);
+    return nullthrowsForFiber(fiber, 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) => {
+export 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`.
+ * Returns the 1st DOM-node of the given auto-container fiber. Pass custom
+ * `children` if `fiber`'s children are incorrect.
  */
-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,
-        ];
+export const getFirstContainerElement = (fiber, children = fiber.children) => {
+    let [firstNode] = children;
+    while (!(firstNode.element instanceof Node)) {
+        [firstNode] = firstNode.children;
     }
-    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)];
+    return firstNode.element;
+};
+/** Returns the last DOM-node of the given auto-container fiber */
+export const getLastContainerElement = (fiber) => {
+    let lastNode = fiber.children.at(-1);
+    while (!(lastNode.element instanceof Node)) {
+        lastNode = lastNode.children.at(-1);
     }
-    // "text" & "null" types cannot contain children.
-    throw new Error(`Unsupported anchor type: ${fiber.type}`);
+    return lastNode.element;
 };
 /**
  * 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-->).
+ * always a single node since components and fragments may be in the
+ * auto-container mode. That means they contain more then one direct DOM-nodes
+ * that are inlined into the `fiber`'s DOM container.
  */
 export const getFiberDomNodes = (fiber) => {
+    if (isFiberDead(fiber)) {
+        throw new ReactError(fiber, `Can't get fiber children for a dead fiber`);
+    }
     switch (fiber.type) {
         case 'component':
         case 'fragment': {
-            if (isCompactSingleChild(fiber) || isCompactNone(fiber)) {
-                return [fiber.element];
+            if (isAutoContainer(fiber)) {
+                const first = getFirstContainerElement(fiber);
+                const last = getLastContainerElement(fiber);
+                const result = [first];
+                let domNode = first.nextSibling;
+                while (domNode !== last) {
+                    result.push(domNode);
+                    domNode = domNode.nextSibling;
+                }
+                result.push(last);
+                return result;
+            }
+            if (isSingleChildContainer(fiber)) {
+                return getFiberDomNodes(fiber.children[0]);
             }
-            // 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);
+            if (isEmptyContainer(fiber)) {
+                return [fiber.element];
             }
-            list.push(prev);
-            return list.reverse();
+            throw new ReactError(fiber, `Unknown kind of fiber`);
         }
         case 'null':
         case 'tag':
         case 'text':
-            return [nullthrows(fiber.element)];
+            return [nullthrowsForFiber(fiber, fiber.element)];
     }
 };
 /**
  * When a node leaves the DOM tree, we need to update all associated ref
  * objects and ref handlers.
  */
-export const unsetRef = (ref) => {
+export const unsetRef = (fiber, immediate) => {
+    const { ref } = fiber;
     if (typeof ref === 'function') {
-        ref(null);
+        if (immediate) {
+            ref(null);
+            // TODO: add a test ^.
+        }
+        else {
+            // It can be a setter (e.g., <div onRef={setContainer}/>). Since we
+            // shouldn't allow invalidating components during commit phase we need
+            // to schedule an async update.
+            scheduleEffect(getAppByFiber(fiber), () => {
+                ref(null);
+            }, 'refsUnmount');
+        }
     }
     else {
         ref.current = null;
@@ -130,6 +123,8 @@ export const unsetRef = (ref) => {
  * can hold references to other objects.
  */
 export const emptyFiberNode = (fiber) => {
+    // For debug purposes mark dead nodes with a negative number.
+    fiber.id = -fiber.id;
     fiber.data = null;
     fiber.element = null;
     fiber.component = null;
@@ -138,4 +133,19 @@ export const emptyFiberNode = (fiber) => {
     fiber.ref = null;
     fiber.parent = NULL_FIBER;
 };
+/**
+ * Calls the given fn against every single child in the fiben fiber tree.
+ * Return `false` to stop traversing right away.
+ */
+export const traverseFiberTree = (fiber, fn) => {
+    if (fn(fiber) === false) {
+        return false;
+    }
+    for (const child of fiber.children) {
+        if (traverseFiberTree(child, fn) === false) {
+            return false;
+        }
+    }
+    return true;
+};
 //# sourceMappingURL=helpers.js.map