Feature routing with transition duration

src/components.tsx

@@ -1,7 +1,7 @@
 /*@refresh skip*/
 
 import type { Component, JSX } from "solid-js";
-import { children, createMemo, createRoot, mergeProps, on, Show, splitProps } from "solid-js";
+import { children, createMemo, createRoot, mergeProps, on, Show, splitProps, For } from "solid-js";
 import { isServer } from "solid-js/web";
 import { pathIntegration, staticIntegration } from "./integration";
 import {
@@ -72,9 +72,9 @@ export interface RoutesProps {
 }
 
 export const Routes = (props: RoutesProps) => {
-  const router = useRouter();
+  const router      = useRouter();
   const parentRoute = useRoute();
-  const routeDefs = children(() => props.children) as unknown as () =>
+  const routeDefs   = children(() => props.children) as unknown as () =>
     | RouteDefinition
     | RouteDefinition[];
 
@@ -98,9 +98,12 @@ export const Routes = (props: RoutesProps) => {
   let root: RouteContext | undefined;
 
   const routeStates = createMemo(
-    on(matches, (nextMatches, prevMatches, prev: RouteContext[] | undefined) => {
+    on(matches, (nextMatches, prevMatches, prev: RouteContext[] | undefined) =>  {
       let equal = prevMatches && nextMatches.length === prevMatches.length;
-      const next: RouteContext[] = [];
+
+      const next: RouteContext[] = [],  
+            routeTransitionDuration = 1000; // Temporary, should come from user
+
       for (let i = 0, len = nextMatches.length; i < len; i++) {
         const prevMatch = prevMatches && prevMatches[i];
         const nextMatch = nextMatches[i];
@@ -109,6 +112,7 @@ export const Routes = (props: RoutesProps) => {
           next[i] = prev[i];
         } else {
           equal = false;
+
           if (disposers[i]) {
             disposers[i]();
           }
@@ -130,15 +134,60 @@ export const Routes = (props: RoutesProps) => {
       if (prev && equal) {
         return prev;
       }
-      root = next[0];
+
+      if (!isServer && root && routeTransitionDuration > 1000 / 60) {
+        root = next[0];
+
+        router.setRouteIn(root);
+        router.setRoute(null);
+
+        if (prev && prev[0]) {
+          let prevRoot = prev[0];
+
+          router.setRoutesOut([...router.routesOut(), prevRoot]);
+
+          setTimeout(() => {
+
+            if (router.routeIn() == root) {
+              router.setRouteIn(null);
+              router.setRoute(root);
+            }
+
+            const ro  = router.routesOut(), 
+                  roi = ro.indexOf(prevRoot);
+
+            if (roi > -1) {
+              ro.splice(roi, 1);
+              router.setRoutesOut([...ro]);
+            }
+
+          }, routeTransitionDuration);
+
+        }
+
+      } else {
+        root = next[0];
+        router.setRoute(root);
+      }
+
       return next;
     })
   );
-
+ 
   return (
-    <Show when={routeStates() && root}>
-      {route => <RouteContextObj.Provider value={route}>{route.outlet()}</RouteContextObj.Provider>}
-    </Show>
+    <For each={[router.route(), router.routeIn(), ...router.routesOut()]}>
+      { 
+        route => (
+          <Show when={root && route}>
+            {
+              route => <RouteContextObj.Provider value={route}>
+                {route.outlet()}
+              </RouteContextObj.Provider>
+            }
+          </Show>
+        )
+      }
+    </For>
   );
 };
 

src/index.tsx

@@ -9,7 +9,10 @@ export {
   useNavigate,
   useParams,
   useResolvedPath,
-  useSearchParams
+  useSearchParams,
+  useIsRouteIn,
+  useIsRouteOut,
+  useIsRoute
 } from "./routing";
 export { mergeSearchString as _mergeSearchString } from "./utils";
 export type {

src/routing.ts

@@ -1,4 +1,4 @@
-import type { Component, JSX, Accessor } from "solid-js";
+import type { Component, JSX, Accessor, Signal } from "solid-js";
 import {
   createComponent,
   createContext,
@@ -73,9 +73,37 @@ export const useHref = (to: () => string | undefined) => {
   });
 };
 
-export const useNavigate = () => useRouter().navigatorFactory();
-export const useLocation = <S = unknown>() => useRouter().location as Location<S>;
-export const useIsRouting = () => useRouter().isRouting;
+export const useIsRouteIn = () => {
+
+  return createMemo(() => {
+    return useRouter().routeIn()?.path() == useRoute()?.path();
+  });
+
+}
+
+export const useIsRouteOut = () => {
+
+  return createMemo(() => {
+    return useRouter().routesOut().filter(
+      e => e.path() == useRoute().path()
+    ).length > 0;
+  });
+
+}
+
+export const useIsRoute = () => {
+
+  return createMemo(() => {
+    return useRouter().route()?.path()  == useRoute()?.path() || 
+          useRouter().routeIn()?.path() == useRoute()?.path();
+  });
+
+}
+
+export const useNavigate     = () => useRouter().navigatorFactory();
+export const useLocation     = <S = unknown>() => useRouter().location as Location<S>;
+export const useIsRouting    = () => useRouter().isRouting;
+export const useRoutePath    = () => useRouter().routePath;
 
 export const useMatch = (path: () => string) => {
   const location = useLocation();
@@ -280,10 +308,13 @@ export function createRouterContext(
     setSource({ value: basePath, replace: true, scroll: false });
   }
 
-  const [isRouting, start] = useTransition();
-  const [reference, setReference] = createSignal(source().value);
-  const [state, setState] = createSignal(source().state);
-  const location = createLocation(reference, state);
+  const [isRouting, start]          = useTransition();
+  const [reference, setReference]   = createSignal(source().value);
+  const [state, setState]           = createSignal(source().state);
+  const [routesOut, setRoutesOut]   = createSignal([] as RouteContext[]);
+  const [routeIn,   setRouteIn]     = createSignal()  as Signal<RouteContext | null>;
+  const [route,     setRoute]       = createSignal()  as Signal<RouteContext | null>;
+  const location                    = createLocation(reference, state);
   const referrers: LocationChange[] = [];
 
   const baseRoute: RouteContext = {
@@ -467,8 +498,15 @@ export function createRouterContext(
   }
 
   return {
-    base: baseRoute,
-    out: output,
+    base      : baseRoute,
+    out       : output,
+    routePath : reference,
+    routesOut, 
+    setRoutesOut,
+    routeIn,   
+    setRouteIn,
+    route,     
+    setRoute,
     location,
     isRouting,
     renderPath,

src/types.ts

@@ -1,4 +1,4 @@
-import { Component, JSX } from "solid-js";
+import { Component, JSX, Accessor, Setter } from "solid-js";
 
 export type Params = Record<string, string>;
 
@@ -131,11 +131,18 @@ export interface RouterOutput {
 }
 
 export interface RouterContext {
-  base: RouteContext;
-  out?: RouterOutput;
-  location: Location;
-  navigatorFactory: NavigatorFactory;
-  isRouting: () => boolean;
-  renderPath(path: string): string;
-  parsePath(str: string): string;
+  base                     : RouteContext;
+  out?                     : RouterOutput;
+  location                 : Location;
+  routesOut                : Accessor<RouteContext[]>,
+  setRoutesOut             : Setter<RouteContext[]>,
+  routeIn                  : Accessor<RouteContext | null>,
+  setRouteIn               : Setter<RouteContext | null>,
+  route                    : Accessor<RouteContext | null>,
+  setRoute                 : Setter<RouteContext | null>,
+  routePath                : () => string;
+  navigatorFactory         : NavigatorFactory;
+  isRouting                : () => boolean;
+  renderPath(path: string) : string;
+  parsePath(str: string)   : string;
 }