reef.js (5031B)
1 var reef=function(e){"use strict";function t(e,t,n=document){let r=new CustomEvent(`reef:${e}`,{bubbles:!0,cancelable:!0,detail:t});return n.dispatchEvent(r)}function n(e){return"string"==typeof e?document.querySelector(e):e}function r(e){return Object.prototype.toString.call(e).slice(8,-1).toLowerCase()}function i(e,n){let o="signal"+(e?`-${e}`:"");return{get:(t,n)=>"_isSignal"===n||(["object","array"].includes(r(t[n]))&&!t[n]._isSignal&&(t[n]=new Proxy(t[n],i(e))),t[n]),set:(e,n,r)=>(e[n]===r||(e[n]=r,t(o,{prop:n,value:r,action:"set"})),!0),deleteProperty:(e,n)=>(delete e[n],t(o,{prop:n,value:e[n],action:"delete"}),!0)}}class o{constructor(e,n,r=""){let i="signal"+(r?`-${r}`:"");Object.defineProperties(this,{value:{get:()=>structuredClone(e),set:()=>!0}});for(let r in n)"function"==typeof n[r]&&(this[r]=function(...o){n[r](e,...o),t(i,e)})}}let l,s=["input","option","textarea"],u=["value","checked","selected"],c=["checked","selected"];function d(e){return["false","null","undefined","0","-0","NaN","0n","-0n"].includes(e)}function a(e,t,n,r){if(!t.startsWith("on")||!r)return;if(e[t])return;let i=r[n.split("(")[0]];i&&(e[t]=i)}function f(e,t){let n=t.replace(/\s+/g,"").toLowerCase();return!(!["src","href","xlink:href"].includes(e)||!n.includes("javascript:")&&!n.includes("data:text/html"))||(!!(e.startsWith("on")||e.startsWith("@on")||e.startsWith("#on"))||void 0)}function h(e,t,n,r){a(e,t,n,r),f(t,n)||(u.includes(t)&&(e[t]="value"===t?n:" "),e.setAttribute(t,n))}function m(e,t){u.includes(t)&&(e[t]=""),e.removeAttribute(t)}function g(e,t){if(1===e.nodeType){for(let{name:n,value:r}of Array.from(e.attributes)){if(f(n,r))return m(e,n),void a(e,n,r,t);if(!n.startsWith("@")&&!n.startsWith("#"))continue;let i=n.slice(1);m(e,n),c.includes(i)&&d(r)||h(e,i,r,t)}if(e.childNodes)for(let n of e.childNodes)g(n,t)}}function p(e){return e.childNodes&&e.childNodes.length?null:e.textContent}function b(e,t,n){let r=e.childNodes,i=t.childNodes;(function(e){let t=e.querySelectorAll("script");for(let e of t)e.remove()})(e)||(r.forEach((function(e,o){if(!i[o]){let r=e.cloneNode(!0);return g(r,n),void t.append(r)}if(l=e,a=i[o],"number"==typeof l.nodeType&&l.nodeType!==a.nodeType||"string"==typeof l.tagName&&l.tagName!==a.tagName||"string"==typeof l.id&&l.id&&l.id!==a.id||"getAttribute"in l&&"getAttribute"in a&&l.getAttribute("key")!==a.getAttribute("key")||"string"==typeof l.src&&l.src&&l.src!==a.src){let r=function(e,t){if(1!==e.nodeType)return;let n=e.getAttribute("id"),r=e.getAttribute("key");if(!n||!r)return;let i=n?`#${n}`:`[key="${r}"]`;return t.querySelector(`:scope > ${i}`)}(e,t);if(!r){let t=e.cloneNode(!0);return g(t,n),void i[o].before(t)}i[o].before(r)}var l,a;if(r[o]&&"hasAttribute"in r[o]&&r[o].hasAttribute("reef-ignore"))return;if(function(e,t,n){if(1!==e.nodeType)return;let r=e.attributes,i=t.attributes;for(let{name:i,value:o}of Array.from(r)){if(i.startsWith("#"))continue;if(u.includes(i)&&s.includes(e.tagName.toLowerCase()))continue;let r=i.startsWith("@")?i.slice(1):i;c.includes(r)&&d(o)?m(t,r):h(t,r,o,n)}for(let{name:e,value:n}of Array.from(i))r[e]||u.includes(e)&&s.includes(t.tagName.toLowerCase())||m(t,e)}(e,i[o],n),e.nodeName.includes("-"))return;let f=p(e);if(f&&f!==p(i[o])&&(i[o].textContent=f),e.childNodes.length||!i[o].childNodes.length){if(!i[o].childNodes.length&&e.childNodes.length){let t=document.createDocumentFragment();return b(e,t,n),void i[o].appendChild(t)}e.childNodes.length&&b(e,i[o],n)}else i[o].innerHTML=""})),function(e,t){let n=e.length-t.length;if(!(n<1))for(;n>0;n--)e[e.length-1].remove()}(i,r))}function y(e,r,i){let o=n(e),l=function(e){let t=(new DOMParser).parseFromString(`<body><template>${e}</template></body>`,"text/html");return t.body?t.body.firstElementChild.content:document.createElement("body")}(r);t("before-render",null,o)&&(b(l,o,i),t("render",null,o))}class v{constructor(e,t,n){var r;this.elem=e,this.template=t,this.signals=n.signals?n.signals.map((e=>`reef:signal-${e}`)):["reef:signal"],this.events=n.events,this.handler=(r=this,function(e){r.render()}),this.debounce=null,this.start()}start(){for(let e of this.signals)document.addEventListener(e,this.handler);this.render(),t("start",null,n(this.elem))}stop(){for(let e of this.signals)document.removeEventListener(e,this.handler);t("stop",null,n(this.elem))}render(){let e=this;e.debounce&&window.cancelAnimationFrame(e.debounce),e.debounce=window.requestAnimationFrame((function(){y(e.elem,e.template(),e.events)}))}}function N(){setTimeout((function(){let e=document.querySelector(l);l=null,e&&(e.focus(),document.activeElement!==e&&(e.setAttribute("tabindex",-1),e.focus()))}),1)}return e.component=function(e,t,n={}){return new v(e,t,n)},e.focus=function(e){e&&"string"==typeof e&&(l=e,document.addEventListener("reef:render",N,{once:!0}))},e.render=y,e.signal=function(e={},t=""){return e=["array","object"].includes(r(e))?e:{value:e},new Proxy(e,i(t))},e.store=function(e={},t={},n=""){return new o(e,t,n)},Object.defineProperty(e,"__esModule",{value:!0}),e}({});