diff --git a/.size-snapshot.json b/.size-snapshot.json index 2640349..1cb9481 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,7 +1,7 @@ { "dist/valyrian.min.js": { - "bundled": 13173, - "minified": 5218, - "gzipped": 2097 + "bundled": 12928, + "minified": 5080, + "gzipped": 2064 } } diff --git a/dist/valyrian.min.js b/dist/valyrian.min.js index 8121cb4..4074e1b 100644 --- a/dist/valyrian.min.js +++ b/dist/valyrian.min.js @@ -1 +1 @@ -!function(){"use strict";function e(){let e,o,n,t=void 0,d="v-skip",r=Array.isArray;function i(e,o,n){this.props=o||{},this.children=n,this.name=e}function l(e){this.dom=e}l.prototype={props:{},children:[]};let s=new l;function p(e,o){return o?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e)}function c(e,o,n){if(e instanceof i){if("onremove"===o)for(let o=0,n=e.children.length;o{if(3===e.nodeType)return new l(e);if(1===e.nodeType){let o={};[].forEach.call(e.attributes,e=>o[e.nodeName]=e.nodeValue);let n=new i(e.nodeName,o,[]);n.dom=e;for(let o=0,t=e.childNodes.length;o{let o=p("div");return o.innerHTML=e.trim(),[].map.call(o.childNodes,e=>m.domToVnode(e))};let a=new Map;m.usePlugin=(e,o)=>!a.has(e)&&a.set(e,!0)&&e(m,o),m.reservedWords={key:!0,"v-once":!0,oncreate:!0,onbeforeupdate:!0,onupdate:!0,onremove:!0,data:!0,[d]:!0};let u={};function f(e){let o=e.target,n=`__on${e.type}`;for(;o;){if(o[n])return o[n](e),void(e.defaultPrevented||m.update());o=o.parentNode}}function h(e,o){for(let n in e.props)m.updateProperty(n,e,o)}function v(e,o){for(let n in o.props)m.reservedWords[n]||n in e.props!=!1||"function"==typeof o.props[n]||(n in e.dom?e.dom[n]=t:e.dom.removeAttribute(n))}function g(e,o,n){e!==o.childNodes[n]&&(o.childNodes[n]?o.replaceChild(e,o.childNodes[n]):o.appendChild(e))}function y(e){e&&e.dom&&(c(e,"onremove"),e.dom.parentNode&&e.dom.parentNode.removeChild(e.dom))}function N(e,o,n,t){n.dom?(o.dom=n.dom,o.props["v-once"]||!1===c(o,"onbeforeupdate",n)?(o.children=n.children,g(o.dom,e,t)):(v(o,n),h(o,n),g(o.dom,e,t),c(o,m.isMounted?"onupdate":"oncreate",n))):(o.dom=p(o.name,o.isSVG),h(o,s),g(o.dom,e,t),c(o,"oncreate"),w(o,s))}m.updateProperty=(e,o,n)=>{if(e in o.props){let t=o.props[e];m.reservedWords[e]?"function"==typeof m.reservedWords[e]&&m.reservedWords[e](t,o,n):"function"==typeof t?(u[e=`__${e}`]||(document.addEventListener(e.slice(4),f),u[e]=!0),o.dom[e]=t):e in o.dom&&!o.isSVG?o.dom[e]!==t&&(o.dom[e]=t):t!==n.props[e]&&o.dom.setAttribute(e,t)}};let V=[];function w(e,o){if(e.props[d])return;let n=r(e.children)?e.children:[e.children],a=o.children;m.current.parentVnode=e,m.current.oldParentVnode=o;for(let o=0;oe.props.key),d=n.map(e=>e.props.key);for(let r=0,i=d.length;r=o.length?t:r;-1!==n?(a[n].processed=!0,N(e.dom,l,a[n],d)):N(e.dom,l,s,d)}}let r=a.length;for(;r--;)!a[r].processed&&y(a[r])}else{let o=a.length,t=n.length;for(;o-- >t;)y(a[o]);for(o=0;o{let o=m.current.parentVnode;o.onCleanup||(o.onCleanup=[]),o.onCleanup.push(e),-1===V.indexOf(o)&&V.push(o)},m.current={parentVnode:t,oldParentVnode:t,component:t},m.update=(t,...d)=>{if(e)return n&&(!function(){for(let e=V.length;e--;)for(let o of V[e].onCleanup)o();V=[]}(),o=e,e=new i(e.name,e.props,m(n,t,...d)),e.dom=o.dom,e.isSVG="svg"===e.name,w(e,o),m.isMounted=!0),m.isNode&&e.dom.innerHTML},m.mount=(o,t,d,...r)=>{let i=m.isNode?p("div"):"string"==typeof o?document.querySelectorAll(o)[0]:o;return e=m.domToVnode(i),n=t,m.update(d,...r)},m.unMount=()=>{n=()=>"";let e=m.update();return n=t,m.isMounted=!1,e},m.directive=(e,o)=>!m.reservedWords[e]&&(m.reservedWords[e]=o),m.directive("v-for",(e,o)=>o.children=e.map(o.children[0]));let C=e=>(o,n,t)=>{if(e?o:!o){let e=document.createTextNode("");t.dom&&t.dom.parentNode&&(c(t,"onremove"),t.dom.parentNode.replaceChild(e,t.dom)),n.name="",n.children=[],n.props={},n.dom=e}};return m.directive("v-if",C(!1)),m.directive("v-unless",C(!0)),m.directive("v-show",(e,o)=>o.dom.style.display=e?"":"none"),m.directive("v-class",(e,o)=>{for(let n in e)o.dom.classList.toggle(n,e[n])}),m.directive("v-html",(e,o)=>{o.dom.innerHTML=e,o.props[d]=!0}),m.directive("v-text",(e,o)=>{o.dom.textContent=e,o.props[d]=!0}),m}const o=e();o.newInstance=e,(o.isNode?global:window).v=o}(); \ No newline at end of file +!function(){"use strict";function e(){let e,o,n,t=void 0,d=Array.isArray;function r(e,o,n){this.props=o||{},this.children=n,this.name=e}function i(e){this.dom=e}i.prototype={props:{},children:[]};let l=new i;function s(e,o){return o?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e)}function c(e,o,n){if(e instanceof r){if("onremove"===o)for(let o=0,n=e.children.length;o{if(3===e.nodeType)return new i(e);if(1===e.nodeType){let o={};[].forEach.call(e.attributes,e=>o[e.nodeName]=e.nodeValue);let n=new r(e.nodeName,o,[]);n.dom=e;for(let o=0,t=e.childNodes.length;o{let o=s("div");return o.innerHTML=e.trim(),[].map.call(o.childNodes,e=>p.domToVnode(e))};let m=new Map;p.usePlugin=(e,o)=>!m.has(e)&&m.set(e,!0)&&e(p,o),p.reservedWords={key:!0,"v-once":!0,oncreate:!0,onbeforeupdate:!0,onupdate:!0,onremove:!0,data:!0};let a={};function u(e){let o=e.target,n=`__on${e.type}`;for(;o;){if(o[n])return o[n](e),void(e.defaultPrevented||p.update());o=o.parentNode}}function f(e,o){for(let n in e.props)p.updateProperty(n,e,o)}function h(e,o){for(let n in o.props)p.reservedWords[n]||n in e.props!=!1||"function"==typeof o.props[n]||(n in e.dom?e.dom[n]=t:e.dom.removeAttribute(n))}function v(e,o,n){e!==o.childNodes[n]&&(o.childNodes[n]?o.replaceChild(e,o.childNodes[n]):o.appendChild(e))}function g(e){e&&e.dom&&(c(e,"onremove"),e.dom.parentNode&&e.dom.parentNode.removeChild(e.dom))}function y(e,o,n,t){n.dom?(o.dom=n.dom,o.props["v-once"]||!1===c(o,"onbeforeupdate",n)?(o.children=n.children,v(o.dom,e,t)):(h(o,n),f(o,n),v(o.dom,e,t),c(o,p.isMounted?"onupdate":"oncreate",n),V(o,n))):(o.dom=s(o.name,o.isSVG),f(o,l),v(o.dom,e,t),c(o,"oncreate"),V(o,l))}p.updateProperty=(e,o,n)=>{if(e in o.props){let t=o.props[e];p.reservedWords[e]?"function"==typeof p.reservedWords[e]&&p.reservedWords[e](t,o,n):"function"==typeof t?(a[e=`__${e}`]||(document.addEventListener(e.slice(4),u),a[e]=!0),o.dom[e]=t):e in o.dom&&!o.isSVG?o.dom[e]!==t&&(o.dom[e]=t):t!==n.props[e]&&o.dom.setAttribute(e,t)}};let N=[];function V(e,o){let n=d(e.children)?e.children:[e.children],m=o.children;p.current.parentVnode=e,p.current.oldParentVnode=o;for(let o=0;oe.props.key),d=n.map(e=>e.props.key);for(let r=0,i=d.length;r=o.length?t:r;-1!==n?(m[n].processed=!0,y(e.dom,s,m[n],d)):y(e.dom,s,l,d)}}let r=m.length;for(;r--;)!m[r].processed&&g(m[r])}else{let o=m.length,t=n.length;for(;o-- >t;)g(m[o]);for(o=0;o{let o=p.current.parentVnode;o.onCleanup||(o.onCleanup=[]),o.onCleanup.push(e),-1===N.indexOf(o)&&N.push(o)},p.current={parentVnode:t,oldParentVnode:t,component:t},p.update=(t,...d)=>{if(e)return n&&(!function(){for(let e=N.length;e--;)for(let o of N[e].onCleanup)o();N=[]}(),o=e,e=new r(e.name,e.props,p(n,t,...d)),e.dom=o.dom,e.isSVG="svg"===e.name,V(e,o),p.isMounted=!0),p.isNode&&e.dom.innerHTML},p.mount=(o,t,d,...r)=>{let i=p.isNode?s("div"):"string"==typeof o?document.querySelectorAll(o)[0]:o;return e=p.domToVnode(i),n=t,p.update(d,...r)},p.unMount=()=>{n=()=>"";let e=p.update();return n=t,p.isMounted=!1,e},p.directive=(e,o)=>!p.reservedWords[e]&&(p.reservedWords[e]=o);let w=e=>(o,n,t)=>{if(e?o:!o){let e=document.createTextNode("");t.dom&&t.dom.parentNode&&(c(t,"onremove"),t.dom.parentNode.replaceChild(e,t.dom)),n.name="",n.children=[],n.props={},n.dom=e}};return p.directive("v-if",w(!1)),p.directive("v-unless",w(!0)),p.directive("v-for",(e,o)=>o.children=e.map(o.children[0])),p.directive("v-show",(e,o)=>o.dom.style.display=e?"":"none"),p.directive("v-class",(e,o)=>{for(let n in e)o.dom.classList.toggle(n,e[n])}),p.directive("v-html",(e,o)=>o.children=p.trust(e)),p}const o=e();o.newInstance=e,(o.isNode?global:window).v=o}(); \ No newline at end of file diff --git a/lib/index.js b/lib/index.js index b48743b..5f0fe01 100644 --- a/lib/index.js +++ b/lib/index.js @@ -8,7 +8,6 @@ function valyrian() { let onbeforeupdate = 'onbeforeupdate'; let functionstr = 'function'; let once = 'v-once'; - let skip = 'v-skip'; let isArray = Array.isArray; let mainNode; let oldMainNode; @@ -100,8 +99,7 @@ function valyrian() { [onbeforeupdate]: true, [onupdate]: true, [onremove]: true, - data: true, - [skip]: true + data: true }; let attachedListeners = {}; @@ -232,9 +230,6 @@ function valyrian() { // eslint-disable-next-line complexity,sonarjs/cognitive-complexity function patch(parentNode, oldParentNode) { - if (parentNode.props[skip]) { - return; - } let newTree = isArray(parentNode.children) ? parentNode.children : [parentNode.children]; let oldTree = oldParentNode.children; @@ -250,8 +245,7 @@ function valyrian() { } else if (childVnode instanceof Vnode) { if (typeof childVnode.name !== 'string') { v.current.component = childVnode; - let viewMethod = childVnode.name.view || childVnode.name; - newTree.splice(i--, 1, ...[viewMethod.call(childVnode.name, childVnode.props, ...childVnode.children)]); + newTree.splice(i--, 1, ...[(childVnode.name.view || childVnode.name).call(childVnode.name, childVnode.props, ...childVnode.children)]); } else { childVnode.isSVG = parentNode.isSVG || childVnode.name === 'svg'; } @@ -410,7 +404,6 @@ function valyrian() { }; v.directive = (directive, handler) => !v.reservedWords[directive] && (v.reservedWords[directive] = handler); - v.directive('v-for', (set, vnode) => vnode.children = set.map(vnode.children[0])); let hideDirective = (test) => (bool, vnode, oldnode) => { let value = test ? bool : !bool; @@ -429,20 +422,14 @@ function valyrian() { v.directive('v-if', hideDirective(false)); v.directive('v-unless', hideDirective(true)); + v.directive('v-for', (set, vnode) => vnode.children = set.map(vnode.children[0])); v.directive('v-show', (bool, vnode) => vnode.dom.style.display = bool ? '' : 'none'); v.directive('v-class', (classes, vnode) => { for (let name in classes) { vnode.dom.classList.toggle(name, classes[name]); } }); - v.directive('v-html', (html, vnode) => { - vnode.dom.innerHTML = html; - vnode.props[skip] = true; - }); - v.directive('v-text', (text, vnode) => { - vnode.dom.textContent = text; - vnode.props[skip] = true; - }); + v.directive('v-html', (html, vnode) => vnode.children = v.trust(html)); return v; } diff --git a/test/directives_test.js b/test/directives_test.js index 35d3f56..91f99be 100644 --- a/test/directives_test.js +++ b/test/directives_test.js @@ -397,30 +397,6 @@ describe('Directives', () => { }); }); - /** - * The v-skip directive is used to prevent the patch of children vnodes but allow the patch of dom attributes - * Its main use will be along with other custom directives to prevent the children patch step - */ - describe('v-skip', () => { - it('should prevent child patching step', () => { - let Store = { - id: 'example', - children: 'Hello world' - }; - - let Component = () =>
{Store.children}
; - let result = v.mount('body', Component); - expect(result).toEqual('
'); - - Store.id = 'example-updated'; - Store.children = 'Hello John Doe'; - - let result2 = v.update(); - - expect(result2).toEqual('
'); - }); - }); - /** * The v-html directive is used to direct raw html render to increase performance * We can use this directive to replace the v.trust use like in this test @@ -444,16 +420,5 @@ describe('Directives', () => { }); }); - /** - * The v-text is used to update the textContent of the element to increase performance - */ - describe('v-text', () => { - it('should handle direct text render', () => { - let Component = () =>
; - let result = v.mount('body', Component); - expect(result).toEqual('
Hello world
'); - }); - }); - });