fibrae 0.1.0 → 0.1.2

package/dist/fiber-render.js

@@ -20,11 +20,10 @@ import * as Context from "effect/Context";
 import * as FiberRef from "effect/FiberRef";
 import * as Cause from "effect/Cause";
 import { Atom, Registry as AtomRegistry } from "@effect-atom/atom";
-import { isEvent, isProperty, isStream, } from "./shared.js";
+import { RenderError, StreamError, EventHandlerError, isEvent, isProperty, isStream, } from "./shared.js";
 import { FibraeRuntime, runForkWithRuntime } from "./runtime.js";
 import { setDomProperty, attachEventListeners } from "./dom.js";
 import { normalizeToStream, makeTrackingRegistry } from "./tracking.js";
-import { h } from "./h.js";
 // =============================================================================
 // Stream Subscription Helper
 // =============================================================================
@@ -56,11 +55,17 @@ const subscribeComponentStream = (stream, fiberRef, scope) => Effect.gen(functio
         }
     })).pipe(Effect.catchAllCause((cause) => Effect.gen(function* () {
         const done = yield* Deferred.isDone(firstValueDeferred);
+        // Convert to StreamError with the correct phase
+        const streamError = new StreamError({
+            cause: Cause.squash(cause),
+            phase: done ? "after-first-emission" : "before-first-emission",
+        });
         if (!done) {
-            yield* Deferred.failCause(firstValueDeferred, cause);
+            // Fail the deferred with StreamError so awaiting code gets the typed error
+            yield* Deferred.fail(firstValueDeferred, streamError);
         }
         const currentFiber = fiberRef.current;
-        yield* handleFiberError(currentFiber, cause);
+        yield* handleFiberError(currentFiber, streamError);
     })));
     yield* Effect.forkIn(subscription, scope);
     return firstValueDeferred;
@@ -83,7 +88,7 @@ const createFiber = (type, props, parent, alternate, effectTag) => ({
     childFirstCommitDeferred: Option.none(),
     fiberRef: Option.none(),
     isMultiEmissionStream: false,
-    errorBoundary: Option.none(),
+    boundary: Option.none(),
     suspense: Option.none(),
     renderContext: Option.none(),
     isParked: false,
@@ -101,8 +106,7 @@ const fiberTypeIsFunction = (fiber) => fiber.type.pipe(Option.map((t) => typeof
  * Check if a fiber is a virtual element (no DOM node created).
  * Returns true for root fiber (no type) or FRAGMENT type.
  */
-const fiberIsVirtualElement = (fiber) => fiber.type.pipe(Option.map((t) => t === "FRAGMENT"), Option.getOrElse(() => true) // Root fiber has no type
-);
+const fiberIsVirtualElement = (fiber) => fiber.type.pipe(Option.map((t) => t === "FRAGMENT"), Option.getOrElse(() => true));
 /**
  * Get a fiber's required componentScope or die with a message.
  */
@@ -189,19 +193,6 @@ const processBatch = () => Effect.gen(function* () {
 // =============================================================================
 // Fiber Tree Walking Helpers
 // =============================================================================
-/**
- * Walk up the fiber tree from the starting fiber, returning the first ancestor
- * (including the starting fiber) that matches the predicate.
- */
-const findAncestor = (fiber, predicate) => {
-    let current = Option.some(fiber);
-    while (Option.isSome(current)) {
-        if (predicate(current.value))
-            return current;
-        current = current.value.parent;
-    }
-    return Option.none();
-};
 /**
  * Walk up the fiber tree from the starting fiber's parent, returning the first
  * ancestor that matches the predicate (excludes the starting fiber itself).
@@ -239,40 +230,55 @@ const findDomParent = (fiber) => {
 // =============================================================================
 // Error Boundary Support
 // =============================================================================
-const findNearestErrorBoundary = (fiber) => findAncestor(fiber, (f) => Option.isSome(f.errorBoundary));
-const handleFiberError = (fiber, cause) => Effect.gen(function* () {
-    const runtime = yield* FibraeRuntime;
-    const stateRef = runtime.fiberState;
-    const state = yield* Ref.get(stateRef);
-    const boundaryOpt = findNearestErrorBoundary(fiber);
-    if (Option.isSome(boundaryOpt)) {
-        const boundary = boundaryOpt.value;
-        const cfg = Option.getOrElse(boundary.errorBoundary, () => ({
-            fallback: h("div", {}, []),
-            hasError: false,
-            onError: undefined,
-        }));
-        cfg.onError?.(cause);
-        cfg.hasError = true;
-        boundary.errorBoundary = Option.some(cfg);
-        // Check if we're in initial render (no currentRoot yet)
-        if (Option.isNone(state.currentRoot)) {
-            // During initial render: re-reconcile boundary with fallback immediately
-            // This replaces the errored child with the fallback element
-            yield* reconcileChildren(boundary, [cfg.fallback]);
-            // Return the boundary's new child (fallback) so work continues
-            return boundary.child;
-        }
-        else {
-            // After initial render: queue for re-render
-            yield* queueFiberForRerender(boundary);
-            return Option.none();
-        }
+/** Find nearest BOUNDARY by walking up the fiber tree */
+const findNearestBoundary = (fiber) => findAncestorExcludingSelf(fiber, (f) => Option.isSome(f.boundary));
+/**
+ * Convert a raw cause/error to a ComponentError.
+ * If it's already a ComponentError, return as-is.
+ * Otherwise, wrap in RenderError as a fallback.
+ */
+const toComponentError = (cause) => {
+    // Check if it's already a ComponentError
+    if (cause instanceof RenderError ||
+        cause instanceof StreamError ||
+        cause instanceof EventHandlerError) {
+        return cause;
     }
-    else {
-        yield* Effect.logError("Unhandled error without ErrorBoundary", cause);
-        return Option.none();
+    // Extract the actual error from Cause if needed
+    const actualError = Cause.isCause(cause) ? Cause.squash(cause) : cause;
+    if (actualError instanceof RenderError ||
+        actualError instanceof StreamError ||
+        actualError instanceof EventHandlerError) {
+        return actualError;
     }
+    // Wrap unknown errors as RenderError
+    return new RenderError({ cause: actualError });
+};
+/**
+ * Handle an error by finding the nearest error boundary and invoking its handler.
+ *
+ * Finds the nearest BOUNDARY and calls its onError callback to fail the stream.
+ * The Stream.catchTags in user code will produce the fallback.
+ */
+const handleFiberError = (fiber, cause) => Effect.gen(function* () {
+    const componentError = toComponentError(cause);
+    // Find nearest boundary
+    const boundaryOpt = findNearestBoundary(fiber);
+    return yield* Option.match(boundaryOpt, {
+        onNone: () => Effect.gen(function* () {
+            yield* Effect.logError("Unhandled error without any error boundary", componentError);
+            return Option.none();
+        }),
+        onSome: (boundary) => Effect.sync(() => {
+            // Call onError to fail the stream
+            const cfg = Option.getOrThrow(boundary.boundary);
+            cfg.onError(componentError);
+            cfg.hasError = true;
+            // The stream will fail and catchTags will produce fallback
+            // which will trigger a re-render via the stream subscription
+            return Option.none();
+        }),
+    });
 });
 // =============================================================================
 // Suspense Support
@@ -390,14 +396,14 @@ const updateFunctionComponent = (fiber, runtime) => Effect.gen(function* () {
             return Effect.sync(() => component(fiber.props));
         },
     });
-    // Fast path: if component returns a plain VElement (not Effect/Stream), 
+    // Fast path: if component returns a plain VElement (not Effect/Stream),
     // and it's a special element type, just reconcile directly without stream machinery.
     // This handles wrapper components like Suspense and ErrorBoundary efficiently.
     if (!Effect.isEffect(output) && !isStream(output)) {
         const vElement = output;
         if (typeof vElement === "object" && vElement !== null && "type" in vElement) {
             const elementType = vElement.type;
-            if (elementType === "SUSPENSE" || elementType === "ERROR_BOUNDARY" || elementType === "FRAGMENT") {
+            if (elementType === "SUSPENSE" || elementType === "FRAGMENT") {
                 // Simple wrapper component - just reconcile with the VElement directly
                 yield* reconcileChildren(fiber, [vElement]);
                 return;
@@ -509,29 +515,31 @@ const updateHostComponent = (fiber, runtime) => Effect.gen(function* () {
     if (Option.isNone(fiber.renderContext) && Option.isSome(fiber.parent)) {
         fiber.renderContext = fiber.parent.value.renderContext;
     }
-    // Handle ERROR_BOUNDARY specially
-    const isErrorBoundary = fiberTypeIs(fiber, "ERROR_BOUNDARY");
-    if (isErrorBoundary) {
-        // Initialize errorBoundary config if not already set
-        if (Option.isNone(fiber.errorBoundary)) {
-            const fallback = fiber.props.fallback;
-            const onError = fiber.props.onError;
-            fiber.errorBoundary = Option.some({
-                fallback,
+    // Handle BOUNDARY specially (Effect-native error boundary API)
+    const isBoundary = fiberTypeIs(fiber, "BOUNDARY");
+    if (isBoundary) {
+        const boundaryId = fiber.props.boundaryId;
+        const onError = fiber.props.onError;
+        // Inherit boundary state from alternate (previous render) if present
+        // This preserves hasError state across re-renders
+        if (Option.isNone(fiber.boundary) && Option.isSome(fiber.alternate)) {
+            const alt = fiber.alternate.value;
+            if (Option.isSome(alt.boundary)) {
+                fiber.boundary = alt.boundary;
+            }
+        }
+        // Initialize boundary config if not already set
+        if (Option.isNone(fiber.boundary)) {
+            fiber.boundary = Option.some({
+                boundaryId,
                 onError,
                 hasError: false,
             });
         }
-        const config = Option.getOrThrow(fiber.errorBoundary);
-        if (config.hasError) {
-            // Error state - render fallback instead of children
-            yield* reconcileChildren(fiber, [config.fallback]);
-        }
-        else {
-            // Normal state - render children
-            const children = fiber.props.children;
-            yield* reconcileChildren(fiber, children || []);
-        }
+        // Render children (BOUNDARY doesn't have fallback state -
+        // the fallback is handled by Stream.catchTags in userland)
+        const children = fiber.props.children;
+        yield* reconcileChildren(fiber, children || []);
         return;
     }
     // Handle SUSPENSE specially
@@ -614,9 +622,7 @@ const createDom = (fiber, runtime) => Effect.gen(function* () {
             if (typeof type !== "string") {
                 return Effect.die("createDom called on function component");
             }
-            const node = type === "TEXT_ELEMENT"
-                ? document.createTextNode("")
-                : document.createElement(type);
+            const node = type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(type);
             return Effect.succeed(node);
         },
     });
@@ -642,9 +648,8 @@ const updateDom = (dom, prevProps, nextProps, ownerFiber, runtime) => Effect.gen
     if (element instanceof Text) {
         if (nextProps.nodeValue !== prevProps.nodeValue) {
             const value = nextProps.nodeValue;
-            element.nodeValue = typeof value === "string" || typeof value === "number"
-                ? String(value)
-                : "";
+            element.nodeValue =
+                typeof value === "string" || typeof value === "number" ? String(value) : "";
         }
         return;
     }
@@ -684,7 +689,14 @@ const updateDom = (dom, prevProps, nextProps, ownerFiber, runtime) => Effect.gen
             if (Effect.isEffect(result)) {
                 // Use runForkWithRuntime to get the full application context
                 // This provides Navigator, FibraeRuntime, AtomRegistry, etc.
-                const effectWithErrorHandling = result.pipe(Effect.catchAllCause((cause) => ownerFiber ? handleFiberError(ownerFiber, cause) : Effect.void));
+                const effectWithErrorHandling = result.pipe(Effect.catchAllCause((cause) => {
+                    // Convert to EventHandlerError with the event type
+                    const error = new EventHandlerError({
+                        cause: Cause.squash(cause),
+                        eventType,
+                    });
+                    return ownerFiber ? handleFiberError(ownerFiber, error) : Effect.void;
+                }));
                 runForkWithRuntime(runtime)(effectWithErrorHandling);
             }
         };
@@ -762,7 +774,7 @@ const reconcileChildren = (wipFiber, elements) => Effect.gen(function* () {
                     // UPDATE - reuse DOM, update props
                     const fiber = createFiber(matched.type, element.props, Option.some(wipFiber), matchedOldOpt, Option.some("UPDATE"));
                     fiber.dom = matched.dom;
-                    fiber.errorBoundary = matched.errorBoundary;
+                    fiber.boundary = matched.boundary;
                     fiber.suspense = matched.suspense;
                     return fiber;
                 }
@@ -959,11 +971,62 @@ export const renderFiber = (element, container) => Effect.gen(function* () {
 // =============================================================================
 // Hydration Support
 // =============================================================================
+// =============================================================================
+// Hydration Helpers - Cursor-based DOM Walking (like React)
+// =============================================================================
+/**
+ * Get the next hydratable node, skipping whitespace-only text nodes
+ * and non-marker comments. Returns None if no more hydratable nodes.
+ *
+ * Hydratable nodes are:
+ * - Element nodes (always)
+ * - Text nodes with non-whitespace content
+ * - Comment nodes that are Fibrae markers (fibrae:...)
+ */
+const getNextHydratable = (node) => {
+    let current = node;
+    while (current) {
+        const nodeType = current.nodeType;
+        // Element nodes are always hydratable
+        if (nodeType === Node.ELEMENT_NODE) {
+            return Option.some(current);
+        }
+        // Text nodes are hydratable if they have non-whitespace content
+        if (nodeType === Node.TEXT_NODE) {
+            const textContent = current.textContent;
+            if (textContent !== null && textContent.trim() !== "") {
+                return Option.some(current);
+            }
+            // Skip whitespace-only text nodes
+        }
+        // Comment nodes are hydratable if they're Fibrae markers
+        if (nodeType === Node.COMMENT_NODE) {
+            const data = current.data;
+            if (data.startsWith("fibrae:")) {
+                return Option.some(current);
+            }
+            // Skip non-marker comments
+        }
+        current = current.nextSibling;
+    }
+    return Option.none();
+};
+const getFirstHydratableChild = (parent) => {
+    return getNextHydratable(parent.firstChild);
+};
+const getNextHydratableSibling = (node) => {
+    return getNextHydratable(node.nextSibling);
+};
+// =============================================================================
+// Fiber Hydration - Cursor-based Implementation
+// =============================================================================
 /**
- * Hydrate an existing DOM tree with a VElement tree.
+ * Hydrate an existing DOM tree by building a fiber tree that references
+ * the existing DOM nodes. This enables event handlers and reactivity
+ * without replacing the DOM.
  *
- * This walks the existing DOM and builds a fiber tree that matches it,
- * enabling reactive updates without re-creating the DOM.
+ * Uses cursor-based DOM walking (like React) to match VElement tree
+ * against existing DOM, skipping whitespace-only text nodes and comments.
  */
 export const hydrateFiber = (element, container) => Effect.gen(function* () {
     const runtime = yield* FibraeRuntime;
@@ -972,8 +1035,9 @@ export const hydrateFiber = (element, container) => Effect.gen(function* () {
     const rootFiber = createFiber(Option.none(), { children: [element] }, Option.none(), Option.none(), Option.none());
     rootFiber.dom = Option.some(container);
     // Build fiber tree by walking DOM and VElement together
-    // The element itself is the child of the root fiber (same as renderFiber)
-    yield* hydrateChildren(rootFiber, [element], Array.from(container.childNodes), runtime);
+    // Start with first hydratable child (skipping whitespace)
+    const firstChild = getFirstHydratableChild(container);
+    yield* hydrateChildren(rootFiber, [element], firstChild, runtime);
     yield* Ref.update(stateRef, (s) => ({
         ...s,
         currentRoot: Option.some(rootFiber),
@@ -983,59 +1047,76 @@ export const hydrateFiber = (element, container) => Effect.gen(function* () {
     // Keep runtime alive
     return yield* Effect.never;
 });
-const hydrateChildren = (parentFiber, vElements, domNodes, runtime) => Effect.gen(function* () {
-    let domIndex = 0;
+/**
+ * Hydrate multiple vElements against DOM nodes using cursor-based walking.
+ * Returns the next DOM cursor position after all children are hydrated.
+ */
+const hydrateChildren = (parentFiber, vElements, startCursor, runtime) => Effect.gen(function* () {
+    let cursor = startCursor;
     const fibers = [];
     for (const vElement of vElements) {
-        const fiber = yield* hydrateElement(parentFiber, vElement, domNodes, domIndex, runtime);
-        fibers.push(fiber);
-        // Advance DOM index based on element type
-        if (typeof vElement.type === "string") {
-            domIndex++;
+        if (Option.isNone(cursor)) {
+            // No more DOM nodes but we have more vElements - mismatch
+            // For now, just skip (could throw HydrationMismatch in strict mode)
+            break;
         }
-        // Function components don't consume DOM nodes directly
+        const { fiber, nextCursor } = yield* hydrateElement(parentFiber, vElement, cursor.value, runtime);
+        fibers.push(fiber);
+        cursor = nextCursor;
     }
     // Link fibers
     linkFibersAsSiblings(fibers, parentFiber);
+    return cursor;
 });
-const hydrateElement = (parentFiber, vElement, domNodes, domIndex, runtime) => Effect.gen(function* () {
-    const fiber = createFiber(Option.some(vElement.type), vElement.props, Option.some(parentFiber), Option.none(), Option.none() // No effect tag - already in DOM
-    );
+/**
+ * Hydrate a single vElement against a DOM node.
+ * Returns the created fiber and the next DOM cursor position.
+ */
+const hydrateElement = (parentFiber, vElement, domNode, runtime) => Effect.gen(function* () {
+    const fiber = createFiber(Option.some(vElement.type), vElement.props, Option.some(parentFiber), Option.none(), Option.none());
+    let nextCursor;
     if (typeof vElement.type === "function") {
         // Function component - invoke to get children
-        yield* hydrateFunctionComponent(fiber, vElement, domNodes, domIndex, runtime);
+        nextCursor = yield* hydrateFunctionComponent(fiber, vElement, domNode, runtime);
     }
     else if (vElement.type === "TEXT_ELEMENT") {
-        // Text node
-        const domNode = domNodes[domIndex];
+        // Text node - adopt the DOM text node
         fiber.dom = Option.some(domNode);
+        nextCursor = getNextHydratableSibling(domNode);
     }
     else if (vElement.type === "FRAGMENT") {
-        // Fragment - children are direct children of parent DOM
-        yield* hydrateChildren(fiber, vElement.props.children || [], domNodes.slice(domIndex), runtime);
+        // Fragment - children consume DOM nodes starting from current cursor
+        nextCursor = yield* hydrateChildren(fiber, vElement.props.children || [], Option.some(domNode), runtime);
     }
     else {
-        // Host element
-        const domNode = domNodes[domIndex];
-        fiber.dom = Option.some(domNode);
+        // Host element - adopt DOM node and hydrate children
+        const el = domNode;
+        fiber.dom = Option.some(el);
         // Inherit renderContext from parent fiber (function components capture it during render)
         if (Option.isNone(fiber.renderContext) && Option.isSome(fiber.parent)) {
             fiber.renderContext = fiber.parent.value.renderContext;
         }
         // Attach event listeners - uses runForkWithRuntime internally for full context
-        attachEventListeners(domNode, vElement.props, runtime);
+        // Pass error callback to trigger ErrorBoundary on event handler failures
+        attachEventListeners(el, vElement.props, runtime, (cause) => handleFiberError(fiber, cause));
         // Handle ref
         const ref = vElement.props.ref;
         if (ref && typeof ref === "object" && "current" in ref) {
-            ref.current = domNode;
+            ref.current = el;
         }
-        // Hydrate children
-        const childNodes = Array.from(domNode.childNodes);
-        yield* hydrateChildren(fiber, vElement.props.children || [], childNodes, runtime);
+        // Hydrate children using cursor-based walking
+        const firstChildCursor = getFirstHydratableChild(el);
+        yield* hydrateChildren(fiber, vElement.props.children || [], firstChildCursor, runtime);
+        // Move to next sibling for the parent's cursor
+        nextCursor = getNextHydratableSibling(domNode);
     }
-    return fiber;
+    return { fiber, nextCursor };
 });
-const hydrateFunctionComponent = (fiber, vElement, domNodes, domIndex, runtime) => Effect.gen(function* () {
+/**
+ * Hydrate a function component by invoking it and hydrating its output.
+ * Returns the next DOM cursor position.
+ */
+const hydrateFunctionComponent = (fiber, vElement, domNode, runtime) => Effect.gen(function* () {
     // Capture current context during render phase for event handlers in commit phase
     const currentContext = (yield* FiberRef.get(FiberRef.currentContext));
     fiber.renderContext = Option.some(currentContext);
@@ -1061,9 +1142,11 @@ const hydrateFunctionComponent = (fiber, vElement, domNodes, domIndex, runtime)
     // Wait for first value
     const childVElement = yield* Deferred.await(firstValueDeferred);
     fiber.latestStreamValue = Option.some(childVElement);
-    // Hydrate the child VElement against remaining DOM nodes
-    yield* hydrateChildren(fiber, [childVElement], domNodes.slice(domIndex), runtime);
+    // Hydrate the child VElement against DOM node
+    // Function components render output directly to DOM (no wrapper)
+    const nextCursor = yield* hydrateChildren(fiber, [childVElement], Option.some(domNode), runtime);
     // Subscribe to atom changes
     yield* subscribeFiberAtoms(fiber, accessedAtoms, runtime);
+    return nextCursor;
 });
 //# sourceMappingURL=fiber-render.js.map