riot/riot.min.js

Simple and elegant component-based UI library

var t,e;t=this,e=function(t){"use strict";const e=0,n=1,r=2,s=3,o=4,i={EACH:0,IF:1,SIMPLE:2,TAG:3,SLOT:4},u=new Map,a=Symbol(),c=new Set,l="is",h="value",d=/^on/,m="mount",p="update",f="unmount",b="shouldUpdate",g="onBeforeMount",y="onMounted",v="onBeforeUpdate",N="onUpdated",O="onBeforeUnmount",E="onUnmounted",T="props",x="state",M="slots",A="root",S=Symbol(),w=Symbol(),j=Symbol(),C=Symbol(),D=Symbol();function P(t,e){return typeof t===e}function I(t){const e=t.ownerSVGElement;return!!e||null===e}function _(t){return"template"===t.tagName.toLowerCase()}function L(t){return P(t,"function")}function k(t){return!B(t)&&t.constructor===Object}function B(t){return null==t}function U(t){return d.test(t)}function R(t){return t.replace(/-(\w)/g,(t,e)=>e.toUpperCase())}function $(t){return Array.from(t.attributes).reduce((t,e)=>(t[R(e.name)]=e.value,t),{})}function z(t){for(;t.firstChild;)t.removeChild(t.firstChild)}const K=t=>t.remove(),Y=(t,e)=>e&&e.parentNode&&e.parentNode.insertBefore(t,e),F=(t,e)=>e&&e.parentNode&&e.parentNode.replaceChild(t,e),G=0,H=1,V=2,q=3,W=4,X={ATTRIBUTE:0,EVENT:H,TEXT:2,VALUE:3,REF:W};function Z(){return this}function J(t){return L(t)?t.prototype&&t.prototype.constructor?new t:t():t}function Q(t){const e=new Map,n=n=>(e.has(n)||e.set(n,t.call(this,n)))&&e.get(n);return n.cache=e,n}function tt(t,e){return t.reduce((t,{type:n,name:r,evaluate:s})=>{const o=s(e);switch(!0){case!r&&0===n:return{...t,...o};case n===W:t.ref=o;break;case 3===n:t.value=o;break;default:t[R(r)]=o}return t},{})}function et(t,e,n,r={}){return Object.defineProperty(t,e,{value:n,enumerable:!1,writable:!1,configurable:!0,...r}),t}function nt(t,e,n){return Object.entries(e).forEach(([e,r])=>{et(t,e,r,n)}),t}function rt(t,e){return Object.entries(e).forEach(([e,n])=>{t[e]||(t[e]=n)}),t}const st={[m](t){this.el=t},[p]:Z,[f](t,e,n=!1){n?K(this.el):n||z(this.el)},clone(){return{...this}},createDOM:Z},ot=Symbol(),it=Symbol(),ut=Symbol(),at={nodes:[],mount(t,e){return this.update(t,e)},update(t,e){const{placeholder:n,nodes:r,childrenMap:s}=this,o=t===ut?null:this.evaluate(t),i=o?Array.from(o):[],{newChildrenMap:u,batches:a,futureNodes:c}=function(t,e,n,r){const{condition:s,template:o,childrenMap:i,itemName:u,getKey:a,indexName:c,root:l,isTemplateTag:h}=r,d=new Map,m=[],p=[];return t.forEach((t,r)=>{const f=function(t,{itemName:e,indexName:n,index:r,item:s}){return et(t,e,s),n&&et(t,n,r),t}(Object.create(e),{itemName:u,indexName:c,index:r,item:t}),b=a?a(f):r,g=i.get(b),y=[];if(function(t,e){return!!t&&!t(e)}(s,f))return;const v=!g,N=g?g.template:o.clone(),O=N.el||l.cloneNode(),E=h&&v?function(t){const e=t.dom.cloneNode(!0),{head:n,tail:r}=function(){const t=document.createTextNode(""),e=document.createTextNode("");return t[ot]=!0,e[it]=!0,{head:t,tail:e}}();return{avoidDOMInjection:!0,fragment:e,head:n,tail:r,children:[n,...Array.from(e.childNodes),r]}}(N):N.meta;v?m.push(()=>N.mount(O,f,n,E)):m.push(()=>N.update(f,n)),h?y.push(...E.children):y.push(O),i.delete(b),p.push(...y),d.set(b,{nodes:y,template:N,context:f,index:r})}),{newChildrenMap:d,batches:m,futureNodes:p}}(i,t,e,this);return((t,e,n,r)=>{const s=e.length;let o=t.length,i=s,u=0,a=0,c=null;for(;u<o||a<i;)if(o===u){const t=i<s?a?n(e[a-1],-0).nextSibling:n(e[i-a],0):r;for(;a<i;)Y(n(e[a++],1),t)}else if(i===a)for(;u<o;)c&&c.has(t[u])||K(n(t[u],-1)),u++;else if(t[u]===e[a])u++,a++;else if(t[o-1]===e[i-1])o--,i--;else if(t[u]===e[i-1]&&e[a]===t[o-1]){const r=n(t[--o],-1).nextSibling;Y(n(e[a++],1),n(t[u++],-1).nextSibling),Y(n(e[--i],1),r),t[o]=e[i]}else{if(!c){c=new Map;let t=a;for(;t<i;)c.set(e[t],t++)}if(c.has(t[u])){const r=c.get(t[u]);if(a<r&&r<i){let s=u,l=1;for(;++s<o&&s<i&&c.get(t[s])===r+l;)l++;if(l>r-a){const s=n(t[u],0);for(;a<r;)Y(n(e[a++],1),s)}else F(n(e[a++],1),n(t[u++],-1))}else u++}else K(n(t[u++],-1))}})(r,c,function(t,e){return(n,r)=>{if(r<0){const n=t[t.length-1];if(n){const{template:r,nodes:s,context:o}=n;s.pop(),s.length||(t.pop(),r.unmount(o,e,null))}}return n}}(Array.from(s.values()),e),n),a.forEach(t=>t()),this.childrenMap=u,this.nodes=c,this},unmount(t,e){return this.update(ut,e),this}},ct={mount(t,e){return this.update(t,e)},update(t,e){const n=!!this.evaluate(t),r=!this.value&&n,s=this.value&&!n,o=()=>{const n=this.node.cloneNode();Y(n,this.placeholder),this.template=this.template.clone(),this.template.mount(n,t,e)};switch(!0){case r:o();break;case s:this.unmount(t);break;default:n&&this.template.update(t,e)}return this.value=n,this},unmount(t,e){return this.template.unmount(t,e,!0),this}};function lt({node:t,value:e},n){n?n(t):e(null)}function ht(t){return B(t)?"":t}function dt({node:t},e){t.value=ht(e)}const mt=/^on/,pt={handleEvent(t){this[t.type](t)}},ft=new WeakMap;function bt({node:t,name:e},n){const r=e.replace(mt,""),s=ft.get(t)||(t=>{const e=Object.create(pt);return ft.set(t,e),e})(t),[o,i]=(t=>Array.isArray(t)?t:[t,!1])(n),u=s[r],a=o&&!u;u&&!o&&t.removeEventListener(r,s),a&&t.addEventListener(r,s,i),s[r]=o}const gt="undefined"==typeof Element?{}:Element.prototype,yt=Q(t=>gt.hasOwnProperty(t)),vt=(t,e)=>t.childNodes[e],Nt={[G]:function t({node:e,name:n,isBoolean:r,value:s},o){if(!n)return s&&function(t,e,n){const r=e?Object.keys(e):[];Object.entries(n).filter(([t])=>!r.includes(t)).forEach(([e,n])=>{switch(!0){case"ref"===e:return lt({node:t,value:n});case e===h:return t.removeAttribute("value"),void(t.value="");case U(e):return bt({node:t,name:e},null);default:return t.removeAttribute(e)}})}(e,o,s),void(o&&function(e,n,r){Object.entries(n).filter(([t,e])=>e!==r?.[t]).forEach(([n,r])=>{switch(!0){case"ref"===n:return lt({node:e},r);case n===h:return dt({node:e},r);case U(n):return bt({node:e,name:n},r);default:return t({node:e,name:n},r)}})}(e,o,s));!yt(n)&&(function(t){return P(t,"boolean")}(o)||k(o)||L(o))&&(e[n]=o),function(t,e){return e?!t:B(t)}(o,r)?e.removeAttribute(n):function(t){return["string","number","boolean"].includes(typeof t)}(o)&&e.setAttribute(n,function(t,e,n){return e&&n?t:e}(n,o,r))},[H]:bt,[V]:function({node:t},e){t.data=ht(e)},[q]:dt,[W]:lt},Ot={mount(t){const e=this.evaluate(t);return Nt[this.type](this,e),this.value=e,this},update(t){const e=this.evaluate(t);return this.value!==e&&(Nt[this.type](this,e),this.value=e),this},unmount(){return([H,W].includes(this.type)||0===this.type&&!this.name)&&Nt[this.type](this,null),this}};function Et(t,e){return{...Ot,...e,node:2===e.type?vt(t,e.childNodeIndex):t}}const Tt=(t,e)=>e?.find(e=>e.id===t),xt=(t,e)=>t[j]||e,Mt={attributes:[],getTemplateScope(t,e){return((t,e,n)=>t&&t.length?Object.assign(Object.create(n||null),tt(t,e)):n)(this.attributes,t,e)},mount(t,e){const n=!!t.slots&&Tt(this.name,t.slots),{parentNode:r}=this.node,s=n?xt(t,e):t;return this.templateData=n?.html?n:Tt(this.name,s.slots),this.template=this.templateData&&It(this.templateData.html,this.templateData.bindings).createDOM(r)||this.template?.clone(),this.template&&(z(this.node),this.template.mount(this.node,this.getTemplateScope(t,s),s),this.template.children=Array.from(this.node.childNodes)),At(this.node),K(this.node),this},update(t,e){if(this.template){const n=this.templateData?xt(t,e):t;this.template.update(this.getTemplateScope(t,n),n)}return this},unmount(t,e,n){return this.template&&this.template.unmount(this.getTemplateScope(t,e),null,n),this}};function At(t){const e=t&&t.firstChild;e&&(Y(e,t),At(t))}function St(t){return t.reduce((t,{bindings:e})=>t.concat(e),[])}const wt={mount(t){return this.update(t)},update(t,e){const n=this.evaluate(t);return n&&n===this.name?this.tag.update(t):(this.unmount(t,e,!0),this.name=n,this.tag=function(t,e=[],n=[]){return t?t({slots:e,attributes:n}):It(function(t){return t.reduce((t,e)=>t+e.html,"")}(e),[...St(e),{expressions:n.map(t=>({type:0,...t}))}])}(this.getComponent(n),this.slots,this.attributes),this.tag.mount(this.node,t)),this},unmount(t,e,n){return this.tag&&this.tag.unmount(n),this}},jt={[n]:function(t,{evaluate:e,template:n}){const r=document.createTextNode("");return Y(r,t),K(t),{...ct,node:t,evaluate:e,placeholder:r,template:n.createDOM(t)}},[r]:function(t,{expressions:e}){return n=e.map(e=>Et(t,e)),["mount","update","unmount"].reduce((t,e)=>({...t,[e]:t=>n.map(n=>n[e](t))&&void 0}),{});var n},[e]:function(t,{evaluate:e,condition:n,itemName:r,indexName:s,getKey:o,template:i}){const u=document.createTextNode(""),a=t.cloneNode();return Y(u,t),K(t),{...at,childrenMap:new Map,node:t,root:a,condition:n,evaluate:e,isTemplateTag:_(a),template:i.createDOM(t),getKey:o,indexName:s,itemName:r,placeholder:u}},[s]:function(t,{evaluate:e,getComponent:n,slots:r,attributes:s}){return{...wt,node:t,evaluate:e,slots:r,attributes:s,getComponent:n}},[o]:function(t,{name:e,attributes:n,template:r}){return{...Mt,attributes:n,template:r,node:t,name:e}}};function Ct(t,e){return t.map(t=>2===t.type?{...t,childNodeIndex:t.childNodeIndex+e}:t)}function Dt(t,e,n){const{selector:r,type:s,redundantAttribute:o,expressions:i}=e,u=r?t.querySelector(r):t;o&&u.removeAttribute(o);const a=i||[];return(jt[s]||jt[2])(u,{...e,expressions:n&&!r?Ct(a,n):a})}const Pt={createDOM(t){return this.dom=this.dom||function(t,e){return e&&("string"==typeof e?function(t,e){return I(t)?function(t,e){return e.ownerDocument.importNode((new window.DOMParser).parseFromString(`<svg xmlns="http://www.w3.org/2000/svg">${t}</svg>`,"application/xml").documentElement,!0)}(e,t):function(t,e){const n=_(e)?e:document.createElement("template");return n.innerHTML=t,n.content}(e,t)}(t,e):e)}(t,this.html)||document.createDocumentFragment(),this},mount(t,e,n,r={}){this.el&&this.unmount(e);const{fragment:s,children:o,avoidDOMInjection:i}=r,{parentNode:u}=o?o[0]:t,a=_(t),c=a?function(t,e,n){const r=Array.from(t.childNodes);return Math.max(r.indexOf(e),r.indexOf(n.head)+1,0)}(u,t,r):null;this.createDOM(t);const l=s||this.dom.cloneNode(!0);return this.el=a?u:t,this.children=a?o||Array.from(l.childNodes):null,!i&&l&&function(t,e){switch(!0){case I(t):!function(t,e){for(;t.firstChild;)e.appendChild(t.firstChild)}(e,t);break;case _(t):t.parentNode.replaceChild(e,t);break;default:t.appendChild(e)}}(t,l),this.bindings=this.bindingsData.map(t=>Dt(this.el,t,c)),this.bindings.forEach(t=>t.mount(e,n)),this.meta=r,this},update(t,e){return this.bindings.forEach(n=>n.update(t,e)),this},unmount(t,e,n=!1){const r=this.el;if(!r)return this;switch(this.bindings.forEach(r=>r.unmount(t,e,n)),!0){case r[S]||null===n:break;case Array.isArray(this.children):!function(t){for(let e=0;e<t.length;e++)K(t[e])}(this.children);break;case!n:z(r);break;case!!n:K(r)}return this.el=null,this},clone(){return{...this,meta:{},el:null}}};function It(t,e=[]){return{...Pt,html:t,bindingsData:e}}const _t=Object.freeze({[m]:Z,[p]:Z,[f]:Z}),Lt=(t,e)=>t[a]=e;function kt(t,{slots:e,attributes:n,props:r,css:s,template:o}){const i=rt(t({slots:e,attributes:n,props:r}),_t);return u=t=>(...e)=>{if(t===m){const[t]=e;et(t,S,!0),Lt(t,i)}return i[t](...e),i},[m,p,f].reduce((t,e)=>(t[e]=u(e),t),{});var u}function Bt(t){return Array.isArray(t)?t:/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(t))&&"number"==typeof t.length?Array.from(t):[t]}function Ut(t,e){return Bt("string"==typeof t?(e||document).querySelectorAll(t):t)}const Rt=Object.freeze({$(t){return Ut(t,this.root)[0]},$$(t){return Ut(t,this.root)}}),$t=Object.freeze({[b]:Z,[g]:Z,[y]:Z,[v]:Z,[N]:Z,[O]:Z,[E]:Z}),zt=t=>1===t.length?t[0]:t;function Kt(t,e,n){const r="object"==typeof e?e:{[e]:n},s=Object.keys(r);return Bt(t).forEach(t=>{s.forEach(e=>t.setAttribute(e,r[e]))}),t}const Yt=new Map;var Ft;const Gt={CSS_BY_NAME:Yt,add(t,e){return Yt.has(t)||(Yt.set(t,e),this.inject()),this},inject(){return(Ft||(Kt(Ft=Ut("style[riot]")[0]||document.createElement("style"),"type","text/css"),Ft.parentNode||document.head.appendChild(Ft),Ft)).innerHTML=[...Yt.values()].join("\n"),this},remove(t){return Yt.has(t)&&(Yt.delete(t),this.inject()),this}};function Ht(t,...e){return(...n)=>(n=[...e,...n]).length<t.length?Ht(t,...n):t(...n)}const Vt=Q(t=>{const e=t?.bindingsData?.[0];return e?.selector?[]:e?.expressions?.reduce((t,{name:e,type:n})=>n===X.ATTRIBUTE?t.concat([e]):t,[])??[]});function qt(t){return function(t,e){const n="string"==typeof e?[e]:e;return zt(Bt(t).map(t=>zt(n.map(e=>t.getAttribute(e)))))}(t,l)||t.tagName.toLowerCase()}function Wt(t,e){return{...t,...J(e)}}function Xt(t,e={}){return{...$(t),...J(e)}}function Zt(t,{slots:e,attributes:n=[],props:r}){return s=function(t){return[...c].reduce((t,e)=>e(t)||t,t)}(nt(k(t)?Object.create(t):t,{mount(s,o={},i){return et(s,S,!1),this[j]=i,et(this,T,Object.freeze({...Xt(s,r),...tt(n,i)})),this[x]=Wt(this[x],o),this[C]=this.template.createDOM(s).clone(),this[D]=Vt(this[C]),Lt(s,this),t.name&&function(t,e){qt(t)!==e&&Kt(t,l,e)}(s,t.name),et(this,A,s),et(this,M,e),this[g](this[T],this[x]),this[C].mount(s,this,i),this[y](this[T],this[x]),this},update(t={},e){e&&(this[j]=e);const r=$({attributes:Array.from(this[A].attributes).filter(({name:t})=>!this[D].includes(t))}),{[l]:s,...o}={...r,...tt(n,this[j])};if(!1!==this[b](o,this[T]))return et(this,T,Object.freeze({...e?null:this[T],...o})),this[x]=Wt(this[x],t),this[v](this[T],this[x]),this[w]||(this[w]=!0,this[C].update(this,this[j])),this[N](this[T],this[x]),this[w]=!1,this},unmount(t){return this[O](this[T],this[x]),t&&this[D].forEach(t=>this[A].removeAttribute(t)),this[C].unmount(this,this[j],null===t?null:!t),this[E](this[T],this[x]),this}})),Object.keys(t).filter(e=>L(t[e])).forEach(t=>{s[t]=s[t].bind(s)}),s;var s}function Jt({css:t,template:e,componentAPI:n,name:r}){return t&&r&&Gt.add(r,t),Ht(Zt)(nt(rt(n,{...$t,[T]:{},[x]:{}}),{[M]:null,[A]:null,...Rt,name:r,css:t,template:e}))}const Qt=Q(te);function te(t){const{css:e,template:n,exports:r,name:s}=t,o=n?function(t,e,n){return t(It,X,i,n)}(n,0,(t=>{const e=function(t={}){return Object.entries(J(t)).reduce((t,[e,n])=>{var r;return t[(r=e,r.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase())]=te(n),t},{})}(t.exports?t.exports.components:{});return n=>n===t.name?Qt(t):e[n]||u.get(n)})(t)):st;return({slots:t,attributes:i,props:u})=>{if(r&&r[S])return kt(r,{slots:t,attributes:i,props:u,css:e,template:n});const a=J(r)||{},c=Jt({css:e,template:o,componentAPI:a,name:s})({slots:t,attributes:i,props:u});return{mount:(t,e,n)=>c.mount(t,n,e),update:(t,e)=>c.update(e,t),unmount:t=>c.unmount(t)}}}function ee(t){return L(t),t[S]=!0,t}const ne={cssManager:Gt,DOMBindings:{template:It,createBinding:Dt,createExpression:Et,bindingTypes:i,expressionTypes:X},globals:{PROPS_KEY:T,STATE_KEY:x,IS_COMPONENT_UPDATING:w,COMPONENTS_IMPLEMENTATION_MAP:u,PLUGINS_SET:c,DOM_COMPONENT_INSTANCE_PROPERTY:a,PARENT_KEY_SYMBOL:j}};t.__=ne,t.component=function(t){return(e,n,{slots:r,attributes:s,parentScope:o}={})=>function(...t){return t.reduce((t,e)=>(...n)=>t(e(...n)))}(t=>t.mount(e,o),t=>t({props:n,slots:r,attributes:s}),te)(t)},t.createPureComponent=function(t,e){return{name:e,exports:ee(({slots:e,attributes:n,props:r})=>kt(t,{attributes:n,slots:e,props:r}))}},t.install=function(t){return L(t),c.has(t),c.add(t),c},t.mount=function(t,e,n){return Ut(t).map(t=>function(t,e,n){const r=n||qt(t);return u.has(r),u.get(r)({props:e,slots:void 0}).mount(t)}(t,e,n))},t.pure=ee,t.register=function(t,{css:e,template:n,exports:r}){return u.has(t),u.set(t,te({name:t,css:e,template:n,exports:r})),u},t.uninstall=function(t){return c.has(t),c.delete(t),c},t.unmount=function(t,e){return Ut(t).map(t=>(t[a]&&t[a].unmount(e),t))},t.unregister=function(t){return u.has(t),u.delete(t),Gt.remove(t),u},t.version="v10.1.0",t.withTypes=t=>t},"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).riot={});