feat(memory-location): add initial location state support

Author: astakhovaskold

packages/wouter-preact/types/memory-location.d.ts

@@ -5,16 +5,22 @@ type Navigate<S = any> = (
   options?: { replace?: boolean; state?: S; transition?: boolean }
 ) => void;
 
-type HookReturnValue = { hook: BaseLocationHook; navigate: Navigate };
+type HookReturnValue<S = unknown> = {
+  hook: BaseLocationHook;
+  navigate: Navigate<S>;
+  readonly state: S | null;
+};
 type StubHistory = { history: Path[]; reset: () => void };
 
-export function memoryLocation(options?: {
+export function memoryLocation<S = unknown>(options?: {
   path?: Path;
+  state?: S;
   static?: boolean;
   record?: false;
-}): HookReturnValue;
-export function memoryLocation(options?: {
+}): HookReturnValue<S>;
+export function memoryLocation<S = unknown>(options?: {
   path?: Path;
+  state?: S;
   static?: boolean;
   record: true;
-}): HookReturnValue & StubHistory;
+}): HookReturnValue<S> & StubHistory;

packages/wouter/src/memory-location.js

@@ -8,21 +8,24 @@ import { useSyncExternalStore } from "./react-deps.js";
 export const memoryLocation = ({
   path = "/",
   searchPath = "",
+  state = null,
   static: staticLocation,
   record,
 } = {}) => {
   let initialPath = path;
+  const initialState = state;
   if (searchPath) {
     // join with & if path contains search query, and ? otherwise
     initialPath += path.split("?")[1] ? "&" : "?";
     initialPath += searchPath;
   }
 
   let [currentPath, currentSearch = ""] = initialPath.split("?");
+  let currentState = initialState;
   const history = [initialPath];
   const emitter = mitt();
 
-  const navigateImplementation = (path, { replace = false } = {}) => {
+  const navigateImplementation = (path, { replace = false, state } = {}) => {
     if (record) {
       if (replace) {
         history.splice(history.length - 1, 1, path);
@@ -32,6 +35,7 @@ export const memoryLocation = ({
     }
 
     [currentPath, currentSearch = ""] = path.split("?");
+    if (state !== undefined) currentState = state;
     emitter.emit("navigate", path);
   };
 
@@ -56,15 +60,21 @@ export const memoryLocation = ({
   function reset() {
     // clean history array with mutation to preserve link
     history.splice(0, history.length);
-
-    navigateImplementation(initialPath);
+    navigateImplementation(initialPath, { state: initialState });
   }
 
-  return {
+  const memoryLocationResult = {
     hook: useMemoryLocation,
     searchHook: useMemoryQuery,
     navigate,
     history: record ? history : undefined,
     reset: record ? reset : undefined,
   };
+
+  Object.defineProperty(memoryLocationResult, "state", {
+    enumerable: true,
+    get: () => currentState,
+  });
+
+  return memoryLocationResult;
 };

packages/wouter/test/memory-location.test-d.ts

@@ -41,6 +41,15 @@ test("should support initial path", () => {
   expectTypeOf(hook).toMatchTypeOf<BaseLocationHook>();
 });
 
+test("should support state", () => {
+  const memory = memoryLocation({
+    path: "/initial-path",
+    state: { from: "test" },
+  });
+
+  expectTypeOf(memory.state).toEqualTypeOf<{ from: string } | null>();
+});
+
 test("should support `static` option", () => {
   const { hook } = memoryLocation({ static: true });
 

packages/wouter/test/memory-location.test.ts

@@ -23,6 +23,15 @@ test("should support initial path", () => {
   unmount();
 });
 
+test("should support initial state", () => {
+  const memory = memoryLocation({
+    path: "/test-case",
+    state: { from: "test" },
+  });
+
+  expect(memory.state).toStrictEqual({ from: "test" });
+});
+
 test("should support initial path with query", () => {
   const { searchHook } = memoryLocation({ path: "/test-case?foo=bar" });
 
@@ -78,6 +87,28 @@ test("should return standalone `navigate` method", () => {
   unmount();
 });
 
+test("should update state through standalone `navigate`", () => {
+  const memory = memoryLocation({
+    path: "/test-case",
+    state: { from: "test" },
+  });
+
+  memory.navigate("/standalone", { state: { from: "navigate" } });
+
+  expect(memory.state).toStrictEqual({ from: "navigate" });
+});
+
+test("should preserve state when navigating without `state` option", () => {
+  const memory = memoryLocation({
+    path: "/test-case",
+    state: { from: "test" },
+  });
+
+  memory.navigate("/standalone");
+
+  expect(memory.state).toStrictEqual({ from: "test" });
+});
+
 test("should return location hook that supports navigation", () => {
   const { hook } = memoryLocation();
 
@@ -90,6 +121,20 @@ test("should return location hook that supports navigation", () => {
   unmount();
 });
 
+test("should update state through hook navigation", () => {
+  const memory = memoryLocation({
+    path: "/test-case",
+    state: { from: "test" },
+  });
+
+  const { result, unmount } = renderHook(() => memory.hook());
+
+  act(() => result.current[1]("/location", { state: { from: "hook" } }));
+
+  expect(memory.state).toStrictEqual({ from: "hook" });
+  unmount();
+});
+
 test("should record all history when `record` option is provided", () => {
   const {
     hook,
@@ -161,3 +206,18 @@ test("should have reset method that reset hook location", () => {
 
   unmount();
 });
+
+test("should reset state to its initial value", () => {
+  const memory = memoryLocation({
+    record: true,
+    path: "/test",
+    state: { from: "initial" },
+  });
+
+  memory.navigate("/location", { state: { from: "navigate" } });
+  expect(memory.state).toStrictEqual({ from: "navigate" });
+
+  memory.reset();
+
+  expect(memory.state).toStrictEqual({ from: "initial" });
+});

packages/wouter/types/memory-location.d.ts

@@ -10,22 +10,25 @@ type Navigate<S = any> = (
   options?: { replace?: boolean; state?: S; transition?: boolean }
 ) => void;
 
-type HookReturnValue = {
+type HookReturnValue<S = unknown> = {
   hook: BaseLocationHook;
   searchHook: BaseSearchHook;
-  navigate: Navigate;
+  navigate: Navigate<S>;
+  readonly state: S | null;
 };
 type StubHistory = { history: Path[]; reset: () => void };
 
-export function memoryLocation(options?: {
+export function memoryLocation<S = unknown>(options?: {
   path?: Path;
   searchPath?: SearchString;
+  state?: S;
   static?: boolean;
   record?: false;
-}): HookReturnValue;
-export function memoryLocation(options?: {
+}): HookReturnValue<S>;
+export function memoryLocation<S = unknown>(options?: {
   path?: Path;
   searchPath?: SearchString;
+  state?: S;
   static?: boolean;
   record: true;
-}): HookReturnValue & StubHistory;
+}): HookReturnValue<S> & StubHistory;