@sigmela/router 0.1.2 → 0.2.0

package/lib/module/Navigation.js

@@ -1,8 +1,5 @@
 "use strict";
 
-// import { ScreenStackItem as RNNScreenStackItem } from 'react-native-screens';
-
-import { RenderTabBar } from './TabBar/RenderTabBar';
 import { ScreenStackItem } from "./ScreenStackItem/index.js";
 import { RouterContext } from "./RouterContext.js";
 import { ScreenStack } from "./ScreenStack/index.js";
@@ -20,19 +17,16 @@ export const Navigation = /*#__PURE__*/memo(({
   appearance
 }) => {
   const [root, setRoot] = useState(() => ({
-    hasTabBar: router.hasTabBar(),
     rootId: router.getRootStackId()
   }));
   useEffect(() => {
     return router.subscribeRoot(() => {
       setRoot({
-        hasTabBar: router.hasTabBar(),
         rootId: router.getRootStackId()
       });
     });
   }, [router]);
   const {
-    hasTabBar,
     rootId
   } = root;
   const rootTransition = router.getRootTransition();
@@ -43,10 +37,7 @@ export const Navigation = /*#__PURE__*/memo(({
     value: router,
     children: /*#__PURE__*/_jsxs(ScreenStack, {
       style: styles.flex,
-      children: [hasTabBar && /*#__PURE__*/_jsx(RenderTabBar, {
-        tabBar: router.tabBar,
-        appearance: appearance
-      }), rootItems.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
+      children: [rootItems.map(item => /*#__PURE__*/_jsx(ScreenStackItem, {
         stackId: rootId,
         item: item,
         stackAnimation: rootTransition,

package/lib/module/NavigationStack.js

@@ -1,43 +1,82 @@
 "use strict";
 
 import { nanoid } from 'nanoid/non-secure';
-import { match } from 'path-to-regexp';
+import { match as pathMatchFactory } from 'path-to-regexp';
+import qs from 'query-string';
 export class NavigationStack {
   routes = [];
-
-  // Overloads
-
-  constructor(idOrOptions, maybeOptions) {
+  children = [];
+  debugEnabled = false;
+  constructor(idOrOptions, maybeOptions, maybeDebug) {
     if (typeof idOrOptions === 'string') {
       this.stackId = idOrOptions ?? `stack-${nanoid()}`;
       this.defaultOptions = maybeOptions;
+      this.debugEnabled = maybeDebug ?? false;
     } else {
       this.stackId = `stack-${nanoid()}`;
       this.defaultOptions = idOrOptions;
+      this.debugEnabled = false;
+    }
+  }
+  log(message, data) {
+    if (this.debugEnabled) {
+      if (data !== undefined) {
+        console.log(`[NavigationStack] ${message}`, data);
+      } else {
+        console.log(`[NavigationStack] ${message}`);
+      }
     }
   }
   getId() {
     return this.stackId;
   }
-  addScreen(path, mixedComponent, options) {
+  addScreen(pathPattern, mixedComponent, options) {
     const {
       component,
-      controller
+      controller,
+      childNode
     } = this.extractComponent(mixedComponent);
+    const parsed = qs.parseUrl(pathPattern);
+    const pathnamePattern = parsed.url || '/';
+    const rawQuery = parsed.query || {};
+    const isWildcardPath = pathnamePattern === '*';
+    const queryPattern = this.buildQueryPattern(rawQuery);
+    const baseSpecificity = this.computeBaseSpecificity(pathnamePattern, isWildcardPath, queryPattern);
     const routeId = `${this.stackId}-route-${this.routes.length}`;
-    const matcher = match(path);
-    this.routes.push({
+    const pathMatcher = !isWildcardPath ? pathMatchFactory(pathnamePattern) : null;
+    const matchPath = p => {
+      if (isWildcardPath) {
+        return {
+          params: {}
+        };
+      }
+      const result = pathMatcher ? pathMatcher(p) : null;
+      return result ? {
+        params: result.params ?? {}
+      } : false;
+    };
+    const builtRoute = {
       routeId,
-      path,
-      match: p => {
-        const result = matcher(p);
-        return result ? {
-          params: result.params ?? {}
-        } : false;
-      },
+      path: pathPattern,
+      pathnamePattern,
+      isWildcardPath,
+      queryPattern,
+      baseSpecificity,
+      matchPath,
       component,
       controller,
-      options
+      options,
+      childNode
+    };
+    this.routes.push(builtRoute);
+    this.log('addRoute', {
+      stackId: this.stackId,
+      routeId,
+      path: pathPattern,
+      pathnamePattern,
+      isWildcardPath,
+      queryPattern,
+      baseSpecificity
     });
     return this;
   }
@@ -53,6 +92,28 @@ export class NavigationStack {
       stackPresentation: 'sheet'
     });
   }
+  addStack(prefixOrStack, maybeStack) {
+    const hasExplicitPrefix = typeof prefixOrStack === 'string';
+    const prefixRaw = hasExplicitPrefix ? prefixOrStack : '';
+    const stack = hasExplicitPrefix ? maybeStack : prefixOrStack;
+    if (!stack) {
+      throw new Error('NavigationStack.addStack: child stack is required');
+    }
+    const prefix = this.normalizePrefix(prefixRaw ?? '');
+    this.children.push({
+      prefix,
+      node: stack
+    });
+    this.log('addStack', {
+      stackId: this.stackId,
+      childId: stack.getId(),
+      prefix
+    });
+    return this;
+  }
+  getChildren() {
+    return this.children.slice();
+  }
   getRoutes() {
     return this.routes.slice();
   }
@@ -62,17 +123,105 @@ export class NavigationStack {
   getDefaultOptions() {
     return this.defaultOptions;
   }
+  getNodeRoutes() {
+    return this.getRoutes();
+  }
+  getNodeChildren() {
+    return this.children.slice();
+  }
+  getRenderer() {
+    return () => null;
+  }
+  seed() {
+    const first = this.getFirstRoute();
+    if (!first) return null;
+    return {
+      routeId: first.routeId,
+      params: {},
+      path: first.path,
+      stackId: this.stackId
+    };
+  }
   extractComponent(component) {
+    if (this.isNavigationNode(component)) {
+      return {
+        controller: undefined,
+        component: component.getRenderer(),
+        childNode: component
+      };
+    }
     const componentWithController = component;
     if (componentWithController?.component) {
       return {
         controller: componentWithController.controller,
-        component: componentWithController.component
+        component: componentWithController.component,
+        childNode: componentWithController.childNode
       };
     }
     return {
       component: component,
-      controller: undefined
+      controller: undefined,
+      childNode: undefined
     };
   }
+  isNavigationNode(obj) {
+    return obj && typeof obj === 'object' && typeof obj.getNodeRoutes === 'function' && typeof obj.getNodeChildren === 'function' && typeof obj.getRenderer === 'function';
+  }
+  buildQueryPattern(rawQuery) {
+    const patternEntries = [];
+    for (const [key, value] of Object.entries(rawQuery)) {
+      if (typeof value !== 'string') {
+        continue;
+      }
+      if (value.startsWith(':') && value.length > 1) {
+        patternEntries.push([key, {
+          type: 'param',
+          name: value.slice(1)
+        }]);
+      } else {
+        patternEntries.push([key, {
+          type: 'const',
+          value
+        }]);
+      }
+    }
+    if (!patternEntries.length) return null;
+    return Object.fromEntries(patternEntries);
+  }
+  computeBaseSpecificity(pathnamePattern, isWildcardPath, queryPattern) {
+    let pathScore = 0;
+    if (!isWildcardPath) {
+      const segments = pathnamePattern.split('/').filter(Boolean);
+      for (const seg of segments) {
+        if (seg.startsWith(':')) {
+          pathScore += 1;
+        } else {
+          pathScore += 2;
+        }
+      }
+    } else {
+      pathScore = 0;
+    }
+    let queryScore = 0;
+    if (queryPattern) {
+      for (const token of Object.values(queryPattern)) {
+        if (token.type === 'const') {
+          queryScore += 2;
+        } else {
+          queryScore += 1;
+        }
+      }
+    }
+    return pathScore + queryScore;
+  }
+  normalizePrefix(input) {
+    if (!input || input === '/') {
+      return '';
+    }
+    let normalized = input.startsWith('/') ? input : `/${input}`;
+    if (normalized.length > 1 && normalized.endsWith('/')) {
+      normalized = normalized.slice(0, -1);
+    }
+    return normalized;
+  }
 }