@sigmela/router 0.1.2 → 0.2.0

package/lib/module/TabBar/RenderTabBar.web.js

@@ -4,7 +4,7 @@ import { StackRenderer } from "../StackRenderer.js";
 import { TabBarContext } from "./TabBarContext.js";
 import { useRouter } from "../RouterContext.js";
 import { TabIcon } from './TabIcon';
-import { useCallback, useSyncExternalStore, memo, useEffect, useMemo } from 'react';
+import { useCallback, useSyncExternalStore, memo, useMemo } from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isImageSource = value => {
   if (value == null) return false;
@@ -18,9 +18,22 @@ const isImageSource = value => {
   return false;
 };
 const toColorString = c => typeof c === 'string' ? c : undefined;
-
-//
-
+const TabStackRenderer = /*#__PURE__*/memo(({
+  stack,
+  appearance
+}) => {
+  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 history = useSyncExternalStore(subscribe, get, get);
+  return /*#__PURE__*/_jsx(StackRenderer, {
+    appearance: appearance,
+    stack: stack,
+    history: history
+  });
+});
+TabStackRenderer.displayName = 'TabStackRenderer';
 export const RenderTabBar = /*#__PURE__*/memo(({
   tabBar,
   appearance
@@ -33,9 +46,6 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     index,
     config
   } = snapshot;
-  useEffect(() => {
-    router.ensureTabSeed(index);
-  }, [index, router]);
   const focusedTab = tabs[index];
   const stack = focusedTab ? tabBar.stacks[focusedTab.tabKey] : undefined;
   const Screen = focusedTab ? tabBar.screens[focusedTab.tabKey] : undefined;
@@ -44,22 +54,21 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     if (!targetTab) return;
     const targetStack = tabBar.stacks[targetTab.tabKey];
     if (targetStack) {
-      // Prefer last visited route in the target stack; otherwise first route
-      const stackId = targetStack.getId();
-      const history = router.getStackHistory(stackId);
-      const last = history.length ? history[history.length - 1] : undefined;
-      const toPath = last?.path ?? targetStack.getFirstRoute()?.path;
-      if (toPath) {
-        const currentPath = router.getVisibleRoute()?.path;
-        if (nextIndex === index && toPath === currentPath) return;
-        // Use replace to avoid duplicating history entries when switching tabs
-        router.replace(toPath, true);
+      // Keep TabBar UI in sync immediately.
+      if (nextIndex !== index) {
+        tabBar.onIndexChange(nextIndex);
+      }
+      const firstRoutePath = targetStack.getFirstRoute()?.path;
+      if (firstRoutePath) {
+        // Web behavior: reset all preserved stacks when switching tabs.
+        // This keeps browser URL and Router state always consistent.
+        router.reset(firstRoutePath);
         return;
       }
     }
-
-    // Fallback: just switch tab index (no history push if there is no path)
-    router.onTabIndexChange(nextIndex);
+    if (nextIndex !== index) {
+      tabBar.onIndexChange(nextIndex);
+    }
   }, [router, tabBar, tabs, index]);
   const tabBarStyle = useMemo(() => {
     const tabBarBg = toColorString(appearance?.tabBar?.backgroundColor);
@@ -73,27 +82,23 @@ export const RenderTabBar = /*#__PURE__*/memo(({
     fontWeight: appearance?.tabBar?.title?.fontWeight,
     fontStyle: appearance?.tabBar?.title?.fontStyle
   }), [appearance?.tabBar?.title?.fontFamily, appearance?.tabBar?.title?.fontSize, appearance?.tabBar?.title?.fontWeight, appearance?.tabBar?.title?.fontStyle]);
-
-  // If a custom component is provided, render it instead of the default web tab bar
   const CustomTabBar = config.component;
-  return /*#__PURE__*/_jsx("div", {
-    className: "screen-stack-item",
-    "data-presentation": "push",
-    "data-phase": "active",
-    children: /*#__PURE__*/_jsx(TabBarContext.Provider, {
-      value: tabBar,
-      children: /*#__PURE__*/_jsxs("div", {
-        className: "tab-stacks-container",
-        children: [stack ? /*#__PURE__*/_jsx(StackRenderer, {
-          appearance: appearance,
-          stack: stack
-        }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null, CustomTabBar ? /*#__PURE__*/_jsx(CustomTabBar, {
-          onTabPress: onTabClick,
-          activeIndex: index,
-          tabs: tabs
-        }) : /*#__PURE__*/_jsx("div", {
-          className: "tab-bar",
-          style: tabBarStyle,
+  return /*#__PURE__*/_jsx(TabBarContext.Provider, {
+    value: tabBar,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "tab-stacks-container",
+      children: [stack ? /*#__PURE__*/_jsx(TabStackRenderer, {
+        appearance: appearance,
+        stack: stack
+      }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null, CustomTabBar ? /*#__PURE__*/_jsx(CustomTabBar, {
+        onTabPress: onTabClick,
+        activeIndex: index,
+        tabs: tabs
+      }) : /*#__PURE__*/_jsx("div", {
+        className: "tab-bar",
+        style: tabBarStyle,
+        children: /*#__PURE__*/_jsx("div", {
+          className: "tab-bar-inner",
           children: tabs.map((tab, i) => {
             const isActive = i === index;
             const iconTint = toColorString(isActive ? appearance?.tabBar?.iconColorActive : appearance?.tabBar?.iconColor);
@@ -113,18 +118,18 @@ export const RenderTabBar = /*#__PURE__*/memo(({
                   source: tab.icon,
                   tintColor: iconTint
                 }) : null
-              }), tab.badgeValue ? /*#__PURE__*/_jsx("span", {
-                className: "tab-item-label-badge",
-                children: tab.badgeValue
-              }) : null, /*#__PURE__*/_jsx("div", {
+              }), /*#__PURE__*/_jsx("div", {
                 className: "tab-item-label",
                 style: labelStyle,
                 children: tab.title
-              })]
+              }), tab.badgeValue ? /*#__PURE__*/_jsx("span", {
+                className: "tab-item-label-badge",
+                children: tab.badgeValue
+              }) : null]
             }, tab.tabKey);
           })
-        })]
-      })
+        })
+      })]
     })
   });
 });

package/lib/module/TabBar/TabBar.js

@@ -1,12 +1,16 @@
 "use strict";
 
-// Internal representation used by TabBar to support unified icon source while keeping original android props
+import React from 'react';
+import { RenderTabBar } from './RenderTabBar';
+
+// Legacy icon format for backward compatibility
 
 export class TabBar {
   screens = {};
   stacks = {};
   listeners = new Set();
   constructor(options = {}) {
+    this.tabBarId = `tabbar-${Math.random().toString(36).slice(2)}`;
     this.state = {
       tabs: [],
       index: options.initialIndex ?? 0,
@@ -15,6 +19,9 @@ export class TabBar {
       }
     };
   }
+  getId() {
+    return this.tabBarId;
+  }
   addTab(tab) {
     const {
       key,
@@ -22,9 +29,12 @@ export class TabBar {
     } = tab;
     const nextIndex = this.state.tabs.length;
     const tabKey = key ?? `tab-${nextIndex}`;
-    this.state.tabs.push({
+    const nextTabs = [...this.state.tabs, {
       tabKey,
       ...rest
+    }];
+    this.setState({
+      tabs: nextTabs
     });
     if (tab.stack) {
       this.stacks[tabKey] = tab.stack;
@@ -65,7 +75,18 @@ export class TabBar {
     this.notifyListeners();
   }
   notifyListeners() {
-    this.listeners.forEach(listener => listener());
+    // Do not allow one listener to break all others.
+    for (const listener of Array.from(this.listeners)) {
+      try {
+        listener();
+      } catch (e) {
+        // TabBar has no debug flag; keep behavior quiet in production.
+        if (__DEV__) {
+          // eslint-disable-next-line no-console
+          console.error('[TabBar] listener error', e);
+        }
+      }
+    }
   }
   subscribe(listener) {
     this.listeners.add(listener);
@@ -73,4 +94,97 @@ export class TabBar {
       this.listeners.delete(listener);
     };
   }
+  getTabs() {
+    return this.state.tabs.slice();
+  }
+  getInitialIndex() {
+    return this.state.index ?? 0;
+  }
+  getActiveChildId() {
+    const activeTab = this.state.tabs[this.state.index];
+    if (!activeTab) return undefined;
+    const stack = this.stacks[activeTab.tabKey];
+    return stack?.getId();
+  }
+  switchToRoute(routeId) {
+    const idx = this.findTabIndexByRoute(routeId);
+    if (idx === -1) return;
+    if (idx === this.state.index) return;
+    this.setState({
+      index: idx
+    });
+  }
+  hasRoute(routeId) {
+    return this.findTabIndexByRoute(routeId) !== -1;
+  }
+  setActiveChildByRoute(routeId) {
+    this.switchToRoute(routeId);
+  }
+  getNodeRoutes() {
+    return [];
+  }
+  getNodeChildren() {
+    const children = [];
+    for (let idx = 0; idx < this.state.tabs.length; idx++) {
+      const tab = this.state.tabs[idx];
+      const stack = tab ? this.stacks[tab.tabKey] : undefined;
+      if (stack) {
+        children.push({
+          prefix: '',
+          node: stack,
+          onMatch: () => this.onIndexChange(idx)
+        });
+      }
+    }
+    return children;
+  }
+  getRenderer() {
+    // eslint-disable-next-line consistent-this
+    const tabBarInstance = this;
+    return function TabBarScreen(props) {
+      return /*#__PURE__*/React.createElement(RenderTabBar, {
+        tabBar: tabBarInstance,
+        appearance: props?.appearance
+      });
+    };
+  }
+  seed() {
+    const activeTab = this.state.tabs[this.state.index];
+    if (!activeTab) return null;
+    const stack = this.stacks[activeTab.tabKey];
+    if (!stack) return null;
+    const firstRoute = stack.getFirstRoute();
+    if (!firstRoute) return null;
+    return {
+      routeId: firstRoute.routeId,
+      path: firstRoute.path,
+      stackId: stack.getId()
+    };
+  }
+  findTabIndexByRoute(routeId) {
+    for (let i = 0; i < this.state.tabs.length; i++) {
+      const tab = this.state.tabs[i];
+      const stack = tab && this.stacks[tab.tabKey];
+      if (!stack) continue;
+      const hasRoute = this.nodeHasRoute(stack, routeId);
+      if (hasRoute) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  nodeHasRoute(node, routeId) {
+    const routes = node.getNodeRoutes();
+    for (const r of routes) {
+      if (r.routeId === routeId) return true;
+      if (r.childNode) {
+        if (this.nodeHasRoute(r.childNode, routeId)) return true;
+      }
+    }
+    const children = node.getNodeChildren();
+    for (const child of children) {
+      if (this.nodeHasRoute(child.node, routeId)) return true;
+    }
+    return false;
+  }
 }

package/lib/module/TabBar/index.js

@@ -1,3 +1,6 @@
 "use strict";
 
-export { RenderTabBar } from './RenderTabBar';
+export { RenderTabBar } from './RenderTabBar';
+export { TabBar } from "./TabBar.js";
+export { useTabBar } from "./useTabBar.js";
+export { useTabBarHeight, TAB_BAR_HEIGHT } from "./useTabBarHeight.js";

package/lib/module/TabBar/useTabBarHeight.js

@@ -0,0 +1,22 @@
+"use strict";
+
+/**
+ * The height of the TabBar in pixels
+ */
+export const TAB_BAR_HEIGHT = 57;
+
+/**
+ * Hook that returns the height of the TabBar
+ * @returns {number} The height of the TabBar in pixels
+ * 
+ * @example
+ * ```tsx
+ * const TabBarExample = () => {
+ *   const tabBarHeight = useTabBarHeight();
+ *   return <div style={{ paddingBottom: tabBarHeight }}>Content</div>;
+ * };
+ * ```
+ */
+export const useTabBarHeight = () => {
+  return TAB_BAR_HEIGHT;
+};

package/lib/module/index.js

@@ -1,11 +1,10 @@
 "use strict";
 
 export { useTabBar } from "./TabBar/useTabBar.js";
+export { useTabBarHeight, TAB_BAR_HEIGHT } from "./TabBar/useTabBarHeight.js";
 export { TabBar } from "./TabBar/TabBar.js";
-/**
- * Navigation System
- */
-
+export { SplitView } from "./SplitView/SplitView.js";
+export { useSplitView } from "./SplitView/useSplitView.js";
 export { Router } from "./Router.js";
 export { Navigation } from "./Navigation.js";
 export { createController } from "./createController.js";

package/lib/module/navigationNode.js

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