@neuronet.io/vido - npm Package Compare versions

Comparing version 4.0.5 to 4.0.6

dist/vido.esm.js

@@ -1110,4 +1110,5 @@ /**
 Vido.prototype.Slots = Slots;
+const lit = lithtml;
 
-export { Action, i$4 as Directive, PointerAction, Slots, c$2 as asyncAppend, h$1 as asyncReplace, d as cache, o as classMap, Vido as default, detach, i$1 as guard, helpers, l$1 as ifDefined, lithtml, c$1 as repeat, schedule, i as styleMap, o$1 as unsafeHTML, c as until };
+export { Action, i$4 as Directive, PointerAction, Slots, c$2 as asyncAppend, h$1 as asyncReplace, d as cache, o as classMap, Vido as default, detach, i$1 as guard, helpers, l$1 as ifDefined, lit, lithtml, c$1 as repeat, schedule, i as styleMap, o$1 as unsafeHTML, c as until };
 //# sourceMappingURL=vido.esm.js.map

dist/vido.esm.min.js

@@ -62,3 +62,3 @@ /**
  * SPDX-License-Identifier: BSD-3-Clause
- */class Xt{constructor(){this.isAction=!0}}Xt.prototype.isAction=!0;const Et={element:document.createTextNode(""),axis:"xy",threshold:10,onDown(){},onMove(){},onUp(){},onWheel(){}},Pt="undefined"!=typeof PointerEvent;let Tt=0;class Ht extends Xt{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=++Tt,this.options=Object.assign(Object.assign({},Et),e.pointerOptions),Pt?(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,s=t.deltaY||0,n=t.deltaZ||0;const i=t.deltaMode,o=parseInt(getComputedStyle(t.target).getPropertyValue("line-height"));let r=1;switch(i){case 1:r=o;break;case 2:r=window.height}return e*=r,s*=r,n*=r,{x:e,y:s,z:n,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 s=this.normalizeMouseWheelEvent(t);e.x=s.x,e.y=s.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 s=0,n=0;("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",s=this.handleX(e)),("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:s,movementY:n,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 s=0,n=0;Math.abs(e.x-this.initialX)>this.options.threshold&&(s=this.handleX(e)),Math.abs(e.y-this.initialY)>this.options.threshold&&(n=this.handleY(e)),this.options.onMove({movementX:s,movementY:n,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 s=0;("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:0,movementY:s,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){Pt?(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 Nt(t){let e=0;return function(s){e||(e=requestAnimationFrame((function(){e=0,t.apply(void 0,[s])})))}}function St(t){return t&&t.constructor?"Object"===t.constructor.name:"object"==typeof t&&null!==t}function Lt(t,...e){const s=e.shift();if(St(t)&&St(s))for(const e in s)if(St(s[e]))"function"==typeof s[e].clone?t[e]=s[e].clone():(void 0===t[e]&&(t[e]={}),t[e]=Lt(t[e],s[e]));else if(Array.isArray(s[e])){t[e]=new Array(s[e].length);let n=0;for(let i of s[e])St(i)?"function"==typeof i.clone?t[e][n]=i.clone():t[e][n]=Lt({},i):t[e][n]=i,n++}else t[e]=s[e];return e.length?Lt(t,...e):t}function Dt(t){if(void 0!==t.actions){const e=t.actions.map((t=>{const e=Object.assign({},t),s=Object.assign({},e.props);return delete s.state,delete s.api,delete e.element,e.props=s,e}));t.actions=e}return Lt({},t)}var Ut={mergeDeep:Lt,clone:Dt,schedule:Nt};class kt{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 s=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 s)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 s in this.slotInstances){const n=this.slotInstances[s];for(const s of n)s.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 s=e;for(const e of this.slotInstances[t])s=e.html(s);return s}getProps(){return this.props}isDestroyed(){return this.destroyed}}class Bt extends z{update(t,e){if("function"!=typeof e[0])throw new Error("[vido] GetElementDirective argument should be a function.");(0,e[0])(t.element)}render(){return b}}function Wt(t,e){let s=0;const n=new Map;let i,o,r=new Map,h=0;const l=[],c=Promise.resolve(),a={},d=function(t){return class extends z{update(e,s){const n=e.element,i=s[0],o=s[1],r=s[2];for(const e of o)if(void 0!==e){let s;if(t.has(i))for(const o of t.get(i))if(o.componentAction.create===e&&o.element===n){s=o;break}if(s)s.props=r;else{void 0!==n.vido&&delete n.vido;const s={instance:i,componentAction:{create:e,update(){},destroy(){}},element:n,props:r};let o=[];t.has(i)&&(o=t.get(i)),o.push(s),t.set(i,o)}}}render(t,e,s){return b}}}(r);class u{constructor(t){this.instance=t}create(t,e){const s=j(d);return()=>s(this.instance,t,e)}}const p=function(t,e,s){return class{constructor(t,e,s={}){this.destroyed=!1,this.instance=t,this.name=e.name,this.vidoInstance=e,this.props=s,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(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.destroyComponent(this.instance,this.vidoInstance),this.destroyed=!0)}update(n){return this.vidoInstance.debug&&(console.groupCollapsed(`updating component ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.updateTemplate(n)}change(n,i={}){this.vidoInstance.debug&&(console.groupCollapsed(`changing component ${this.instance}`),console.log(s({props:this.props,newProps:n,components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd());const o=t.get(this.instance);o&&o.change(n,i)}html(e={}){const s=t.get(this.instance);if(s&&!s.destroyed)return s.update(e,this.vidoInstance)}_getComponents(){return t}_getActions(){return e}}}(n,r,Dt),v=function(t,e,s){return class{constructor(t,e,s){this.destroyed=!1,this.instance=t,this.vidoInstance=e,this.renderFunction=s,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(s({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(n={}){return this.vidoInstance.debug&&(console.groupCollapsed(`component update method fired ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.renderFunction(n)}change(n,i={leave:!1}){const o=n;this.vidoInstance.debug&&(console.groupCollapsed(`component change method fired ${this.instance}`),console.log(s({props:o,components:t.keys(),onChangeFunctions:this.vidoInstance.onChangeFunctions,changedProps:n,actionsByInstance:e})),console.trace(),console.groupEnd());for(const t of this.vidoInstance.onChangeFunctions)t(n,i)}}}(n,r,Dt);class f{constructor(s="",i=""){this.instance="",this.name="",this.destroyable=[],this.destroyed=!1,this.onChangeFunctions=[],this.debug=!1,this.state=t,this.api=e,this.lastProps={},this.html=$,this.svg=A,this.directive=j,this.asyncAppend=pt,this.asyncReplace=ut,this.cache=vt,this.classMap=Yt,this.styleMap=It,this.guard=mt,this.live=Ct,this.ifDefined=gt,this.repeat=$t,this.unsafeHTML=_t,this.until=xt,this.schedule=Nt,this.getElement=j(Bt),this.actionsByInstance=()=>{},this.detach=Mt,this.PointerAction=Ht,this.Action=Xt,this.Slots=kt,this._components=n,this._actions=r,this.instance=s,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 a)this[t]=a[t].bind(this);this.name=i,this.Actions=new u(s)}static addMethod(t,e){a[t]=e}onDestroy(t){this.destroyable.push(t)}onChange(t){this.onChangeFunctions.push(t)}update(t){return this.updateTemplate(t)}reuseComponents(t,e,s,n,i=!0,o=!1){const r=[],h=t.length,l=e.length;let c=!1;!i||void 0!==e&&0!==e.length||(c=!0);let a=0;if(h<l){let i=l-h;for(;i;){const o=e[l-i],h=this.createComponent(n,s(o));t.push(h),r.push(h),i--}}else if(h>l){let e=h-l;for(i&&(c=!0,a=h-e);e;){const s=h-e;i||(r.push(t[s]),t[s].destroy()),e--}i||(t.length=l)}let d=0;o&&console.log("modified components",r),o&&console.log("current components",t),o&&console.log("data array",e);for(const n of t){const t=e[d];o&&console.log(`reuse components data at '${d}'`,t),n&&!r.includes(n)&&(o&&console.log("getProps fn result",s(t)),n.change(s(t),{leave:c&&d>=a})),d++}}createComponent(t,e={}){const i=t.name+":"+s++;let o;o=new f(i,t.name);const h=new p(i,o,e),l=new v(i,o,t(o,e));return n.set(i,l),n.get(i).change(e),o.debug&&(console.groupCollapsed(`component created ${i}`),console.log(Dt({props:e,components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd()),h}destroyComponent(t,e){if(e.debug&&(console.groupCollapsed(`destroying component ${t}...`),console.log(Dt({components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd()),r.has(t))for(const e of r.get(t))"function"==typeof e.componentAction.destroy&&e.componentAction.destroy(e.element,e.props);r.delete(t);const s=n.get(t);s?(s.destroy(),n.delete(t),e.debug&&(console.groupCollapsed(`component destroyed ${t}`),console.log(Dt({components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd())):console.warn(`No component to destroy! [${t}]`)}executeActions(){for(const t of r.values()){for(const e of t)if(void 0===e.element.vido){const t=n.get(e.instance);e.isActive=function(){return t&&!1===t.destroyed};const s=e.componentAction,i=s.create;if(void 0!==i){let t;t=i.prototype&&(i.prototype.isAction||i.prototype.update||i.prototype.destroy)||i.isAction?new i(e.element,e.props):i(e.element,e.props),void 0!==t&&("function"==typeof t?s.destroy=t:("function"==typeof t.update&&(s.update=t.update.bind(t)),"function"==typeof t.destroy&&(s.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&&l.push(t),new Promise((t=>{const e=++h,s=this;c.then((function(){if(e===h){h=0,s.render();for(const t of l)t();l.length=0,t(null)}}))}))}createApp(t){o=t.element;const e=this.createComponent(t.component,t.props);return i=e.instance,this.render(),e}render(){const t=n.get(i);t?(C(t.update(),o),this.executeActions()):o&&o.remove()}}return new f}Wt.prototype.lithtml=U,Wt.prototype.Action=Xt,Wt.prototype.Directive=z,Wt.prototype.schedule=Nt,Wt.prototype.detach=Mt,Wt.prototype.styleMap=It,Wt.prototype.classMap=Yt,Wt.prototype.PointerAction=Ht,Wt.prototype.asyncAppend=pt,Wt.prototype.asyncReplace=ut,Wt.prototype.cache=vt,Wt.prototype.guard=mt,Wt.prototype.live=Ct,Wt.prototype.ifDefined=gt,Wt.prototype.repeat=$t,Wt.prototype.unsafeHTML=_t,Wt.prototype.until=xt,Wt.prototype.Slots=kt;export{Xt as Action,z as Directive,Ht as PointerAction,kt as Slots,pt as asyncAppend,ut as asyncReplace,vt as cache,Yt as classMap,Wt as default,Mt as detach,mt as guard,Ut as helpers,gt as ifDefined,U as lithtml,$t as repeat,Nt as schedule,It as styleMap,_t as unsafeHTML,xt as until};
+ */class Xt{constructor(){this.isAction=!0}}Xt.prototype.isAction=!0;const Et={element:document.createTextNode(""),axis:"xy",threshold:10,onDown(){},onMove(){},onUp(){},onWheel(){}},Pt="undefined"!=typeof PointerEvent;let Tt=0;class Ht extends Xt{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=++Tt,this.options=Object.assign(Object.assign({},Et),e.pointerOptions),Pt?(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,s=t.deltaY||0,n=t.deltaZ||0;const i=t.deltaMode,o=parseInt(getComputedStyle(t.target).getPropertyValue("line-height"));let r=1;switch(i){case 1:r=o;break;case 2:r=window.height}return e*=r,s*=r,n*=r,{x:e,y:s,z:n,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 s=this.normalizeMouseWheelEvent(t);e.x=s.x,e.y=s.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 s=0,n=0;("x"===this.moving||"xy"===this.moving&&Math.abs(e.x-this.initialX)>this.options.threshold)&&(this.moving="x",s=this.handleX(e)),("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:s,movementY:n,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 s=0,n=0;Math.abs(e.x-this.initialX)>this.options.threshold&&(s=this.handleX(e)),Math.abs(e.y-this.initialY)>this.options.threshold&&(n=this.handleY(e)),this.options.onMove({movementX:s,movementY:n,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 s=0;("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:0,movementY:s,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){Pt?(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 Nt(t){let e=0;return function(s){e||(e=requestAnimationFrame((function(){e=0,t.apply(void 0,[s])})))}}function St(t){return t&&t.constructor?"Object"===t.constructor.name:"object"==typeof t&&null!==t}function Lt(t,...e){const s=e.shift();if(St(t)&&St(s))for(const e in s)if(St(s[e]))"function"==typeof s[e].clone?t[e]=s[e].clone():(void 0===t[e]&&(t[e]={}),t[e]=Lt(t[e],s[e]));else if(Array.isArray(s[e])){t[e]=new Array(s[e].length);let n=0;for(let i of s[e])St(i)?"function"==typeof i.clone?t[e][n]=i.clone():t[e][n]=Lt({},i):t[e][n]=i,n++}else t[e]=s[e];return e.length?Lt(t,...e):t}function Dt(t){if(void 0!==t.actions){const e=t.actions.map((t=>{const e=Object.assign({},t),s=Object.assign({},e.props);return delete s.state,delete s.api,delete e.element,e.props=s,e}));t.actions=e}return Lt({},t)}var Ut={mergeDeep:Lt,clone:Dt,schedule:Nt};class kt{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 s=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 s)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 s in this.slotInstances){const n=this.slotInstances[s];for(const s of n)s.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 s=e;for(const e of this.slotInstances[t])s=e.html(s);return s}getProps(){return this.props}isDestroyed(){return this.destroyed}}class Bt extends z{update(t,e){if("function"!=typeof e[0])throw new Error("[vido] GetElementDirective argument should be a function.");(0,e[0])(t.element)}render(){return b}}function Wt(t,e){let s=0;const n=new Map;let i,o,r=new Map,h=0;const l=[],c=Promise.resolve(),a={},d=function(t){return class extends z{update(e,s){const n=e.element,i=s[0],o=s[1],r=s[2];for(const e of o)if(void 0!==e){let s;if(t.has(i))for(const o of t.get(i))if(o.componentAction.create===e&&o.element===n){s=o;break}if(s)s.props=r;else{void 0!==n.vido&&delete n.vido;const s={instance:i,componentAction:{create:e,update(){},destroy(){}},element:n,props:r};let o=[];t.has(i)&&(o=t.get(i)),o.push(s),t.set(i,o)}}}render(t,e,s){return b}}}(r);class u{constructor(t){this.instance=t}create(t,e){const s=j(d);return()=>s(this.instance,t,e)}}const p=function(t,e,s){return class{constructor(t,e,s={}){this.destroyed=!1,this.instance=t,this.name=e.name,this.vidoInstance=e,this.props=s,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(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.destroyComponent(this.instance,this.vidoInstance),this.destroyed=!0)}update(n){return this.vidoInstance.debug&&(console.groupCollapsed(`updating component ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.vidoInstance.updateTemplate(n)}change(n,i={}){this.vidoInstance.debug&&(console.groupCollapsed(`changing component ${this.instance}`),console.log(s({props:this.props,newProps:n,components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd());const o=t.get(this.instance);o&&o.change(n,i)}html(e={}){const s=t.get(this.instance);if(s&&!s.destroyed)return s.update(e,this.vidoInstance)}_getComponents(){return t}_getActions(){return e}}}(n,r,Dt),v=function(t,e,s){return class{constructor(t,e,s){this.destroyed=!1,this.instance=t,this.vidoInstance=e,this.renderFunction=s,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(s({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(n={}){return this.vidoInstance.debug&&(console.groupCollapsed(`component update method fired ${this.instance}`),console.log(s({components:t.keys(),actionsByInstance:e})),console.trace(),console.groupEnd()),this.renderFunction(n)}change(n,i={leave:!1}){const o=n;this.vidoInstance.debug&&(console.groupCollapsed(`component change method fired ${this.instance}`),console.log(s({props:o,components:t.keys(),onChangeFunctions:this.vidoInstance.onChangeFunctions,changedProps:n,actionsByInstance:e})),console.trace(),console.groupEnd());for(const t of this.vidoInstance.onChangeFunctions)t(n,i)}}}(n,r,Dt);class f{constructor(s="",i=""){this.instance="",this.name="",this.destroyable=[],this.destroyed=!1,this.onChangeFunctions=[],this.debug=!1,this.state=t,this.api=e,this.lastProps={},this.html=$,this.svg=A,this.directive=j,this.asyncAppend=pt,this.asyncReplace=ut,this.cache=vt,this.classMap=Yt,this.styleMap=It,this.guard=mt,this.live=Ct,this.ifDefined=gt,this.repeat=$t,this.unsafeHTML=_t,this.until=xt,this.schedule=Nt,this.getElement=j(Bt),this.actionsByInstance=()=>{},this.detach=Mt,this.PointerAction=Ht,this.Action=Xt,this.Slots=kt,this._components=n,this._actions=r,this.instance=s,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 a)this[t]=a[t].bind(this);this.name=i,this.Actions=new u(s)}static addMethod(t,e){a[t]=e}onDestroy(t){this.destroyable.push(t)}onChange(t){this.onChangeFunctions.push(t)}update(t){return this.updateTemplate(t)}reuseComponents(t,e,s,n,i=!0,o=!1){const r=[],h=t.length,l=e.length;let c=!1;!i||void 0!==e&&0!==e.length||(c=!0);let a=0;if(h<l){let i=l-h;for(;i;){const o=e[l-i],h=this.createComponent(n,s(o));t.push(h),r.push(h),i--}}else if(h>l){let e=h-l;for(i&&(c=!0,a=h-e);e;){const s=h-e;i||(r.push(t[s]),t[s].destroy()),e--}i||(t.length=l)}let d=0;o&&console.log("modified components",r),o&&console.log("current components",t),o&&console.log("data array",e);for(const n of t){const t=e[d];o&&console.log(`reuse components data at '${d}'`,t),n&&!r.includes(n)&&(o&&console.log("getProps fn result",s(t)),n.change(s(t),{leave:c&&d>=a})),d++}}createComponent(t,e={}){const i=t.name+":"+s++;let o;o=new f(i,t.name);const h=new p(i,o,e),l=new v(i,o,t(o,e));return n.set(i,l),n.get(i).change(e),o.debug&&(console.groupCollapsed(`component created ${i}`),console.log(Dt({props:e,components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd()),h}destroyComponent(t,e){if(e.debug&&(console.groupCollapsed(`destroying component ${t}...`),console.log(Dt({components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd()),r.has(t))for(const e of r.get(t))"function"==typeof e.componentAction.destroy&&e.componentAction.destroy(e.element,e.props);r.delete(t);const s=n.get(t);s?(s.destroy(),n.delete(t),e.debug&&(console.groupCollapsed(`component destroyed ${t}`),console.log(Dt({components:n.keys(),actionsByInstance:r})),console.trace(),console.groupEnd())):console.warn(`No component to destroy! [${t}]`)}executeActions(){for(const t of r.values()){for(const e of t)if(void 0===e.element.vido){const t=n.get(e.instance);e.isActive=function(){return t&&!1===t.destroyed};const s=e.componentAction,i=s.create;if(void 0!==i){let t;t=i.prototype&&(i.prototype.isAction||i.prototype.update||i.prototype.destroy)||i.isAction?new i(e.element,e.props):i(e.element,e.props),void 0!==t&&("function"==typeof t?s.destroy=t:("function"==typeof t.update&&(s.update=t.update.bind(t)),"function"==typeof t.destroy&&(s.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&&l.push(t),new Promise((t=>{const e=++h,s=this;c.then((function(){if(e===h){h=0,s.render();for(const t of l)t();l.length=0,t(null)}}))}))}createApp(t){o=t.element;const e=this.createComponent(t.component,t.props);return i=e.instance,this.render(),e}render(){const t=n.get(i);t?(C(t.update(),o),this.executeActions()):o&&o.remove()}}return new f}Wt.prototype.lithtml=U,Wt.prototype.Action=Xt,Wt.prototype.Directive=z,Wt.prototype.schedule=Nt,Wt.prototype.detach=Mt,Wt.prototype.styleMap=It,Wt.prototype.classMap=Yt,Wt.prototype.PointerAction=Ht,Wt.prototype.asyncAppend=pt,Wt.prototype.asyncReplace=ut,Wt.prototype.cache=vt,Wt.prototype.guard=mt,Wt.prototype.live=Ct,Wt.prototype.ifDefined=gt,Wt.prototype.repeat=$t,Wt.prototype.unsafeHTML=_t,Wt.prototype.until=xt,Wt.prototype.Slots=kt;const Ot=U;export{Xt as Action,z as Directive,Ht as PointerAction,kt as Slots,pt as asyncAppend,ut as asyncReplace,vt as cache,Yt as classMap,Wt as default,Mt as detach,mt as guard,Ut as helpers,gt as ifDefined,Ot as lit,U as lithtml,$t as repeat,Nt as schedule,It as styleMap,_t as unsafeHTML,xt as until};
 //# sourceMappingURL=vido.esm.min.js.map

package.json

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

src/vido.js

@@ -326,2 +326,3 @@ import { render, html, svg } from 'lit-html';
 Vido.prototype.Slots = Slots;
-export { lithtml, Action, Directive, schedule, detach, styleMap, classMap, PointerAction, asyncAppend, asyncReplace, cache, guard, ifDefined, repeat, unsafeHTML, until, Slots, helpers, };
+const lit = lithtml;
+export { lithtml, lit, Action, Directive, schedule, detach, styleMap, classMap, PointerAction, asyncAppend, asyncReplace, cache, guard, ifDefined, repeat, unsafeHTML, until, Slots, helpers, };

src/vido.ts

@@ -13,4 +13,4 @@ import { render, html, svg } from 'lit-html';
 import detach from './Detach';
-import { styleMap, StyleInfo } from 'lit-html/directives/style-map.js';
-import { classMap, ClassInfo } from 'lit-html/directives/class-map.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
+import { classMap } from 'lit-html/directives/class-map.js';
 import PointerAction from './PointerAction';
@@ -35,2 +35,10 @@ import getPublicComponentMethods from './PublicComponentMethods';
 
+export interface ClassInfo {
+  [name: string]: string | boolean | number;
+}
+
+export interface StyleInfo {
+  [name: string]: string | undefined | null;
+}
+
 export type UpdateTemplate = (props: unknown) => htmlResult;
@@ -449,4 +457,2 @@
   helpers,
-  StyleInfo,
-  ClassInfo,
 };

types/vido.d.ts

@@ -12,4 +12,4 @@ import { directive, Directive } from 'lit-html/directive.js';
 import detach from './Detach';
-import { styleMap, StyleInfo } from 'lit-html/directives/style-map.js';
-import { classMap, ClassInfo } from 'lit-html/directives/class-map.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
+import { classMap } from 'lit-html/directives/class-map.js';
 import PointerAction from './PointerAction';
@@ -22,2 +22,8 @@ import { schedule } from './helpers';
 export declare type htmlResult = lithtml.TemplateResult | lithtml.TemplateResult[] | lithtml.SVGTemplateResult | lithtml.SVGTemplateResult[] | undefined | null;
+export interface ClassInfo {
+    [name: string]: string | boolean | number;
+}
+export interface StyleInfo {
+    [name: string]: string | undefined | null;
+}
 export declare type UpdateTemplate = (props: unknown) => htmlResult;
@@ -76,2 +82,3 @@ export declare type Component = (vido: AnyVido, props: unknown) => UpdateTemplate;
 export default function Vido<State, Api>(state: State, api: Api): vido<State, Api>;
-export { lithtml, Action, Directive, schedule, detach, styleMap, classMap, PointerAction, asyncAppend, asyncReplace, cache, guard, ifDefined, repeat, unsafeHTML, until, Slots, helpers, StyleInfo, ClassInfo, };
+declare const lit: typeof lithtml;
+export { lithtml, lit, Action, Directive, schedule, detach, styleMap, classMap, PointerAction, asyncAppend, asyncReplace, cache, guard, ifDefined, repeat, unsafeHTML, until, Slots, helpers, };

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

843637

increased by0.08%

Lines of code

6860

increased by0.19%

No dependency changes