Hyperapp#2 support

Author: sergey-shpak

package.json

@@ -48,14 +48,14 @@
     "babel-jest": "^22.4.3",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-env": "^1.6.1",
-    "hyperapp": "^1.2.5",
+    "hyperapp": "^2.0.0",
     "jest": "^22.4.3",
     "prettier": "^1.11.1",
     "rollup": "^0.57.1",
     "uglify-js": "^3.3.16",
     "typescript": "2.8.1"
   },
   "peerDependencies": {
-    "hyperapp": "1.2.5"
+    "hyperapp": "2.0.0"
   }
 }

src/Link.js

@@ -1,47 +1,27 @@
-import { h } from "hyperapp"
+import { h } from 'hyperapp'
+import { location } from './location'
 
-function getOrigin(loc) {
-  return loc.protocol + "//" + loc.hostname + (loc.port ? ":" + loc.port : "")
-}
-
-function isExternal(anchorElement) {
-  // Location.origin and HTMLAnchorElement.origin are not
-  // supported by IE and Safari.
-  return getOrigin(location) !== getOrigin(anchorElement)
+function onClick(state, link, e){
+  if(
+    e.defaultPrevented ||
+    e.button !== 0 ||
+    e.altKey ||
+    e.metaKey ||
+    e.ctrlKey ||
+    e.shiftKey ||
+    e.target.getAttribute("target") === "_blank" ||
+    link.href === state.location.pathname
+  ){
+    return state
+  } else {
+    e.preventDefault()
+    return location(state, link.href)
+  }
 }
 
-export function Link(props, children) {
-  return function(state, actions) {
-    var to = props.to
-    var location = state.location
-    var onclick = props.onclick
-    delete props.to
-    delete props.location
-
-    props.href = to
-    props.onclick = function(e) {
-      if (onclick) {
-        onclick(e)
-      }
-      if (
-        e.defaultPrevented ||
-        e.button !== 0 ||
-        e.altKey ||
-        e.metaKey ||
-        e.ctrlKey ||
-        e.shiftKey ||
-        props.target === "_blank" ||
-        isExternal(e.currentTarget)
-      ) {
-      } else {
-        e.preventDefault()
-
-        if (to !== location.pathname) {
-          history.pushState(location.pathname, "", to)
-        }
-      }
-    }
-
-    return h("a", props, children)
-  }
+export function Link(props, childrens){
+  props.onClick = props.onClick || [ onClick, props ]
+  props.href = props.to
+  delete props.to
+  return h('a', props, childrens)
 }

src/Redirect.js

@@ -1,18 +1,23 @@
-import { parseRoute } from "./parseRoute"
+import { Switch } from './Switch'
+import { parseRoute } from './parseRoute'
 
-export function Route(props) {
-  return function(state, actions) {
-    var location = state.location
-    var match = parseRoute(props.path, location.pathname, {
-      exact: !props.parent
-    })
-
-    return (
-      match &&
-      props.render({
-        match: match,
-        location: location
+export function Route(props, childrens){
+  var location = props.location
+  var path = props.path || ''
+  var render = props.render || Switch
+  var match = parseRoute(path, location.pathname, {
+    exact: !props.parent
+  })
+  return (match && render(
+    function(){
+      var args = Array.prototype.slice.call(arguments, 0)
+      args[0] = Object.assign({}, args[0], {
+        location: location,
+        path: path + args[0].path || '',
       })
-    )
-  }
-}
+      return Route.apply(this, args)
+    },
+    Object.assign({}, props, { match: match, location: location } ),
+    childrens)
+  )
+}

src/Route.js

@@ -1,12 +1,3 @@
-export function Switch(props, children) {
-  return function(state, actions) {
-    var child,
-      i = 0
-    while (
-      !(child = children[i] && children[i](state, actions)) &&
-      i < children.length
-    )
-      i++
-    return child
-  }
+export function Switch(props, childrens){
+  return childrens[0]
 }

src/Switch.js

@@ -0,0 +1,5 @@
+export function history(location){
+  if(location && window.location.pathname !== location.pathname){
+    window.history.pushState(location, '', location.pathname)
+  }
+}

src/history.js

@@ -1,5 +1,5 @@
-export { Link } from "./Link"
-export { Route } from "./Route"
-export { Switch } from "./Switch"
-export { Redirect } from "./Redirect"
-export { location } from "./location"
+export { location } from './location'
+export { history } from './history'
+export { Switch } from './Switch'
+export { Route } from './Route'
+export { Link } from './Link'

src/index.js

@@ -1,51 +1,10 @@
-function wrapHistory(keys) {
-  return keys.reduce(function(next, key) {
-    var fn = history[key]
-
-    history[key] = function(data, title, url) {
-      fn.call(this, data, title, url)
-      dispatchEvent(new CustomEvent("pushstate", { detail: data }))
-    }
-
-    return function() {
-      history[key] = fn
-      next && next()
-    }
-  }, null)
-}
-
-export var location = {
-  state: {
-    pathname: window.location.pathname,
-    previous: window.location.pathname
-  },
-  actions: {
-    go: function(pathname) {
-      history.pushState(null, "", pathname)
-    },
-    set: function(data) {
-      return data
-    }
-  },
-  subscribe: function(actions) {
-    function handleLocationChange(e) {
-      actions.set({
-        pathname: window.location.pathname,
-        previous: e.detail
-          ? (window.location.previous = e.detail)
-          : window.location.previous
-      })
-    }
-
-    var unwrap = wrapHistory(["pushState", "replaceState"])
-
-    addEventListener("pushstate", handleLocationChange)
-    addEventListener("popstate", handleLocationChange)
-
-    return function() {
-      removeEventListener("pushstate", handleLocationChange)
-      removeEventListener("popstate", handleLocationChange)
-      unwrap()
-    }
-  }
-}
+export function location(state, path){
+  return Object.assign({}, state, {
+    location: {
+      pathname: path || window.location.pathname,
+      previous: state && state.location
+        ? state.location.pathname
+        : window.location.pathname
+    }
+  })
+}