@zyrab/domo 1.1.1 → 1.2.1

package/src/core/Domo.js

@@ -1,373 +0,0 @@
-/**
- * Domo - Lightweight helper class for creating and manipulating DOM elements fluently.
- * @typedef {import('./Domo').default} Domo
- */
-class Domo {
-  /**
-   * @param {string} [el='div'] - The tag name of the element to create.
-   */
-  constructor(el = "div") {
-    this.element = this.el(el);
-  }
-
-  /**
-   * Creates a DOM element.
-   * @param {string} el - Element tag name.
-   * @returns {HTMLElement}
-   */
-  el(el) {
-    return document.createElement(String(el || "div").toLowerCase());
-  }
-
-  /**
-   * Provides direct reference to the created element.
-   * @param {(el: HTMLElement) => void} callBack
-   * @returns {Domo}
-   */
-  ref(callBack) {
-    if (typeof callBack === "function") callBack(this.element);
-    return this;
-  }
-
-  /**
-   * Sets a property on the element if the value is not undefined.
-   * @private
-   * @param {string} key
-   * @param {*} val
-   * @returns {Domo}
-   */
-  _set(key, val) {
-    if (val !== undefined) this.element[key] = val;
-    return this;
-  }
-
-  /** @param {string} id */
-  id(id) {
-    return this._set("id", id);
-  }
-
-  /** @param {string} value */
-  val(value) {
-    return this._set("value", value);
-  }
-
-  /** @param {string} text */
-  txt(text) {
-    return this._set("textContent", text);
-  }
-
-  /**
-   * Normalizes a class list input.
-   * @private
-   * @param {string|string[]} input
-   * @returns {string[]}
-   */
-  _parseClassList(input) {
-    return Array.isArray(input) ? input.filter(Boolean) : String(input).split(" ").filter(Boolean);
-  }
-
-  /**
-   * Adds classes
-   * accepted types:
-   *  string
-   *  string[]
-   *  @param {string|string[]} classes
-   */
-  cls(classes) {
-    if (classes) {
-      this.element.classList.add(...this._parseClassList(classes));
-    }
-    return this;
-  }
-
-  /**
-   * Removes classes
-   *  accepted types:
-   *  string
-   *  string[]
-   *   @param {string|string[]} classes
-   */
-  rmvCls(classes) {
-    if (classes) {
-      this.element.classList.remove(...this._parseClassList(classes));
-    }
-    return this;
-  }
-
-  /**
-   * Toggles a class.
-   * @param {string} className
-   * @param {boolean} [force]
-   */
-  tgglCls(className, force) {
-    this.element.classList.toggle(className, force);
-    return this;
-  }
-
-  /**
-   * Sets attributes (skips event attributes).
-   * @param {Record<string, any>} attributes
-   */
-  attr(attributes = {}) {
-    Object.entries(attributes).forEach(([key, value]) => {
-      if (key.startsWith("on")) return;
-      if (typeof value === "boolean") {
-        if (value) this.element.setAttribute(key, "");
-        else this.element.removeAttribute(key);
-      } else if (value != null) {
-        this.element.setAttribute(key, value);
-      }
-    });
-    return this;
-  }
-
-  /**
-   * Toggles an attribute.
-   * @param {string} attrName
-   * @param {boolean} [force]
-   */
-  tgglAttr(attrName, force) {
-    if (attrName.startsWith("on")) return;
-    if (typeof force === "boolean") {
-      if (force) {
-        this.element.setAttribute(attrName, "");
-      } else {
-        this.element.removeAttribute(attrName);
-      }
-    } else {
-      if (this.element.hasAttribute(attrName)) {
-        this.element.removeAttribute(attrName);
-      } else {
-        this.element.setAttribute(attrName, "");
-      }
-    }
-    return this;
-  }
-
-  /**
-   * Sets data-* attributes.
-   * @param {Record<string, string>} data
-   */
-  data(data = {}) {
-    Object.entries(data).forEach(([key, val]) => {
-      this.element.dataset[key] = val;
-    });
-    return this;
-  }
-
-  /**
-   * Sets CSS styles.
-   * @param {Partial<CSSStyleDeclaration>} styles
-   */
-  css(styles = {}) {
-    Object.assign(this.element.style, styles);
-    return this;
-  }
-
-  /**
-   * 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(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;
-  }
-
-  /** @private */
-  _handleClosest(e, map) {
-    for (const [selector, handler] of Object.entries(map)) {
-      const match = e.target.closest(selector);
-      if (match) handler(e, match);
-    }
-  }
-
-  /**
-   * 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]
-   */
-  onClosest(event, selectors = {}, options = {}) {
-    return this.on(event, (e) => this._handleClosest(e, selectors), options);
-  }
-
-  /** @private */
-  _handleMatches(e, map) {
-    for (const [selector, handler] of Object.entries(map)) {
-      if (e.target.matches(selector)) handler(e, e.target);
-    }
-  }
-
-  /**
-   * 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]
-   */
-  onMatch(event, selectors = {}, options = {}) {
-    return this.on(event, (e) => this._handleMatches(e, selectors), options);
-  }
-
-  /** @private */
-  _handleElementInstance(element) {
-    if (element instanceof Domo) return element.build();
-    if (element instanceof DocumentFragment) return element;
-    if (element instanceof Node) return element;
-    if (typeof element === "string" || typeof element === "number") {
-      return document.createTextNode(element);
-    }
-    return document.createTextNode(`⚠ Invalid child: ${String(element)}`);
-  }
-
-  /**
-   * 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();
-    flattenedChildren.forEach((child) => {
-      this.element.appendChild(this._handleElementInstance(child));
-    });
-    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.
-   */
-  clear() {
-    this.element.replaceChildren();
-    return this;
-  }
-
-  /**
-   * 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 {(Node|string|number|Domo|DocumentFragment|Array<any>)[]} newChild
-   */
-  replace(child, newChild) {
-    const resolvedNew = this._handleElementInstance(newChild);
-    const resolvedOld = this._handleElementInstance(child);
-
-    if (resolvedOld === this.element) {
-      this.element.replaceWith(resolvedNew);
-      this.element = resolvedNew;
-    } else if (this.element.contains(resolvedOld)) {
-      resolvedOld.replaceWith(resolvedNew);
-    }
-
-    return this;
-  }
-
-  /**
-   * Shows or hides the element.
-   * @param {boolean} [visible=true]
-   * @param {string} [displayValue='block']
-   */
-  show(visible = true, displayValue = "block") {
-    this.element.style.display = visible ? displayValue : "none";
-    return this;
-  }
-
-  /**
-   * Conditionally render element, or return dummy hidden placeholder.
-   * @param {boolean} condition
-   * @returns {Domo}
-   */
-  if(condition) {
-    if (!condition) {
-      return new Domo("if").attr({ hidden: true }).data({ if: this.element.tagName.toLowerCase() });
-    }
-    return this;
-  }
-
-  /**
-   * Returns the constructed DOM element.
-   * @returns {HTMLElement}
-   */
-  build() {
-    return this.element;
-  }
-}
-
-export default Domo;

package/src/core/DomoSVG.js

@@ -1,65 +0,0 @@
-import Domo from "./Domo.js";
-class DomoSVG extends Domo {
-  constructor(tag = "svg") {
-    super(tag); // Call Domo constructor with tag
-    if (!this.isSVGTag(tag)) {
-      throw new Error(`Invalid SVG tag: ${tag}`);
-    }
-  }
-
-  /**
-   * Check if the tag is a valid SVG element.
-   * @param {string} tag
-   * @returns {boolean}
-   */
-  isSVGTag(tag) {
-    const svgTags = [
-      "svg",
-      "path",
-      "circle",
-      "rect",
-      "line",
-      "ellipse",
-      "polygon",
-      "g",
-      "text",
-      "use",
-      "defs",
-      "clipPath",
-      "marker",
-      "mask",
-      "style",
-      "linearGradient",
-      "radialGradient",
-      "stop",
-    ];
-    return svgTags.includes(tag);
-  }
-
-  /**
-   * Override the el method to handle SVG namespace creation.
-   * @param {string} tag
-   * @returns {HTMLElement}
-   */
-  el(tag) {
-    return this.isSVGTag(tag)
-      ? document.createElementNS("http://www.w3.org/2000/svg", tag)
-      : super.el(tag); // Fallback to regular DOM creation
-  }
-
-  /**
-   * Set attributes specific to SVG elements.
-   * @param {Record<string, any>} attributes
-   * @returns {DomoSVG}
-   */
-  attr(attributes = {}) {
-    Object.entries(attributes).forEach(([key, value]) => {
-      if (key.startsWith("on")) return;
-      if (value != null) {
-        this.element.setAttributeNS(null, key, value); // Set using SVG-specific namespace
-      }
-    });
-    return this;
-  }
-}
-export default DomoSVG;

package/src/core/Router.js

@@ -1,206 +0,0 @@
-let _routes = {};
-let _listeners = [];
-const _scrollPositions = {};
-let _previousUrl = "";
-
-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);
-      _previousUrl = url;
-      restoreScroll();
-    })
-  );
-}
-
-async function render({ component, meta }, params) {
-  try {
-    const content = await component(params);
-    _root?.replaceChildren();
-
-    if (content instanceof HTMLElement) {
-      _root.appendChild(content);
-    } else if (typeof content === "string") {
-      const wrapper = document.createElement("div");
-      wrapper.textContent = content;
-      _root.appendChild(wrapper);
-    } else {
-      throw new Error("Unsupported component output type");
-    }
-    if (meta) {
-      document.title = meta?.title;
-      document.querySelector("meta[name='description']").setAttribute("content", meta?.description);
-    }
-  } catch (error) {
-    console.error("Rendering error:", error);
-    const fallback = _routes["*"]?.component?.({ error: error.message });
-    if (fallback) {
-      _root.replaceChildren();
-      _root.appendChild(fallback);
-    }
-  }
-}
-async function goTo(path) {
-  saveScroll(_previousUrl);
-  await load(path);
-  _previousUrl = path;
-  restoreScroll();
-}
-
-const path = () => window.location.pathname + window.location.hash;
-
-function info() {
-  const { segments } = parseUrl(path());
-  const { routeData, params } = match(segments);
-  return { meta: routeData.meta || {}, params, segments };
-}
-
-function parseUrl(url) {
-  // Remove the hash from the URL
-  const pureUrl = url.includes("#") ? url.split("#")[0] : url;
-  // Split the URL into segments keepinig '/' for nested routes
-  const segments = pureUrl.split(/(?=\/)/g).filter(Boolean);
-  return {
-    segments,
-    pureUrl,
-  };
-}
-
-function match(segments) {
-  if (!segments.length) return { routeData: _routes["/"] || _routes["*"] };
-
-  let current = _routes;
-  let params = {};
-
-  for (const segment of segments) {
-    if (current[segment]) {
-      // exact match found go deeper
-      current = current[segment].children || current[segment];
-    } else {
-      // look for dynamic route
-      const dynamic = Object.keys(current).find((k) => k.includes(":"));
-      if (!dynamic) return { routeData: _routes["*"], params: {} };
-
-      const parmName = dynamic.split(":")[1];
-      params = { ...params, [parmName]: segment.split("/")[1] };
-      current = current[dynamic].children || current[dynamic];
-    }
-  }
-  // we send for rendering default child if component doesnt exists
-  const final = current.component ? current : current["/"] || _routes["*"];
-
-  return { params, routeData: final };
-}
-
-async function load(url) {
-  const { segments, pureUrl } = parseUrl(url);
-  const { routeData, params } = match(segments);
-
-  if (path() !== url) {
-    history.pushState(null, null, pureUrl);
-  }
-
-  if (url === _previousUrl) return;
-
-  await render(routeData, params);
-  if (_listeners.length > 0) notify(info());
-}
-
-function notify(info) {
-  _listeners.forEach((cb) => cb(info));
-}
-function saveScroll(path = window?.location?.pathname) {
-  _scrollPositions[path] = window?.scrollY;
-}
-
-function restoreScroll() {
-  const pos = _scrollPositions[window?.location?.pathname];
-  window?.scrollTo(0, pos || 0);
-}
-
-const Router = {
-  /**
-   * Mount point of the router, where components will be rendered.
-   * @returns {HTMLElement} The root DOM element used by the router.
-   */
-  mount: () => _root,
-
-  /**
-   * Initializes the router by setting up event listeners and loading the initial route.
-   */
-  init,
-
-  /**
-   * Programmatically navigate to a new route.
-   * @param {string} path - The path to navigate to.
-   * @returns {Promise<void>}
-   */
-  goTo,
-
-  /**
-   * Navigate one step back in browser history.
-   */
-  back: () => history.back(),
-
-  /**
-   * Get the current full path including hash.
-   * @returns {string} The current path.
-   */
-  path,
-
-  /**
-   * Get the previous URL path.
-   * @returns {string}
-   */
-  prev: () => _previousUrl || "/",
-
-  /**
-   * Returns the base (first) segment of the current path.
-   * @returns {string}
-   */
-  base: () => parseUrl(path()).segments[0],
-
-  /**
-   * Returns info about the current route.
-   * @returns {{ meta: object, params: object, segments: string[] }}
-   */
-  info,
-
-  /**
-   * Define your route structure.
-   *
-   * @param {Object} config - Route config object. Supports nested and dynamic routes.
-   * @example
-   * Router.routes({
-   *   '/': { component: Home, meta: { title: "Home", description: "Welcome" } },
-   *   '/blog': {
-   *     children: {
-   *       '/:slug': { component: BlogPost },
-   *       '/': { component: Blog }
-   *     }
-   *   },
-   *   '*': { component: NotFound }
-   * });
-   */
-  routes: (config) => {
-    _routes = config;
-  },
-
-  /**
-   * Register a listener for route changes.
-   * @param {(info: ReturnType<typeof info>) => void} fn - Listener callback.
-   */
-  listen: (fn) => {
-    if (typeof fn === "function") _listeners.push(fn);
-  },
-};
-
-export default Router;