Hook transformUrl to the matcher for client side routing.

Move type `transformUrl` definition to BaseRouterProps

Author: jchatard

src/routers/Router.ts

@@ -6,7 +6,7 @@ import type { BaseRouterProps } from "./components.jsx";
 import type { JSX } from "solid-js";
 import { createBeforeLeave, keepDepth, notifyIfNotBlocked, saveCurrentDepth } from "../lifecycle.js";
 
-export type RouterProps = BaseRouterProps & { url?: string, actionBase?: string, explicitLinks?: boolean, preload?: boolean, transformUrl?: (url: string) => string };
+export type RouterProps = BaseRouterProps & { url?: string, actionBase?: string, explicitLinks?: boolean, preload?: boolean };
 
 export function Router(props: RouterProps): JSX.Element {
   if (isServer) return StaticRouter(props);

src/routers/StaticRouter.ts

@@ -7,7 +7,7 @@ function getPath(url: string) {
   return u.pathname + u.search;
 }
 
-export type StaticRouterProps = BaseRouterProps & { url?: string, transformUrl?: (url: string) => string };
+export type StaticRouterProps = BaseRouterProps & { url?: string };
 
 export function StaticRouter(props: StaticRouterProps): JSX.Element {
   let e;

src/routers/components.tsx

@@ -42,6 +42,7 @@ export type BaseRouterProps = {
   rootLoad?: RouteLoadFunc;
   singleFlight?: boolean;
   children?: JSX.Element | RouteDefinition | RouteDefinition[];
+  transformUrl?: (url: string) => string;
 };
 
 export const createRouterComponent = (router: RouterIntegration) => (props: BaseRouterProps) => {
@@ -54,7 +55,8 @@ export const createRouterComponent = (router: RouterIntegration) => (props: Base
   let context: Owner;
   const routerState = createRouterContext(router, branches, () => context, {
     base,
-    singleFlight: props.singleFlight
+    singleFlight: props.singleFlight,
+    transformUrl: props.transformUrl,
   });
   router.create && router.create(routerState);
   return (

src/routing.ts

@@ -273,7 +273,7 @@ export function createRouterContext(
   integration: RouterIntegration,
   branches: () => Branch[],
   getContext?: () => any,
-  options: { base?: string; singleFlight?: boolean } = {}
+  options: { base?: string; singleFlight?: boolean, transformUrl?: (url: string) => string } = {}
 ): RouterContext {
   const {
     signal: [source, setSource],
@@ -306,7 +306,13 @@ export function createRouterContext(
   const referrers: LocationChange[] = [];
   const submissions = createSignal<Submission<any, any>[]>(isServer ? initFromFlash() : []);
 
-  const matches = createMemo(() => getRouteMatches(branches(), location.pathname));
+  const matches = createMemo(() => {
+    if (typeof options.transformUrl === "function") {
+      return getRouteMatches(branches(), options.transformUrl(location.pathname));
+    }
+
+    return getRouteMatches(branches(), location.pathname);
+  });
 
   const params = createMemoObject(() => {
     const m = matches();