@sigmela/router 0.3.6 → 0.4.0

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

@@ -1,218 +0,0 @@
-"use strict";
-
-import { StackRenderer } from "../StackRenderer.js";
-import { TabBarContext } from "./TabBarContext.js";
-import { useRouter } from "../RouterContext.js";
-import { TabIcon } from './TabIcon';
-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;
-  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;
-  }
-  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,
-    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';
-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
-}) => {
-  const router = useRouter();
-  const subscribe = useCallback(cb => tabBar.subscribe(cb), [tabBar]);
-  const snapshot = useSyncExternalStore(subscribe, tabBar.getState, tabBar.getState);
-  const {
-    tabs,
-    index,
-    config
-  } = 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) {
-        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;
-      }
-    } 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);
-    }
-  }, [router, tabBar, tabs, index]);
-  const onKeyDown = useCallback((e, currentIndex) => {
-    let nextIndex = currentIndex;
-    if (e.key === 'ArrowRight') nextIndex = (currentIndex + 1) % tabs.length;else if (e.key === 'ArrowLeft') nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;else return;
-    e.preventDefault();
-    onTabClick(nextIndex);
-    const container = e.currentTarget.parentElement;
-    const buttons = container?.querySelectorAll('[role="tab"]');
-    buttons?.[nextIndex]?.focus();
-  }, [tabs.length, onTabClick]);
-  const tabBarStyle = useMemo(() => {
-    const tabBarBg = toColorString(appearance?.tabBar?.backgroundColor);
-    const style = {
-      ...(tabBarBg ? {
-        ['--tabbar-bg']: tabBarBg
-      } : null),
-      ...(tabs.length ? {
-        ['--tabbar-tabs-count']: String(tabs.length),
-        ['--tabbar-active-index']: String(index)
-      } : null)
-    };
-    return Object.keys(style).length ? style : undefined;
-  }, [appearance?.tabBar?.backgroundColor, tabs.length, index]);
-  const titleBaseStyle = useMemo(() => ({
-    fontFamily: appearance?.tabBar?.title?.fontFamily,
-    fontSize: appearance?.tabBar?.title?.fontSize,
-    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]);
-  const handleTabClick = useCallback(e => {
-    const index = Number(e.currentTarget.dataset.index);
-    onTabClick(index);
-  }, [onTabClick]);
-  const handleKeyDown = useCallback(e => {
-    const index = Number(e.currentTarget.dataset.index);
-    onKeyDown(e, index);
-  }, [onKeyDown]);
-  const CustomTabBar = config.component;
-  return /*#__PURE__*/_jsx(TabBarContext.Provider, {
-    value: tabBar,
-    children: /*#__PURE__*/_jsxs("div", {
-      className: "tab-stacks-container",
-      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,
-        tabs: tabs
-      }) : /*#__PURE__*/_jsx("div", {
-        className: "tab-bar",
-        style: tabBarStyle,
-        "data-tabs-count": tabs.length,
-        "data-active-index": index,
-        children: /*#__PURE__*/_jsxs("div", {
-          className: "tab-bar-inner",
-          children: [/*#__PURE__*/_jsx("div", {
-            className: "tab-bar-glass",
-            "aria-hidden": "true"
-          }), /*#__PURE__*/_jsxs("div", {
-            className: "tab-bar-content",
-            role: "tablist",
-            children: [/*#__PURE__*/_jsx("div", {
-              className: "tab-bar-active-indicator",
-              "aria-hidden": "true"
-            }), tabs.map((tab, i) => {
-              const isActive = i === index;
-              const iconTint = toColorString(isActive ? appearance?.tabBar?.iconColorActive : appearance?.tabBar?.iconColor);
-              const title = appearance?.tabBar?.title;
-              const labelColor = isActive ? toColorString(title?.activeColor) ?? toColorString(title?.color) : toColorString(title?.color);
-              const labelStyle = {
-                ...titleBaseStyle,
-                color: labelColor
-              };
-              return /*#__PURE__*/_jsxs("button", {
-                type: "button",
-                role: "tab",
-                id: `tab-${tab.tabKey}`,
-                "data-index": i,
-                "data-active": isActive ? 'true' : 'false',
-                "aria-selected": isActive,
-                tabIndex: isActive ? 0 : -1,
-                className: `tab-item${isActive ? ' active' : ''}`,
-                onClick: handleTabClick,
-                onKeyDown: handleKeyDown,
-                children: [/*#__PURE__*/_jsx("div", {
-                  className: "tab-item-icon",
-                  children: isImageSource(tab.icon) ? /*#__PURE__*/_jsx(TabIcon, {
-                    source: tab.icon,
-                    tintColor: iconTint
-                  }) : null
-                }), /*#__PURE__*/_jsx("div", {
-                  className: "tab-item-label",
-                  style: labelStyle,
-                  children: tab.title
-                }), tab.badgeValue ? /*#__PURE__*/_jsx("span", {
-                  className: "tab-item-label-badge",
-                  "aria-label": `${tab.badgeValue} notifications`,
-                  children: tab.badgeValue
-                }) : null]
-              }, tab.tabKey);
-            })]
-          })]
-        })
-      })]
-    })
-  });
-});

package/lib/module/TabBar/TabBar.js

@@ -1,208 +0,0 @@
-"use strict";
-
-import React from 'react';
-import { RenderTabBar } from './RenderTabBar';
-
-// Legacy icon format for backward compatibility
-
-export class TabBar {
-  screens = {};
-  stacks = {};
-  nodes = {};
-  listeners = new Set();
-  _cachedRenderer = null;
-  constructor(options = {}) {
-    this.tabBarId = `tabbar-${Math.random().toString(36).slice(2)}`;
-    this.state = {
-      tabs: [],
-      index: options.initialIndex ?? 0,
-      config: {
-        component: options.component
-      }
-    };
-  }
-  getId() {
-    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
-    } = tab;
-    const nextIndex = this.state.tabs.length;
-    const tabKey = key ?? `tab-${nextIndex}`;
-    const nextTabs = [...this.state.tabs, {
-      tabKey,
-      tabPrefix: tab.prefix,
-      ...rest
-    }];
-    this.setState({
-      tabs: nextTabs
-    });
-    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;
-    }
-    return this;
-  }
-  setBadge(tabIndex, badge) {
-    this.setState({
-      tabs: this.state.tabs.map((route, index) => index === tabIndex ? {
-        ...route,
-        badgeValue: badge ?? undefined
-      } : route)
-    });
-  }
-  setTabBarConfig(config) {
-    this.setState({
-      config: {
-        ...this.state.config,
-        ...config
-      }
-    });
-  }
-  onIndexChange(index) {
-    this.setState({
-      index
-    });
-  }
-  getState = () => {
-    return this.state;
-  };
-  setState(state) {
-    this.state = {
-      ...this.state,
-      ...state
-    };
-    this.notifyListeners();
-  }
-  notifyListeners() {
-    // 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__) {
-          console.error('[TabBar] listener error', e);
-        }
-      }
-    }
-  }
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => {
-      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 node = this.nodes[activeTab.tabKey] ?? this.stacks[activeTab.tabKey];
-    return node?.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 node = tab ? this.nodes[tab.tabKey] ?? this.stacks[tab.tabKey] : undefined;
-      if (node) {
-        children.push({
-          prefix: tab?.tabPrefix ?? '',
-          node,
-          onMatch: () => this.onIndexChange(idx)
-        });
-      }
-    }
-    return children;
-  }
-  getRenderer() {
-    if (this._cachedRenderer) {
-      return this._cachedRenderer;
-    }
-
-    // eslint-disable-next-line consistent-this
-    const tabBarInstance = this;
-    const renderer = function TabBarScreen(props) {
-      return /*#__PURE__*/React.createElement(RenderTabBar, {
-        tabBar: tabBarInstance,
-        appearance: props?.appearance
-      });
-    };
-    this._cachedRenderer = renderer;
-    return renderer;
-  }
-  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();
-    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 node = tab ? this.nodes[tab.tabKey] ?? this.stacks[tab.tabKey] : undefined;
-      if (!node) continue;
-      const hasRoute = this.nodeHasRoute(node, 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/TabBarContext.js

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

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

@@ -1,47 +0,0 @@
-"use strict";
-
-import { memo, useMemo } from 'react';
-import { Image } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-const resolveImageUri = source => {
-  if (!source) return undefined;
-  const resolved = typeof Image.resolveAssetSource === 'function' ? Image.resolveAssetSource(source) : undefined;
-  if (resolved?.uri) return resolved.uri;
-  if (Array.isArray(source)) {
-    const first = source[0];
-    if (first && typeof first === 'object' && 'uri' in first) return first.uri;
-  }
-  if (typeof source === 'object' && source && 'uri' in source) return source.uri;
-  return undefined;
-};
-export const TabIcon = /*#__PURE__*/memo(({
-  source,
-  tintColor
-}) => {
-  const iconUri = resolveImageUri(source);
-  const useMask = Boolean(tintColor && iconUri);
-  const maskStyle = useMemo(() => {
-    if (!useMask || !iconUri) return undefined;
-    return {
-      backgroundColor: tintColor,
-      WebkitMaskImage: `url(${iconUri})`,
-      WebkitMaskSize: 'contain',
-      WebkitMaskRepeat: 'no-repeat',
-      WebkitMaskPosition: 'center',
-      maskImage: `url(${iconUri})`,
-      maskSize: 'contain',
-      maskRepeat: 'no-repeat',
-      maskPosition: 'center',
-      width: '100%',
-      height: '100%'
-    };
-  }, [tintColor, iconUri, useMask]);
-  if (maskStyle) {
-    return /*#__PURE__*/_jsx("div", {
-      style: maskStyle
-    });
-  }
-  return /*#__PURE__*/_jsx(Image, {
-    source: source
-  });
-});

package/lib/module/TabBar/index.js

@@ -1,6 +0,0 @@
-"use strict";
-
-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/useTabBar.js

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

package/lib/module/TabBar/useTabBarHeight.js

@@ -1,22 +0,0 @@
-"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/createController.js

@@ -1,5 +0,0 @@
-"use strict";
-
-export function createController(controller) {
-  return controller;
-}

package/lib/module/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-export { useTabBar } from "./TabBar/useTabBar.js";
-export { useTabBarHeight, TAB_BAR_HEIGHT } from "./TabBar/useTabBarHeight.js";
-export { TabBar } from "./TabBar/TabBar.js";
-export { Drawer } from "./Drawer/Drawer.js";
-export { useDrawer } from "./Drawer/useDrawer.js";
-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";
-export { NavigationStack } from "./NavigationStack.js";
-export { StackRenderer } from "./StackRenderer.js";
-export { useRouter, useCurrentRoute, useParams, useQueryParams, useRoute } from "./RouterContext.js";

package/lib/module/navigationNode.js

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

package/lib/module/package.json

@@ -1 +0,0 @@
-{"type":"module"}