hyperapp - npm Package Compare versions
Comparing version 2.0.0-beta.18 to 2.0.0-beta.19
@@ -1,2 +0,2 @@ | ||
| var hyperapp=function(n){"use strict";var e={},r=[],t=r.map,o=Array.isArray,l=requestAnimationFrame||setTimeout,u=function(n){var e="";if("string"==typeof n)return n;if(o(n)&&n.length>0)for(var r,t=0;t<n.length;t++)""!==(r=u(n[t]))&&(e+=(e&&" ")+r);else for(var t in n)n[t]&&(e+=(e&&" ")+t);return e},i=function(n,e){var r={};for(var t in n)r[t]=n[t];for(var t in e)r[t]=e[t];return r},f=function(n){return n.reduce(function(n,e){return n.concat(!(!e||!0===e)&&("function"==typeof e[0]?[e]:f(e)))},r)},a=function(n,e){return o(n)&&o(e)&&n[0]===e[0]&&"function"==typeof n[0]},c=function(n,e){for(var r in i(n,e)){if(n[r]!==e[r]&&!a(n[r],e[r]))return!0;e[r]=n[r]}},s=function(n,e,r,t,o,l){if("key"===e);else if("style"===e)for(var f in i(r,t))r=null==t||null==t[f]?"":t[f],"-"===f[0]?n[e].setProperty(f,r):n[e][f]=r;else"o"===e[0]&&"n"===e[1]?((n.actions||(n.actions={}))[e=e.slice(2).toLowerCase()]=t)?r||n.addEventListener(e,o):n.removeEventListener(e,o):!l&&"list"!==e&&e in n?n[e]=null==t?"":t:null==t||!1===t||"class"===e&&!(t=u(t))?n.removeAttribute(e):n.setAttribute(e,t)},d=function(n,e,r){var t=3===n.type?document.createTextNode(n.name):(r=r||"svg"===n.name)?document.createElementNS("http://www.w3.org/2000/svg",n.name):document.createElement(n.name),o=n.props;for(var l in o)s(t,l,null,o[l],e,r);for(var u=0,i=n.children.length;u<i;u++)t.appendChild(d(n.children[u]=y(n.children[u]),e,r));return n.node=t},p=function(n){return null==n?null:n.key},v=function(n,e,r,t,o,l){if(r===t);else if(null!=r&&3===r.type&&3===t.type)r.name!==t.name&&(e.nodeValue=t.name);else if(null==r||r.name!==t.name)e=n.insertBefore(d(t=y(t),o,l),e),null!=r&&n.removeChild(r.node);else{var u,f,a,c,h=r.props,m=t.props,g=r.children,w=t.children,z=0,C=0,k=g.length-1,A=w.length-1;for(var L in l=l||"svg"===t.name,i(h,m))("value"===L||"selected"===L||"checked"===L?e[L]:h[L])!==m[L]&&s(e,L,h[L],m[L],o,l);for(;C<=A&&z<=k&&null!=(a=p(g[z]))&&a===p(w[C]);)v(e,g[z].node,g[z],w[C]=y(w[C++],g[z++]),o,l);for(;C<=A&&z<=k&&null!=(a=p(g[k]))&&a===p(w[A]);)v(e,g[k].node,g[k],w[A]=y(w[A--],g[k--]),o,l);if(z>k)for(;C<=A;)e.insertBefore(d(w[C]=y(w[C++]),o,l),(f=g[z])&&f.node);else if(C>A)for(;z<=k;)e.removeChild(g[z++].node);else{L=z;for(var N={},b={};L<=k;L++)null!=(a=g[L].key)&&(N[a]=g[L]);for(;C<=A;)a=p(f=g[z]),c=p(w[C]=y(w[C],f)),b[a]||null!=c&&c===p(g[z+1])?(null==a&&e.removeChild(f.node),z++):null==c||1===r.type?(null==a&&(v(e,f&&f.node,f,w[C],o,l),C++),z++):(a===c?(v(e,f.node,f,w[C],o,l),b[c]=!0,z++):null!=(u=N[c])?(v(e,e.insertBefore(u.node,f&&f.node),u,w[C],o,l),b[c]=!0):v(e,f&&f.node,null,w[C],o,l),C++);for(;z<=k;)null==p(f=g[z++])&&e.removeChild(f.node);for(var L in N)null==b[L]&&e.removeChild(N[L].node)}}return t.node=e},y=function(n,e){return 2===n.type?((!e||function(n,e){for(var r in n)if(n[r]!==e[r])return!0;for(var r in e)if(n[r]!==e[r])return!0}(e.lazy,n.lazy))&&((e=n.lazy.view(n.lazy)).lazy=n.lazy),e):n},h=function(n,e,r,t,o,l){return{name:n,props:e,children:r,node:t,type:l,key:o}},m=function(n,t){return h(n,e,r,t,null,3)},g=function(n){return 3===n.nodeType?m(n.nodeValue,n):h(n.nodeName.toLowerCase(),e,t.call(n.childNodes,g),n,null,1)};return n.Lazy=function(n){return{lazy:n,type:2}},n.h=function(n,r){for(var t,l=[],u=[],i=arguments.length;i-- >2;)l.push(arguments[i]);for(;l.length>0;)if(o(t=l.pop()))for(i=t.length;i-- >0;)l.push(t[i]);else!1===t||!0===t||null==t||u.push("object"==typeof t?t:m(t));return r=r||e,"function"==typeof n?n(r,u):h(n,r,u,null,r.key)},n.app=function(n,e){var r={},t=!1,u=n.view,i=n.node,a=i&&g(i),s=n.subscriptions,d=[],p=function(n){h(this.actions[n.type],n)},y=function(n){return r===n||t||l(w,t=!0),r=n},h=(e||function(n){return n})(function(n,e,t){return"function"==typeof n?h(n(r,e),t||e):o(n)?"function"==typeof n[0]?h(n[0],"function"==typeof(n=n[1])?n(e):n,e):(f(n.slice(1)).map(function(n){n&&n[0](h,n[1],e)},y(n[0])),r):y(n)}),w=function(){t=!1,s&&(d=function(n,e,r){for(var t,o,l=0,u=[];l<n.length||l<e.length;l++)t=n[l],o=e[l],u.push(o?!t||o[0]!==t[0]||c(o[1],t[1])?[o[0],o[1],o[0](r,o[1]),t&&t[2]()]:t:t&&t[2]());return u}(d,f(s(r)),h)),u&&(i=v(i.parentNode,i,a,"string"==typeof(a=u(r))?m(a):a,p))};h(n.init)},n}({}); | ||
| var hyperapp=function(n){"use strict";var e={},r=[],t=r.map,o=Array.isArray,l=requestAnimationFrame||setTimeout,u=function(n){var e="";if("string"==typeof n)return n;if(o(n)&&n.length>0)for(var r,t=0;t<n.length;t++)""!==(r=u(n[t]))&&(e+=(e&&" ")+r);else for(var t in n)n[t]&&(e+=(e&&" ")+t);return e},i=function(n,e){var r={};for(var t in n)r[t]=n[t];for(var t in e)r[t]=e[t];return r},f=function(n){return n.reduce(function(n,e){return n.concat(!(!e||!0===e)&&("function"==typeof e[0]?[e]:f(e)))},r)},a=function(n,e){return o(n)&&o(e)&&n[0]===e[0]&&"function"==typeof n[0]},c=function(n,e){for(var r in i(n,e)){if(n[r]!==e[r]&&!a(n[r],e[r]))return!0;e[r]=n[r]}},s=function(n,e,r,t,o,l){if("key"===e);else if("style"===e)for(var f in i(r,t))r=null==t||null==t[f]?"":t[f],"-"===f[0]?n[e].setProperty(f,r):n[e][f]=r;else"o"===e[0]&&"n"===e[1]?((n.actions||(n.actions={}))[e=e.slice(2).toLowerCase()]=t)?r||n.addEventListener(e,o):n.removeEventListener(e,o):!l&&"list"!==e&&e in n?n[e]=null==t?"":t:null==t||!1===t||"class"===e&&!(t=u(t))?n.removeAttribute(e):n.setAttribute(e,t)},d=function(n,e,r){var t=3===n.type?document.createTextNode(n.name):(r=r||"svg"===n.name)?document.createElementNS("http://www.w3.org/2000/svg",n.name):document.createElement(n.name),o=n.props;for(var l in o)s(t,l,null,o[l],e,r);for(var u=0,i=n.children.length;u<i;u++)t.appendChild(d(n.children[u]=y(n.children[u]),e,r));return n.node=t},p=function(n){return null==n?null:n.key},v=function(n,e,r,t,o,l){if(r===t);else if(null!=r&&3===r.type&&3===t.type)r.name!==t.name&&(e.nodeValue=t.name);else if(null==r||r.name!==t.name)e=n.insertBefore(d(t=y(t),o,l),e),null!=r&&n.removeChild(r.node);else{var u,f,a,c,h=r.props,m=t.props,g=r.children,w=t.children,z=0,C=0,k=g.length-1,A=w.length-1;for(var L in l=l||"svg"===t.name,i(h,m))("value"===L||"selected"===L||"checked"===L?e[L]:h[L])!==m[L]&&s(e,L,h[L],m[L],o,l);for(;C<=A&&z<=k&&null!=(a=p(g[z]))&&a===p(w[C]);)v(e,g[z].node,g[z],w[C]=y(w[C++],g[z++]),o,l);for(;C<=A&&z<=k&&null!=(a=p(g[k]))&&a===p(w[A]);)v(e,g[k].node,g[k],w[A]=y(w[A--],g[k--]),o,l);if(z>k)for(;C<=A;)e.insertBefore(d(w[C]=y(w[C++]),o,l),(f=g[z])&&f.node);else if(C>A)for(;z<=k;)e.removeChild(g[z++].node);else{L=z;for(var N={},b={};L<=k;L++)null!=(a=g[L].key)&&(N[a]=g[L]);for(;C<=A;)a=p(f=g[z]),c=p(w[C]=y(w[C],f)),b[a]||null!=c&&c===p(g[z+1])?(null==a&&e.removeChild(f.node),z++):null==c||1===r.type?(null==a&&(v(e,f&&f.node,f,w[C],o,l),C++),z++):(a===c?(v(e,f.node,f,w[C],o,l),b[c]=!0,z++):null!=(u=N[c])?(v(e,e.insertBefore(u.node,f&&f.node),u,w[C],o,l),b[c]=!0):v(e,f&&f.node,null,w[C],o,l),C++);for(;z<=k;)null==p(f=g[z++])&&e.removeChild(f.node);for(var L in N)null==b[L]&&e.removeChild(N[L].node)}}return t.node=e},y=function(n,e){return 2===n.type?((!e||function(n,e){for(var r in n)if(n[r]!==e[r])return!0;for(var r in e)if(n[r]!==e[r])return!0}(e.lazy,n.lazy))&&((e=n.lazy.view(n.lazy)).lazy=n.lazy),e):n},h=function(n,e,r,t,o,l){return{name:n,props:e,children:r,node:t,type:l,key:o}},m=function(n,t){return h(n,e,r,t,null,3)},g=function(n){return 3===n.nodeType?m(n.nodeValue,n):h(n.nodeName.toLowerCase(),e,t.call(n.childNodes,g),n,null,1)};return n.Lazy=function(n){return{lazy:n,type:2}},n.h=function(n,r){for(var t,l=[],u=[],i=arguments.length;i-- >2;)l.push(arguments[i]);for(;l.length>0;)if(o(t=l.pop()))for(i=t.length;i-- >0;)l.push(t[i]);else!1===t||!0===t||null==t||u.push("object"==typeof t?t:m(t));return r=r||e,"function"==typeof n?n(r,u):h(n,r,u,null,r.key)},n.app=function(n,e){var r={},t=!1,u=n.view,i=n.node,a=i&&g(i),s=n.subscriptions,d=[],p=function(n){h(this.actions[n.type],n)},y=function(n){return r!==n&&(s&&(d=function(n,e,r){for(var t,o,l=0,u=[];l<n.length||l<e.length;l++)t=n[l],o=e[l],u.push(o?!t||o[0]!==t[0]||c(o[1],t[1])?[o[0],o[1],o[0](r,o[1]),t&&t[2]()]:t:t&&t[2]());return u}(d,f([s(n)]),h)),t||l(w,t=!0)),r=n},h=(e||function(n){return n})(function(n,e,t){return"function"==typeof n?h(n(r,e),t||e):o(n)?"function"==typeof n[0]?h(n[0],"function"==typeof(n=n[1])?n(e):n,e):(f(n.slice(1)).map(function(n){n&&n[0](h,n[1],e)},y(n[0])),r):y(n)}),w=function(){t=!1,u&&(i=v(i.parentNode,i,a,"string"==typeof(a=u(r))?m(a):a,p))};h(n.init)},n}({}); | ||
| //# sourceMappingURL=hyperapp.js.map |
| { | ||
| "name": "hyperapp", | ||
| "description": "JavaScript micro-framework for building web interfaces.", | ||
| "version": "2.0.0-beta.18", | ||
| "version": "2.0.0-beta.19", | ||
| "main": "src/index.js", | ||
@@ -6,0 +6,0 @@ "module": "src/index.js", |
@@ -9,14 +9,12 @@ # Hyperapp | ||
| > 👋 Psst! The documentation is still a work-in-progress and may not be perfect. Please be patient as we work on it. If you think you've found a bug in Hyperapp, [create a new issue](https://github.com/jorgebucaran/hyperapp/issues/new) or [hop on Slack](https://hyperappjs.herokuapp.com) and let us know. | ||
| - **Do more with less**—We have aggressively minimized the concepts you need to learn to be productive in no time. Views, actions, effects and subscriptions are all pretty easy to get to grips with and work together seamlessly. | ||
| - **Write what, not how**—Immutable state, effects as data, and declarative subscriptions—we got it all. If you want to develop featureful, browser-based applications using a purely functional paradigm, Hyperapp is your choice. | ||
| - **Batteries-included**—Hyperapp includes state management and a modern Virtual DOM engine that supports keyed updates, components & view memoization out of the box—you'll never go back to DOM traversal and manipulation. | ||
| - **Minimal**—We have aggressively minimized the concepts you need to learn to be productive out of the box. Immutable state, unidirectional data-flow, effects as data and subscriptions—all combined into a single apparatus, and tiny foundation. | ||
| - **Declarative**—Write what, not how, and Hyperapp will figure out the best way to update the DOM as your data changes. Declarative user interfaces lead to highly testable and predictable applications—you'll never go back to DOM traversal and manipulation. | ||
| - **Standalone**—Do more with less. Hyperapp includes state management and a [state-of-the-art] Virtual DOM engine that supports keyed updates, functional components & view memoization—all without extra dependencies. | ||
| > [Check out the examples](#examples) and [follow Hyperapp](https://twitter.com/hyperappjs) on Twitter for news and updates. Love Hyperapp? Please [support me](https://patreon.com/jorgebucaran) on Patreon. Not comfortable with a recurring pledge? I accept one-time donations via [PayPal](https://www.paypal.me/jorgebucaran) too. Thank you. ❤️ | ||
| [Check out the examples](#examples) and [follow Hyperapp](https://twitter.com/hyperappjs) on Twitter for news and updates. Did you know that maintaining and developing this project is a full-time effort? If you love Hyperapp, please [support me](https://patreon.com/jorgebucaran) on Patreon. If you are not comfortable with a recurring pledge, I also accept one-time donations via [PayPal](https://www.paypal.me/jorgebucaran). Thank you! 🙌 | ||
| ## Table of Contents | ||
| - [Installation](#installation) | ||
| - [Getting started](#getting-started) | ||
| - [**Quickstart**](#quickstart) | ||
| - [Help, I'm stuck!](#help-im-stuck) | ||
@@ -71,22 +69,20 @@ - [Fundamentals](#fundamentals) | ||
| <script type="module"> | ||
| import { h, app } from "https://unpkg.com/hyperapp?module" | ||
| import { h, app } from "https://unpkg.com/hyperapp" | ||
| </script> | ||
| ``` | ||
| Want to get a sense of what Hyperapp is like without installing anything? Try it in [this code playground]. | ||
| Want to get a sense of what Hyperapp is like without installing anything? Try it in [this code playground](#). | ||
| ## Getting started | ||
| ## Quickstart | ||
| You want to develop feature-rich, scalable browser-based applications using a functional paradigm and thought you might give Hyperapp a go? Let's see what it can do. Along the way, we'll explain the most important principles and terminology so you'll be ready to tackle the rest of the documentation. Before we sign off, we'll even walk you through setting up a minimal build step and a local development server using a JavaScript module bundler. | ||
| In this section, we'll walk you through your first example: a counter that can go up or down. It won't be a real-world application, but you'll get a taste of how Hyperapp works. You'll learn how to initialize your application state, wire actions to DOM events, and render HTML on the page. Before we sign off, we'll even set up a build step and a local development server using a JavaScript module bundler. | ||
| Our first example is a counter that can be incremented or decremented. The goal of this tutorial is to give you a taste of how Hyperapp works, not build a real-world application. You'll learn how to initialize your application state, wire actions to user-triggered events, and render HTML on the page. | ||
| First, create a new `index.html` file and paste the following code in it. | ||
| Create a new `index.html` file and paste the following code in it. We'll break it down afterwards. | ||
| ```html | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <html lang="en"> | ||
| <head> | ||
| <script type="module"> | ||
| import { h, app } from "https://unpkg.com/hyperapp?module" | ||
| import { h, app } from "https://unpkg.com/hyperapp" | ||
@@ -98,4 +94,4 @@ app({ | ||
| h("h1", {}, state), | ||
| h("button", { onclick: state => state - 1 }, "-"), | ||
| h("button", { onclick: state => state + 1 }, "+") | ||
| h("button", { onClick: state => state - 1 }, "-"), | ||
| h("button", { onClick: state => state + 1 }, "+") | ||
| ]), | ||
@@ -112,3 +108,3 @@ node: document.getElementById("app") | ||
| Let's start from the bottom and work our way up the HTML tree. First, we create an empty `<div>` in the document body. We want to take over that node and replace it with our view. Maybe your program is within a broader application, in a sidebar widget and surrounded by other elements. That's fine too. Hyperapp gives you absolute control over where the root element of your application is rendered in the DOM. | ||
| We want to take over the empty `<div>` in the document body and replace it with our view. Maybe your program is within a broader application, in a sidebar widget and surrounded by other elements. That's fine too. Hyperapp gives you absolute control over where the root element of your application is rendered in the DOM. | ||
@@ -186,3 +182,3 @@ The application starts by dispatching the `init` action to initialize the state. Our code does not explicitly maintain any state. Instead, we define actions to transform it and a view to visualize it. The view returns a representation of the DOM known as a virtual DOM, and Hyperapp updates the actual DOM to match it. | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <html lang="en"> | ||
| <head> | ||
@@ -255,3 +251,3 @@ <meta charset="utf-8" /> | ||
| We all get stuck sometimes. If you've hit a stumbling block and need to get help, check out the community support resources. Hop on the [Hyperapp Slack Room](https://hyperappjs.herokuapp.com) to get help quickly, and if you don't receive an answer, or if you remain stuck, please file an issue, and we'll help you out. | ||
| We all get stuck sometimes. If you've hit a stumbling block hop on the [Hyperapp Slack Room](https://hyperappjs.herokuapp.com) to get help quickly, and if you don't receive an answer, or if you remain stuck, please file an issue, and we'll try to help you out. | ||
@@ -262,2 +258,4 @@ ## Fundamentals | ||
| <!-- Immutable state, unidirectional data-flow (state transitions via actions), effects as data and declarative event streams (subscriptions). --> | ||
| It may seem wasteful to throw away the old virtual DOM and recalculate it entirely on every update—not to mention the fact that at any one time, Hyperapp is keeping two virtual DOM trees in memory, but as it turns out, browsers can create hundreds of thousands of objects very quickly. On the other hand, modifying the DOM is orders of magnitude more expensive. | ||
@@ -622,5 +620,5 @@ | ||
| When writing actions, wouldn't it be better if we didn't have to think about events at all? Our current strategy may work if not involving a complex payload, but at what cost? Actions tightly coupled to events don't encourage code reusability; besides, destructuring the event object can become awkward. To tackle this problem, Hyperapp offers payload creators. | ||
| When implementing an action, wouldn't it be better if we didn't have to think about events at all? Our current strategy may be sufficient if not involving a complex payload, but at what cost? Actions tightly coupled to events don't encourage code reusability; besides, destructuring the event object can become awkward. To tackle this problem, Hyperapp has payload creators. | ||
| First, let's rewrite `NewValue` to receive the new text value as a payload instead of the event object. We'll figure out how to pass in the value in a moment. | ||
| First, let's rewrite `NewValue` to take in the new value as a payload. We'll figure out how to pass in the value in a moment. | ||
@@ -631,3 +629,3 @@ ```jsx | ||
| A payload creator is a function that receives an action's default payload and returns a new payload. It acts as a filter, transforming a payload before it reaches its destination. Here's how we can grab the event's target value. | ||
| A payload creator is a function that allows you to transform the default payload into anything you want. You can use it to filter the event object to extract the value before it reaches the action. Here's a payload creator that grabs the event's target value. | ||
@@ -638,3 +636,3 @@ ```jsx | ||
| We use it when dispatching the action in place of the custom payload. | ||
| And here's how we use it when dispatching an action. | ||
@@ -645,3 +643,3 @@ ```jsx | ||
| Similarly, we need to handle text input for every to-do item while it's in edit mode, as well as send a custom payload with the action to identify which to-do item the user is editing. Sounds like we can use a payload creator here as well. First, let's define an action for this. | ||
| Similarly, we need to handle text input for every to-do item while it's in edit mode, as well as send a custom payload with the action to identify which to-do item the user is editing. Sounds like a job for another payload creator. | ||
@@ -648,0 +646,0 @@ ```jsx |
@@ -433,6 +433,9 @@ var RECYCLED_NODE = 1 | ||
| var setState = function(newState) { | ||
| return ( | ||
| state === newState || lock || defer(render, (lock = true)), | ||
| (state = newState) | ||
| ) | ||
| if (state !== newState) { | ||
| if (subscriptions) { | ||
| subs = patchSubs(subs, batch([subscriptions(newState)]), dispatch) | ||
| } | ||
| if (!lock) defer(render, (lock = true)) | ||
| } | ||
| return (state = newState) | ||
| } | ||
@@ -462,5 +465,2 @@ | ||
| lock = false | ||
| if (subscriptions) { | ||
| subs = patchSubs(subs, batch(subscriptions(state)), dispatch) | ||
| } | ||
| if (view) { | ||
@@ -467,0 +467,0 @@ node = patch( |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.23%
441
Worsened metrics
- Total package byte prevSize
- decreased by-0.91%
90686
- Number of lines in readme file
- decreased by-0.17%
1170
No dependency changes