Use hash history instead of browser's native history

Author: qti3e

package.json

@@ -18,10 +18,12 @@
   "devDependencies": {
     "@types/acorn": "^4.0.3",
     "@types/codemirror": "0.0.51",
+    "@types/history": "^4.6.2",
     "@types/node": "^8.9.4",
     "acorn": "^5.5.0",
     "codemirror": "^5.35.0",
     "he": "^1.1.1",
+    "history": "^4.7.2",
     "ncp": "^2.0.0",
     "node-fetch": "^1.7.3",
     "node-sass": "^4.9.0",

src/app.tsx

@@ -15,7 +15,7 @@
 
 import { Component, h } from "preact";
 import * as db from "./db";
-import { pushState, Router } from "./router";
+import { push, Router } from "./router";
 import * as types from "./types";
 import { equal } from "./util";
 
@@ -104,12 +104,12 @@ const anonDoc = {
 async function onNewNotebookClicked() {
   const nbId = await db.active.create();
   // Redirect to new notebook.
-  pushState(`/notebook/${nbId}`);
+  push(`/notebook/${nbId}`);
 }
 
 async function onPreviewClicked(nbId: string) {
   // Redirect to notebook.
-  pushState(`/notebook/${nbId}`);
+  push(`/notebook/${nbId}`);
 }
 
 export const RecentPage = bind(Recent, {
@@ -163,7 +163,7 @@ export const NotebookPage = bind(Notebook, {
     const cb = async doc => {
       const cloneId = await db.active.clone(doc);
       // Redirect to new notebook.
-      pushState(`/notebook/${cloneId}`);
+      push(`/notebook/${cloneId}`);
     };
     return Promise.resolve(cb);
   }

src/components/footer.tsx

@@ -14,14 +14,15 @@
  */
 
 import { h } from "preact";
+import { Link } from "./link";
 
 export function Footer(): JSX.Element {
   return (
     <div class="footer">
-      <a href="/references">References</a>
-      <a href="/docs">Documentation</a>
-      <a href="https://github.com/propelml/propel">GitHub</a>
-      <a href="mailto:[email protected]">Contact</a>
+      <Link href="/references">References</Link>
+      <Link href="/docs">Documentation</Link>
+      <Link href="https://github.com/propelml/propel">GitHub</Link>
+      <Link href="mailto:[email protected]">Contact</Link>
     </div>
   );
 }

src/components/link.tsx

@@ -0,0 +1,28 @@
+/*!
+   Copyright 2018 Propel http://propel.site/.  All rights reserved.
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+
+import { h } from "preact";
+import { push } from "../router";
+
+export interface LinkProps extends JSX.HTMLAttributes {
+  href: string;
+}
+
+export function Link(props: LinkProps) {
+  const { href, children, ...otherProps } = props;
+  return (
+    <a onClick={() => push(href)} {...otherProps} > { children } </a>
+  );
+}

src/components/logo.tsx

@@ -14,6 +14,7 @@
  */
 
 import { h } from "preact";
+import { Link } from "./link";
 
 export interface PropelLogoProps {
   subtitle?: string;
@@ -26,7 +27,7 @@ export function PropelLogo(props: PropelLogoProps): JSX.Element {
   if (props.subtitle) {
     Subtitle = (
       <h2>
-        <a href={props.subtitleLink || "/"}>{props.subtitle}</a>
+        <Link href={props.subtitleLink || "/"}>{props.subtitle}</Link>
       </h2>
     );
   }
@@ -45,7 +46,7 @@ export function PropelLogo(props: PropelLogoProps): JSX.Element {
       <div class="global-title">
         <div class="global-main-title">
           <h1>
-            <a href="/">Propel</a>
+            <Link href="/">Propel</Link>
           </h1>
         </div>
         <div class="global-sub-title">{Subtitle}</div>

src/components/user_title.tsx

@@ -16,20 +16,21 @@
 import { h } from "preact";
 import * as types from "../types";
 import { Avatar } from "./avatar";
+import { Link } from "./link";
 
 export interface UserTitleProps {
   userInfo: types.UserInfo;
 }
 
 export function UserTitle(props: UserTitleProps): JSX.Element {
-  const href = window.location.origin + "/user/" + props.userInfo.uid;
+  const href = "/user/" + props.userInfo.uid;
   return (
     <div class="nb-listing-header-title">
       <Avatar userInfo={props.userInfo} />
       <h2>
-        <a class="profile-link" href={href} >
+        <Link class="profile-link" href={href} >
           {props.userInfo.displayName}
-        </a>
+        </Link>
       </h2>
     </div>
   );

src/router.tsx

@@ -13,11 +13,13 @@
    limitations under the License.
  */
 
+import { createHashHistory } from "history";
 import pathToRegexp from "path-to-regexp";
 import { cloneElement, Component, VNode } from "preact";
 
 let id = 0;
 const listeners = new Map<number, () => void>();
+const history = createHashHistory();
 const regexCache = new Map<string, RegExp>();
 const regexKeysCache = new Map<string, string[]>();
 
@@ -26,7 +28,7 @@ export interface MatchedResult {
 }
 
 export function match(pattern: string): false | MatchedResult {
-  const path = window.location.pathname;
+  const path = history.location.pathname;
   let regex = regexCache.get(pattern);
   let keys = regexKeysCache.get(pattern);
   if (!regex) {
@@ -47,24 +49,6 @@ export function match(pattern: string): false | MatchedResult {
   return data;
 }
 
-function onPopState() {
-  const mapValues = listeners.values();
-  for (const cb of mapValues) {
-    cb();
-  }
-}
-
-window.onpopstate = onPopState;
-
-export function pushState(url) {
-  window.history.pushState({}, document.title, url);
-  onPopState();
-}
-
-export function back() {
-  window.history.back();
-}
-
 export interface RouterChildProps {
   path?: string;
 }
@@ -106,8 +90,8 @@ export class Router extends Component<RouterProps, RouterState> {
   }
 
   componentWillMount() {
-    this.id = ++id;
-    listeners.set(id, this.onLocationChange.bind(this));
+    this.id = id++;
+    listeners.set(this.id, this.onLocationChange.bind(this));
     this.onLocationChange();
   }
 
@@ -127,3 +111,18 @@ export class Router extends Component<RouterProps, RouterState> {
     return cloneElement(activeEl, newProps);
   }
 }
+
+export function push(url) {
+  history.push(url);
+}
+
+export function back() {
+  history.goBack();
+}
+
+history.listen(() => {
+  const listenerCbs = listeners.values();
+  for (const cb of listenerCbs) {
+    cb();
+  }
+});

yarn.lock

@@ -16,6 +16,10 @@
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
 
+"@types/history@^4.6.2":
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.6.2.tgz#12cfaba693ba20f114ed5765467ff25fdf67ddb0"
+
 "@types/node@^8.9.4":
   version "8.10.12"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.12.tgz#dcb66f6de39074a296534bd1a256a3c6a1c8f5b5"
@@ -2450,6 +2454,16 @@ he@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
 
+history@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b"
+  dependencies:
+    invariant "^2.2.1"
+    loose-envify "^1.2.0"
+    resolve-pathname "^2.2.0"
+    value-equal "^0.4.0"
+    warning "^3.0.0"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -2608,7 +2622,7 @@ ini@^1.3.4, ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
-invariant@^2.2.2:
+invariant@^2.2.1, invariant@^2.2.2:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   dependencies:
@@ -3137,7 +3151,7 @@ longest-streak@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.2.tgz#2421b6ba939a443bb9ffebf596585a50b4c38e2e"
 
-loose-envify@^1.0.0:
+loose-envify@^1.0.0, loose-envify@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -4684,6 +4698,10 @@ resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
 
+resolve-pathname@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -5667,6 +5685,10 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
+
 vega-canvas@1, vega-canvas@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/vega-canvas/-/vega-canvas-1.0.1.tgz#22cfa510af0cfbd920fc6af8b6111d3de5e63c44"
@@ -5923,6 +5945,12 @@ [email protected]:
   dependencies:
     indexof "0.0.1"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  dependencies:
+    loose-envify "^1.0.0"
+
 whet.extend@~0.9.9:
   version "0.9.9"
   resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"