@neuronet.io/vido - npm Package Compare versions

Comparing version 3.2.7 to 3.2.8

dist/InternalComponentMethods.js

@@ -64,4 +64,10 @@ export default function getInternalComponentMethods(components, actionsByInstance, clone) {
             }
+            // update action props
+            const actions = actionsByInstance.get(this.instance);
+            if (actions)
+                for (const action of actions) {
+                    action.props = changedProps;
+                }
         }
     };
 }

dist/vido.esm.min.js

@@ -173,3 +173,3 @@ /**
  */
-class Z{constructor(t){this.classes=new Set,this.changed=!1,this.element=t;const e=(t.getAttribute("class")||"").split(/\s+/);for(const t of e)this.classes.add(t)}add(t){this.classes.add(t),this.changed=!0}remove(t){this.classes.delete(t),this.changed=!0}commit(){if(this.changed){let t="";this.classes.forEach(e=>t+=e+" "),this.element.setAttribute("class",t)}}}const J=new WeakMap,K=t(t=>e=>{if(!(e instanceof A)||e instanceof Y||"class"!==e.committer.name||e.committer.parts.length>1)throw new Error("The `classMap` directive must be used in the `class` attribute and must be the only part in the attribute.");const{committer:n}=e,{element:s}=n;let o=J.get(e);void 0===o&&(s.setAttribute("class",n.strings.join(" ")),J.set(e,o=new Set));const i=s.classList||new Z(s);o.forEach(e=>{e in t||(i.remove(e),o.delete(e))});for(const e in t){const n=t[e];n!=o.has(e)&&(n?(i.add(e),o.add(e)):(i.remove(e),o.delete(e)))}"function"==typeof i.commit&&i.commit()}),Q=new WeakMap,tt=t((t,e)=>n=>{const s=Q.get(n);if(Array.isArray(t)){if(Array.isArray(s)&&s.length===t.length&&t.every((t,e)=>t===s[e]))return}else if(s===t&&(void 0!==t||Q.has(n)))return;n.setValue(e()),Q.set(n,Array.isArray(t)?Array.from(t):t)}),et=new WeakMap,nt=t(t=>e=>{const n=et.get(e);if(void 0===t&&e instanceof A){if(void 0!==n||!et.has(e)){const t=e.committer.name;e.committer.element.removeAttribute(t)}}else t!==n&&e.setValue(t);et.set(e,t)}),st=(t,e)=>{const n=t.startNode.parentNode,s=void 0===e?t.endNode:e.startNode,o=n.insertBefore(v(),s);n.insertBefore(v(),s);const i=new M(t.options);return i.insertAfterNode(o),i},ot=(t,e)=>(t.setValue(e),t.commit(),t),it=(t,e,n)=>{const s=t.startNode.parentNode,i=n?n.startNode:t.endNode,r=e.endNode.nextSibling;r!==i&&o(s,e.startNode,r,i)},rt=t=>{i(t.startNode.parentNode,t.startNode,t.endNode.nextSibling)},at=(t,e,n)=>{const s=new Map;for(let o=e;o<=n;o++)s.set(t[o],o);return s},lt=new WeakMap,ct=new WeakMap,ht=t((t,e,n)=>{let s;return void 0===n?n=e:void 0!==e&&(s=e),e=>{if(!(e instanceof M))throw new Error("repeat can only be used in text bindings");const o=lt.get(e)||[],i=ct.get(e)||[],r=[],a=[],l=[];let c,h,d=0;for(const e of t)l[d]=s?s(e,d):d,a[d]=n(e,d),d++;let p=0,u=o.length-1,m=0,v=a.length-1;for(;p<=u&&m<=v;)if(null===o[p])p++;else if(null===o[u])u--;else if(i[p]===l[m])r[m]=ot(o[p],a[m]),p++,m++;else if(i[u]===l[v])r[v]=ot(o[u],a[v]),u--,v--;else if(i[p]===l[v])r[v]=ot(o[p],a[v]),it(e,o[p],r[v+1]),p++,v--;else if(i[u]===l[m])r[m]=ot(o[u],a[m]),it(e,o[u],o[p]),u--,m++;else if(void 0===c&&(c=at(l,m,v),h=at(i,p,u)),c.has(i[p]))if(c.has(i[u])){const t=h.get(l[m]),n=void 0!==t?o[t]:null;if(null===n){const t=st(e,o[p]);ot(t,a[m]),r[m]=t}else r[m]=ot(n,a[m]),it(e,n,o[p]),o[t]=null;m++}else rt(o[u]),u--;else rt(o[p]),p++;for(;m<=v;){const t=st(e,r[v+1]);ot(t,a[m]),r[m++]=t}for(;p<=u;){const t=o[p++];null!==t&&rt(t)}lt.set(e,r),ct.set(e,l)}}),dt=new WeakMap,pt=document.createElement("template"),ut=t(t=>e=>{if(!(e instanceof M))throw new Error("unsafeHTML can only be used in text bindings");const n=dt.get(e);if(void 0!==n&&N(t)&&t===n.value&&e.value===n.fragment)return;const s=pt.cloneNode();s.innerHTML=t;const o=document.importNode(s.content,!0);e.setValue(o),dt.set(e,{value:t,fragment:o})}),mt=new WeakMap,vt=t((...t)=>e=>{let n=mt.get(e);void 0===n&&(n={lastRenderedIndex:2147483647,values:[]},mt.set(e,n));const s=n.values;let o=s.length;n.values=t;for(let i=0;i<t.length&&!(i>n.lastRenderedIndex);i++){const r=t[i];if(N(r)||"function"!=typeof r.then){e.setValue(r),n.lastRenderedIndex=i;break}i<o&&r===s[i]||(n.lastRenderedIndex=2147483647,o=0,Promise.resolve(r).then(t=>{const s=n.values.indexOf(r);s>-1&&s<n.lastRenderedIndex&&(n.lastRenderedIndex=s,e.setValue(t),e.commit())}))}}),ft=t(t=>e=>{let n;if(e instanceof S||e instanceof M)throw new Error("The `live` directive is not allowed on text or event bindings");if(e instanceof C)gt(e.strings),n=e.element.hasAttribute(e.name),e.value=n;else{const{element:s,name:o,strings:i}=e.committer;if(gt(i),e instanceof Y){if(n=s[o],n===t)return}else e instanceof A&&(n=s.getAttribute(o));if(n===String(t))return}e.setValue(t)}),gt=t=>{if(2!==t.length||""!==t[0]||""!==t[1])throw new Error("`live` bindings can only contain a single expression")},yt=new WeakMap;class bt extends e{constructor(t){super(),this.ifFn=t}body(t){const e=this.ifFn(),n=t.committer.element;if(e)yt.has(t)||yt.set(t,{element:n,nextSibling:n.nextSibling,previousSibling:n.previousSibling,parent:n.parentNode}),n.remove();else{const e=yt.get(t);e&&(e.nextSibling&&e.nextSibling.parentNode?e.nextSibling.parentNode.insertBefore(e.element,e.nextSibling):e.previousSibling&&e.previousSibling.parentNode?e.previousSibling.parentNode.appendChild(e.element):e.parent&&e.parent.appendChild(e.element),yt.delete(t))}}}class xt extends e{constructor(t,e=!1){super(),this.toRemove=[],this.toUpdate=[],this.debug=!1,this.previous={},this.style=t,this.detach=e}setStyle(t){this.style=t}setDebug(t=!0){this.debug=t}setDetach(t){this.detach=t}body(t){this.toRemove.length=0,this.toUpdate.length=0;const e=t.committer.element,n=e.style;let s=this.previous;if(e.attributes.getNamedItem("style")){const t=e.attributes.getNamedItem("style").value.split(";").map(t=>t.substr(0,t.indexOf(":")).trim()).filter(t=>!!t);for(const e of t)void 0===this.style[e]&&(this.toRemove.includes(e)||this.toRemove.push(e))}for(const t in s)this.style.hasOwnProperty(t)&&void 0===this.style[t]&&(this.toRemove.includes(t)||this.toRemove.push(t));for(const t in this.style){if(!this.style.hasOwnProperty(t))continue;const e=this.style[t],n=s[t];void 0!==n&&n===e||this.toUpdate.push(t)}if(this.debug&&(console.log("[StyleMap] to remove",[...this.toRemove]),console.log("[StyleMap] to update",[...this.toUpdate])),this.toRemove.length||this.toUpdate.length){let t,s;this.detach&&(t=e.parentNode,t&&(s=e.nextSibling,e.remove()));for(const t of this.toRemove)n.removeProperty(t),n[t]&&delete n[t];for(const t of this.toUpdate){const e=this.style[t];t.includes("-")?n.setProperty(t,e):n[t]=e}this.detach&&t&&t.insertBefore(e,s),this.previous=Object.assign({},this.style)}}}class _t{constructor(){this.isAction=!0}}_t.prototype.isAction=!0;const wt={element:document.createTextNode(""),axis:"xy",threshold:10,onDown(){},onMove(){},onUp(){},onWheel(){}},Nt="undefined"!=typeof PointerEvent;let Et=0;class It extends _t{constructor(t,e){super(),this.moving="",this.initialX=0,this.initialY=0,this.lastY=0,this.lastX=0,this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onWheel=this.onWheel.bind(this),this.element=t,this.id=++Et,this.options=Object.assign(Object.assign({},wt),e.pointerOptions),Nt?(t.addEventListener("pointerdown",this.onPointerDown),document.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp)):(t.addEventListener("touchstart",this.onPointerDown),document.addEventListener("touchmove",this.onPointerMove,{passive:!1}),document.addEventListener("touchend",this.onPointerUp),document.addEventListener("touchcancel",this.onPointerUp),t.addEventListener("mousedown",this.onPointerDown),document.addEventListener("mousemove",this.onPointerMove,{passive:!1}),document.addEventListener("mouseup",this.onPointerUp))}normalizeMouseWheelEvent(t){let e=t.deltaX||0,n=t.deltaY||0,s=t.deltaZ||0;const o=t.deltaMode,i=parseInt(getComputedStyle(t.target).getPropertyValue("line-height"));let r=1;switch(o){case 1:r=i;break;case 2:r=window.height}return e*=r,n*=r,s*=r,{x:e,y:n,z:s,event:t}}onWheel(t){const e=this.normalizeMouseWheelEvent(t);this.options.onWheel(e)}normalizePointerEvent(t){let e={x:0,y:0,pageX:0,pageY:0,clientX:0,clientY:0,screenX:0,screenY:0,event:t};switch(t.type){case"wheel":const n=this.normalizeMouseWheelEvent(t);e.x=n.x,e.y=n.y,e.pageX=e.x,e.pageY=e.y,e.screenX=e.x,e.screenY=e.y,e.clientX=e.x,e.clientY=e.y;break;case"touchstart":case"touchmove":case"touchend":case"touchcancel":e.x=t.changedTouches[0].screenX,e.y=t.changedTouches[0].screenY,e.pageX=t.changedTouches[0].pageX,e.pageY=t.changedTouches[0].pageY,e.screenX=t.changedTouches[0].screenX,e.screenY=t.changedTouches[0].screenY,e.clientX=t.changedTouches[0].clientX,e.clientY=t.changedTouches[0].clientY;break;default:e.x=t.x,e.y=t.y,e.pageX=t.pageX,e.pageY=t.pageY,e.screenX=t.screenX,e.screenY=t.screenY,e.clientX=t.clientX,e.clientY=t.clientY}return e}onPointerDown(t){if("mousedown"===t.type&&0!==t.button)return;this.moving="xy";const e=this.normalizePointerEvent(t);this.lastX=e.x,this.lastY=e.y,this.initialX=e.x,this.initialY=e.y,this.options.onDown(e)}handleX(t){let e=t.x-this.lastX;return this.lastY=t.y,this.lastX=t.x,e}handleY(t){let e=t.y-this.lastY;return this.lastY=t.y,this.lastX=t.x,e}onPointerMove(t){if(""===this.moving||"mousemove"===t.type&&0!==t.button)return;const e=this.normalizePointerEvent(t);if("x|y"===this.options.axis){let n=0,s=0;("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",n=this.handleX(e)),("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("xy"===this.options.axis){let n=0,s=0;Math.abs(e.x-this.initialX)>this.options.threshold&&(n=this.handleX(e)),Math.abs(e.y-this.initialY)>this.options.threshold&&(s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("x"===this.options.axis)("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",this.options.onMove({movementX:this.handleX(e),movementY:0,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}));else if("y"===this.options.axis){let n=0;("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",n=this.handleY(e)),this.options.onMove({movementX:0,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}}onPointerUp(t){this.moving="";const e=this.normalizePointerEvent(t);this.options.onUp({movementX:0,movementY:0,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}),this.lastY=0,this.lastX=0}destroy(t){Nt?(t.removeEventListener("pointerdown",this.onPointerDown),document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp)):(t.removeEventListener("mousedown",this.onPointerDown),document.removeEventListener("mousemove",this.onPointerMove),document.removeEventListener("mouseup",this.onPointerUp),t.removeEventListener("touchstart",this.onPointerDown),document.removeEventListener("touchmove",this.onPointerMove),document.removeEventListener("touchend",this.onPointerUp),document.removeEventListener("touchcancel",this.onPointerUp))}}function Pt(t){let e=0;return function(n){e||(e=requestAnimationFrame((function(){e=0,t.apply(void 0,[n])})))}}function At(t){return t&&"object"==typeof t&&null!==t&&t.constructor&&"Object"===t.constructor.name}function Mt(t,...e){const n=e.shift();if(At(t)&&At(n))for(const e in n)if(At(n[e]))"function"==typeof n[e].clone?t[e]=n[e].clone():(void 0===t[e]&&(t[e]={}),t[e]=Mt(t[e],n[e]));else if(Array.isArray(n[e])){t[e]=new Array(n[e].length);let s=0;for(let o of n[e])At(o)?"function"==typeof o.clone?t[e][s]=o.clone():t[e][s]=Mt({},o):t[e][s]=o,s++}else t[e]=n[e];return e.length?Mt(t,...e):t}function Ct(t){if(void 0!==t.actions){const e=t.actions.map(t=>{const e=Object.assign({},t),n=Object.assign({},e.props);return delete n.state,delete n.api,delete e.element,e.props=n,e});t.actions=e}return Mt({},t)}var Xt={mergeDeep:Mt,clone:Ct,schedule:Pt};class Yt{constructor(t,e){this.slotInstances={},this.destroyed=!1,this.vido=t,this.props=e,this.destroy=this.destroy.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this),this.getInstances=this.getInstances.bind(this),this.setComponents=this.setComponents.bind(this),this.vido.onDestroy(()=>{this.destroy()})}setComponents(t){if(t&&!this.destroyed){for(const e in t){const n=t[e];void 0===this.slotInstances[e]&&(this.slotInstances[e]=[]);for(const t of this.slotInstances[e])t.destroy();this.slotInstances[e].length=0;for(const t of n)this.slotInstances[e].push(this.vido.createComponent(t,this.props))}this.vido.update()}}destroy(){if(!this.destroyed){for(const t in this.slotInstances){for(const e of this.slotInstances[t])e.destroy();this.slotInstances[t].length=0}this.destroyed=!0}}change(t,e){if(!this.destroyed)for(const n in this.slotInstances){const s=this.slotInstances[n];for(const n of s)n.change(t,e)}}getInstances(t){return this.destroyed?[]:void 0===t?this.slotInstances:this.slotInstances[t]}html(t,e){if(this.destroyed)return;if(!this.slotInstances[t]||0===this.slotInstances[t].length)return e;let n=e;for(const e of this.slotInstances[t])n=e.html(n);return n}getProps(){return this.props}isDestroyed(){return this.destroyed}}function Tt(n,s){let o=0;const i=new Map;let r,a,l=new Map,c=0;const h=[],d=Promise.resolve(),p={},u=function(t){return class extends e{constructor(t){super(),this.actions=[],this.instance=t}set(t,e){return this.actions=t,this.props=e,this}body(e){const n=e.committer.element;for(const e of this.actions)if(void 0!==e){let s;if(t.has(this.instance))for(const o of t.get(this.instance))if(o.componentAction.create===e&&o.element===n){s=o;break}if(s)s.props=this.props;else{void 0!==n.vido&&delete n.vido;const s={create:e,update(){},destroy(){}},o={instance:this.instance,componentAction:s,element:n,props:this.props};let i=[];t.has(this.instance)&&(i=t.get(this.instance)),i.push(o),t.set(this.instance,i)}}}}}(l);class m{constructor(t){this.instance=t}create(t,e){const n=new u(this.instance);return n.set(t,e),n}}const v=function(t,e,n){return class{constructor(t,e,n={}){this.destroyed=!1,this.instance=t,this.name=e.name,this.vidoInstance=e,this.props=n,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this)}destroy(){this.destroyed||(this.vidoInstance.debug&&(console.groupCollapsed(`destroying component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.destroyComponent(this.instance,this.vidoInstance),this.destroyed=!0)}update(s){return this.vidoInstance.debug&&(console.groupCollapsed(`updating component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.updateTemplate(s)}change(s,o={}){this.vidoInstance.debug&&(console.groupCollapsed(`changing component ${this.instance}`),console.log(n({props:this.props,newProps:s,components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd());const i=t.get(this.instance);i&&i.change(s,o)}html(e={}){const n=t.get(this.instance);if(n&&!n.destroyed)return n.update(e,this.vidoInstance)}_getComponents(){return t}_getActions(){return e}}}(i,l,Ct),f=function(t,e,n){return class{constructor(t,e,n){this.destroyed=!1,this.instance=t,this.vidoInstance=e,this.renderFunction=n,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this)}destroy(){if(!this.destroyed){this.vidoInstance.debug&&(console.groupCollapsed(`component destroy method fired ${this.instance}`),console.log(n({props:this.vidoInstance.props,components:t.keys(),destroyable:this.vidoInstance.destroyable,actionsByInstance:e})),console.trace(),console.groupEnd()),this.content&&"function"==typeof this.content.destroy&&this.content.destroy();for(const t of this.vidoInstance.destroyable)t();this.vidoInstance.onChangeFunctions.length=0,this.vidoInstance.destroyable.length=0,this.vidoInstance.destroyed=!0,this.destroyed=!0,this.vidoInstance.update()}}update(s={}){return this.vidoInstance.debug&&(console.groupCollapsed(`component update method fired ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.renderFunction(s)}change(s,o={leave:!1}){const i=s;this.vidoInstance.debug&&(console.groupCollapsed(`component change method fired ${this.instance}`),console.log(n({props:i,components:t.keys(),onChangeFunctions:this.vidoInstance.onChangeFunctions,changedProps:s,actionsByInstance:e})),console.trace(),console.groupEnd());for(const t of this.vidoInstance.onChangeFunctions)t(s,o)}}}(i,l,Ct);class g{constructor(e="",o=""){this.instance="",this.name="",this.destroyable=[],this.destroyed=!1,this.onChangeFunctions=[],this.debug=!1,this.state=n,this.api=s,this.lastProps={},this.html=B,this.svg=F,this.directive=t,this.asyncAppend=H,this.asyncReplace=z,this.cache=G,this.classMap=K,this.guard=tt,this.live=ft,this.ifDefined=nt,this.repeat=ht,this.unsafeHTML=ut,this.until=vt,this.schedule=Pt,this.getElement=function(t){return function(e){return t(()=>t=>{e(t.committer.element)})()}}(t),this.actionsByInstance=()=>{},this.StyleMap=xt,this.Detach=bt,this.PointerAction=It,this.Action=_t,this.Slots=Yt,this._components=i,this._actions=l,this.instance=e,this.reuseComponents=this.reuseComponents.bind(this),this.onDestroy=this.onDestroy.bind(this),this.onChange=this.onChange.bind(this),this.update=this.update.bind(this),this.destroyComponent=this.destroyComponent.bind(this);for(const t in p)this[t]=p[t].bind(this);this.name=o,this.Actions=new m(e)}static addMethod(t,e){p[t]=e}onDestroy(t){this.destroyable.push(t)}onChange(t){this.onChangeFunctions.push(t)}update(t){return this.updateTemplate(t)}reuseComponents(t,e,n,s,o=!0,i=!1){const r=[],a=t.length,l=e.length;let c=!1;!o||void 0!==e&&0!==e.length||(c=!0);let h=0;if(a<l){let o=l-a;for(;o;){const i=e[l-o],a=this.createComponent(s,n(i));t.push(a),r.push(a),o--}}else if(a>l){let e=a-l;for(o&&(c=!0,h=a-e);e;){const n=a-e;o||(r.push(t[n]),t[n].destroy()),e--}o||(t.length=l)}let d=0;i&&console.log("modified components",r),i&&console.log("current components",t),i&&console.log("data array",e);for(const s of t){const t=e[d];i&&console.log(`reuse components data at '${d}'`,t),s&&!r.includes(s)&&(i&&console.log("getProps fn result",n(t)),s.change(n(t),{leave:c&&d>=h})),d++}}createComponent(t,e={}){const n=t.name+":"+o++;let s;s=new g(n,name);const r=new v(n,s,e),a=new f(n,s,t(s,e));return i.set(n,a),i.get(n).change(e),s.debug&&(console.groupCollapsed(`component created ${n}`),console.log(Ct({props:e,components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),r}destroyComponent(t,e){if(e.debug&&(console.groupCollapsed(`destroying component ${t}...`),console.log(Ct({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),l.has(t))for(const e of l.get(t))"function"==typeof e.componentAction.destroy&&e.componentAction.destroy(e.element,e.props);l.delete(t);const n=i.get(t);n?(n.destroy(),i.delete(t),e.debug&&(console.groupCollapsed(`component destroyed ${t}`),console.log(Ct({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd())):console.warn(`No component to destroy! [${t}]`)}executeActions(){for(const t of l.values()){for(const e of t)if(void 0===e.element.vido){const t=i.get(e.instance);e.isActive=function(){return t&&!1===t.destroyed};const n=e.componentAction,s=n.create;if(void 0!==s){let t;t=s.prototype&&(s.prototype.isAction||s.prototype.update||s.prototype.destroy)||s.isAction?new s(e.element,e.props):s(e.element,e.props),void 0!==t&&("function"==typeof t?n.destroy=t:("function"==typeof t.update&&(n.update=t.update.bind(t)),"function"==typeof t.destroy&&(n.destroy=t.destroy.bind(t))))}}else e.element.vido=e.props,"function"==typeof e.componentAction.update&&e.isActive()&&e.componentAction.update(e.element,e.props);for(const e of t)e.element.vido=e.props}}updateTemplate(t){return t&&h.push(t),new Promise(t=>{const e=++c,n=this;d.then((function(){if(e===c){c=0,n.render();for(const t of h)t();h.length=0,t()}}))})}createApp(t){a=t.element;const e=this.createComponent(t.component,t.props);return r=e.instance,this.render(),e}render(){const t=i.get(r);t?(W(t.update(),a),this.executeActions()):a&&a.remove()}}return new g}Tt.prototype.lithtml=U,Tt.prototype.Action=_t,Tt.prototype.Directive=e,Tt.prototype.schedule=Pt,Tt.prototype.Detach=bt,Tt.prototype.StyleMap=xt,Tt.prototype.PointerAction=It,Tt.prototype.asyncAppend=H,Tt.prototype.asyncReplace=z,Tt.prototype.cache=G,Tt.prototype.classMap=K,Tt.prototype.guard=tt,Tt.prototype.live=ft,Tt.prototype.ifDefined=nt,Tt.prototype.repeat=ht,Tt.prototype.unsafeHTML=ut,Tt.prototype.until=vt,Tt.prototype.Slots=Yt;export default Tt;export{_t as Action,bt as Detach,e as Directive,It as PointerAction,Yt as Slots,xt as StyleMap,H as asyncAppend,z as asyncReplace,G as cache,K as classMap,tt as guard,Xt as helpers,nt as ifDefined,U as lithtml,ht as repeat,Pt as schedule,ut as unsafeHTML,vt as until};
+class Z{constructor(t){this.classes=new Set,this.changed=!1,this.element=t;const e=(t.getAttribute("class")||"").split(/\s+/);for(const t of e)this.classes.add(t)}add(t){this.classes.add(t),this.changed=!0}remove(t){this.classes.delete(t),this.changed=!0}commit(){if(this.changed){let t="";this.classes.forEach(e=>t+=e+" "),this.element.setAttribute("class",t)}}}const J=new WeakMap,K=t(t=>e=>{if(!(e instanceof A)||e instanceof Y||"class"!==e.committer.name||e.committer.parts.length>1)throw new Error("The `classMap` directive must be used in the `class` attribute and must be the only part in the attribute.");const{committer:n}=e,{element:s}=n;let o=J.get(e);void 0===o&&(s.setAttribute("class",n.strings.join(" ")),J.set(e,o=new Set));const i=s.classList||new Z(s);o.forEach(e=>{e in t||(i.remove(e),o.delete(e))});for(const e in t){const n=t[e];n!=o.has(e)&&(n?(i.add(e),o.add(e)):(i.remove(e),o.delete(e)))}"function"==typeof i.commit&&i.commit()}),Q=new WeakMap,tt=t((t,e)=>n=>{const s=Q.get(n);if(Array.isArray(t)){if(Array.isArray(s)&&s.length===t.length&&t.every((t,e)=>t===s[e]))return}else if(s===t&&(void 0!==t||Q.has(n)))return;n.setValue(e()),Q.set(n,Array.isArray(t)?Array.from(t):t)}),et=new WeakMap,nt=t(t=>e=>{const n=et.get(e);if(void 0===t&&e instanceof A){if(void 0!==n||!et.has(e)){const t=e.committer.name;e.committer.element.removeAttribute(t)}}else t!==n&&e.setValue(t);et.set(e,t)}),st=(t,e)=>{const n=t.startNode.parentNode,s=void 0===e?t.endNode:e.startNode,o=n.insertBefore(v(),s);n.insertBefore(v(),s);const i=new M(t.options);return i.insertAfterNode(o),i},ot=(t,e)=>(t.setValue(e),t.commit(),t),it=(t,e,n)=>{const s=t.startNode.parentNode,i=n?n.startNode:t.endNode,r=e.endNode.nextSibling;r!==i&&o(s,e.startNode,r,i)},rt=t=>{i(t.startNode.parentNode,t.startNode,t.endNode.nextSibling)},at=(t,e,n)=>{const s=new Map;for(let o=e;o<=n;o++)s.set(t[o],o);return s},lt=new WeakMap,ct=new WeakMap,ht=t((t,e,n)=>{let s;return void 0===n?n=e:void 0!==e&&(s=e),e=>{if(!(e instanceof M))throw new Error("repeat can only be used in text bindings");const o=lt.get(e)||[],i=ct.get(e)||[],r=[],a=[],l=[];let c,h,d=0;for(const e of t)l[d]=s?s(e,d):d,a[d]=n(e,d),d++;let p=0,u=o.length-1,m=0,v=a.length-1;for(;p<=u&&m<=v;)if(null===o[p])p++;else if(null===o[u])u--;else if(i[p]===l[m])r[m]=ot(o[p],a[m]),p++,m++;else if(i[u]===l[v])r[v]=ot(o[u],a[v]),u--,v--;else if(i[p]===l[v])r[v]=ot(o[p],a[v]),it(e,o[p],r[v+1]),p++,v--;else if(i[u]===l[m])r[m]=ot(o[u],a[m]),it(e,o[u],o[p]),u--,m++;else if(void 0===c&&(c=at(l,m,v),h=at(i,p,u)),c.has(i[p]))if(c.has(i[u])){const t=h.get(l[m]),n=void 0!==t?o[t]:null;if(null===n){const t=st(e,o[p]);ot(t,a[m]),r[m]=t}else r[m]=ot(n,a[m]),it(e,n,o[p]),o[t]=null;m++}else rt(o[u]),u--;else rt(o[p]),p++;for(;m<=v;){const t=st(e,r[v+1]);ot(t,a[m]),r[m++]=t}for(;p<=u;){const t=o[p++];null!==t&&rt(t)}lt.set(e,r),ct.set(e,l)}}),dt=new WeakMap,pt=document.createElement("template"),ut=t(t=>e=>{if(!(e instanceof M))throw new Error("unsafeHTML can only be used in text bindings");const n=dt.get(e);if(void 0!==n&&N(t)&&t===n.value&&e.value===n.fragment)return;const s=pt.cloneNode();s.innerHTML=t;const o=document.importNode(s.content,!0);e.setValue(o),dt.set(e,{value:t,fragment:o})}),mt=new WeakMap,vt=t((...t)=>e=>{let n=mt.get(e);void 0===n&&(n={lastRenderedIndex:2147483647,values:[]},mt.set(e,n));const s=n.values;let o=s.length;n.values=t;for(let i=0;i<t.length&&!(i>n.lastRenderedIndex);i++){const r=t[i];if(N(r)||"function"!=typeof r.then){e.setValue(r),n.lastRenderedIndex=i;break}i<o&&r===s[i]||(n.lastRenderedIndex=2147483647,o=0,Promise.resolve(r).then(t=>{const s=n.values.indexOf(r);s>-1&&s<n.lastRenderedIndex&&(n.lastRenderedIndex=s,e.setValue(t),e.commit())}))}}),ft=t(t=>e=>{let n;if(e instanceof S||e instanceof M)throw new Error("The `live` directive is not allowed on text or event bindings");if(e instanceof C)gt(e.strings),n=e.element.hasAttribute(e.name),e.value=n;else{const{element:s,name:o,strings:i}=e.committer;if(gt(i),e instanceof Y){if(n=s[o],n===t)return}else e instanceof A&&(n=s.getAttribute(o));if(n===String(t))return}e.setValue(t)}),gt=t=>{if(2!==t.length||""!==t[0]||""!==t[1])throw new Error("`live` bindings can only contain a single expression")},yt=new WeakMap;class bt extends e{constructor(t){super(),this.ifFn=t}body(t){const e=this.ifFn(),n=t.committer.element;if(e)yt.has(t)||yt.set(t,{element:n,nextSibling:n.nextSibling,previousSibling:n.previousSibling,parent:n.parentNode}),n.remove();else{const e=yt.get(t);e&&(e.nextSibling&&e.nextSibling.parentNode?e.nextSibling.parentNode.insertBefore(e.element,e.nextSibling):e.previousSibling&&e.previousSibling.parentNode?e.previousSibling.parentNode.appendChild(e.element):e.parent&&e.parent.appendChild(e.element),yt.delete(t))}}}class xt extends e{constructor(t,e=!1){super(),this.toRemove=[],this.toUpdate=[],this.debug=!1,this.previous={},this.style=t,this.detach=e}setStyle(t){this.style=t}setDebug(t=!0){this.debug=t}setDetach(t){this.detach=t}body(t){this.toRemove.length=0,this.toUpdate.length=0;const e=t.committer.element,n=e.style;let s=this.previous;if(e.attributes.getNamedItem("style")){const t=e.attributes.getNamedItem("style").value.split(";").map(t=>t.substr(0,t.indexOf(":")).trim()).filter(t=>!!t);for(const e of t)void 0===this.style[e]&&(this.toRemove.includes(e)||this.toRemove.push(e))}for(const t in s)this.style.hasOwnProperty(t)&&void 0===this.style[t]&&(this.toRemove.includes(t)||this.toRemove.push(t));for(const t in this.style){if(!this.style.hasOwnProperty(t))continue;const e=this.style[t],n=s[t];void 0!==n&&n===e||this.toUpdate.push(t)}if(this.debug&&(console.log("[StyleMap] to remove",[...this.toRemove]),console.log("[StyleMap] to update",[...this.toUpdate])),this.toRemove.length||this.toUpdate.length){let t,s;this.detach&&(t=e.parentNode,t&&(s=e.nextSibling,e.remove()));for(const t of this.toRemove)n.removeProperty(t),n[t]&&delete n[t];for(const t of this.toUpdate){const e=this.style[t];t.includes("-")?n.setProperty(t,e):n[t]=e}this.detach&&t&&t.insertBefore(e,s),this.previous=Object.assign({},this.style)}}}class _t{constructor(){this.isAction=!0}}_t.prototype.isAction=!0;const wt={element:document.createTextNode(""),axis:"xy",threshold:10,onDown(){},onMove(){},onUp(){},onWheel(){}},Nt="undefined"!=typeof PointerEvent;let Et=0;class It extends _t{constructor(t,e){super(),this.moving="",this.initialX=0,this.initialY=0,this.lastY=0,this.lastX=0,this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onWheel=this.onWheel.bind(this),this.element=t,this.id=++Et,this.options=Object.assign(Object.assign({},wt),e.pointerOptions),Nt?(t.addEventListener("pointerdown",this.onPointerDown),document.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp)):(t.addEventListener("touchstart",this.onPointerDown),document.addEventListener("touchmove",this.onPointerMove,{passive:!1}),document.addEventListener("touchend",this.onPointerUp),document.addEventListener("touchcancel",this.onPointerUp),t.addEventListener("mousedown",this.onPointerDown),document.addEventListener("mousemove",this.onPointerMove,{passive:!1}),document.addEventListener("mouseup",this.onPointerUp))}normalizeMouseWheelEvent(t){let e=t.deltaX||0,n=t.deltaY||0,s=t.deltaZ||0;const o=t.deltaMode,i=parseInt(getComputedStyle(t.target).getPropertyValue("line-height"));let r=1;switch(o){case 1:r=i;break;case 2:r=window.height}return e*=r,n*=r,s*=r,{x:e,y:n,z:s,event:t}}onWheel(t){const e=this.normalizeMouseWheelEvent(t);this.options.onWheel(e)}normalizePointerEvent(t){let e={x:0,y:0,pageX:0,pageY:0,clientX:0,clientY:0,screenX:0,screenY:0,event:t};switch(t.type){case"wheel":const n=this.normalizeMouseWheelEvent(t);e.x=n.x,e.y=n.y,e.pageX=e.x,e.pageY=e.y,e.screenX=e.x,e.screenY=e.y,e.clientX=e.x,e.clientY=e.y;break;case"touchstart":case"touchmove":case"touchend":case"touchcancel":e.x=t.changedTouches[0].screenX,e.y=t.changedTouches[0].screenY,e.pageX=t.changedTouches[0].pageX,e.pageY=t.changedTouches[0].pageY,e.screenX=t.changedTouches[0].screenX,e.screenY=t.changedTouches[0].screenY,e.clientX=t.changedTouches[0].clientX,e.clientY=t.changedTouches[0].clientY;break;default:e.x=t.x,e.y=t.y,e.pageX=t.pageX,e.pageY=t.pageY,e.screenX=t.screenX,e.screenY=t.screenY,e.clientX=t.clientX,e.clientY=t.clientY}return e}onPointerDown(t){if("mousedown"===t.type&&0!==t.button)return;this.moving="xy";const e=this.normalizePointerEvent(t);this.lastX=e.x,this.lastY=e.y,this.initialX=e.x,this.initialY=e.y,this.options.onDown(e)}handleX(t){let e=t.x-this.lastX;return this.lastY=t.y,this.lastX=t.x,e}handleY(t){let e=t.y-this.lastY;return this.lastY=t.y,this.lastX=t.x,e}onPointerMove(t){if(""===this.moving||"mousemove"===t.type&&0!==t.button)return;const e=this.normalizePointerEvent(t);if("x|y"===this.options.axis){let n=0,s=0;("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",n=this.handleX(e)),("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("xy"===this.options.axis){let n=0,s=0;Math.abs(e.x-this.initialX)>this.options.threshold&&(n=this.handleX(e)),Math.abs(e.y-this.initialY)>this.options.threshold&&(s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("x"===this.options.axis)("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",this.options.onMove({movementX:this.handleX(e),movementY:0,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}));else if("y"===this.options.axis){let n=0;("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",n=this.handleY(e)),this.options.onMove({movementX:0,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}}onPointerUp(t){this.moving="";const e=this.normalizePointerEvent(t);this.options.onUp({movementX:0,movementY:0,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}),this.lastY=0,this.lastX=0}destroy(t){Nt?(t.removeEventListener("pointerdown",this.onPointerDown),document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp)):(t.removeEventListener("mousedown",this.onPointerDown),document.removeEventListener("mousemove",this.onPointerMove),document.removeEventListener("mouseup",this.onPointerUp),t.removeEventListener("touchstart",this.onPointerDown),document.removeEventListener("touchmove",this.onPointerMove),document.removeEventListener("touchend",this.onPointerUp),document.removeEventListener("touchcancel",this.onPointerUp))}}function Pt(t){let e=0;return function(n){e||(e=requestAnimationFrame((function(){e=0,t.apply(void 0,[n])})))}}function At(t){return t&&"object"==typeof t&&null!==t&&t.constructor&&"Object"===t.constructor.name}function Mt(t,...e){const n=e.shift();if(At(t)&&At(n))for(const e in n)if(At(n[e]))"function"==typeof n[e].clone?t[e]=n[e].clone():(void 0===t[e]&&(t[e]={}),t[e]=Mt(t[e],n[e]));else if(Array.isArray(n[e])){t[e]=new Array(n[e].length);let s=0;for(let o of n[e])At(o)?"function"==typeof o.clone?t[e][s]=o.clone():t[e][s]=Mt({},o):t[e][s]=o,s++}else t[e]=n[e];return e.length?Mt(t,...e):t}function Ct(t){if(void 0!==t.actions){const e=t.actions.map(t=>{const e=Object.assign({},t),n=Object.assign({},e.props);return delete n.state,delete n.api,delete e.element,e.props=n,e});t.actions=e}return Mt({},t)}var Xt={mergeDeep:Mt,clone:Ct,schedule:Pt};class Yt{constructor(t,e){this.slotInstances={},this.destroyed=!1,this.vido=t,this.props=e,this.destroy=this.destroy.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this),this.getInstances=this.getInstances.bind(this),this.setComponents=this.setComponents.bind(this),this.vido.onDestroy(()=>{this.destroy()})}setComponents(t){if(t&&!this.destroyed){for(const e in t){const n=t[e];void 0===this.slotInstances[e]&&(this.slotInstances[e]=[]);for(const t of this.slotInstances[e])t.destroy();this.slotInstances[e].length=0;for(const t of n)this.slotInstances[e].push(this.vido.createComponent(t,this.props))}this.vido.update()}}destroy(){if(!this.destroyed){for(const t in this.slotInstances){for(const e of this.slotInstances[t])e.destroy();this.slotInstances[t].length=0}this.destroyed=!0}}change(t,e){if(!this.destroyed)for(const n in this.slotInstances){const s=this.slotInstances[n];for(const n of s)n.change(t,e)}}getInstances(t){return this.destroyed?[]:void 0===t?this.slotInstances:this.slotInstances[t]}html(t,e){if(this.destroyed)return;if(!this.slotInstances[t]||0===this.slotInstances[t].length)return e;let n=e;for(const e of this.slotInstances[t])n=e.html(n);return n}getProps(){return this.props}isDestroyed(){return this.destroyed}}function Tt(n,s){let o=0;const i=new Map;let r,a,l=new Map,c=0;const h=[],d=Promise.resolve(),p={},u=function(t){return class extends e{constructor(t){super(),this.actions=[],this.instance=t}set(t,e){return this.actions=t,this.props=e,this}body(e){const n=e.committer.element;for(const e of this.actions)if(void 0!==e){let s;if(t.has(this.instance))for(const o of t.get(this.instance))if(o.componentAction.create===e&&o.element===n){s=o;break}if(s)s.props=this.props;else{void 0!==n.vido&&delete n.vido;const s={create:e,update(){},destroy(){}},o={instance:this.instance,componentAction:s,element:n,props:this.props};let i=[];t.has(this.instance)&&(i=t.get(this.instance)),i.push(o),t.set(this.instance,i)}}}}}(l);class m{constructor(t){this.instance=t}create(t,e){const n=new u(this.instance);return n.set(t,e),n}}const v=function(t,e,n){return class{constructor(t,e,n={}){this.destroyed=!1,this.instance=t,this.name=e.name,this.vidoInstance=e,this.props=n,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this)}destroy(){this.destroyed||(this.vidoInstance.debug&&(console.groupCollapsed(`destroying component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.destroyComponent(this.instance,this.vidoInstance),this.destroyed=!0)}update(s){return this.vidoInstance.debug&&(console.groupCollapsed(`updating component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.updateTemplate(s)}change(s,o={}){this.vidoInstance.debug&&(console.groupCollapsed(`changing component ${this.instance}`),console.log(n({props:this.props,newProps:s,components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd());const i=t.get(this.instance);i&&i.change(s,o)}html(e={}){const n=t.get(this.instance);if(n&&!n.destroyed)return n.update(e,this.vidoInstance)}_getComponents(){return t}_getActions(){return e}}}(i,l,Ct),f=function(t,e,n){return class{constructor(t,e,n){this.destroyed=!1,this.instance=t,this.vidoInstance=e,this.renderFunction=n,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this)}destroy(){if(!this.destroyed){this.vidoInstance.debug&&(console.groupCollapsed(`component destroy method fired ${this.instance}`),console.log(n({props:this.vidoInstance.props,components:t.keys(),destroyable:this.vidoInstance.destroyable,actionsByInstance:e})),console.trace(),console.groupEnd()),this.content&&"function"==typeof this.content.destroy&&this.content.destroy();for(const t of this.vidoInstance.destroyable)t();this.vidoInstance.onChangeFunctions.length=0,this.vidoInstance.destroyable.length=0,this.vidoInstance.destroyed=!0,this.destroyed=!0,this.vidoInstance.update()}}update(s={}){return this.vidoInstance.debug&&(console.groupCollapsed(`component update method fired ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.renderFunction(s)}change(s,o={leave:!1}){const i=s;this.vidoInstance.debug&&(console.groupCollapsed(`component change method fired ${this.instance}`),console.log(n({props:i,components:t.keys(),onChangeFunctions:this.vidoInstance.onChangeFunctions,changedProps:s,actionsByInstance:e})),console.trace(),console.groupEnd());for(const t of this.vidoInstance.onChangeFunctions)t(s,o);const r=e.get(this.instance);if(r)for(const t of r)t.props=s}}}(i,l,Ct);class g{constructor(e="",o=""){this.instance="",this.name="",this.destroyable=[],this.destroyed=!1,this.onChangeFunctions=[],this.debug=!1,this.state=n,this.api=s,this.lastProps={},this.html=B,this.svg=F,this.directive=t,this.asyncAppend=H,this.asyncReplace=z,this.cache=G,this.classMap=K,this.guard=tt,this.live=ft,this.ifDefined=nt,this.repeat=ht,this.unsafeHTML=ut,this.until=vt,this.schedule=Pt,this.getElement=function(t){return function(e){return t(()=>t=>{e(t.committer.element)})()}}(t),this.actionsByInstance=()=>{},this.StyleMap=xt,this.Detach=bt,this.PointerAction=It,this.Action=_t,this.Slots=Yt,this._components=i,this._actions=l,this.instance=e,this.reuseComponents=this.reuseComponents.bind(this),this.onDestroy=this.onDestroy.bind(this),this.onChange=this.onChange.bind(this),this.update=this.update.bind(this),this.destroyComponent=this.destroyComponent.bind(this);for(const t in p)this[t]=p[t].bind(this);this.name=o,this.Actions=new m(e)}static addMethod(t,e){p[t]=e}onDestroy(t){this.destroyable.push(t)}onChange(t){this.onChangeFunctions.push(t)}update(t){return this.updateTemplate(t)}reuseComponents(t,e,n,s,o=!0,i=!1){const r=[],a=t.length,l=e.length;let c=!1;!o||void 0!==e&&0!==e.length||(c=!0);let h=0;if(a<l){let o=l-a;for(;o;){const i=e[l-o],a=this.createComponent(s,n(i));t.push(a),r.push(a),o--}}else if(a>l){let e=a-l;for(o&&(c=!0,h=a-e);e;){const n=a-e;o||(r.push(t[n]),t[n].destroy()),e--}o||(t.length=l)}let d=0;i&&console.log("modified components",r),i&&console.log("current components",t),i&&console.log("data array",e);for(const s of t){const t=e[d];i&&console.log(`reuse components data at '${d}'`,t),s&&!r.includes(s)&&(i&&console.log("getProps fn result",n(t)),s.change(n(t),{leave:c&&d>=h})),d++}}createComponent(t,e={}){const n=t.name+":"+o++;let s;s=new g(n,t.name);const r=new v(n,s,e),a=new f(n,s,t(s,e));return i.set(n,a),i.get(n).change(e),s.debug&&(console.groupCollapsed(`component created ${n}`),console.log(Ct({props:e,components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),r}destroyComponent(t,e){if(e.debug&&(console.groupCollapsed(`destroying component ${t}...`),console.log(Ct({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),l.has(t))for(const e of l.get(t))"function"==typeof e.componentAction.destroy&&e.componentAction.destroy(e.element,e.props);l.delete(t);const n=i.get(t);n?(n.destroy(),i.delete(t),e.debug&&(console.groupCollapsed(`component destroyed ${t}`),console.log(Ct({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd())):console.warn(`No component to destroy! [${t}]`)}executeActions(){for(const t of l.values()){for(const e of t)if(void 0===e.element.vido){const t=i.get(e.instance);e.isActive=function(){return t&&!1===t.destroyed};const n=e.componentAction,s=n.create;if(void 0!==s){let t;t=s.prototype&&(s.prototype.isAction||s.prototype.update||s.prototype.destroy)||s.isAction?new s(e.element,e.props):s(e.element,e.props),void 0!==t&&("function"==typeof t?n.destroy=t:("function"==typeof t.update&&(n.update=t.update.bind(t)),"function"==typeof t.destroy&&(n.destroy=t.destroy.bind(t))))}}else e.element.vido=e.props,"function"==typeof e.componentAction.update&&e.isActive()&&e.componentAction.update(e.element,e.props);for(const e of t)e.element.vido=e.props}}updateTemplate(t){return t&&h.push(t),new Promise(t=>{const e=++c,n=this;d.then((function(){if(e===c){c=0,n.render();for(const t of h)t();h.length=0,t(null)}}))})}createApp(t){a=t.element;const e=this.createComponent(t.component,t.props);return r=e.instance,this.render(),e}render(){const t=i.get(r);t?(W(t.update(),a),this.executeActions()):a&&a.remove()}}return new g}Tt.prototype.lithtml=U,Tt.prototype.Action=_t,Tt.prototype.Directive=e,Tt.prototype.schedule=Pt,Tt.prototype.Detach=bt,Tt.prototype.StyleMap=xt,Tt.prototype.PointerAction=It,Tt.prototype.asyncAppend=H,Tt.prototype.asyncReplace=z,Tt.prototype.cache=G,Tt.prototype.classMap=K,Tt.prototype.guard=tt,Tt.prototype.live=ft,Tt.prototype.ifDefined=nt,Tt.prototype.repeat=ht,Tt.prototype.unsafeHTML=ut,Tt.prototype.until=vt,Tt.prototype.Slots=Yt;export default Tt;export{_t as Action,bt as Detach,e as Directive,It as PointerAction,Yt as Slots,xt as StyleMap,H as asyncAppend,z as asyncReplace,G as cache,K as classMap,tt as guard,Xt as helpers,nt as ifDefined,U as lithtml,ht as repeat,Pt as schedule,ut as unsafeHTML,vt as until};
 //# sourceMappingURL=vido.esm.min.js.map

dist/vido.js

@@ -176,3 +176,3 @@ import { render, html, directive, svg, Directive } from 'lit-html-optimised';
             let vidoInstance;
-            vidoInstance = new VidoInstance(instance, name);
+            vidoInstance = new VidoInstance(instance, component.name);
             const publicMethods = new PublicComponentMethods(instance, vidoInstance, props);
@@ -280,3 +280,3 @@ const internalMethods = new InternalComponentMethods(instance, vidoInstance, component(vidoInstance, props));
                         afterUpdateCallbacks.length = 0;
-                        resolve();
+                        resolve(null);
                     }
@@ -283,0 +283,0 @@ }

dist/vido.umd.min.js

@@ -173,3 +173,3 @@ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Vido=e()}(this,(function(){"use strict";
      */
-class Z{constructor(t){this.classes=new Set,this.changed=!1,this.element=t;const e=(t.getAttribute("class")||"").split(/\s+/);for(const t of e)this.classes.add(t)}add(t){this.classes.add(t),this.changed=!0}remove(t){this.classes.delete(t),this.changed=!0}commit(){if(this.changed){let t="";this.classes.forEach(e=>t+=e+" "),this.element.setAttribute("class",t)}}}const J=new WeakMap,K=t(t=>e=>{if(!(e instanceof A)||e instanceof Y||"class"!==e.committer.name||e.committer.parts.length>1)throw new Error("The `classMap` directive must be used in the `class` attribute and must be the only part in the attribute.");const{committer:n}=e,{element:s}=n;let o=J.get(e);void 0===o&&(s.setAttribute("class",n.strings.join(" ")),J.set(e,o=new Set));const i=s.classList||new Z(s);o.forEach(e=>{e in t||(i.remove(e),o.delete(e))});for(const e in t){const n=t[e];n!=o.has(e)&&(n?(i.add(e),o.add(e)):(i.remove(e),o.delete(e)))}"function"==typeof i.commit&&i.commit()}),Q=new WeakMap,tt=t((t,e)=>n=>{const s=Q.get(n);if(Array.isArray(t)){if(Array.isArray(s)&&s.length===t.length&&t.every((t,e)=>t===s[e]))return}else if(s===t&&(void 0!==t||Q.has(n)))return;n.setValue(e()),Q.set(n,Array.isArray(t)?Array.from(t):t)}),et=new WeakMap,nt=t(t=>e=>{const n=et.get(e);if(void 0===t&&e instanceof A){if(void 0!==n||!et.has(e)){const t=e.committer.name;e.committer.element.removeAttribute(t)}}else t!==n&&e.setValue(t);et.set(e,t)}),st=(t,e)=>{const n=t.startNode.parentNode,s=void 0===e?t.endNode:e.startNode,o=n.insertBefore(f(),s);n.insertBefore(f(),s);const i=new M(t.options);return i.insertAfterNode(o),i},ot=(t,e)=>(t.setValue(e),t.commit(),t),it=(t,e,n)=>{const s=t.startNode.parentNode,i=n?n.startNode:t.endNode,r=e.endNode.nextSibling;r!==i&&o(s,e.startNode,r,i)},rt=t=>{i(t.startNode.parentNode,t.startNode,t.endNode.nextSibling)},at=(t,e,n)=>{const s=new Map;for(let o=e;o<=n;o++)s.set(t[o],o);return s},lt=new WeakMap,ct=new WeakMap,ht=t((t,e,n)=>{let s;return void 0===n?n=e:void 0!==e&&(s=e),e=>{if(!(e instanceof M))throw new Error("repeat can only be used in text bindings");const o=lt.get(e)||[],i=ct.get(e)||[],r=[],a=[],l=[];let c,h,d=0;for(const e of t)l[d]=s?s(e,d):d,a[d]=n(e,d),d++;let p=0,u=o.length-1,m=0,f=a.length-1;for(;p<=u&&m<=f;)if(null===o[p])p++;else if(null===o[u])u--;else if(i[p]===l[m])r[m]=ot(o[p],a[m]),p++,m++;else if(i[u]===l[f])r[f]=ot(o[u],a[f]),u--,f--;else if(i[p]===l[f])r[f]=ot(o[p],a[f]),it(e,o[p],r[f+1]),p++,f--;else if(i[u]===l[m])r[m]=ot(o[u],a[m]),it(e,o[u],o[p]),u--,m++;else if(void 0===c&&(c=at(l,m,f),h=at(i,p,u)),c.has(i[p]))if(c.has(i[u])){const t=h.get(l[m]),n=void 0!==t?o[t]:null;if(null===n){const t=st(e,o[p]);ot(t,a[m]),r[m]=t}else r[m]=ot(n,a[m]),it(e,n,o[p]),o[t]=null;m++}else rt(o[u]),u--;else rt(o[p]),p++;for(;m<=f;){const t=st(e,r[f+1]);ot(t,a[m]),r[m++]=t}for(;p<=u;){const t=o[p++];null!==t&&rt(t)}lt.set(e,r),ct.set(e,l)}}),dt=new WeakMap,pt=document.createElement("template"),ut=t(t=>e=>{if(!(e instanceof M))throw new Error("unsafeHTML can only be used in text bindings");const n=dt.get(e);if(void 0!==n&&N(t)&&t===n.value&&e.value===n.fragment)return;const s=pt.cloneNode();s.innerHTML=t;const o=document.importNode(s.content,!0);e.setValue(o),dt.set(e,{value:t,fragment:o})}),mt=new WeakMap,ft=t((...t)=>e=>{let n=mt.get(e);void 0===n&&(n={lastRenderedIndex:2147483647,values:[]},mt.set(e,n));const s=n.values;let o=s.length;n.values=t;for(let i=0;i<t.length&&!(i>n.lastRenderedIndex);i++){const r=t[i];if(N(r)||"function"!=typeof r.then){e.setValue(r),n.lastRenderedIndex=i;break}i<o&&r===s[i]||(n.lastRenderedIndex=2147483647,o=0,Promise.resolve(r).then(t=>{const s=n.values.indexOf(r);s>-1&&s<n.lastRenderedIndex&&(n.lastRenderedIndex=s,e.setValue(t),e.commit())}))}}),vt=t(t=>e=>{let n;if(e instanceof S||e instanceof M)throw new Error("The `live` directive is not allowed on text or event bindings");if(e instanceof C)gt(e.strings),n=e.element.hasAttribute(e.name),e.value=n;else{const{element:s,name:o,strings:i}=e.committer;if(gt(i),e instanceof Y){if(n=s[o],n===t)return}else e instanceof A&&(n=s.getAttribute(o));if(n===String(t))return}e.setValue(t)}),gt=t=>{if(2!==t.length||""!==t[0]||""!==t[1])throw new Error("`live` bindings can only contain a single expression")},yt=new WeakMap;class bt extends e{constructor(t){super(),this.ifFn=t}body(t){const e=this.ifFn(),n=t.committer.element;if(e)yt.has(t)||yt.set(t,{element:n,nextSibling:n.nextSibling,previousSibling:n.previousSibling,parent:n.parentNode}),n.remove();else{const e=yt.get(t);e&&(e.nextSibling&&e.nextSibling.parentNode?e.nextSibling.parentNode.insertBefore(e.element,e.nextSibling):e.previousSibling&&e.previousSibling.parentNode?e.previousSibling.parentNode.appendChild(e.element):e.parent&&e.parent.appendChild(e.element),yt.delete(t))}}}class xt extends e{constructor(t,e=!1){super(),this.toRemove=[],this.toUpdate=[],this.debug=!1,this.previous={},this.style=t,this.detach=e}setStyle(t){this.style=t}setDebug(t=!0){this.debug=t}setDetach(t){this.detach=t}body(t){this.toRemove.length=0,this.toUpdate.length=0;const e=t.committer.element,n=e.style;let s=this.previous;if(e.attributes.getNamedItem("style")){const t=e.attributes.getNamedItem("style").value.split(";").map(t=>t.substr(0,t.indexOf(":")).trim()).filter(t=>!!t);for(const e of t)void 0===this.style[e]&&(this.toRemove.includes(e)||this.toRemove.push(e))}for(const t in s)this.style.hasOwnProperty(t)&&void 0===this.style[t]&&(this.toRemove.includes(t)||this.toRemove.push(t));for(const t in this.style){if(!this.style.hasOwnProperty(t))continue;const e=this.style[t],n=s[t];void 0!==n&&n===e||this.toUpdate.push(t)}if(this.debug&&(console.log("[StyleMap] to remove",[...this.toRemove]),console.log("[StyleMap] to update",[...this.toUpdate])),this.toRemove.length||this.toUpdate.length){let t,s;this.detach&&(t=e.parentNode,t&&(s=e.nextSibling,e.remove()));for(const t of this.toRemove)n.removeProperty(t),n[t]&&delete n[t];for(const t of this.toUpdate){const e=this.style[t];t.includes("-")?n.setProperty(t,e):n[t]=e}this.detach&&t&&t.insertBefore(e,s),this.previous=Object.assign({},this.style)}}}class _t{constructor(){this.isAction=!0}}_t.prototype.isAction=!0;const wt={element:document.createTextNode(""),axis:"xy",threshold:10,onDown(){},onMove(){},onUp(){},onWheel(){}},Nt="undefined"!=typeof PointerEvent;let Et=0;class It extends _t{constructor(t,e){super(),this.moving="",this.initialX=0,this.initialY=0,this.lastY=0,this.lastX=0,this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onWheel=this.onWheel.bind(this),this.element=t,this.id=++Et,this.options=Object.assign(Object.assign({},wt),e.pointerOptions),Nt?(t.addEventListener("pointerdown",this.onPointerDown),document.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp)):(t.addEventListener("touchstart",this.onPointerDown),document.addEventListener("touchmove",this.onPointerMove,{passive:!1}),document.addEventListener("touchend",this.onPointerUp),document.addEventListener("touchcancel",this.onPointerUp),t.addEventListener("mousedown",this.onPointerDown),document.addEventListener("mousemove",this.onPointerMove,{passive:!1}),document.addEventListener("mouseup",this.onPointerUp))}normalizeMouseWheelEvent(t){let e=t.deltaX||0,n=t.deltaY||0,s=t.deltaZ||0;const o=t.deltaMode,i=parseInt(getComputedStyle(t.target).getPropertyValue("line-height"));let r=1;switch(o){case 1:r=i;break;case 2:r=window.height}return e*=r,n*=r,s*=r,{x:e,y:n,z:s,event:t}}onWheel(t){const e=this.normalizeMouseWheelEvent(t);this.options.onWheel(e)}normalizePointerEvent(t){let e={x:0,y:0,pageX:0,pageY:0,clientX:0,clientY:0,screenX:0,screenY:0,event:t};switch(t.type){case"wheel":const n=this.normalizeMouseWheelEvent(t);e.x=n.x,e.y=n.y,e.pageX=e.x,e.pageY=e.y,e.screenX=e.x,e.screenY=e.y,e.clientX=e.x,e.clientY=e.y;break;case"touchstart":case"touchmove":case"touchend":case"touchcancel":e.x=t.changedTouches[0].screenX,e.y=t.changedTouches[0].screenY,e.pageX=t.changedTouches[0].pageX,e.pageY=t.changedTouches[0].pageY,e.screenX=t.changedTouches[0].screenX,e.screenY=t.changedTouches[0].screenY,e.clientX=t.changedTouches[0].clientX,e.clientY=t.changedTouches[0].clientY;break;default:e.x=t.x,e.y=t.y,e.pageX=t.pageX,e.pageY=t.pageY,e.screenX=t.screenX,e.screenY=t.screenY,e.clientX=t.clientX,e.clientY=t.clientY}return e}onPointerDown(t){if("mousedown"===t.type&&0!==t.button)return;this.moving="xy";const e=this.normalizePointerEvent(t);this.lastX=e.x,this.lastY=e.y,this.initialX=e.x,this.initialY=e.y,this.options.onDown(e)}handleX(t){let e=t.x-this.lastX;return this.lastY=t.y,this.lastX=t.x,e}handleY(t){let e=t.y-this.lastY;return this.lastY=t.y,this.lastX=t.x,e}onPointerMove(t){if(""===this.moving||"mousemove"===t.type&&0!==t.button)return;const e=this.normalizePointerEvent(t);if("x|y"===this.options.axis){let n=0,s=0;("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",n=this.handleX(e)),("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("xy"===this.options.axis){let n=0,s=0;Math.abs(e.x-this.initialX)>this.options.threshold&&(n=this.handleX(e)),Math.abs(e.y-this.initialY)>this.options.threshold&&(s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("x"===this.options.axis)("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",this.options.onMove({movementX:this.handleX(e),movementY:0,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}));else if("y"===this.options.axis){let n=0;("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",n=this.handleY(e)),this.options.onMove({movementX:0,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}}onPointerUp(t){this.moving="";const e=this.normalizePointerEvent(t);this.options.onUp({movementX:0,movementY:0,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}),this.lastY=0,this.lastX=0}destroy(t){Nt?(t.removeEventListener("pointerdown",this.onPointerDown),document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp)):(t.removeEventListener("mousedown",this.onPointerDown),document.removeEventListener("mousemove",this.onPointerMove),document.removeEventListener("mouseup",this.onPointerUp),t.removeEventListener("touchstart",this.onPointerDown),document.removeEventListener("touchmove",this.onPointerMove),document.removeEventListener("touchend",this.onPointerUp),document.removeEventListener("touchcancel",this.onPointerUp))}}function Pt(t){let e=0;return function(n){e||(e=requestAnimationFrame((function(){e=0,t.apply(void 0,[n])})))}}function At(t){return t&&"object"==typeof t&&null!==t&&t.constructor&&"Object"===t.constructor.name}function Mt(t){if(void 0!==t.actions){const e=t.actions.map(t=>{const e=Object.assign({},t),n=Object.assign({},e.props);return delete n.state,delete n.api,delete e.element,e.props=n,e});t.actions=e}return function t(e,...n){const s=n.shift();if(At(e)&&At(s))for(const n in s)if(At(s[n]))"function"==typeof s[n].clone?e[n]=s[n].clone():(void 0===e[n]&&(e[n]={}),e[n]=t(e[n],s[n]));else if(Array.isArray(s[n])){e[n]=new Array(s[n].length);let o=0;for(let i of s[n])At(i)?"function"==typeof i.clone?e[n][o]=i.clone():e[n][o]=t({},i):e[n][o]=i,o++}else e[n]=s[n];return n.length?t(e,...n):e}({},t)}class Ct{constructor(t,e){this.slotInstances={},this.destroyed=!1,this.vido=t,this.props=e,this.destroy=this.destroy.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this),this.getInstances=this.getInstances.bind(this),this.setComponents=this.setComponents.bind(this),this.vido.onDestroy(()=>{this.destroy()})}setComponents(t){if(t&&!this.destroyed){for(const e in t){const n=t[e];void 0===this.slotInstances[e]&&(this.slotInstances[e]=[]);for(const t of this.slotInstances[e])t.destroy();this.slotInstances[e].length=0;for(const t of n)this.slotInstances[e].push(this.vido.createComponent(t,this.props))}this.vido.update()}}destroy(){if(!this.destroyed){for(const t in this.slotInstances){for(const e of this.slotInstances[t])e.destroy();this.slotInstances[t].length=0}this.destroyed=!0}}change(t,e){if(!this.destroyed)for(const n in this.slotInstances){const s=this.slotInstances[n];for(const n of s)n.change(t,e)}}getInstances(t){return this.destroyed?[]:void 0===t?this.slotInstances:this.slotInstances[t]}html(t,e){if(this.destroyed)return;if(!this.slotInstances[t]||0===this.slotInstances[t].length)return e;let n=e;for(const e of this.slotInstances[t])n=e.html(n);return n}getProps(){return this.props}isDestroyed(){return this.destroyed}}function Xt(n,s){let o=0;const i=new Map;let r,a,l=new Map,c=0;const h=[],d=Promise.resolve(),p={},u=function(t){return class extends e{constructor(t){super(),this.actions=[],this.instance=t}set(t,e){return this.actions=t,this.props=e,this}body(e){const n=e.committer.element;for(const e of this.actions)if(void 0!==e){let s;if(t.has(this.instance))for(const o of t.get(this.instance))if(o.componentAction.create===e&&o.element===n){s=o;break}if(s)s.props=this.props;else{void 0!==n.vido&&delete n.vido;const s={create:e,update(){},destroy(){}},o={instance:this.instance,componentAction:s,element:n,props:this.props};let i=[];t.has(this.instance)&&(i=t.get(this.instance)),i.push(o),t.set(this.instance,i)}}}}}(l);class m{constructor(t){this.instance=t}create(t,e){const n=new u(this.instance);return n.set(t,e),n}}const f=function(t,e,n){return class{constructor(t,e,n={}){this.destroyed=!1,this.instance=t,this.name=e.name,this.vidoInstance=e,this.props=n,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this)}destroy(){this.destroyed||(this.vidoInstance.debug&&(console.groupCollapsed(`destroying component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.destroyComponent(this.instance,this.vidoInstance),this.destroyed=!0)}update(s){return this.vidoInstance.debug&&(console.groupCollapsed(`updating component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.updateTemplate(s)}change(s,o={}){this.vidoInstance.debug&&(console.groupCollapsed(`changing component ${this.instance}`),console.log(n({props:this.props,newProps:s,components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd());const i=t.get(this.instance);i&&i.change(s,o)}html(e={}){const n=t.get(this.instance);if(n&&!n.destroyed)return n.update(e,this.vidoInstance)}_getComponents(){return t}_getActions(){return e}}}(i,l,Mt),v=function(t,e,n){return class{constructor(t,e,n){this.destroyed=!1,this.instance=t,this.vidoInstance=e,this.renderFunction=n,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this)}destroy(){if(!this.destroyed){this.vidoInstance.debug&&(console.groupCollapsed(`component destroy method fired ${this.instance}`),console.log(n({props:this.vidoInstance.props,components:t.keys(),destroyable:this.vidoInstance.destroyable,actionsByInstance:e})),console.trace(),console.groupEnd()),this.content&&"function"==typeof this.content.destroy&&this.content.destroy();for(const t of this.vidoInstance.destroyable)t();this.vidoInstance.onChangeFunctions.length=0,this.vidoInstance.destroyable.length=0,this.vidoInstance.destroyed=!0,this.destroyed=!0,this.vidoInstance.update()}}update(s={}){return this.vidoInstance.debug&&(console.groupCollapsed(`component update method fired ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.renderFunction(s)}change(s,o={leave:!1}){const i=s;this.vidoInstance.debug&&(console.groupCollapsed(`component change method fired ${this.instance}`),console.log(n({props:i,components:t.keys(),onChangeFunctions:this.vidoInstance.onChangeFunctions,changedProps:s,actionsByInstance:e})),console.trace(),console.groupEnd());for(const t of this.vidoInstance.onChangeFunctions)t(s,o)}}}(i,l,Mt);class g{constructor(e="",o=""){this.instance="",this.name="",this.destroyable=[],this.destroyed=!1,this.onChangeFunctions=[],this.debug=!1,this.state=n,this.api=s,this.lastProps={},this.html=B,this.svg=F,this.directive=t,this.asyncAppend=H,this.asyncReplace=z,this.cache=G,this.classMap=K,this.guard=tt,this.live=vt,this.ifDefined=nt,this.repeat=ht,this.unsafeHTML=ut,this.until=ft,this.schedule=Pt,this.getElement=function(t){return function(e){return t(()=>t=>{e(t.committer.element)})()}}(t),this.actionsByInstance=()=>{},this.StyleMap=xt,this.Detach=bt,this.PointerAction=It,this.Action=_t,this.Slots=Ct,this._components=i,this._actions=l,this.instance=e,this.reuseComponents=this.reuseComponents.bind(this),this.onDestroy=this.onDestroy.bind(this),this.onChange=this.onChange.bind(this),this.update=this.update.bind(this),this.destroyComponent=this.destroyComponent.bind(this);for(const t in p)this[t]=p[t].bind(this);this.name=o,this.Actions=new m(e)}static addMethod(t,e){p[t]=e}onDestroy(t){this.destroyable.push(t)}onChange(t){this.onChangeFunctions.push(t)}update(t){return this.updateTemplate(t)}reuseComponents(t,e,n,s,o=!0,i=!1){const r=[],a=t.length,l=e.length;let c=!1;!o||void 0!==e&&0!==e.length||(c=!0);let h=0;if(a<l){let o=l-a;for(;o;){const i=e[l-o],a=this.createComponent(s,n(i));t.push(a),r.push(a),o--}}else if(a>l){let e=a-l;for(o&&(c=!0,h=a-e);e;){const n=a-e;o||(r.push(t[n]),t[n].destroy()),e--}o||(t.length=l)}let d=0;i&&console.log("modified components",r),i&&console.log("current components",t),i&&console.log("data array",e);for(const s of t){const t=e[d];i&&console.log(`reuse components data at '${d}'`,t),s&&!r.includes(s)&&(i&&console.log("getProps fn result",n(t)),s.change(n(t),{leave:c&&d>=h})),d++}}createComponent(t,e={}){const n=t.name+":"+o++;let s;s=new g(n,name);const r=new f(n,s,e),a=new v(n,s,t(s,e));return i.set(n,a),i.get(n).change(e),s.debug&&(console.groupCollapsed(`component created ${n}`),console.log(Mt({props:e,components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),r}destroyComponent(t,e){if(e.debug&&(console.groupCollapsed(`destroying component ${t}...`),console.log(Mt({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),l.has(t))for(const e of l.get(t))"function"==typeof e.componentAction.destroy&&e.componentAction.destroy(e.element,e.props);l.delete(t);const n=i.get(t);n?(n.destroy(),i.delete(t),e.debug&&(console.groupCollapsed(`component destroyed ${t}`),console.log(Mt({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd())):console.warn(`No component to destroy! [${t}]`)}executeActions(){for(const t of l.values()){for(const e of t)if(void 0===e.element.vido){const t=i.get(e.instance);e.isActive=function(){return t&&!1===t.destroyed};const n=e.componentAction,s=n.create;if(void 0!==s){let t;t=s.prototype&&(s.prototype.isAction||s.prototype.update||s.prototype.destroy)||s.isAction?new s(e.element,e.props):s(e.element,e.props),void 0!==t&&("function"==typeof t?n.destroy=t:("function"==typeof t.update&&(n.update=t.update.bind(t)),"function"==typeof t.destroy&&(n.destroy=t.destroy.bind(t))))}}else e.element.vido=e.props,"function"==typeof e.componentAction.update&&e.isActive()&&e.componentAction.update(e.element,e.props);for(const e of t)e.element.vido=e.props}}updateTemplate(t){return t&&h.push(t),new Promise(t=>{const e=++c,n=this;d.then((function(){if(e===c){c=0,n.render();for(const t of h)t();h.length=0,t()}}))})}createApp(t){a=t.element;const e=this.createComponent(t.component,t.props);return r=e.instance,this.render(),e}render(){const t=i.get(r);t?(W(t.update(),a),this.executeActions()):a&&a.remove()}}return new g}return Xt.prototype.lithtml=U,Xt.prototype.Action=_t,Xt.prototype.Directive=e,Xt.prototype.schedule=Pt,Xt.prototype.Detach=bt,Xt.prototype.StyleMap=xt,Xt.prototype.PointerAction=It,Xt.prototype.asyncAppend=H,Xt.prototype.asyncReplace=z,Xt.prototype.cache=G,Xt.prototype.classMap=K,Xt.prototype.guard=tt,Xt.prototype.live=vt,Xt.prototype.ifDefined=nt,Xt.prototype.repeat=ht,Xt.prototype.unsafeHTML=ut,Xt.prototype.until=ft,Xt.prototype.Slots=Ct,Xt}));
+class Z{constructor(t){this.classes=new Set,this.changed=!1,this.element=t;const e=(t.getAttribute("class")||"").split(/\s+/);for(const t of e)this.classes.add(t)}add(t){this.classes.add(t),this.changed=!0}remove(t){this.classes.delete(t),this.changed=!0}commit(){if(this.changed){let t="";this.classes.forEach(e=>t+=e+" "),this.element.setAttribute("class",t)}}}const J=new WeakMap,K=t(t=>e=>{if(!(e instanceof A)||e instanceof Y||"class"!==e.committer.name||e.committer.parts.length>1)throw new Error("The `classMap` directive must be used in the `class` attribute and must be the only part in the attribute.");const{committer:n}=e,{element:s}=n;let o=J.get(e);void 0===o&&(s.setAttribute("class",n.strings.join(" ")),J.set(e,o=new Set));const i=s.classList||new Z(s);o.forEach(e=>{e in t||(i.remove(e),o.delete(e))});for(const e in t){const n=t[e];n!=o.has(e)&&(n?(i.add(e),o.add(e)):(i.remove(e),o.delete(e)))}"function"==typeof i.commit&&i.commit()}),Q=new WeakMap,tt=t((t,e)=>n=>{const s=Q.get(n);if(Array.isArray(t)){if(Array.isArray(s)&&s.length===t.length&&t.every((t,e)=>t===s[e]))return}else if(s===t&&(void 0!==t||Q.has(n)))return;n.setValue(e()),Q.set(n,Array.isArray(t)?Array.from(t):t)}),et=new WeakMap,nt=t(t=>e=>{const n=et.get(e);if(void 0===t&&e instanceof A){if(void 0!==n||!et.has(e)){const t=e.committer.name;e.committer.element.removeAttribute(t)}}else t!==n&&e.setValue(t);et.set(e,t)}),st=(t,e)=>{const n=t.startNode.parentNode,s=void 0===e?t.endNode:e.startNode,o=n.insertBefore(f(),s);n.insertBefore(f(),s);const i=new M(t.options);return i.insertAfterNode(o),i},ot=(t,e)=>(t.setValue(e),t.commit(),t),it=(t,e,n)=>{const s=t.startNode.parentNode,i=n?n.startNode:t.endNode,r=e.endNode.nextSibling;r!==i&&o(s,e.startNode,r,i)},rt=t=>{i(t.startNode.parentNode,t.startNode,t.endNode.nextSibling)},at=(t,e,n)=>{const s=new Map;for(let o=e;o<=n;o++)s.set(t[o],o);return s},lt=new WeakMap,ct=new WeakMap,ht=t((t,e,n)=>{let s;return void 0===n?n=e:void 0!==e&&(s=e),e=>{if(!(e instanceof M))throw new Error("repeat can only be used in text bindings");const o=lt.get(e)||[],i=ct.get(e)||[],r=[],a=[],l=[];let c,h,d=0;for(const e of t)l[d]=s?s(e,d):d,a[d]=n(e,d),d++;let p=0,u=o.length-1,m=0,f=a.length-1;for(;p<=u&&m<=f;)if(null===o[p])p++;else if(null===o[u])u--;else if(i[p]===l[m])r[m]=ot(o[p],a[m]),p++,m++;else if(i[u]===l[f])r[f]=ot(o[u],a[f]),u--,f--;else if(i[p]===l[f])r[f]=ot(o[p],a[f]),it(e,o[p],r[f+1]),p++,f--;else if(i[u]===l[m])r[m]=ot(o[u],a[m]),it(e,o[u],o[p]),u--,m++;else if(void 0===c&&(c=at(l,m,f),h=at(i,p,u)),c.has(i[p]))if(c.has(i[u])){const t=h.get(l[m]),n=void 0!==t?o[t]:null;if(null===n){const t=st(e,o[p]);ot(t,a[m]),r[m]=t}else r[m]=ot(n,a[m]),it(e,n,o[p]),o[t]=null;m++}else rt(o[u]),u--;else rt(o[p]),p++;for(;m<=f;){const t=st(e,r[f+1]);ot(t,a[m]),r[m++]=t}for(;p<=u;){const t=o[p++];null!==t&&rt(t)}lt.set(e,r),ct.set(e,l)}}),dt=new WeakMap,pt=document.createElement("template"),ut=t(t=>e=>{if(!(e instanceof M))throw new Error("unsafeHTML can only be used in text bindings");const n=dt.get(e);if(void 0!==n&&N(t)&&t===n.value&&e.value===n.fragment)return;const s=pt.cloneNode();s.innerHTML=t;const o=document.importNode(s.content,!0);e.setValue(o),dt.set(e,{value:t,fragment:o})}),mt=new WeakMap,ft=t((...t)=>e=>{let n=mt.get(e);void 0===n&&(n={lastRenderedIndex:2147483647,values:[]},mt.set(e,n));const s=n.values;let o=s.length;n.values=t;for(let i=0;i<t.length&&!(i>n.lastRenderedIndex);i++){const r=t[i];if(N(r)||"function"!=typeof r.then){e.setValue(r),n.lastRenderedIndex=i;break}i<o&&r===s[i]||(n.lastRenderedIndex=2147483647,o=0,Promise.resolve(r).then(t=>{const s=n.values.indexOf(r);s>-1&&s<n.lastRenderedIndex&&(n.lastRenderedIndex=s,e.setValue(t),e.commit())}))}}),vt=t(t=>e=>{let n;if(e instanceof S||e instanceof M)throw new Error("The `live` directive is not allowed on text or event bindings");if(e instanceof C)gt(e.strings),n=e.element.hasAttribute(e.name),e.value=n;else{const{element:s,name:o,strings:i}=e.committer;if(gt(i),e instanceof Y){if(n=s[o],n===t)return}else e instanceof A&&(n=s.getAttribute(o));if(n===String(t))return}e.setValue(t)}),gt=t=>{if(2!==t.length||""!==t[0]||""!==t[1])throw new Error("`live` bindings can only contain a single expression")},yt=new WeakMap;class bt extends e{constructor(t){super(),this.ifFn=t}body(t){const e=this.ifFn(),n=t.committer.element;if(e)yt.has(t)||yt.set(t,{element:n,nextSibling:n.nextSibling,previousSibling:n.previousSibling,parent:n.parentNode}),n.remove();else{const e=yt.get(t);e&&(e.nextSibling&&e.nextSibling.parentNode?e.nextSibling.parentNode.insertBefore(e.element,e.nextSibling):e.previousSibling&&e.previousSibling.parentNode?e.previousSibling.parentNode.appendChild(e.element):e.parent&&e.parent.appendChild(e.element),yt.delete(t))}}}class xt extends e{constructor(t,e=!1){super(),this.toRemove=[],this.toUpdate=[],this.debug=!1,this.previous={},this.style=t,this.detach=e}setStyle(t){this.style=t}setDebug(t=!0){this.debug=t}setDetach(t){this.detach=t}body(t){this.toRemove.length=0,this.toUpdate.length=0;const e=t.committer.element,n=e.style;let s=this.previous;if(e.attributes.getNamedItem("style")){const t=e.attributes.getNamedItem("style").value.split(";").map(t=>t.substr(0,t.indexOf(":")).trim()).filter(t=>!!t);for(const e of t)void 0===this.style[e]&&(this.toRemove.includes(e)||this.toRemove.push(e))}for(const t in s)this.style.hasOwnProperty(t)&&void 0===this.style[t]&&(this.toRemove.includes(t)||this.toRemove.push(t));for(const t in this.style){if(!this.style.hasOwnProperty(t))continue;const e=this.style[t],n=s[t];void 0!==n&&n===e||this.toUpdate.push(t)}if(this.debug&&(console.log("[StyleMap] to remove",[...this.toRemove]),console.log("[StyleMap] to update",[...this.toUpdate])),this.toRemove.length||this.toUpdate.length){let t,s;this.detach&&(t=e.parentNode,t&&(s=e.nextSibling,e.remove()));for(const t of this.toRemove)n.removeProperty(t),n[t]&&delete n[t];for(const t of this.toUpdate){const e=this.style[t];t.includes("-")?n.setProperty(t,e):n[t]=e}this.detach&&t&&t.insertBefore(e,s),this.previous=Object.assign({},this.style)}}}class _t{constructor(){this.isAction=!0}}_t.prototype.isAction=!0;const wt={element:document.createTextNode(""),axis:"xy",threshold:10,onDown(){},onMove(){},onUp(){},onWheel(){}},Nt="undefined"!=typeof PointerEvent;let Et=0;class It extends _t{constructor(t,e){super(),this.moving="",this.initialX=0,this.initialY=0,this.lastY=0,this.lastX=0,this.onPointerDown=this.onPointerDown.bind(this),this.onPointerMove=this.onPointerMove.bind(this),this.onPointerUp=this.onPointerUp.bind(this),this.onWheel=this.onWheel.bind(this),this.element=t,this.id=++Et,this.options=Object.assign(Object.assign({},wt),e.pointerOptions),Nt?(t.addEventListener("pointerdown",this.onPointerDown),document.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp)):(t.addEventListener("touchstart",this.onPointerDown),document.addEventListener("touchmove",this.onPointerMove,{passive:!1}),document.addEventListener("touchend",this.onPointerUp),document.addEventListener("touchcancel",this.onPointerUp),t.addEventListener("mousedown",this.onPointerDown),document.addEventListener("mousemove",this.onPointerMove,{passive:!1}),document.addEventListener("mouseup",this.onPointerUp))}normalizeMouseWheelEvent(t){let e=t.deltaX||0,n=t.deltaY||0,s=t.deltaZ||0;const o=t.deltaMode,i=parseInt(getComputedStyle(t.target).getPropertyValue("line-height"));let r=1;switch(o){case 1:r=i;break;case 2:r=window.height}return e*=r,n*=r,s*=r,{x:e,y:n,z:s,event:t}}onWheel(t){const e=this.normalizeMouseWheelEvent(t);this.options.onWheel(e)}normalizePointerEvent(t){let e={x:0,y:0,pageX:0,pageY:0,clientX:0,clientY:0,screenX:0,screenY:0,event:t};switch(t.type){case"wheel":const n=this.normalizeMouseWheelEvent(t);e.x=n.x,e.y=n.y,e.pageX=e.x,e.pageY=e.y,e.screenX=e.x,e.screenY=e.y,e.clientX=e.x,e.clientY=e.y;break;case"touchstart":case"touchmove":case"touchend":case"touchcancel":e.x=t.changedTouches[0].screenX,e.y=t.changedTouches[0].screenY,e.pageX=t.changedTouches[0].pageX,e.pageY=t.changedTouches[0].pageY,e.screenX=t.changedTouches[0].screenX,e.screenY=t.changedTouches[0].screenY,e.clientX=t.changedTouches[0].clientX,e.clientY=t.changedTouches[0].clientY;break;default:e.x=t.x,e.y=t.y,e.pageX=t.pageX,e.pageY=t.pageY,e.screenX=t.screenX,e.screenY=t.screenY,e.clientX=t.clientX,e.clientY=t.clientY}return e}onPointerDown(t){if("mousedown"===t.type&&0!==t.button)return;this.moving="xy";const e=this.normalizePointerEvent(t);this.lastX=e.x,this.lastY=e.y,this.initialX=e.x,this.initialY=e.y,this.options.onDown(e)}handleX(t){let e=t.x-this.lastX;return this.lastY=t.y,this.lastX=t.x,e}handleY(t){let e=t.y-this.lastY;return this.lastY=t.y,this.lastX=t.x,e}onPointerMove(t){if(""===this.moving||"mousemove"===t.type&&0!==t.button)return;const e=this.normalizePointerEvent(t);if("x|y"===this.options.axis){let n=0,s=0;("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",n=this.handleX(e)),("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("xy"===this.options.axis){let n=0,s=0;Math.abs(e.x-this.initialX)>this.options.threshold&&(n=this.handleX(e)),Math.abs(e.y-this.initialY)>this.options.threshold&&(s=this.handleY(e)),this.options.onMove({movementX:n,movementY:s,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}else if("x"===this.options.axis)("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",this.options.onMove({movementX:this.handleX(e),movementY:0,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}));else if("y"===this.options.axis){let n=0;("y"===this.moving||"xy"===this.moving&&Math.abs(e.y-this.initialY)>this.options.threshold)&&(this.moving="y",n=this.handleY(e)),this.options.onMove({movementX:0,movementY:n,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t})}}onPointerUp(t){this.moving="";const e=this.normalizePointerEvent(t);this.options.onUp({movementX:0,movementY:0,x:e.x,y:e.y,initialX:this.initialX,initialY:this.initialY,lastX:this.lastX,lastY:this.lastY,event:t}),this.lastY=0,this.lastX=0}destroy(t){Nt?(t.removeEventListener("pointerdown",this.onPointerDown),document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp)):(t.removeEventListener("mousedown",this.onPointerDown),document.removeEventListener("mousemove",this.onPointerMove),document.removeEventListener("mouseup",this.onPointerUp),t.removeEventListener("touchstart",this.onPointerDown),document.removeEventListener("touchmove",this.onPointerMove),document.removeEventListener("touchend",this.onPointerUp),document.removeEventListener("touchcancel",this.onPointerUp))}}function Pt(t){let e=0;return function(n){e||(e=requestAnimationFrame((function(){e=0,t.apply(void 0,[n])})))}}function At(t){return t&&"object"==typeof t&&null!==t&&t.constructor&&"Object"===t.constructor.name}function Mt(t){if(void 0!==t.actions){const e=t.actions.map(t=>{const e=Object.assign({},t),n=Object.assign({},e.props);return delete n.state,delete n.api,delete e.element,e.props=n,e});t.actions=e}return function t(e,...n){const s=n.shift();if(At(e)&&At(s))for(const n in s)if(At(s[n]))"function"==typeof s[n].clone?e[n]=s[n].clone():(void 0===e[n]&&(e[n]={}),e[n]=t(e[n],s[n]));else if(Array.isArray(s[n])){e[n]=new Array(s[n].length);let o=0;for(let i of s[n])At(i)?"function"==typeof i.clone?e[n][o]=i.clone():e[n][o]=t({},i):e[n][o]=i,o++}else e[n]=s[n];return n.length?t(e,...n):e}({},t)}class Ct{constructor(t,e){this.slotInstances={},this.destroyed=!1,this.vido=t,this.props=e,this.destroy=this.destroy.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this),this.getInstances=this.getInstances.bind(this),this.setComponents=this.setComponents.bind(this),this.vido.onDestroy(()=>{this.destroy()})}setComponents(t){if(t&&!this.destroyed){for(const e in t){const n=t[e];void 0===this.slotInstances[e]&&(this.slotInstances[e]=[]);for(const t of this.slotInstances[e])t.destroy();this.slotInstances[e].length=0;for(const t of n)this.slotInstances[e].push(this.vido.createComponent(t,this.props))}this.vido.update()}}destroy(){if(!this.destroyed){for(const t in this.slotInstances){for(const e of this.slotInstances[t])e.destroy();this.slotInstances[t].length=0}this.destroyed=!0}}change(t,e){if(!this.destroyed)for(const n in this.slotInstances){const s=this.slotInstances[n];for(const n of s)n.change(t,e)}}getInstances(t){return this.destroyed?[]:void 0===t?this.slotInstances:this.slotInstances[t]}html(t,e){if(this.destroyed)return;if(!this.slotInstances[t]||0===this.slotInstances[t].length)return e;let n=e;for(const e of this.slotInstances[t])n=e.html(n);return n}getProps(){return this.props}isDestroyed(){return this.destroyed}}function Xt(n,s){let o=0;const i=new Map;let r,a,l=new Map,c=0;const h=[],d=Promise.resolve(),p={},u=function(t){return class extends e{constructor(t){super(),this.actions=[],this.instance=t}set(t,e){return this.actions=t,this.props=e,this}body(e){const n=e.committer.element;for(const e of this.actions)if(void 0!==e){let s;if(t.has(this.instance))for(const o of t.get(this.instance))if(o.componentAction.create===e&&o.element===n){s=o;break}if(s)s.props=this.props;else{void 0!==n.vido&&delete n.vido;const s={create:e,update(){},destroy(){}},o={instance:this.instance,componentAction:s,element:n,props:this.props};let i=[];t.has(this.instance)&&(i=t.get(this.instance)),i.push(o),t.set(this.instance,i)}}}}}(l);class m{constructor(t){this.instance=t}create(t,e){const n=new u(this.instance);return n.set(t,e),n}}const f=function(t,e,n){return class{constructor(t,e,n={}){this.destroyed=!1,this.instance=t,this.name=e.name,this.vidoInstance=e,this.props=n,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this),this.html=this.html.bind(this)}destroy(){this.destroyed||(this.vidoInstance.debug&&(console.groupCollapsed(`destroying component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.destroyComponent(this.instance,this.vidoInstance),this.destroyed=!0)}update(s){return this.vidoInstance.debug&&(console.groupCollapsed(`updating component ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.updateTemplate(s)}change(s,o={}){this.vidoInstance.debug&&(console.groupCollapsed(`changing component ${this.instance}`),console.log(n({props:this.props,newProps:s,components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd());const i=t.get(this.instance);i&&i.change(s,o)}html(e={}){const n=t.get(this.instance);if(n&&!n.destroyed)return n.update(e,this.vidoInstance)}_getComponents(){return t}_getActions(){return e}}}(i,l,Mt),v=function(t,e,n){return class{constructor(t,e,n){this.destroyed=!1,this.instance=t,this.vidoInstance=e,this.renderFunction=n,this.destroy=this.destroy.bind(this),this.update=this.update.bind(this),this.change=this.change.bind(this)}destroy(){if(!this.destroyed){this.vidoInstance.debug&&(console.groupCollapsed(`component destroy method fired ${this.instance}`),console.log(n({props:this.vidoInstance.props,components:t.keys(),destroyable:this.vidoInstance.destroyable,actionsByInstance:e})),console.trace(),console.groupEnd()),this.content&&"function"==typeof this.content.destroy&&this.content.destroy();for(const t of this.vidoInstance.destroyable)t();this.vidoInstance.onChangeFunctions.length=0,this.vidoInstance.destroyable.length=0,this.vidoInstance.destroyed=!0,this.destroyed=!0,this.vidoInstance.update()}}update(s={}){return this.vidoInstance.debug&&(console.groupCollapsed(`component update method fired ${this.instance}`),console.log(n({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.renderFunction(s)}change(s,o={leave:!1}){const i=s;this.vidoInstance.debug&&(console.groupCollapsed(`component change method fired ${this.instance}`),console.log(n({props:i,components:t.keys(),onChangeFunctions:this.vidoInstance.onChangeFunctions,changedProps:s,actionsByInstance:e})),console.trace(),console.groupEnd());for(const t of this.vidoInstance.onChangeFunctions)t(s,o);const r=e.get(this.instance);if(r)for(const t of r)t.props=s}}}(i,l,Mt);class g{constructor(e="",o=""){this.instance="",this.name="",this.destroyable=[],this.destroyed=!1,this.onChangeFunctions=[],this.debug=!1,this.state=n,this.api=s,this.lastProps={},this.html=B,this.svg=F,this.directive=t,this.asyncAppend=H,this.asyncReplace=z,this.cache=G,this.classMap=K,this.guard=tt,this.live=vt,this.ifDefined=nt,this.repeat=ht,this.unsafeHTML=ut,this.until=ft,this.schedule=Pt,this.getElement=function(t){return function(e){return t(()=>t=>{e(t.committer.element)})()}}(t),this.actionsByInstance=()=>{},this.StyleMap=xt,this.Detach=bt,this.PointerAction=It,this.Action=_t,this.Slots=Ct,this._components=i,this._actions=l,this.instance=e,this.reuseComponents=this.reuseComponents.bind(this),this.onDestroy=this.onDestroy.bind(this),this.onChange=this.onChange.bind(this),this.update=this.update.bind(this),this.destroyComponent=this.destroyComponent.bind(this);for(const t in p)this[t]=p[t].bind(this);this.name=o,this.Actions=new m(e)}static addMethod(t,e){p[t]=e}onDestroy(t){this.destroyable.push(t)}onChange(t){this.onChangeFunctions.push(t)}update(t){return this.updateTemplate(t)}reuseComponents(t,e,n,s,o=!0,i=!1){const r=[],a=t.length,l=e.length;let c=!1;!o||void 0!==e&&0!==e.length||(c=!0);let h=0;if(a<l){let o=l-a;for(;o;){const i=e[l-o],a=this.createComponent(s,n(i));t.push(a),r.push(a),o--}}else if(a>l){let e=a-l;for(o&&(c=!0,h=a-e);e;){const n=a-e;o||(r.push(t[n]),t[n].destroy()),e--}o||(t.length=l)}let d=0;i&&console.log("modified components",r),i&&console.log("current components",t),i&&console.log("data array",e);for(const s of t){const t=e[d];i&&console.log(`reuse components data at '${d}'`,t),s&&!r.includes(s)&&(i&&console.log("getProps fn result",n(t)),s.change(n(t),{leave:c&&d>=h})),d++}}createComponent(t,e={}){const n=t.name+":"+o++;let s;s=new g(n,t.name);const r=new f(n,s,e),a=new v(n,s,t(s,e));return i.set(n,a),i.get(n).change(e),s.debug&&(console.groupCollapsed(`component created ${n}`),console.log(Mt({props:e,components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),r}destroyComponent(t,e){if(e.debug&&(console.groupCollapsed(`destroying component ${t}...`),console.log(Mt({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd()),l.has(t))for(const e of l.get(t))"function"==typeof e.componentAction.destroy&&e.componentAction.destroy(e.element,e.props);l.delete(t);const n=i.get(t);n?(n.destroy(),i.delete(t),e.debug&&(console.groupCollapsed(`component destroyed ${t}`),console.log(Mt({components:i.keys(),actionsByInstance:l})),console.trace(),console.groupEnd())):console.warn(`No component to destroy! [${t}]`)}executeActions(){for(const t of l.values()){for(const e of t)if(void 0===e.element.vido){const t=i.get(e.instance);e.isActive=function(){return t&&!1===t.destroyed};const n=e.componentAction,s=n.create;if(void 0!==s){let t;t=s.prototype&&(s.prototype.isAction||s.prototype.update||s.prototype.destroy)||s.isAction?new s(e.element,e.props):s(e.element,e.props),void 0!==t&&("function"==typeof t?n.destroy=t:("function"==typeof t.update&&(n.update=t.update.bind(t)),"function"==typeof t.destroy&&(n.destroy=t.destroy.bind(t))))}}else e.element.vido=e.props,"function"==typeof e.componentAction.update&&e.isActive()&&e.componentAction.update(e.element,e.props);for(const e of t)e.element.vido=e.props}}updateTemplate(t){return t&&h.push(t),new Promise(t=>{const e=++c,n=this;d.then((function(){if(e===c){c=0,n.render();for(const t of h)t();h.length=0,t(null)}}))})}createApp(t){a=t.element;const e=this.createComponent(t.component,t.props);return r=e.instance,this.render(),e}render(){const t=i.get(r);t?(W(t.update(),a),this.executeActions()):a&&a.remove()}}return new g}return Xt.prototype.lithtml=U,Xt.prototype.Action=_t,Xt.prototype.Directive=e,Xt.prototype.schedule=Pt,Xt.prototype.Detach=bt,Xt.prototype.StyleMap=xt,Xt.prototype.PointerAction=It,Xt.prototype.asyncAppend=H,Xt.prototype.asyncReplace=z,Xt.prototype.cache=G,Xt.prototype.classMap=K,Xt.prototype.guard=tt,Xt.prototype.live=vt,Xt.prototype.ifDefined=nt,Xt.prototype.repeat=ht,Xt.prototype.unsafeHTML=ut,Xt.prototype.until=ft,Xt.prototype.Slots=Ct,Xt}));
 //# sourceMappingURL=vido.umd.min.js.map

package.json

 {
   "name": "@neuronet.io/vido",
-  "version": "3.2.7",
+  "version": "3.2.8",
   "description": "Compilation-less and eval free frontend framework for fast scalable apps.",
@@ -5,0 +5,0 @@ "main": "dist/vido.umd.min.js",

src/InternalComponentMethods.ts

@@ -0,1 +1,2 @@
+import Action from './Action';
 import { AnyVido, htmlResult } from './vido';
@@ -81,4 +82,10 @@
       }
+      // update action props
+      const actions = actionsByInstance.get(this.instance);
+      if (actions)
+        for (const action of actions) {
+          action.props = changedProps;
+        }
     }
   };
 }

src/vido.ts

@@ -282,3 +282,3 @@ import { render, html, directive, svg, Directive } from 'lit-html-optimised';
       let vidoInstance;
-      vidoInstance = new VidoInstance(instance, name);
+      vidoInstance = new VidoInstance(instance, component.name);
       const publicMethods = new PublicComponentMethods(instance, vidoInstance, props);
@@ -391,3 +391,3 @@ const internalMethods = new InternalComponentMethods(
             afterUpdateCallbacks.length = 0;
-            resolve();
+            resolve(null);
           }
@@ -394,0 +394,0 @@ }

tests/basic/basic.js

@@ -1,5 +0,5 @@
-window.itemsDestroyed = 0;
-window.actionsCreated = 0;
-window.actionsDestroyed = 0;
-window.itemChildDestroyed = 0;
+globalThis.itemsDestroyed = 0;
+globalThis.actionsCreated = 0;
+globalThis.actionsDestroyed = 0;
+globalThis.itemChildDestroyed = 0;
 
@@ -71,3 +71,3 @@ function itemAction(element, data) {
   if (typeof window.ItemInstance === 'undefined') {
-    window.ItemInstance = vido.instance;
+    globalThis.ItemInstance = vido.instance;
   }
@@ -121,3 +121,3 @@
   onDestroy(() => {
-    window.appDestroyed = true;
+    globalThis.appDestroyed = true;
   });
@@ -138,4 +138,4 @@
 
-window.vido = Vido({}, {});
-window.app = vido.createApp({
+globalThis.vido = Vido({}, {});
+globalThis.app = vido.createApp({
   component: Main,
@@ -147,3 +147,3 @@ props: { components: [1, 2, 3, 4, 5] },
 function destroyMain() {
-  app.destroy();
+  globalThis.app.destroy();
 }
@@ -154,3 +154,3 @@
   i.destroy();
-  window.app.update();
+  globalThis.app.update();
 }

New alerts

License Policy Violation

License

This 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

License

This 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

1380225

increased by0.2%

Lines of code

10845

increased by0.23%

No dependency changes