@sigmela/router 0.3.7 → 0.4.0

package/lib/module/SplitView/SplitView.js

@@ -1,97 +0,0 @@
-"use strict";
-
-import React from 'react';
-import { RenderSplitView } from './RenderSplitView';
-class SecondaryStackWrapper {
-  constructor(stack) {
-    this.stack = stack;
-  }
-  getId() {
-    return this.stack.getId();
-  }
-  getNodeRoutes() {
-    // IMPORTANT:
-    // - do not mutate routes/options from the original NavigationStack
-    // - allowRootPop is used by Router.goBack so that a single-screen secondary can be dismissed
-    return this.stack.getNodeRoutes().map(r => ({
-      ...r,
-      options: {
-        ...(r.options ?? {}),
-        allowRootPop: true
-      }
-    }));
-  }
-  getNodeChildren() {
-    return this.stack.getNodeChildren();
-  }
-  getRenderer() {
-    return this.stack.getRenderer();
-  }
-  seed() {
-    return this.stack.seed?.() ?? null;
-  }
-  getDefaultOptions() {
-    return this.stack.getDefaultOptions?.();
-  }
-}
-export class SplitView {
-  _cachedRenderer = null;
-  constructor(options) {
-    this.splitViewId = `splitview-${Math.random().toString(36).slice(2)}`;
-    this.primary = options.primary;
-    this.secondary = options.secondary;
-    this.minWidth = options.minWidth;
-    this.primaryMaxWidth = options.primaryMaxWidth ?? 390;
-    this.secondaryWrapper = new SecondaryStackWrapper(this.secondary);
-  }
-  getId() {
-    return this.splitViewId;
-  }
-  getNodeRoutes() {
-    return [];
-  }
-  getNodeChildren() {
-    return [{
-      prefix: '',
-      node: this.primary
-    }, {
-      prefix: '',
-      node: this.secondaryWrapper
-    }];
-  }
-  getRenderer() {
-    if (this._cachedRenderer) {
-      return this._cachedRenderer;
-    }
-
-    // eslint-disable-next-line consistent-this
-    const instance = this;
-    const renderer = function SplitViewScreen(props) {
-      return /*#__PURE__*/React.createElement(RenderSplitView, {
-        splitView: instance,
-        appearance: props?.appearance
-      });
-    };
-    this._cachedRenderer = renderer;
-    return renderer;
-  }
-  hasRoute(routeId) {
-    return this.primary.getRoutes().some(r => r.routeId === routeId) || this.secondary.getRoutes().some(r => r.routeId === routeId);
-  }
-  switchToRoute(_routeId) {
-    // SplitView does not have a single "active" child like TabBar.
-    // It renders both stacks (or overlays secondary on narrow via CSS).
-  }
-  setActiveChildByRoute(routeId) {
-    this.switchToRoute(routeId);
-  }
-  seed() {
-    const firstRoute = this.primary.getFirstRoute();
-    if (!firstRoute) return null;
-    return {
-      routeId: firstRoute.routeId,
-      path: firstRoute.path,
-      stackId: this.primary.getId()
-    };
-  }
-}

package/lib/module/SplitView/SplitViewContext.js

@@ -1,4 +0,0 @@
-"use strict";
-
-import { createContext } from 'react';
-export const SplitViewContext = /*#__PURE__*/createContext(null);

package/lib/module/SplitView/index.js

@@ -1,5 +0,0 @@
-"use strict";
-
-export { SplitView } from "./SplitView.js";
-export { RenderSplitView } from './RenderSplitView';
-export { useSplitView } from "./useSplitView.js";

package/lib/module/SplitView/useSplitView.js

@@ -1,11 +0,0 @@
-"use strict";
-
-import { useContext } from 'react';
-import { SplitViewContext } from "./SplitViewContext.js";
-export const useSplitView = () => {
-  const splitView = useContext(SplitViewContext);
-  if (!splitView) {
-    throw new Error('useSplitView must be used within a SplitViewProvider');
-  }
-  return splitView;
-};

package/lib/module/StackRenderer.js

@@ -1,42 +0,0 @@
-"use strict";
-
-import { memo, useEffect, useState, startTransition } from 'react';
-import { ScreenStackItem } from "./ScreenStackItem/index.js";
-import { ScreenStack } from "./ScreenStack/index.js";
-import { useRouter } from "./RouterContext.js";
-import { StyleSheet } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const StackRenderer = /*#__PURE__*/memo(({
-  stackId,
-  appearance,
-  history
-}) => {
-  const router = useRouter();
-  const hasHistoryProp = history != null;
-  const [internalHistory, setInternalHistory] = useState(() => hasHistoryProp ? history : router.getStackHistory(stackId));
-  useEffect(() => {
-    if (hasHistoryProp) return;
-    const update = () => {
-      startTransition(() => {
-        setInternalHistory(router.getStackHistory(stackId));
-      });
-    };
-    const unsub = router.subscribeStack(stackId, update);
-    update();
-    return unsub;
-  }, [router, stackId, hasHistoryProp]);
-  const historyForThisStack = hasHistoryProp ? history : internalHistory;
-  return /*#__PURE__*/_jsx(ScreenStack, {
-    style: [styles.flex, appearance?.screen],
-    children: historyForThisStack.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
-      appearance: appearance,
-      stackId: stackId,
-      item: item
-    }, `stack-renderer-${item.key}`))
-  }, `stack-${stackId}`);
-});
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1
-  }
-});

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

@@ -1,418 +0,0 @@
-"use strict";
-
-import { StackRenderer } from "../StackRenderer.js";
-import { TabBarContext } from "./TabBarContext.js";
-import { useRouter } from "../RouterContext.js";
-import { Tabs } from 'react-native-screens';
-import { Platform, StyleSheet, View } from 'react-native';
-import { useCallback, useSyncExternalStore, memo, useEffect, useState, useMemo, startTransition } from 'react';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const EMPTY_HISTORY = [];
-const isImageSource = value => {
-  if (value == null) return false;
-  const valueType = typeof value;
-  if (valueType === 'number') return true;
-  if (Array.isArray(value)) return value.length > 0;
-  if (valueType === 'object') {
-    const v = value;
-    if ('uri' in v || 'width' in v || 'height' in v) return true;
-    // Check for new PlatformIcon format
-    if ('ios' in v || 'android' in v || 'shared' in v) return false;
-    // Check for legacy format
-    if ('sfSymbolName' in v || 'imageSource' in v || 'templateSource' in v) return false;
-    // Check for new type-based format
-    if ('type' in v) return false;
-  }
-  return false;
-};
-const isPlatformIcon = value => {
-  if (value == null || typeof value !== 'object') return false;
-  const v = value;
-  return 'ios' in v || 'android' in v || 'shared' in v;
-};
-const isLegacyIOSIcon = value => {
-  if (value == null || typeof value !== 'object') return false;
-  const v = value;
-  return 'sfSymbolName' in v || 'imageSource' in v || 'templateSource' in v;
-};
-const convertLegacyIOSIconToPlatformIconIOS = value => {
-  if (!value || typeof value !== 'object') return undefined;
-  const v = value;
-  if ('sfSymbolName' in v) {
-    return {
-      type: 'sfSymbol',
-      name: v.sfSymbolName
-    };
-  }
-  if ('templateSource' in v) {
-    return {
-      type: 'templateSource',
-      templateSource: v.templateSource
-    };
-  }
-  if ('imageSource' in v) {
-    return {
-      type: 'imageSource',
-      imageSource: v.imageSource
-    };
-  }
-  return undefined;
-};
-const buildIOSIcon = value => {
-  if (!value) return undefined;
-
-  // If it's already a PlatformIcon, extract ios
-  if (isPlatformIcon(value)) {
-    return value.ios;
-  }
-
-  // If it's a legacy format, convert it
-  if (isLegacyIOSIcon(value)) {
-    return convertLegacyIOSIconToPlatformIconIOS(value);
-  }
-
-  // If it's an ImageSourcePropType, convert to templateSource
-  if (isImageSource(value)) {
-    return {
-      type: 'templateSource',
-      templateSource: value
-    };
-  }
-  return undefined;
-};
-const buildPlatformIcon = (icon, selectedIcon) => {
-  if (!icon && !selectedIcon) return undefined;
-  const iosIcon = buildIOSIcon(icon);
-  const iosSelectedIcon = buildIOSIcon(selectedIcon);
-
-  // If it's already a PlatformIcon, use it directly
-  if (isPlatformIcon(icon)) {
-    return {
-      ...icon,
-      ios: iosSelectedIcon || icon.ios
-    };
-  }
-
-  // Build new PlatformIcon
-  const result = {};
-  if (iosIcon || iosSelectedIcon) {
-    result.ios = iosSelectedIcon || iosIcon;
-  }
-
-  // For shared imageSource (works on both platforms)
-  if (isImageSource(icon) && !iosIcon) {
-    result.shared = {
-      type: 'imageSource',
-      imageSource: icon
-    };
-  }
-  return Object.keys(result).length > 0 ? result : undefined;
-};
-const getTabIcon = tab => {
-  const {
-    icon,
-    selectedIcon
-  } = tab;
-  if (!icon && !selectedIcon) return undefined;
-
-  // Build PlatformIcon for new API
-  const platformIcon = buildPlatformIcon(icon, selectedIcon);
-  if (!platformIcon) return undefined;
-
-  // For Android, if icon is a direct ImageSourcePropType, use shared
-  if (Platform.OS === 'android' && isImageSource(icon) && !platformIcon.shared) {
-    platformIcon.shared = {
-      type: 'imageSource',
-      imageSource: icon
-    };
-  }
-  return {
-    icon: platformIcon,
-    selectedIcon: platformIcon.ios
-  };
-};
-const TabStackRenderer = /*#__PURE__*/memo(({
-  stack,
-  appearance
-}) => {
-  const router = useRouter();
-  const stackId = stack.getId();
-
-  // Start with empty history — useEffect populates via startTransition.
-  // This avoids mounting ScreenStackItems before parent Fragments attach.
-  const [history, setHistory] = useState(EMPTY_HISTORY);
-  useEffect(() => {
-    const update = () => {
-      startTransition(() => {
-        setHistory(router.getStackHistory(stackId));
-      });
-    };
-    const unsub = router.subscribeStack(stackId, update);
-    update();
-    return unsub;
-  }, [router, stackId]);
-  return /*#__PURE__*/_jsx(StackRenderer, {
-    appearance: appearance,
-    stackId: stackId,
-    history: history
-  });
-});
-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 {
-    tabs,
-    index,
-    config
-  } = snapshot;
-
-  // Local focus state driven by startTransition so that isFocused changes
-  // are deferred until the native Fragment lifecycle completes (Android Fabric).
-  const [focusedTabKey, setFocusedTabKey] = useState(() => tabs[index]?.tabKey);
-
-  // Sync focusedTabKey when index changes from external sources (programmatic navigation).
-  useEffect(() => {
-    const key = tabs[index]?.tabKey;
-    if (key && key !== focusedTabKey) {
-      startTransition(() => {
-        setFocusedTabKey(key);
-      });
-    }
-  }, [tabs, index, focusedTabKey]);
-  const {
-    iconColor,
-    iconColorActive,
-    androidActiveIndicatorEnabled,
-    androidActiveIndicatorColor,
-    androidRippleColor,
-    labelVisibilityMode,
-    title,
-    backgroundColor,
-    badgeBackgroundColor,
-    iOSShadowColor,
-    hidden,
-    tintColor,
-    controllerMode,
-    minimizeBehavior,
-    nativeContainerBackgroundColor,
-    iOSBlurEffect
-  } = appearance?.tabBar ?? {};
-  const onNativeFocusChange = useCallback(event => {
-    const tabKey = event.nativeEvent.tabKey;
-    const tabIndex = tabs.findIndex(route => route.tabKey === tabKey);
-    if (tabIndex === -1) return;
-
-    // Defer isFocused update so the native Fragment has time to attach.
-    startTransition(() => {
-      setFocusedTabKey(tabKey);
-    });
-    if (tabIndex !== index) {
-      tabBar.onIndexChange(tabIndex);
-    }
-  }, [tabs, tabBar, index]);
-  const seedTabIfNeeded = useCallback(targetTab => {
-    if (!targetTab) return;
-    const targetStack = tabBar.stacks[targetTab.tabKey];
-    const targetNode = tabBar.nodes[targetTab.tabKey];
-    if (targetStack) {
-      const stackId = targetStack.getId();
-      const stackHistory = router.getStackHistory(stackId);
-      if (stackHistory.length === 0) {
-        const firstRoute = targetStack.getFirstRoute();
-        if (firstRoute?.path) {
-          router.navigate(firstRoute.path);
-        }
-      }
-      return;
-    }
-    if (targetNode) {
-      const nodeId = targetNode.getId?.();
-      if (!nodeId) return;
-      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);
-        }
-      }
-    }
-  }, [tabBar.nodes, tabBar.stacks, router]);
-  useEffect(() => {
-    seedTabIfNeeded(tabs[index]);
-  }, [tabs, index, seedTabIfNeeded]);
-  const onTabPress = useCallback(nextIndex => {
-    const targetTab = tabs[nextIndex];
-    if (!targetTab) return;
-
-    // Update TabBar UI state
-    if (nextIndex !== index) {
-      tabBar.onIndexChange(nextIndex);
-    }
-    seedTabIfNeeded(targetTab);
-  }, [tabs, tabBar, index, seedTabIfNeeded]);
-  const containerProps = useMemo(() => ({
-    tabBarBackgroundColor: backgroundColor,
-    tabBarItemTitleFontFamily: title?.fontFamily,
-    tabBarItemTitleFontSize: title?.fontSize,
-    tabBarItemTitleFontSizeActive: title?.activeFontSize,
-    tabBarItemTitleFontWeight: title?.fontWeight,
-    tabBarItemTitleFontStyle: title?.fontStyle,
-    tabBarItemTitleFontColor: title?.color,
-    tabBarItemTitleFontColorActive: title?.activeColor,
-    tabBarItemIconColor: iconColor,
-    tabBarItemIconColorActive: iconColorActive,
-    tabBarItemActiveIndicatorColor: androidActiveIndicatorColor,
-    tabBarItemActiveIndicatorEnabled: androidActiveIndicatorEnabled,
-    tabBarItemRippleColor: androidRippleColor,
-    tabBarItemLabelVisibilityMode: labelVisibilityMode,
-    tabBarHidden: hidden,
-    tabBarTintColor: tintColor,
-    tabBarControllerMode: controllerMode,
-    tabBarMinimizeBehavior: minimizeBehavior,
-    nativeContainerStyle: nativeContainerBackgroundColor ? {
-      backgroundColor: nativeContainerBackgroundColor
-    } : undefined
-  }), [backgroundColor, title?.fontFamily, title?.fontSize, title?.activeFontSize, title?.fontWeight, title?.fontStyle, title?.color, title?.activeColor, iconColor, iconColorActive, androidActiveIndicatorColor, androidActiveIndicatorEnabled, androidRippleColor, labelVisibilityMode, hidden, tintColor, controllerMode, minimizeBehavior, nativeContainerBackgroundColor]);
-  const iosNormalState = useMemo(() => ({
-    tabBarItemTitleFontFamily: title?.fontFamily,
-    tabBarItemTitleFontSize: title?.fontSize,
-    tabBarItemTitleFontWeight: title?.fontWeight,
-    tabBarItemTitleFontStyle: title?.fontStyle,
-    tabBarItemTitleFontColor: title?.color,
-    tabBarItemBadgeBackgroundColor: badgeBackgroundColor,
-    tabBarItemIconColor: iconColor
-  }), [title?.fontFamily, title?.fontSize, title?.fontWeight, title?.fontStyle, title?.color, badgeBackgroundColor, iconColor]);
-  const iosSelectedState = useMemo(() => ({
-    tabBarItemTitleFontFamily: title?.fontFamily,
-    tabBarItemTitleFontSize: title?.fontSize,
-    tabBarItemTitleFontWeight: title?.fontWeight,
-    tabBarItemTitleFontStyle: title?.fontStyle,
-    tabBarItemTitleFontColor: title?.activeColor ?? title?.color,
-    tabBarItemBadgeBackgroundColor: badgeBackgroundColor,
-    tabBarItemIconColor: iconColorActive ?? iconColor
-  }), [title?.fontFamily, title?.fontSize, title?.fontWeight, title?.fontStyle, title?.color, title?.activeColor, badgeBackgroundColor, iconColorActive, iconColor]);
-  const iosAppearance = useMemo(() => Platform.select({
-    default: undefined,
-    ios: {
-      tabBarBackgroundColor: backgroundColor,
-      tabBarShadowColor: iOSShadowColor,
-      tabBarBlurEffect: iOSBlurEffect,
-      compactInline: {
-        normal: iosNormalState,
-        selected: iosSelectedState
-      },
-      stacked: {
-        normal: iosNormalState,
-        selected: iosSelectedState
-      },
-      inline: {
-        normal: iosNormalState,
-        selected: iosSelectedState
-      }
-    }
-  }), [backgroundColor, iOSShadowColor, iOSBlurEffect, iosNormalState, iosSelectedState]);
-  const CustomTabBar = config.component;
-  const tabIcons = useMemo(() => tabs.map(tab => getTabIcon(tab)), [tabs]);
-  const [visited, setVisited] = useState({});
-  useEffect(() => {
-    const key = tabs[index]?.tabKey;
-    if (key) {
-      startTransition(() => {
-        setVisited(prev => prev[key] ? prev : {
-          ...prev,
-          [key]: true
-        });
-      });
-    }
-  }, [tabs, index]);
-  if (CustomTabBar) {
-    return /*#__PURE__*/_jsxs(TabBarContext.Provider, {
-      value: tabBar,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.flex,
-        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}`);
-        })
-      }), /*#__PURE__*/_jsx(CustomTabBar, {
-        onTabPress: onTabPress,
-        activeIndex: index,
-        tabs: tabs
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsx(TabBarContext.Provider, {
-    value: tabBar,
-    children: /*#__PURE__*/_jsx(Tabs.Host, {
-      onNativeFocusChange: onNativeFocusChange,
-      bottomAccessory: config.bottomAccessory,
-      experimentalControlNavigationStateInJS: config.experimentalControlNavigationStateInJS,
-      ...containerProps,
-      children: tabs.map((tab, i) => {
-        const isFocused = tab.tabKey === focusedTabKey;
-        const stack = tabBar.stacks[tab.tabKey];
-        const node = tabBar.nodes[tab.tabKey];
-        const Screen = tabBar.screens[tab.tabKey];
-        const convertedIcon = tabIcons[i];
-        const {
-          icon: _icon,
-          selectedIcon: _selectedIcon,
-          tabPrefix: _prefix,
-          ...tabScreenProps
-        } = tab;
-        return /*#__PURE__*/_jsx(Tabs.Screen, {
-          ...tabScreenProps,
-          scrollEdgeAppearance: iosAppearance,
-          standardAppearance: iosAppearance,
-          isFocused: isFocused,
-          icon: convertedIcon?.icon,
-          selectedIcon: convertedIcon?.selectedIcon,
-          children: stack ? /*#__PURE__*/_jsx(TabStackRenderer, {
-            appearance: appearance,
-            stack: stack
-          }) : node ? /*#__PURE__*/_jsx(TabNodeRenderer, {
-            appearance: appearance,
-            node: node
-          }) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null
-        }, tab.tabKey);
-      })
-    })
-  });
-});
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1
-  },
-  hidden: {
-    display: 'none'
-  }
-});