New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
kapsule - npm Package Compare versions
Comparing version 1.13.6 to 1.13.7
@@ -1,2 +0,2 @@ | ||
| // Version 1.13.6 kapsule - https://github.com/vasturiano/kapsule | ||
| // Version 1.13.7 kapsule - https://github.com/vasturiano/kapsule | ||
| (function (global, factory) { | ||
@@ -3,0 +3,0 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : |
@@ -1,2 +0,2 @@ | ||
| // Version 1.13.6 kapsule - https://github.com/vasturiano/kapsule | ||
| // Version 1.13.7 kapsule - https://github.com/vasturiano/kapsule | ||
| !function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).Kapsule=t()}(this,(function(){"use strict";function n(n,t){for(var e=0;e<t.length;e++){var r=t[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(n,r.key,r)}}function t(t,e,r){return e&&n(t.prototype,e),r&&n(t,r),Object.defineProperty(t,"prototype",{writable:!1}),t}function e(n,t){return function(n){if(Array.isArray(n))return n}(n)||function(n,t){var e=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null==e)return;var r,o,i=[],a=!0,u=!1;try{for(e=e.call(n);!(a=(r=e.next()).done)&&(i.push(r.value),!t||i.length!==t);a=!0);}catch(n){u=!0,o=n}finally{try{a||null==e.return||e.return()}finally{if(u)throw o}}return i}(n,t)||function(n,t){if(!n)return;if("string"==typeof n)return r(n,t);var e=Object.prototype.toString.call(n).slice(8,-1);"Object"===e&&n.constructor&&(e=n.constructor.name);if("Map"===e||"Set"===e)return Array.from(n);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return r(n,t)}(n,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(n,t){(null==t||t>n.length)&&(t=n.length);for(var e=0,r=new Array(t);e<t;e++)r[e]=n[e];return r}function o(n,t,e){var r,o,i,a,u;function l(){var f=Date.now()-a;f<t&&f>=0?r=setTimeout(l,t-f):(r=null,e||(u=n.apply(i,o),i=o=null))}null==t&&(t=100);var f=function(){i=this,o=arguments,a=Date.now();var f=e&&!r;return r||(r=setTimeout(l,t)),f&&(u=n.apply(i,o),i=o=null),u};return f.clear=function(){r&&(clearTimeout(r),r=null)},f.flush=function(){r&&(u=n.apply(i,o),i=o=null,clearTimeout(r),r=null)},f}o.debounce=o;var i=o,a=t((function n(t,e){var r=e.default,o=void 0===r?null:r,i=e.triggerUpdate,a=void 0===i||i,u=e.onChange,l=void 0===u?function(n,t){}:u;!function(n,t){if(!(n instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.name=t,this.defaultVal=o,this.triggerUpdate=a,this.onChange=l}));return function(n){var t=n.stateInit,r=void 0===t?function(){return{}}:t,o=n.props,u=void 0===o?{}:o,l=n.methods,f=void 0===l?{}:l,c=n.aliases,s=void 0===c?{}:c,d=n.init,p=void 0===d?function(){}:d,v=n.update,y=void 0===v?function(){}:v,h=Object.keys(u).map((function(n){return new a(n,u[n])}));return function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=Object.assign({},r instanceof Function?r(n):r,{initialised:!1}),o={};function a(t){return u(t,n),l(),a}var u=function(n,e){p.call(a,n,t,e),t.initialised=!0},l=i((function(){t.initialised&&(y.call(a,t,o),o={})}),1);return h.forEach((function(n){a[n.name]=function(n){var e=n.name,r=n.triggerUpdate,i=void 0!==r&&r,u=n.onChange,f=void 0===u?function(n,t){}:u,c=n.defaultVal,s=void 0===c?null:c;return function(n){var r=t[e];if(!arguments.length)return r;var u=void 0===n?s:n;return t[e]=u,f.call(a,u,t,r),!o.hasOwnProperty(e)&&(o[e]=r),i&&l(),a}}(n)})),Object.keys(f).forEach((function(n){a[n]=function(){for(var e,r=arguments.length,o=new Array(r),i=0;i<r;i++)o[i]=arguments[i];return(e=f[n]).call.apply(e,[a,t].concat(o))}})),Object.entries(s).forEach((function(n){var t=e(n,2),r=t[0],o=t[1];return a[r]=a[o]})),a.resetProps=function(){return h.forEach((function(n){a[n.name](n.defaultVal)})),a},a.resetProps(),t._rerender=l,a}}})); |
| { | ||
| "name": "kapsule", | ||
| "version": "1.13.6", | ||
| "version": "1.13.7", | ||
| "description": "A closure based Web Component library", | ||
@@ -5,0 +5,0 @@ "unpkg": "dist/kapsule.min.js", |
154
README.md
@@ -6,3 +6,3 @@ Kapsule | ||
| [![Build Size][build-size-img]][build-size-url] | ||
| [![Dependencies][dependencies-img]][dependencies-url] | ||
| [![NPM Downloads][npm-downloads-img]][npm-downloads-url] | ||
@@ -15,11 +15,11 @@ A closure based Web Component library, inspired by the [reusable charts pattern](https://bost.ocks.org/mike/chart/) commonly found in [D3](https://d3js.org/) components. | ||
| ``` | ||
| ```js | ||
| import Kapsule from 'kapsule'; | ||
| ``` | ||
| or | ||
| ```js | ||
| const Kapsule = require('kapsule'); | ||
| ``` | ||
| var Kapsule = require('kapsule'); | ||
| ``` | ||
| or even | ||
| ``` | ||
| ```html | ||
| <script src="//unpkg.com/kapsule"></script> | ||
@@ -31,20 +31,20 @@ ``` | ||
| ### Define the component | ||
| ``` | ||
| ```js | ||
| const ColoredText = Kapsule({ | ||
| props: { | ||
| color: { default: 'red' }, | ||
| text: {} | ||
| }, | ||
| init(domElement, state) { | ||
| state.elem = document.createElement('span'); | ||
| domElement.appendChild(state.elem); | ||
| }, | ||
| update(state) { | ||
| state.elem.style.color = state.color; | ||
| state.elem.textContent = state.text; | ||
| } | ||
| props: { | ||
| color: { default: 'red' }, | ||
| text: {} | ||
| }, | ||
| init(domElement, state) { | ||
| state.elem = document.createElement('span'); | ||
| domElement.appendChild(state.elem); | ||
| }, | ||
| update(state) { | ||
| state.elem.style.color = state.color; | ||
| state.elem.textContent = state.text; | ||
| } | ||
| }); | ||
@@ -55,3 +55,3 @@ ``` | ||
| ``` | ||
| ```js | ||
| const myText = ColoredText(); | ||
@@ -62,6 +62,6 @@ ``` | ||
| ``` | ||
| ```js | ||
| myText(<myDOMElement>) | ||
| .color('blue') | ||
| .text('foo'); | ||
| .color('blue') | ||
| .text('foo'); | ||
| ``` | ||
@@ -81,9 +81,9 @@ | ||
| ``` | ||
| ```js | ||
| const Comp = Kapsule(compConfig); | ||
| const myInstance = Comp({ /* options */ }) | ||
| (<myDOMElement>) | ||
| .prop1('someVal') | ||
| .prop2('anotherVal'); | ||
| (<myDOMElement>) | ||
| .prop1('someVal') | ||
| .prop2('anotherVal'); | ||
| ``` | ||
@@ -97,24 +97,24 @@ | ||
| Extended example: | ||
| ``` | ||
| ```js | ||
| const Comp = Kapsule({ | ||
| props: { | ||
| propName: propConfig, | ||
| ... | ||
| }, | ||
| methods: { | ||
| methodName: function(state, ...args) { ... }, | ||
| ... | ||
| }, | ||
| stateInit() { | ||
| return { | ||
| stateItem: initVal, | ||
| ... | ||
| } | ||
| }, | ||
| init(domNode, state, componentOptions) { | ||
| ... | ||
| }, | ||
| update(state) { | ||
| ... | ||
| props: { | ||
| propName: propConfig, | ||
| ... | ||
| }, | ||
| methods: { | ||
| methodName: function(state, ...args) { ... }, | ||
| ... | ||
| }, | ||
| stateInit() { | ||
| return { | ||
| stateItem: initVal, | ||
| ... | ||
| } | ||
| }, | ||
| init(domNode, state, componentOptions) { | ||
| ... | ||
| }, | ||
| update(state) { | ||
| ... | ||
| } | ||
| }); | ||
@@ -132,11 +132,11 @@ ``` | ||
| Extended prop example: | ||
| ``` | ||
| ```js | ||
| { | ||
| props: { | ||
| propName: { | ||
| default: 6, | ||
| triggerUpdate: false, | ||
| onChange: function(newVal, state) { ... } | ||
| } | ||
| props: { | ||
| propName: { | ||
| default: 6, | ||
| triggerUpdate: false, | ||
| onChange: function(newVal, state) { ... } | ||
| } | ||
| } | ||
| } | ||
@@ -177,8 +177,8 @@ ``` | ||
| Example: | ||
| ``` | ||
| ```js | ||
| function stateInit() { | ||
| return { | ||
| stateItem: initVal, | ||
| ... | ||
| } | ||
| return { | ||
| stateItem: initVal, | ||
| ... | ||
| } | ||
| } | ||
@@ -194,10 +194,10 @@ ``` | ||
| Example: | ||
| ``` | ||
| ```js | ||
| function init(domNode, state, { label: '' }) { | ||
| state.elem = document.createElement('div'); // static scaffolding div | ||
| domElement.appendChild(state.elem); | ||
| const labelElem = document.createElement('span'); | ||
| labelElem.textContent = label; // static label from component options | ||
| state.elem.appendChild(labelElem); | ||
| state.elem = document.createElement('div'); // static scaffolding div | ||
| domElement.appendChild(state.elem); | ||
| const labelElem = document.createElement('span'); | ||
| labelElem.textContent = label; // static label from component options | ||
| state.elem.appendChild(labelElem); | ||
| } | ||
@@ -217,5 +217,5 @@ ``` | ||
| Example: | ||
| ``` | ||
| ```js | ||
| function update(state) { | ||
| state.elem.style.width = state.pxWidth + 'px'; | ||
| state.elem.style.width = state.pxWidth + 'px'; | ||
| } | ||
@@ -227,3 +227,3 @@ ``` | ||
| The props that were updated since the last update cycle (or all if it's the first update) are included in the second argument `changedProps`. This is an object that lists all the updated props and their previous value. For example: | ||
| ``` | ||
| ```js | ||
| { | ||
@@ -248,13 +248,13 @@ pxWidth: 10, // previous value of pxWidth | ||
| Example: | ||
| ``` | ||
| ```js | ||
| myInstance | ||
| .propA('someVal') | ||
| .resetProps(); // propA gets reset to its default value | ||
| .propA('someVal') | ||
| .resetProps(); // propA gets reset to its default value | ||
| ``` | ||
| [npm-img]: https://img.shields.io/npm/v/kapsule.svg | ||
| [npm-img]: https://img.shields.io/npm/v/kapsule | ||
| [npm-url]: https://npmjs.org/package/kapsule | ||
| [build-size-img]: https://img.shields.io/bundlephobia/minzip/kapsule.svg | ||
| [build-size-img]: https://img.shields.io/bundlephobia/minzip/kapsule | ||
| [build-size-url]: https://bundlephobia.com/result?p=kapsule | ||
| [dependencies-img]: https://img.shields.io/david/vasturiano/kapsule.svg | ||
| [dependencies-url]: https://david-dm.org/vasturiano/kapsule | ||
| [npm-downloads-img]: https://img.shields.io/npm/dt/kapsule | ||
| [npm-downloads-url]: https://www.npmtrends.com/kapsule |
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-0.35%
50035
No dependency changes