domvm
Version:
DOM ViewModel - A thin, fast, dependency-free vdom view layer
2 lines • 16.2 kB
JavaScript
// https://github.com/domvm/domvm (v3.4.14, micro build)
var domvm=function(n){"use strict";const e="undefined"!=typeof window?document:{},t={};function l(){}const r=Array.isArray;function o(n){return null!=n&&n.constructor===Object}function i(n,e,t,l){n.splice.apply(n,[t,l].concat(e))}function u(n){return"function"==typeof n}function a(n){for(var e=arguments,t=1;e.length>t;t++)for(var l in e[t])n[l]=e[t][l];return n}function f(n,e){for(var t=[],l=e;n.length>l;l++)t.push(n[l]);return t}function d(n,e){return n===e||null!=e&&null!=n&&(r(n)?function(n,e){const t=n.length;if(e.length!==t)return!1;for(var l=0;t>l;l++)if(n[l]!==e[l])return!1;return!0}(n,e):!!o(n)&&function(n,e){for(var t in n)if(n[t]!==e[t])return!1;return!0}(n,e))}function s(n){return"o"===n[0]&&"n"===n[1]}function c(n){return"_"===n[0]}function v(n){return"style"===n}function y(n){n&&n.el&&n.el.getBoundingClientRect()}function p(n){return null!=n.node&&null!=n.node.el}function h(n,e){switch(e){case"value":case"checked":case"selected":return!0}return!1}function m(n){for(n=n||t;null==n.vm&&n.parent;)n=n.parent;return n.vm}function g(){}const b=g.prototype={constructor:g,type:null,vm:null,key:null,ref:null,data:null,hooks:null,ns:null,el:null,tag:null,attrs:null,body:null,flags:0,_diff:null,_dead:!1,_lis:!1,idx:null,parent:null};function k(n){let e=new g;return e.type=2,e.body=n,e}b._class=null;const w={},_=/\[([^=\]]+)=?([^\]]+)?\]/g;function x(n,e,t,l){let r=new g;r.type=1,r.flags=l||0,r.attrs=e||null;var o=function(n){var e,t,l,r,o=w[n];if(null==o)for(w[n]=o={tag:(e=n.match(/^[-\w]+/))?e[0]:"div",id:(t=n.match(/#([-\w]+)/))?t[1]:null,class:(l=n.match(/\.([-\w.]+)/))?l[1].replace(/\./g," "):null,attrs:null};r=_.exec(n);)null==o.attrs&&(o.attrs={}),o.attrs[r[1]]=r[2]||"";return o}(n);n=o.tag;var i=null!=o.id,u=null!=o.class,a=null!=o.attrs;if(i||u||a){var f=r.attrs||{};if(i&&null==f.id&&(f.id=o.id),u&&(r._class=o.class,f.class=o.class+(null!=f.class?" "+f.class:"")),a)for(var d in o.attrs)null==f[d]&&(f[d]=o.attrs[d]);r.attrs=f}if(r.tag=n,null!=r.attrs){var s=r.attrs;null!=s._key&&(r.key=s._key),null!=s._ref&&(r.ref=s._ref),null!=s._hooks&&(r.hooks=s._hooks),null!=s._data&&(r.data=s._data),null!=s._flags&&(r.flags=s._flags),null==r.key&&(null!=r.ref?r.key=r.ref:null!=s.id?r.key=s.id:null!=s.name&&(r.key=s.name+("radio"===s.type||"checkbox"===s.type?s.value:"")))}return null!=t&&(r.body=t,t instanceof N&&(r.flags=t.flags)),r}function N(n,e,t){var l,r=this,o=n.length;r.flags=8,r.items=n,r.length=o,r.key=()=>null,r.diff={val:function(t,l){return e.val(n[t],l)},eq:function(n,t){return e.eq(t._diff,r.diff.val(n))}},r.tpl=e=>l(n[e],e),r.map=n=>(l=n,r),r.body=function(n){for(var e=[],t=0;o>t;t++){var l=r.tpl(t);4!=l.type&&(l._diff=r.diff.val(t,n)),e.push(l)}n.body=e,q(n)},null!=t&&(r.flags|=4,r.key=e=>t(n[e],e)),u(e)&&(r.diff={val:function(t){return e(n[t])},eq:function(n,e){return d(e._diff,r.diff.val(n))}})}var C={};let S=l,R=!1,E=l,O=l;function I(n){S=n.onevent||S,null!=n.onvnode&&(O=n.onvnode),null!=n.syncRedraw&&(R=n.syncRedraw),null!=n.didRedraws&&(E=n.didRedraws),n.onemit&&function(n){a(C,n)}(n.onemit)}function V(n,e,t,l){if(O(n,e,t,l),5!==n.type&&4!==n.type){n.parent=e,n.idx=t,n.vm=l,null!=n.ref&&function(n,e,t){!function(n,e,t){for(var l;l=e.shift();)n[l]=0===e.length?t:n=n[l]||{}}(n,("refs."+e).split("."),t)}(m(n),n.ref,n);var o=n.hooks,i=l&&l.hooks;(o&&(o.willRemove||o.didRemove)||i&&(i.willUnmount||i.didUnmount))&&function(n){for(;n=n.parent;)n.flags|=1}(n),r(n.body)?q(n):""===n.body?n.body=null:null==n.body||n.body instanceof N||(n.body=""+n.body)}}function q(n){for(var e=n.body,t=0;e.length>t;t++){var l=e[t];!1===l||null==l?e.splice(t--,1):r(l)?i(e,l,t--,1):(null==l.type&&(e[t]=l=k(l)),2===l.type?null==l.body||""===l.body?e.splice(t--,1):t>0&&2===e[t-1].type?(e[t-1].body+=l.body,e.splice(t--,1)):V(l,n,t,null):V(l,n,t,null))}}const A={animationIterationCount:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridColumn:!0,order:!0,lineClamp:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0};function D(n,e){return isNaN(e)||A[n]?e:e+"px"}function M(n,e){var l=(n.attrs||t).style,r=e?(e.attrs||t).style:null;if(null==l||function(n){var e=typeof n;return"string"===e||"number"===e}(l))n.el.style.cssText=l;else{for(var o in l){var i=l[o];(null==r||null!=i&&i!==r[o])&&(n.el.style[o]=D(o,i))}if(r)for(var u in r)null==l[u]&&(n.el.style[u]="")}}function j(n){let e=n.currentTarget,l=e._node.attrs["on"+n.type];if(r(l)){let r,o,i=l[0],u=l.slice(1),a=function(n){for(n=n||t;null==n._node&&n.parentNode;)n=n.parent;return n._node}(n.target),f=m(a),d=i.apply(e,u.concat([n,a,f,f.data]));r=f.onevent(n,a,f,f.data,u),o=S(n,a,f,f.data,u),!1!==d&&!1!==r&&!1!==o||n.preventDefault()}else l.call(e,n)}function T(n,e,t,l){if(t==l)return;let r=n.el;null==t?r.removeEventListener(e.slice(2),j):null==l&&r.addEventListener(e.slice(2),j)}function U(n,e,t){(function(n){return"."===n[0]})(e)&&(e=e.substr(1),t=!0),t?n.el[e]="":n.el.removeAttribute(e)}function F(n,e,t,l){var r=n.el;null!=n.ns?r.setAttribute(e,t):"class"===e?r.className=t:"id"===e||"boolean"==typeof t||l?r[e]=t:"."===e[0]?r[e.substr(1)]=t:r.setAttribute(e,t)}function L(n,e){const l=n.attrs||t,r=e.attrs||t;if(l===r);else{for(var o in l){var i=l[o];if(null!=i){var u=h(0,o),a=u?n.el[o]:r[o];i===a||(v(o)?M(n,e):c(o)||(s(o)?T(n,o,i,a):F(n,o,i,u)))}}for(var o in r)null==l[o]&&(s(o)?T(n,o,l[o],r[o]):c(o)||U(n,o,h(0,o)))}}function z(n,e,t,l){return 4===n.type&&(e=n.data,t=n.key,l=n.opts,n=n.view),new mn(n,e,t,l)}const B=[];function G(n,e,t,l,r){if(null!=n){var o=t.hooks[e];if(o){if("d"!==e[0]||"i"!==e[1]||"d"!==e[2])return o(t,l);r?(y(t.parent),o(t,l)):B.push([o,t,l])}}}function W(n,e){var t;if(B.length)for(e&&y(n.node);t=B.shift();)t[0](t[1],t[2])}function Y(n){return n.nextSibling}function H(n){var e=n.vm,t=null!=e&&G(e.hooks,"willUnmount",e,e.data),l=G(n.hooks,"willRemove",n);if(1==(1&n.flags)&&r(n.body))for(var o=0;n.body.length>o;o++)H(n.body[o]);return t||l}function K(n,e){if(e){var t=n.vm;null!=t&&(t.node=t.refs=null)}var l=n.body;if(r(l))for(var o=0;l.length>o;o++)K(l[o],!0)}function P(n,e,t){var l=e._node,r=l.vm;if(K(l,!0),1==(1&l.flags))for(var o=0;l.body.length>o;o++)P(e,l.body[o].el);delete e._node,n.removeChild(e),G(l.hooks,"didRemove",l,null,t),null!=r&&(G(r.hooks,"didUnmount",r,r.data,t),r.node=null)}function X(n,e){var t=e._node;if(null==t)n.removeChild(e);else{if(t._dead)return;var l=H(t);null!=l&&function(n){return"object"==typeof n&&u(n.then)}(l)?(t._dead=!0,l.then(function(n,e){return function(){return n.apply(undefined,e)}}(P,[n,e,!0]))):P(n,e)}}function J(n){var e=n.el;if(0==(1&n.flags))K(n,!1),e.textContent=null;else{var t=e.firstChild;if(null!=t)do{var l=Y(t);X(e,t)}while(t=l)}}function Q(n,e,t){var l=e._node,r=null!=e.parentNode,o=e!==t&&r?null:l.vm;null!=o&&G(o.hooks,"willMount",o,o.data),G(l.hooks,r?"willReinsert":"willInsert",l),n.insertBefore(e,t),G(l.hooks,r?"didReinsert":"didInsert",l),null!=o&&G(o.hooks,"didMount",o,o.data)}function Z(n,e,t){Q(n,e,t?Y(t):null)}function $(n){for(var e=0;n.body.length>e;e++){var t=n.body[e],l=t.type;if(l>3){if(4===l)l=(r=z(t.view,t.data,t.key,t.opts)._redraw(n,e,!1)).node.type,Q(n.el,nn(r.node));else if(5===l){var r;(r=t.vm)._update(t.data,n,e,!0,!0),l=r.node.type,Q(n.el,r.node.el)}}else Q(n.el,nn(t))}}function nn(n,l){return null==n.el&&(1===n.type?(n.el=l||function(n,t){return null!=t?e.createElementNS(t,n):e.createElement(n)}(n.tag,n.ns),null!=n.attrs&&L(n,t),8==(8&n.flags)&&n.body.body(n),r(n.body)?$(n):null!=n.body&&(n.el.textContent=n.body)):2===n.type?n.el=l||function(n){return e.createTextNode(n)}(n.body):3===n.type&&(n.el=l||function(n){return e.createComment(n)}(n.body))),n.el._node=n,n.el}function en(n,e,t,l,r,o,i,u){return function(a,f,d,s,c,v){var y,p;if(null!=s[l]){if(null==(y=s[l]._node))return void(s[l]=n(s[l]));if(function(n){return n.parent}(y)!==a)return p=n(s[l]),null!=y.vm?y.vm.unmount(!0):X(f,s[l]),void(s[l]=p)}if(s[r]==c)return 2;if(null==s[r].el)t(f,nn(s[r]),s[l]),s[r]=e(s[r],d);else if(s[r].el===s[l])s[r]=e(s[r],d),s[l]=n(s[l]);else{if(v||y!==s[i])return v&&null!=s[l]?function(n,e,t,l,r,o,i,u,a){if(u._lis)t(o,a[r].el,a[l]),a[r]=e(a[r],i);else{var f=function(n,e){for(var t,l=0,r=e.length-1,o=2147483647>=r;r>=l;){if(e[t=o?l+r>>1:Math.floor((l+r)/2)]===n)return t;n>e[t]?l=t+1:r=t-1}return l==e.length?null:l}(u.idx,a.tombs);u._lis=!0;var d=n(a[l]);t(o,a[l],null!=f?i[a.tombs[f]].el:f),null==f?a.tombs.push(u.idx):a.tombs.splice(f,0,u.idx),a[l]=d}}(n,e,t,l,r,f,d,y,s):1;s[l]=n(p=s[l]),u(f,p,s[o]),s[o]=p}}}var tn=en(Y,(function(n,e){return e[n.idx+1]}),Q,"lftSib","lftNode","rgtSib","rgtNode",Z),ln=en((function(n){return n.previousSibling}),(function(n,e){return e[n.idx-1]}),Z,"rgtSib","rgtNode","lftSib","lftNode",Q);function rn(n,e,t,l){var r=[],o=e.firstChild;do{var i=o._node;i.parent===n&&r.push(i.idx)}while(o=Y(o));for(var u=function(n){const e=n.slice(),t=[];t[0]=0;let l,r,o,i=0,u=0;for(;n.length>u;++u){const a=n[u];if(o=t[i],a>n[o])e[u]=o,t[++i]=u;else{for(l=0,r=i;r>l;)o=l+r>>1,a>n[t[o]]?l=o+1:r=o;n[t[l]]>a&&(l>0&&(e[u]=t[l-1]),t[l]=u)}}for(r=t[i];i>=0;)t[i--]=r,r=e[r];return t}(r).map((n=>r[n])),a=0;u.length>a;a++)t[u[a]]._lis=!0;for(l.tombs=u;2!==tn(n,e,t,l,null,!0););}function on(n){return n.el._node.parent!==n.parent}function un(n,e,t){return e[t]}function an(n,e,t){for(;e.length>t;t++){var l=e[t];if(null!=l.vm){if(4===n.type&&l.vm.view===n.view&&l.vm.key===n.key||5===n.type&&l.vm===n.vm)return l}else if(!on(l)&&n.tag===l.tag&&n.type===l.type&&n.key===l.key&&(-2&n.flags)==(-2&l.flags))return l}return null}function fn(n,e,t){if(null==e._keys){if(e[t].key===n.key)return e[t];for(var l={},r=0;e.length>r;r++)l[e[r].key]=r;e._keys=l}return e[e._keys[n.key]]}function dn(n,e){G(e.hooks,"willRecycle",e,n);var o=n.el=e.el,i=e.body,u=n.body;if(o._node=n,2!==n.type||u===i){null==n.attrs&&null==e.attrs||L(n,e);var a=r(i),f=r(u);a?f||8==(8&n.flags)?function(n,e){var r=n.body,o=r.length,i=e.body,u=i.length,a=8==(8&n.flags),f=2==(2&n.flags),d=4==(4&n.flags),s=!f&&1===n.type,c=!0,v=0===u?l:d?fn:f||a?un:an;if(s&&0===o)return J(e),void(a&&(n.body=[]));var y,h,m=0,g=!1,b=0;if(a)var k={key:null},w=n.body=Array(o);for(var _=0;o>_;_++){if(a){var x=!1;c&&(d&&(k.key=r.key(_)),y=v(k,i,b)),null!=y?(h=y.idx,r.diff.eq(_,y)?((N=y).parent=n,N.idx=_,N._lis=!1):x=!0):x=!0,x&&(4===(N=r.tpl(_)).type?N=null!=y?y.vm._update(N.data,n,_,!0,!0).node:z(N.view,N.data,N.key,N.opts)._redraw(n,_,!1).node:(V(N,n,_),N._diff=r.diff.val(_,n),null!=y&&dn(N,y))),w[_]=N}else{var N,C=(N=r[_]).type;if(C>3){if(4===C)(y=c&&v(N,i,b))?(h=y.idx,y.vm._update(N.data,n,_,!0,!0)):z(N.view,N.data,N.key,N.opts)._redraw(n,_,!1);else if(5===C){var S=N.vm,R=p(S);R&&S.node.parent!=e&&(S.unmount(!0),R=!1),S._update(N.data,n,_,R,!0)}}else(y=c&&v(N,i,b))&&(dn(N,y),h=y.idx)}if(null!=y&&(h===b?++b===u&&o>u&&(y=null,c=!1):g=!0,!d&&u>100&&g&&++m%10==0))for(;u>b&&on(i[b]);)b++}s&&function(n,e){var l=e.body,r=n.el,o=n.body,i={lftNode:o[0],rgtNode:o[o.length-1],lftSib:(l[0]||t).el,rgtSib:(l[l.length-1]||t).el};n:for(;;){for(;;){var u=tn(n,r,o,i,null,!1);if(1===u)break;if(2===u)break n}for(;;){var a=ln(n,r,o,i,i.lftNode,!1);if(1===a)break;if(2===a)break n}rn(n,r,o,i);break}}(n,e)}(n,e):u!==i&&(null!=u?o.textContent=u:J(e)):f?(J(e),$(n)):u!==i&&(null!=u&&null!=i?o.firstChild.nodeValue=u:o.textContent=u),G(e.hooks,"didRecycle",e,n)}else o.nodeValue=u}function sn(n,e,t,l){var r,i;return null==t?o(e)?r=e:i=e:(r=e,i=t),x(n,r,i,l)}var cn=new Set,vn=0;function yn(){cn.forEach((n=>{if(null!=n.node){for(var e=n;e=e.parent();)if(cn.has(e))return;n.redraw(!0)}})),E(cn),cn.clear(),vn=0}var pn={class:"domvm-err",style:{color:"#fff",background:"#f00"}};function hn(n){var e="[DOMVM] "+n;return console.error(e),sn("div",pn,e)}function mn(n,e,t,l){var r,i,a,f=this;f.view=n,f.data=e,f.key=t,l&&(f.opts=l,f.cfg(l));try{r=o(n)?n:n.call(f,f,e,t,l)}catch(n){i=n}r&&(u(r)?a=r:(a=r.render,f.cfg(r))),f.render=function(){if(i)return hn(i);try{return a.apply(this,arguments)}catch(n){return hn(n)}},f.init&&f.init.call(f,f,f.data,f.key,l)}function gn(n,e,t){return d(e,t)}function bn(n){var e=this;return n.init&&(e.init=n.init),n.diff&&(e.diff=u(n.diff)?{val:n.diff,eq:gn}:n.diff),n.onevent&&(e.onevent=n.onevent),n.hooks&&(e.hooks=a(e.hooks||{},n.hooks)),n.onemit&&(e.onemit=a(e.onemit||{},n.onemit)),e}const kn=mn.prototype={constructor:mn,init:null,view:null,key:null,data:null,state:null,api:null,opts:null,node:null,hooks:null,refs:null,render:null,mount:function(n,e){var t=this;return e?(J({el:n,flags:0}),t._redraw(null,null,!1),n.nodeName.toLowerCase()!==t.node.tag?(nn(t.node),Q(n.parentNode,t.node.el,n),n.parentNode.removeChild(n)):Q(n.parentNode,nn(t.node,n),n)):(t._redraw(null,null),n&&Q(n,t.node.el)),n&&W(t,!0),t},unmount:function(n){var e=this.node;X(e.el.parentNode,e.el),e.el=null,n||W(this,!0)},cfg:bn,config:bn,parent:function(){return m(this.node.parent)},root:function(){for(var n=this.node;n.parent;)n=n.parent;return n.vm},redraw:function(n){var e=this;return null==n&&(n=R),n?e._redraw(null,null,p(e)):(cn.add(e),0===vn&&(vn=requestAnimationFrame(yn))),e},update:function(n,e){var t=this;return null==e&&(e=R),t._update(n,null,null,p(t),e),e||t.redraw(),t},_update:function(n,e,t,l,r){var o=this;return null!=n&&o.data!==n&&(G(o.hooks,"willUpdate",o,n),o.data=n),r?o._redraw(e,t,l):o},_redraw:function(n,e,t){const l=null==n;var r,o=this,i=o.node&&o.node.el&&o.node.el.parentNode,u=null!=o.diff,a=o.node;if(null!=a&&l&&(n=a.parent,e=a.idx),u&&(r=o.diff.val(o,o.data,o.key,n,e),null!=a&&o.diff.eq(o,a._diff,r)))return a._diff=r,wn(o,a,n,e);i&&G(o.hooks,"willRedraw",o,o.data);var f=o.render.call(o,o,o.data,o.key,n,e);if(u&&(f._diff=r),f===a)return wn(o,a,n,e);if(o.refs=null,null!=o.key&&f.key!==o.key&&(f.key=o.key),o.node=f,n?(V(f,n,e,o),n.body[e]=f):a&&a.parent?(V(f,a.parent,a.idx,o),a.parent.body[a.idx]=f):V(f,null,null,o),!1!==t)if(a)if(a.tag!==f.tag||a.key!==f.key){a.vm=f.vm=null;var d=a.el.parentNode,s=Y(a.el);X(d,a.el),Q(d,nn(f),s),a.el=f.el,f.vm=o}else dn(f,a);else nn(f);return i&&G(o.hooks,"didRedraw",o,o.data),l&&i&&W(o,!0),o}};function wn(n,e,t,l){return null!=t&&(t.body[l]=e,e.idx=l,e.parent=t,e._lis=!1),n}kn.onevent=l;const _n="http://www.w3.org/2000/svg";function xn(n,e,t,l){this.view=n,this.data=e,this.key=t,this.opts=l}function Nn(n,e){this.vm=n,this.data=e}function Cn(n){var e,t,l=arguments,r=l.length;if(r>1){var i=1;o(l[1])&&(t=l[1],i=2),e=r!==i+1||l[i]instanceof g||l[i]instanceof xn||l[i]instanceof Nn?f(l,i):l[i]}return x(n,t,e)}function Sn(n,e){var t=n.body;if(r(t))for(var l=0;t.length>l;l++){var o=t[l];null!=o.vm?e.push(o.vm):Sn(o,e)}return e}return xn.prototype={constructor:xn,type:4,view:null,data:null,key:null,opts:null},Nn.prototype={constructor:Nn,type:5,vm:null,data:null},b.patch=function(n,e){!function(n,e,t){if(o(e)){var l=Object.create(n);l.attrs=a({},n.attrs),null!=e.class&&null!=n._class&&(e.class=n._class+" "+e.class),a(n.attrs,e),L(n,l),t&&y(n)}else{if(null!=n.vm)return;V(e,n.parent,n.idx,null),n.parent.body[n.idx]=e,dn(e,n),t&&y(e),W(m(e),!1)}}(this,n,e)},kn.emit=function(n){var e=this,t=e,l=f(arguments,1).concat(t,t.data);do{var r=e.onemit,o=r?r[n]:null;if(o){o.apply(e,l);break}}while(e=e.parent());C[n]&&C[n].apply(e,l)},kn.onemit=null,kn.body=function(){return Sn(this.node,[])},n.FIXED_BODY=2,n.KEYED_LIST=4,n.VNode=g,n.ViewModel=mn,n.cfg=I,n.config=I,n.createView=z,n.defineComment=function(n){let e=new g;return e.type=3,e.body=n,e},n.defineElement=sn,n.defineElementSpread=Cn,n.defineSvgElement=function(n,e,t,l){var r=sn(n,e,t,l);return r.ns=_n,r},n.defineSvgElementSpread=function(){var n=Cn.apply(null,arguments);return n.ns=_n,n},n.defineText=k,n.defineView=function(n,e,t,l){return new xn(n,e,t,l)},n.injectElement=function(n){let e=new g;return e.type=0,e.el=e.key=n,e},n.injectView=function(n,e){return new Nn(n,e)},n.list=function(n,e,t){return new N(n,e,t)},n}({});