uhtml/async.js

A micro HTML/SVG render

self.uhtml=function(e){"use strict";const{isArray:t}=Array,n=(e,r)=>{const s=[];for(const{length:l}=e;r<l;r++)s.push(t(e[r])?n(e[r],0):e[r]);return Promise.all(s)};var r=e=>{function t(t,n){return e.apply(this,[t].concat(n))}return function(e){return n(arguments,1).then(t.bind(this,e))}},s=e=>({get:t=>e.get(t),set:(t,n)=>(e.set(t,n),n)});const l=/([^\s\\>"'=]+)\s*=\s*(['"]?)$/,o=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,a=/<[a-z][^>]+$/i,i=/>[^<>]*$/,c=/<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/>)/gi,u=/\s+$/,d=(e,t)=>0<t--&&(a.test(e[t])||!i.test(e[t])&&d(e,t)),p=(e,t,n)=>o.test(t)?e:`<${t}${n.replace(u,"")}></${t}>`;const{isArray:f}=Array,{indexOf:h,slice:m}=[],g=(e,t)=>111===e.nodeType?1/t<0?t?(({firstChild:e,lastChild:t})=>{const n=document.createRange();return n.setStartAfter(e),n.setEndAfter(t),n.deleteContents(),e})(e):e.lastChild:t?e.valueOf():e.firstChild:e;const v=e=>document.createElementNS("http://www.w3.org/1999/xhtml",e),y=(e,t)=>("svg"===t?b:w)(e),w=e=>{const t=v("template");return t.innerHTML=e,t.content},b=e=>{const{content:t}=v("template"),n=v("div");n.innerHTML='<svg xmlns="http://www.w3.org/2000/svg">'+e+"</svg>";const{childNodes:r}=n.firstChild;let{length:s}=r;for(;s--;)t.appendChild(r[0]);return t},N=({childNodes:e},t)=>e[t],$=e=>{const t=[];let{parentNode:n}=e;for(;n;)t.push(h.call(n.childNodes,e)),n=(e=n).parentNode;return t},{createTreeWalker:x,importNode:C}=document,k=1!=C.length,A=k?(e,t,n)=>C.call(document,y(e,t),!0):y,E=k?e=>x.call(document,e,129,null,!1):e=>x.call(document,e,129),T=(e,t,n)=>((e,t,n,r,s)=>{const l=n.length;let o=t.length,a=l,i=0,c=0,u=null;for(;i<o||c<a;)if(o===i){const t=a<l?c?r(n[c-1],-0).nextSibling:r(n[a-c],0):s;for(;c<a;)e.insertBefore(r(n[c++],1),t)}else if(a===c)for(;i<o;)u&&u.has(t[i])||e.removeChild(r(t[i],-1)),i++;else if(t[i]===n[c])i++,c++;else if(t[o-1]===n[a-1])o--,a--;else if(t[i]===n[a-1]&&n[c]===t[o-1]){const s=r(t[--o],-1).nextSibling;e.insertBefore(r(n[c++],1),r(t[i++],-1).nextSibling),e.insertBefore(r(n[--a],1),s),t[o]=n[a]}else{if(!u){u=new Map;let e=c;for(;e<a;)u.set(n[e],e++)}if(u.has(t[i])){const s=u.get(t[i]);if(c<s&&s<a){let l=i,d=1;for(;++l<o&&l<a&&u.get(t[l])===s+d;)d++;if(d>s-c){const l=r(t[i],0);for(;c<s;)e.insertBefore(r(n[c++],1),l)}else e.replaceChild(r(n[c++],1),r(t[i++],-1))}else i++}else e.removeChild(r(t[i++],-1))}return n})(e.parentNode,t,n,g,e),M=(e,t)=>{switch(t[0]){case"?":return((e,t,n)=>r=>{n!==!!r&&((n=!!r)?e.setAttribute(t,""):e.removeAttribute(t))})(e,t.slice(1),!1);case".":return((e,t)=>"dataset"===t?(({dataset:e})=>t=>{for(const n in t){const r=t[n];null==r?delete e[n]:e[n]=r}})(e):n=>{e[t]=n})(e,t.slice(1));case"o":if("n"===t[1])return((e,t)=>{let n,r=t.slice(2);return!(t in e)&&t.toLowerCase()in e&&(r=r.toLowerCase()),t=>{const s=f(t)?t:[t,!1];n!==s[0]&&(n&&e.removeEventListener(r,n,s[1]),(n=s[0])&&e.addEventListener(r,n,s[1]))}})(e,t)}switch(t){case"ref":return(e=>{let t;return n=>{t!==n&&(t=n,"function"==typeof n?n(e):n.current=e)}})(e);case"aria":return(e=>t=>{for(const n in t){const r="role"===n?n:`aria-${n}`,s=t[n];null==s?e.removeAttribute(r):e.setAttribute(r,s)}})(e)}return((e,t)=>{let n,r=!0;const s=document.createAttributeNS(null,t);return t=>{n!==t&&(n=t,null==n?r||(e.removeAttributeNode(s),r=!0):(s.value=t,r&&(e.setAttributeNodeNS(s),r=!1)))}})(e,t)};function O(e){const{type:t,path:n}=e,r=n.reduceRight(N,this);return"node"===t?(e=>{let t,n,r=[];const s=l=>{switch(typeof l){case"string":case"number":case"boolean":t!==l&&(t=l,n||(n=document.createTextNode("")),n.data=l,r=T(e,r,[n]));break;case"object":case"undefined":if(null==l){t!=l&&(t=l,r=T(e,r,[]));break}if(f(l)){t=l,0===l.length?r=T(e,r,[]):"object"==typeof l[0]?r=T(e,r,l):s(String(l));break}t!==l&&"ELEMENT_NODE"in l&&(t=l,r=T(e,r,11===l.nodeType?m.call(l.childNodes):[l]));break;case"function":s(l(e))}};return s})(r):"attr"===t?M(r,e.name):(e=>{let t;return n=>{t!=n&&(t=n,e.textContent=null==n?"":n)}})(r)}const L="isµ",S=s(new WeakMap),j=/^(?:plaintext|script|style|textarea|title|xmp)$/i,W=(e,t)=>{const n=((e,t,n)=>{const r=[],{length:s}=e;for(let n=1;n<s;n++){const s=e[n-1];r.push(l.test(s)&&d(e,n)?s.replace(l,((e,r,s)=>`${t}${n-1}=${s||'"'}${r}${s?"":'"'}`)):`${s}\x3c!--${t}${n-1}--\x3e`)}r.push(e[s-1]);const o=r.join("").trim();return n?o:o.replace(c,p)})(t,L,"svg"===e),r=A(n,e),s=E(r),o=[],a=t.length-1;let i=0,u=`isµ${i}`;for(;i<a;){const e=s.nextNode();if(!e)throw`bad template: ${n}`;if(8===e.nodeType)e.data===u&&(o.push({type:"node",path:$(e)}),u="isµ"+ ++i);else{for(;e.hasAttribute(u);)o.push({type:"attr",path:$(e),name:e.getAttribute(u)}),e.removeAttribute(u),u="isµ"+ ++i;j.test(e.tagName)&&e.textContent.trim()===`\x3c!--${u}--\x3e`&&(e.textContent="",o.push({type:"text",path:$(e)}),u="isµ"+ ++i)}}return{content:r,nodes:o}},B=(e,t)=>{const{content:n,nodes:r}=S.get(t)||S.set(t,W(e,t)),s=C.call(document,n,!0);return{content:s,updates:r.map(O,s)}},P=(e,{type:t,template:n,values:r})=>{const{length:s}=r;z(e,r,s);let{entry:l}=e;l&&l.template===n&&l.type===t||(e.entry=l=((e,t)=>{const{content:n,updates:r}=B(e,t);return{type:e,template:t,content:n,updates:r,wire:null}})(t,n));const{content:o,updates:a,wire:i}=l;for(let e=0;e<s;e++)a[e](r[e]);return i||(l.wire=(e=>{const{childNodes:t}=e,{length:n}=t;if(n<2)return n?t[0]:e;const r=m.call(t,0);return{ELEMENT_NODE:1,nodeType:111,firstChild:r[0],lastChild:r[n-1],valueOf(){if(t.length!==n){let t=0;for(;t<n;)e.appendChild(r[t++])}return e}}})(o))},z=({stack:e},t,n)=>{for(let r=0;r<n;r++){const n=t[r];n instanceof H?t[r]=P(e[r]||(e[r]={stack:[],entry:null,wire:null}),n):f(n)?z(e[r]||(e[r]={stack:[],entry:null,wire:null}),n,n.length):e[r]=null}n<e.length&&e.splice(n)};function H(e,t,n){this.type=e,this.template=t,this.values=n}const{create:_,defineProperties:D}=Object,R=e=>{const t=s(new WeakMap);return D(((t,...n)=>new H(e,t,n)),{for:{value(n,r){const s=t.get(n)||t.set(n,_(null));return s[r]||(s[r]=(t=>(n,...r)=>P(t,{type:e,template:n,values:r}))({stack:[],entry:null,wire:null}))}},node:{value:(t,...n)=>P({stack:[],entry:null,wire:null},{type:e,template:t,values:n}).valueOf()}})},q=s(new WeakMap),F=R("html"),G=R("svg"),{defineProperties:I}=Object,J=e=>{const t=s(new WeakMap);return I(r(e),{for:{value(n,s){const l=e.for(n,s);return t.get(l)||t.set(l,r(l))}},node:{value:r(e.node)}})},K=J(F),Q=J(G);return e.Hole=H,e.html=K,e.render=(e,t)=>{const n="function"==typeof t?t():t;return Promise.resolve(n).then((t=>((e,t)=>{const n="function"==typeof t?t():t,r=q.get(e)||q.set(e,{stack:[],entry:null,wire:null}),s=n instanceof H?P(r,n):n;return s!==r.wire&&(r.wire=s,e.textContent="",e.appendChild(s.valueOf())),e})(e,t)))},e.svg=Q,e}({});