@solidjs/router 0.7.1 → 0.8.1

package/README.md

@@ -18,6 +18,7 @@ It supports all of Solid's SSR methods and has Solid's transitions baked in, so
 - [Data Functions](#data-functions)
 - [Nested Routes](#nested-routes)
 - [Hash Mode Router](#hash-mode-router)
+- [Memory Mode Router](#memory-mode-router)
 - [Config Based Routing](#config-based-routing)
 - [Router Primitives](#router-primitives)
   - [useParams](#useparams)
@@ -419,6 +420,16 @@ import { Router, hashIntegration } from '@solidjs/router'
 <Router source={hashIntegration()}><App /></Router>
 ```
 
+## Memory Mode Router
+
+You can also use memory mode router for testing purpose.
+
+```jsx
+import { Router, memoryIntegration } from '@solidjs/router'
+
+<Router source={memoryIntegration()}><App /></Router>
+```
+
 ## Config Based Routing
 
 You don't have to use JSX to set up your routes; you can pass an object directly with `useRoutes`:

package/dist/components.jsx

@@ -61,8 +61,8 @@ export const Routes = (props) => {
         root = next[0];
         return next;
     }));
-    return (<Show when={routeStates() && root}>
-      {((route) => (<RouteContextObj.Provider value={route}>{route.outlet()}</RouteContextObj.Provider>))}
+    return (<Show when={routeStates() && root} keyed>
+      {route => <RouteContextObj.Provider value={route}>{route.outlet()}</RouteContextObj.Provider>}
     </Show>);
 };
 export const useRoutes = (routes, base) => {

package/dist/index.js

@@ -24,6 +24,49 @@ function scrollToHash(hash, fallbackTop) {
     window.scrollTo(0, 0);
   }
 }
+function createMemoryHistory() {
+  const entries = ["/"];
+  let index = 0;
+  const listeners = [];
+  const go = n => {
+    // https://github.com/remix-run/react-router/blob/682810ca929d0e3c64a76f8d6e465196b7a2ac58/packages/router/history.ts#L245
+    index = Math.max(0, Math.min(index + n, entries.length - 1));
+    const value = entries[index];
+    listeners.forEach(listener => listener(value));
+  };
+  return {
+    get: () => entries[index],
+    set: ({
+      value,
+      scroll,
+      replace
+    }) => {
+      if (replace) {
+        entries[index] = value;
+      } else {
+        entries.splice(index + 1, entries.length - index, value);
+        index++;
+      }
+      if (scroll) {
+        scrollToHash(value.split("#")[1] || "", true);
+      }
+    },
+    back: () => {
+      go(-1);
+    },
+    forward: () => {
+      go(1);
+    },
+    go,
+    listen: listener => {
+      listeners.push(listener);
+      return () => {
+        const index = listeners.indexOf(listener);
+        listeners.splice(index, 1);
+      };
+    }
+  };
+}
 function createIntegration(get, set, init, utils) {
   let ignore = false;
   const wrap = value => typeof value === "string" ? {
@@ -115,6 +158,12 @@ function hashIntegration() {
     }
   });
 }
+function memoryIntegration() {
+  const memoryHistory = createMemoryHistory();
+  return createIntegration(memoryHistory.get, memoryHistory.set, memoryHistory.listen, {
+    go: memoryHistory.go
+  });
+}
 
 function createBeforeLeave() {
   let listeners = new Set();
@@ -787,6 +836,7 @@ const Routes = props => {
     get when() {
       return routeStates() && root;
     },
+    keyed: true,
     children: route => createComponent$1(RouteContextObj.Provider, {
       value: route,
       get children() {
@@ -883,4 +933,4 @@ function Navigate(props) {
   return null;
 }
 
-export { A, A as Link, A as NavLink, Navigate, Outlet, Route, Router, Routes, mergeSearchString as _mergeSearchString, createBeforeLeave, createIntegration, hashIntegration, normalizeIntegration, pathIntegration, staticIntegration, useBeforeLeave, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useRouteData, useRoutes, useSearchParams };
+export { A, A as Link, A as NavLink, Navigate, Outlet, Route, Router, Routes, mergeSearchString as _mergeSearchString, createBeforeLeave, createIntegration, createMemoryHistory, hashIntegration, memoryIntegration, normalizeIntegration, pathIntegration, staticIntegration, useBeforeLeave, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useRouteData, useRoutes, useSearchParams };

package/dist/integration.d.ts

@@ -1,6 +1,15 @@
 import type { LocationChange, LocationChangeSignal, RouterIntegration, RouterUtils } from "./types";
+export declare function createMemoryHistory(): {
+    get: () => string;
+    set: ({ value, scroll, replace }: LocationChange) => void;
+    back: () => void;
+    forward: () => void;
+    go: (n: number) => void;
+    listen: (listener: (value: string) => void) => () => void;
+};
 export declare function createIntegration(get: () => string | LocationChange, set: (next: LocationChange) => void, init?: (notify: (value?: string | LocationChange) => void) => () => void, utils?: Partial<RouterUtils>): RouterIntegration;
 export declare function normalizeIntegration(integration: RouterIntegration | LocationChangeSignal | undefined): RouterIntegration;
 export declare function staticIntegration(obj: LocationChange): RouterIntegration;
 export declare function pathIntegration(): RouterIntegration;
 export declare function hashIntegration(): RouterIntegration;
+export declare function memoryIntegration(): RouterIntegration;

package/dist/integration.js

@@ -24,6 +24,46 @@ function scrollToHash(hash, fallbackTop) {
         window.scrollTo(0, 0);
     }
 }
+export function createMemoryHistory() {
+    const entries = ["/"];
+    let index = 0;
+    const listeners = [];
+    const go = (n) => {
+        // https://github.com/remix-run/react-router/blob/682810ca929d0e3c64a76f8d6e465196b7a2ac58/packages/router/history.ts#L245
+        index = Math.max(0, Math.min(index + n, entries.length - 1));
+        const value = entries[index];
+        listeners.forEach(listener => listener(value));
+    };
+    return {
+        get: () => entries[index],
+        set: ({ value, scroll, replace }) => {
+            if (replace) {
+                entries[index] = value;
+            }
+            else {
+                entries.splice(index + 1, entries.length - index, value);
+                index++;
+            }
+            if (scroll) {
+                scrollToHash(value.split("#")[1] || "", true);
+            }
+        },
+        back: () => {
+            go(-1);
+        },
+        forward: () => {
+            go(1);
+        },
+        go,
+        listen: (listener) => {
+            listeners.push(listener);
+            return () => {
+                const index = listeners.indexOf(listener);
+                listeners.splice(index, 1);
+            };
+        }
+    };
+}
 export function createIntegration(get, set, init, utils) {
     let ignore = false;
     const wrap = (value) => (typeof value === "string" ? { value } : value);
@@ -103,3 +143,9 @@ export function hashIntegration() {
         }
     });
 }
+export function memoryIntegration() {
+    const memoryHistory = createMemoryHistory();
+    return createIntegration(memoryHistory.get, memoryHistory.set, memoryHistory.listen, {
+        go: memoryHistory.go
+    });
+}

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",