als-component/component.min.js

lightweight JavaScript library for creating reactive, server-rendered, and browser-based components.

class Component{static isBrowser=!0;static componentsToUpdate=new Set;static components=new WeakMap;static qs(t,e=document){return e.querySelector(t)}static qsa(t,e=document){return[...e.querySelectorAll(t)]}static get isAsync(){return"AsyncFunction"===this.prototype.render.constructor.name}actions=[];counter=0;get element(){return Component.isBrowser?document.querySelector(this.selector):null}set elementOuter(t){var e=this.element;e&&(e.outerHTML=t)}constructor(t={},e){this.isAsync=this.constructor.isAsync,this.props=t,this.inner=e,this.name=this.constructor.name+(this.props.key||""),this.selector=`[component=${this.name}]`,this.hooks={mount:[],unmount:[]},(Component.components[this.name]=this).Component=Component}on(t,e){this.hooks[t]&&this.hooks[t].push(e)}async callAsync(){return(await this.render(this.props,this.inner)).replace(/^\<\w\w*/,t=>`${t} component="${this.name}"`)}callSync(){return this.render(this.props,this.inner).replace(/^\<\w\w*/,t=>`${t} component="${this.name}"`)}call(){return this.Component.componentsToUpdate.add(this),this.isAsync?this.callAsync():this.callSync()}action(t,e){var n=this.name+this.counter++;return this.actions.push({event:t,id:n,fn:e}),n}async buildAsync(t=!0){var e=await this.call();return t&&(this.elementOuter=e),this.Component.isBrowser&&this.runActions(),e}buildSync(t=!0){var e=this.call();return t&&(this.elementOuter=e),this.Component.isBrowser&&this.runActions(),e}build(t){return this.isAsync?this.buildAsync(t):this.buildSync(t)}update(t=this.props,e=this.inner){return this.props=t,this.inner=e,this.build(!0)}runActions(){var{components:t,componentsToUpdate:e}=this.Component;e.forEach(t=>{var{actions:e,hooks:n,selector:s}=t;let o=document.querySelector(s),r=o&&o.childNodes.length?o:document;n.mount.forEach(t=>t(o)),e.forEach(({event:e,fn:n,id:t})=>{let s=r.querySelectorAll(`[${e}="${t}"]`);0!==(s=0===s.length?document.querySelectorAll(`[${e}="${t}"]`):s).length&&s.forEach(t=>{"load"===e?n(t):"function"==typeof t.addEventListener&&t.addEventListener(e,n)})}),t.actions=[],t.hooks.mount=[],t.count=0});for(let e in t){var{selector:n,hooks:s}=t[e];document.querySelector(n)||(s.unmount.forEach(t=>t(e)),delete t[e])}this.Component.componentsToUpdate.clear()}}