hyperapp - npm Package Compare versions

Comparing version 0.15.1 to 0.16.0

dist/hyperapp.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(e.hyperapp={})}(this,function(e){"use strict";function n(e,n){var t,i=[];for(r=arguments.length;r-- >2;)o.push(arguments[r]);for(;o.length;)if(Array.isArray(t=o.pop()))for(r=t.length;r--;)o.push(t[r]);else null!=t&&!0!==t&&!1!==t&&i.push("number"==typeof t?t+="":t);return"string"==typeof e?{type:e,props:n||{},children:i}:e(n||{},i)}function t(e,t){function r(){e.view&&!m&&requestAnimationFrame(o,m=!m)}function o(){i(b=v(t,b,k,k=e.view(g,w),m=!m))}function i(e){for(;e=A.pop();)e()}function u(e,t){return e&&n(e.tagName.toLowerCase(),{},t.call(e.childNodes,function(e){return 3===e.nodeType?e.nodeValue:u(e,t)}))}function p(e,n,t){e.init&&A.push(function(){e.init(n,t)}),c(n,e.state),f(n,t,e.actions);for(var r in e.modules)p(e.modules[r],n[r]={},t[r]={})}function f(e,n,t){function o(n){return"function"==typeof n?o(n(e)):n&&r(c(e,n)),e}Object.keys(t||{}).map(function(r){"function"==typeof t[r]?n[r]=function(i){return"function"==typeof(i=t[r](e,n,i))?i(o):o(i)}:f(e[r]||(e[r]={}),n[r]={},t[r])})}function c(e,n){for(var t in n)e[t]=n[t];return e}function l(e,n){return c(c({},e),n)}function s(e,n){if("string"==typeof e)var t=document.createTextNode(e);else{var t=(n=n||"svg"===e.type)?document.createElementNS("http://www.w3.org/2000/svg",e.type):document.createElement(e.type);e.props&&e.props.oncreate&&A.push(function(){e.props.oncreate(t)});for(var r=0;r<e.children.length;r++)t.appendChild(s(e.children[r],n));for(var r in e.props)a(t,r,e.props[r])}return t}function a(e,n,t,r){if("key"===n);else if("style"===n)for(var n in l(r,t=t||{}))e.style[n]=t[n]||"";else{try{e[n]=t}catch(e){}"function"!=typeof t&&(t?e.setAttribute(n,t):e.removeAttribute(n))}}function d(e,n,t){for(var r in l(n,t)){var o=t[r],i="value"===r||"checked"===r?e[r]:n[r];o!==i&&o!==i&&a(e,r,o,i)}t&&t.onupdate&&A.push(function(){t.onupdate(e,n)})}function y(e,n,t){function r(){e.removeChild(n)}t&&t.onremove&&"function"==typeof(t=t.onremove(n))?t(r):r()}function h(e){if(e&&e.props)return e.props.key}function v(e,n,t,r,o,i){if(null==t)n=e.insertBefore(s(r,o),n);else if(null!=r.type&&r.type===t.type){d(n,t.props,r.props),o=o||"svg"===r.type;for(var u=r.children.length,p=t.children.length,f={},c=[],l={},a=0;a<p;a++){var m=c[a]=n.childNodes[a],g=t.children[a],w=h(g);null!=w&&(f[w]=[m,g])}for(var a=0,b=0;b<u;){var m=c[a],g=t.children[a],k=r.children[b],w=h(g);if(l[w])a++;else{var A=h(k),N=f[A]||[];null==A?(null==w&&(v(n,m,g,k,o),b++),a++):(w===A?(v(n,N[0],N[1],k,o),a++):N[0]?(n.insertBefore(N[0],m),v(n,N[0],N[1],k,o)):v(n,m,null,k,o),b++,l[A]=k)}}for(;a<p;){var g=t.children[a],w=h(g);null==w&&y(n,c[a],g.props),a++}for(var a in f){var N=f[a],x=N[1];l[x.props.key]||y(n,N[0],x.props)}}else n&&r!==n.nodeValue&&("string"==typeof r&&"string"==typeof t?n.nodeValue=r:(n=e.insertBefore(s(r,o),i=n),y(e,i,t.props)));return n}var m,g,w,b=(t=t||document.body).children[0],k=u(b,[].map),A=[];return r(i(p(e,g={},w={}))),w}var r,o=[];e.h=n,e.app=t});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(e.hyperapp={})}(this,function(e){"use strict";function n(e,n){function r(e,n){return e&&t(e.tagName.toLowerCase(),{},n.call(e.childNodes,function(e){return 3===e.nodeType?e.nodeValue:r(e,n)}))}function o(){e.view&&!m&&setTimeout(i,m=!m)}function i(t){for(m=!m,(t=e.view(k,N))&&!m&&(w=g(n,w,b,b=t));t=x.pop();)t()}function u(e,n,t,r){var o=t.modules;f(e,n,t.actions,r),c(e,t.state);for(var i in o)u(e[i]={},n[i]={},o[i],r.concat(i))}function f(e,n,t,r){Object.keys(t||{}).map(function(i){"function"==typeof t[i]?n[i]=function(u){var f=t[i](e=s(r,k),n);return"function"==typeof f&&(f=f(u)),f&&f!==e&&!f.then&&o(k=l(r,p(e,f),k)),f}:f(e[i]||(e[i]={}),n[i]={},t[i],r.concat(i))})}function p(e,n){return c(c({},e),n)}function c(e,n){for(var t in n)e[t]=n[t];return e}function l(e,n,t){var r={};return 0===e.length?n:(r[e[0]]=1<e.length?l(e.slice(1),n,t[e[0]]):n,p(t,r))}function s(e,n){for(var t=0;t<e.length;t++)n=n[e[t]];return n}function a(e,n){if("string"==typeof e)var t=document.createTextNode(e);else{var t=(n=n||"svg"===e.type)?document.createElementNS("http://www.w3.org/2000/svg",e.type):document.createElement(e.type);e.props.oncreate&&x.push(function(){e.props.oncreate(t)});for(var r=0;r<e.children.length;r++)t.appendChild(a(e.children[r],n));for(var r in e.props)d(t,r,e.props[r])}return t}function d(e,n,t,r){if("key"===n);else if("style"===n)for(var n in p(r,t=t||{}))e.style[n]=t[n]||"";else{try{e[n]=null==t?"":t}catch(e){}"function"!=typeof t&&(null==t||!1===t?e.removeAttribute(n):e.setAttribute(n,t))}}function h(e,n,t){for(var r in p(n,t)){var o=t[r],i="value"===r||"checked"===r?e[r]:n[r];o!==i&&d(e,r,o,i)}t.onupdate&&x.push(function(){t.onupdate(e,n)})}function v(e,n,t){function r(){e.removeChild(n)}t&&t.onremove?t.onremove(n,r):r()}function y(e){if(e&&e.props)return e.props.key}function g(e,n,t,r,o,i){if(t===r);else if(null==t)n=e.insertBefore(a(r,o),n);else if(null!=r.type&&r.type===t.type){h(n,t.props,r.props),o=o||"svg"===r.type;for(var u=r.children.length,f=t.children.length,p={},c=[],l={},s=0;s<f;s++){var d=c[s]=n.childNodes[s],m=t.children[s],w=y(m);null!=w&&(p[w]=[d,m])}for(var s=0,b=0;b<u;){var d=c[s],m=t.children[s],k=r.children[b],w=y(m);if(l[w])s++;else{var N=y(k),x=p[N]||[];null==N?(null==w&&(g(n,d,m,k,o),b++),s++):(w===N?(g(n,x[0],x[1],k,o),s++):x[0]?(n.insertBefore(x[0],d),g(n,x[0],x[1],k,o)):g(n,d,null,k,o),b++,l[N]=k)}}for(;s<f;){var m=t.children[s],w=y(m);null==w&&v(n,c[s],m.props),s++}for(var s in p){var x=p[s],A=x[1];l[A.props.key]||v(n,x[0],A.props)}}else n&&r!==n.nodeValue&&("string"==typeof r&&"string"==typeof t?n.nodeValue=r:(n=e.insertBefore(a(r,o),i=n),v(e,i,t.props)));return n}var m,w=(n=n||document.body).children[0],b=r(w,[].map),k={},N={},x=[];return o(u(k,N,e,[])),N}function t(e,n){for(var t,r=[],o=[],i=arguments.length;i-- >2;)r.push(arguments[i]);for(;r.length;)if(Array.isArray(t=r.pop()))for(i=t.length;i--;)r.push(t[i]);else null!=t&&!0!==t&&!1!==t&&o.push("number"==typeof t?t+="":t);return"string"==typeof e?{type:e,props:n||{},children:o}:e(n||{},o)}e.h=t,e.app=n});
 //# sourceMappingURL=hyperapp.js.map

hyperapp.d.ts

@@ -137,12 +137,60 @@ export as namespace Hyperapp
 
-/** The app() function signature.
+/** Definition for a single module: a self-contained set of actions that operates on a state tree.
  *
+ * OwnState and OwnActions may be set to ensure that the initial state and all actions are implemented.
+ *
+ * @param State The full state of the module including sub-modules
+ * @param Actions The actions of the module including sub-modules
+ * @param OwnState Optional, if set, the state of this module excluding sub-modules
+ *                 defaults to partial state
+ * @param OwnActions Optional, if set, the actions of this module excluding sub-modules
+ *                   defaults to partial actions
+ *
  * @memberOf [App]
  */
-export interface App<
+export interface Module<
   State extends Hyperapp.State & Record<keyof Actions, any>,
+  Actions extends Hyperapp.Actions<State>,
+  OwnState = Partial<State>,
+  OwnActions = Partial<Actions>
+> {
+  state?: OwnState
+  actions?: InternalActions<State, OwnActions & Hyperapp.Actions<State>>
+  modules?: Modules<
+    Partial<State> & Record<keyof Partial<Actions>, any>,
+    Partial<Actions> & Hyperapp.Actions<State>
+  >
+}
+
+/** The map of modules indexed by state slice.
+ *
+ * @memberOf [App]
+ */
+export type Modules<
+  State extends Hyperapp.State & Record<keyof Actions, any>,
   Actions extends Hyperapp.Actions<State>
-> {
-  state?: State
-  actions?: InternalActions<State, Actions>
+> = {
+  [A in keyof Actions]?: Module<
+    State[A],
+    Actions[A] & Hyperapp.Actions<State[A]>
+  >
+}
+
+/** The props object that serves as an input to app().
+ *
+ * @param State The full state of the module including sub-modules
+ * @param Actions The actions of the module including sub-modules
+ * @param OwnState Optional, if set, the state of this module excluding sub-modules
+ *                 defaults to partial state
+ * @param OwnActions Optional, if set, the actions of this module excluding sub-modules
+ *                   defaults to partial actions
+ *
+ * @memberOf [App]
+ */
+export interface AppProps<
+  State extends Hyperapp.State & Record<keyof Actions, any>,
+  Actions extends Hyperapp.Actions<State>,
+  OwnState = Partial<State>,
+  OwnActions = Partial<Actions>
+> extends Module<State, Actions, OwnState, OwnActions> {
   view?: View<State, Actions>
@@ -153,2 +201,9 @@ }
  *
+ * @param State The full state of the module including sub-modules
+ * @param Actions The actions of the module including sub-modules
+ * @param OwnState Optional, if set, the state of this module excluding sub-modules
+ *                 defaults to partial state
+ * @param OwnActions Optional, if set, the actions of this module excluding sub-modules
+ *                   defaults to partial actions
+ *
  * @memberOf [App]
@@ -158,4 +213,9 @@ */
   State extends Hyperapp.State & Record<keyof Actions, any>,
-  Actions extends Hyperapp.Actions<State>
->(app: App<State, Actions>, container?: HTMLElement | null): Actions
+  Actions extends Hyperapp.Actions<State>,
+  OwnState = Partial<State>,
+  OwnActions = Partial<Actions>
+>(
+  app: AppProps<State, Actions, OwnState, OwnActions>,
+  container?: HTMLElement | null
+): Actions
 
@@ -162,0 +222,0 @@ /** @namespace [JSX] */

package.json

 {
   "name": "hyperapp",
   "description": "1 KB JavaScript library for building frontend applications.",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "main": "dist/hyperapp.js",
@@ -21,10 +21,9 @@ "jsnext:main": "src/index.js",
     "jsx",
-    "hyperx",
     "vdom"
   ],
   "scripts": {
-    "test": "jest --coverage --no-cache && tsc --project test/ts",
+    "test": "jest --coverage --no-cache && tsc -p test/ts",
     "build": "npm run bundle && npm run minify",
     "bundle": "rollup -i src/index.js -o dist/hyperapp.js -m -f umd -n hyperapp",
-    "minify": "uglifyjs dist/hyperapp.js -o dist/hyperapp.js --mangle --compress warnings=false --pure-funcs=Object.defineProperty -p relative --source-map dist/hyperapp.js.map",
+    "minify": "uglifyjs dist/hyperapp.js -o dist/hyperapp.js --mangle --compress warnings=false --pure-funcs=Object.defineProperty -p relative --in-source-map dist/hyperapp.js.map --source-map dist/hyperapp.js.map",
     "prepare": "npm run build",
@@ -38,9 +37,9 @@ "format": "prettier --semi false --write 'src/**/*.js' '{,test/ts/}*.{ts,tsx}'",
   "devDependencies": {
-    "babel-preset-env": "1.6.0",
+    "babel-preset-env": "1.6.1",
     "jest": "^21.2.1",
     "prettier": "~1.7.4",
     "rollup": "^0.50.0",
-    "typescript": "^2.5.2",
+    "typescript": "~2.5.2",
     "uglify-js": "^2.7.5"
   }
 }

README.md

@@ -13,3 +13,3 @@ # [Hyperapp](https://codepen.io/hyperapp)
 
-[Read the Docs](/docs/README.md)
+[Read the Docs](/docs/README.md#documentation)
 
@@ -16,0 +16,0 @@ ## Hello World

src/index.js

@@ -1,2 +0,314 @@
-export { h } from "./h"
-export { app } from "./app"
+export { h, app }
+
+function app(props, container) {
+  var root = (container = container || document.body).children[0]
+  var node = vnode(root, [].map)
+  var appState = {}
+  var appActions = {}
+  var lifecycle = []
+  var patchLock
+
+  repaint(init(appState, appActions, props, []))
+
+  return appActions
+
+  function vnode(element, map) {
+    return (
+      element &&
+      h(
+        element.tagName.toLowerCase(),
+        {},
+        map.call(element.childNodes, function(element) {
+          return element.nodeType === 3
+            ? element.nodeValue
+            : vnode(element, map)
+        })
+      )
+    )
+  }
+
+  function repaint() {
+    if (props.view && !patchLock) {
+      setTimeout(render, (patchLock = !patchLock))
+    }
+  }
+
+  function render(next) {
+    patchLock = !patchLock
+    if ((next = props.view(appState, appActions)) && !patchLock) {
+      root = patch(container, root, node, (node = next))
+    }
+    while ((next = lifecycle.pop())) next()
+  }
+
+  function init(state, actions, from, path) {
+    var modules = from.modules
+
+    initDeep(state, actions, from.actions, path)
+    set(state, from.state)
+
+    for (var i in modules) {
+      init((state[i] = {}), (actions[i] = {}), modules[i], path.concat(i))
+    }
+  }
+
+  function initDeep(state, actions, from, path) {
+    Object.keys(from || {}).map(function(key) {
+      if (typeof from[key] === "function") {
+        actions[key] = function(data) {
+          var result = from[key]((state = get(path, appState)), actions)
+
+          if (typeof result === "function") {
+            result = result(data)
+          }
+
+          if (result && result !== state && !result.then) {
+            repaint((appState = setDeep(path, merge(state, result), appState)))
+          }
+
+          return result
+        }
+      } else {
+        initDeep(
+          state[key] || (state[key] = {}),
+          (actions[key] = {}),
+          from[key],
+          path.concat(key)
+        )
+      }
+    })
+  }
+
+  function merge(to, from) {
+    return set(set({}, to), from)
+  }
+
+  function set(to, from) {
+    for (var i in from) {
+      to[i] = from[i]
+    }
+    return to
+  }
+
+  function setDeep(path, value, from) {
+    var to = {}
+    return path.length === 0
+      ? value
+      : ((to[path[0]] =
+          1 < path.length
+            ? setDeep(path.slice(1), value, from[path[0]])
+            : value),
+        merge(from, to))
+  }
+
+  function get(path, from) {
+    for (var i = 0; i < path.length; i++) {
+      from = from[path[i]]
+    }
+    return from
+  }
+
+  function createElement(node, isSVG) {
+    if (typeof node === "string") {
+      var element = document.createTextNode(node)
+    } else {
+      var element = (isSVG = isSVG || node.type === "svg")
+        ? document.createElementNS("http://www.w3.org/2000/svg", node.type)
+        : document.createElement(node.type)
+
+      if (node.props.oncreate) {
+        lifecycle.push(function() {
+          node.props.oncreate(element)
+        })
+      }
+
+      for (var i = 0; i < node.children.length; i++) {
+        element.appendChild(createElement(node.children[i], isSVG))
+      }
+
+      for (var i in node.props) {
+        setElementProp(element, i, node.props[i])
+      }
+    }
+    return element
+  }
+
+  function setElementProp(element, name, value, oldValue) {
+    if (name === "key") {
+    } else if (name === "style") {
+      for (var name in merge(oldValue, (value = value || {}))) {
+        element.style[name] = value[name] || ""
+      }
+    } else {
+      try {
+        element[name] = null == value ? "" : value
+      } catch (_) {}
+
+      if (typeof value !== "function") {
+        if (null == value || false === value) {
+          element.removeAttribute(name)
+        } else {
+          element.setAttribute(name, value)
+        }
+      }
+    }
+  }
+
+  function updateElement(element, oldProps, props) {
+    for (var i in merge(oldProps, props)) {
+      var value = props[i]
+      var oldValue = i === "value" || i === "checked" ? element[i] : oldProps[i]
+
+      if (value !== oldValue) {
+        setElementProp(element, i, value, oldValue)
+      }
+    }
+
+    if (props.onupdate) {
+      lifecycle.push(function() {
+        props.onupdate(element, oldProps)
+      })
+    }
+  }
+
+  function removeElement(parent, element, props) {
+    if (props && props.onremove) {
+      props.onremove(element, done)
+    } else {
+      done()
+    }
+
+    function done() {
+      parent.removeChild(element)
+    }
+  }
+
+  function getKey(node) {
+    if (node && node.props) {
+      return node.props.key
+    }
+  }
+
+  function patch(parent, element, oldNode, node, isSVG, nextSibling) {
+    if (oldNode === node) {
+    } else if (oldNode == null) {
+      element = parent.insertBefore(createElement(node, isSVG), element)
+    } else if (node.type != null && node.type === oldNode.type) {
+      updateElement(element, oldNode.props, node.props)
+
+      isSVG = isSVG || node.type === "svg"
+
+      var len = node.children.length
+      var oldLen = oldNode.children.length
+      var oldKeyed = {}
+      var oldElements = []
+      var keyed = {}
+
+      for (var i = 0; i < oldLen; i++) {
+        var oldElement = (oldElements[i] = element.childNodes[i])
+        var oldChild = oldNode.children[i]
+        var oldKey = getKey(oldChild)
+
+        if (null != oldKey) {
+          oldKeyed[oldKey] = [oldElement, oldChild]
+        }
+      }
+
+      var i = 0
+      var j = 0
+
+      while (j < len) {
+        var oldElement = oldElements[i]
+        var oldChild = oldNode.children[i]
+        var newChild = node.children[j]
+
+        var oldKey = getKey(oldChild)
+        if (keyed[oldKey]) {
+          i++
+          continue
+        }
+
+        var newKey = getKey(newChild)
+        var keyedNode = oldKeyed[newKey] || []
+
+        if (null == newKey) {
+          if (null == oldKey) {
+            patch(element, oldElement, oldChild, newChild, isSVG)
+            j++
+          }
+          i++
+        } else {
+          if (oldKey === newKey) {
+            patch(element, keyedNode[0], keyedNode[1], newChild, isSVG)
+            i++
+          } else if (keyedNode[0]) {
+            element.insertBefore(keyedNode[0], oldElement)
+            patch(element, keyedNode[0], keyedNode[1], newChild, isSVG)
+          } else {
+            patch(element, oldElement, null, newChild, isSVG)
+          }
+
+          j++
+          keyed[newKey] = newChild
+        }
+      }
+
+      while (i < oldLen) {
+        var oldChild = oldNode.children[i]
+        var oldKey = getKey(oldChild)
+        if (null == oldKey) {
+          removeElement(element, oldElements[i], oldChild.props)
+        }
+        i++
+      }
+
+      for (var i in oldKeyed) {
+        var keyedNode = oldKeyed[i]
+        var reusableNode = keyedNode[1]
+        if (!keyed[reusableNode.props.key]) {
+          removeElement(element, keyedNode[0], reusableNode.props)
+        }
+      }
+    } else if (element && node !== element.nodeValue) {
+      if (typeof node === "string" && typeof oldNode === "string") {
+        element.nodeValue = node
+      } else {
+        element = parent.insertBefore(
+          createElement(node, isSVG),
+          (nextSibling = element)
+        )
+        removeElement(parent, nextSibling, oldNode.props)
+      }
+    }
+
+    return element
+  }
+}
+
+function h(type, props) {
+  var node
+  var stack = []
+  var children = []
+
+  for (var i = arguments.length; i-- > 2; ) {
+    stack.push(arguments[i])
+  }
+
+  while (stack.length) {
+    if (Array.isArray((node = stack.pop()))) {
+      for (i = node.length; i--; ) {
+        stack.push(node[i])
+      }
+    } else if (node != null && node !== true && node !== false) {
+      children.push(typeof node === "number" ? (node = node + "") : node)
+    }
+  }
+
+  return typeof type === "string"
+    ? {
+        type: type,
+        props: props || {},
+        children: children
+      }
+    : type(props || {}, children)
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36855

increased by42.48%

Lines of code

486

increased by15.17%

Worsened metrics

Number of package files

8

decreased by-20%

No dependency changes