@alwatr/synapse 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.0](https://github.com/Alwatr/nanolib/compare/@alwatr/synapse@1.0.1...@alwatr/synapse@1.1.0) (2025-09-01)
+
+### ✨ Features
+
+* add destroy_ method to clean up directive resources ([5b3878c](https://github.com/Alwatr/nanolib/commit/5b3878cd709dfda1cb224b296e8e36f900e1dfa3))
+* add init_ method for directive initialization ([30178d4](https://github.com/Alwatr/nanolib/commit/30178d40dcd59052068a334b0e811473fa184dd5))
+* add query and queryAll decorators for element selection ([7eac8d2](https://github.com/Alwatr/nanolib/commit/7eac8d241b9ad714145c42f20a7a8bf58dd4b1e1))
+* update main.ts to export queryDecorators ([66631e5](https://github.com/Alwatr/nanolib/commit/66631e5ddb5e1d0ed6b3883ff2008595a13c3a62))
+
+### 🐛 Bug Fixes
+
+* ensure proper initialization sequence by awaiting init_ before update_ ([f251964](https://github.com/Alwatr/nanolib/commit/f2519648c89a0347978366749b681f8e4e3578a9))
+* ensure update_ method is abstract in DirectiveBase class ([beae25e](https://github.com/Alwatr/nanolib/commit/beae25e45a9cad40501b60efeb4fa6b1e566a16d))
+
+## [1.0.1](https://github.com/Alwatr/nanolib/compare/@alwatr/synapse@1.0.0...@alwatr/synapse@1.0.1) (2025-08-26)
+
+### 🐛 Bug Fixes
+
+* add missing dependency for @alwatr/delay in package.json ([616025e](https://github.com/Alwatr/nanolib/commit/616025e6d345f16ecedf62761ec96d2ad29c5856))
+* ensure directive update is delayed for proper initialization ([5bc0024](https://github.com/Alwatr/nanolib/commit/5bc0024c52c3813f463141d6508c39090638c4c8))
+
 ## 1.0.0 (2025-08-24)
 
 ### ✨ Features

package/README.md

@@ -155,3 +155,11 @@ document.body.appendChild(newContent);
 // You can safely bootstrap again, and it will only process the new button
 bootstrapDirectives(newContent);
 ```
+
+## Sponsors
+
+The following companies, organizations, and individuals support `nanolib` ongoing maintenance and development. Become a Sponsor to get your logo on our README and website.
+
+### Contributing
+
+Contributions are welcome! Please read our [contribution guidelines](https://github.com/Alwatr/.github/blob/next/CONTRIBUTING.md) before submitting a pull request.

package/dist/directiveClass.d.ts

@@ -25,7 +25,9 @@ export declare abstract class DirectiveBase {
      * Called to update the directive's state or behavior.
      * Must be implemented by subclasses.
      */
-    protected abstract update_(): void;
+    protected abstract update_(): MaybePromise<void>;
+    protected init_(): MaybePromise<void>;
+    protected destroy_(): MaybePromise<void>;
     /**
      * Dispatches a custom event from the target element.
      * @param eventName - The name of the event.

package/dist/directiveClass.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"directiveClass.d.ts","sourceRoot":"","sources":["../src/directiveClass.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,8BAAsB,aAAa;IACjC;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,SAAS,SAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,wCAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC;IAEzC;;;;OAIG;gBACS,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM;IAUlD;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,IAAI,IAAI;IAElC;;;;OAIG;IACH,SAAS,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI;CAI/D"}
+{"version":3,"file":"directiveClass.d.ts","sourceRoot":"","sources":["../src/directiveClass.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,8BAAsB,aAAa;IACjC;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,SAAS,SAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,wCAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC;IAEzC;;;;OAIG;gBACS,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM;IAclD;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,IAAI,YAAY,CAAC,IAAI,CAAC;IAEhD,SAAS,CAAC,KAAK,IAAI,YAAY,CAAC,IAAI,CAAC;IAIrC,SAAS,CAAC,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC;IAOxC;;;;OAIG;IACH,SAAS,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI;CAI/D"}

package/dist/main.cjs

@@ -1,4 +1,4 @@
-/* @alwatr/synapse v1.0.0 */
+/* @alwatr/synapse v1.1.0 */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -23,7 +23,9 @@ var main_exports = {};
 __export(main_exports, {
   DirectiveBase: () => DirectiveBase,
   bootstrapDirectives: () => bootstrapDirectives,
-  directive: () => directive
+  directive: () => directive,
+  query: () => query,
+  queryAll: () => queryAll
 });
 module.exports = __toCommonJS(main_exports);
 
@@ -61,6 +63,7 @@ function directive(selector) {
 }
 
 // src/directiveClass.ts
+var import_delay = require("@alwatr/delay");
 var import_logger2 = require("@alwatr/logger");
 var DirectiveBase = class {
   /**
@@ -73,7 +76,19 @@ var DirectiveBase = class {
     this.logger_.logMethodArgs?.("new", { selector, element });
     this.selector_ = selector;
     this.element_ = element;
-    this.update_();
+    (async () => {
+      await import_delay.delay.immediate();
+      await this.init_();
+      await this.update_();
+    })();
+  }
+  init_() {
+    this.logger_.logMethod?.("init");
+  }
+  destroy_() {
+    this.logger_.logMethod?.("destroy");
+    this.element_.remove();
+    this.element_ = null;
   }
   /**
    * Dispatches a custom event from the target element.
@@ -85,10 +100,44 @@ var DirectiveBase = class {
     this.element_.dispatchEvent(new CustomEvent(eventName, { detail, bubbles: true }));
   }
 };
+
+// src/queryDecorator.ts
+function query(selector, cache = true) {
+  return function(target, propertyKey) {
+    const privateKey = Symbol(`${String(propertyKey)}__`);
+    Object.defineProperty(target, propertyKey, {
+      get() {
+        if (cache === false || this[privateKey] === void 0) {
+          this[privateKey] = this.element_.querySelector(selector);
+        }
+        return this[privateKey];
+      },
+      configurable: true,
+      enumerable: true
+    });
+  };
+}
+function queryAll(selector, cache = true) {
+  return function(target, propertyKey) {
+    const privateKey = Symbol(`${String(propertyKey)}__`);
+    Object.defineProperty(target, propertyKey, {
+      get() {
+        if (cache === false || this[privateKey] === void 0) {
+          this[privateKey] = this.element_.querySelectorAll(selector);
+        }
+        return this[privateKey];
+      },
+      configurable: true,
+      enumerable: true
+    });
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DirectiveBase,
   bootstrapDirectives,
-  directive
+  directive,
+  query,
+  queryAll
 });
 //# sourceMappingURL=main.cjs.map

package/dist/main.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/main.ts", "../src/lib.ts", "../src/bootstrap.ts", "../src/directiveDecorator.ts", "../src/directiveClass.ts"],
-  "sourcesContent": ["export * from './bootstrap.js';\nexport * from './directiveDecorator.js';\nexport * from './directiveClass.js';", "import {createLogger} from '@alwatr/logger';\n\nimport type {DirectiveConstructor} from './directiveDecorator.js';\n\n/**\n * Alwatr Synapse Logger.\n */\nexport const logger = createLogger('alwatr/synapse');\n\n/**\n * The registry for all directives.\n */\nexport const directiveRegistry_: {selector: string; constructor: DirectiveConstructor}[] = [];\n", "import {directiveRegistry_, logger} from './lib.js';\n\nconst initializedAttribute = '_synapseConnected';\n\n/**\n * Initializes all registered directives within a given root element.\n * If no root element is provided, it scans the entire body.\n *\n * This function is idempotent; it will not re-initialize a directive on an element\n * that has already been processed.\n *\n * @param rootElement The element to scan for directives. Defaults to `document.body`.\n *\n * @example\n * ```ts\n * // Initialize directives on the whole page after the DOM is loaded.\n * document.addEventListener('DOMContentLoaded', () => bootstrapDirectives());\n *\n * // Or, initialize directives on a dynamically added part of the page.\n * const newContent = document.createElement('div');\n * newContent.innerHTML = '<div class=\"my-button\">Click Me</div>';\n * document.body.appendChild(newContent);\n *\n * bootstrapDirectives(newContent);\n * ```\n */\nexport function bootstrapDirectives(rootElement: Element | Document = document.body): void {\n  logger.logMethod?.('bootstrapDirectives');\n\n  for (const {selector, constructor} of directiveRegistry_) {\n    try {\n      const uninitializedSelector = `${selector}:not([${initializedAttribute}])`;\n      const elements = rootElement.querySelectorAll<HTMLElement>(uninitializedSelector);\n      if (elements.length === 0) continue;\n\n      logger.logOther?.(`Found ${elements.length} new element(s) for directive \"${selector}\"`);\n      elements.forEach(element => {\n        // Mark the element as processed before creating an instance\n        element.setAttribute(initializedAttribute, 'true');\n        // Instantiate the directive with the element.\n        new constructor(element, selector);\n      });\n    }\n    catch (err) {\n      logger.error('bootstrapDirectives', 'directive_instantiation_error', err, {selector});\n    }\n  }\n}\n", "import {directiveRegistry_, logger} from './lib.js';\n\nimport type {DirectiveBase} from './directiveClass.js';\n\n/**\n * Type definition for a directive constructor.\n * A directive class must have a constructor that accepts an HTMLElement.\n */\nexport type DirectiveConstructor<T extends DirectiveBase = DirectiveBase> = new (element: HTMLElement, selector: string) => T;\n\n/**\n * A class decorator that registers a class as a directive.\n *\n * @param selector The CSS selector to which this directive will be attached.\n *\n * @example\n * ```ts\n * @directive('.my-button')\n * class MyButtonDirective extends DirectiveBase {\n *   protected update_(): void {\n *     this.element_.addEventListener('click', () => console.log('Button clicked!'));\n *   }\n * }\n * ```\n */\nexport function directive(selector: string) {\n  logger.logMethodArgs?.('@directive', selector);\n\n  /**\n   * The decorator function that receives the class constructor.\n   * @param constructor The class to be registered as a directive.\n   */\n  return function (constructor: DirectiveConstructor): void {\n    directiveRegistry_.push({selector, constructor});\n  };\n}\n", "import {createLogger} from '@alwatr/logger';\n\n/**\n * Base class for creating directives that attach behavior to DOM elements.\n * Extend this class to define custom directives.\n */\nexport abstract class DirectiveBase {\n  /**\n   * The CSS selector for the directive.\n   */\n  protected readonly selector_;\n\n  /**\n   * Logger instance for the directive.\n   */\n  protected readonly logger_;\n\n  /**\n   * The target DOM element this directive is attached to.\n   */\n  protected readonly element_: HTMLElement;\n\n  /**\n   * Constructor to initialize the directive with the target element.\n   * @param element - The DOM element this directive is attached to.\n   * @param selector - The CSS selector for the directive.\n   */\n  constructor(element: HTMLElement, selector: string) {\n    this.logger_ = createLogger(`directive:${selector}`);\n    this.logger_.logMethodArgs?.('new', {selector, element});\n\n    this.selector_ = selector;\n    this.element_ = element;\n\n    this.update_();\n  }\n\n  /**\n   * Called to update the directive's state or behavior.\n   * Must be implemented by subclasses.\n   */\n  protected abstract update_(): void;\n\n  /**\n   * Dispatches a custom event from the target element.\n   * @param eventName - The name of the event.\n   * @param detail - Optional data to include in the event.\n   */\n  protected dispatch_(eventName: string, detail?: unknown): void {\n    this.logger_.logMethodArgs?.('dispatch_', {eventName, detail});\n    this.element_.dispatchEvent(new CustomEvent(eventName, {detail, bubbles: true}));\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAA2B;AAOpB,IAAM,aAAS,4BAAa,gBAAgB;AAK5C,IAAM,qBAA8E,CAAC;;;ACV5F,IAAM,uBAAuB;AAwBtB,SAAS,oBAAoB,cAAkC,SAAS,MAAY;AACzF,SAAO,YAAY,qBAAqB;AAExC,aAAW,EAAC,UAAU,YAAW,KAAK,oBAAoB;AACxD,QAAI;AACF,YAAM,wBAAwB,GAAG,QAAQ,SAAS,oBAAoB;AACtE,YAAM,WAAW,YAAY,iBAA8B,qBAAqB;AAChF,UAAI,SAAS,WAAW,EAAG;AAE3B,aAAO,WAAW,SAAS,SAAS,MAAM,kCAAkC,QAAQ,GAAG;AACvF,eAAS,QAAQ,aAAW;AAE1B,gBAAQ,aAAa,sBAAsB,MAAM;AAEjD,YAAI,YAAY,SAAS,QAAQ;AAAA,MACnC,CAAC;AAAA,IACH,SACO,KAAK;AACV,aAAO,MAAM,uBAAuB,iCAAiC,KAAK,EAAC,SAAQ,CAAC;AAAA,IACtF;AAAA,EACF;AACF;;;ACtBO,SAAS,UAAU,UAAkB;AAC1C,SAAO,gBAAgB,cAAc,QAAQ;AAM7C,SAAO,SAAU,aAAyC;AACxD,uBAAmB,KAAK,EAAC,UAAU,YAAW,CAAC;AAAA,EACjD;AACF;;;ACnCA,IAAAA,iBAA2B;AAMpB,IAAe,gBAAf,MAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqBlC,YAAY,SAAsB,UAAkB;AAClD,SAAK,cAAU,6BAAa,aAAa,QAAQ,EAAE;AACnD,SAAK,QAAQ,gBAAgB,OAAO,EAAC,UAAU,QAAO,CAAC;AAEvD,SAAK,YAAY;AACjB,SAAK,WAAW;AAEhB,SAAK,QAAQ;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaU,UAAU,WAAmB,QAAwB;AAC7D,SAAK,QAAQ,gBAAgB,aAAa,EAAC,WAAW,OAAM,CAAC;AAC7D,SAAK,SAAS,cAAc,IAAI,YAAY,WAAW,EAAC,QAAQ,SAAS,KAAI,CAAC,CAAC;AAAA,EACjF;AACF;",
+  "sources": ["../src/main.ts", "../src/lib.ts", "../src/bootstrap.ts", "../src/directiveDecorator.ts", "../src/directiveClass.ts", "../src/queryDecorator.ts"],
+  "sourcesContent": ["export * from './bootstrap.js';\nexport * from './directiveDecorator.js';\nexport * from './directiveClass.js';\nexport * from './queryDecorator.js';\n", "import {createLogger} from '@alwatr/logger';\n\nimport type {DirectiveConstructor} from './directiveDecorator.js';\n\n/**\n * Alwatr Synapse Logger.\n */\nexport const logger = createLogger('alwatr/synapse');\n\n/**\n * The registry for all directives.\n */\nexport const directiveRegistry_: {selector: string; constructor: DirectiveConstructor}[] = [];\n", "import {directiveRegistry_, logger} from './lib.js';\n\nconst initializedAttribute = '_synapseConnected';\n\n/**\n * Initializes all registered directives within a given root element.\n * If no root element is provided, it scans the entire body.\n *\n * This function is idempotent; it will not re-initialize a directive on an element\n * that has already been processed.\n *\n * @param rootElement The element to scan for directives. Defaults to `document.body`.\n *\n * @example\n * ```ts\n * // Initialize directives on the whole page after the DOM is loaded.\n * document.addEventListener('DOMContentLoaded', () => bootstrapDirectives());\n *\n * // Or, initialize directives on a dynamically added part of the page.\n * const newContent = document.createElement('div');\n * newContent.innerHTML = '<div class=\"my-button\">Click Me</div>';\n * document.body.appendChild(newContent);\n *\n * bootstrapDirectives(newContent);\n * ```\n */\nexport function bootstrapDirectives(rootElement: Element | Document = document.body): void {\n  logger.logMethod?.('bootstrapDirectives');\n\n  for (const {selector, constructor} of directiveRegistry_) {\n    try {\n      const uninitializedSelector = `${selector}:not([${initializedAttribute}])`;\n      const elements = rootElement.querySelectorAll<HTMLElement>(uninitializedSelector);\n      if (elements.length === 0) continue;\n\n      logger.logOther?.(`Found ${elements.length} new element(s) for directive \"${selector}\"`);\n      elements.forEach(element => {\n        // Mark the element as processed before creating an instance\n        element.setAttribute(initializedAttribute, 'true');\n        // Instantiate the directive with the element.\n        new constructor(element, selector);\n      });\n    }\n    catch (err) {\n      logger.error('bootstrapDirectives', 'directive_instantiation_error', err, {selector});\n    }\n  }\n}\n", "import {directiveRegistry_, logger} from './lib.js';\n\nimport type {DirectiveBase} from './directiveClass.js';\n\n/**\n * Type definition for a directive constructor.\n * A directive class must have a constructor that accepts an HTMLElement.\n */\nexport type DirectiveConstructor<T extends DirectiveBase = DirectiveBase> = new (element: HTMLElement, selector: string) => T;\n\n/**\n * A class decorator that registers a class as a directive.\n *\n * @param selector The CSS selector to which this directive will be attached.\n *\n * @example\n * ```ts\n * @directive('.my-button')\n * class MyButtonDirective extends DirectiveBase {\n *   protected update_(): void {\n *     this.element_.addEventListener('click', () => console.log('Button clicked!'));\n *   }\n * }\n * ```\n */\nexport function directive(selector: string) {\n  logger.logMethodArgs?.('@directive', selector);\n\n  /**\n   * The decorator function that receives the class constructor.\n   * @param constructor The class to be registered as a directive.\n   */\n  return function (constructor: DirectiveConstructor): void {\n    directiveRegistry_.push({selector, constructor});\n  };\n}\n", "import {delay} from '@alwatr/delay';\nimport {createLogger} from '@alwatr/logger';\n\n/**\n * Base class for creating directives that attach behavior to DOM elements.\n * Extend this class to define custom directives.\n */\nexport abstract class DirectiveBase {\n  /**\n   * The CSS selector for the directive.\n   */\n  protected readonly selector_;\n\n  /**\n   * Logger instance for the directive.\n   */\n  protected readonly logger_;\n\n  /**\n   * The target DOM element this directive is attached to.\n   */\n  protected readonly element_: HTMLElement;\n\n  /**\n   * Constructor to initialize the directive with the target element.\n   * @param element - The DOM element this directive is attached to.\n   * @param selector - The CSS selector for the directive.\n   */\n  constructor(element: HTMLElement, selector: string) {\n    this.logger_ = createLogger(`directive:${selector}`);\n    this.logger_.logMethodArgs?.('new', {selector, element});\n\n    this.selector_ = selector;\n    this.element_ = element;\n\n    (async () => {\n      await delay.immediate();\n      await this.init_();\n      await this.update_();\n    })();\n  }\n\n  /**\n   * Called to update the directive's state or behavior.\n   * Must be implemented by subclasses.\n   */\n  protected abstract update_(): MaybePromise<void>;\n\n  protected init_(): MaybePromise<void> {\n    this.logger_.logMethod?.('init');\n  }\n\n  protected destroy_(): MaybePromise<void> {\n    this.logger_.logMethod?.('destroy');\n    this.element_.remove();\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (this as any).element_ = null;\n  }\n\n  /**\n   * Dispatches a custom event from the target element.\n   * @param eventName - The name of the event.\n   * @param detail - Optional data to include in the event.\n   */\n  protected dispatch_(eventName: string, detail?: unknown): void {\n    this.logger_.logMethodArgs?.('dispatch_', {eventName, detail});\n    this.element_.dispatchEvent(new CustomEvent(eventName, {detail, bubbles: true}));\n  }\n}\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type {DirectiveBase} from './directiveClass.js';\n\n/**\n * A property decorator that queries the directive's element for a selector.\n * The query is performed once and the result is cached.\n *\n * @param selector The CSS selector to query for.\n * @param cache Whether to cache the result on first access. Defaults is true.\n *\n * @example\n * ```ts\n * @directive('[my-directive]')\n * class MyDirective extends DirectiveBase {\n *   @query('.my-element')\n *   protected myElement?: HTMLDivElement;\n * }\n * ```\n */\nexport function query(selector: string, cache = true) {\n  return function (target: DirectiveBase, propertyKey: string): void {\n    const privateKey = Symbol(`${String(propertyKey)}__`);\n\n    Object.defineProperty(target, propertyKey, {\n      get(this: DirectiveBase) {\n        if (cache === false || (this as any)[privateKey] === undefined) {\n          (this as any)[privateKey] = this.element_.querySelector(selector);\n        }\n        return (this as any)[privateKey];\n      },\n      configurable: true,\n      enumerable: true,\n    });\n  };\n}\n\n/**\n * A property decorator that queries the directive's element for all selectors.\n * The queries are performed once and the result is cached.\n *\n * @param selector The CSS selector to query for.\n *\n * @example\n * ```ts\n * @directive('[my-directive]')\n * class MyDirective extends DirectiveBase {\n *   @queryAll('.my-elements')\n *   protected myElements?: NodeListOf<HTMLDivElement>;\n * }\n * ```\n */\nexport function queryAll(selector: string, cache = true) {\n  return function (target: DirectiveBase, propertyKey: string): void {\n    const privateKey = Symbol(`${String(propertyKey)}__`);\n\n    Object.defineProperty(target, propertyKey, {\n      get(this: DirectiveBase) {\n        if (cache === false || (this as any)[privateKey] === undefined) {\n          (this as any)[privateKey] = this.element_.querySelectorAll(selector);\n        }\n        return (this as any)[privateKey];\n      },\n      configurable: true,\n      enumerable: true,\n    });\n  };\n}\n"],
+  "mappings": "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",
   "names": ["import_logger"]
 }

package/dist/main.d.ts

@@ -1,4 +1,5 @@
 export * from './bootstrap.js';
 export * from './directiveDecorator.js';
 export * from './directiveClass.js';
+export * from './queryDecorator.js';
 //# sourceMappingURL=main.d.ts.map

package/dist/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}

package/dist/main.mjs

@@ -1,4 +1,4 @@
-/* @alwatr/synapse v1.0.0 */
+/* @alwatr/synapse v1.1.0 */
 
 // src/lib.ts
 import { createLogger } from "@alwatr/logger";
@@ -34,6 +34,7 @@ function directive(selector) {
 }
 
 // src/directiveClass.ts
+import { delay } from "@alwatr/delay";
 import { createLogger as createLogger2 } from "@alwatr/logger";
 var DirectiveBase = class {
   /**
@@ -46,7 +47,19 @@ var DirectiveBase = class {
     this.logger_.logMethodArgs?.("new", { selector, element });
     this.selector_ = selector;
     this.element_ = element;
-    this.update_();
+    (async () => {
+      await delay.immediate();
+      await this.init_();
+      await this.update_();
+    })();
+  }
+  init_() {
+    this.logger_.logMethod?.("init");
+  }
+  destroy_() {
+    this.logger_.logMethod?.("destroy");
+    this.element_.remove();
+    this.element_ = null;
   }
   /**
    * Dispatches a custom event from the target element.
@@ -58,9 +71,43 @@ var DirectiveBase = class {
     this.element_.dispatchEvent(new CustomEvent(eventName, { detail, bubbles: true }));
   }
 };
+
+// src/queryDecorator.ts
+function query(selector, cache = true) {
+  return function(target, propertyKey) {
+    const privateKey = Symbol(`${String(propertyKey)}__`);
+    Object.defineProperty(target, propertyKey, {
+      get() {
+        if (cache === false || this[privateKey] === void 0) {
+          this[privateKey] = this.element_.querySelector(selector);
+        }
+        return this[privateKey];
+      },
+      configurable: true,
+      enumerable: true
+    });
+  };
+}
+function queryAll(selector, cache = true) {
+  return function(target, propertyKey) {
+    const privateKey = Symbol(`${String(propertyKey)}__`);
+    Object.defineProperty(target, propertyKey, {
+      get() {
+        if (cache === false || this[privateKey] === void 0) {
+          this[privateKey] = this.element_.querySelectorAll(selector);
+        }
+        return this[privateKey];
+      },
+      configurable: true,
+      enumerable: true
+    });
+  };
+}
 export {
   DirectiveBase,
   bootstrapDirectives,
-  directive
+  directive,
+  query,
+  queryAll
 };
 //# sourceMappingURL=main.mjs.map

package/dist/main.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/lib.ts", "../src/bootstrap.ts", "../src/directiveDecorator.ts", "../src/directiveClass.ts"],
-  "sourcesContent": ["import {createLogger} from '@alwatr/logger';\n\nimport type {DirectiveConstructor} from './directiveDecorator.js';\n\n/**\n * Alwatr Synapse Logger.\n */\nexport const logger = createLogger('alwatr/synapse');\n\n/**\n * The registry for all directives.\n */\nexport const directiveRegistry_: {selector: string; constructor: DirectiveConstructor}[] = [];\n", "import {directiveRegistry_, logger} from './lib.js';\n\nconst initializedAttribute = '_synapseConnected';\n\n/**\n * Initializes all registered directives within a given root element.\n * If no root element is provided, it scans the entire body.\n *\n * This function is idempotent; it will not re-initialize a directive on an element\n * that has already been processed.\n *\n * @param rootElement The element to scan for directives. Defaults to `document.body`.\n *\n * @example\n * ```ts\n * // Initialize directives on the whole page after the DOM is loaded.\n * document.addEventListener('DOMContentLoaded', () => bootstrapDirectives());\n *\n * // Or, initialize directives on a dynamically added part of the page.\n * const newContent = document.createElement('div');\n * newContent.innerHTML = '<div class=\"my-button\">Click Me</div>';\n * document.body.appendChild(newContent);\n *\n * bootstrapDirectives(newContent);\n * ```\n */\nexport function bootstrapDirectives(rootElement: Element | Document = document.body): void {\n  logger.logMethod?.('bootstrapDirectives');\n\n  for (const {selector, constructor} of directiveRegistry_) {\n    try {\n      const uninitializedSelector = `${selector}:not([${initializedAttribute}])`;\n      const elements = rootElement.querySelectorAll<HTMLElement>(uninitializedSelector);\n      if (elements.length === 0) continue;\n\n      logger.logOther?.(`Found ${elements.length} new element(s) for directive \"${selector}\"`);\n      elements.forEach(element => {\n        // Mark the element as processed before creating an instance\n        element.setAttribute(initializedAttribute, 'true');\n        // Instantiate the directive with the element.\n        new constructor(element, selector);\n      });\n    }\n    catch (err) {\n      logger.error('bootstrapDirectives', 'directive_instantiation_error', err, {selector});\n    }\n  }\n}\n", "import {directiveRegistry_, logger} from './lib.js';\n\nimport type {DirectiveBase} from './directiveClass.js';\n\n/**\n * Type definition for a directive constructor.\n * A directive class must have a constructor that accepts an HTMLElement.\n */\nexport type DirectiveConstructor<T extends DirectiveBase = DirectiveBase> = new (element: HTMLElement, selector: string) => T;\n\n/**\n * A class decorator that registers a class as a directive.\n *\n * @param selector The CSS selector to which this directive will be attached.\n *\n * @example\n * ```ts\n * @directive('.my-button')\n * class MyButtonDirective extends DirectiveBase {\n *   protected update_(): void {\n *     this.element_.addEventListener('click', () => console.log('Button clicked!'));\n *   }\n * }\n * ```\n */\nexport function directive(selector: string) {\n  logger.logMethodArgs?.('@directive', selector);\n\n  /**\n   * The decorator function that receives the class constructor.\n   * @param constructor The class to be registered as a directive.\n   */\n  return function (constructor: DirectiveConstructor): void {\n    directiveRegistry_.push({selector, constructor});\n  };\n}\n", "import {createLogger} from '@alwatr/logger';\n\n/**\n * Base class for creating directives that attach behavior to DOM elements.\n * Extend this class to define custom directives.\n */\nexport abstract class DirectiveBase {\n  /**\n   * The CSS selector for the directive.\n   */\n  protected readonly selector_;\n\n  /**\n   * Logger instance for the directive.\n   */\n  protected readonly logger_;\n\n  /**\n   * The target DOM element this directive is attached to.\n   */\n  protected readonly element_: HTMLElement;\n\n  /**\n   * Constructor to initialize the directive with the target element.\n   * @param element - The DOM element this directive is attached to.\n   * @param selector - The CSS selector for the directive.\n   */\n  constructor(element: HTMLElement, selector: string) {\n    this.logger_ = createLogger(`directive:${selector}`);\n    this.logger_.logMethodArgs?.('new', {selector, element});\n\n    this.selector_ = selector;\n    this.element_ = element;\n\n    this.update_();\n  }\n\n  /**\n   * Called to update the directive's state or behavior.\n   * Must be implemented by subclasses.\n   */\n  protected abstract update_(): void;\n\n  /**\n   * Dispatches a custom event from the target element.\n   * @param eventName - The name of the event.\n   * @param detail - Optional data to include in the event.\n   */\n  protected dispatch_(eventName: string, detail?: unknown): void {\n    this.logger_.logMethodArgs?.('dispatch_', {eventName, detail});\n    this.element_.dispatchEvent(new CustomEvent(eventName, {detail, bubbles: true}));\n  }\n}\n"],
-  "mappings": ";;;AAAA,SAAQ,oBAAmB;AAOpB,IAAM,SAAS,aAAa,gBAAgB;AAK5C,IAAM,qBAA8E,CAAC;;;ACV5F,IAAM,uBAAuB;AAwBtB,SAAS,oBAAoB,cAAkC,SAAS,MAAY;AACzF,SAAO,YAAY,qBAAqB;AAExC,aAAW,EAAC,UAAU,YAAW,KAAK,oBAAoB;AACxD,QAAI;AACF,YAAM,wBAAwB,GAAG,QAAQ,SAAS,oBAAoB;AACtE,YAAM,WAAW,YAAY,iBAA8B,qBAAqB;AAChF,UAAI,SAAS,WAAW,EAAG;AAE3B,aAAO,WAAW,SAAS,SAAS,MAAM,kCAAkC,QAAQ,GAAG;AACvF,eAAS,QAAQ,aAAW;AAE1B,gBAAQ,aAAa,sBAAsB,MAAM;AAEjD,YAAI,YAAY,SAAS,QAAQ;AAAA,MACnC,CAAC;AAAA,IACH,SACO,KAAK;AACV,aAAO,MAAM,uBAAuB,iCAAiC,KAAK,EAAC,SAAQ,CAAC;AAAA,IACtF;AAAA,EACF;AACF;;;ACtBO,SAAS,UAAU,UAAkB;AAC1C,SAAO,gBAAgB,cAAc,QAAQ;AAM7C,SAAO,SAAU,aAAyC;AACxD,uBAAmB,KAAK,EAAC,UAAU,YAAW,CAAC;AAAA,EACjD;AACF;;;ACnCA,SAAQ,gBAAAA,qBAAmB;AAMpB,IAAe,gBAAf,MAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAqBlC,YAAY,SAAsB,UAAkB;AAClD,SAAK,UAAUA,cAAa,aAAa,QAAQ,EAAE;AACnD,SAAK,QAAQ,gBAAgB,OAAO,EAAC,UAAU,QAAO,CAAC;AAEvD,SAAK,YAAY;AACjB,SAAK,WAAW;AAEhB,SAAK,QAAQ;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaU,UAAU,WAAmB,QAAwB;AAC7D,SAAK,QAAQ,gBAAgB,aAAa,EAAC,WAAW,OAAM,CAAC;AAC7D,SAAK,SAAS,cAAc,IAAI,YAAY,WAAW,EAAC,QAAQ,SAAS,KAAI,CAAC,CAAC;AAAA,EACjF;AACF;",
+  "sources": ["../src/lib.ts", "../src/bootstrap.ts", "../src/directiveDecorator.ts", "../src/directiveClass.ts", "../src/queryDecorator.ts"],
+  "sourcesContent": ["import {createLogger} from '@alwatr/logger';\n\nimport type {DirectiveConstructor} from './directiveDecorator.js';\n\n/**\n * Alwatr Synapse Logger.\n */\nexport const logger = createLogger('alwatr/synapse');\n\n/**\n * The registry for all directives.\n */\nexport const directiveRegistry_: {selector: string; constructor: DirectiveConstructor}[] = [];\n", "import {directiveRegistry_, logger} from './lib.js';\n\nconst initializedAttribute = '_synapseConnected';\n\n/**\n * Initializes all registered directives within a given root element.\n * If no root element is provided, it scans the entire body.\n *\n * This function is idempotent; it will not re-initialize a directive on an element\n * that has already been processed.\n *\n * @param rootElement The element to scan for directives. Defaults to `document.body`.\n *\n * @example\n * ```ts\n * // Initialize directives on the whole page after the DOM is loaded.\n * document.addEventListener('DOMContentLoaded', () => bootstrapDirectives());\n *\n * // Or, initialize directives on a dynamically added part of the page.\n * const newContent = document.createElement('div');\n * newContent.innerHTML = '<div class=\"my-button\">Click Me</div>';\n * document.body.appendChild(newContent);\n *\n * bootstrapDirectives(newContent);\n * ```\n */\nexport function bootstrapDirectives(rootElement: Element | Document = document.body): void {\n  logger.logMethod?.('bootstrapDirectives');\n\n  for (const {selector, constructor} of directiveRegistry_) {\n    try {\n      const uninitializedSelector = `${selector}:not([${initializedAttribute}])`;\n      const elements = rootElement.querySelectorAll<HTMLElement>(uninitializedSelector);\n      if (elements.length === 0) continue;\n\n      logger.logOther?.(`Found ${elements.length} new element(s) for directive \"${selector}\"`);\n      elements.forEach(element => {\n        // Mark the element as processed before creating an instance\n        element.setAttribute(initializedAttribute, 'true');\n        // Instantiate the directive with the element.\n        new constructor(element, selector);\n      });\n    }\n    catch (err) {\n      logger.error('bootstrapDirectives', 'directive_instantiation_error', err, {selector});\n    }\n  }\n}\n", "import {directiveRegistry_, logger} from './lib.js';\n\nimport type {DirectiveBase} from './directiveClass.js';\n\n/**\n * Type definition for a directive constructor.\n * A directive class must have a constructor that accepts an HTMLElement.\n */\nexport type DirectiveConstructor<T extends DirectiveBase = DirectiveBase> = new (element: HTMLElement, selector: string) => T;\n\n/**\n * A class decorator that registers a class as a directive.\n *\n * @param selector The CSS selector to which this directive will be attached.\n *\n * @example\n * ```ts\n * @directive('.my-button')\n * class MyButtonDirective extends DirectiveBase {\n *   protected update_(): void {\n *     this.element_.addEventListener('click', () => console.log('Button clicked!'));\n *   }\n * }\n * ```\n */\nexport function directive(selector: string) {\n  logger.logMethodArgs?.('@directive', selector);\n\n  /**\n   * The decorator function that receives the class constructor.\n   * @param constructor The class to be registered as a directive.\n   */\n  return function (constructor: DirectiveConstructor): void {\n    directiveRegistry_.push({selector, constructor});\n  };\n}\n", "import {delay} from '@alwatr/delay';\nimport {createLogger} from '@alwatr/logger';\n\n/**\n * Base class for creating directives that attach behavior to DOM elements.\n * Extend this class to define custom directives.\n */\nexport abstract class DirectiveBase {\n  /**\n   * The CSS selector for the directive.\n   */\n  protected readonly selector_;\n\n  /**\n   * Logger instance for the directive.\n   */\n  protected readonly logger_;\n\n  /**\n   * The target DOM element this directive is attached to.\n   */\n  protected readonly element_: HTMLElement;\n\n  /**\n   * Constructor to initialize the directive with the target element.\n   * @param element - The DOM element this directive is attached to.\n   * @param selector - The CSS selector for the directive.\n   */\n  constructor(element: HTMLElement, selector: string) {\n    this.logger_ = createLogger(`directive:${selector}`);\n    this.logger_.logMethodArgs?.('new', {selector, element});\n\n    this.selector_ = selector;\n    this.element_ = element;\n\n    (async () => {\n      await delay.immediate();\n      await this.init_();\n      await this.update_();\n    })();\n  }\n\n  /**\n   * Called to update the directive's state or behavior.\n   * Must be implemented by subclasses.\n   */\n  protected abstract update_(): MaybePromise<void>;\n\n  protected init_(): MaybePromise<void> {\n    this.logger_.logMethod?.('init');\n  }\n\n  protected destroy_(): MaybePromise<void> {\n    this.logger_.logMethod?.('destroy');\n    this.element_.remove();\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (this as any).element_ = null;\n  }\n\n  /**\n   * Dispatches a custom event from the target element.\n   * @param eventName - The name of the event.\n   * @param detail - Optional data to include in the event.\n   */\n  protected dispatch_(eventName: string, detail?: unknown): void {\n    this.logger_.logMethodArgs?.('dispatch_', {eventName, detail});\n    this.element_.dispatchEvent(new CustomEvent(eventName, {detail, bubbles: true}));\n  }\n}\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type {DirectiveBase} from './directiveClass.js';\n\n/**\n * A property decorator that queries the directive's element for a selector.\n * The query is performed once and the result is cached.\n *\n * @param selector The CSS selector to query for.\n * @param cache Whether to cache the result on first access. Defaults is true.\n *\n * @example\n * ```ts\n * @directive('[my-directive]')\n * class MyDirective extends DirectiveBase {\n *   @query('.my-element')\n *   protected myElement?: HTMLDivElement;\n * }\n * ```\n */\nexport function query(selector: string, cache = true) {\n  return function (target: DirectiveBase, propertyKey: string): void {\n    const privateKey = Symbol(`${String(propertyKey)}__`);\n\n    Object.defineProperty(target, propertyKey, {\n      get(this: DirectiveBase) {\n        if (cache === false || (this as any)[privateKey] === undefined) {\n          (this as any)[privateKey] = this.element_.querySelector(selector);\n        }\n        return (this as any)[privateKey];\n      },\n      configurable: true,\n      enumerable: true,\n    });\n  };\n}\n\n/**\n * A property decorator that queries the directive's element for all selectors.\n * The queries are performed once and the result is cached.\n *\n * @param selector The CSS selector to query for.\n *\n * @example\n * ```ts\n * @directive('[my-directive]')\n * class MyDirective extends DirectiveBase {\n *   @queryAll('.my-elements')\n *   protected myElements?: NodeListOf<HTMLDivElement>;\n * }\n * ```\n */\nexport function queryAll(selector: string, cache = true) {\n  return function (target: DirectiveBase, propertyKey: string): void {\n    const privateKey = Symbol(`${String(propertyKey)}__`);\n\n    Object.defineProperty(target, propertyKey, {\n      get(this: DirectiveBase) {\n        if (cache === false || (this as any)[privateKey] === undefined) {\n          (this as any)[privateKey] = this.element_.querySelectorAll(selector);\n        }\n        return (this as any)[privateKey];\n      },\n      configurable: true,\n      enumerable: true,\n    });\n  };\n}\n"],
+  "mappings": "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",
   "names": ["createLogger"]
 }

package/dist/queryDecorator.d.ts

@@ -0,0 +1,35 @@
+import type { DirectiveBase } from './directiveClass.js';
+/**
+ * A property decorator that queries the directive's element for a selector.
+ * The query is performed once and the result is cached.
+ *
+ * @param selector The CSS selector to query for.
+ * @param cache Whether to cache the result on first access. Defaults is true.
+ *
+ * @example
+ * ```ts
+ * @directive('[my-directive]')
+ * class MyDirective extends DirectiveBase {
+ *   @query('.my-element')
+ *   protected myElement?: HTMLDivElement;
+ * }
+ * ```
+ */
+export declare function query(selector: string, cache?: boolean): (target: DirectiveBase, propertyKey: string) => void;
+/**
+ * A property decorator that queries the directive's element for all selectors.
+ * The queries are performed once and the result is cached.
+ *
+ * @param selector The CSS selector to query for.
+ *
+ * @example
+ * ```ts
+ * @directive('[my-directive]')
+ * class MyDirective extends DirectiveBase {
+ *   @queryAll('.my-elements')
+ *   protected myElements?: NodeListOf<HTMLDivElement>;
+ * }
+ * ```
+ */
+export declare function queryAll(selector: string, cache?: boolean): (target: DirectiveBase, propertyKey: string) => void;
+//# sourceMappingURL=queryDecorator.d.ts.map

package/dist/queryDecorator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"queryDecorator.d.ts","sourceRoot":"","sources":["../src/queryDecorator.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAEvD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,UAAO,IACjC,QAAQ,aAAa,EAAE,aAAa,MAAM,KAAG,IAAI,CAcnE;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,UAAO,IACpC,QAAQ,aAAa,EAAE,aAAa,MAAM,KAAG,IAAI,CAcnE"}

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@alwatr/synapse",
   "description": "Connect your TypeScript classes to the DOM, declaratively.",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "author": "S. Ali Mihandoost <ali.mihandoost@gmail.com>",
   "bugs": "https://github.com/Alwatr/nanolib/issues",
   "dependencies": {
-    "@alwatr/logger": "5.5.6"
+    "@alwatr/delay": "5.5.9",
+    "@alwatr/logger": "5.5.7"
   },
   "devDependencies": {
-    "@alwatr/nano-build": "6.0.1",
+    "@alwatr/nano-build": "6.0.2",
     "@alwatr/prettier-config": "5.0.2",
     "@alwatr/tsconfig-base": "5.0.2",
     "@alwatr/type-helper": "5.4.4",
@@ -70,5 +71,5 @@
   },
   "type": "module",
   "types": "./dist/main.d.ts",
-  "gitHead": "3c92f996e96508ea3a0432539367e34133993647"
+  "gitHead": "6f70c2ae343582774a7fa8694684fabb4c5ce63c"
 }