Merge pull request #410 from Breek/hook

feat: add URL transformation hook

Author: ryansolid

.changeset/ten-trains-work.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/router": patch
+---
+
+Allow rewriting url

src/data/events.ts

@@ -4,7 +4,7 @@ import type { RouterContext } from "../types.js";
 import { actions } from "./action.js";
 import { mockBase } from "../utils.js";
 
-export function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "/_server") {
+export function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "/_server", transformUrl?: (url: string) => string) {
   return (router: RouterContext) => {
     const basePath = router.base.path();
     const navigateFromRoute = router.navigatorFactory(router.base);
@@ -71,6 +71,9 @@ export function setupNativeEvents(preload = true, explicitLinks = false, actionB
       const res = handleAnchor(evt as MouseEvent);
       if (!res) return;
       const [a, url] = res;
+      if (typeof transformUrl === "function") {
+        url.pathname = transformUrl(url.pathname);
+      }
       if (!preloadTimeout[url.pathname])
         router.preloadRoute(url, a.getAttribute("preload") !== "false");
     }
@@ -79,6 +82,9 @@ export function setupNativeEvents(preload = true, explicitLinks = false, actionB
       const res = handleAnchor(evt as MouseEvent);
       if (!res) return;
       const [a, url] = res;
+      if (typeof transformUrl === "function") {
+        url.pathname = transformUrl(url.pathname);
+      }
       if (preloadTimeout[url.pathname]) return;
       preloadTimeout[url.pathname] = setTimeout(() => {
         router.preloadRoute(url, a.getAttribute("preload") !== "false");
@@ -90,6 +96,9 @@ export function setupNativeEvents(preload = true, explicitLinks = false, actionB
       const res = handleAnchor(evt as MouseEvent);
       if (!res) return;
       const [, url] = res;
+      if (typeof transformUrl === "function") {
+        url.pathname = transformUrl(url.pathname);
+      }
       if (preloadTimeout[url.pathname]) {
         clearTimeout(preloadTimeout[url.pathname]);
         delete preloadTimeout[url.pathname];

src/routers/Router.ts

@@ -10,10 +10,13 @@ export type RouterProps = BaseRouterProps & { url?: string, actionBase?: string,
 
 export function Router(props: RouterProps): JSX.Element {
   if (isServer) return StaticRouter(props);
-  const getSource = () => ({
-    value: window.location.pathname + window.location.search + window.location.hash,
-    state: window.history.state
-  });
+  const getSource = () => {
+    const url = window.location.pathname + window.location.search;
+    return {
+      value: props.transformUrl ? props.transformUrl(url) + window.location.hash : url + window.location.hash,
+      state: window.history.state
+    }
+  };
   const beforeLeave = createBeforeLeave();
   return createRouter({
     get: getSource,
@@ -36,7 +39,7 @@ export function Router(props: RouterProps): JSX.Element {
           }
         })
       ),
-    create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase),
+    create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase, props.transformUrl),
     utils: {
       go: delta => window.history.go(delta),
       beforeLeave

src/routers/StaticRouter.ts

@@ -11,8 +11,9 @@ export type StaticRouterProps = BaseRouterProps & { url?: string };
 
 export function StaticRouter(props: StaticRouterProps): JSX.Element {
   let e;
+  const url = props.url || ((e = getRequestEvent()) && getPath(e.request.url)) || ""
   const obj = {
-    value: props.url || ((e = getRequestEvent()) && getPath(e.request.url)) || ""
+    value: props.transformUrl ? props.transformUrl(url) : url,
   };
   return createRouterComponent({
     signal: [() => obj, next => Object.assign(obj, next)]

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

@@ -280,7 +280,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],
@@ -313,7 +313,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();