ladrillosjs 2.0.0-beta.2.2 → 2.0.0-beta.3.1

package/dist/core/main.d.ts

@@ -2,8 +2,12 @@ import { LadrillosComponent } from "../types/LadrilloTypes";
 declare class Ladrillos {
     #private;
     components: Record<string, LadrillosComponent>;
+    private lazyComponents;
+    private intersectionObserver;
+    private lazyLoadingInProgress;
+    private lazyComponentsLoaded;
     constructor();
-    registerComponent(name: string, path: string, useShadowDOM?: boolean): Promise<void>;
+    registerComponent(name: string, path: string, useShadowDOM?: boolean, lazy?: boolean): Promise<void>;
 }
 export declare const ladrillos: Ladrillos;
 export {};

package/dist/index-DmNz8gcU.mjs

@@ -0,0 +1,580 @@
+var q = Object.defineProperty, I = Object.defineProperties;
+var B = Object.getOwnPropertyDescriptors;
+var v = Object.getOwnPropertySymbols;
+var j = Object.prototype.hasOwnProperty, W = Object.prototype.propertyIsEnumerable;
+var k = (t) => {
+  throw TypeError(t);
+};
+var P = (t, e, r) => e in t ? q(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, h = (t, e) => {
+  for (var r in e || (e = {}))
+    j.call(e, r) && P(t, r, e[r]);
+  if (v)
+    for (var r of v(e))
+      W.call(e, r) && P(t, r, e[r]);
+  return t;
+}, f = (t, e) => I(t, B(e));
+var D = (t, e, r) => e.has(t) || k("Cannot " + r);
+var z = (t, e, r) => e.has(t) ? k("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r);
+var $ = (t, e, r) => (D(t, e, "access private method"), r);
+var p = (t, e, r) => new Promise((s, o) => {
+  var i = (c) => {
+    try {
+      a(r.next(c));
+    } catch (d) {
+      o(d);
+    }
+  }, l = (c) => {
+    try {
+      a(r.throw(c));
+    } catch (d) {
+      o(d);
+    }
+  }, a = (c) => c.done ? s(c.value) : Promise.resolve(c.value).then(i, l);
+  a((r = r.apply(t, e)).next());
+});
+const L = () => {
+  try {
+    return !1;
+  } catch (t) {
+    return process.env.NODE_ENV === "development";
+  }
+}, n = {
+  /**
+   * Log a message only in development mode
+   * @param message - The message to log
+   * @param args - Additional arguments to log
+   */
+  log(t, ...e) {
+    L() && console.log(t, ...e);
+  },
+  /**
+   * Log an error (always logs in both dev and production)
+   * @param message - The error message
+   * @param args - Additional arguments to log
+   */
+  error(t, ...e) {
+    console.error(t, ...e);
+  },
+  /**
+   * Log a warning only in development mode
+   * @param message - The warning message
+   * @param args - Additional arguments to log
+   */
+  warn(t, ...e) {
+    L() && console.warn(t, ...e);
+  }
+}, g = (t, e) => {
+  const r = [t];
+  return e && (e.componentName && r.push(`
+  Component: <${e.componentName}>`), e.componentPath && r.push(`
+  File: ${e.componentPath}`), e.expression && r.push(`
+  Expression: ${e.expression}`), e.attributeName && r.push(`
+  Attribute: ${e.attributeName}`), e.eventType && r.push(`
+  Event: ${e.eventType}`), e.elementTag && r.push(`
+  Element: <${e.elementTag}>`), e.lineHint && r.push(`
+  Location: ${e.lineHint}`)), r.join("");
+}, pe = (t, e, r) => {
+  const s = g(
+    "⚠️ Binding Error: Failed to evaluate expression",
+    f(h({}, r), {
+      expression: t,
+      lineHint: (r == null ? void 0 : r.lineHint) || "Template binding expression"
+    })
+  );
+  n.error(s), n.error(`  Error details: ${e.message}`), e.stack && console.debug("  Stack trace:", e.stack);
+}, ue = (t, e, r, s) => {
+  const o = g(
+    "⚠️ Event Handler Error: Failed to execute handler",
+    f(h({}, s), {
+      eventType: t,
+      expression: e,
+      lineHint: (s == null ? void 0 : s.lineHint) || `on${t} handler`
+    })
+  );
+  n.error(o), n.error(`  Error details: ${r.message}`), r.stack && console.debug("  Stack trace:", r.stack);
+}, ge = (t, e, r) => {
+  const s = g(
+    "⚠️ Conditional Error: Failed to evaluate condition",
+    f(h({}, r), {
+      expression: t,
+      lineHint: (r == null ? void 0 : r.lineHint) || "$if/$else-if condition"
+    })
+  );
+  n.error(s), n.error(`  Error details: ${e.message}`), e.stack && console.debug("  Stack trace:", e.stack);
+}, he = (t, e, r) => {
+  const s = g(
+    "⚠️ Loop Error: Failed to process loop",
+    f(h({}, r), {
+      expression: t,
+      lineHint: (r == null ? void 0 : r.lineHint) || "$for loop expression"
+    })
+  );
+  n.error(s), n.error(`  Error details: ${e.message}`), e.stack && console.debug("  Stack trace:", e.stack);
+}, _ = (t, e, r) => {
+  const s = g(
+    "⚠️ Registration Error: Failed to register component",
+    {
+      componentName: t,
+      componentPath: e
+    }
+  );
+  n.error(s), n.error(`  Error details: ${r.message}`), r.stack && console.debug("  Stack trace:", r.stack);
+}, H = (t, e, r) => {
+  const s = g(
+    "⚠️ Fetch Error: Failed to load resource",
+    f(h({}, r), {
+      componentPath: t
+    })
+  );
+  n.error(s), n.error(`  Error details: ${e.message}`);
+}, M = (t, e) => {
+  const r = g(
+    `⚠️ Parse Error: ${t}`,
+    e
+  );
+  n.error(r);
+}, fe = (t, e) => {
+  const r = g(
+    "⚠️ Script Error: Failed to execute component script",
+    e
+  );
+  n.error(r), n.error(`  Error details: ${t.message}`), t.stack && console.debug("  Stack trace:", t.stack);
+}, me = (t, e, r) => {
+  const s = g(
+    "⚠️ Two-Way Binding Error: Failed to setup binding",
+    f(h({}, r), {
+      expression: t,
+      lineHint: (r == null ? void 0 : r.lineHint) || "$model binding"
+    })
+  );
+  n.error(s), n.error(`  Error details: ${e.message}`);
+}, ye = (t, e) => {
+  var r;
+  return h({
+    componentName: (t == null ? void 0 : t.tagName) || ((r = t == null ? void 0 : t.constructor) == null ? void 0 : r.name),
+    componentPath: (t == null ? void 0 : t.sourcePath) || (t == null ? void 0 : t._sourcePath)
+  }, e);
+}, u = /* @__PURE__ */ new Map(), K = 25, O = (t) => {
+  const e = u.get(t);
+  return e && (u.delete(t), u.set(t, e)), e;
+}, G = (t, e) => {
+  if (u.has(t))
+    u.delete(t);
+  else if (u.size >= K) {
+    const r = u.keys().next().value;
+    r && u.delete(r);
+  }
+  u.set(t, e);
+}, N = (t) => p(null, null, function* () {
+  if (!t)
+    throw new Error("Path cannot be null or empty");
+  const e = O(t);
+  if (e) return e;
+  try {
+    const r = yield fetch(t);
+    if (!r.ok)
+      throw new Error(
+        `Failed to fetch component from ${t}: ${r.statusText}`
+      );
+    const s = yield r.text();
+    return G(t, s), s;
+  } catch (r) {
+    H(t, r, { componentPath: t });
+  }
+}), J = (t) => p(null, null, function* () {
+  try {
+    const e = yield fetch(t);
+    if (!e.ok) throw new Error(`HTTP ${e.status}`);
+    return yield e.text();
+  } catch (e) {
+    return H(t, e), "";
+  }
+}), b = {
+  bindings: /{([^}]+)}/g,
+  comments: {
+    js: /\/\*[\s\S]*?\*\/|\/\/.*$/gm,
+    css: /\/\*[\s\S]*?\*\//g,
+    html: /<!--[\s\S]*?-->/g
+  }
+}, V = new DOMParser(), x = (t, e) => p(null, null, function* () {
+  const r = X(t), { scripts: s, externalScripts: o } = Q(r), i = yield Z(r), l = r.body.innerHTML.trim();
+  return {
+    tagName: e,
+    template: l,
+    scripts: s,
+    externalScripts: o,
+    styles: i
+  };
+}), X = (t) => V.parseFromString(
+  t.replace(b.comments.html, ""),
+  "text/html"
+), Y = (t) => [
+  "/@vite/",
+  // Vite dev client
+  "/__vite",
+  // Vite internal
+  "/webpack-dev-server",
+  // Webpack dev server
+  "/hot-update",
+  // Webpack HMR
+  "/__webpack_hmr",
+  // Webpack HMR
+  "/browser-sync/",
+  // Browser Sync
+  "/livereload.js"
+  // LiveReload
+].some((r) => t.includes(r)), Q = (t) => {
+  var s, o;
+  const e = [], r = [];
+  for (const i of t.querySelectorAll("script")) {
+    if (i.src) {
+      if (Y(i.src)) {
+        i.remove();
+        continue;
+      }
+      const l = i.hasAttribute("external");
+      r.push({
+        src: i.getAttribute("src") || i.src,
+        // Use getAttribute to preserve relative paths
+        type: (s = i.type) != null ? s : null,
+        external: l
+      });
+    } else if (i.textContent) {
+      let l = i.textContent.trim();
+      l = l.replace(b.comments.js, "").trim(), e.push({
+        content: l,
+        type: (o = i.type) != null ? o : null
+      });
+    }
+    i.remove();
+  }
+  return { scripts: e, externalScripts: r };
+}, U = (t) => {
+  const e = t.match(/const __vite__css = "((?:[^"\\]|\\.)*)"/);
+  if (e && e[1])
+    return e[1].replace(/\\r\\n/g, `
+`).replace(/\\n/g, `
+`).replace(/\\t/g, "	").replace(/\\"/g, '"').replace(/\\\\/g, "\\");
+  const r = t.match(/export\s+default\s+"((?:[^"\\]|\\.)*)"/);
+  return r && r[1] ? r[1].replace(/\\r\\n/g, `
+`).replace(/\\n/g, `
+`).replace(/\\t/g, "	").replace(/\\"/g, '"').replace(/\\\\/g, "\\") : t.includes("import") || t.includes("export") ? (n.warn(
+    "CSS file returned JavaScript module format. CSS may not load correctly."
+  ), "") : t;
+}, Z = (t) => p(null, null, function* () {
+  let e = "";
+  const r = t.querySelectorAll("style, link[rel='stylesheet']");
+  for (const s of r) {
+    if (s.tagName === "LINK") {
+      const i = yield J(s.href), l = U(i);
+      l && (e += `
+` + l);
+    } else if (s.tagName === "STYLE") {
+      const o = s;
+      if (o.textContent) {
+        let i = o.textContent.trim();
+        i = i.replace(b.comments.css, "").trim(), e += `
+` + i;
+      }
+    }
+    s.remove();
+  }
+  return e.trim();
+});
+var w, T, A;
+class ee {
+  constructor() {
+    z(this, w);
+    this.components = {}, this.lazyComponents = /* @__PURE__ */ new Set(), this.intersectionObserver = null, this.lazyLoadingInProgress = /* @__PURE__ */ new Map(), this.lazyComponentsLoaded = /* @__PURE__ */ new Set();
+  }
+  registerComponent(e, r, s = !0, o = !1) {
+    return p(this, null, function* () {
+      if (this.components[e]) {
+        n.warn(`Component with name "${e}" is already registered.`);
+        return;
+      }
+      if (o) {
+        this.lazyComponents.add(e), $(this, w, T).call(this, e, r, s), n.log(`Component ${e} registered as lazy-loaded`);
+        return;
+      }
+      try {
+        const i = yield N(r), l = yield x(i, e);
+        this.components[e] = {
+          tagName: e,
+          template: l.template,
+          scripts: l.scripts,
+          externalScripts: l.externalScripts,
+          styles: l.styles,
+          sourcePath: r,
+          lazy: !1
+        }, n.log(`Component ${e} registered successfully`), yield $(this, w, A).call(this, e, s);
+      } catch (i) {
+        _(e, r, i);
+        return;
+      }
+    });
+  }
+}
+w = new WeakSet(), /**
+ * Defines a lazy-loading placeholder component
+ * @param name - Component name
+ * @param path - Component path
+ * @param useShadowDOM - Whether to use Shadow DOM
+ */
+T = function(e, r, s) {
+  const o = this;
+  class i extends HTMLElement {
+    constructor() {
+      super(), this.loaded = !1, this.observer = null, s && (this.attachShadow({ mode: "open" }), this.shadowRoot && (this.shadowRoot.innerHTML = `
+              <style>
+                :host { display: block; min-height: 1px; }
+              </style>
+            `));
+    }
+    connectedCallback() {
+      if (!this.loaded) {
+        if (this.hasAttribute("eager")) {
+          this.loaded = !0, this.loadComponent();
+          return;
+        }
+        this.observer = new IntersectionObserver(
+          (a) => {
+            a.forEach((c) => {
+              c.isIntersecting && !this.loaded && (this.loaded = !0, this.loadComponent());
+            });
+          },
+          {
+            rootMargin: "50px"
+            // Load 50px before entering viewport
+          }
+        ), this.observer.observe(this);
+      }
+    }
+    disconnectedCallback() {
+      this.observer && (this.observer.disconnect(), this.observer = null);
+    }
+    loadComponent() {
+      return p(this, null, function* () {
+        try {
+          if (o.lazyComponentsLoaded.has(e)) {
+            n.log(
+              `Component ${e} already loaded, upgrading placeholder...`
+            ), this.upgradePlaceholder();
+            return;
+          }
+          if (o.lazyLoadingInProgress.has(e)) {
+            n.log(`Component ${e} is already loading, waiting...`), yield o.lazyLoadingInProgress.get(e), this.upgradePlaceholder();
+            return;
+          }
+          const a = this.performLoad();
+          o.lazyLoadingInProgress.set(e, a), yield a, o.lazyLoadingInProgress.delete(e), o.lazyComponentsLoaded.add(e), o.lazyComponents.delete(e), n.log(`Component ${e} lazy-loaded successfully`);
+        } catch (a) {
+          o.lazyLoadingInProgress.delete(e), _(e, r, a);
+        }
+      });
+    }
+    performLoad() {
+      return p(this, null, function* () {
+        n.log(`Lazy loading component: ${e}`);
+        const a = this.parentNode;
+        if (this.nextSibling, !a) {
+          M(`Placeholder for ${e} has no parent node`, {
+            componentName: e,
+            componentPath: r
+          });
+          return;
+        }
+        const c = yield N(r), d = yield x(c, e);
+        n.log(`Component ${e} parsed successfully`), o.components[e] = {
+          tagName: e,
+          template: d.template,
+          scripts: d.scripts,
+          externalScripts: d.externalScripts,
+          styles: d.styles,
+          sourcePath: r,
+          lazy: !0
+        };
+        const m = `${e}-real`;
+        n.log(`Defining real component with temp name: ${m}`);
+        const y = o.components[e].tagName;
+        o.components[e].tagName = m;
+        const { defineWebComponent: C } = yield import("./webcomponent-CC0mzBGb.mjs");
+        C(o.components[e], s), n.log(`Real component ${m} defined`), o.components[e].tagName = y, this.upgradePlaceholder();
+      });
+    }
+    upgradePlaceholder() {
+      const a = this, c = this.parentNode, d = this.nextSibling;
+      if (!c) {
+        M(`Placeholder for ${e} has no parent node`, {
+          componentName: e,
+          componentPath: r
+        });
+        return;
+      }
+      const m = `${e}-real`, y = document.createElement(m);
+      for (n.log(`Created real component instance: ${m}`), Array.from(a.attributes).forEach((C) => {
+        C.name !== "eager" && y.setAttribute(C.name, C.value);
+      }); a.firstChild; )
+        y.appendChild(a.firstChild);
+      d ? (c.insertBefore(y, d), n.log("Inserted real component before next sibling")) : (c.appendChild(y), n.log("Appended real component to parent")), c.removeChild(a), n.log("Removed placeholder element");
+    }
+  }
+  customElements.get(e) || customElements.define(e, i);
+}, A = function(e, r) {
+  return p(this, null, function* () {
+    const { defineWebComponent: s } = yield import("./webcomponent-CC0mzBGb.mjs");
+    this.components[e] && s(this.components[e], r);
+  });
+};
+const F = new ee();
+class te {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Emit an event with optional data
+   * @param eventName - The name of the event to emit
+   * @param data - Optional data to pass to listeners
+   * @returns Promise that resolves when all listeners have been called
+   */
+  emit(e, r) {
+    const s = new CustomEvent(e, {
+      detail: r,
+      bubbles: !0,
+      composed: !0
+    });
+    document.dispatchEvent(s);
+    const o = this.listeners.get(e);
+    if (!o || o.size === 0)
+      return Promise.resolve();
+    const i = [];
+    return o.forEach((l) => {
+      try {
+        const a = l(r);
+        a instanceof Promise && i.push(a);
+      } catch (a) {
+        n.error(
+          `⚠️ Event Bus Error: Failed to execute listener for "${e}"`
+        ), n.error(`  Error details: ${a.message}`), i.push(Promise.reject(a));
+      }
+    }), i.length > 0 ? Promise.all(i).then(() => {
+    }) : Promise.resolve();
+  }
+  /**
+   * Listen to an event
+   * @param eventName - The name of the event to listen for
+   * @param callback - Function to call when event is emitted
+   * @returns Function to remove the listener
+   */
+  listen(e, r) {
+    return this.listeners.has(e) || this.listeners.set(e, /* @__PURE__ */ new Set()), this.listeners.get(e).add(r), () => {
+      this.off(e, r);
+    };
+  }
+  /**
+   * Remove a specific event listener
+   * @param eventName - The name of the event
+   * @param callback - The callback to remove
+   */
+  off(e, r) {
+    const s = this.listeners.get(e);
+    s && (s.delete(r), s.size === 0 && this.listeners.delete(e));
+  }
+  /**
+   * Remove all listeners for an event, or all listeners if no event specified
+   * @param eventName - Optional event name to clear listeners for
+   */
+  clear(e) {
+    e ? this.listeners.delete(e) : this.listeners.clear();
+  }
+  /**
+   * Get count of listeners for an event
+   * @param eventName - The event name
+   * @returns Number of listeners
+   */
+  listenerCount(e) {
+    var r, s;
+    return (s = (r = this.listeners.get(e)) == null ? void 0 : r.size) != null ? s : 0;
+  }
+}
+const R = new te(), re = (t, e, r, s) => F.registerComponent(t, e, r, s), se = (t) => p(null, null, function* () {
+  yield Promise.all(
+    t.map(
+      ({ name: e, path: r, useShadowDOM: s, lazy: o }) => F.registerComponent(e, r, s, o)
+    )
+  );
+}), oe = (t, e) => R.listen(t, e), ne = (t, e) => {
+  R.emit(t, e);
+}, we = (t, e) => {
+  if (e) {
+    const r = e.tagName.toLowerCase();
+    window.__ladrilloContexts || (window.__ladrilloContexts = /* @__PURE__ */ new Map()), window.__ladrilloContexts.set(r, { shadowRoot: t, element: e });
+  }
+}, E = () => {
+  const t = window.__ladrilloContexts;
+  if (t && t.size > 0) {
+    const e = Array.from(t.values());
+    return e[e.length - 1];
+  }
+  return null;
+}, ie = () => {
+  const t = E();
+  return t && t.element ? t.element.state || {} : {};
+}, S = (t) => {
+  const e = E();
+  e && e.setState && e.setState(t);
+}, ae = (t, e) => (S({ [t]: e }), (r) => {
+  S({ [t]: r });
+}), le = (t, e) => {
+  if (e)
+    return e.querySelector(t);
+  const r = E();
+  if (r) {
+    const s = r.shadowRoot || r.element;
+    if (s) {
+      const o = s.querySelector(t);
+      if (o) return o;
+    }
+  }
+  return document.querySelector(t);
+}, ce = (t, e) => {
+  if (e)
+    return e.querySelectorAll(t);
+  const r = E();
+  if (r) {
+    const s = r.shadowRoot || r.element;
+    if (s) {
+      const o = s.querySelectorAll(t);
+      if (o.length > 0) return o;
+    }
+  }
+  return document.querySelectorAll(t);
+};
+typeof window != "undefined" && (window.ladrillosjs = {
+  registerComponent: re,
+  registerComponents: se
+}, window.$listen = oe, window.$emit = ne, window.$querySelector = le, window.$querySelectorAll = ce, window.$reactive = ae, window.$setState = S, window.$getState = ie);
+export {
+  oe as $,
+  b as R,
+  we as _,
+  pe as a,
+  he as b,
+  ye as c,
+  ge as d,
+  ue as e,
+  R as f,
+  fe as g,
+  n as h,
+  me as i,
+  se as j,
+  ne as k,
+  M as l,
+  ie as m,
+  S as n,
+  ae as o,
+  le as p,
+  ce as q,
+  re as r
+};
+//# sourceMappingURL=index-DmNz8gcU.mjs.map