@sigmela/router 0.1.2 → 0.2.0

package/lib/typescript/src/types.d.ts

@@ -6,7 +6,6 @@ export type NavigationState<Route extends TabItem> = {
     index: number;
     routes: Route[];
 };
-export type Scope = 'global' | 'tab' | 'root';
 export type TabBarIcon = {
     sfSymbolName?: string;
 } | string;
@@ -14,70 +13,60 @@ export type ScreenOptions = Partial<Omit<RNSScreenProps, 'stackPresentation'>> &
     header?: ScreenStackHeaderConfigProps;
     stackPresentation?: StackPresentationTypes;
     convertModalToSheetForAndroid?: boolean;
+    syncWithUrl?: boolean;
+    tabBarIcon?: TabBarIcon;
+    animated?: boolean;
     /**
-     * Tab bar icon source for this route (used on web renderer, optional on native).
+     * Allows Router.goBack() to pop the last (root) screen of a stack.
+     * Useful for secondary stacks in split-view / overlays.
      */
-    tabBarIcon?: TabBarIcon;
+    allowRootPop?: boolean;
 };
 export type HistoryItem = {
     key: string;
-    scope: Scope;
     routeId: string;
     component: React.ComponentType<any>;
     options?: ScreenOptions;
     params?: Record<string, unknown>;
     query?: Record<string, unknown>;
     passProps?: any;
-    tabIndex?: number;
     stackId?: string;
     pattern?: string;
     path?: string;
 };
-export type VisibleRoute = {
+export type ActiveRoute = {
     routeId: string;
     stackId?: string;
     tabIndex?: number;
-    scope: Scope;
     path?: string;
     params?: Record<string, unknown>;
     query?: Record<string, unknown>;
 } | null;
+export type QueryToken = {
+    type: 'const';
+    value: string;
+} | {
+    type: 'param';
+    name: string;
+};
+export type QueryPattern = Record<string, QueryToken>;
 export type CompiledRoute = {
     routeId: string;
-    scope: Scope;
     path: string;
-    match: (path: string) => false | {
+    pathnamePattern: string;
+    isWildcardPath: boolean;
+    queryPattern: QueryPattern | null;
+    baseSpecificity: number;
+    matchPath: (path: string) => false | {
         params: Record<string, any>;
     };
     component: React.ComponentType<any>;
     controller?: import('./createController').Controller<any, any>;
     options?: ScreenOptions;
-    tabIndex?: number;
     stackId?: string;
+    childNode?: import('./navigationNode').NavigationNode;
 };
 export type TabBarConfig = {
-    /**
-     * @summary Specifies the minimize behavior for the tab bar.
-     *
-     * Available starting from iOS 26.
-     *
-     * The following values are currently supported:
-     *
-     * - `automatic` - resolves to the system default minimize behavior
-     * - `never` - the tab bar does not minimize
-     * - `onScrollDown` - the tab bar minimizes when scrolling down and
-     *   expands when scrolling back up
-     * - `onScrollUp` - the tab bar minimizes when scrolling up and expands
-     *   when scrolling back down
-     *
-     * The supported values correspond to the official UIKit documentation:
-     * @see {@link https://developer.apple.com/documentation/uikit/uitabbarcontroller/minimizebehavior|UITabBarController.MinimizeBehavior}
-     *
-     * @default Defaults to `automatic`.
-     *
-     * @platform ios
-     * @supported iOS 26 or higher
-     */
     tabBarMinimizeBehavior?: TabBarMinimizeBehavior;
 };
 export type SheetAppearance = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigmela/router",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -88,7 +88,7 @@
     "react": "19.1.0",
     "react-native": "0.81.4",
     "react-native-builder-bob": "^0.40.13",
-    "react-native-screens": "^4.16.0",
+    "react-native-screens": "^4.18.0",
     "release-it": "^19.0.4",
     "typescript": "^5.9.2"
   },
@@ -96,7 +96,7 @@
     "@sigmela/native-sheet": ">=0.0.1",
     "react": "*",
     "react-native": "*",
-    "react-native-screens": ">=4.16.0"
+    "react-native-screens": ">=4.18.0"
   },
   "workspaces": [
     "example"
@@ -109,7 +109,7 @@
       "<rootDir>/lib/"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!((jest-)?react-native|@react-native|react-native-screens|nanoid|query-string|decode-uri-component|split-on-first|filter-obj)/)"
+      "node_modules/(?!((jest-)?react-native|@react-native|react-native-screens|@sigmela/native-sheet|nanoid|query-string|decode-uri-component|split-on-first|filter-obj)/)"
     ]
   },
   "commitlint": {
@@ -170,6 +170,7 @@
   "dependencies": {
     "nanoid": "^5.1.6",
     "path-to-regexp": "^8.3.0",
-    "query-string": "^9.3.1"
+    "query-string": "^9.3.1",
+    "react-transition-state": "^2.3.1"
   }
 }

package/lib/module/web/TransitionStack.js

@@ -1,227 +0,0 @@
-"use strict";
-
-function whichChild(elem, countNonElements) {
-  if (!elem?.parentNode) {
-    return -1;
-  }
-  if (countNonElements) {
-    return Array.from(elem.parentNode.childNodes).indexOf(elem);
-  }
-  let i = 0;
-  let current = elem;
-  while ((current = current.previousElementSibling) !== null) ++i;
-  return i;
-}
-function makeTranslate(x, y) {
-  return `translate3d(${x}px, ${y}px, 0)`;
-}
-function makeTransitionFunction(options) {
-  return options;
-}
-const slideModal = makeTransitionFunction({
-  callback: (tabContent, prevTabContent, toRight) => {
-    const height = prevTabContent.getBoundingClientRect().height;
-    const elements = [tabContent, prevTabContent];
-    if (toRight) elements.reverse();
-    elements[0].style.filter = `brightness(80%)`;
-    elements[1].style.transform = makeTranslate(0, height);
-    tabContent.classList.add('active');
-    // eslint-disable-next-line no-void
-    void tabContent.offsetHeight; // reflow
-
-    tabContent.style.transform = '';
-    tabContent.style.filter = '';
-    return () => {
-      prevTabContent.style.transform = prevTabContent.style.filter = '';
-    };
-  },
-  animateFirst: false
-});
-const slideNavigation = makeTransitionFunction({
-  callback: (tabContent, prevTabContent, toRight) => {
-    const width = prevTabContent.getBoundingClientRect().width;
-    const elements = [tabContent, prevTabContent];
-    if (toRight) elements.reverse();
-    elements[0].style.filter = `brightness(80%)`;
-    elements[0].style.transform = makeTranslate(-width * 0.25, 0);
-    elements[1].style.transform = makeTranslate(width, 0);
-    tabContent.classList.add('active');
-    // eslint-disable-next-line no-void
-    void tabContent.offsetWidth; // reflow
-
-    tabContent.style.transform = '';
-    tabContent.style.filter = '';
-    return () => {
-      prevTabContent.style.transform = prevTabContent.style.filter = '';
-    };
-  },
-  animateFirst: false
-});
-const transitions = {
-  navigation: slideNavigation,
-  modal: slideModal
-};
-const TransitionStack = options => {
-  let {
-    animateFirst = false
-  } = options;
-  const {
-    type: t,
-    content,
-    withAnimationListener = true,
-    transitionTime,
-    onTransitionEnd,
-    onTransitionStart,
-    onTransitionStartAfter,
-    once = false
-  } = options;
-  const type = t;
-
-  // Set initial animation type on container; will be overridden per transition based on target's data-presentation
-  content.dataset.animation = type;
-  const onTransitionEndCallbacks = new Map();
-  let from = null;
-  if (withAnimationListener) {
-    const listenerName = 'transitionend';
-    const onEndEvent = e => {
-      // @ts-expect-error - e is TransitionEvent | AnimationEvent
-      e = e.originalEvent || e;
-      try {
-        if (e.stopPropagation) e.stopPropagation();
-        if (e.preventDefault) e.preventDefault();
-        e.returnValue = false;
-        e.cancelBubble = true;
-      } catch {
-        /* empty */
-      }
-      if (e.target.parentElement !== content) {
-        return;
-      }
-      const callback = onTransitionEndCallbacks.get(e.target);
-      callback?.();
-      if (e.target !== from) {
-        return;
-      }
-      onTransitionEnd?.(transition.prevId());
-      content.classList.remove('animating', 'backwards', 'disable-hover');
-      if (once) {
-        content.removeEventListener(listenerName, onEndEvent);
-        from = undefined;
-        onTransitionEndCallbacks.clear();
-      }
-    };
-    content.addEventListener(listenerName, onEndEvent);
-  }
-  function transition(id, animate = true, overrideFrom) {
-    if (overrideFrom) {
-      from = overrideFrom;
-    }
-    const targetIndex = id instanceof HTMLElement ? whichChild(id) : id;
-    const prevId = transition.prevId();
-    if (targetIndex === prevId) return;
-    onTransitionStart?.(targetIndex);
-    const to = content.children[targetIndex];
-
-    // Determine direction and pick animation source
-    const goingBack = prevId > targetIndex;
-    const sourcePresentation = from?.dataset.presentation || '';
-    const targetPresentation = to?.dataset.presentation || '';
-    const chosenPresentation = goingBack ? sourcePresentation : targetPresentation;
-    const effectiveType = chosenPresentation === 'modal' ? 'modal' : 'navigation';
-
-    // Update container dataset to drive CSS timing variants
-    content.dataset.animation = effectiveType;
-    const transitionSpec = transitions[effectiveType];
-    const animationFunction = transitionSpec?.callback;
-    const animateFirstLocal = (transitionSpec?.animateFirst !== undefined ? transitionSpec?.animateFirst : animateFirst) ?? false;
-    if (prevId === -1 && !animateFirstLocal) {
-      animate = false;
-    }
-    if (!withAnimationListener) {
-      const timeout = content.dataset.timeout;
-      if (timeout !== undefined) {
-        clearTimeout(+timeout);
-      }
-      delete content.dataset.timeout;
-    }
-    if (!animate) {
-      if (from) from.classList.remove('active', 'to', 'from');else if (to) {
-        const callback = onTransitionEndCallbacks.get(to);
-        callback?.();
-      }
-      if (to) {
-        to.classList.remove('to', 'from');
-        to.classList.add('active');
-      }
-      content.classList.remove('animating', 'backwards', 'disable-hover');
-      from = to;
-      onTransitionEnd?.(targetIndex);
-      return;
-    }
-    if (!withAnimationListener) {
-      content.dataset.timeout = '' + window.setTimeout(() => {
-        to?.classList.remove('to');
-        from?.classList.remove('from');
-        content.classList.remove('animating', 'backwards', 'disable-hover');
-        delete content.dataset.timeout;
-      }, transitionTime);
-    }
-    if (from) {
-      from.classList.remove('to');
-      from.classList.add('from');
-    }
-    content.classList.add('animating');
-    const toRight = prevId < targetIndex;
-    content.classList.toggle('backwards', !toRight);
-    let onTransitionEndCallback;
-    if (!to) {
-      // prevTabContent.classList.remove('active');
-    } else {
-      if (animationFunction) {
-        onTransitionEndCallback = animationFunction(to, from, toRight);
-      } else {
-        to.classList.add('active');
-      }
-      onTransitionStartAfter?.(targetIndex);
-      to.classList.remove('from');
-      to.classList.add('to');
-    }
-    if (to) {
-      const transitionTimeout = to.dataset.transitionTimeout;
-      if (transitionTimeout) {
-        clearTimeout(+transitionTimeout);
-      }
-      onTransitionEndCallbacks.set(to, () => {
-        to.classList.remove('to');
-        onTransitionEndCallbacks.delete(to);
-      });
-    }
-    if (from) {
-      let timeout;
-      const _from = from;
-      const callback = () => {
-        clearTimeout(timeout);
-        _from.classList.remove('active', 'from');
-        onTransitionEndCallback?.();
-        onTransitionEndCallbacks.delete(_from);
-      };
-      if (to) {
-        timeout = window.setTimeout(callback, transitionTime + 100);
-        onTransitionEndCallbacks.set(_from, callback);
-      } else {
-        timeout = window.setTimeout(callback, transitionTime + 100);
-        onTransitionEndCallbacks.set(_from, () => {
-          clearTimeout(timeout);
-          onTransitionEndCallbacks.delete(_from);
-        });
-      }
-      _from.dataset.transitionTimeout = '' + timeout;
-    }
-    from = to;
-  }
-  transition.prevId = () => from ? whichChild(from) : -1;
-  transition.getFrom = () => from;
-  transition.setFrom = _from => from = _from;
-  return transition;
-};
-export default TransitionStack;

package/lib/typescript/src/web/TransitionStack.d.ts

@@ -1,21 +0,0 @@
-export type TransitionStackType = 'modal' | 'navigation';
-export type TransitionStackOptions = {
-    content: HTMLElement;
-    type: TransitionStackType;
-    transitionTime: number;
-    onTransitionStart?: (id: number) => void;
-    onTransitionStartAfter?: (id: number) => void;
-    onTransitionEnd?: (id: number) => void;
-    isHeavy?: boolean;
-    once?: boolean;
-    withAnimationListener?: boolean;
-    animateFirst?: boolean;
-};
-declare const TransitionStack: (options: TransitionStackOptions) => {
-    (id: number | HTMLElement, animate?: boolean, overrideFrom?: HTMLElement | null | undefined): void;
-    prevId(): number;
-    getFrom(): HTMLElement | null | undefined;
-    setFrom(_from: HTMLElement): HTMLElement;
-};
-export default TransitionStack;
-//# sourceMappingURL=TransitionStack.d.ts.map