preload if good connection

Author: loteoo

src/Lifecycle.js

@@ -0,0 +1,34 @@
+
+import { h } from 'hyperapp'
+
+/**
+ * Simple helper to emulate Hyperapp#2 lifecycle events
+ * Thanks @sergey-shpak for this gist!
+ * https://gist.github.com/sergey-shpak/ff87e56e03dc16c8ee24dc562c6f7dff
+ *
+ */
+
+const dispatchEvent = (event, target) =>
+  setTimeout(()=> target.dispatchEvent(
+    new CustomEvent(event, { detail: target })
+  ))
+
+const defineElement = name => {
+  customElements.get(name) ||
+  customElements.define(name, class extends HTMLElement {
+    appendChild(child){
+      super.appendChild(child)
+      dispatchEvent('create', child)
+      return child
+    }
+    removeChild(child){
+      super.removeChild(child)
+      dispatchEvent('remove', child)
+      return child
+    }
+  })
+}
+
+export const Lifecycle = (props, child) =>
+  (defineElement('ha-lifecycle'), h('ha-lifecycle', props, [child]))
+

src/Link.js

@@ -1,19 +1,22 @@
 import { h } from 'hyperapp'
-
-import { Navigate, TriggerRouteLoad } from './actions'
+import {Lifecycle} from './Lifecycle'
+import { Navigate, TriggerRouteLoad, TriggerRouteLoadIfGoodConnection } from './actions'
 
 // Link component
 export const Link = ({ to, ...props }, children) => {
-  return h('a', {
-    href: to,
-    onclick: [
-      state => state,
-      ev => {
-        ev.preventDefault()
-      }
-    ],
-    onmousedown: [Navigate, to],
-    onmouseover: [TriggerRouteLoad, to],
-    ...props
-  }, children)
+  return Lifecycle({}, [
+    h('a', {
+      href: to,
+      onclick: [
+        state => state,
+        ev => {
+          ev.preventDefault()
+        }
+      ],
+      onmousedown: [Navigate, to],
+      onmouseover: [TriggerRouteLoad, to],
+      oncreate: [TriggerRouteLoadIfGoodConnection, to],
+      ...props
+    }, children)
+  ])
 }

src/actions.js

@@ -39,6 +39,15 @@ export const Navigate = (state, to) => [
   ChangeLocation({ to })
 ]
 
+
+export const TriggerRouteLoadIfGoodConnection = (state, path) => {
+  if (state.goodConnection) {
+    return TriggerRouteLoad(state, path)
+  }
+
+  return state
+}
+
 export const TriggerRouteLoad = (state, path) => {
   const routes = Object.keys(state.routes).map(route => state.routes[route])
   const matchedRoute = routes.find(route => route.pattern.match(path))

src/getInitialState.js

@@ -15,6 +15,7 @@ const buildRoutesObject = (routes) => Object.keys(routes).reduce((routesObj, rou
 
 export const getInitialState = (routes, extraInit) => {
   const init = {
+    goodConnection: navigator.connection.downlink > 2, // TODO: use something more reliable, maybe an effect
     location: {
       path: '/',
       params: {},