@sigmela/router 0.2.2 → 0.2.4

package/lib/module/SplitView/RenderSplitView.native.js

@@ -1,85 +1,78 @@
 "use strict";
 
-import { StackRenderer } from "../StackRenderer.js";
+import { ScreenStackItem } from "../ScreenStackItem/index.js";
+import { ScreenStack } from "../ScreenStack/index.js";
 import { SplitViewContext } from "./SplitViewContext.js";
 import { useRouter } from "../RouterContext.js";
-import { memo, useCallback, useSyncExternalStore } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StackSliceRenderer = /*#__PURE__*/memo(({
-  stack,
-  appearance,
-  fallbackToFirstRoute
-}) => {
-  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);
-  let historyToRender = history;
-  if (fallbackToFirstRoute && historyToRender.length === 0) {
-    const first = stack.getFirstRoute();
-    if (first) {
-      const activePath = router.getActiveRoute()?.path;
-      historyToRender = [{
-        key: `splitview-seed-${stackId}`,
-        routeId: first.routeId,
-        component: first.component,
-        options: first.options,
-        stackId,
-        pattern: first.path,
-        path: activePath ?? first.path
-      }];
-    }
-  }
-  return /*#__PURE__*/_jsx(StackRenderer, {
-    appearance: appearance,
-    stack: stack,
-    history: historyToRender
-  });
-});
-StackSliceRenderer.displayName = 'SplitViewStackSliceRendererNative';
+import { memo, useCallback, useSyncExternalStore, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * On native (iPhone), SplitView renders primary and secondary screens
+ * in a SINGLE ScreenStack to get native push/pop animations.
+ *
+ * The combined history is: [...primaryHistory, ...secondaryHistory]
+ * This way, navigating from primary to secondary is a native push.
+ */
 export const RenderSplitView = /*#__PURE__*/memo(({
   splitView,
   appearance
 }) => {
   const router = useRouter();
+
+  // Subscribe to primary stack
+  const primaryId = splitView.primary.getId();
+  const subscribePrimary = useCallback(cb => router.subscribeStack(primaryId, cb), [router, primaryId]);
+  const getPrimary = useCallback(() => router.getStackHistory(primaryId), [router, primaryId]);
+  const primaryHistory = useSyncExternalStore(subscribePrimary, getPrimary, getPrimary);
+
+  // Subscribe to secondary stack
   const secondaryId = splitView.secondary.getId();
-  const subscribe = useCallback(cb => router.subscribeStack(secondaryId, cb), [router, secondaryId]);
-  const get = useCallback(() => router.getStackHistory(secondaryId), [router, secondaryId]);
-  const secondaryHistory = useSyncExternalStore(subscribe, get, get);
-  const hasSecondary = secondaryHistory.length > 0;
+  const subscribeSecondary = useCallback(cb => router.subscribeStack(secondaryId, cb), [router, secondaryId]);
+  const getSecondary = useCallback(() => router.getStackHistory(secondaryId), [router, secondaryId]);
+  const secondaryHistory = useSyncExternalStore(subscribeSecondary, getSecondary, getSecondary);
+
+  // Fallback: if primary is empty, seed with first route
+  const primaryHistoryToRender = useMemo(() => {
+    if (primaryHistory.length > 0) {
+      return primaryHistory;
+    }
+    const first = splitView.primary.getFirstRoute();
+    if (!first) return [];
+    const activePath = router.getActiveRoute()?.path;
+    return [{
+      key: `splitview-seed-${primaryId}`,
+      routeId: first.routeId,
+      component: first.component,
+      options: first.options,
+      stackId: primaryId,
+      pattern: first.path,
+      path: activePath ?? first.path
+    }];
+  }, [primaryHistory, splitView.primary, primaryId, router]);
+
+  // Combine histories: primary screens first, then secondary screens on top
+  // This gives native push animation when navigating from primary to secondary
+  const combinedHistory = useMemo(() => {
+    return [...primaryHistoryToRender, ...secondaryHistory];
+  }, [primaryHistoryToRender, secondaryHistory]);
+
+  // Use primary stack ID for the combined ScreenStack
+  // (secondary items will animate as if pushed onto this stack)
   return /*#__PURE__*/_jsx(SplitViewContext.Provider, {
     value: splitView,
-    children: /*#__PURE__*/_jsxs(View, {
+    children: /*#__PURE__*/_jsx(ScreenStack, {
       style: styles.container,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.primary,
-        pointerEvents: hasSecondary ? 'none' : 'auto',
-        children: /*#__PURE__*/_jsx(StackSliceRenderer, {
-          appearance: appearance,
-          stack: splitView.primary,
-          fallbackToFirstRoute: true
-        })
-      }), hasSecondary ? /*#__PURE__*/_jsx(View, {
-        style: styles.secondary,
-        children: /*#__PURE__*/_jsx(StackSliceRenderer, {
-          appearance: appearance,
-          stack: splitView.secondary
-        })
-      }) : null]
+      children: combinedHistory.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
+        appearance: appearance,
+        stackId: item.stackId,
+        item: item
+      }, `splitview-${item.key}`))
     })
   });
 });
 const styles = StyleSheet.create({
   container: {
     flex: 1
-  },
-  primary: {
-    flex: 1
-  },
-  secondary: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 2
   }
 });

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

@@ -5,7 +5,7 @@ import { TabBarContext } from "./TabBarContext.js";
 import { useRouter } from "../RouterContext.js";
 import { BottomTabsScreen, BottomTabs, ScreenStackItem } from 'react-native-screens';
 import { Platform, StyleSheet, View } from 'react-native';
-import { useCallback, useSyncExternalStore, memo, useEffect, useState } from 'react';
+import { useCallback, useSyncExternalStore, memo, useEffect, useState, useMemo } from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isImageSource = value => {
   if (value == null) return false;
@@ -146,10 +146,21 @@ const TabStackRenderer = /*#__PURE__*/memo(({
   });
 });
 TabStackRenderer.displayName = 'TabStackRenderer';
+const TabNodeRenderer = /*#__PURE__*/memo(({
+  node,
+  appearance
+}) => {
+  const Renderer = useMemo(() => node.getRenderer(), [node]);
+  return /*#__PURE__*/_jsx(Renderer, {
+    appearance: appearance
+  });
+});
+TabNodeRenderer.displayName = 'TabNodeRenderer';
 export const RenderTabBar = /*#__PURE__*/memo(({
   tabBar,
   appearance = {}
 }) => {
+  const router = useRouter();
   const subscribe = useCallback(cb => tabBar.subscribe(cb), [tabBar]);
   const snapshot = useSyncExternalStore(subscribe, tabBar.getState, tabBar.getState);
   const {
@@ -172,11 +183,82 @@ export const RenderTabBar = /*#__PURE__*/memo(({
   const onNativeFocusChange = useCallback(event => {
     const tabKey = event.nativeEvent.tabKey;
     const tabIndex = tabs.findIndex(route => route.tabKey === tabKey);
-    tabBar.onIndexChange(tabIndex);
-  }, [tabs, tabBar]);
+    if (tabIndex === -1) return;
+    const targetTab = tabs[tabIndex];
+    if (!targetTab) return;
+    const targetStack = tabBar.stacks[targetTab.tabKey];
+    const targetNode = tabBar.nodes[targetTab.tabKey];
+
+    // Update TabBar UI state
+    if (tabIndex !== index) {
+      tabBar.onIndexChange(tabIndex);
+    }
+
+    // Navigate to the target stack's first route if needed
+    if (targetStack) {
+      const stackId = targetStack.getId();
+      const stackHistory = router.getStackHistory(stackId);
+      // Only navigate if stack is empty (first visit)
+      if (stackHistory.length === 0) {
+        const firstRoute = targetStack.getFirstRoute();
+        if (firstRoute?.path) {
+          router.navigate(firstRoute.path);
+        }
+      }
+    } else if (targetNode) {
+      // For nodes like SplitView, check if we need to seed it
+      const nodeId = targetNode.getId?.();
+      if (nodeId) {
+        const nodeHistory = router.getStackHistory(nodeId);
+        if (nodeHistory.length === 0) {
+          const seed = targetNode.seed?.();
+          if (seed?.path) {
+            const prefix = targetTab.tabPrefix ?? '';
+            const fullPath = prefix && !seed.path.startsWith(prefix) ? `${prefix}${seed.path.startsWith('/') ? '' : '/'}${seed.path}` : seed.path;
+            router.navigate(fullPath);
+          }
+        }
+      }
+    }
+  }, [tabs, tabBar, index, router]);
   const onTabPress = useCallback(nextIndex => {
-    tabBar.onIndexChange(nextIndex);
-  }, [tabBar]);
+    const targetTab = tabs[nextIndex];
+    if (!targetTab) return;
+    const targetStack = tabBar.stacks[targetTab.tabKey];
+    const targetNode = tabBar.nodes[targetTab.tabKey];
+
+    // Update TabBar UI state
+    if (nextIndex !== index) {
+      tabBar.onIndexChange(nextIndex);
+    }
+
+    // Navigate to the target stack's first route if needed
+    if (targetStack) {
+      const stackId = targetStack.getId();
+      const stackHistory = router.getStackHistory(stackId);
+      // Only navigate if stack is empty (first visit)
+      if (stackHistory.length === 0) {
+        const firstRoute = targetStack.getFirstRoute();
+        if (firstRoute?.path) {
+          router.navigate(firstRoute.path);
+        }
+      }
+    } else if (targetNode) {
+      // For nodes like SplitView, check if we need to seed it
+      const nodeId = targetNode.getId?.();
+      if (nodeId) {
+        const nodeHistory = router.getStackHistory(nodeId);
+        if (nodeHistory.length === 0) {
+          const seed = targetNode.seed?.();
+          if (seed?.path) {
+            const prefix = targetTab.tabPrefix ?? '';
+            const fullPath = prefix && !seed.path.startsWith(prefix) ? `${prefix}${seed.path.startsWith('/') ? '' : '/'}${seed.path}` : seed.path;
+            router.navigate(fullPath);
+          }
+        }
+      }
+    }
+  }, [tabs, tabBar, index, router]);
   const containerProps = {
     tabBarBackgroundColor: backgroundColor,
     tabBarItemTitleFontFamily: title?.fontFamily,
@@ -245,12 +327,16 @@ export const RenderTabBar = /*#__PURE__*/memo(({
           children: tabs.filter(t => visited[t.tabKey]).map(tab => {
             const isActive = tab.tabKey === tabs[index]?.tabKey;
             const stackForTab = tabBar.stacks[tab.tabKey];
+            const nodeForTab = tabBar.nodes[tab.tabKey];
             const ScreenForTab = tabBar.screens[tab.tabKey];
             return /*#__PURE__*/_jsx(View, {
               style: [styles.flex, !isActive && styles.hidden],
               children: stackForTab ? /*#__PURE__*/_jsx(TabStackRenderer, {
                 appearance: appearance,
                 stack: stackForTab
+              }) : nodeForTab ? /*#__PURE__*/_jsx(TabNodeRenderer, {
+                appearance: appearance,
+                node: nodeForTab
               }) : ScreenForTab ? /*#__PURE__*/_jsx(ScreenForTab, {}) : null
             }, `tab-content-${tab.tabKey}`);
           })
@@ -277,6 +363,7 @@ export const RenderTabBar = /*#__PURE__*/memo(({
         children: tabs.map(tab => {
           const isFocused = tab.tabKey === tabs[index]?.tabKey;
           const stack = tabBar.stacks[tab.tabKey];
+          const node = tabBar.nodes[tab.tabKey];
           const Screen = tabBar.screens[tab.tabKey];
           const icon = getTabIcon(tab);
           return /*#__PURE__*/_jsx(BottomTabsScreen, {
@@ -292,6 +379,9 @@ export const RenderTabBar = /*#__PURE__*/memo(({
             children: stack ? /*#__PURE__*/_jsx(TabStackRenderer, {
               appearance: appearance,
               stack: stack
+            }) : node ? /*#__PURE__*/_jsx(TabNodeRenderer, {
+              appearance: appearance,
+              node: node
             }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null
           }, tab.tabKey);
         })

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

@@ -34,6 +34,29 @@ const TabStackRenderer = /*#__PURE__*/memo(({
   });
 });
 TabStackRenderer.displayName = 'TabStackRenderer';
+const TabNodeRenderer = /*#__PURE__*/memo(({
+  node,
+  appearance
+}) => {
+  const Renderer = useMemo(() => node.getRenderer(), [node]);
+  return /*#__PURE__*/_jsx(Renderer, {
+    appearance: appearance
+  });
+});
+TabNodeRenderer.displayName = 'TabNodeRenderer';
+const joinPrefixAndPath = (prefix, path) => {
+  const base = (prefix ?? '').trim();
+  const child = (path || '/').trim();
+  if (!base) return child || '/';
+  const baseNorm = base === '/' ? '' : base.endsWith('/') ? base.slice(0, -1) : base;
+  if (!child || child === '/') {
+    return baseNorm || '/';
+  }
+  if (child.startsWith('/')) {
+    return `${baseNorm}${child}`;
+  }
+  return `${baseNorm}/${child}`;
+};
 export const RenderTabBar = /*#__PURE__*/memo(({
   tabBar,
   appearance
@@ -48,11 +71,13 @@ export const RenderTabBar = /*#__PURE__*/memo(({
   } = snapshot;
   const focusedTab = tabs[index];
   const stack = focusedTab ? tabBar.stacks[focusedTab.tabKey] : undefined;
+  const node = focusedTab ? tabBar.nodes[focusedTab.tabKey] : undefined;
   const Screen = focusedTab ? tabBar.screens[focusedTab.tabKey] : undefined;
   const onTabClick = useCallback(nextIndex => {
     const targetTab = tabs[nextIndex];
     if (!targetTab) return;
     const targetStack = tabBar.stacks[targetTab.tabKey];
+    const targetNode = tabBar.nodes[targetTab.tabKey];
     if (targetStack) {
       // Keep TabBar UI in sync immediately.
       if (nextIndex !== index) {
@@ -65,6 +90,17 @@ export const RenderTabBar = /*#__PURE__*/memo(({
         router.reset(firstRoutePath);
         return;
       }
+    } else if (targetNode) {
+      // Keep TabBar UI in sync immediately.
+      if (nextIndex !== index) {
+        tabBar.onIndexChange(nextIndex);
+      }
+      const seedPath = targetNode.seed?.()?.path;
+      const fallbackFirstPath = targetNode.getNodeRoutes()?.[0]?.path;
+      const path = seedPath ?? fallbackFirstPath ?? '/';
+      const fullPath = joinPrefixAndPath(targetTab.tabPrefix, path);
+      router.reset(fullPath);
+      return;
     }
     if (nextIndex !== index) {
       tabBar.onIndexChange(nextIndex);
@@ -97,6 +133,9 @@ export const RenderTabBar = /*#__PURE__*/memo(({
       children: [stack ? /*#__PURE__*/_jsx(TabStackRenderer, {
         appearance: appearance,
         stack: stack
+      }) : node ? /*#__PURE__*/_jsx(TabNodeRenderer, {
+        appearance: appearance,
+        node: node
       }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null, CustomTabBar ? /*#__PURE__*/_jsx(CustomTabBar, {
         onTabPress: onTabClick,
         activeIndex: index,

package/lib/module/TabBar/TabBar.js

@@ -8,6 +8,7 @@ import { RenderTabBar } from './RenderTabBar';
 export class TabBar {
   screens = {};
   stacks = {};
+  nodes = {};
   listeners = new Set();
   constructor(options = {}) {
     this.tabBarId = `tabbar-${Math.random().toString(36).slice(2)}`;
@@ -23,6 +24,10 @@ export class TabBar {
     return this.tabBarId;
   }
   addTab(tab) {
+    const sourcesCount = (tab.stack ? 1 : 0) + (tab.node ? 1 : 0) + (tab.screen ? 1 : 0);
+    if (sourcesCount !== 1) {
+      throw new Error(`TabBar.addTab: exactly one of { stack, node, screen } must be provided (got ${sourcesCount})`);
+    }
     const {
       key,
       ...rest
@@ -31,6 +36,7 @@ export class TabBar {
     const tabKey = key ?? `tab-${nextIndex}`;
     const nextTabs = [...this.state.tabs, {
       tabKey,
+      tabPrefix: tab.prefix,
       ...rest
     }];
     this.setState({
@@ -38,6 +44,8 @@ export class TabBar {
     });
     if (tab.stack) {
       this.stacks[tabKey] = tab.stack;
+    } else if (tab.node) {
+      this.nodes[tabKey] = tab.node;
     } else if (tab.screen) {
       this.screens[tabKey] = tab.screen;
     }
@@ -102,8 +110,8 @@ export class TabBar {
   getActiveChildId() {
     const activeTab = this.state.tabs[this.state.index];
     if (!activeTab) return undefined;
-    const stack = this.stacks[activeTab.tabKey];
-    return stack?.getId();
+    const node = this.nodes[activeTab.tabKey] ?? this.stacks[activeTab.tabKey];
+    return node?.getId();
   }
   switchToRoute(routeId) {
     const idx = this.findTabIndexByRoute(routeId);
@@ -126,11 +134,11 @@ export class TabBar {
     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) {
+      const node = tab ? this.nodes[tab.tabKey] ?? this.stacks[tab.tabKey] : undefined;
+      if (node) {
         children.push({
-          prefix: '',
-          node: stack,
+          prefix: tab?.tabPrefix ?? '',
+          node,
           onMatch: () => this.onIndexChange(idx)
         });
       }
@@ -150,6 +158,10 @@ export class TabBar {
   seed() {
     const activeTab = this.state.tabs[this.state.index];
     if (!activeTab) return null;
+    const node = this.nodes[activeTab.tabKey];
+    if (node) {
+      return node.seed?.() ?? null;
+    }
     const stack = this.stacks[activeTab.tabKey];
     if (!stack) return null;
     const firstRoute = stack.getFirstRoute();
@@ -163,9 +175,9 @@ export class TabBar {
   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);
+      const node = tab ? this.nodes[tab.tabKey] ?? this.stacks[tab.tabKey] : undefined;
+      if (!node) continue;
+      const hasRoute = this.nodeHasRoute(node, routeId);
       if (hasRoute) {
         return i;
       }