diff --git a/CHANGELOG.md b/CHANGELOG.md index 6c29700..8d1888c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,15 @@ -### [5.0.10](https://github.com/Masquerade-Circus/valyrian.js/compare/5.0.9...5.0.10) (2021-04-29) +### [5.0.11](https://github.com/Masquerade-Circus/valyrian.js/compare/5.0.10...5.0.11) (2021-05-01) + + +### Bug Fixes + +* **lib:** fix replace string with keyed list item ([4daac78](https://github.com/Masquerade-Circus/valyrian.js/commit/4daac78294aea7a862287afc00809d4630676fda)) +### [5.0.10](https://github.com/Masquerade-Circus/valyrian.js/compare/5.0.9...5.0.10) (2021-04-29) ### Bug Fixes -* **lib:** fix don't add property if false at first render ([00e6842](https://github.com/Masquerade-Circus/valyrian.js/commit/00e6842a86788e2962efbc2a090bfa3d77c20bbb)) +* **lib:** fix don't add property if false at first render ([00e6842](https://github.com/Masquerade-Circus/valyrian.js/commit/00e6842a86788e2962efbc2a090bfa3d77c20bbb)) ### [5.0.9](https://github.com/Masquerade-Circus/valyrian.js/compare/5.0.8...5.0.9) (2021-04-29) diff --git a/dist/valyrian.min.js b/dist/valyrian.min.js index ac197d5..fe991f3 100644 --- a/dist/valyrian.min.js +++ b/dist/valyrian.min.js @@ -1,396 +1 @@ -(() => { - // lib/index.ts - var Vnode = class { - constructor(name, props = null, children) { - this.props = props || {}; - this.children = children; - this.name = name; - } - }; - var TextVnode = class { - constructor(dom) { - this.dom = dom; - } - }; - var ComponentVnode = class { - constructor(component, props = null, children) { - this.props = props; - this.children = children; - this.component = component; - } - }; - var UND = void 0; - var NULL = null; - var isArray = Array.isArray; - var functionstr = "function"; - var once = "v-once"; - var key = "key"; - var svg = "svg"; - var str = "string"; - var createElement = (tag, isSVG = false) => isSVG ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag); - var domToVnode = (dom) => { - if (dom.nodeType === 1) { - let props = {}; - [].forEach.call(dom.attributes, (prop) => props[prop.nodeName] = prop.nodeValue); - let vnode = new Vnode(dom.nodeName, props, []); - vnode.dom = dom; - for (let i = 0, l = dom.childNodes.length; i < l; i++) { - let childVnode = domToVnode(dom.childNodes[i]); - childVnode && vnode.children.push(childVnode); - } - return vnode; - } - if (dom.nodeType === 3) { - return new TextVnode(dom); - } - }; - var emptyNode = new Vnode("empty", NULL, []); - var callRemove = (vnode) => { - for (let i = 0, l = vnode.children.length; i < l; i++) { - vnode.children[i] instanceof Vnode && callRemove(vnode.children[i]); - } - vnode.props.onremove && vnode.props.onremove(vnode); - }; - var isNode = typeof window === "undefined" || typeof global !== "undefined"; - var trust = (htmlString) => { - let div = createElement("div"); - div.innerHTML = htmlString.trim(); - return [].map.call(div.childNodes, (item) => domToVnode(item)); - }; - function valyrian() { - function v(tagOrComponent, props = null, ...children) { - if (typeof tagOrComponent === str) { - return new Vnode(tagOrComponent, props, children); - } - return new ComponentVnode(tagOrComponent, props, children); - } - v.isMounted = false; - v.isNode = isNode; - let mainContainer = NULL; - let mainNode; - let oldMainNode; - let mountedComponent; - const reservedWords = [key, "data", once, "oncreate", "onupdate", "onremove", "onbeforeupdate"]; - v.reservedWords = reservedWords; - const current = { - parentVnode: UND, - oldParentVnode: UND, - component: UND - }; - v.current = current; - const plugins = new Map(); - v.usePlugin = (plugin, options = {}) => !plugins.has(plugin) && plugins.set(plugin, true) && plugin(v, options); - let attachedListeners = {}; - function eventListener(e) { - let dom = e.target; - let name = `__on${e.type}`; - while (dom) { - if (dom[name]) { - dom[name](e, dom); - if (!e.defaultPrevented) { - v.update(); - } - return; - } - dom = dom.parentNode; - } - } - v.trust = trust; - let vnodesToCleanup = []; - v.onCleanup = (callback) => { - let parentVnode = v.current.parentVnode; - if (!parentVnode.onCleanup) { - parentVnode.onCleanup = []; - } - parentVnode.onCleanup.push(callback); - if (vnodesToCleanup.indexOf(parentVnode) === -1) { - vnodesToCleanup.push(parentVnode); - } - }; - let cleanupVnodes = () => { - for (let l = vnodesToCleanup.length; l--; ) { - for (let callback of vnodesToCleanup[l].onCleanup) { - callback(); - } - } - vnodesToCleanup = []; - }; - const addProps = (newNode) => { - for (let name in newNode.props) { - let value = newNode.props[name]; - if (name in newNode.props === false) { - return; - } else if (reservedWords.indexOf(name) !== -1) { - if (directives[name]) { - directives[name](value, newNode); - } - } else if (typeof value === functionstr) { - name = `__${name}`; - if (!attachedListeners[name]) { - mainContainer.addEventListener(name.slice(4), eventListener); - attachedListeners[name] = true; - } - newNode.dom[name] = value; - } else if (name in newNode.dom && !newNode.isSVG) { - if (newNode.dom[name] != value) { - newNode.dom[name] = value; - } - } else if (value !== false) { - newNode.dom.setAttribute(name, value); - } - } - }; - const updateProperty = (name, newNode, oldNode) => { - if (name in newNode.props) { - let value = newNode.props[name]; - if (reservedWords.indexOf(name) !== -1) { - if (directives[name]) { - directives[name](value, newNode, oldNode); - } - } else if (typeof value === functionstr) { - name = `__${name}`; - if (!attachedListeners[name]) { - mainContainer.addEventListener(name.slice(4), eventListener); - attachedListeners[name] = true; - } - newNode.dom[name] = value; - } else if (name in newNode.dom && !newNode.isSVG) { - if (newNode.dom[name] != value) { - newNode.dom[name] = value; - } - } else if (!oldNode || value !== oldNode.props[name]) { - if (value === false) { - newNode.dom.removeAttribute(name); - } else { - newNode.dom.setAttribute(name, value); - } - } - } - }; - v.updateProperty = updateProperty; - let updateProps = (newNode, oldNode) => { - for (let name in newNode.props) { - if (name in newNode.props === false) { - return; - } - updateProperty(name, newNode, oldNode); - } - }; - let removeProps = (newNode, oldNode) => { - for (let name in oldNode.props) { - if (reservedWords.indexOf(name) === -1 && name in newNode.props === false && (oldNode === emptyNode || typeof oldNode.props[name] !== functionstr)) { - if (name in newNode.dom) { - newNode.dom[name] = UND; - } else { - newNode.dom.removeAttribute(name); - } - } - } - }; - let moveDom = (dom, $parent, oldDom) => { - oldDom ? $parent.replaceChild(dom, oldDom) : $parent.appendChild(dom); - }; - let updateKeyedNode = ($parent, newNode, newIndex, compareNode) => { - let oldDom = $parent.childNodes[newIndex]; - if (compareNode) { - newNode.dom = compareNode.dom; - if (once in newNode.props || newNode.props.onbeforeupdate && newNode.props.onbeforeupdate(newNode, compareNode) === false) { - newNode.children = compareNode.children; - newNode.dom !== oldDom && moveDom(newNode.dom, $parent, oldDom); - } else { - removeProps(newNode, compareNode); - updateProps(newNode, compareNode); - newNode.dom !== oldDom && moveDom(newNode.dom, $parent, oldDom); - if (v.isMounted) { - newNode.props.onupdate && newNode.props.onupdate(newNode, compareNode); - } else { - newNode.props.oncreate && newNode.props.oncreate(newNode); - } - patch(newNode, compareNode); - } - } else { - newNode.dom = createElement(newNode.name, newNode.isSVG); - addProps(newNode); - newNode.dom !== oldDom && moveDom(newNode.dom, $parent, oldDom); - newNode.props.oncreate && newNode.props.oncreate(newNode); - patch(newNode); - } - }; - let patch = (parentNode, oldParentNode = emptyNode) => { - let newTree = isArray(parentNode.children) ? parentNode.children : [parentNode.children]; - let oldTree = oldParentNode.children; - current.parentVnode = parentNode; - current.oldParentVnode = oldParentNode; - for (let i = 0; i < newTree.length; i++) { - let childVnode = newTree[i]; - if (childVnode instanceof Vnode) { - childVnode.isSVG = parentNode.isSVG || childVnode.name === svg; - } else if (childVnode === NULL || childVnode === UND) { - newTree.splice(i--, 1); - } else if (childVnode instanceof ComponentVnode) { - current.component = childVnode; - newTree.splice(i--, 1, ("view" in childVnode.component ? childVnode.component.view : childVnode.component).call(childVnode.component, childVnode.props, ...childVnode.children)); - } else if (isArray(childVnode)) { - newTree.splice(i--, 1, ...childVnode); - } - } - if (newTree.length === 0) { - if (oldTree.length > 0) { - for (let i = oldTree.length; i--; ) { - oldTree[i] instanceof Vnode && callRemove(oldTree[i]); - } - parentNode.dom.textContent = ""; - } - } else if (oldTree.length && newTree[0] instanceof Vnode && key in newTree[0].props) { - let oldKeys = oldTree.map((vnode) => vnode.props.key); - let newKeys = newTree.map((vnode) => vnode.props.key); - for (let i = 0, l2 = newKeys.length; i < l2; i++) { - let key2 = newKeys[i]; - let newNode = newTree[i]; - if (key2 === oldKeys[i]) { - oldTree[i].processed = true; - updateKeyedNode(parentNode.dom, newNode, i, oldTree[i]); - } else { - let oldIndex = oldKeys.indexOf(key2); - let newIndex = i >= oldKeys.length ? -1 : i; - if (oldIndex !== -1) { - oldTree[oldIndex].processed = true; - updateKeyedNode(parentNode.dom, newNode, newIndex, oldTree[oldIndex]); - } else { - updateKeyedNode(parentNode.dom, newNode, newIndex); - } - } - } - let l = oldTree.length; - while (l--) { - if (!oldTree[l].processed) { - let oldVnode = oldTree[l]; - callRemove(oldVnode); - oldVnode.dom && oldVnode.dom.parentNode && oldVnode.dom.parentNode.removeChild(oldVnode.dom); - } - } - } else { - let i = oldTree.length; - let l = newTree.length; - while (i-- > l) { - let oldVnode = oldTree[i]; - oldVnode instanceof Vnode && callRemove(oldVnode); - oldVnode.dom && oldVnode.dom.parentNode && oldVnode.dom.parentNode.removeChild(oldVnode.dom); - } - for (i = 0; i < l; i++) { - let newNode = newTree[i]; - let oldNode = oldTree[i]; - if (newNode instanceof Vnode) { - if (oldNode && newNode.name === oldNode.name) { - newNode.dom = oldNode.dom; - if (once in newNode.props || newNode.props.onbeforeupdate && newNode.props.onbeforeupdate(newNode, oldNode) === false) { - newNode.children = oldNode.children; - } else { - removeProps(newNode, oldNode); - updateProps(newNode, oldNode); - if (v.isMounted) { - newNode.props.onupdate && newNode.props.onupdate(newNode, oldNode); - } else { - newNode.props.oncreate && newNode.props.oncreate(newNode); - } - patch(newNode, oldNode); - } - } else { - newNode.dom = createElement(newNode.name, newNode.isSVG); - addProps(newNode); - if (oldNode) { - oldNode instanceof Vnode && callRemove(oldNode); - parentNode.dom.replaceChild(newNode.dom, parentNode.dom.childNodes[i]); - } else { - parentNode.dom.appendChild(newNode.dom); - } - newNode.props.oncreate && newNode.props.oncreate(newNode); - patch(newNode); - } - } else { - let dom; - let value = newNode instanceof TextVnode ? newNode.dom.nodeValue : String(newNode); - if (oldNode instanceof TextVnode) { - dom = oldNode.dom; - if (value != dom.nodeValue) { - dom.nodeValue = value; - } - } else { - dom = document.createTextNode(value); - if (oldNode) { - callRemove(oldNode); - parentNode.dom.replaceChild(dom, oldNode.dom); - } else { - parentNode.dom.appendChild(dom); - } - } - newTree[i] = new TextVnode(dom); - } - } - } - parentNode.children = newTree; - }; - v.update = (props = null, ...children) => { - if (mainNode) { - if (mountedComponent) { - cleanupVnodes(); - oldMainNode = mainNode; - mainNode = new Vnode(mainNode.name, mainNode.props, [v(mountedComponent, props, ...children)]); - mainNode.dom = oldMainNode.dom; - mainNode.isSVG = mainNode.name === svg; - patch(mainNode, oldMainNode); - v.isMounted = true; - } - return v.isNode && mainNode.dom.innerHTML; - } - }; - v.mount = (container, component, props = null, ...children) => { - mainContainer = v.isNode ? createElement(container) : document.querySelectorAll(container)[0]; - mainNode = domToVnode(mainContainer); - mountedComponent = component; - return v.update(props, ...children); - }; - v.unMount = () => { - mainContainer = NULL; - mountedComponent = () => ""; - let result = v.update(); - v.isMounted = false; - return result; - }; - const directives = {}; - v.directive = (directive, handler) => { - let directiveName = `v-${directive}`; - if (reservedWords.indexOf(directiveName) === -1) { - reservedWords.push(directiveName); - directives[directiveName] = handler; - } - }; - let hideDirective = (test) => (bool, vnode, oldnode) => { - let value = test ? bool : !bool; - if (value) { - let newdom = document.createTextNode(""); - if (oldnode && oldnode.dom && oldnode.dom.parentNode) { - oldnode instanceof Vnode && callRemove(oldnode); - oldnode.dom.parentNode.replaceChild(newdom, oldnode.dom); - } - vnode.name = "#text"; - vnode.children = []; - vnode.props = {}; - vnode.dom = newdom; - } - }; - v.directive("if", hideDirective(false)); - v.directive("unless", hideDirective(true)); - v.directive("for", (set, vnode) => vnode.children = set.map(vnode.children[0])); - v.directive("show", (bool, vnode) => vnode.dom.style.display = bool ? "" : "none"); - v.directive("class", (classes, vnode) => { - for (let name in classes) { - vnode.dom.classList.toggle(name, classes[name]); - } - }); - v.directive("html", (html, vnode) => vnode.children = trust(html)); - v.newInstance = valyrian; - return v; - } - (isNode ? global : window).v = valyrian(); -})(); +(()=>{var e=class{constructor(e,o=null,n){this.props=o||{},this.children=n,this.name=e}},o=class{constructor(e){this.dom=e}},n=class{constructor(e,o=null,n){this.props=o,this.children=n,this.component=e}},t=void 0,d=null,r=Array.isArray,p="function",i="v-once",l="key",s=(e,o=!1)=>o?document.createElementNS("http://www.w3.org/2000/svg",e):document.createElement(e),a=n=>{if(1===n.nodeType){let o={};[].forEach.call(n.attributes,e=>o[e.nodeName]=e.nodeValue);let t=new e(n.nodeName,o,[]);t.dom=n;for(let e=0,o=n.childNodes.length;e{for(let n=0,t=o.children.length;n{let o=s("div");return o.innerHTML=e.trim(),[].map.call(o.childNodes,e=>a(e))};(u?global:window).v=function h(){function v(o,t=null,...d){return"string"==typeof o?new e(o,t,d):new n(o,t,d)}v.isMounted=!1,v.isNode=u;let g,w,N,y=d,V=[l,"data",i,"oncreate","onupdate","onremove","onbeforeupdate"];v.reservedWords=V;let C={parentVnode:t,oldParentVnode:t,component:t};v.current=C;let b=new Map;v.usePlugin=(e,o={})=>!b.has(e)&&b.set(e,!0)&&e(v,o);let x={};function S(e){let o=e.target,n=`__on${e.type}`;for(;o;){if(o[n])return o[n](e,o),void(e.defaultPrevented||v.update());o=o.parentNode}}v.trust=f;let M=[];v.onCleanup=e=>{let o=v.current.parentVnode;o.onCleanup||(o.onCleanup=[]),o.onCleanup.push(e),-1===M.indexOf(o)&&M.push(o)};let A=e=>{for(let o in e.props){let n=e.props[o];if(!(o in e.props))return;-1!==V.indexOf(o)?P[o]&&P[o](n,e):typeof n===p?(o=`__${o}`,x[o]||(y.addEventListener(o.slice(4),S),x[o]=!0),e.dom[o]=n):o in e.dom&&!e.isSVG?e.dom[o]!=n&&(e.dom[o]=n):!1!==n&&e.dom.setAttribute(o,n)}},G=(e,o,n)=>{if(e in o.props){let t=o.props[e];-1!==V.indexOf(e)?P[e]&&P[e](t,o,n):typeof t===p?(x[e=`__${e}`]||(y.addEventListener(e.slice(4),S),x[e]=!0),o.dom[e]=t):e in o.dom&&!o.isSVG?o.dom[e]!=t&&(o.dom[e]=t):(!n||t!==n.props[e])&&(!1===t?o.dom.removeAttribute(e):o.dom.setAttribute(e,t))}};v.updateProperty=G;let O=(e,o)=>{for(let n in e.props){if(!(n in e.props))return;G(n,e,o)}},T=(e,o)=>{for(let n in o.props)-1===V.indexOf(n)&&!(n in e.props)&&(o===c||typeof o.props[n]!==p)&&(n in e.dom?e.dom[n]=t:e.dom.removeAttribute(n))},_=(e,o,n)=>{n?o.replaceChild(e,n):o.appendChild(e)},E=(e,o,n,t)=>{let d=e.childNodes[n];t?(o.dom=t.dom,i in o.props||o.props.onbeforeupdate&&!1===o.props.onbeforeupdate(o,t)?(o.children=t.children,o.dom!==d&&_(o.dom,e,d)):(T(o,t),O(o,t),o.dom!==d&&_(o.dom,e,d),v.isMounted?o.props.onupdate&&o.props.onupdate(o,t):o.props.oncreate&&o.props.oncreate(o),L(o,t))):(o.dom=s(o.name,o.isSVG),A(o),o.dom!==d&&_(o.dom,e,d),o.props.oncreate&&o.props.oncreate(o),L(o))},L=(p,a=c)=>{let u=r(p.children)?p.children:[p.children],f=a.children;C.parentVnode=p,C.oldParentVnode=a;for(let o=0;o0){for(let o=f.length;o--;)f[o]instanceof e&&m(f[o]);p.dom.textContent=""}}else if(f.length&&u[0]instanceof e&&l in u[0].props){let o=l in(f[0].props||{})?f.map(e=>e.props.key):[],n=u.map(e=>e.props.key);for(let e=0,t=n.length;e=o.length?-1:e;-1!==n?(f[n].processed=!0,E(p.dom,d,r,f[n])):E(p.dom,d,r)}}let t=f.length;for(;t--;)if(!f[t].processed){let o=f[t];o instanceof e&&m(o),o.dom&&o.dom.parentNode&&o.dom.parentNode.removeChild(o.dom)}}else{let n=f.length,t=u.length;for(;n-- >t;){let o=f[n];o instanceof e&&m(o),o.dom&&o.dom.parentNode&&o.dom.parentNode.removeChild(o.dom)}for(n=0;n{if(g)return N&&((()=>{for(let e=M.length;e--;)for(let o of M[e].onCleanup)o();M=[]})(),w=g,g=new e(g.name,g.props,[v(N,o,...n)]),g.dom=w.dom,g.isSVG="svg"===g.name,L(g,w),v.isMounted=!0),v.isNode&&g.dom.innerHTML},v.mount=(e,o,n=null,...t)=>(y=v.isNode?s(e):document.querySelectorAll(e)[0],g=a(y),N=o,v.update(n,...t)),v.unMount=()=>{y=d,N=()=>"";let e=v.update();return v.isMounted=!1,e};let P={};v.directive=(e,o)=>{let n=`v-${e}`;-1===V.indexOf(n)&&(V.push(n),P[n]=o)};let $=o=>(n,t,d)=>{if(o?n:!n){let o=document.createTextNode("");d&&d.dom&&d.dom.parentNode&&(d instanceof e&&m(d),d.dom.parentNode.replaceChild(o,d.dom)),t.name="#text",t.children=[],t.props={},t.dom=o}};return v.directive("if",$(!1)),v.directive("unless",$(!0)),v.directive("for",(e,o)=>o.children=e.map(o.children[0])),v.directive("show",(e,o)=>o.dom.style.display=e?"":"none"),v.directive("class",(e,o)=>{for(let n in e)o.dom.classList.toggle(n,e[n])}),v.directive("html",(e,o)=>o.children=f(e)),v.newInstance=h,v}()})(); \ No newline at end of file diff --git a/package.json b/package.json index 284243d..610751c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "valyrian.js", - "version": "5.0.10", + "version": "5.0.11", "description": "Lightweight steel to forge PWAs. (Minimal Frontend Framework with server side rendering and other capabilities)", "source": "lib/index.ts", "main": "dist/valyrian.min.js",