Parallel Routes

.changeset/wet-fishes-tap.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/router": minor
+---
+
+Parallel Routes

src/components.tsx

@@ -1,16 +1,8 @@
 /*@refresh skip*/
 import type { JSX } from "solid-js";
 import { createMemo, mergeProps, splitProps } from "solid-js";
-import {
-  useHref,
-  useLocation,
-  useNavigate,
-  useResolvedPath
-} from "./routing.js";
-import type {
-  Location,
-  Navigator
-} from "./types.js";
+import { useHref, useLocation, useNavigate, useResolvedPath } from "./routing.js";
+import type { Location, Navigator } from "./types.js";
 import { normalizePath } from "./utils.js";
 
 declare module "solid-js" {

src/data/action.ts

@@ -1,7 +1,13 @@
 import { $TRACK, createMemo, createSignal, JSX, onCleanup, getOwner } from "solid-js";
 import { isServer } from "solid-js/web";
 import { useRouter } from "../routing.js";
-import type { RouterContext, Submission, SubmissionStub, Navigator, NarrowResponse } from "../types.js";
+import type {
+  RouterContext,
+  Submission,
+  SubmissionStub,
+  Navigator,
+  NarrowResponse
+} from "../types.js";
 import { mockBase } from "../utils.js";
 import { cacheKeyOp, hashKey, revalidate, cache } from "./cache.js";
 
@@ -44,7 +50,8 @@ export function useSubmission<T extends Array<any>, U>(
     {},
     {
       get(_, property) {
-        if (submissions.length === 0 && property === "clear" || property === "retry") return (() => {});
+        if ((submissions.length === 0 && property === "clear") || property === "retry")
+          return () => {};
         return submissions[submissions.length - 1]?.[property as keyof Submission<T, U>];
       }
     }

src/data/createAsync.ts

@@ -30,7 +30,8 @@ export function createAsync<T>(
   }
 ): Accessor<T | undefined> {
   let resource: () => T;
-  let prev = () => !resource || (resource as any).state === "unresolved" ? undefined : (resource as any).latest;
+  let prev = () =>
+    !resource || (resource as any).state === "unresolved" ? undefined : (resource as any).latest;
   [resource] = createResource(
     () => subFetch(fn, untrack(prev)),
     v => v,
@@ -67,7 +68,10 @@ export function createAsyncStore<T>(
   } = {}
 ): Accessor<T | undefined> {
   let resource: () => T;
-  let prev = () => !resource || (resource as any).state === "unresolved" ? undefined : unwrap((resource as any).latest);
+  let prev = () =>
+    !resource || (resource as any).state === "unresolved"
+      ? undefined
+      : unwrap((resource as any).latest);
   [resource] = createResource(
     () => subFetch(fn, untrack(prev)),
     v => v,

src/data/index.ts

@@ -2,4 +2,3 @@ export { createAsync, createAsyncStore } from "./createAsync.js";
 export { action, useSubmission, useSubmissions, useAction, type Action } from "./action.js";
 export { cache, revalidate, type CachedFunction } from "./cache.js";
 export { redirect, reload, json } from "./response.js";
-

src/lifecycle.ts

@@ -1,5 +1,10 @@
 import { isServer } from "solid-js/web";
-import { BeforeLeaveLifecycle, BeforeLeaveListener, LocationChange, NavigateOptions } from "./types.js";
+import {
+  BeforeLeaveLifecycle,
+  BeforeLeaveListener,
+  LocationChange,
+  NavigateOptions
+} from "./types.js";
 
 export function createBeforeLeave(): BeforeLeaveLifecycle {
   let listeners = new Set<BeforeLeaveListener>();
@@ -24,7 +29,7 @@ export function createBeforeLeave(): BeforeLeaveLifecycle {
         from: l.location,
         retry: (force?: boolean) => {
           force && (ignore = true);
-          l.navigate(to as string, {...options, resolve: false});
+          l.navigate(to as string, { ...options, resolve: false });
         }
       });
     return !e.defaultPrevented;

src/routers/HashRouter.ts

@@ -2,7 +2,12 @@ import type { JSX } from "solid-js";
 import { setupNativeEvents } from "../data/events.js";
 import type { BaseRouterProps } from "./components.js";
 import { createRouter, scrollToHash, bindEvent } from "./createRouter.js";
-import { createBeforeLeave, keepDepth, notifyIfNotBlocked, saveCurrentDepth } from "../lifecycle.js";
+import {
+  createBeforeLeave,
+  keepDepth,
+  notifyIfNotBlocked,
+  saveCurrentDepth
+} from "../lifecycle.js";
 
 export function hashParser(str: string) {
   const to = str.replace(/^.*?#/, "");
@@ -16,7 +21,11 @@ export function hashParser(str: string) {
   return to;
 }
 
-export type HashRouterProps = BaseRouterProps & { actionBase?: string, explicitLinks?: boolean, preload?: boolean };
+export type HashRouterProps = BaseRouterProps & {
+  actionBase?: string;
+  explicitLinks?: boolean;
+  preload?: boolean;
+};
 
 export function HashRouter(props: HashRouterProps): JSX.Element {
   const getSource = () => window.location.hash.slice(1);
@@ -34,7 +43,10 @@ export function HashRouter(props: HashRouterProps): JSX.Element {
       scrollToHash(hash, scroll);
       saveCurrentDepth();
     },
-    init: notify => bindEvent(window, "hashchange",
+    init: notify =>
+      bindEvent(
+        window,
+        "hashchange",
         notifyIfNotBlocked(
           notify,
           delta => !beforeLeave.confirm(delta && delta < 0 ? delta : getSource())

src/routers/MemoryRouter.ts

@@ -41,7 +41,6 @@ export function createMemoryHistory() {
           scrollToHash(value.split("#")[1] || "", true);
         }
       }, 0);
-
     },
     back: () => {
       go(-1);
@@ -60,7 +59,12 @@ export function createMemoryHistory() {
   };
 }
 
-export type MemoryRouterProps = BaseRouterProps & { history?: MemoryHistory, actionBase?: string, explicitLinks?: boolean, preload?: boolean };
+export type MemoryRouterProps = BaseRouterProps & {
+  history?: MemoryHistory;
+  actionBase?: string;
+  explicitLinks?: boolean;
+  preload?: boolean;
+};
 
 export function MemoryRouter(props: MemoryRouterProps): JSX.Element {
   const memoryHistory = props.history || createMemoryHistory();

src/routers/Router.ts

@@ -4,18 +4,30 @@ import { StaticRouter } from "./StaticRouter.js";
 import { setupNativeEvents } from "../data/events.js";
 import type { BaseRouterProps } from "./components.jsx";
 import type { JSX } from "solid-js";
-import { createBeforeLeave, keepDepth, notifyIfNotBlocked, saveCurrentDepth } from "../lifecycle.js";
+import {
+  createBeforeLeave,
+  keepDepth,
+  notifyIfNotBlocked,
+  saveCurrentDepth
+} from "../lifecycle.js";
 
-export type RouterProps = BaseRouterProps & { url?: string, actionBase?: string, explicitLinks?: boolean, preload?: boolean };
+export type RouterProps = BaseRouterProps & {
+  url?: string;
+  actionBase?: string;
+  explicitLinks?: boolean;
+  preload?: boolean;
+};
 
 export function Router(props: RouterProps): JSX.Element {
   if (isServer) return StaticRouter(props);
   const getSource = () => {
     const url = window.location.pathname.replace(/^\/+/, "/") + window.location.search;
     return {
-      value: props.transformUrl ? props.transformUrl(url) + window.location.hash : url + window.location.hash,
+      value: props.transformUrl
+        ? props.transformUrl(url) + window.location.hash
+        : url + window.location.hash,
       state: window.history.state
-    }
+    };
   };
   const beforeLeave = createBeforeLeave();
   return createRouter({
@@ -29,7 +41,10 @@ export function Router(props: RouterProps): JSX.Element {
       scrollToHash(decodeURIComponent(window.location.hash.slice(1)), scroll);
       saveCurrentDepth();
     },
-    init: notify => bindEvent(window, "popstate",
+    init: notify =>
+      bindEvent(
+        window,
+        "popstate",
         notifyIfNotBlocked(notify, delta => {
           if (delta && delta < 0) {
             return !beforeLeave.confirm(delta);
@@ -39,7 +54,12 @@ export function Router(props: RouterProps): JSX.Element {
           }
         })
       ),
-    create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase, props.transformUrl),
+    create: setupNativeEvents(
+      props.preload,
+      props.explicitLinks,
+      props.actionBase,
+      props.transformUrl
+    ),
     utils: {
       go: delta => window.history.go(delta),
       beforeLeave

src/routers/StaticRouter.ts

@@ -11,9 +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 url = props.url || ((e = getRequestEvent()) && getPath(e.request.url)) || "";
   const obj = {
-    value: props.transformUrl ? props.transformUrl(url) : url,
+    value: props.transformUrl ? props.transformUrl(url) : url
   };
   return createRouterComponent({
     signal: [() => obj, next => Object.assign(obj, next)]