From 7d549f67690b909cdfe730be6cd3f212a612f04e Mon Sep 17 00:00:00 2001 From: gabrielelpidio Date: Fri, 10 Mar 2023 02:23:44 -0400 Subject: [PATCH] Add memoryIntegration --- README.md | 11 ++++++++++ src/integration.ts | 50 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+) diff --git a/README.md b/README.md index e03070f0b..90e9ad45c 100644 --- a/README.md +++ b/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) +- [Hash 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' ``` +## Memory Mode Router + +You can also use memory mode router for testing purpose. + +```jsx +import { Router, memoryIntegration } from '@solidjs/router' + + +``` + ## Config Based Routing You don't have to use JSX to set up your routes; you can pass an object directly with `useRoutes`: diff --git a/src/integration.ts b/src/integration.ts index 49c6761d8..7d301ed71 100644 --- a/src/integration.ts +++ b/src/integration.ts @@ -32,6 +32,49 @@ function scrollToHash(hash: string, fallbackTop?: boolean) { } } +export function createMemoryHistory() { + const entries = ["/"]; + let index = 0; + const listeners: ((value: string) => void)[] = []; + + const go = (n: number) => { + // 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 }: LocationChange) => { + 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: (value: string) => void) => { + listeners.push(listener); + return () => { + const index = listeners.indexOf(listener); + listeners.splice(index, 1); + }; + } + }; +} + export function createIntegration( get: () => string | LocationChange, set: (next: LocationChange) => void, @@ -137,3 +180,10 @@ export function hashIntegration() { } ); } + +export function memoryIntegration() { + const memoryHistory = createMemoryHistory(); + return createIntegration(memoryHistory.get, memoryHistory.set, memoryHistory.listen, { + go: memoryHistory.go + }); +}