@sigmela/router 0.0.13 → 0.0.15

package/lib/module/Navigation.js

@@ -1,11 +1,13 @@
 "use strict";
 
-import { ScreenStack, ScreenStackItem as RNNScreenStackItem } from 'react-native-screens';
-import { memo, useCallback, useEffect, useState, useSyncExternalStore } from 'react';
-import { RenderTabBar } from "./TabBar/RenderTabBar.js";
-import { ScreenStackItem } from "./ScreenStackItem.js";
+// import { ScreenStackItem as RNNScreenStackItem } from 'react-native-screens';
+
+import { RenderTabBar } from './TabBar/RenderTabBar';
+import { ScreenStackItem } from "./ScreenStackItem/index.js";
 import { RouterContext } from "./RouterContext.js";
+import { ScreenStack } from "./ScreenStack/index.js";
 import { StyleSheet } from 'react-native';
+import { useSyncExternalStore, memo, useCallback, useEffect, useState } from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const EMPTY_HISTORY = [];
 function useStackHistory(router, stackId) {
@@ -41,29 +43,19 @@ export const Navigation = /*#__PURE__*/memo(({
     value: router,
     children: /*#__PURE__*/_jsxs(ScreenStack, {
       style: styles.flex,
-      children: [hasTabBar && /*#__PURE__*/_jsx(RNNScreenStackItem, {
-        screenId: "root-tabbar",
-        headerConfig: {
-          hidden: true
-        },
-        style: styles.flex,
-        stackAnimation: rootTransition,
-        children: /*#__PURE__*/_jsx(RenderTabBar, {
-          tabBar: router.tabBar,
-          appearance: appearance
-        })
+      children: [hasTabBar && /*#__PURE__*/_jsx(RenderTabBar, {
+        tabBar: router.tabBar,
+        appearance: appearance
       }), rootItems.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
         stackId: rootId,
         item: item,
         stackAnimation: rootTransition,
-        screenStyle: appearance?.screenStyle,
-        headerAppearance: appearance?.header
-      }, item.key)), globalItems.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
+        appearance: appearance
+      }, `root-${item.key}`)), globalItems.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
+        appearance: appearance,
         stackId: globalId,
-        item: item,
-        screenStyle: appearance?.screenStyle,
-        headerAppearance: appearance?.header
-      }, item.key))]
+        item: item
+      }, `global-${item.key}`))]
     })
   });
 });

package/lib/module/Router.js

@@ -48,59 +48,45 @@ export class Router {
       };
     }
     this.buildRegistry();
-    this.seedInitialHistory();
+    if (this.isWebEnv()) {
+      this.setupBrowserHistory();
+      this.parse(this.getCurrentUrl());
+    } else {
+      this.seedInitialHistory();
+    }
     this.recomputeVisibleRoute();
   }
 
   // Public API
   navigate = path => {
+    if (this.isWebEnv()) {
+      this.pushUrl(path);
+      return;
+    }
     this.performNavigation(path, 'push');
   };
-  replace = path => {
-    this.performNavigation(path, 'replace');
+  replace = (path, dedupe) => {
+    if (this.isWebEnv()) {
+      this.pendingReplaceDedupe = !!dedupe;
+      this.replaceUrl(path);
+      return;
+    }
+    this.performNavigation(path, 'replace', {
+      dedupe: !!dedupe
+    });
   };
   goBack = () => {
-    // Global layer wins
-    if (this.global) {
-      const gid = this.global.getId();
-      const gslice = this.getStackHistory(gid);
-      const gtop = gslice.length ? gslice[gslice.length - 1] : undefined;
-      if (gtop) {
-        this.applyHistoryChange('pop', gtop);
-        return;
-      }
-    }
-
-    // Tab layer
-    if (this.tabBar) {
-      const idx = this.getActiveTabIndex();
-      const state = this.tabBar.getState();
-      const route = state.tabs[idx];
-      if (!route) return;
-      const stack = this.tabBar.stacks[route.tabKey];
-      if (!stack) return;
-      const sid = stack.getId();
-      const slice = this.getStackHistory(sid);
-      if (slice.length > 1) {
-        const top = slice[slice.length - 1];
-        if (top) {
-          this.applyHistoryChange('pop', top);
-        }
+    if (this.isWebEnv()) {
+      // Web: only go back within the current active stack.
+      const didPop = this.tryPopActiveStack();
+      if (didPop) {
+        // Keep URL in sync with the new visible route without adding history entries
+        const path = this.getVisibleRoute()?.path;
+        if (path) this.replaceUrl(path);
       }
       return;
     }
-
-    // Root layer
-    if (isNavigationStackLike(this.root)) {
-      const sid = this.root.getId();
-      const slice = this.getStackHistory(sid);
-      if (slice.length > 1) {
-        const top = slice[slice.length - 1];
-        if (top) {
-          this.applyHistoryChange('pop', top);
-        }
-      }
-    }
+    this.popOnce();
   };
   onTabIndexChange = index => {
     if (this.tabBar) {
@@ -242,7 +228,8 @@ export class Router {
           ...meta,
           routeId: gtop.routeId,
           params: gtop.params,
-          query: gtop.query
+          query: gtop.query,
+          path: gtop.path
         } : {
           routeId: gtop.routeId,
           stackId: gtop.stackId,
@@ -271,7 +258,8 @@ export class Router {
               ...meta,
               routeId: top.routeId,
               params: top.params,
-              query: top.query
+              query: top.query,
+              path: top.path
             } : {
               routeId: top.routeId,
               stackId: sid,
@@ -304,7 +292,8 @@ export class Router {
           ...meta,
           routeId: top.routeId,
           params: top.params,
-          query: top.query
+          query: top.query,
+          path: top.path
         } : {
           routeId: top.routeId,
           stackId: sid,
@@ -319,7 +308,7 @@ export class Router {
   }
 
   // Internal navigation logic
-  performNavigation(path, action) {
+  performNavigation(path, action, opts) {
     const {
       pathname,
       query
@@ -346,6 +335,19 @@ export class Router {
       }
     }
 
+    // Optional dedupe for replace: no-op when nothing changes at the top
+    if (action === 'replace' && opts?.dedupe) {
+      const top = this.getTopForTarget(matched.stackId);
+      if (top && top.routeId === matched.routeId) {
+        const sameParams = JSON.stringify(top.params ?? {}) === JSON.stringify(params ?? {});
+        const sameQuery = JSON.stringify(top.query ?? {}) === JSON.stringify(query ?? {});
+        const samePath = (top.path ?? '') === pathname;
+        if (sameParams && sameQuery && samePath) {
+          return;
+        }
+      }
+    }
+
     // If there's a controller, execute it first
     if (matched.controller) {
       const controllerInput = {
@@ -501,15 +503,27 @@ export class Router {
         history: [...this.state.history.slice(0, -1), item]
       });
       if (prevSid && prevSid !== sid) {
-        const prevSlice = this.stackSlices.get(prevSid) ?? EMPTY_ARRAY;
-        const trimmed = prevSlice.slice(0, -1);
-        this.stackSlices.set(prevSid, trimmed);
-        this.emit(this.stackListeners.get(prevSid));
-        const newSlice = this.stackSlices.get(sid) ?? EMPTY_ARRAY;
-        const appended = [...newSlice, item];
-        this.stackSlices.set(sid, appended);
+        // Cross-stack replace: do not modify the source stack.
+        // Update target stack without growing it unnecessarily.
+        const targetSlice = this.stackSlices.get(sid) ?? EMPTY_ARRAY;
+        if (targetSlice.length === 0) {
+          this.stackSlices.set(sid, [item]);
+        } else {
+          const targetTop = targetSlice[targetSlice.length - 1];
+          const sameRoute = targetTop?.routeId === item.routeId;
+          const sameParams = JSON.stringify(targetTop?.params ?? {}) === JSON.stringify(item.params ?? {});
+          if (sameRoute && sameParams) {
+            // No change needed for target stack
+            this.stackSlices.set(sid, targetSlice);
+          } else {
+            // Replace top of target stack
+            const replaced = [...targetSlice.slice(0, -1), item];
+            this.stackSlices.set(sid, replaced);
+          }
+        }
         this.emit(this.stackListeners.get(sid));
       } else {
+        // Same-stack replace: replace top element
         const prevSlice = this.stackSlices.get(sid) ?? EMPTY_ARRAY;
         const nextSlice = prevSlice.length ? [...prevSlice.slice(0, -1), item] : [item];
         this.stackSlices.set(sid, nextSlice);
@@ -568,4 +582,237 @@ export class Router {
   findStackById(stackId) {
     return this.stackById.get(stackId);
   }
+
+  // ==== Web integration (History API) ====
+  isWebEnv() {
+    const g = globalThis;
+    return !!(g.addEventListener && g.history && g.location);
+  }
+  getCurrentUrl() {
+    const g = globalThis;
+    return g.location ? `${g.location.pathname}${g.location.search}` : '/';
+  }
+  readIndex(state) {
+    if (state && typeof state === 'object' && '__srIndex' in state) {
+      const idx = state.__srIndex;
+      if (typeof idx === 'number') return idx;
+    }
+    return 0;
+  }
+  getHistoryIndex() {
+    const g = globalThis;
+    return this.readIndex(g.history?.state);
+  }
+  ensureHistoryIndex() {
+    const g = globalThis;
+    const st = g.history?.state ?? {};
+    if (this.readIndex(st) === 0 && !(st && typeof st === 'object' && '__srIndex' in st)) {
+      const next = {
+        ...st,
+        __srIndex: 0
+      };
+      try {
+        g.history?.replaceState(next, '', g.location?.href);
+      } catch {
+        // ignore
+      }
+    }
+  }
+  pushUrl(to) {
+    const g = globalThis;
+    const st = g.history?.state ?? {};
+    const prev = this.readIndex(st);
+    const next = {
+      ...st,
+      __srIndex: prev + 1
+    };
+    g.history?.pushState(next, '', to);
+    if (g.Event && g.dispatchEvent) {
+      g.dispatchEvent(new g.Event('pushState'));
+    }
+  }
+  replaceUrl(to) {
+    const g = globalThis;
+    const st = g.history?.state ?? {};
+    g.history?.replaceState(st, '', to);
+    if (g.Event && g.dispatchEvent) {
+      g.dispatchEvent(new g.Event('replaceState'));
+    }
+  }
+  patchHistoryOnce() {
+    const g = globalThis;
+    const key = Symbol.for('sigmela_router_history_patch');
+    if (g[key]) return;
+    const hist = g.history;
+    if (hist && hist.pushState && hist.replaceState) {
+      const originalPush = hist.pushState.bind(hist);
+      const originalReplace = hist.replaceState.bind(hist);
+      hist.pushState = (data, unused, url) => {
+        const res = originalPush(data, unused, url);
+        if (g.Event && g.dispatchEvent) {
+          g.dispatchEvent(new g.Event('pushState'));
+        }
+        return res;
+      };
+      hist.replaceState = (data, unused, url) => {
+        const res = originalReplace(data, unused, url);
+        if (g.Event && g.dispatchEvent) {
+          g.dispatchEvent(new g.Event('replaceState'));
+        }
+        return res;
+      };
+    }
+    g[key] = true;
+  }
+  lastBrowserIndex = 0;
+  pendingReplaceDedupe = false;
+  setupBrowserHistory() {
+    const g = globalThis;
+    this.patchHistoryOnce();
+    this.ensureHistoryIndex();
+    this.lastBrowserIndex = this.getHistoryIndex();
+    const onHistory = ev => {
+      const url = this.getCurrentUrl();
+      if (ev.type === 'pushState') {
+        this.lastBrowserIndex = this.getHistoryIndex();
+        this.performNavigation(url, 'push');
+        return;
+      }
+      if (ev.type === 'replaceState') {
+        const dedupe = this.pendingReplaceDedupe === true;
+        this.performNavigation(url, 'replace', {
+          dedupe
+        });
+        this.lastBrowserIndex = this.getHistoryIndex();
+        this.pendingReplaceDedupe = false;
+        return;
+      }
+      if (ev.type === 'popstate') {
+        const idx = this.getHistoryIndex();
+        const delta = idx - this.lastBrowserIndex;
+        if (delta < 0) {
+          let steps = -delta;
+          while (steps-- > 0) this.popOnce();
+          const target = this.parsePath(url).pathname;
+          const current = this.getVisibleRoute()?.path;
+          if (current !== target) this.performNavigation(url, 'replace');
+        } else if (delta > 0) {
+          this.performNavigation(url, 'push');
+        } else {
+          this.performNavigation(url, 'replace');
+        }
+        this.lastBrowserIndex = idx;
+      }
+    };
+    g.addEventListener?.('pushState', onHistory);
+    g.addEventListener?.('replaceState', onHistory);
+    g.addEventListener?.('popstate', onHistory);
+  }
+  popOnce() {
+    if (this.tryPopActiveStack()) return;
+  }
+
+  // Attempts to pop exactly one screen within the active stack only.
+  // Returns true if a pop occurred; false otherwise.
+  tryPopActiveStack() {
+    if (this.global) {
+      const gid = this.global.getId();
+      const gslice = this.getStackHistory(gid);
+      const gtop = gslice.length ? gslice[gslice.length - 1] : undefined;
+      if (gtop) {
+        this.applyHistoryChange('pop', gtop);
+        return true;
+      }
+    }
+    if (this.tabBar) {
+      const idx = this.getActiveTabIndex();
+      const state = this.tabBar.getState();
+      const route = state.tabs[idx];
+      if (!route) return false;
+      const stack = this.tabBar.stacks[route.tabKey];
+      if (!stack) return false;
+      const sid = stack.getId();
+      const slice = this.getStackHistory(sid);
+      if (slice.length > 1) {
+        const top = slice[slice.length - 1];
+        if (top) {
+          this.applyHistoryChange('pop', top);
+          return true;
+        }
+      }
+      return false;
+    }
+    if (isNavigationStackLike(this.root)) {
+      const sid = this.root.getId();
+      const slice = this.getStackHistory(sid);
+      if (slice.length > 1) {
+        const top = slice[slice.length - 1];
+        if (top) {
+          this.applyHistoryChange('pop', top);
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  // Expand deep URL into a stack chain on initial load
+  parse(url) {
+    const {
+      pathname,
+      query
+    } = this.parsePath(url);
+    const deepest = this.matchRoute(pathname);
+    if (!deepest) {
+      this.seedInitialHistory();
+      return;
+    }
+    if (deepest.scope === 'tab' && this.tabBar && deepest.tabIndex !== undefined) {
+      this.onTabIndexChange(deepest.tabIndex);
+    }
+    const parts = pathname.split('/').filter(Boolean);
+    const prefixes = new Array(parts.length + 1);
+    let acc = '';
+    prefixes[0] = '/';
+    for (let i = 0; i < parts.length; i++) {
+      acc += `/${parts[i]}`;
+      prefixes[i + 1] = acc;
+    }
+    const candidates = [];
+    for (const route of this.registry) {
+      if (route.stackId !== deepest.stackId || route.scope !== deepest.scope) {
+        continue;
+      }
+      const segmentsCount = route.path.split('/').filter(Boolean).length;
+      const candidateUrl = prefixes[segmentsCount];
+      if (!candidateUrl) {
+        continue;
+      }
+      const matchResult = route.match(candidateUrl);
+      if (!matchResult) {
+        continue;
+      }
+      candidates.push({
+        params: matchResult.params,
+        segmentCount: segmentsCount,
+        candidateUrl,
+        route
+      });
+    }
+    if (!candidates.length) {
+      this.seedInitialHistory();
+      return;
+    }
+    candidates.sort((a, b) => a.segmentCount - b.segmentCount);
+    const items = candidates.map((c, i) => this.createHistoryItem(c.route, c.params, i === candidates.length - 1 ? query : {}, c.candidateUrl));
+    const first = items[0];
+    const sid = first?.stackId ?? deepest.stackId;
+    this.setState({
+      history: items
+    });
+    if (sid) {
+      this.stackSlices.set(sid, items);
+      this.emit(this.stackListeners.get(sid));
+    }
+  }
 }

package/lib/module/ScreenStack/ScreenStack.native.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { ScreenStack } from 'react-native-screens';

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

@@ -0,0 +1,139 @@
+"use strict";
+
+import { Fragment, memo, useRef } from 'react';
+import TransitionStack from "../web/TransitionStack.js";
+import { Children, cloneElement, useLayoutEffect, useMemo, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ScreenStack = /*#__PURE__*/memo(props => {
+  const {
+    children,
+    transitionTime = 250,
+    type,
+    animated = true
+  } = props;
+  const [records, setRecords] = useState([]);
+  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'
+        });
+        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'
+          })
+        }];
+      }
+      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'
+        });
+        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]);
+  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)];
+        });
+      }
+    });
+  }, [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;
+      }
+      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))
+  });
+});

package/lib/module/ScreenStack/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { ScreenStack } from './ScreenStack';

package/lib/module/{ScreenStackItem.js → ScreenStackItem/ScreenStackItem.js}

@@ -1,7 +1,7 @@
 "use strict";
 
 import { ScreenStackItem as RNSScreenStackItem } from 'react-native-screens';
-import { RouteLocalContext, useRouter } from "./RouterContext.js";
+import { RouteLocalContext, useRouter } from "../RouterContext.js";
 import { StyleSheet } from 'react-native';
 import { memo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -9,7 +9,7 @@ export const ScreenStackItem = /*#__PURE__*/memo(({
   item,
   stackId,
   stackAnimation,
-  screenStyle
+  appearance
 }) => {
   const router = useRouter();
   const onDismissed = () => {
@@ -32,22 +32,16 @@ export const ScreenStackItem = /*#__PURE__*/memo(({
     header,
     ...screenProps
   } = item.options || {};
-  // Merge global header appearance with per-screen header options
-  // const mergedHeader = {
-  //   ...(headerAppearance ?? {}),
-  //   ...(header ?? {}),
-  // } as any;
-  // Hide header by default if not specified
-  const headerConfig = header ?? {
-    hidden: true
+  const headerConfig = {
+    ...header,
+    hidden: !header?.title || header?.hidden,
+    backgroundColor: appearance?.header?.backgroundColor ?? 'transparent'
   };
-
-  // console.log('headerConfig', headerAppearance, item.key);
   return /*#__PURE__*/_jsx(RNSScreenStackItem, {
     screenId: item.key,
     onDismissed: onDismissed,
     style: StyleSheet.absoluteFill,
-    contentStyle: screenStyle,
+    contentStyle: appearance?.screen,
     headerConfig: headerConfig,
     ...screenProps,
     stackAnimation: stackAnimation ?? item.options?.stackAnimation,

package/lib/module/ScreenStackItem/ScreenStackItem.types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export {};