hta
Version:
The tiny framework for building Hyper Text Application with ease
2 lines (1 loc) • 12.7 kB
JavaScript
var hta=function(){"use strict";let e=Symbol("inner"),t=Symbol("text"),n=Symbol("list"),r=Symbol("template"),o=Symbol("placeholder"),i=Symbol("directive"),l=Symbol("renderer"),u=Symbol("binder"),c=()=>{},a=document,f={},s=[],d=Symbol("change"),p=Symbol("watch"),h={},m="function",y=Date,g=RegExp,b=Symbol("value");function k(){return a.createTextNode("")}function v(e){return e&&"function"==typeof e.then}let x=[].slice,N=[].indexOf,S=Array.isArray,w=Promise.resolve().then.bind(Promise.resolve()),$="undefined"==typeof requestAnimationFrame?w:requestAnimationFrame;let M=function(e){let t=new Map;function n(e){let n=t;for(let t=0;t<e.length;t++){let r=e[t],o=n.get(r);o||(o=new Map,o.set(b,c),n.set(r,o)),n=o}return n}return t.set(b,c),{get(t,r=e){let o=n(t),i=o.get(b);return i===c&&r&&o.set(b,i=r(t)),i},set(e,t){n(e).set(b,t)}}}((function(e){let t=Symbol();if(1===e.length)return{id:t,html:e[0],query:null,slots:s};let n=[],r=[],l=[],u=0,c=[...e.join("@@hta").matchAll(T)];for(;c.length;){let[e]=c.shift();switch(e[0]){case"<":u="/"===e[1]?0:1;break;case">":u=0;break;case"@":let t="hta-"+n.length;l.push(`[${t}="1"]`),r.push(1===u?` ${t}="1" `:`<template hta-slot="1" ${t}="1"></template>`),n[n.length]=1===u?i:o}}return{id:t,html:e.reduce(((e,t,n)=>e+r[n-1]+t)),query:l.join(","),slots:n}})),A="template",j="hta-slot",T=/(?:<\/?[^\s>]+|@@hta|>)/g;function q(e){return e.toUpperCase&&(e=[e]),E(void 0,e,x.call(arguments,1))}function E(e,t,n){let o=M.get(t),{id:i,html:l,query:u,slots:c}=o;return{id:i,key:e,type:r,equal:e=>e.id===i,dynamic:!!n.length,values:n,render(e){o.template||(o.template=function(e,t,n,r){let o=e.parentNode&&e.parentNode.namespaceURI,i=o?a.createElementNS(o,A):a.createElement(A);i.innerHTML=t;let l=n?[...(i.content||i).querySelectorAll(n)].map(((e,t)=>{let n={path:I(e),bindings:r.map(((e,t)=>({index:t,type:e}))).filter((t=>"1"===e.getAttribute("hta-"+t.index)))};if("1"===e.getAttribute(j)){let t=k();e.before(t),e.remove()}return n})):s;return{isSvg:!!o,childNodes:[...(i.content||i).childNodes],attachedNodes:l}}(e,l,u,c));let t=o.template.childNodes.map((e=>e.cloneNode(!0)));e.before(...t);let n=[],r=o.template.attachedNodes.length,i={childNodes:t};for(;r--;){let e=o.template.attachedNodes[r],t=e.path.reduce(((e,t)=>e.childNodes[t]),i);for(let r=0;r<e.bindings.length;r++){let o=e.bindings[r];n.unshift({node:t,type:o.type,index:o.index})}}return[t,n,function(e){let t=n.length;for(;t--;)n[t].value=e.values[n[t].index]}]}}}function I(e){let t=[];for(;e.parentNode;){let n=N.call(e.parentNode.childNodes,e);t.unshift(n),e=e.parentNode}return t}function L(){let e,t,n=new Map;function r(r){if(e===r)return t;let o=n.get(r);if(e=r,o)return t=o;let i,l,u=[],a=0,f=!1;function s(e){if(f)return e(l),c;let t=!0;return d().push(e),()=>{if(!t)return;t=!1;let n=d(),r=n.indexOf(e);-1!==r&&n.splice(r,1)}}function d(){return a?i||(i=u.slice(0),i):u}function p(e){try{a++;let t=u.length;if("function"==typeof e)for(let n=0;n<t;n++)e(u[n]);else for(let n=0;n<t;n++)u[n](e)}finally{a--,!a&&i&&(u=i,i=void 0)}}function h(){d().length=0}return t=o={on:s,emit:function(e){!f&&p(e)},emitOnce:function(e){f||(f=!0,l=e,p(e),h())},clear:h,once:function(e){let t=s((function(){return t(),e.apply(this,arguments)}));return t},length:function(){return(i||u).length}},n.set(r,o),o}return{on:function(e,t=c){return r(e).on(t)},once:function(e,t=c){return r(e).once(t)},emit:function(e,t){return r(e).emit(t)},emitOnce:function(e,t){return r(e).emitOnce(t)},get:r,has:function(e){let t=n.get(e);return t&&t.length()},clear(e){e?(r(e).clear(),delete n[e]):n={}}}}function B({error:e}){throw e}function O(e,t,n,r,o,i){let l=e[t];return l&&(l.type!==n||r&&r(l))&&(l.unmount(),l=null),l||(e[t]=l=i?o.apply(null,i):o(),l.type=n),l}function U(e,t){if(e===t)return!0;for(let n in e)if(e[n]!==t[n])return!1;for(let n in t)if(e[n]!==t[n])return!1;return!0}function C(e){e&&e.reorder&&e.reorder()}function V(e){e&&e.unmount&&e.unmount()}function H(e,t,n,r,o,i,u,c,a){if(c||(c=f),a&&(c={children:a,...c}),u.type===l)return u(t,n,r,o,i,c,e);O(r,o,u,null,P,[e,t,n,i,u]).update(c)}function P(t,n,r,o,i){let l,u,c,a,f=k(),s={},d=!0,p=n.extras.component,y=[],g=!1,b=new Map,x=!1,N={updates:0,firstNode:()=>s[e].firstNode(),forceUpdate:T,forceUpdateAsync:function(){let e=u={};w((()=>{e===u&&T()}))},update:function(e){if(l&&U(l,e))return;T(e)},unmount:function(){if(g)return;g=!0;for(let e of b.values())e&&e();V(s[e]),f.remove(),j(p.unmount)},select:E,reorder:function(){o.before(f),C(s[e])},subscribe:A},$={},M={select:E,dispatch:n.store.dispatch,getState:function(e){!x&&arguments.length&&($=("function"==typeof e?e():e)||$);return $},setState:function(e,t){let n=function(e,t,n,r){if(!t||t===e)return e;"function"==typeof t&&(t=t(e));let o=e;for(let r in t){let i=t[r];o[r]!==i&&(o===e&&(o={...e}),o[r]=n&&v(i)?n(r,i,o[r]):i)}return o}($,e);n!==$&&($=n,T(),t&&t($))}};function A(e,t){b.has(e)||b.set(e,e(t))}function j(e,t){e&&e({...t,app:n,context:r,instance:N,component:i,props:l})}function T(){arguments.length&&(l=arguments[0]);let o=h.current;h.current={app:n,context:r,component:N,props:l},c=null,a&&j(p.error,{error:a}),y=[],j(p.updating);try{N.updates++;let u=i(l,M);x=!0,t(n,r,s,e,f,u)}catch(e){j(p.error,{error:e})}finally{N.updates--,h.current=o,d&&(d=!1,j(p.mount)),j(p.updated)}}function q(){if(!g){a=void 0;try{let e=n.store.getState();if(y.every((t=>{return n=t.selector(e),r=t.value,n===r||!("object"!=typeof n||"object"!=typeof r||v(n)||v(r)||S(n)||S(r))&&(null!==n||!r)&&(null!==r||!n)&&U(n,r);var n,r})))return}catch(e){a=e}T()}}function E(e){if(typeof e!==m)return S(e)?e.map(E):E((t=>t[e]));c||(c=n.store.getState());let t=e(c);return y[y.length]={selector:e,value:t},A(n.store.subscribe,q),t}return o.before(f),j(p.init),N}function F(e){return e&&e.firstNode&&e.firstNode()}function R(t,r,o,i){let l={children:[],keyToIndex:new Map};return{type:n,firstNode:()=>l.children[0]&&F(l.children[0][e]),unmount:function(){let t=l.children.length;for(;t--;){let n=l.children[t];V(n[e]),n.marker.remove()}},update:function(n){if(n===l.list)return;let u=!l.list||!l.list.length;l.list=n;let c=[],a=new Map,f=i.parentNode,s=0,d=0,p=0;for(let i=0;i<n.length;i++){let[h,m]=D(n,i),y=l.children[l.keyToIndex.get(m)],g=y||{key:m,item:h,changed:!0};g.item!==h&&(s++,g.changed=!0,g.item=h),l.children[i]&&g.key===l.children[i].key||d++,y||p++,c[i]=g,a.set(m,i),l.keyToIndex.delete(m),u&&(g.item=h,g.marker=k(),f.appendChild(g.marker),t(r,o,g,e,g.marker,g.item))}if(!u&&(p||s||n.length!==l.children.length)){if(p||l.children.length!==n.length)for(let t=l.children.length-1;t>=0;t--){let n=l.children[t];l.keyToIndex.has(n.key)&&(l.children.splice(t,1),V(n[e]),n.marker.remove())}if(p||d||l.children.length!==n.length){let i=null,u=n.length;for(;u--;){let n=c[u],a=l.children[u];n.marker||(n.marker=k(),f.insertBefore(n.marker,i)),n.changed&&(n.changed=!1,t(r,o,n,e,n.marker,n.item)),a&&n.key!==a.key&&(f.insertBefore(n.marker,i),C(n[e])),i=F(n[e])}}else{let i=n.length;for(;i--;){let n=c[i];n.changed&&(n.changed=!1,t(r,o,n,e,n.marker,n.item))}}}l.children=c,l.keyToIndex=a},reorder:function(){if(!l.children.length)return;i.before(...l.children.map((e=>e.marker)));let t=l.children.length;for(;t--;)C(l.children[t][e])}}}function D(e,t){let n=e[t],r=void 0;return S(n)&&typeof n[0]===m?r=(n[1]||c).key:n&&(r=n.key),[n,void 0===r?t:r]}function W(e,t,n,r,o,i){let l=n[r];if(l||(n[r]=l={attr:new Map,prop:new Map,event:new Map,class:new Map,style:new Map,custom:new Map}),"function"!=typeof i||(i=i(o,l)))for(let n in i){let r=i[n];if("o"===n[0]&&"n"===n[1])if(2===n.length){if(r)for(let n in r)J(e,t,o,l.event,n,r[n])}else J(e,t,o,l.event,n.substr(2),r);else switch(n){case"class":K(e,t,o,l.class,n,r);break;case"style":X(e,t,o,l.style,n,r);break;case"attr":for(let n in r)z(e,t,o,l.attr,n,r[n]);break;case"ref":"function"==typeof r?r(o):r&&(r.current=o);break;case"prop":for(let n in r)G(e,t,o,l.prop,n,r[n]);break;default:r&&r.type===u?(o.$$dynamicBindings||(o.$$dynamicBindings=new WeakSet),o.$$dynamicBindings.has(r)||(o.$$dynamicBindings.add(r),r.watch(o,n))):e.extras.render.patch&&e.extras.render.patch({node:o,type:n,value:r,app:e,context:t,data:l.custom})||G(e,t,o,l.prop,n,r)}}}function z(e,t,n,r,o,i){let l=n.getAttributeNode(o);l?l.nodeValue!==i&&(l.nodeValue=i):n.setAttribute(o,i)}function G(e,t,n,r,o,i){r.get(o)!==i&&(r.set(o,i),"text"===o?n.textContent=i:"html"===o?n.innerHTML=i:n[o]=i)}function J(e,t,n,r,o,i){let l=r.get(o);if(l===i||l&&(l.action===i||S(i)&&function(e,t,n){if(S(e)&&S(t)&&e.length===t.length){let r=e.length;if(n){for(;r--;)if(!n(e[r],t[r]))return!1}else for(;r--;)if(e[r]!==t[r])return!1;return!0}return!1}(i,l.action)))return;let u,c,a="function"==typeof i,f=!1;!i||a||S(i)||(u=i.debounce,i.action?(f=!0,i="payload"in i?[i.action,i.payload]:i.action):i=i.handler);let s=a?i:t=>{function n(){return S(i)?e.store.dispatch(i[0],"function"==typeof i[1]?i[1]===q?t:i[1](t):i[1]):f?e.store.dispatch(i,t):i(t)}u?c=function(e,t,n){n&&n.cancel();let r=setTimeout(e,t);return{cancel(){clearTimeout(r)}}}(n,u,c):n()};s.action=i,r.set(o,s),l&&n.removeEventListener(o,l),n.addEventListener(o,s)}function K(e,t,n,r,o,i){if("object"==typeof i){r.class=c;let e=i;for(let t in e){let o=!!e[t];r.get(t)!==o&&(r.set(t,o),n.classList.toggle(t,o))}}else{if(r.class===i)return;r.class=i,n.className=Q(n).class+i}}function Q(e){return e.$$initial||(e.$$initial={style:(e.getAttribute("style")||"")+";",class:(e.getAttribute("class")||"")+" "}),e.$$initial}function X(e,t,n,r,o,i){if("object"==typeof i){r.style=c;for(let e in i){let t=i[e];r.get(e)!==t&&(r.set(e,t),"-"===e[0]?n.style.setProperty(e,t):n.style[e]=t)}}else{if(r.style===i)return;r.style=i,n.style=Q(n).style+i}}function Y(t,n,r,l){let u,c,a=[],f=!1;return{firstNode:()=>a[0],unmount:function(){let t=u.length;for(;t--;){let n=u[t];n.type===o&&n[e].unmount()}for(t=a.length;t--;)a[t].remove()},update:function(s){f||(f=!0,[a,u,c]=s.render(l)),c(s);let d=u.length;for(;d--;){let l=u[d];switch(l.type){case o:t(n,r,l,e,l.node,l.value);break;case i:W(n,r,l,e,l.node,l.value)}}},reorder:function(){a.length&&l.before(...a)}}}function Z(e,n,r,o,i,l){O(r,o,t,null,_,[i]).update(l)}function _(e){let t,n=e;return{get firstNode(){return n},reorder:function(){e.before(n)},unmount:function(){n.nodeValue=""},update:function(e){e!==t&&(t=e,n.nodeValue=null==t||"boolean"==typeof t?"":e)}}}function ee(e,t,o,i,l,u){if(u&&u.type===r)return function(e,t,n,o,i,l,u){let c=O(o,i,r,(e=>e.template.id!==u.id),Y,[e,t,n,l]);c.update(u),c.template=u}(ee,e,t,o,i,l,u);if(typeof u===m)return H(ee,e,t,o,i,l,u);if(S(u)){if(typeof u[0]===m)return H(ee,e,t,o,i,l,u[0],u[1],u.length>2&&u.slice(1));if(typeof u[1]===m){let t=h.current.component.select;return Z(0,0,o,i,l,u.slice(1).reduce(((n,r)=>r(n,t,e)),u[0]))}return function(e,t,r,o,i,l,u){O(o,i,n,null,R,[e,t,r,l]).update(u)}(ee,e,t,o,i,l,u)}return e.extras.render.object&&u&&"object"==typeof u&&t.constructor!==y&&t.constructor!==g&&!v(u)?e.extras.render.object({render:ee,app:e,context:t,parent:o,key:i,marker:l,content:u}):Z(0,0,o,i,l,u)}function te(e,t,n,r){n[t]&&(e[t]=r(e[t],n[t]))}function ne(e,t){return e?n=>t(n,e):e=>t(e,c)}function re(e,t){return e?n=>(e(n),t(n)):t}let oe=function(){return q.apply(null,arguments)};return Object.assign(oe,{render:function(t,n={}){let{state:r,container:o,use:i,onLoad:l,onChange:u,onUpdate:c}=n;if("string"==typeof o){if(o=a.querySelector(o),!o)throw new Error("Invalid container")}else o||(o=a.body);let f={component:{},store:{},render:{}};i&&[].concat(i).forEach((e=>{let{store:t,component:r,render:o}=typeof e===m?e(n):e;r&&(te(f.component,"init",r,re),te(f.component,"error",r,re),te(f.component,"updating",r,re),te(f.component,"mount",r,re),te(f.component,"unmount",r,re),te(f.component,"updated",r,re)),t&&te(f.store,"create",t,ne),o&&(te(f.render,"object",o,ne),te(f.render,"patch",o,ne))}));let s,h=L(),y=f.store.create?f.store.create(r):function(e={}){if("function"==typeof e.getState)return e;let t=e,n=L();return{getState:function(){return t},dispatch:function(e,r){let o=e(t,r);o&&o!==t&&(t=o,n.emit(d))},subscribe:function(e){return n.on(d,e)}}}(r),g={store:y,extras:f,watch:function(e){return w(),h.on(p,e)}},b={},v=k(),x=!1,N={get state(){return y.getState()},...y,update:function(t){return b[e].forceUpdate(arguments.length?t:y.getState())}};function w(){if(s)return;let e=s={};!function t(){$((()=>{e===s&&(h.has(p)?(h.emit(p),t()):e=void 0)}))}()}return f.component.error||(f.component.error=B),o.innerHTML="",o.appendChild(v),typeof t===m?x=t.length:S(t)&&typeof t[0]===m&&(x=t[0].length),x&&y.subscribe((function(){u&&u(N),b[e].update(y.getState()),c&&c(N)})),H(ee,g,{},b,e,v,!1===x?()=>t:t,y.getState()),l&&l(N),N}}),oe}();