Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@power-js/core
Advanced tools
@power-js/core - npm Package Compare versions
Comparing version 0.0.4 to 0.0.5
@@ -5,4 +5,5 @@ { | ||
| "singleQuote": true, | ||
| "jsxBracketSameLine": true, | ||
| "parser": "babylon", | ||
| "printWidth": 180 | ||
| } |
@@ -22,78 +22,2 @@ (function (global, factory) { | ||
| /** | ||
| * VNode Counter | ||
| * @type {Number} | ||
| */ | ||
| var counter = 0; | ||
| /** | ||
| * Creates a Virtual Node | ||
| * @public | ||
| * @param {String} tag | ||
| * @param {Object} props | ||
| * @param {Array} children | ||
| * @returns {Object} | ||
| */ | ||
| function VNode(tagName, props, children) { | ||
| this.tagName = tagName || 'div'; | ||
| this.children = children || []; | ||
| this.props = props || {}; // increment counter | ||
| counter += 1; // assign counter to props | ||
| this.props[POWER_NODE_ATTRIBUTE] = counter; | ||
| return this; | ||
| } | ||
| /** | ||
| * Array used to sanitize child nodes | ||
| * @type {Array} | ||
| */ | ||
| var stack = []; | ||
| /** | ||
| * Returns a new virtual node | ||
| * @param {String} tagName String containing the elements tag name (i.e. 'div', 'span') | ||
| * @param {Object} props Object containing any attributes defined on the element | ||
| * @param {Array} args Array of child nodes | ||
| * @return {Object} A new virtual node | ||
| */ | ||
| function h(tagName, props) { | ||
| var children = []; | ||
| for (var i = arguments.length; i-- > 2;) { | ||
| stack[stack.length] = arguments[i]; | ||
| } | ||
| while (stack.length) { | ||
| var child = stack.pop(); | ||
| if (child && child.pop) { | ||
| for (var _i = child.length; _i--;) { | ||
| stack[stack.length] = child[_i]; | ||
| } | ||
| } else { | ||
| if (typeof child === 'boolean') { | ||
| child = null; | ||
| } | ||
| if (typeof child === 'number') { | ||
| child = String(child); | ||
| } | ||
| if (typeof child !== 'function') { | ||
| if (child === null || child === undefined) { | ||
| child = ''; | ||
| } | ||
| } | ||
| children[children.length] = child; | ||
| } | ||
| } | ||
| return new VNode(tagName, props, children); | ||
| } | ||
| /** | ||
| * Determines whether the passed object is a valid element attribute | ||
@@ -208,2 +132,89 @@ * @private | ||
| /** | ||
| * VNode Counter | ||
| * @type {Number} | ||
| */ | ||
| var counter = 0; | ||
| /** | ||
| * Creates a Virtual Node | ||
| * @public | ||
| * @param {String} tag | ||
| * @param {Object} props | ||
| * @param {Array} children | ||
| * @returns {Object} | ||
| */ | ||
| function VNode(tagName, props, children) { | ||
| this.tagName = tagName || 'div'; | ||
| this.children = children || []; | ||
| this.props = props || {}; // handle functional components | ||
| if (isFunction(this.tagName)) { | ||
| var results = new this.tagName(this.props); | ||
| if (isArray(results)) { | ||
| this.children = this.children.concat(results); | ||
| } else { | ||
| this.children[this.children.length] = results; | ||
| } | ||
| } // increment counter | ||
| counter += 1; // assign counter to props | ||
| this.props[POWER_NODE_ATTRIBUTE] = counter; | ||
| return this; | ||
| } | ||
| /** | ||
| * Array used to sanitize child nodes | ||
| * @type {Array} | ||
| */ | ||
| var stack = []; | ||
| /** | ||
| * Returns a new virtual node | ||
| * @param {String} tagName String containing the elements tag name (i.e. 'div', 'span') | ||
| * @param {Object} props Object containing any attributes defined on the element | ||
| * @param {Array} args Array of child nodes | ||
| * @return {Object} A new virtual node | ||
| */ | ||
| function h(tagName, props) { | ||
| var children = []; | ||
| for (var i = arguments.length; i-- > 2;) { | ||
| stack[stack.length] = arguments[i]; | ||
| } | ||
| while (stack.length) { | ||
| var child = stack.pop(); | ||
| if (child && child.pop) { | ||
| for (var _i = child.length; _i--;) { | ||
| stack[stack.length] = child[_i]; | ||
| } | ||
| } else { | ||
| if (typeof child === 'boolean') { | ||
| child = null; | ||
| } | ||
| if (typeof child === 'number') { | ||
| child = String(child); | ||
| } | ||
| if (typeof child !== 'function') { | ||
| if (child === null || child === undefined) { | ||
| child = ''; | ||
| } | ||
| } | ||
| children[children.length] = child; | ||
| } | ||
| } | ||
| return new VNode(tagName, props, children); | ||
| } | ||
| /** | ||
| * Renders a component or vnodes in the given root | ||
@@ -553,42 +564,70 @@ * @public | ||
| var diffChildrenKeys = function diffChildrenKeys(first, second) { | ||
| var keys = []; | ||
| var diff = []; | ||
| for (var i = 0, k = first.length; i < k; i++) { | ||
| keys[first[i]] = true; | ||
| } | ||
| for (var _i = 0, _k = second.length; _i < _k; _i++) { | ||
| if (keys[second[_i]]) { | ||
| delete keys[second[_i]]; | ||
| } else { | ||
| keys[second[_i]] = true; | ||
| } | ||
| } | ||
| for (var key in keys) { | ||
| diff[diff.length] = key; | ||
| } | ||
| return diff; | ||
| }; | ||
| /** | ||
| * diffing keyed lists | ||
| * @param {Array} oldChilds | ||
| * @param {Array} newChilds | ||
| * @param {DOM Element} parent | ||
| * @param {Array} oldChildren | ||
| * @param {Array} newChildren | ||
| * @param {DOM Element} parentNode | ||
| */ | ||
| var keyChildrenDiff = function keyChildrenDiff(oldChilds, newChilds, parent) { | ||
| var keyChildrenDiff = function keyChildrenDiff(oldChildren, newChildren, parentNode) { | ||
| // get every old key | ||
| var oldKeys = oldChilds.map(function (child) { | ||
| var oldKeys = oldChildren.map(function (child) { | ||
| return child.props.key; | ||
| }); // get every new key | ||
| var newKeys = newChilds.map(function (child) { | ||
| var newKeys = newChildren.map(function (child) { | ||
| return child.props.key; | ||
| }); | ||
| }); // get the diff on keys | ||
| var diffedKeys = diffChildrenKeys(oldKeys, newKeys); | ||
| if (oldKeys.length > newKeys.length) { | ||
| var differenceKeys = oldKeys.filter(function (key) { | ||
| return newKeys.indexOf(key) < 0; | ||
| }); | ||
| differenceKeys.forEach(function (diff) { | ||
| var element = parent.querySelector("[key=\"".concat(diff, "\"]")); | ||
| for (var i = 0, k = diffedKeys.length; i < k; i++) { | ||
| var key = diffedKeys[i]; | ||
| if (parent) { | ||
| parent.removeChild(element); | ||
| for (var a = 0, b = parentNode.children.length; a < b; a++) { | ||
| var node = parentNode.children[a]; | ||
| if (node && node.attributes.key.value === key) { | ||
| parentNode.removeChild(node); | ||
| break; | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| } else if (oldKeys.length < newKeys.length) { | ||
| var _differenceKeys = newKeys.filter(function (key) { | ||
| return oldKeys.indexOf(key) < 0; | ||
| }); | ||
| for (var _i2 = 0, _k2 = diffedKeys.length; _i2 < _k2; _i2++) { | ||
| var _key = diffedKeys[_i2]; | ||
| _differenceKeys.forEach(function (key) { | ||
| newChilds.forEach(function (child) { | ||
| if (child.props.key === key) { | ||
| parent.appendChild(createElement(child)); | ||
| for (var _a = newChildren.length - 1; _a >= 0; _a--) { | ||
| var _node = newChildren[_a]; | ||
| if (String(_node.props.key) === _key) { | ||
| parentNode.appendChild(createElement(_node)); | ||
| break; | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
| } | ||
| } | ||
@@ -618,6 +657,4 @@ }; | ||
| var newChildren = newVNode.children; | ||
| var oldChildren = oldVNode.children; // compare props | ||
| var oldChildren = oldVNode.children; // compare children | ||
| propsDiff(oldVNode.props, newVNode.props, element); // compare children | ||
| if (isKeyedList(oldChildren, newChildren)) { | ||
@@ -627,3 +664,6 @@ keyChildrenDiff(oldChildren, newChildren, element); | ||
| childrenDiff(oldChildren, newChildren, element, Component); | ||
| } | ||
| } // compare props | ||
| propsDiff(oldVNode.props, newVNode.props, element); | ||
| }; | ||
@@ -722,6 +762,4 @@ | ||
| this.name = construct.name; // intial state | ||
| this.name = construct.name; // default props | ||
| this.state = isFunction(this.getInitialState) ? this.getInitialState() : isObject(construct.initialState) ? construct.initialState : {}; // default props | ||
| this.props = isFunction(this.getDefaultProps) ? this.getDefaultProps() : isObject(construct.defaultProps) ? construct.defaultProps : {}; // merge defaultProps with inline props | ||
@@ -731,5 +769,7 @@ | ||
| this.props = extend({}, this.props, props); | ||
| } // Getting called after constructor | ||
| } // intial state | ||
| this.state = isFunction(this.getInitialState) ? this.getInitialState() : isObject(construct.initialState) ? construct.initialState : {}; // Getting called after constructor | ||
| if (this.componentDidInitialize) { | ||
@@ -750,11 +790,11 @@ this.componentDidInitialize(this); | ||
| // creating the component root element | ||
| this.node = document.createElement(this.name); | ||
| this.node.setAttribute(POWER_COMPONENT_ATTRIBUTE, true); // get the vnode construct | ||
| this.node = document.createElement(this.name); // set power-component prop | ||
| this.componentVDom = this.render(); // convert props into proxy object | ||
| this.node.setAttribute(POWER_COMPONENT_ATTRIBUTE, true); // convert props into proxy object | ||
| this.props = proxy(this, this.props); // get the template by call the render | ||
| this.props = proxy(this, this.props); // get the vnode construct | ||
| this.template = createElement(this.componentVDom, this); | ||
| this.node.appendChild(this.template); | ||
| this.componentVDom = this.render(); // get the template by call the render | ||
| this.node.appendChild(createElement(this.componentVDom, this)); | ||
| return this.node; | ||
@@ -778,7 +818,10 @@ } | ||
| value: function setState(state, updateCallback) { | ||
| // prevent update when receiving same state | ||
| if (isEqual(state, this.state)) { | ||
| // keep a ref to prevState | ||
| var prevState = this.state; // prevent update when receiving same state | ||
| if (isEqual(state, prevState)) { | ||
| return; | ||
| } | ||
| var props = this.props; | ||
| var newState = state; // if newState is a function | ||
@@ -788,9 +831,9 @@ | ||
| // pass current currentState | ||
| newState = newState.call(this, this.state, this.props); | ||
| newState = newState.call(this, prevState, props); | ||
| } // merge the new state with the existing | ||
| newState = extend({}, this.state, newState); // if false, drop any state changes | ||
| newState = extend({}, prevState, newState); // if false, drop any state changes | ||
| if (!this.shouldComponentUpdate(this.props, newState)) { | ||
| if (!this.shouldComponentUpdate(props, newState)) { | ||
| return false; | ||
@@ -865,3 +908,4 @@ } // apply state changes | ||
| this.node.parentElement.removeChild(this.node); | ||
| this.node.parentNode.removeChild(this.node); | ||
| this.node = null; | ||
@@ -868,0 +912,0 @@ if (this.componentDidUnmount) { |
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.power={})}(this,function(t){"use strict";var v="power-id",o=0;function s(t,e,n){return this.tagName=t||"div",this.children=n||[],this.props=e||{},o+=1,this.props[v]=o,this}var a=[];var y=function(t,e){return JSON.stringify(t)===JSON.stringify(e)},l=function(t){return(t.startsWith("on")?t.toLowerCase():"on".concat(t))in window},g=function(t){return t&&t.constructor===s},r={},e={};["Array","Boolean","Date","Error","Function","Null","Number","Object","RegExp","String","Undefined"].forEach(function(t){var n=t.toLowerCase();r["[object ".concat(t,"]")]=n,e["is".concat(t)]=function(t){return(null===(e=t)?String(e):r[{}.toString.call(e)])===n;var e}});var p=e.isArray,i=e.isFunction,c=e.isObject,w=e.isString,n=function t(e,n){var o=n||document.body;if(i(e.tagName))return t(new e.tagName(e.props),o);if(!g(e)&&!e._power)return t(new e,o);e._power&&e.componentWillMount&&e.componentWillMount(e);var r=e.create();return r instanceof Element&&o.appendChild(r),e._power&&e.componentDidMount&&e.componentDidMount(e),e};function u(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}var h=function(t){for(var e=[].slice.call(arguments,1),n=0,o=e.length;n<o;n++){var r=e[n];for(var i in r)t[i]=r[i]}return t},d=function(t){return this.$events[t.type](t)},f=function(t,e,n){if(!y(e,n)&&(w(e)&&(t.style.cssText=e),c(e))){if(c(n))for(var o in n)o in e||(t.style[o]="");for(var r in e)t.style[r]=e[r]}},m={htmlFor:"for",className:"class"},C=function(t,e,n){if(n)for(var o in n)e[o]||(l(o)&&t.$events[o]?t.removeEventListener(o,t.$events[o]):t.removeAttribute(m[o]||o));for(var r in e)"style"!==r||y(t.style,e.style)?l(r)?(s=t,p=e[a=r],void 0,c=a.startsWith("on")?a.substring(2,a.length).toLowerCase():a,s.addEventListener(c,d),s.$events||(s.$events={}),s.$events[c]=p):((i=r)in t||"class"===i||i.startsWith("data-")||i.startsWith("power-")||"key"===r)&&(t[r]&&e[r]===t[r]||t.setAttribute(m[r]||r,e[r])):f(t,e[r]);var i,s,a,p,c},b=function(t){var e=document.createElement(t.tagName.name||t.tagName),n=document.createDocumentFragment();return t.children&&t.children.length&&function t(e,n){for(var o=0,r=n.length;o<r;o++){var i=n[o];g(i)?(a=i,e.appendChild(b(a))):p(i)?t(e,i):(s=i,e.appendChild(document.createTextNode(s)))}var s,a}(n,t.children),e.appendChild(n),t.props&&Object.keys(t.props).length&&C(e,t.props),e},k=function(t,e,n){var o=t.props[v];null===e.props&&(e.props={}),e.props[v]=o;var r,i,s,a,p,c,l,u,h,d=n.node.querySelector("[".concat(v,'="').concat(o,'"]')),f=e.children,m=t.children;r=t.props,i=e.props,s=d,y(r,i)||C(s,i,r),u=m,(h=f).length&&h[0].props&&h[0].props.key||u.length&&u[0].props&&u[0].props.key?(a=f,p=d,c=m.map(function(t){return t.props.key}),l=a.map(function(t){return t.props.key}),c.length>l.length?c.filter(function(t){return l.indexOf(t)<0}).forEach(function(t){var e=p.querySelector('[key="'.concat(t,'"]'));p&&p.removeChild(e)}):c.length<l.length&&l.filter(function(t){return c.indexOf(t)<0}).forEach(function(e){a.forEach(function(t){t.props.key===e&&p.appendChild(b(t))})})):function t(e,n,o,r){for(var i=0,s=n.length;i<s;i++){var a=n[i];if(void 0===e[i]&&g(a)){a.props||(a.props={});var p=b(a,r);o.appendChild(p)}else if(w(a)&&a!==e[i]){var c=document.createTextNode(a);o.replaceChild(c,o.childNodes[i])}else g(a)?k(e[i],a,r):a.pop&&e[i]&&e[i].pop&&t(e[i],a,o,r)}for(var l,u=e.length-n.length,h=e.length-1;0<u;)(l=r.node.querySelector("[".concat(v,'="').concat(e[h].props[v],'"]')))&&l.parentNode&&l.parentNode.removeChild(l),h-=1,u-=1}(m,f,d,n)},D=["push","pop","shift","unshift","splice"],N=function(){function n(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,n);var e=this.constructor;this.componentWillInitialize&&this.componentWillInitialize(this),this._power=!0,this.name=e.name,this.state=i(this.getInitialState)?this.getInitialState():c(e.initialState)?e.initialState:{},this.props=i(this.getDefaultProps)?this.getDefaultProps():c(e.defaultProps)?e.defaultProps:{},t&&(this.props=h({},this.props,t)),this.componentDidInitialize&&this.componentDidInitialize(this)}var t,e,o;return t=n,(e=[{key:"create",value:function(){var r,t;return this.node=document.createElement(this.name),this.node.setAttribute("power-component",!0),this.componentVDom=this.render(),this.props=(t=(r=this).props,new Proxy(t,{get:function(t,e){var n=t[e],o={get:function(e,n){var t=e[n];return i(t)&&p(e)?function(){var t=Array.prototype[n].apply(e,arguments);return D.includes(n)&&r.shouldComponentUpdate(r.props,r.state)&&r.update(),t}:t}};return p(n)?new Proxy(n,o):n},set:function(t,e,n){var o=t[e];return r.shouldComponentUpdate(t,r.state)&&o!==n&&(t[e]=n,r.update()),!0}})),this.template=b(this.componentVDom,this),this.node.appendChild(this.template),this.node}},{key:"shouldComponentUpdate",value:function(){return!0}},{key:"setState",value:function(t,e){if(!y(t,this.state)){var n=t;if(i(n)&&(n=n.call(this,this.state,this.props)),n=h({},this.state,n),!this.shouldComponentUpdate(this.props,n))return!1;this.state=n,this.update(),i(e)&&e.call(this)}}},{key:"forceUpdate",value:function(t){this.update(),i(t)&&t.call(this)}},{key:"update",value:function(){this.componentWillUpdate&&this.componentWillUpdate(this);var t=this.render();this.patch(this.componentVDom,t),this.componentVDom=t,this.componentDidUpdate&&this.componentDidUpdate(this)}},{key:"patch",value:function(t,e){k(t,e,this)}},{key:"destroy",value:function(){this.componentWillUnmount&&this.componentWillUnmount(this),this.node.parentElement.removeChild(this.node),this.componentDidUnmount&&this.componentDidUnmount(this)}}])&&u(t.prototype,e),o&&u(t,o),n}(),S="1.0.0-beta",U={h:function(t,e){for(var n=[],o=arguments.length;2<o--;)a[a.length]=arguments[o];for(;a.length;){var r=a.pop();if(r&&r.pop)for(var i=r.length;i--;)a[a.length]=r[i];else"boolean"==typeof r&&(r=null),"number"==typeof r&&(r=String(r)),"function"!=typeof r&&null==r&&(r=""),n[n.length]=r}return new s(t,e,n)},render:n,Component:N,version:S};t.default=U,t.render=n,t.Component=N,t.version=S,Object.defineProperty(t,"__esModule",{value:!0})}); | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.power={})}(this,function(t){"use strict";var d="power-id",u=function(t,e){return JSON.stringify(t)===JSON.stringify(e)},h=function(t){return(t.startsWith("on")?t.toLowerCase():"on".concat(t))in window},f=function(t){return t&&t.constructor===s},o={},e={};["Array","Boolean","Date","Error","Function","Null","Number","Object","RegExp","String","Undefined"].forEach(function(t){var n=t.toLowerCase();o["[object ".concat(t,"]")]=n,e["is".concat(t)]=function(t){return(null===(e=t)?String(e):o[{}.toString.call(e)])===n;var e}});var p=e.isArray,i=e.isFunction,a=e.isObject,v=e.isString,r=0;function s(t,e,n){if(this.tagName=t||"div",this.children=n||[],this.props=e||{},i(this.tagName)){var o=new this.tagName(this.props);p(o)?this.children=this.children.concat(o):this.children[this.children.length]=o}return r+=1,this.props[d]=r,this}var l=[];var n=function t(e,n){var o=n||document.body;if(i(e.tagName))return t(new e.tagName(e.props),o);if(!f(e)&&!e._power)return t(new e,o);e._power&&e.componentWillMount&&e.componentWillMount(e);var r=e.create();return r instanceof Element&&o.appendChild(r),e._power&&e.componentDidMount&&e.componentDidMount(e),e};function c(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}var m=function(t){for(var e=[].slice.call(arguments,1),n=0,o=e.length;n<o;n++){var r=e[n];for(var i in r)t[i]=r[i]}return t},g=function(t){return this.$events[t.type](t)},y=function(t,e,n){if(!u(e,n)&&(v(e)&&(t.style.cssText=e),a(e))){if(a(n))for(var o in n)o in e||(t.style[o]="");for(var r in e)t.style[r]=e[r]}},b={htmlFor:"for",className:"class"},w=function(t,e,n){if(n)for(var o in n)e[o]||(h(o)&&t.$events[o]?t.removeEventListener(o,t.$events[o]):t.removeAttribute(b[o]||o));for(var r in e)"style"!==r||u(t.style,e.style)?h(r)?(a=t,p=e[s=r],void 0,l=s.startsWith("on")?s.substring(2,s.length).toLowerCase():s,a.addEventListener(l,g),a.$events||(a.$events={}),a.$events[l]=p):((i=r)in t||"class"===i||i.startsWith("data-")||i.startsWith("power-")||"key"===r)&&(t[r]&&e[r]===t[r]||t.setAttribute(b[r]||r,e[r])):y(t,e[r]);var i,a,s,p,l},C=function(t){var e=document.createElement(t.tagName.name||t.tagName),n=document.createDocumentFragment();return t.children&&t.children.length&&function t(e,n){for(var o=0,r=n.length;o<r;o++){var i=n[o];f(i)?(s=i,e.appendChild(C(s))):p(i)?t(e,i):(a=i,e.appendChild(document.createTextNode(a)))}var a,s}(n,t.children),e.appendChild(n),t.props&&Object.keys(t.props).length&&w(e,t.props),e},k=function(t,e,n){var o=t.props[d];null===e.props&&(e.props={}),e.props[d]=o;var r,i,a,s,p,l=n.node.querySelector("[".concat(d,'="').concat(o,'"]')),h=e.children,c=t.children;r=c,(i=h).length&&i[0].props&&i[0].props.key||r.length&&r[0].props&&r[0].props.key?function(t,e,n){var o=t.map(function(t){return t.props.key}),r=e.map(function(t){return t.props.key}),i=function(t,e){for(var n=[],o=[],r=0,i=t.length;r<i;r++)n[t[r]]=!0;for(var a=0,s=e.length;a<s;a++)n[e[a]]?delete n[e[a]]:n[e[a]]=!0;for(var p in n)o[o.length]=p;return o}(o,r);if(o.length>r.length)for(var a=0,s=i.length;a<s;a++)for(var p=i[a],l=0,h=n.children.length;l<h;l++){var c=n.children[l];if(c&&c.attributes.key.value===p){n.removeChild(c);break}}else if(o.length<r.length)for(var u=0,d=i.length;u<d;u++)for(var f=i[u],v=e.length-1;0<=v;v--){var m=e[v];if(String(m.props.key)===f){n.appendChild(C(m));break}}}(c,h,l):function t(e,n,o,r){for(var i=0,a=n.length;i<a;i++){var s=n[i];if(void 0===e[i]&&f(s)){s.props||(s.props={});var p=C(s,r);o.appendChild(p)}else if(v(s)&&s!==e[i]){var l=document.createTextNode(s);o.replaceChild(l,o.childNodes[i])}else f(s)?k(e[i],s,r):s.pop&&e[i]&&e[i].pop&&t(e[i],s,o,r)}for(var h,c=e.length-n.length,u=e.length-1;0<c;)(h=r.node.querySelector("[".concat(d,'="').concat(e[u].props[d],'"]')))&&h.parentNode&&h.parentNode.removeChild(h),u-=1,c-=1}(c,h,l,n),a=t.props,s=e.props,p=l,u(a,s)||w(p,s,a)},N=["push","pop","shift","unshift","splice"],D=function(){function n(t){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,n);var e=this.constructor;this.componentWillInitialize&&this.componentWillInitialize(this),this._power=!0,this.name=e.name,this.props=i(this.getDefaultProps)?this.getDefaultProps():a(e.defaultProps)?e.defaultProps:{},t&&(this.props=m({},this.props,t)),this.state=i(this.getInitialState)?this.getInitialState():a(e.initialState)?e.initialState:{},this.componentDidInitialize&&this.componentDidInitialize(this)}var t,e,o;return t=n,(e=[{key:"create",value:function(){var r,t;return this.node=document.createElement(this.name),this.node.setAttribute("power-component",!0),this.props=(t=(r=this).props,new Proxy(t,{get:function(t,e){var n=t[e],o={get:function(e,n){var t=e[n];return i(t)&&p(e)?function(){var t=Array.prototype[n].apply(e,arguments);return N.includes(n)&&r.shouldComponentUpdate(r.props,r.state)&&r.update(),t}:t}};return p(n)?new Proxy(n,o):n},set:function(t,e,n){var o=t[e];return r.shouldComponentUpdate(t,r.state)&&o!==n&&(t[e]=n,r.update()),!0}})),this.componentVDom=this.render(),this.node.appendChild(C(this.componentVDom,this)),this.node}},{key:"shouldComponentUpdate",value:function(){return!0}},{key:"setState",value:function(t,e){var n=this.state;if(!u(t,n)){var o=this.props,r=t;if(i(r)&&(r=r.call(this,n,o)),r=m({},n,r),!this.shouldComponentUpdate(o,r))return!1;this.state=r,this.update(),i(e)&&e.call(this)}}},{key:"forceUpdate",value:function(t){this.update(),i(t)&&t.call(this)}},{key:"update",value:function(){this.componentWillUpdate&&this.componentWillUpdate(this);var t=this.render();this.patch(this.componentVDom,t),this.componentVDom=t,this.componentDidUpdate&&this.componentDidUpdate(this)}},{key:"patch",value:function(t,e){k(t,e,this)}},{key:"destroy",value:function(){this.componentWillUnmount&&this.componentWillUnmount(this),this.node.parentNode.removeChild(this.node),this.node=null,this.componentDidUnmount&&this.componentDidUnmount(this)}}])&&c(t.prototype,e),o&&c(t,o),n}(),S="1.0.0-beta",U={h:function(t,e){for(var n=[],o=arguments.length;2<o--;)l[l.length]=arguments[o];for(;l.length;){var r=l.pop();if(r&&r.pop)for(var i=r.length;i--;)l[l.length]=r[i];else"boolean"==typeof r&&(r=null),"number"==typeof r&&(r=String(r)),"function"!=typeof r&&null==r&&(r=""),n[n.length]=r}return new s(t,e,n)},render:n,Component:D,version:S};t.default=U,t.render=n,t.Component=D,t.version=S,Object.defineProperty(t,"__esModule",{value:!0})}); |
| { | ||
| "name": "@power-js/core", | ||
| "version": "0.0.4", | ||
| "version": "0.0.5", | ||
| "description": "A powerful JavaScript library for building web components.", | ||
@@ -5,0 +5,0 @@ "main": "dist/power.js", |
@@ -43,2 +43,3 @@ <p align="center" ><a href="https://github.com/power-js/power-js"><img alt="PowerJS" src="https://user-images.githubusercontent.com/1918732/47975313-295a4a00-e062-11e8-8ae7-2e6124405f9c.png" width="500" height="auto"/></a></p> | ||
| - <a href="https://github.com/power-js/todo-app">A simple Todo app</a> | ||
| - <a href="https://power-js.github.io/todo-app">Live Demo</a> | ||
@@ -45,0 +46,0 @@ ## Before you start |
@@ -33,5 +33,2 @@ import { extend } from '../utils/objects/extend'; | ||
| // intial state | ||
| this.state = isFunction(this.getInitialState) ? this.getInitialState() : isObject(construct.initialState) ? construct.initialState : {}; | ||
| // default props | ||
@@ -45,2 +42,5 @@ this.props = isFunction(this.getDefaultProps) ? this.getDefaultProps() : isObject(construct.defaultProps) ? construct.defaultProps : {}; | ||
| // intial state | ||
| this.state = isFunction(this.getInitialState) ? this.getInitialState() : isObject(construct.initialState) ? construct.initialState : {}; | ||
| // Getting called after constructor | ||
@@ -61,15 +61,14 @@ if (this.componentDidInitialize) { | ||
| // set power-component prop | ||
| this.node.setAttribute(POWER_COMPONENT_ATTRIBUTE, true); | ||
| // convert props into proxy object | ||
| this.props = proxy(this, this.props); | ||
| // get the vnode construct | ||
| this.componentVDom = this.render(); | ||
| // convert props into proxy object | ||
| this.props = proxy(this, this.props); | ||
| // get the template by call the render | ||
| this.template = createElement(this.componentVDom, this); | ||
| this.node.appendChild(createElement(this.componentVDom, this)); | ||
| this.node.appendChild(this.template); | ||
| return this.node; | ||
@@ -90,7 +89,12 @@ } | ||
| setState(state, updateCallback) { | ||
| // keep a ref to prevState | ||
| const prevState = this.state; | ||
| // prevent update when receiving same state | ||
| if (isEqual(state, this.state)) { | ||
| if (isEqual(state, prevState)) { | ||
| return; | ||
| } | ||
| const props = this.props; | ||
| let newState = state; | ||
@@ -100,10 +104,10 @@ // if newState is a function | ||
| // pass current currentState | ||
| newState = newState.call(this, this.state, this.props); | ||
| newState = newState.call(this, prevState, props); | ||
| } | ||
| // merge the new state with the existing | ||
| newState = extend({}, this.state, newState); | ||
| newState = extend({}, prevState, newState); | ||
| // if false, drop any state changes | ||
| if (!this.shouldComponentUpdate(this.props, newState)) { | ||
| if (!this.shouldComponentUpdate(props, newState)) { | ||
| return false; | ||
@@ -173,4 +177,6 @@ } | ||
| this.node.parentElement.removeChild(this.node); | ||
| this.node.parentNode.removeChild(this.node); | ||
| this.node = null; | ||
| if (this.componentDidUnmount) { | ||
@@ -177,0 +183,0 @@ this.componentDidUnmount(this); |
@@ -30,4 +30,2 @@ import { propsDiff } from './propsDiff'; | ||
| const oldChildren = oldVNode.children; | ||
| // compare props | ||
| propsDiff(oldVNode.props, newVNode.props, element); | ||
@@ -40,2 +38,5 @@ // compare children | ||
| } | ||
| // compare props | ||
| propsDiff(oldVNode.props, newVNode.props, element); | ||
| }; |
| import { createElement } from '../dom/createElement'; | ||
| const diffChildrenKeys = function(first, second) { | ||
| const keys = []; | ||
| const diff = []; | ||
| for (let i = 0, k = first.length; i < k; i++) { | ||
| keys[first[i]] = true; | ||
| } | ||
| for (let i = 0, k = second.length; i < k; i++) { | ||
| if (keys[second[i]]) { | ||
| delete keys[second[i]]; | ||
| } else { | ||
| keys[second[i]] = true; | ||
| } | ||
| } | ||
| for (const key in keys) { | ||
| diff[diff.length] = key; | ||
| } | ||
| return diff; | ||
| } | ||
| /** | ||
| * diffing keyed lists | ||
| * @param {Array} oldChilds | ||
| * @param {Array} newChilds | ||
| * @param {DOM Element} parent | ||
| * @param {Array} oldChildren | ||
| * @param {Array} newChildren | ||
| * @param {DOM Element} parentNode | ||
| */ | ||
| export const keyChildrenDiff = (oldChilds, newChilds, parent) => { | ||
| export const keyChildrenDiff = (oldChildren, newChildren, parentNode) => { | ||
| // get every old key | ||
| const oldKeys = oldChilds.map((child) => child.props.key); | ||
| const oldKeys = oldChildren.map((child) => child.props.key); | ||
| // get every new key | ||
| const newKeys = newChilds.map((child) => child.props.key); | ||
| const newKeys = newChildren.map((child) => child.props.key); | ||
| // get the diff on keys | ||
| const diffedKeys = diffChildrenKeys(oldKeys, newKeys); | ||
| if (oldKeys.length > newKeys.length) { | ||
| const differenceKeys = oldKeys.filter((key) => newKeys.indexOf(key) < 0); | ||
| for (let i = 0, k = diffedKeys.length; i < k; i++) { | ||
| const key = diffedKeys[i]; | ||
| differenceKeys.forEach((diff) => { | ||
| const element = parent.querySelector(`[key="${diff}"]`); | ||
| for (let a = 0, b = parentNode.children.length; a < b; a++) { | ||
| const node = parentNode.children[a]; | ||
| if(parent){ | ||
| parent.removeChild(element); | ||
| if (node && node.attributes.key.value === key) { | ||
| parentNode.removeChild(node); | ||
| break; | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| } else if (oldKeys.length < newKeys.length) { | ||
| const differenceKeys = newKeys.filter((key) => oldKeys.indexOf(key) < 0); | ||
| for (let i = 0, k = diffedKeys.length; i < k; i++) { | ||
| const key = diffedKeys[i]; | ||
| differenceKeys.forEach((key) => { | ||
| newChilds.forEach((child) => { | ||
| if (child.props.key === key) { | ||
| parent.appendChild(createElement(child)); | ||
| for (let a = newChildren.length - 1; a >= 0; a--) { | ||
| const node = newChildren[a]; | ||
| if (String(node.props.key) === key) { | ||
| parentNode.appendChild(createElement(node)); | ||
| break; | ||
| } | ||
| }); | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| }; |
@@ -6,3 +6,3 @@ /** | ||
| */ | ||
| export const proxyFn = function(e){ | ||
| export const proxyFn = function(e) { | ||
| return this.$events[e.type](e); | ||
@@ -24,3 +24,3 @@ }; | ||
| if(!element.$events){ | ||
| if (!element.$events) { | ||
| element.$events = {}; | ||
@@ -27,0 +27,0 @@ } |
| import { decorateElement } from './decorateElement'; | ||
| import { appendChildren } from './appendChildren'; | ||
| /** | ||
@@ -5,0 +4,0 @@ * converts a vnode into an html element |
| import { POWER_NODE_ATTRIBUTE } from '../constants'; | ||
| import { isArray, isFunction } from '../utils/is'; | ||
| /** | ||
@@ -22,2 +22,13 @@ * VNode Counter | ||
| // handle functional components | ||
| if (isFunction(this.tagName)) { | ||
| const results = new this.tagName(this.props); | ||
| if (isArray(results)) { | ||
| this.children = this.children.concat(results); | ||
| } else { | ||
| this.children[this.children.length] = results; | ||
| } | ||
| } | ||
| // increment counter | ||
@@ -24,0 +35,0 @@ counter += 1; |
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
- Total package byte prevSize
- increased by3.69%
98067
- Lines of code
- increased by3.29%
2228
- Number of lines in readme file
- increased by0.68%
148
No dependency changes