@sigmela/router 0.0.11

package/lib/module/Router.js

@@ -0,0 +1,571 @@
+"use strict";
+
+import { nanoid } from 'nanoid/non-secure';
+import qs from 'query-string';
+
+// Root transition option: allow string shorthand like 'fade'
+
+function isTabBarLike(obj) {
+  return obj != null && typeof obj === 'object' && 'onIndexChange' in obj && 'getState' in obj && 'subscribe' in obj && 'stacks' in obj;
+}
+function isNavigationStackLike(obj) {
+  return obj != null && typeof obj === 'object' && 'getRoutes' in obj && 'getId' in obj;
+}
+const EMPTY_ARRAY = [];
+export class Router {
+  tabBar = null;
+  root = null;
+  global = null;
+  listeners = new Set();
+  registry = [];
+  state = {
+    history: [],
+    activeTabIndex: undefined
+  };
+  // per-stack slices and listeners
+  stackSlices = new Map();
+  stackListeners = new Map();
+  activeTabListeners = new Set();
+  stackById = new Map();
+  routeById = new Map();
+  visibleRoute = null;
+  // Root structure listeners (TabBar ↔ NavigationStack changes)
+  rootListeners = new Set();
+  rootTransition = undefined;
+  constructor(config) {
+    this.routerScreenOptions = config.screenOptions;
+    if (isTabBarLike(config.root)) {
+      this.tabBar = config.root;
+    }
+    if (config.global) {
+      this.global = config.global;
+    }
+    this.root = config.root;
+    if (this.tabBar) {
+      this.state = {
+        history: [],
+        activeTabIndex: this.tabBar.getState().index
+      };
+    }
+    this.buildRegistry();
+    this.seedInitialHistory();
+    this.recomputeVisibleRoute();
+  }
+
+  // Public API
+  navigate = path => {
+    this.performNavigation(path, 'push');
+  };
+  replace = path => {
+    this.performNavigation(path, 'replace');
+  };
+  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);
+        }
+      }
+      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);
+        }
+      }
+    }
+  };
+  onTabIndexChange = index => {
+    if (this.tabBar) {
+      this.tabBar.onIndexChange(index);
+      this.setState({
+        activeTabIndex: index
+      });
+      this.emit(this.activeTabListeners);
+      this.recomputeVisibleRoute();
+      this.emit(this.listeners);
+    }
+  };
+  setActiveTabIndex = index => {
+    this.onTabIndexChange(index);
+  };
+  ensureTabSeed = index => {
+    if (!this.tabBar) return;
+    const state = this.tabBar.getState();
+    const route = state.tabs[index];
+    if (!route) return;
+    const key = route.tabKey;
+    const stack = this.tabBar.stacks[key];
+    if (!stack) return;
+    const hasAny = this.getStackHistory(stack.getId()).length > 0;
+    if (hasAny) return;
+    const first = stack.getFirstRoute();
+    if (!first) return;
+    const newItem = {
+      key: this.generateKey(),
+      scope: 'tab',
+      routeId: first.routeId,
+      component: first.component,
+      options: this.mergeOptions(first.options, stack.getId()),
+      params: {},
+      tabIndex: index,
+      stackId: stack.getId()
+    };
+    this.applyHistoryChange('push', newItem);
+  };
+  getState = () => {
+    return this.state;
+  };
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  // Per-stack subscriptions
+  getStackHistory = stackId => {
+    return this.stackSlices.get(stackId) ?? EMPTY_ARRAY;
+  };
+  subscribeStack = (stackId, cb) => {
+    if (!stackId) return () => {};
+    let set = this.stackListeners.get(stackId);
+    if (!set) {
+      set = new Set();
+      this.stackListeners.set(stackId, set);
+    }
+    set.add(cb);
+    return () => {
+      set.delete(cb);
+    };
+  };
+  getActiveTabIndex = () => {
+    return this.state.activeTabIndex ?? 0;
+  };
+  subscribeActiveTab = cb => {
+    this.activeTabListeners.add(cb);
+    return () => this.activeTabListeners.delete(cb);
+  };
+  getRootStackId() {
+    return isNavigationStackLike(this.root) ? this.root.getId() : undefined;
+  }
+  getGlobalStackId() {
+    return this.global?.getId();
+  }
+  hasTabBar() {
+    return !!this.tabBar;
+  }
+  subscribeRoot(listener) {
+    this.rootListeners.add(listener);
+    return () => this.rootListeners.delete(listener);
+  }
+  emitRootChange() {
+    this.rootListeners.forEach(l => l());
+  }
+  getRootTransition() {
+    return this.rootTransition;
+  }
+  setRoot(nextRoot, options) {
+    // Update root/tabBar references
+    this.tabBar = isTabBarLike(nextRoot) ? nextRoot : null;
+    this.root = nextRoot;
+
+    // Save requested transition (stackAnimation string)
+    this.rootTransition = options?.transition ?? undefined;
+
+    // If switching to TabBar, reset selected tab to the first one to avoid
+    // leaking previously selected tab across auth flow changes.
+    if (this.tabBar) {
+      this.tabBar.onIndexChange(0);
+    }
+
+    // Reset core structures (keep global reference as-is)
+    this.registry.length = 0;
+    this.stackSlices.clear();
+    this.stackById.clear();
+    this.routeById.clear();
+
+    // Reset state (activeTabIndex from tabBar if present)
+    this.state = {
+      history: [],
+      activeTabIndex: this.tabBar ? this.tabBar.getState().index : undefined
+    };
+
+    // Rebuild registry and seed new root
+    this.buildRegistry();
+    this.seedInitialHistory();
+    this.recomputeVisibleRoute();
+    this.emitRootChange();
+    this.emit(this.listeners);
+  }
+
+  // Visible route (global top if present, else active tab/root top)
+  getVisibleRoute = () => {
+    return this.visibleRoute;
+  };
+  recomputeVisibleRoute() {
+    // Global top
+    if (this.global) {
+      const gid = this.global.getId();
+      const gslice = this.getStackHistory(gid);
+      const gtop = gslice.length ? gslice[gslice.length - 1] : undefined;
+      if (gtop) {
+        const meta = this.routeById.get(gtop.routeId);
+        this.visibleRoute = meta ? {
+          ...meta,
+          routeId: gtop.routeId,
+          params: gtop.params,
+          query: gtop.query
+        } : {
+          routeId: gtop.routeId,
+          stackId: gtop.stackId,
+          params: gtop.params,
+          query: gtop.query,
+          scope: 'global'
+        };
+        return;
+      }
+    }
+
+    // TabBar
+    if (this.tabBar) {
+      const idx = this.getActiveTabIndex();
+      const state = this.tabBar.getState();
+      const route = state.tabs[idx];
+      if (route) {
+        const stack = this.tabBar.stacks[route.tabKey];
+        if (stack) {
+          const sid = stack.getId();
+          const slice = this.getStackHistory(sid);
+          const top = slice.length ? slice[slice.length - 1] : undefined;
+          if (top) {
+            const meta = this.routeById.get(top.routeId);
+            this.visibleRoute = meta ? {
+              ...meta,
+              routeId: top.routeId,
+              params: top.params,
+              query: top.query
+            } : {
+              routeId: top.routeId,
+              stackId: sid,
+              tabIndex: idx,
+              params: top.params,
+              query: top.query,
+              scope: 'tab'
+            };
+            return;
+          }
+        } else {
+          this.visibleRoute = {
+            routeId: `tab-screen-${idx}`,
+            tabIndex: idx,
+            scope: 'tab'
+          };
+          return;
+        }
+      }
+    }
+
+    // Root stack
+    if (this.root && isNavigationStackLike(this.root)) {
+      const sid = this.root.getId();
+      const slice = this.getStackHistory(sid);
+      const top = slice.length ? slice[slice.length - 1] : undefined;
+      if (top) {
+        const meta = this.routeById.get(top.routeId);
+        this.visibleRoute = meta ? {
+          ...meta,
+          routeId: top.routeId,
+          params: top.params,
+          query: top.query
+        } : {
+          routeId: top.routeId,
+          stackId: sid,
+          params: top.params,
+          query: top.query,
+          scope: 'root'
+        };
+        return;
+      }
+    }
+    this.visibleRoute = null;
+  }
+
+  // Internal navigation logic
+  performNavigation(path, action) {
+    const {
+      pathname,
+      query
+    } = this.parsePath(path);
+    const matched = this.matchRoute(pathname);
+    if (!matched) {
+      return;
+    }
+    if (matched.scope === 'tab' && this.tabBar && matched.tabIndex !== undefined) {
+      this.onTabIndexChange(matched.tabIndex);
+    }
+    const matchResult = matched.match(pathname);
+    const params = matchResult ? matchResult.params : undefined;
+
+    // Prevent duplicate push when navigating to the same screen already on top of its stack
+    if (action === 'push') {
+      const top = this.getTopForTarget(matched.stackId);
+      if (top && top.routeId === matched.routeId) {
+        const prev = top.params ? JSON.stringify(top.params) : '';
+        const next = params ? JSON.stringify(params) : '';
+        if (prev === next) {
+          return;
+        }
+      }
+    }
+
+    // If there's a controller, execute it first
+    if (matched.controller) {
+      const controllerInput = {
+        params,
+        query
+      };
+      const present = passProps => {
+        const newItem = this.createHistoryItem(matched, params, query, pathname, passProps);
+        this.applyHistoryChange(action, newItem);
+      };
+      matched.controller(controllerInput, present);
+      return;
+    }
+    const newItem = this.createHistoryItem(matched, params, query, pathname);
+    this.applyHistoryChange(action, newItem);
+  }
+  createHistoryItem(matched, params, query, pathname, passProps) {
+    return {
+      key: this.generateKey(),
+      scope: matched.scope,
+      routeId: matched.routeId,
+      component: matched.component,
+      options: this.mergeOptions(matched.options, matched.stackId),
+      params,
+      query: query,
+      passProps,
+      tabIndex: matched.tabIndex,
+      stackId: matched.stackId,
+      pattern: matched.path,
+      path: pathname
+    };
+  }
+
+  // Internal helpers
+  buildRegistry() {
+    this.registry.length = 0;
+    const addFromStack = (stack, scope, extras) => {
+      const stackId = stack.getId();
+      this.stackById.set(stackId, stack);
+      for (const r of stack.getRoutes()) {
+        this.registry.push({
+          routeId: r.routeId,
+          scope,
+          path: r.path,
+          match: r.match,
+          component: r.component,
+          controller: r.controller,
+          options: r.options,
+          tabIndex: extras.tabIndex,
+          stackId
+        });
+        this.routeById.set(r.routeId, {
+          path: r.path,
+          stackId,
+          tabIndex: extras.tabIndex,
+          scope
+        });
+      }
+      // init empty slice
+      if (!this.stackSlices.has(stackId)) this.stackSlices.set(stackId, EMPTY_ARRAY);
+    };
+    if (isNavigationStackLike(this.root)) {
+      addFromStack(this.root, 'root', {});
+    } else if (this.tabBar) {
+      const state = this.tabBar.getState();
+      state.tabs.forEach((tab, idx) => {
+        const stack = this.tabBar.stacks[tab.tabKey];
+        if (stack) {
+          addFromStack(stack, 'tab', {
+            tabIndex: idx
+          });
+        }
+      });
+    }
+    if (this.global) {
+      addFromStack(this.global, 'global', {});
+    }
+  }
+  seedInitialHistory() {
+    if (this.state.history.length > 0) return;
+    if (this.tabBar) {
+      const state = this.tabBar.getState();
+      const activeIdx = state.index ?? 0;
+      const route = state.tabs[activeIdx];
+      if (!route) return;
+      const stack = this.tabBar.stacks[route.tabKey];
+      if (stack) {
+        const first = stack.getFirstRoute();
+        if (first) {
+          const newItem = {
+            key: this.generateKey(),
+            scope: 'tab',
+            routeId: first.routeId,
+            component: first.component,
+            options: this.mergeOptions(first.options, stack.getId()),
+            params: {},
+            tabIndex: activeIdx,
+            stackId: stack.getId()
+          };
+          this.applyHistoryChange('push', newItem);
+        }
+      }
+      return;
+    }
+    if (isNavigationStackLike(this.root)) {
+      const first = this.root.getFirstRoute();
+      if (first) {
+        const newItem = {
+          key: this.generateKey(),
+          scope: 'root',
+          routeId: first.routeId,
+          component: first.component,
+          options: this.mergeOptions(first.options, this.root.getId()),
+          params: {},
+          stackId: this.root.getId()
+        };
+        this.applyHistoryChange('push', newItem);
+      }
+    }
+  }
+  matchRoute(path) {
+    for (const r of this.registry) {
+      if (r.match(path)) return r;
+    }
+    return undefined;
+  }
+  generateKey() {
+    return `route-${nanoid()}`;
+  }
+  parsePath(path) {
+    const parsed = qs.parseUrl(path);
+    return {
+      pathname: parsed.url,
+      query: parsed.query
+    };
+  }
+  applyHistoryChange(action, item) {
+    const sid = item.stackId;
+    if (action === 'push') {
+      this.setState({
+        history: [...this.state.history, item]
+      });
+      const prevSlice = this.stackSlices.get(sid) ?? EMPTY_ARRAY;
+      const nextSlice = [...prevSlice, item];
+      this.stackSlices.set(sid, nextSlice);
+      this.emit(this.stackListeners.get(sid));
+      this.recomputeVisibleRoute();
+      this.emit(this.listeners);
+    } else if (action === 'replace') {
+      const prevTop = this.state.history[this.state.history.length - 1];
+      const prevSid = prevTop?.stackId;
+      this.setState({
+        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);
+        this.emit(this.stackListeners.get(sid));
+      } else {
+        const prevSlice = this.stackSlices.get(sid) ?? EMPTY_ARRAY;
+        const nextSlice = prevSlice.length ? [...prevSlice.slice(0, -1), item] : [item];
+        this.stackSlices.set(sid, nextSlice);
+        this.emit(this.stackListeners.get(sid));
+      }
+      this.recomputeVisibleRoute();
+      this.emit(this.listeners);
+    } else if (action === 'pop') {
+      // Remove specific item by key from global history
+      const nextHist = this.state.history.filter(h => h.key !== item.key);
+      this.setState({
+        history: nextHist
+      });
+
+      // Update slice only if the last item matches the popped one
+      const prevSlice = this.stackSlices.get(sid) ?? EMPTY_ARRAY;
+      const last = prevSlice.length ? prevSlice[prevSlice.length - 1] : undefined;
+      if (last && last.key === item.key) {
+        const nextSlice = prevSlice.slice(0, -1);
+        this.stackSlices.set(sid, nextSlice);
+        this.emit(this.stackListeners.get(sid));
+      }
+      this.recomputeVisibleRoute();
+      this.emit(this.listeners);
+    }
+  }
+  setState(next) {
+    const prev = this.state;
+    const nextState = {
+      history: next.history ?? prev.history,
+      activeTabIndex: next.activeTabIndex ?? prev.activeTabIndex
+    };
+    this.state = nextState;
+    // Callers will emit updates explicitly.
+  }
+  emit(set) {
+    if (!set) return;
+    set.forEach(l => l());
+  }
+  getTopForTarget(stackId) {
+    if (!stackId) return undefined;
+    const slice = this.stackSlices.get(stackId) ?? EMPTY_ARRAY;
+    return slice.length ? slice[slice.length - 1] : undefined;
+  }
+  mergeOptions(routeOptions, stackId) {
+    const stackDefaults = stackId ? this.findStackById(stackId)?.getDefaultOptions() : undefined;
+    const routerDefaults = this.routerScreenOptions;
+    if (!routerDefaults && !stackDefaults && !routeOptions) return undefined;
+    const merged = {
+      ...(stackDefaults ?? {}),
+      ...(routeOptions ?? {}),
+      ...(routerDefaults ?? {})
+    };
+    return merged;
+  }
+  findStackById(stackId) {
+    return this.stackById.get(stackId);
+  }
+}

package/lib/module/RouterContext.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import React, { createContext, useContext } from 'react';
+export const RouterContext = /*#__PURE__*/createContext(null);
+export const RouteLocalContext = /*#__PURE__*/createContext(null);
+export const useRouter = () => {
+  const ctx = useContext(RouterContext);
+  if (ctx == null) {
+    throw new Error('useRouter must be used within RouterContext.Provider');
+  }
+  return ctx;
+};
+export const useCurrentRoute = () => {
+  const router = useRouter();
+  const subscribe = React.useCallback(cb => router.subscribe(cb), [router]);
+  const get = React.useCallback(() => router.getVisibleRoute(), [router]);
+  return React.useSyncExternalStore(subscribe, get, get);
+};
+export function useParams() {
+  const local = React.useContext(RouteLocalContext);
+  return local?.params ?? {};
+}
+export function useQueryParams() {
+  const local = React.useContext(RouteLocalContext);
+  return local?.query ?? {};
+}
+export function useRoute() {
+  const local = React.useContext(RouteLocalContext);
+  if (!local) {
+    throw new Error('useRoute must be used within RouterLocalContext.Provider');
+  }
+  return local;
+}

package/lib/module/ScreenStackItem.js

@@ -0,0 +1,61 @@
+"use strict";
+
+import { ScreenStackItem as RNSScreenStackItem } from 'react-native-screens';
+import { RouteLocalContext, useRouter } from "./RouterContext.js";
+import { StyleSheet } from 'react-native';
+import { memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ScreenStackItem = /*#__PURE__*/memo(({
+  item,
+  stackId,
+  stackAnimation,
+  screenStyle
+}) => {
+  const router = useRouter();
+  const onDismissed = () => {
+    if (stackId) {
+      const history = router.getStackHistory(stackId);
+      const topKey = history.length ? history[history.length - 1]?.key : null;
+      if (topKey && topKey === item.key) {
+        router.goBack();
+      }
+    }
+  };
+  const value = {
+    presentation: item.options?.stackPresentation ?? 'push',
+    params: item.params,
+    query: item.query,
+    pattern: item.pattern,
+    path: item.path
+  };
+  const {
+    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
+  };
+
+  // console.log('headerConfig', headerAppearance, item.key);
+  return /*#__PURE__*/_jsx(RNSScreenStackItem, {
+    screenId: item.key,
+    onDismissed: onDismissed,
+    style: StyleSheet.absoluteFill,
+    contentStyle: screenStyle,
+    headerConfig: headerConfig,
+    ...screenProps,
+    stackAnimation: stackAnimation ?? item.options?.stackAnimation,
+    children: /*#__PURE__*/_jsx(RouteLocalContext.Provider, {
+      value: value,
+      children: /*#__PURE__*/_jsx(item.component, {
+        ...(item.passProps || {})
+      })
+    })
+  }, item.key);
+});

package/lib/module/StackRenderer.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import { memo, useCallback, useSyncExternalStore } from 'react';
+import { ScreenStackItem } from "./ScreenStackItem.js";
+import { ScreenStack } from 'react-native-screens';
+import { useRouter } from "./RouterContext.js";
+import { StyleSheet } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const StackRenderer = /*#__PURE__*/memo(({
+  stack
+}) => {
+  const router = useRouter();
+  const stackId = stack.getId();
+  const subscribe = useCallback(cb => router.subscribeStack(stackId, cb), [router, stackId]);
+  const get = useCallback(() => router.getStackHistory(stackId), [router, stackId]);
+  const historyForThisStack = useSyncExternalStore(subscribe, get, get);
+  return /*#__PURE__*/_jsx(ScreenStack, {
+    style: styles.flex,
+    children: historyForThisStack.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
+      item: item,
+      stackId: stackId
+    }, item.key))
+  });
+});
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1
+  }
+});