Merge pull request #8 from strblr/refactor-weight-computation

refactor: Update route weight handling

Author: strblr

packages/devtools/src/components/panel.tsx

@@ -214,7 +214,7 @@ function DetailsSection({ currentMatch, selectedRoute }: DetailsSectionProps) {
             </div>
             <InfoSection label="Pattern meta" defaultExpanded={false}>
               <Inspector
-                value={{ keys: route._.keys, weights: route._.weights }}
+                value={{ keys: route._.keys, weight: route._.weight }}
               />
             </InfoSection>
             <div style={styles.infoRow()}>

packages/router/src/route.ts

@@ -46,7 +46,7 @@ export class Route<
     keys: string[];
     regex: RegExp;
     loose: RegExp;
-    weights: number[];
+    weight: string;
     validate: (search: Record<string, unknown>) => S;
     handles: Handle[];
     components: ComponentType[];

packages/router/src/router/router.ts

@@ -1,13 +1,7 @@
 import { inject } from "regexparam";
 import { BrowserHistory } from "./browser-history";
 import type { Route } from "../route";
-import {
-  normalizePath,
-  mergeUrl,
-  match,
-  rankMatches,
-  absolutePath
-} from "../utils";
+import { normalizePath, mergeUrl, match, absolutePath } from "../utils";
 import type {
   NavigableRoute,
   RouterOptions,
@@ -75,10 +69,13 @@ export class Router {
   };
 
   matchAll = (path: string): Match | null => {
-    const matches = this.routes
-      .map(route => this.match(path, { from: route, strict: true }))
-      .filter(m => !!m);
-    return rankMatches(matches)[0] ?? null;
+    return (
+      this.routes
+        .map(route => this.match(path, { from: route, strict: true }))
+        .filter(m => !!m)
+        .sort((a, b) => b.route._.weight.localeCompare(a.route._.weight))[0] ??
+      null
+    );
   };
 
   createUrl = <P extends Pattern>(options: NavigateOptions<P>) => {

packages/router/src/utils/route.ts

@@ -11,11 +11,12 @@ export const normalizePath = <P extends string>(path: P) => {
 export const parsePattern = <P extends string>(pattern: P) => {
   const { keys, pattern: regex } = parse(pattern);
   const loose = parse(pattern, true).pattern;
-  const weights = pattern
+  const weight = pattern
     .split("/")
     .slice(1)
-    .map(s => (s.includes("*") ? 0 : s.includes(":") ? 1 : 2));
-  return { pattern, keys, regex, loose, weights };
+    .map(s => (s.includes("*") ? 0 : s.includes(":") ? 1 : 2))
+    .join("");
+  return { pattern, keys, regex, loose, weight };
 };
 
 export const validator = <Input extends {}, Output extends {}>(

packages/router/src/utils/router.ts

@@ -1,7 +1,6 @@
 import { normalizePath } from "./route";
 import { parseSearch, stringifySearch } from "./search";
 import type { Route } from "../route";
-import type { Match } from "../types";
 
 export const absolutePath = (rpath: string, basePath: string) => {
   return normalizePath(`${basePath}/${rpath}`);
@@ -38,19 +37,3 @@ export const match = (
   });
   return out;
 };
-
-export const rankMatches = (matches: Match[]) => {
-  return [...matches].sort((a, b) => {
-    const was = a.route._.weights;
-    const wbs = b.route._.weights;
-    const length = Math.max(was.length, wbs.length);
-    for (let i = 0; i < length; i++) {
-      const wa = was[i] ?? -1;
-      const wb = wbs[i] ?? -1;
-      if (wa !== wb) {
-        return wb - wa;
-      }
-    }
-    return 0;
-  });
-};