Introduce new router API.

- location module
- Route
- Redirect
- Link
- Switch

Author: Jorge Bucaran

.editorconfig

@@ -1,7 +1,7 @@
 language: node_js
 node_js:
+  - "8"
   - "7"
-  - "6"
 
 env:
   - NODE_ENV=development
@@ -15,3 +15,6 @@ install:
 script:
   - npm test
   - codecov
+
+notifications:
+  email: false

.travis.yml

@@ -1,4 +1,4 @@
-Copyright © 2017-present [Jorge Bucaran](https://github.com/jbucaran)
+Copyright © 2017-present [Jorge Bucaran](https://github.com/JorgeBucaran)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

LICENSE.md

@@ -1,7 +1,7 @@
 {
   "name": "@hyperapp/router",
   "description": "Utilities for routing client-side pages with Hyperapp.",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "main": "dist/router.js",
   "jsnext:main": "src/index.js",
   "module": "src/index.js",
@@ -26,24 +26,24 @@
   "scripts": {
     "test": "jest --coverage --no-cache",
     "build": "npm run bundle && npm run minify",
-    "bundle": "rollup -i src/index.js -o dist/router.js -f umd -mn router",
-    "minify": "uglifyjs dist/router.js -o dist/router.js --mangle --compress warnings=false --pure-funcs=Object.defineProperty -p relative --source-map dist/router.js.map",
+    "bundle": "rollup -i src/index.js -o dist/router.js -f umd -mn router -g hyperapp:hyperapp",
+    "minify": "uglifyjs dist/router.js -o dist/router.js --mangle --compress warnings=false --pure-funcs=Object.defineProperty -p relative --in-source-map dist/router.js.map --source-map dist/router.js.map",
     "prepublish": "npm run build",
     "format": "prettier --semi false --write 'src/**/*.js'",
     "release": "npm run build && npm test && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
   },
   "babel": {
-    "presets": "es2015"
+    "presets": "env"
   },
   "devDependencies": {
-    "babel-preset-es2015": "^6.24.1",
-    "hyperapp": "^0.12.0",
-    "jest": "^20.0.4",
-    "prettier": "~1.5.3",
-    "rollup": "^0.47.6",
+    "babel-preset-env": "^1.6.1",
+    "hyperapp": "*",
+    "jest": "^21.2.1",
+    "prettier": "^1.8.2",
+    "rollup": "^0.52.0",
     "uglify-js": "^2.7.5"
   },
   "peerDependencies": {
-    "hyperapp": "^0.12.0"
+    "hyperapp": "*"
   }
 }

package.json

@@ -1,25 +1,32 @@
 import { h } from "hyperapp"
 
 export function Link(props, children) {
-  props.href = props.to
-  props.to = null
+  var href = props.to
+  var location = props.location || window.location
 
-  props.onclick = function(event) {
-    if (
-      event.button !== 0 ||
-      event.metaKey ||
-      event.altKey ||
-      event.ctrlKey ||
-      event.shiftKey ||
-      props.target === "_blank" ||
-      event.currentTarget.origin !== window.location.origin
-    ) {
-      return
-    }
+  return h(
+    "a",
+    {
+      href: href,
+      onclick: function(e) {
+        if (
+          e.button !== 0 ||
+          e.altKey ||
+          e.metaKey ||
+          e.ctrlKey ||
+          e.shiftKey ||
+          props.target === "_blank" ||
+          e.currentTarget.origin !== location.origin
+        ) {
+        } else {
+          e.preventDefault()
 
-    event.preventDefault()
-    props.go(props.href)
-  }
-
-  return h("a", props, children)
+          if (location.pathname !== href) {
+            history.pushState(location.pathname, "", href)
+          }
+        }
+      }
+    },
+    children
+  )
 }

src/Link.js

@@ -0,0 +1,4 @@
+export function Redirect(props) {
+  var location = props.location || window.location
+  history.replaceState(props.from || location.pathname, "", props.to)
+}

src/Redirect.js

@@ -0,0 +1,19 @@
+import { parseRoute } from "./parseRoute"
+
+export function Route(props) {
+  var location = props.location || window.location
+  var path = props.path
+  var match =
+    !path ||
+    parseRoute(path, location.pathname, {
+      exact: !props.parent
+    })
+
+  return (
+    match &&
+    props.view({
+      location: location,
+      match: match
+    })
+  )
+}

src/Route.js

@@ -0,0 +1,3 @@
+export function Switch(props, children) {
+  return children[0]
+}

src/Switch.js

@@ -1,2 +1,5 @@
-export { router } from "./router"
 export { Link } from "./Link"
+export { Route } from "./Route"
+export { Switch } from "./Switch"
+export { Redirect } from "./Redirect"
+export { default as location } from "./location"

src/index.js

@@ -0,0 +1,57 @@
+var pathname = location.pathname
+var PUSHSTATE = "pushstate"
+var POPSTATE = "popstate"
+
+export default {
+  state: {
+    pathname: pathname,
+    previous: pathname
+  },
+  actions: {
+    go: function(pathname) {
+      history.pushState(null, "", pathname)
+    },
+    set: function(data) {
+      return data
+    }
+  },
+  subscribe: function(actions) {
+    var unwrap = wrapHistory(["pushState", "replaceState"])
+
+    addEventListener(PUSHSTATE, handleLocationChange)
+    addEventListener(POPSTATE, handleLocationChange)
+
+    return function() {
+      removeEventListener(PUSHSTATE, handleLocationChange)
+      removeEventListener(POPSTATE, handleLocationChange)
+      unwrap()
+    }
+
+    function handleLocationChange(e) {
+      actions.set({
+        pathname: location.pathname,
+        previous: e.detail ? (location.previous = e.detail) : location.previous
+      })
+    }
+  }
+}
+
+function wrapHistory(keys) {
+  return keys.reduce(function(next, key) {
+    var method = history[key]
+
+    history[key] = function(data, title, url) {
+      method.call(this, data, title, url)
+      dispatchEvent(
+        new CustomEvent("pushstate", {
+          detail: data
+        })
+      )
+    }
+
+    return function() {
+      history[key] = method
+      next && next()
+    }
+  }, null)
+}