@zyrab/domo 1.0.0 → 1.0.1

package/index.js

@@ -1,4 +1,35 @@
-import Domo from "./src/core/Domo.js";
+// @ts-check
+
+import DomoClass from "./src/core/Domo.js";
 import Router from "./src/core/Router.js";
+import DomoSVGClass from "./src/core/DomoSVG.js";
+
+/**
+ * @typedef {import('./src/core/Domo.js').default} DomoInstance
+ * @typedef {import('./src/core/DomoSVG.js').default} DomoSVGInstance
+ */
+
+/**
+ * @typedef {((tag?: string) => DomoInstance) & { Class: typeof DomoClass }} DomoFactory
+ * @typedef {((tag?: string) => DomoSVGInstance)} DomoSVGFactory
+ */
+
+/**
+ * @param {string} [tag]
+ * @returns {DomoInstance}
+ */
+function Domo(tag) {
+  return new DomoClass(tag);
+}
+Domo.Class = DomoClass;
+
+/**
+ * @param {string} [tag]
+ * @returns {DomoSVGInstance}
+ */
+function DSVG(tag) {
+  return new DomoSVGClass(tag);
+}
+DSVG.Class = DomoSVGClass;
 
-export { Domo, Router };
+export { Domo, Router, DSVG, DomoClass };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zyrab/domo",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Minimalist DOM builder and chaining-friendly micro-framework with router support.",
   "main": "index.js",
   "type": "module",

package/src/core/Domo.js

@@ -1,5 +1,6 @@
 /**
  * Domo - Lightweight helper class for creating and manipulating DOM elements fluently.
+ * @typedef {import('./Domo').default} Domo
  */
 class Domo {
   /**
@@ -69,6 +70,9 @@ class Domo {
 
   /**
    * Adds classes
+   * accepted types:
+   *  string
+   *  string[]
    *  @param {string|string[]} classes
    */
   cls(classes) {
@@ -80,6 +84,9 @@ class Domo {
 
   /**
    * Removes classes
+   *  accepted types:
+   *  string
+   *  string[]
    *   @param {string|string[]} classes
    */
   rmvCls(classes) {
@@ -160,13 +167,34 @@ class Domo {
   }
 
   /**
-   * Adds an event listener.
-   * @param {string} event
-   * @param {EventListenerOrEventListenerObject} callback
-   * @param {AddEventListenerOptions} [options]
+   * Adds one or multiple event listeners to the element.
+   *
+   * Supports both:
+   * - A single event: `on('click', handler, options)`
+   * - Multiple events via object map: `on({ click: handler, mouseenter: [handler, options] })`
+   *
+   * @param {string | Record<string, Function | [Function, AddEventListenerOptions]>} eventMapOrName
+   *   Either an event name string, or an object mapping event names to handlers (or [handler, options] tuples).
+   * @param {EventListenerOrEventListenerObject} [callback]
+   *   Callback to execute when the event is triggered (used when first param is a string).
+   * @param {AddEventListenerOptions} [options={}]
+   *   Options for `addEventListener` (used when first param is a string).
+   * @returns {this} The current instance for chaining.
    */
-  on(event, callback, options = {}) {
-    this.element.addEventListener(event, callback, options);
+
+  on(eventMapOrName, callback, options = {}) {
+    if (typeof eventMapOrName === "object" && eventMapOrName !== null) {
+      for (const [event, value] of Object.entries(eventMapOrName)) {
+        if (typeof value === "function") {
+          this.element.addEventListener(event, value);
+        } else if (Array.isArray(value)) {
+          const [cb, opts] = value;
+          this.element.addEventListener(event, cb, opts);
+        }
+      }
+    } else {
+      this.element.addEventListener(eventMapOrName, callback, options);
+    }
     return this;
   }
 
@@ -180,6 +208,7 @@ class Domo {
 
   /**
    * Delegates events to closest matching ancestor.
+   * accepts a map of selectors to event handlers
    * @param {string} event
    * @param {Record<string, (e: Event, target: Element) => void>} selectors
    * @param {AddEventListenerOptions} [options]
@@ -197,6 +226,7 @@ class Domo {
 
   /**
    * Delegates events using element.matches.
+   * accepts a map of selectors to event handlers
    * @param {string} event
    * @param {Record<string, (e: Event, target: Element) => void>} selectors
    * @param {AddEventListenerOptions} [options]
@@ -217,8 +247,15 @@ class Domo {
   }
 
   /**
-   * Appends children (can be nested arrays, strings, numbers, fragments, elements).
-   * @param {any[]} children
+   * Appends children to the element.
+   * Accepts:
+   * - DOM nodes
+   * - Domo instances
+   * - DocumentFragments
+   * - Primitive strings/numbers (as text nodes)
+   * - Nested arrays of above
+   * @param {(Node|string|number|Domo|DocumentFragment|Array<any>)[]} children
+   * @returns {Domo}
    */
   child(children = []) {
     const flattenedChildren = children.flat();
@@ -238,8 +275,15 @@ class Domo {
 
   /**
    * Replaces a child element or self with a new one.
+   * * Accepts:
+   * - DOM nodes
+   * - Domo instances
+   * - DocumentFragments
+   * - Primitive strings/numbers (as text nodes)
+   * - Nested arrays of above
+   *
    * @param {Node} child
-   * @param {any} newChild
+   * @param {(Node|string|number|Domo|DocumentFragment|Array<any>)[]} newChild
    */
   replace(child, newChild) {
     const instance = this._handleElementInstance(newChild);

package/src/core/DomoSVG.js

@@ -1,3 +1,4 @@
+import Domo from "./Domo.js";
 class DomoSVG extends Domo {
   constructor(tag = "svg") {
     super(tag); // Call Domo constructor with tag
@@ -61,3 +62,4 @@ class DomoSVG extends Domo {
     return this;
   }
 }
+export default DomoSVG;

package/src/core/Router.js

@@ -125,7 +125,7 @@ function restoreScroll() {
   window.scrollTo(0, pos || 0);
 }
 
-export const Router = {
+const Router = {
   /**
    * Mount point of the router, where components will be rendered.
    * @returns {HTMLElement} The root DOM element used by the router.
@@ -201,3 +201,5 @@ export const Router = {
     if (typeof fn === "function") _listeners.push(fn);
   },
 };
+
+export default Router;