Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

hyperapp

Package Overview
Dependencies
Maintainers
1
Versions
129
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

hyperapp - npm Package Compare versions

Comparing version 0.10.1 to 0.11.0

4

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";e.h=function(e,n){for(var t,r=[],a=[],o=arguments.length;o-- >2;)r[r.length]=arguments[o];for(;r.length;)if(Array.isArray(t=r.pop()))for(o=t.length;o--;)r[r.length]=t[o];else null!=t&&!0!==t&&!1!==t&&("number"==typeof t&&(t+=""),a[a.length]=t);return"string"==typeof e?{tag:e,data:n||{},children:a}:e(n,a)},e.app=function(e){function n(){w||requestAnimationFrame(r,w=!w)}function t(e,n){return null==e?e:{tag:e.tagName,data:{},children:n.call(e.childNodes,function(e){t(e,n)})}}function r(){h=s(k,h,v,v=o("render",b)(p,g)),w=!w,x||o("loaded",x=!0)}function a(e,t,r){Object.keys(t||[]).map(function(l){var u=t[l],f=r?r+"."+l:l;"function"==typeof u?e[l]=function(e){var t=u(p,g,o("action",{name:f,data:e}).data);return null!=t&&null==t.then&&n(p=i(p,o("update",t))),t}:a(e[l]||(e[l]={}),u,f)})}function o(e,n){return(m[e]||[]).map(function(e){var t=e(p,g,n);null!=t&&(n=t)}),n}function i(e,n){if("object"!=typeof n)return n;var t={};for(var r in e)t[r]=e[r];for(var r in n)t[r]=n[r];return t}function l(e){if(e&&(e=e.data))return e.key}function u(e,n){if("string"==typeof e)t=document.createTextNode(e);else{for(var t=(n=n||"svg"===e.tag)?document.createElementNS("http://www.w3.org/2000/svg",e.tag):document.createElement(e.tag),r=0;r<e.children.length;)t.appendChild(u(e.children[r++],n));for(var r in e.data)"oncreate"===r?e.data[r](t):"oninsert"===r?setTimeout(e.data[r],0,t):f(t,r,e.data[r])}return t}function f(e,n,t,r){if("key"===n||"oncreate"===n||"oninsert"===n||"onupdate"===n||"onremove"===n)return n;if("style"===n)for(var a in i(r,t=t||{}))e.style[a]=t[a]||"";else{try{e[n]=t}catch(e){}"function"!=typeof t&&(t?e.setAttribute(n,t):e.removeAttribute(n))}}function c(e,n,t,r){for(var a in i(n,t)){var o=t[a],l=n[a];o!==l&&o!==e[a]&&null==f(e,a,o,l)&&(r=t.onupdate)}null!=r&&r(e)}function d(e,n,t){t&&t.onremove?t.onremove(n):e.removeChild(n)}function s(e,n,t,r,a,o){if(null==t)n=e.insertBefore(u(r,a),n);else if(null!=r.tag&&r.tag===t.tag){c(n,t.data,r.data),a=a||"svg"===r.tag;for(var i=r.children.length,f=t.children.length,v={},h=[],p={},g=0;g<f;g++)y=n.childNodes[g],h[g]=y,null!=(A=l(b=t.children[g]))&&(v[A]=[y,b]);for(var g=0,m=0;m<i;){var y=h[g],b=t.children[g],k=r.children[m];if(p[A=l(b)])g++;else{var w=l(k),x=v[w]||[];null==w?(null==A&&(s(n,y,b,k,a),m++),g++):(A===w?(s(n,x[0],x[1],k,a),g++):x[0]?(n.insertBefore(x[0],y),s(n,x[0],x[1],k,a)):s(n,y,null,k,a),m++,p[w]=k)}}for(;g<f;){var A=l(b=t.children[g]);null==A&&d(n,h[g],b.data),g++}for(var g in v){var N=(x=v[g])[1];p[N.data.key]||d(n,x[0],N.data)}}else null!=(o=n)&&r!==t&&r!==n.nodeValue&&e.replaceChild(n=u(r,a),o);return n}for(var v,h,p={},g={},m={},y=[],b=e.view,k=e.root||document.body,w=!1,x=!1,A=-1;A<y.length;A++){var N=y[A]?y[A](o):e;Object.keys(N.events||[]).map(function(e){m[e]=(m[e]||[]).concat(N.events[e])}),null!=N.state&&(p=i(p,N.state)),y=y.concat(N.mixins||[]),a(g,N.actions)}return v=t(h=k.querySelector("[data-ssr]"),[].map),n(o("init")),o}});
//# sourceMappingURL=hyperapp.js.map
!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,o=[];for(r=arguments.length;r-- >2;)a.push(arguments[r]);for(;a.length;)if(Array.isArray(t=a.pop()))for(r=t.length;r--;)a.push(t[r]);else null!=t&&!0!==t&&!1!==t&&("number"==typeof t&&(t+=""),o.push(t));return"string"==typeof e?{tag:e,data:n||{},children:o}:e(n,o)}function t(e){function n(e){for(x=v(w,x,h,h=i("render",k)(p,y),g=!g);e=o.pop();)e()}function t(){k&&!g&&requestAnimationFrame(n,g=!g)}function r(e){return e&&(e=i("update",u(p,e)))&&t(p=e),p}function a(e,n,t){Object.keys(n||[]).map(function(o){var u=n[o],f=t?t+"."+o:o;"function"==typeof u?e[o]=function(e){i("action",{name:f,data:e});var n=i("resolve",u(p,y,e));return"function"==typeof n?n(r):r(n)}:a(e[o]||(e[o]={}),u,f)})}function i(e,n){return(m[e]||[]).map(function(e){var t=e(p,y,n);null!=t&&(n=t)}),n}function u(e,n){var t={};for(var r in e)t[r]=e[r];for(var r in n)t[r]=n[r];return t}function f(e){if(e&&(e=e.data))return e.key}function c(e,n){if("string"==typeof e)var t=document.createTextNode(e);else{var t=(n=n||"svg"===e.tag)?document.createElementNS("http://www.w3.org/2000/svg",e.tag):document.createElement(e.tag);e.data&&e.data.oncreate&&o.push(function(){e.data.oncreate(t)});for(var r in e.data)l(t,r,e.data[r]);for(var r=0;r<e.children.length;)t.appendChild(c(e.children[r++],n))}return t}function l(e,n,t,r){if("key"===n);else if("style"===n)for(var a in u(r,t=t||{}))e.style[a]=t[a]||"";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 u(n,t)){var a=t[r],i="value"===r||"checked"===r?e[r]:n[r];a!==i&&l(e,r,a,i)}t&&t.onupdate&&o.push(function(){t.onupdate(e,n)})}function s(e,n,t){t&&t.onremove?t.onremove(n):e.removeChild(n)}function v(e,n,t,r,a,o){if(null==t)n=e.insertBefore(c(r,a),n);else if(null!=r.tag&&r.tag===t.tag){d(n,t.data,r.data),a=a||"svg"===r.tag;for(var i=r.children.length,u=t.children.length,l={},p=[],h={},g=0;g<u;g++){var y=p[g]=n.childNodes[g],m=t.children[g],b=f(m);null!=b&&(l[b]=[y,m])}for(var g=0,k=0;k<i;){var y=p[g],m=t.children[g],w=r.children[k],b=f(m);if(h[b])g++;else{var x=f(w),A=l[x]||[];null==x?(null==b&&(v(n,y,m,w,a),k++),g++):(b===x?(v(n,A[0],A[1],w,a),g++):A[0]?(n.insertBefore(A[0],y),v(n,A[0],A[1],w,a)):v(n,y,null,w,a),k++,h[x]=w)}}for(;g<u;){var m=t.children[g],b=f(m);null==b&&s(n,p[g],m.data),g++}for(var g in l){var A=l[g],j=A[1];h[j.data.key]||s(n,A[0],j.data)}}else n&&r!==n.nodeValue&&(n=e.insertBefore(c(r,a),o=n),s(e,o,t.data));return n}for(var p,h,g,y={},m={},b=[],k=e.view,w=e.root||document.body,x=w.children[0],A=-1;A<b.length;A++)e=b[A]?b[A](i):e,Object.keys(e.events||[]).map(function(n){m[n]=(m[n]||[]).concat(e.events[n])}),a(y,e.actions),b=b.concat(e.mixins||[]),p=u(p,e.state);return t((h=i("load",x))===x&&(h=x=null)),i}var r,a=[],o=[];e.h=n,e.app=t});
//# sourceMappingURL=hyperapp.js.map
{
"name": "hyperapp",
"description": "1 KB JavaScript library for building frontend applications.",
"version": "0.10.1",
"version": "0.11.0",
"main": "dist/hyperapp.js",

@@ -10,3 +10,6 @@ "jsnext:main": "src/index.js",

"repository": "hyperapp/hyperapp",
"files": ["src", "dist"],
"files": [
"src",
"dist"
],
"author": "Jorge Bucaran",

@@ -25,3 +28,5 @@ "keywords": [

"test": "bundlesize && jest --coverage --no-cache",
"build": "rollup -cm -n hyperapp -f umd -i src/index.js -o dist/hyperapp.js",
"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",
"prepublish": "npm run build",

@@ -40,3 +45,3 @@ "format": "prettier --semi false --write 'src/**/*.js'",

"rollup": "^0.45.2",
"rollup-plugin-uglify": "^2.0.1"
"uglify-js": "^2.7.5"
},

@@ -43,0 +48,0 @@ "bundlesize": [

@@ -1,2 +0,2 @@

# [hyperapp](https://hyperapp.glitch.me)
# [hyperapp](https://codepen.io/hyperapp)
[![Travis CI](https://img.shields.io/travis/hyperapp/hyperapp/master.svg)](https://travis-ci.org/hyperapp/hyperapp)

@@ -9,11 +9,6 @@ [![Codecov](https://img.shields.io/codecov/c/github/hyperapp/hyperapp/master.svg)](https://codecov.io/gh/hyperapp/hyperapp)

[Elm Architecture]: https://guide.elm-lang.org/architecture/
[Hyperx]: https://github.com/substack/hyperx
[JSX]: https://facebook.github.io/react/docs/introducing-jsx.html
[CDN]: https://unpkg.com/hyperapp
- **Minimal**: HyperApp was born out of the attempt to do [more with less](https://en.wikipedia.org/wiki/Worse_is_better). We have aggressively minimized the concepts you need to understand while remaining on par with what other frameworks can do.
- **Functional**: HyperApp's design is based on [The Elm Architecture](https://guide.elm-lang.org/architecture). Create scalable browser-based applications using a functional paradigm. The twist is you don't have to learn a new language.
- **Batteries-included**: Out of the box, HyperApp combines state management with a Virtual DOM engine that supports keyed updates & lifecycle events — all with no dependencies.
* **Declarative**: HyperApp's design is based on the [Elm Architecture]. Create scalable browser-based applications using a functional paradigm. The twist is you don't have to learn a new language.
* **Stateless components**: Build complex user interfaces using pure functions. Stateless components are framework agnostic, predictable and easy to debug.
* **Batteries-included**: Out of the box, HyperApp combines state management with a Virtual DOM engine that supports keyed updates & lifecycle events — all with no dependencies.
[Get started with HyperApp](/docs/getting-started.md)

@@ -23,16 +18,18 @@

[Try it online](https://codepen.io/hyperapp/pen/zNxZLP?editors=0010)
[Try it Online](https://codepen.io/hyperapp/pen/zNxZLP?editors=0010)
```jsx
app({
state: 0,
state: {
count: 0
},
view: (state, actions) =>
<main>
<h1>{state}</h1>
<button onclick={actions.add}>+</button>
<button onclick={actions.sub}>-</button>
<h1>{state.count}</h1>
<button onclick={actions.down}>ー</button>
<button onclick={actions.up}>+</button>
</main>,
actions: {
add: state => state + 1,
sub: state => state - 1
down: state => ({ count: state.count - 1 }),
up: state => ({ count: state.count + 1 })
}

@@ -42,15 +39,12 @@ })

## Contributing
No software is free of bugs. If you're not sure if something is a bug or not, [file an issue](https://github.com/hyperapp/hyperapp/issues) anyway. See [CONTRIBUTING](CONTRIBUTING.md) for more information about how to contribute to this project.
## Documentation
The documentation is located in the [/docs](/docs) directory.
The documentation is in the [docs](/docs) directory.
## Community
* [Slack](https://hyperappjs.herokuapp.com)
* [/r/hyperapp](https://www.reddit.com/r/hyperapp)
* [Twitter](https://twitter.com/hyperappjs)
- [Slack](https://hyperappjs.herokuapp.com)
- [/r/hyperapp](https://www.reddit.com/r/hyperapp)
- [CodePen](https://codepen.io/hyperapp)
- [Twitter](https://twitter.com/hyperappjs)

@@ -57,0 +51,0 @@ ## License

@@ -1,69 +0,58 @@

export function app(app) {
var state = {}
var actions = {}
var events = {}
var mixins = []
var view = app.view
var root = app.root || document.body
var node
var element
var locked = false
var loaded = false
var globalInvokeLaterStack = []
for (var i = -1; i < mixins.length; i++) {
var mixin = mixins[i] ? mixins[i](emit) : app
export function app(props) {
var appState
var appActions = {}
var appEvents = {}
var appMixins = []
var appView = props.view
var appRoot = props.root || document.body
var element = appRoot.children[0]
var oldNode
var willRender
Object.keys(mixin.events || []).map(function(key) {
events[key] = (events[key] || []).concat(mixin.events[key])
for (var i = -1; i < appMixins.length; i++) {
props = appMixins[i] ? appMixins[i](emit) : props
Object.keys(props.events || []).map(function(key) {
appEvents[key] = (appEvents[key] || []).concat(props.events[key])
})
if (mixin.state != null) {
state = merge(state, mixin.state)
}
adaptActions(appActions, props.actions)
mixins = mixins.concat(mixin.mixins || [])
initialize(actions, mixin.actions)
appMixins = appMixins.concat(props.mixins || [])
appState = merge(appState, props.state)
}
node = hydrate((element = root.querySelector("[data-ssr]")), [].map)
requestRender(
(oldNode = emit("load", element)) === element && (oldNode = element = null)
)
repaint(emit("init"))
return emit
function repaint() {
if (!locked) {
requestAnimationFrame(render, (locked = !locked))
}
}
function hydrate(element, map) {
return element == null
? element
: {
tag: element.tagName,
data: {},
children: map.call(element.childNodes, function(element) {
hydrate(element, map)
})
}
}
function render() {
function render(cb) {
element = patch(
root,
appRoot,
element,
node,
(node = emit("render", view)(state, actions))
oldNode,
(oldNode = emit("render", appView)(appState, appActions)),
(willRender = !willRender)
)
while ((cb = globalInvokeLaterStack.pop())) cb()
}
locked = !locked
function requestRender() {
if (appView && !willRender) {
requestAnimationFrame(render, (willRender = !willRender))
}
}
if (!loaded) {
emit("loaded", (loaded = true))
function update(withState) {
if (withState && (withState = emit("update", merge(appState, withState)))) {
requestRender((appState = withState))
}
return appState
}
function initialize(namespace, children, lastName) {
function adaptActions(namespace, children, lastName) {
Object.keys(children || []).map(function(key) {

@@ -75,19 +64,10 @@ var action = children[key]

namespace[key] = function(data) {
var result = action(
state,
actions,
emit("action", {
name: name,
data: data
}).data
)
emit("action", { name: name, data: data })
if (result != null && result.then == null) {
repaint((state = merge(state, emit("update", result))))
}
var result = emit("resolve", action(appState, appActions, data))
return result
return typeof result === "function" ? result(update) : update(result)
}
} else {
initialize(namespace[key] || (namespace[key] = {}), action, name)
adaptActions(namespace[key] || (namespace[key] = {}), action, name)
}

@@ -98,4 +78,4 @@ })

function emit(name, data) {
return (events[name] || []).map(function(cb) {
var result = cb(state, actions, data)
return (appEvents[name] || []).map(function(cb) {
var result = cb(appState, appActions, data)
if (result != null) {

@@ -108,6 +88,2 @@ data = result

function merge(a, b) {
if (typeof b !== "object") {
return b
}
var obj = {}

@@ -140,15 +116,15 @@

for (var i = 0; i < node.children.length; ) {
element.appendChild(createElement(node.children[i++], isSVG))
if (node.data && node.data.oncreate) {
globalInvokeLaterStack.push(function() {
node.data.oncreate(element)
})
}
for (var i in node.data) {
if (i === "oncreate") {
node.data[i](element)
} else if (i === "oninsert") {
setTimeout(node.data[i], 0, element)
} else {
setElementData(element, i, node.data[i])
}
setData(element, i, node.data[i])
}
for (var i = 0; i < node.children.length; ) {
element.appendChild(createElement(node.children[i++], isSVG))
}
}

@@ -159,11 +135,4 @@

function setElementData(element, name, value, oldValue) {
if (
name === "key" ||
name === "oncreate" ||
name === "oninsert" ||
name === "onupdate" ||
name === "onremove"
) {
return name
function setData(element, name, value, oldValue) {
if (name === "key") {
} else if (name === "style") {

@@ -188,18 +157,16 @@ for (var i in merge(oldValue, (value = value || {}))) {

function updateElementData(element, oldData, data, cb) {
for (var name in merge(oldData, data)) {
var value = data[name]
var oldValue = oldData[name]
function updateElement(element, oldData, data) {
for (var i in merge(oldData, data)) {
var value = data[i]
var oldValue = i === "value" || i === "checked" ? element[i] : oldData[i]
if (
value !== oldValue &&
value !== element[name] &&
setElementData(element, name, value, oldValue) == null
) {
cb = data.onupdate
if (value !== oldValue) {
setData(element, i, value, oldValue)
}
}
if (cb != null) {
cb(element)
if (data && data.onupdate) {
globalInvokeLaterStack.push(function() {
data.onupdate(element, oldData)
})
}

@@ -216,7 +183,7 @@ }

function patch(parent, element, oldNode, node, isSVG, lastElement) {
function patch(parent, element, oldNode, node, isSVG, nextSibling) {
if (oldNode == null) {
element = parent.insertBefore(createElement(node, isSVG), element)
} else if (node.tag != null && node.tag === oldNode.tag) {
updateElementData(element, oldNode.data, node.data)
updateElement(element, oldNode.data, node.data)

@@ -227,10 +194,8 @@ isSVG = isSVG || node.tag === "svg"

var oldLen = oldNode.children.length
var reusableChildren = {}
var oldKeyed = {}
var oldElements = []
var newKeys = {}
var keyed = {}
for (var i = 0; i < oldLen; i++) {
var oldElement = element.childNodes[i]
oldElements[i] = oldElement
var oldElement = (oldElements[i] = element.childNodes[i])
var oldChild = oldNode.children[i]

@@ -240,3 +205,3 @@ var oldKey = getKey(oldChild)

if (null != oldKey) {
reusableChildren[oldKey] = [oldElement, oldChild]
oldKeyed[oldKey] = [oldElement, oldChild]
}

@@ -254,3 +219,3 @@ }

var oldKey = getKey(oldChild)
if (newKeys[oldKey]) {
if (keyed[oldKey]) {
i++

@@ -262,3 +227,3 @@ continue

var reusableChild = reusableChildren[newKey] || []
var keyedNode = oldKeyed[newKey] || []

@@ -273,7 +238,7 @@ if (null == newKey) {

if (oldKey === newKey) {
patch(element, reusableChild[0], reusableChild[1], newChild, isSVG)
patch(element, keyedNode[0], keyedNode[1], newChild, isSVG)
i++
} else if (reusableChild[0]) {
element.insertBefore(reusableChild[0], oldElement)
patch(element, reusableChild[0], reusableChild[1], newChild, isSVG)
} else if (keyedNode[0]) {
element.insertBefore(keyedNode[0], oldElement)
patch(element, keyedNode[0], keyedNode[1], newChild, isSVG)
} else {

@@ -284,3 +249,3 @@ patch(element, oldElement, null, newChild, isSVG)

j++
newKeys[newKey] = newChild
keyed[newKey] = newChild
}

@@ -298,15 +263,15 @@ }

for (var i in reusableChildren) {
var reusableChild = reusableChildren[i]
var reusableNode = reusableChild[1]
if (!newKeys[reusableNode.data.key]) {
removeElement(element, reusableChild[0], reusableNode.data)
for (var i in oldKeyed) {
var keyedNode = oldKeyed[i]
var reusableNode = keyedNode[1]
if (!keyed[reusableNode.data.key]) {
removeElement(element, keyedNode[0], reusableNode.data)
}
}
} else if (
(lastElement = element) != null &&
node !== oldNode &&
node !== element.nodeValue
) {
parent.replaceChild((element = createElement(node, isSVG)), lastElement)
} else if (element && node !== element.nodeValue) {
element = parent.insertBefore(
createElement(node, isSVG),
(nextSibling = element)
)
removeElement(parent, nextSibling, oldNode.data)
}

@@ -313,0 +278,0 @@

@@ -0,8 +1,10 @@

var i
var stack = []
export function h(tag, data) {
var node
var stack = []
var children = []
for (var i = arguments.length; i-- > 2; ) {
stack[stack.length] = arguments[i]
for (i = arguments.length; i-- > 2; ) {
stack.push(arguments[i])
}

@@ -12,4 +14,4 @@

if (Array.isArray((node = stack.pop()))) {
for (var i = node.length; i--; ) {
stack[stack.length] = node[i]
for (i = node.length; i--; ) {
stack.push(node[i])
}

@@ -20,3 +22,3 @@ } else if (node != null && node !== true && node !== false) {

}
children[children.length] = node
children.push(node)
}

@@ -23,0 +25,0 @@ }

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc