@sigmela/router 0.1.2 → 0.2.0

package/lib/module/RouterContext.js

@@ -13,7 +13,7 @@ export const useRouter = () => {
 export const useCurrentRoute = () => {
   const router = useRouter();
   const subscribe = React.useCallback(cb => router.subscribe(cb), [router]);
-  const get = React.useCallback(() => router.getVisibleRoute(), [router]);
+  const get = React.useCallback(() => router.getActiveRoute(), [router]);
   return React.useSyncExternalStore(subscribe, get, get);
 };
 export function useParams() {

package/lib/module/ScreenStack/ScreenStack.web.js

@@ -1,139 +1,365 @@
 "use strict";
 
-import { Fragment, memo, useRef } from 'react';
-import TransitionStack from "../web/TransitionStack.js";
-import { Children, cloneElement, useLayoutEffect, useMemo, useState } from 'react';
+import { memo, useRef, useLayoutEffect, useMemo, useEffect, Children, isValidElement, Fragment } from 'react';
+import { useTransitionMap } from 'react-transition-state';
+import { ScreenStackItemsContext, ScreenStackAnimatingContext } from "./ScreenStackContext.js";
+import { getPresentationTypeClass, computeAnimationType } from "./animationHelpers.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const devLog = (_, __) => {};
+const isScreenStackItemElement = child => {
+  if (! /*#__PURE__*/isValidElement(child)) return false;
+  const anyProps = child.props;
+  return anyProps && typeof anyProps === 'object' && 'item' in anyProps;
+};
+const getItemKey = child => {
+  const anyChild = child;
+  const reactKey = anyChild.key ?? null;
+  if (typeof reactKey === 'string' && reactKey.length > 0 && !reactKey.startsWith('.')) {
+    return reactKey;
+  }
+  const item = anyChild.props?.item;
+  if (item?.key && typeof item.key === 'string') {
+    return item.key;
+  }
+  if (item?.routeId) {
+    return String(item.routeId);
+  }
+  throw new Error('[ScreenStack] ScreenStackItem is missing a stable key');
+};
+const computeDirection = (prev, current) => {
+  if (prev.length === 0 && current.length > 0) {
+    return 'forward';
+  }
+  if (current.length > prev.length) {
+    return 'forward';
+  }
+  if (current.length < prev.length) {
+    return 'back';
+  }
+  const prevTop = prev[prev.length - 1];
+  const currentTop = current[current.length - 1];
+  if (prevTop === currentTop) {
+    return 'forward';
+  }
+  const prevIndexOfCurrentTop = prev.indexOf(currentTop);
+  const prevIndexOfPrevTop = prev.indexOf(prevTop);
+  if (prevIndexOfCurrentTop !== -1 && prevIndexOfPrevTop !== -1 && prevIndexOfCurrentTop < prevIndexOfPrevTop) {
+    return 'back';
+  }
+  return 'forward';
+};
 export const ScreenStack = /*#__PURE__*/memo(props => {
   const {
     children,
     transitionTime = 250,
-    type,
     animated = true
   } = props;
-  const [records, setRecords] = useState([]);
+  devLog('[ScreenStack] Render', {
+    transitionTime,
+    animated,
+    childrenExists: !!children
+  });
   const containerRef = useRef(null);
-  const transitionRef = useRef(null);
-  const prevSelectedRef = useRef(-1);
-  const lastExitingIndexRef = useRef(null);
-  const prevSignatureRef = useRef(null);
-  const childArray = useMemo(() => Children.toArray(children).filter(Boolean), [children]);
-  const nextKeys = useMemo(() => childArray.map(c => c.key), [childArray]);
-  useLayoutEffect(() => {
-    setRecords(prev => {
-      const prevKeys = prev.map(r => r.key);
-      if (nextKeys.length === prevKeys.length + 1 && prevKeys.every((k, i) => k === nextKeys[i])) {
-        const child = childArray[childArray.length - 1];
-        if (!child) return prev;
-        const key = child.key;
-        const element = /*#__PURE__*/cloneElement(child, {
-          phase: 'active'
+  const isInitialMountRef = useRef(true);
+  const prevKeysRef = useRef([]);
+  const lastDirectionRef = useRef('forward');
+  const childMapRef = useRef(new Map());
+  const stackChildren = useMemo(() => {
+    const stackItems = [];
+    Children.forEach(children, child => {
+      if (isScreenStackItemElement(child)) {
+        stackItems.push(child);
+      } else if (child != null) {
+        devLog('[ScreenStack] Non-ScreenStackItem child ignored', {
+          child
         });
-        return [...prev, {
-          key,
-          phase: 'active',
-          element
-        }];
       }
-      if (prevKeys.length === nextKeys.length + 1 && nextKeys.every((k, i) => k === prevKeys[i])) {
-        const last = prev[prev.length - 1];
-        if (!last) return prev;
-        if (last.phase === 'exiting') return prev;
-        return [...prev.slice(0, -1), {
-          key: last.key,
-          phase: 'exiting',
-          element: /*#__PURE__*/cloneElement(last.element, {
-            phase: 'exiting'
-          })
-        }];
+    });
+    devLog('[ScreenStack] Parsed children', {
+      stackChildrenLength: stackItems.length
+    });
+    return stackItems;
+  }, [children]);
+  const routeKeys = useMemo(() => {
+    const keys = stackChildren.map(child => {
+      const item = child.props.item;
+      return item?.key || getItemKey(child);
+    });
+    devLog('[ScreenStack] routeKeys', keys);
+    return keys;
+  }, [stackChildren]);
+  const childMap = useMemo(() => {
+    const map = new Map(childMapRef.current);
+    for (const child of stackChildren) {
+      const item = child.props.item;
+      const key = item?.key || getItemKey(child);
+      map.set(key, child);
+    }
+    childMapRef.current = map;
+    devLog('[ScreenStack] childMap updated', {
+      size: map.size,
+      keys: Array.from(map.keys())
+    });
+    return map;
+  }, [stackChildren]);
+  const {
+    stateMap,
+    toggle,
+    setItem,
+    deleteItem
+  } = useTransitionMap({
+    timeout: transitionTime,
+    preEnter: true,
+    mountOnEnter: true,
+    unmountOnExit: false,
+    enter: animated,
+    exit: animated,
+    allowMultiple: true,
+    onStateChange: ({
+      key,
+      current
+    }) => {
+      devLog(`[ScreenStack] Transition state change for key ${key}:`, {
+        status: current.status,
+        isMounted: current.isMounted,
+        isEnter: current.isEnter,
+        isResolved: current.isResolved
+      });
+    }
+  });
+  devLog('[ScreenStack] Current transition states:', Array.from(stateMap.entries()).map(([key, state]) => ({
+    key,
+    status: state.status,
+    isMounted: state.isMounted,
+    isEnter: state.isEnter,
+    isResolved: state.isResolved
+  })));
+  const stateMapEntries = Array.from(stateMap.entries());
+  const direction = useMemo(() => {
+    const prevKeys = prevKeysRef.current;
+    const computed = computeDirection(prevKeys, routeKeys);
+    prevKeysRef.current = routeKeys;
+    return computed;
+  }, [routeKeys]);
+  devLog('[ScreenStack] Computed direction', {
+    prevKeys: prevKeysRef.current,
+    routeKeys,
+    direction
+  });
+  const isInitialPhase = isInitialMountRef.current;
+  const keysToRender = useMemo(() => {
+    const routeKeySet = new Set(routeKeys);
+    const exitingKeys = [];
+    for (const [key, state] of stateMapEntries) {
+      if (!state.isMounted) continue;
+      if (!routeKeySet.has(key)) {
+        exitingKeys.push(key);
       }
-      const nextByKey = new Map();
-      for (const ch of childArray) nextByKey.set(ch.key, ch);
-      const prevByKey = new Map();
-      for (const r of prev) prevByKey.set(r.key, r);
-      const result = [];
-      for (const ch of childArray) {
-        const key = ch.key;
-        const existed = prevByKey.get(key);
-        const nextEl = /*#__PURE__*/cloneElement(ch, {
-          phase: 'active'
+    }
+    const result = [...routeKeys, ...exitingKeys];
+    devLog('[ScreenStack] Keys to render:', {
+      result,
+      exitingKeys
+    });
+    return result;
+  }, [routeKeys, stateMapEntries]);
+  const containerClassName = useMemo(() => {
+    return 'screen-stack';
+  }, []);
+  useLayoutEffect(() => {
+    devLog('[ScreenStack] === LIFECYCLE EFFECT START ===', {
+      prevKeys: prevKeysRef.current,
+      routeKeys,
+      direction
+    });
+    const routeKeySet = new Set(routeKeys);
+    const existingKeySet = new Set();
+    for (const [key] of stateMapEntries) {
+      existingKeySet.add(key);
+    }
+    const newKeys = routeKeys.filter(key => !existingKeySet.has(key));
+    const removedKeys = [...existingKeySet].filter(key => !routeKeySet.has(key));
+    devLog('[ScreenStack] Lifecycle diff', {
+      newKeys,
+      removedKeys
+    });
+    for (const key of newKeys) {
+      devLog(`[ScreenStack] Adding item: ${key}`);
+      setItem(key);
+      devLog(`[ScreenStack] Entering item: ${key}`);
+      toggle(key, true);
+    }
+    for (const key of removedKeys) {
+      const state = stateMap.get(key);
+      if (state && state.isEnter) {
+        devLog(`[ScreenStack] Starting exit for item: ${key}`, {
+          status: state.status
+        });
+        toggle(key, false);
+      } else {
+        devLog(`[ScreenStack] Skip exit for item (not entered or missing): ${key}`, {
+          hasState: !!state,
+          status: state?.status,
+          isEnter: state?.isEnter
         });
-        if (existed) {
-          const sameActive = existed.phase === 'active';
-          result.push(sameActive ? {
-            key,
-            phase: 'active',
-            element: nextEl
-          } : {
-            key,
-            phase: 'active',
-            element: nextEl
-          });
-        } else {
-          result.push({
-            key,
-            phase: 'active',
-            element: nextEl
-          });
-        }
-      }
-      for (const r of prev) {
-        if (!nextByKey.has(r.key)) {
-          const exitingEl = /*#__PURE__*/cloneElement(r.element, {
-            phase: 'exiting'
-          });
-          result.push({
-            key: r.key,
-            phase: 'exiting',
-            element: exitingEl
-          });
-        }
       }
-      return result;
-    });
-  }, [childArray, nextKeys]);
+    }
+    lastDirectionRef.current = direction;
+    devLog('[ScreenStack] === LIFECYCLE EFFECT END ===');
+  }, [routeKeys, direction, setItem, toggle, stateMapEntries, stateMap]);
   useLayoutEffect(() => {
-    if (!containerRef.current || transitionRef.current) return;
-    transitionRef.current = TransitionStack({
-      content: containerRef.current,
-      type: type,
-      transitionTime,
-      withAnimationListener: animated,
-      onTransitionEnd: () => {
-        setRecords(prev => {
-          const idx = lastExitingIndexRef.current ?? -1;
-          if (idx < 0 || idx >= prev.length) return prev;
-          const candidate = prev[idx];
-          if (candidate?.phase !== 'exiting') return prev;
-          return [...prev.slice(0, idx), ...prev.slice(idx + 1)];
+    devLog('[ScreenStack] === CLEANUP EFFECT START ===');
+    const routeKeySet = new Set(routeKeys);
+    for (const [key, state] of stateMapEntries) {
+      if (!state.isMounted) {
+        devLog(`[ScreenStack] Cleanup unmounted item: ${key}`, {
+          status: state.status,
+          isResolved: state.isResolved
         });
+        deleteItem(key);
+        childMapRef.current.delete(key);
+        continue;
       }
+      const isInStack = routeKeySet.has(key);
+      const canCleanup = !isInStack && state.status === 'exited' && state.isResolved === true;
+      if (canCleanup) {
+        devLog(`[ScreenStack] Cleanup exited item: ${key}`, {
+          status: state.status,
+          isResolved: state.isResolved
+        });
+        deleteItem(key);
+        childMapRef.current.delete(key);
+      }
+    }
+    devLog('[ScreenStack] === CLEANUP EFFECT END ===');
+  }, [routeKeys, stateMapEntries, deleteItem]);
+  useEffect(() => {
+    if (!isInitialMountRef.current) return;
+    const hasMountedItem = stateMapEntries.some(([, st]) => st.isMounted);
+
+    // If the stack mounts empty, we still want the first pushed screen to animate.
+    // Mark initial mount as completed immediately in that case.
+    if (!hasMountedItem && routeKeys.length === 0) {
+      isInitialMountRef.current = false;
+      devLog('[ScreenStack] Initial mount completed (empty stack)');
+      return;
+    }
+    if (hasMountedItem) {
+      isInitialMountRef.current = false;
+      devLog('[ScreenStack] Initial mount completed');
+    }
+  }, [stateMapEntries, routeKeys.length]);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const items = containerRef.current.querySelectorAll('.screen-stack-item');
+    if (items.length === 0) return;
+    devLog('[ScreenStack] DOM State after render:', {
+      containerClasses: containerRef.current.className,
+      containerDataAnimation: containerRef.current.dataset.animation,
+      containerDataDirection: containerRef.current.dataset.direction,
+      itemCount: items.length
     });
-  }, [type, transitionTime, animated]);
-  useLayoutEffect(() => {
-    if (!transitionRef.current) return;
-    const targetIndex = (() => {
-      for (let i = records.length - 1; i >= 0; i--) {
-        const rec = records[i];
-        if (rec && rec.phase === 'active') return i;
+  });
+  const topKey = routeKeys[routeKeys.length - 1] ?? null;
+  const routeKeySet = useMemo(() => new Set(routeKeys), [routeKeys]);
+  const itemsContextValue = useMemo(() => {
+    const items = {};
+    for (let index = 0; index < keysToRender.length; index++) {
+      const key = keysToRender[index];
+      if (!key) continue;
+      const transitionState = stateMap.get(key);
+      const child = childMap.get(key);
+      if (!child) continue;
+      const item = child.props.item;
+      if (!item) continue;
+      const presentation = item.options?.stackPresentation ?? 'push';
+      const animated = item.options?.animated ?? true;
+      const isInStack = routeKeySet.has(key);
+      const isTop = isInStack && topKey !== null && key === topKey;
+      let phase;
+      if (!isInStack) {
+        phase = 'exiting';
+      } else if (isTop) {
+        phase = 'active';
+      } else {
+        phase = 'inactive';
+      }
+      const rawStatus = transitionState?.status || 'preEnter';
+      const status = isInitialPhase && (rawStatus === 'preEnter' || rawStatus === 'entering') ? 'entered' : rawStatus;
+      const routeIndex = routeKeys.indexOf(key);
+      const zIndex = routeIndex >= 0 ? routeIndex + 1 : keysToRender.length + index + 1;
+      const presentationType = getPresentationTypeClass(presentation);
+      const animationType = computeAnimationType(key, isInStack, isTop, direction, presentation, isInitialPhase, animated);
+      items[key] = {
+        presentationType,
+        animationType,
+        phase,
+        transitionStatus: status,
+        zIndex
+      };
+    }
+    for (let index = 0; index < routeKeys.length; index++) {
+      const key = routeKeys[index];
+      if (!key || items[key]) continue;
+      const child = childMap.get(key);
+      if (!child) continue;
+      const item = child.props.item;
+      if (!item) continue;
+      const presentation = item.options?.stackPresentation ?? 'push';
+      const animated = item.options?.animated ?? true;
+      const isInStack = routeKeySet.has(key);
+      const isTop = isInStack && topKey !== null && key === topKey;
+      let phase;
+      if (isTop) {
+        phase = 'active';
+      } else {
+        phase = 'inactive';
       }
-      return -1;
-    })();
-    if (targetIndex === -1) return;
-    const outgoingIndex = records.findIndex(it => it.phase === 'exiting');
-    lastExitingIndexRef.current = outgoingIndex !== -1 ? outgoingIndex : null;
-    const signature = records.map(r => `${String(r.key)}:${r.phase}`).join('|');
-    const stackChanged = prevSignatureRef.current !== null && prevSignatureRef.current !== signature;
-    const animate = animated && stackChanged;
-    transitionRef.current(targetIndex, animate);
-    prevSignatureRef.current = signature;
-    prevSelectedRef.current = targetIndex;
-  }, [records, animated]);
-  return /*#__PURE__*/_jsx("div", {
-    ref: containerRef,
-    className: `screen-stack${type ? ` ${type}` : ''}`,
-    children: records.map(r => /*#__PURE__*/_jsx(Fragment, {
-      children: r.element
-    }, r.key))
+      const presentationType = getPresentationTypeClass(presentation);
+      const animationType = isInitialPhase ? 'none' : computeAnimationType(key, isInStack, isTop, direction, presentation, isInitialPhase, animated);
+      items[key] = {
+        presentationType,
+        animationType,
+        phase,
+        transitionStatus: 'preEnter',
+        zIndex: index + 1
+      };
+    }
+    return {
+      items
+    };
+  }, [keysToRender, stateMap, childMap, routeKeySet, topKey, isInitialPhase, routeKeys, direction]);
+  const animating = useMemo(() => {
+    return stateMapEntries.some(([, state]) => state.isMounted && (state.status === 'entering' || state.status === 'exiting' || state.status === 'preEnter' || state.status === 'preExit'));
+  }, [stateMapEntries]);
+  return /*#__PURE__*/_jsx(ScreenStackItemsContext.Provider, {
+    value: itemsContextValue,
+    children: /*#__PURE__*/_jsx(ScreenStackAnimatingContext.Provider, {
+      value: animating,
+      children: /*#__PURE__*/_jsx("div", {
+        ref: containerRef,
+        className: containerClassName + (animating ? ' animating' : ''),
+        children: keysToRender.map(key => {
+          const transitionState = stateMap.get(key);
+          if (!transitionState || !transitionState.isMounted) {
+            devLog(`[ScreenStack] Skipping ${key} - no state or not mounted`, {
+              hasState: !!transitionState,
+              isMounted: transitionState?.isMounted
+            });
+            return null;
+          }
+          const child = childMap.get(key);
+          if (!child) {
+            devLog(`[ScreenStack] No child element for ${key}`, {
+              availableKeys: Array.from(childMap.keys())
+            });
+            return null;
+          }
+          return /*#__PURE__*/_jsx(Fragment, {
+            children: child
+          }, child.key || key);
+        })
+      })
+    })
   });
 });

package/lib/module/ScreenStack/ScreenStackContext.js

@@ -0,0 +1,15 @@
+"use strict";
+
+import { createContext, useContext } from 'react';
+export const ScreenStackItemsContext = /*#__PURE__*/createContext(null);
+export const ScreenStackAnimatingContext = /*#__PURE__*/createContext(false);
+export const useScreenStackItemsContext = () => {
+  const ctx = useContext(ScreenStackItemsContext);
+  if (!ctx) {
+    throw new Error('useScreenStackItemsContext must be used within ScreenStack');
+  }
+  return ctx;
+};
+export const useScreenStackAnimatingContext = () => {
+  return useContext(ScreenStackAnimatingContext);
+};

package/lib/module/ScreenStack/animationHelpers.js

@@ -0,0 +1,72 @@
+"use strict";
+
+export function getPresentationTypeClass(presentation) {
+  switch (presentation) {
+    case 'push':
+      return 'push';
+    case 'modal':
+      return 'modal';
+    case 'transparentModal':
+      return 'transparent-modal';
+    case 'containedModal':
+      return 'contained-modal';
+    case 'containedTransparentModal':
+      return 'contained-transparent-modal';
+    case 'fullScreenModal':
+      return 'fullscreen-modal';
+    case 'formSheet':
+      return 'formsheet';
+    case 'pageSheet':
+      return 'pagesheet';
+    case 'sheet':
+      return 'sheet';
+    default:
+      return 'push';
+  }
+}
+export function getAnimationTypeForPresentation(presentation, isEntering, direction) {
+  const suffix = isEntering ? 'enter' : 'exit';
+  const presentationClass = getPresentationTypeClass(presentation);
+  if (presentation === 'push') {
+    return direction === 'forward' ? `push-${suffix}` : `pop-${suffix}`;
+  }
+  return `${presentationClass}-${suffix}`;
+}
+export function computeAnimationType(_key, isInStack, isTop, direction, presentation, isInitialPhase, animated = true) {
+  if (!animated) {
+    return 'no-animate';
+  }
+  if (isInitialPhase) {
+    return 'none';
+  }
+  const isEntering = isInStack && isTop;
+  const isModalLike = ['modal', 'transparentModal', 'containedModal', 'containedTransparentModal', 'fullScreenModal', 'formSheet', 'pageSheet', 'sheet'].includes(presentation);
+  if (isModalLike) {
+    if (!isInStack) {
+      return getAnimationTypeForPresentation(presentation, false, direction);
+    }
+    if (isEntering) {
+      return getAnimationTypeForPresentation(presentation, true, direction);
+    }
+    return 'none';
+  }
+  if (!isInStack) {
+    if (direction === 'forward') {
+      return 'push-exit';
+    } else {
+      return 'pop-exit';
+    }
+  }
+  if (isTop) {
+    if (direction === 'forward') {
+      return 'push-enter';
+    } else {
+      return 'pop-enter';
+    }
+  }
+  if (direction === 'forward') {
+    return 'push-background';
+  } else {
+    return 'pop-background';
+  }
+}

package/lib/module/ScreenStackItem/ScreenStackItem.js

@@ -59,7 +59,8 @@ export const ScreenStackItem = /*#__PURE__*/memo(({
     children: /*#__PURE__*/_jsx(RouteLocalContext.Provider, {
       value: route,
       children: /*#__PURE__*/_jsx(item.component, {
-        ...item.passProps
+        ...item.passProps,
+        appearance: appearance
       })
     })
   }, item.key);