0.1.0-notests • Published 3 months ago
gotei v0.1.0-notests
gotei: build reactive UIs with html attributes
Installation
Inline script
Copy the content of gotei-0.1.0-notests.js or gotei-0.1.0-notests.min.js (minified version) inside a <script> inside your page's <head>.
Or just copy the following:
<script id="gotei-0.1.0-notests">(function(a,A){typeof exports=="object"&&typeof module!="undefined"?A(exports):typeof define=="function"&&define.amd?define(["exports"],A):(a=typeof globalThis!="undefined"?globalThis:a||self,A(a.gotei={}))})(this,function(a){"use strict";class A{constructor(n){this._prefix=n}get prefix(){return this._prefix}set prefix(n){const e=n.trim();e.length>0&&(this._prefix=e)}}const M=new A("gt-"),D=document.documentElement.getAttribute("gotei-prefix");D!==null&&(M.prefix=D);function v(t){return`${M.prefix}${t}`}function L(t){return t===null||t.length===0}let p=null;function g(t,n){const e=p;p=t,t(n),p=e}function T(t,n){for(const e of t)g(e,n)}const w=Symbol();function I(t,n){const e=t[w]?[...t]:t,s=new Proxy(e,{get(i,r){return r==="push"||r==="unshift"?(...f)=>{const c=i.length,u=i[r](...f);return u!==c&&T(n,r),u}:r==="pop"||r==="shift"?()=>{const f=i.length,c=i[r]();return i.length!==f&&T(n,r),c}:r==="splice"?(f,c,...u)=>{const h=c!=null?c:0,l=i.splice(f,h,...u);return(l.length>0||u.length>0)&&T(n,{start:f,deleteCount:h,insertCount:u.length}),l}:r==="reverse"?()=>{const f=i.reverse();return f.length>1&&T(n,r),f}:r==="sort"?f=>{const c=[...i],u=i.sort(f);for(let h=0;h<u.length;h++)if(c[h]!==u[h]){T(n);break}return u}:i[r]}});return s[w]=!0,s}class z{constructor(n){this.actions=new Set,this.value=Array.isArray(n)?I(n,this.actions):n}get v(){return p&&this.actions.add(p),this.value}get uv(){return this.value}set v(n){n!==this.value&&(this.value=Array.isArray(n)?I(n,this.actions):n,T(this.actions))}}function F(t){return new z(t)}function J(t){const n=t();return Array.isArray(n)&&n[w]?[...n]:n}function Q(t){const n=p;p=null;const e=t();return p=n,e}class Y{constructor(n){this.f=J.bind(null,n)}get v(){return this.f()}get uv(){return Q(this.f)}}function $(t){return new Y(t)}const E=Symbol();function _(t,n,e){let s;E in t?s=t[E]:(s=new Map,t[E]=s),s.set(n,e)}function*V(t){let n=t;for(;n!==null&&n.tagName!=="HTML";)yield n,n=n.parentElement}function Z(t,n){for(const e of V(t))if(E in e){const s=e[E];if(s.has(n))return s.get(n)}return null}function tt(t){const n=new Map;for(const e of V(t))if(E in e){const s=e[E];for(const[i,r]of s.entries())n.has(i)||n.set(i,r)}return[...n.entries()]}const x=/\$(\w+)/g,nt=/&(\w+)/g;function et(t){return t.replace(x,(n,e)=>`${e}.v`).replace(nt,(n,e)=>`${e}.uv`)}function N(t,n,e=[],s=[]){const i=`"use strict"; ${et(n)}`,r=tt(t);return e=r.map(([f,c])=>f).concat(e),s=r.map(([f,c])=>c).concat(s),new Function(...e,i).bind(t,...s)}function P(t,n){const e=N(t,`return ${n};`);return x.test(n)?$(e):F(e())}function C(t,n){const e=N(t,`return ${n};`);return x.test(n)?$(e):e}function st(t){const n=t.dataset;for(const e in n){const s=n[e];if(e.startsWith("$")){const i=P(t,s);_(t,e.slice(1),i)}else{const i=N(t,`return ${s};`);_(t,e,i())}}}function it(t,n){const e=C(t,n);"v"in e?g(()=>t.textContent=e.v):t.textContent=e()}function rt(t,n){const e=C(t,n);if("v"in e){const s=t.style.display;g(()=>{e.v?t.style.display=s:t.style.display="none"})}else e()||(t.style.display="none")}const ot=v("item-name"),ct=v("list-name"),ft="item",ut="items",B=Symbol();function lt(t){var n;return(n=t[B])!=null?n:!1}function at(t,n,e,s){const i=t.cloneNode(!0);return i.dataset[e]=`${n}[${s}]`,i[B]=!0,i}function ht(t,n){var h;const e=(h=t.querySelector("template"))==null?void 0:h.content.firstElementChild;if(!e)return;const s=t.getAttribute(ct),i=L(s)?ut:s,r=t.getAttribute(ot),f=L(r)?ft:r,c=P(t,n),u=at.bind(null,e,i,f);g(l=>{var G,K;const S=c.v;if(_(t,i,S),l)switch(l){case"pop":(G=t.lastElementChild)==null||G.remove();break;case"shift":(K=t.firstElementChild)==null||K.remove();break;case"push":for(let o=t.children.length;o<S.length;o++){const d=u(o);t.appendChild(d)}break;case"unshift":const y=t.firstElementChild;for(let o=0;o<S.length-t.children.length;o++){const d=u(o);t.insertBefore(d,y)}break;case"reverse":for(let o=0,d=t.children.length-1;d-o>=1;o++,d--){const R=t.children[o],b=t.children[d],q=R.nextElementSibling;if(q===b)b.remove(),t.insertBefore(b,R);else{const bt=b.nextElementSibling;R.remove(),b.remove(),t.insertBefore(b,q),t.insertBefore(R,bt)}}break;default:for(let o=0;o<l.deleteCount&&l.start+o<t.children.length;o++)t.children[l.start+o].remove();const k=[];for(let o=0;o<l.insertCount;o++)k.push(u(l.start+o));if(l.start===t.children.length)t.append(...k);else{const o=t.children.item(l.start);for(const d of k)t.insertBefore(d,o)}}else{for(;t.firstElementChild;)t.firstElementChild.remove();for(let y=0;y<S.length;y++)t.appendChild(u(y))}})}function dt(t,n,e){const s=n.split("|"),i=s[0],r={};for(const c of s.slice(1))r[c]=!0;const f=N(t,e,["ev"]);t.addEventListener(i,c=>{c.preventDefault(),f(c)},r)}function pt(t,n){typeof n=="string"||typeof n=="number"?this.setAttribute(t,`${n}`):n===!0?this.setAttribute(t,""):this.removeAttribute(t)}function vt(t,n,e){const s=C(t,e),i=pt.bind(t,n);"v"in s?g(()=>i(s.v)):i(s())}const Et=v("text"),gt=v("show"),Tt=v("list"),O=v("on:"),j=v("rx:");function H(t){st(t);for(const{name:n,value:e}of t.attributes)switch(!0){case n.startsWith(j):vt(t,n.slice(j.length),e);break;case n.startsWith(O):dt(t,n.slice(O.length),e);break;case n===Et:it(t,e);break;case n===gt:rt(t,e);break;case n===Tt:ht(t,e);break}}function W(t){H(t);for(const n of t.children)W(n)}const X=Symbol();function U(t){return t.nodeType===Node.ELEMENT_NODE}const m=new MutationObserver(t=>{for(const{target:n,addedNodes:e}of t)if(!(!U(n)||n.nodeName==="HEAD"))for(const s of e)U(s)&&(s[X]||(lt(s)?W(s):H(s),s[X]=!0))});m.observe(document,{subtree:!0,childList:!0}),a.derived=$,a.effect=g,a.getVar=Z,a.observer=m,a.setVar=_,a.signal=F,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});</script>CDN (recommended) (also NOT WORKING FOR NOW)
Add the following tag to your page's <head>:
<script src="https://cdn.jsdelivr.net/npm/gotei@0.1.0-notests/dist/gotei.js"></script>If you want to use the minified version, add this tag instead:
<script src="https://cdn.jsdelivr.net/npm/gotei@0.1.0-notests/dist/gotei.min.js"></script>