feat: add history package and createMemoryHistory implementation (#8702)

brophdawg11 · web-flow · commit 92caad94f8b9 · 2022-03-10T09:00:06.000-05:00
* feat: add initial empty history package

* feat: add createMemoryHistory + tests

* chore: add rollup buld for history

* chore: change state type from unknown -&gt; any

* feat: Change listen interface to be pop only

* chore: fix lint warning

* Add history package to yarn workspace

* chore: Address PR feedback
diff --git a/package.json b/package.json
@@ -63,6 +63,7 @@
   },
   "workspaces": {
     "packages": [
+      "packages/history",
       "packages/react-router",
       "packages/react-router-dom",
       "packages/react-router-native"
diff --git a/packages/history/.eslintrc b/packages/history/.eslintrc
@@ -0,0 +1,12 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true
+  },
+  "globals": {
+    "__DEV__": true
+  },
+  "rules": {
+    "strict": 0
+  }
+}
diff --git a/packages/history/README.md b/packages/history/README.md
@@ -0,0 +1,5 @@
+# history
+
+The `history` library lets you easily manage session history anywhere JavaScript runs. A `history` object abstracts away the differences in various environments and provides a minimal API that lets you manage the history stack, navigate, and persist state between sessions.
+
+This internal package is an evolution of the [`history`](https://www.npmjs.com/package/history) `npm` package from https://github.com/remix-run/history, and has now been internalized to `react-router`.
diff --git a/packages/history/__tests__/.eslintrc b/packages/history/__tests__/.eslintrc
@@ -0,0 +1,8 @@
+{
+  "env": {
+    "jest": true
+  },
+  "rules": {
+    "no-console": 0
+  }
+}
diff --git a/packages/history/__tests__/TestSequences/EncodedReservedCharacters.ts b/packages/history/__tests__/TestSequences/EncodedReservedCharacters.ts
@@ -0,0 +1,27 @@
+import type { History } from "../../index";
+
+export default function EncodeReservedCharacters(history: History) {
+  let pathname;
+
+  // encoded string
+  pathname = "/view/%23abc";
+  history.replace(pathname);
+  expect(history.location).toMatchObject({
+    pathname: "/view/%23abc",
+  });
+
+  // encoded object
+  pathname = "/view/%23abc";
+  history.replace({ pathname });
+  expect(history.location).toMatchObject({
+    pathname: "/view/%23abc",
+  });
+
+  // unencoded string
+  pathname = "/view/#abc";
+  history.replace(pathname);
+  expect(history.location).toMatchObject({
+    pathname: "/view/",
+    hash: "#abc",
+  });
+}
diff --git a/packages/history/__tests__/TestSequences/GoBack.ts b/packages/history/__tests__/TestSequences/GoBack.ts
@@ -0,0 +1,31 @@
+import type { History } from "../../index";
+
+export default function GoBack(history: History, spy: jest.SpyInstance) {
+  expect(history.location).toMatchObject({
+    pathname: "/",
+  });
+
+  history.push("/home");
+  expect(history.action).toEqual("PUSH");
+  expect(history.location).toMatchObject({
+    pathname: "/home",
+  });
+  expect(spy).not.toHaveBeenCalled();
+
+  history.go(-1);
+  expect(history.action).toEqual("POP");
+  expect(history.location).toMatchObject({
+    pathname: "/",
+  });
+  expect(spy).toHaveBeenCalledWith({
+    action: "POP",
+    location: {
+      hash: "",
+      key: expect.any(String),
+      pathname: "/",
+      search: "",
+      state: null,
+    },
+  });
+  expect(spy.mock.calls.length).toBe(1);
+}
diff --git a/packages/history/__tests__/TestSequences/GoForward.ts b/packages/history/__tests__/TestSequences/GoForward.ts
@@ -0,0 +1,48 @@
+import type { History } from "../../index";
+
+export default function GoForward(history: History, spy: jest.SpyInstance) {
+  expect(history.location).toMatchObject({
+    pathname: "/",
+  });
+
+  history.push("/home");
+  expect(history.action).toEqual("PUSH");
+  expect(history.location).toMatchObject({
+    pathname: "/home",
+  });
+  expect(spy).not.toHaveBeenCalled();
+
+  history.go(-1);
+  expect(history.action).toEqual("POP");
+  expect(history.location).toMatchObject({
+    pathname: "/",
+  });
+  expect(spy).toHaveBeenCalledWith({
+    action: "POP",
+    location: {
+      hash: "",
+      key: expect.any(String),
+      pathname: "/",
+      search: "",
+      state: null,
+    },
+  });
+  expect(spy.mock.calls.length).toBe(1);
+
+  history.go(1);
+  expect(history.action).toEqual("POP");
+  expect(history.location).toMatchObject({
+    pathname: "/home",
+  });
+  expect(spy).toHaveBeenCalledWith({
+    action: "POP",
+    location: {
+      hash: "",
+      key: expect.any(String),
+      pathname: "/home",
+      search: "",
+      state: null,
+    },
+  });
+  expect(spy.mock.calls.length).toBe(2);
+}
diff --git a/packages/history/__tests__/TestSequences/InitialLocationDefaultKey.ts b/packages/history/__tests__/TestSequences/InitialLocationDefaultKey.ts
@@ -0,0 +1,5 @@
+import type { History } from "../../index";
+
+export default function InitialLocationDefaultKey(history: History) {
+  expect(history.location.key).toBe("default");
+}
diff --git a/packages/history/__tests__/TestSequences/InitialLocationHasKey.ts b/packages/history/__tests__/TestSequences/InitialLocationHasKey.ts
@@ -0,0 +1,5 @@
+import type { History } from "../../index";
+
+export default function InitialLocationHasKey(history: History) {
+  expect(history.location.key).toBeTruthy();
+}
diff --git a/packages/history/__tests__/TestSequences/Listen.ts b/packages/history/__tests__/TestSequences/Listen.ts
@@ -0,0 +1,10 @@
+import type { History } from "../../index";
+
+export default function Listen(history: History) {
+  let spy = jest.fn();
+  let unlisten = history.listen(spy);
+
+  expect(spy).not.toHaveBeenCalled();
+
+  unlisten();
+}
diff --git a/packages/history/__tests__/TestSequences/ListenPopOnly.ts b/packages/history/__tests__/TestSequences/ListenPopOnly.ts
@@ -0,0 +1,14 @@
+import type { History } from "../../index";
+
+export default function Listen(history: History) {
+  let spy = jest.fn();
+  let unlisten = history.listen(spy);
+
+  history.push("/2");
+  expect(history.location.pathname).toBe("/2");
+  history.replace("/3");
+  expect(history.location.pathname).toBe("/3");
+
+  expect(spy).not.toHaveBeenCalled();
+  unlisten();
+}
diff --git a/packages/history/__tests__/TestSequences/PushMissingPathname.ts b/packages/history/__tests__/TestSequences/PushMissingPathname.ts
@@ -0,0 +1,23 @@
+import type { History } from "../../index";
+
+export default function PushMissingPathname(history: History) {
+  expect(history.location).toMatchObject({
+    pathname: "/",
+  });
+
+  history.push("/home?the=query#the-hash");
+  expect(history.action).toBe("PUSH");
+  expect(history.location).toMatchObject({
+    pathname: "/home",
+    search: "?the=query",
+    hash: "#the-hash",
+  });
+
+  history.push("?another=query#another-hash");
+  expect(history.action).toBe("PUSH");
+  expect(history.location).toMatchObject({
+    pathname: "/home",
+    search: "?another=query",
+    hash: "#another-hash",
+  });
+}
diff --git a/packages/history/__tests__/TestSequences/PushNewLocation.ts b/packages/history/__tests__/TestSequences/PushNewLocation.ts
@@ -0,0 +1,17 @@
+import type { History } from "../../index";
+
+export default function PushNewLocation(history: History) {
+  expect(history.location).toMatchObject({
+    pathname: "/",
+  });
+
+  history.push("/home?the=query#the-hash");
+  expect(history.action).toBe("PUSH");
+  expect(history.location).toMatchObject({
+    pathname: "/home",
+    search: "?the=query",
+    hash: "#the-hash",
+    state: null,
+    key: expect.any(String),
+  });
+}
diff --git a/packages/history/__tests__/TestSequences/PushRelativePathname.ts b/packages/history/__tests__/TestSequences/PushRelativePathname.ts
@@ -0,0 +1,23 @@
+import type { History } from "../../index";
+
+export default function PushRelativePathname(history: History) {
+  expect(history.location).toMatchObject({
+    pathname: "/",
+  });
+
+  history.push("/the/path?the=query#the-hash");
+  expect(history.action).toBe("PUSH");
+  expect(history.location).toMatchObject({
+    pathname: "/the/path",
+    search: "?the=query",
+    hash: "#the-hash",
+  });
+
+  history.push("../other/path?another=query#another-hash");
+  expect(history.action).toBe("PUSH");
+  expect(history.location).toMatchObject({
+    pathname: "/other/path",
+    search: "?another=query",
+    hash: "#another-hash",
+  });
+}
diff --git a/packages/history/__tests__/TestSequences/PushRelativePathnameWarning.ts b/packages/history/__tests__/TestSequences/PushRelativePathnameWarning.ts
@@ -0,0 +1,28 @@
+import type { History } from "../../index";
+
+export default function PushRelativePathnameWarning(history: History) {
+  expect(history.location).toMatchObject({
+    pathname: "/",
+  });
+
+  history.push("/the/path?the=query#the-hash");
+  expect(history.action).toBe("PUSH");
+  expect(history.location).toMatchObject({
+    pathname: "/the/path",
+    search: "?the=query",
+    hash: "#the-hash",
+  });
+
+  let spy = jest.spyOn(console, "warn").mockImplementation(() => {});
+  history.push("../other/path?another=query#another-hash");
+  expect(spy).toHaveBeenCalledWith(
+    expect.stringContaining("relative pathnames are not supported")
+  );
+  spy.mockReset();
+
+  expect(history.location).toMatchObject({
+    pathname: "../other/path",
+    search: "?another=query",
+    hash: "#another-hash",
+  });
+}
diff --git a/packages/history/__tests__/TestSequences/PushSamePath.ts b/packages/history/__tests__/TestSequences/PushSamePath.ts
@@ -0,0 +1,25 @@
+import type { History } from "../../index";
+
+export default function PushSamePath(history: History) {
+  expect(history.location).toMatchObject({
+    pathname: "/",
+  });
+
+  history.push("/home");
+  expect(history.action).toBe("PUSH");
+  expect(history.location).toMatchObject({
+    pathname: "/home",
+  });
+
+  history.push("/home");
+  expect(history.action).toBe("PUSH");
+  expect(history.location).toMatchObject({
+    pathname: "/home",
+  });
+
+  history.go(-1);
+  expect(history.action).toBe("POP");
+  expect(history.location).toMatchObject({
+    pathname: "/home",
+  });
+}
diff --git a/packages/history/__tests__/TestSequences/PushState.ts b/packages/history/__tests__/TestSequences/PushState.ts
@@ -0,0 +1,16 @@
+import type { History } from "../../index";
+
+export default function PushState(history: History) {
+  expect(history.location).toMatchObject({
+    pathname: "/",
+  });
+
+  history.push("/home?the=query#the-hash", { the: "state" });
+  expect(history.action).toBe("PUSH");
+  expect(history.location).toMatchObject({
+    pathname: "/home",
+    search: "?the=query",
+    hash: "#the-hash",
+    state: { the: "state" },
+  });
+}
diff --git a/packages/history/__tests__/TestSequences/ReplaceNewLocation.ts b/packages/history/__tests__/TestSequences/ReplaceNewLocation.ts
@@ -0,0 +1,26 @@
+import type { History } from "../../index";
+
+export default function ReplaceNewLocation(history: History) {
+  expect(history.location).toMatchObject({
+    pathname: "/",
+  });
+
+  history.replace("/home?the=query#the-hash");
+  expect(history.action).toBe("REPLACE");
+  expect(history.location).toMatchObject({
+    pathname: "/home",
+    search: "?the=query",
+    hash: "#the-hash",
+    state: null,
+    key: expect.any(String),
+  });
+
+  history.replace("/");
+  expect(history.action).toBe("REPLACE");
+  expect(history.location).toMatchObject({
+    pathname: "/",
+    search: "",
+    state: null,
+    key: expect.any(String),
+  });
+}
diff --git a/packages/history/__tests__/TestSequences/ReplaceSamePath.ts b/packages/history/__tests__/TestSequences/ReplaceSamePath.ts
@@ -0,0 +1,23 @@
+import type { History } from "../../index";
+
+export default function ReplaceSamePath(history: History) {
+  expect(history.location).toMatchObject({
+    pathname: "/",
+  });
+
+  history.replace("/home");
+  expect(history.action).toBe("REPLACE");
+  expect(history.location).toMatchObject({
+    pathname: "/home",
+  });
+
+  let prevLocation = history.location;
+
+  history.replace("/home");
+  expect(history.action).toBe("REPLACE");
+  expect(history.location).toMatchObject({
+    pathname: "/home",
+  });
+
+  expect(history.location).not.toBe(prevLocation);
+}
diff --git a/packages/history/__tests__/TestSequences/ReplaceState.ts b/packages/history/__tests__/TestSequences/ReplaceState.ts
@@ -0,0 +1,16 @@
+import type { History } from "../../index";
+
+export default function ReplaceState(history: History) {
+  expect(history.location).toMatchObject({
+    pathname: "/",
+  });
+
+  history.replace("/home?the=query#the-hash", { the: "state" });
+  expect(history.action).toBe("REPLACE");
+  expect(history.location).toMatchObject({
+    pathname: "/home",
+    search: "?the=query",
+    hash: "#the-hash",
+    state: { the: "state" },
+  });
+}
diff --git a/packages/history/__tests__/memory-test.ts b/packages/history/__tests__/memory-test.ts
diff --git a/packages/history/index.ts b/packages/history/index.ts
diff --git a/packages/history/jest.config.js b/packages/history/jest.config.js
diff --git a/packages/history/node-main.js b/packages/history/node-main.js
diff --git a/packages/history/package.json b/packages/history/package.json
diff --git a/packages/history/tsconfig.json b/packages/history/tsconfig.json
diff --git a/rollup.config.js b/rollup.config.js
diff --git a/tsconfig.json b/tsconfig.json
