UNPKG

@alwatr/synapse

Version:

Connect your TypeScript classes to the DOM, declaratively.

5 lines (4 loc) 3.12 kB
/** 📦 @alwatr/synapse v1.3.1 */ __dev_mode__: console.debug("📦 @alwatr/synapse v1.3.1"); import{createLogger}from"@alwatr/logger";var logger=createLogger("alwatr/synapse");var directiveRegistry_=[];var initializedAttribute="_synapseConnected";function bootstrapDirectives(rootElement=document.body){logger.logMethod?.("bootstrapDirectives");if(document.readyState==="loading"){logger.incident?.("bootstrapDirectives","dom_not_ready","Delaying directive initialization until DOM is ready");document.addEventListener("DOMContentLoaded",()=>{bootstrapDirectives(rootElement)},{once:true});return}for(const{selector,constructor}of directiveRegistry_){try{const uninitializedSelector=`${selector}:not([${initializedAttribute}])`;const elements=rootElement.querySelectorAll(uninitializedSelector);if(elements.length===0)continue;logger.logOther?.(`Found ${elements.length} new element(s) for directive "${selector}"`);elements.forEach(element=>{element.setAttribute(initializedAttribute,"true");new constructor(element,selector)})}catch(err){logger.error("bootstrapDirectives","directive_instantiation_error",err,{selector})}}}function directive(selector){logger.logMethodArgs?.("@directive",selector);return function(constructor){directiveRegistry_.push({selector,constructor})}}import{delay}from"@alwatr/delay";import{createLogger as createLogger2}from"@alwatr/logger";var DirectiveBase=class{constructor(element,selector){this.cleanupTaskList__=[];this.logger_=createLogger2(`directive:${selector}`);this.logger_.logMethodArgs?.("new",{selector,element});this.selector_=selector;this.element_=element;(async()=>{await delay.nextMicrotask();await this.init_()})()}init_(){this.logger_.logMethod?.("init_");this.update_?.()}dispatch_(eventName,detail){this.logger_.logMethodArgs?.("dispatch_",{eventName,detail});this.element_.dispatchEvent(new CustomEvent(eventName,{detail,bubbles:true}))}onDestroy_(task){this.logger_.logMethod?.("onDestroy_");this.cleanupTaskList__.push(task)}destroy_(){this.logger_.logMethod?.("destroy_");if(this.cleanupTaskList__.length>0){for(const task of this.cleanupTaskList__){try{task.call(this)}catch(err){this.logger_.error("destroy_","error_in_destroy_callback",err)}}this.cleanupTaskList__.length=0}this.element_.remove();this.element_=null}};function query(selector,cache=true,root){return function(target,propertyKey){const privateKey=Symbol(`${String(propertyKey)}__`);Object.defineProperty(target,propertyKey,{get(){if(cache===false||this[privateKey]===void 0){const parent=root??this.element_;this[privateKey]=parent.querySelector(selector)}return this[privateKey]},configurable:true,enumerable:true})}}function queryAll(selector,cache=true,root){return function(target,propertyKey){const privateKey=Symbol(`${String(propertyKey)}__`);Object.defineProperty(target,propertyKey,{get(){if(cache===false||this[privateKey]===void 0){const parent=root??this.element_;this[privateKey]=parent.querySelectorAll(selector)}return this[privateKey]},configurable:true,enumerable:true})}}export{DirectiveBase,bootstrapDirectives,directive,query,queryAll}; //# sourceMappingURL=main.mjs.map