Use anchor for better accessibility and restore history

src/core/client/framework/utils/buildURL.spec.ts

@@ -0,0 +1,18 @@
+import buildURL from "./buildURL";
+
+it("should default to window.location", () => {
+  const url = buildURL();
+  expect(url).toBe("http://localhost/");
+});
+
+it("should build from parameters", () => {
+  const url = buildURL({
+    protocol: "https",
+    hostname: "hostname",
+    port: "8080",
+    pathname: "/pathname",
+    search: "search",
+    hash: "#hash",
+  });
+  expect(url).toBe("https//hostname:8080/pathname?search#hash");
+});

src/core/client/framework/utils/buildURL.ts

@@ -0,0 +1,17 @@
+export default function buildURL({
+  protocol = window.location.protocol,
+  hostname = window.location.hostname,
+  port = window.location.port,
+  pathname = window.location.pathname,
+  search = window.location.search,
+  hash = window.location.hash,
+} = {}) {
+  if (search && search[0] !== "?") {
+    search = `?${search}`;
+  } else if (search === "?") {
+    search = "";
+  }
+  return `${protocol}//${hostname}${
+    port ? `:${port}` : ""
+  }${pathname}${search}${hash}`;
+}

src/core/client/framework/utils/index.ts

@@ -0,0 +1,2 @@
+export { default as buildURL } from "./buildURL";
+export { default as parseURL } from "./parseURL";

src/core/client/framework/utils/parseURL.spec.ts

@@ -0,0 +1,20 @@
+import parseURL from "./parseURL";
+
+it("should parse url", () => {
+  const testCases: [[string, ReturnType<typeof parseURL>]] = [
+    [
+      "https://coralproject.net",
+      {
+        protocol: "https:",
+        hostname: "coralproject.net",
+        port: "",
+        pathname: "/",
+        search: "",
+        hash: "",
+      },
+    ],
+  ];
+  testCases.forEach(([url, expected]) => {
+    expect(parseURL(url)).toEqual(expected);
+  });
+});

src/core/client/framework/utils/parseURL.ts

@@ -0,0 +1,14 @@
+import { pick } from "lodash";
+
+export default function parseURL(url: string) {
+  const parser = document.createElement("a");
+  parser.href = url;
+  return pick(parser, [
+    "protocol",
+    "hostname",
+    "port",
+    "pathname",
+    "search",
+    "hash",
+  ]);
+}