Implement router

Author: qti3e

package.json

@@ -26,6 +26,7 @@
     "node-fetch": "^1.7.3",
     "node-sass": "^4.9.0",
     "parcel-bundler": "1.7.x",
+    "path-to-regexp": "^2.2.1",
     "preact": "^8.2.7",
     "prettier": "^1.12.1",
     "puppeteer": "^0.13.0",

src/router.tsx

@@ -0,0 +1,129 @@
+/*!
+   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 pathToRegexp from "path-to-regexp";
+import { cloneElement, Component, VNode } from "preact";
+
+let id = 0;
+const listeners = new Map<number, () => void>();
+const regexCache = new Map<string, RegExp>();
+const regexKeysCache = new Map<string, string[]>();
+
+export interface MatchedResult {
+  [key: string]: string;
+}
+
+export function match(pattern: string): false | MatchedResult {
+  const path = window.location.pathname;
+  let regex = regexCache.get(pattern);
+  let keys = regexKeysCache.get(pattern);
+  if (!regex) {
+    const mKeys = [];
+    regex = pathToRegexp(pattern, mKeys);
+    keys = mKeys.map(x => x.name);
+    regexCache.set(pattern, regex);
+    regexKeysCache.set(pattern, keys);
+  }
+  const re = regex.exec(path);
+  if (!re) return false;
+  const data = {};
+  for (const i in keys) {
+    if (!keys[i]) continue;
+    const key = keys[i];
+    data[key] = re[1 + Number(i)];
+  }
+  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;
+}
+
+export type RouterChild = VNode<RouterChildProps>;
+
+export interface RouterProps {
+  children?: RouterChild[];
+}
+
+export interface RouterState {
+  active: number | string;
+  props: MatchedResult;
+}
+
+export class Router extends Component<RouterProps, RouterState> {
+  state = {
+    active: null,
+    props: null
+  };
+  id: number;
+
+  onLocationChange() {
+    const children: RouterChild[] = this.props.children;
+    for (const i in children) {
+      if (!children[i]) continue;
+      const child = children[i];
+      const attributes = child.attributes;
+      if (!attributes || !attributes.path) {
+        this.setState({ active: i, props: null });
+        return;
+      }
+      const props = match(attributes.path);
+      if (!props) continue;
+      this.setState({ active: i, props });
+      return;
+    }
+    this.setState({ active: null, props: null });
+  }
+
+  componentWillMount() {
+    this.id = ++id;
+    listeners.set(id, this.onLocationChange.bind(this));
+    this.onLocationChange();
+  }
+
+  componentWillUnmount() {
+    listeners.delete(this.id);
+  }
+
+  componentWillReceiveProps() {
+    this.onLocationChange();
+  }
+
+  render() {
+    const { active, props } = this.state;
+    if (active === null) return null;
+    const activeEl = this.props.children[active];
+    const newProps = { ...activeEl.attributes, matches: props };
+    return cloneElement(activeEl, newProps);
+  }
+}

tsconfig.json

@@ -19,6 +19,7 @@
     "preserveConstEnums": true,
     "pretty": true,
     "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
     "target": "es2017"
   },
   "exclude": ["build", "deps", "node_modules", "src/testdata/"]

yarn.lock

@@ -3960,6 +3960,10 @@ path-parse@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
 
+path-to-regexp@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-2.2.1.tgz#90b617025a16381a879bc82a38d4e8bdeb2bcf45"
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"