@zyrab/domo 1.0.4 → 1.1.1

package/package.json

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

package/src/core/Domo.js

@@ -63,9 +63,7 @@ class Domo {
    * @returns {string[]}
    */
   _parseClassList(input) {
-    return Array.isArray(input)
-      ? input.filter(Boolean)
-      : String(input).split(" ").filter(Boolean);
+    return Array.isArray(input) ? input.filter(Boolean) : String(input).split(" ").filter(Boolean);
   }
 
   /**
@@ -264,7 +262,49 @@ class Domo {
     });
     return this;
   }
+  /**
+   * Appends children to the element.
+   * Alias for `child`.
+   * 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}
+   */
+  append(children = []) {
+    return this.child(children);
+  }
 
+  /**
+   * Appends the current element to a target parent.
+   * Accepts:
+   * - HTMLElement
+   * - Domo instance
+   * - DocumentFragment
+   * @param {HTMLElement|Domo|DocumentFragment} target
+   * @returns {Domo}
+   */
+  appendTo(target) {
+    if (_handleElementInstance(target)) parent.appendChild(this.element);
+    return this;
+  }
+
+  /**
+   * Appends the current element to a target parent.
+   * Alias for `appendTo`.
+   * @param {HTMLElement|Domo|DocumentFragment} target
+   * @returns {Domo}
+   */
+  parent(target) {
+    return this.appendTo(target);
+  }
+
+  parent(parent) {
+    parent.appendChild(this.element);
+  }
   /**
    * Removes all children.
    */
@@ -286,13 +326,14 @@ class Domo {
    * @param {(Node|string|number|Domo|DocumentFragment|Array<any>)[]} newChild
    */
   replace(child, newChild) {
-    const instance = this._handleElementInstance(newChild);
+    const resolvedNew = this._handleElementInstance(newChild);
+    const resolvedOld = this._handleElementInstance(child);
 
-    if (child === this.element) {
-      this.element.replaceWith(instance);
-      this.element = instance;
-    } else if (this.element.contains(child)) {
-      child.replaceWith(instance);
+    if (resolvedOld === this.element) {
+      this.element.replaceWith(resolvedNew);
+      this.element = resolvedNew;
+    } else if (this.element.contains(resolvedOld)) {
+      resolvedOld.replaceWith(resolvedNew);
     }
 
     return this;
@@ -315,9 +356,7 @@ class Domo {
    */
   if(condition) {
     if (!condition) {
-      return new Domo("if")
-        .attr({ hidden: true })
-        .data({ if: this.element.tagName.toLowerCase() });
+      return new Domo("if").attr({ hidden: true }).data({ if: this.element.tagName.toLowerCase() });
     }
     return this;
   }

package/src/core/Router.js

@@ -8,6 +8,10 @@ let _root;
 function init() {
   ["DOMContentLoaded", "popstate"].forEach((event) =>
     window.addEventListener(event, async () => {
+      if (!_root) {
+        _root = document.createElement("main");
+        _root.id = "main";
+      }
       saveScroll(_previousUrl);
       const url = path();
       load(url);
@@ -20,7 +24,7 @@ function init() {
 async function render({ component, meta }, params) {
   try {
     const content = await component(params);
-    _root.replaceChildren();
+    _root?.replaceChildren();
 
     if (content instanceof HTMLElement) {
       _root.appendChild(content);
@@ -33,9 +37,7 @@ async function render({ component, meta }, params) {
     }
     if (meta) {
       document.title = meta?.title;
-      document
-        .querySelector("meta[name='description']")
-        .setAttribute("content", meta?.description);
+      document.querySelector("meta[name='description']").setAttribute("content", meta?.description);
     }
   } catch (error) {
     console.error("Rendering error:", error);
@@ -115,13 +117,13 @@ async function load(url) {
 function notify(info) {
   _listeners.forEach((cb) => cb(info));
 }
-function saveScroll(path = window.location.pathname) {
-  _scrollPositions[path] = window.scrollY;
+function saveScroll(path = window?.location?.pathname) {
+  _scrollPositions[path] = window?.scrollY;
 }
 
 function restoreScroll() {
-  const pos = _scrollPositions[window.location.pathname];
-  window.scrollTo(0, pos || 0);
+  const pos = _scrollPositions[window?.location?.pathname];
+  window?.scrollTo(0, pos || 0);
 }
 
 const Router = {
@@ -129,11 +131,7 @@ const Router = {
    * Mount point of the router, where components will be rendered.
    * @returns {HTMLElement} The root DOM element used by the router.
    */
-  mount: () => {
-    _root = document.createElement("main");
-    _root.id = "main";
-    return _root;
-  },
+  mount: () => _root,
 
   /**
    * Initializes the router by setting up event listeners and loading the initial route.