ladrillosjs 0.1.8 → 1.0.0-rc.10

package/README.md

@@ -4,121 +4,268 @@
 
 A lightweight, zero-dependency web component framework for building modular web applications.
 
+"I designed this framework to empower developers with the ability to componentize their code efficiently and effectively, without the need for a full-scale framework. By focusing on simplicity and leveraging core web fundamentals, my goal was to create a lightweight and accessible solution that enhances development while staying true to the basics."
+
 ## Getting Starting with samples
 
-1. `npm install`
-2. `npm run dev`
+The repository includes several example applications that demonstrate various features:
+
+- **Notes App**: Example of using stores for state management
+- **Markdown Editor**: Simple markdown-to-HTML converter
+- **API Example**: Fetching and displaying data from an external API
+- **Button Game**: Interactive game demonstrating component events
+- **Simple Button**: Basic component with state and event handling
+
+To run the examples:
+
+1. Clone the repository
+2. Run `npm install`
+3. Run `npm run dev`
 
 ## Usage
 
-### 1. Install & import
+### Install & import
 
 ```bash
 npm install ladrillosjs
 ```
 
-#### cdn
+### cdn
 
 ```js
-<script src="https://cdn.jsdelivr.net/npm/ladrillosjs@0.1.1"></script>
- <script type="module">
-      ladrillosjs.ladrillos.registerComponent(
-        "alert-button",
-        "alert-button.html"
-      );
-    </script>
+<script defer src="https://cdn.jsdelivr.net/npm/ladrillosjs"></script>
 ```
 
-### 2. Create index.html file
+## First Component
+
+A component in LadrillosJS is a reusable custom HTML element that bundles its own template, logic (bindings) and styles into a single file.
+
+To create your first component, follow these steps:
+
+1. Create an HTML file that defines your component’s template, script bindings and CSS. For example:
+
+   ```html
+   <!-- hello.html -->
+
+   <p>Hello, LadrillosJS!</p>
+   <button onclick="increment">Clicked {count} times</button>
+
+   <script>
+     // declare a bound variable
+     let count = 0;
+
+     // declare a handler for the button click
+     const increment = () => {
+       count++;
+       // update component state and re-render
+       this.setState({ count });
+     };
+   </script>
+
+   <style>
+     /* component‐scoped CSS */
+     p {
+       font-size: 1.25rem;
+       color: #1a73e8;
+     }
+     button {
+       margin-top: 0.5rem;
+       padding: 0.5rem 1rem;
+     }
+   </style>
+   ```
+
+2. Import and register your component in the page where you want to use it:
+
+   ```html
+   <!-- import -->
+   <script type="module">
+     import { registerComponent } from "ladrillosjs";
+
+     registerComponent("hello-world", "hello-world.html");
+   </script>
+
+   <!-- import multiple components -->
+   <script type="module">
+     import { registerComponents } from "ladrillosjs";
+
+     await registerComponents(
+       [
+         { name: "my-widget", path: "/components/widget.html" },
+         { name: "my-card", path: "/components/card.html" },
+         // …
+       ],
+       10 // sets 10 parallel fetches - defaults to 5
+     );
+   </script>
+
+   <!-- CDN -->
+   <script type="module">
+     ladrillosjs.registerComponent("hello-world", "hello-world.html");
+   </script>
+
+   <!-- CDN multiple components -->
+   <script type="module">
+     await ladrillos.registerComponents(
+       [
+         { name: "my-widget", path: "/components/widget.html" },
+         { name: "my-card", path: "/components/card.html" },
+         // …
+       ],
+       10 // sets 10 parallel fetches - defaults to 5
+     );
+   </script>
+   ```
+
+   ```html
+   <!-- then use it in markup -->
+   <hello-world></hello-world>
+   ```
+
+Under the hood, LadrillosJS will fetch, parse and cache hello.html, then define a `<hello-world>`.
+
+- Template placeholders `{…}` automatically bind to this.state.
+- Top‐level `let/const/function` in your `<script>` block are hoisted and initialized into `this.state` if they appear in a template or event.
+- Event attributes like `onclick="increment"` register listeners under the hood.
+
+## Binding Variables & Events
+
+- To bind data into your markup, wrap state keys in `{}`
+
+```html
+<span>{user.name}</span>
+```
+
+- To bind an event, prefix an attribute with `on`:
 
 ```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Hello World</title>
-    <style>
-      :root {
-        --btn-bg: #1a73e8;
-        --btn-color: #ffffff;
-        --btn-padding: 0.75rem 1.5rem;
-        --btn-radius: 0.375rem;
-        --btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        --btn-hover-bg: #1669c1;
-        --btn-transition: background-color 0.2s ease, transform 0.2s ease,
-          box-shadow 0.2s ease;
-      }
-      body {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        margin: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- Add component -->
-    <alert-button></alert-button>
-    <script type="module">
-      // import framework
-      import { ladrillos } from "ladrillosjs";
-      // register component (name, location)
-      ladrillos.registerComponent("alert-button", "alert-button.html");
-    </script>
-  </body>
-</html>
+<button onclick="doSomething">Do it</button>
 ```
 
-### 3. Create a component
+## Initializing from Attributes
+
+Component attributes sync to `this.state` automatically and can be reference by using `this.state["some-prop"]` in your template or code.
+
+## Internal vs. External Scripts
 
-Create `alert-button.html`
+- Inline scripts (no src) are parsed, top‑level bindings registered, then executed in component context.
+- External scripts with `bind` attribute are fetched, and processed exactly like inline scripts.
+
+- For external module scripts with `bind` attribute, you must export a default function where methods are defined on the component instance:
+
+```js
+// component-logic.js
+export default function () {
+  this.handleClick = () => {
+    console.log("Button clicked");
+    this.setState({ clicked: true });
+  };
+}
+```
 
 ```html
-<style>
-  button {
-    background: var(--btn-bg);
-    color: var(--btn-color);
-    padding: var(--btn-padding);
-    border: none;
-    border-radius: var(--btn-radius);
-    box-shadow: var(--btn-shadow);
-    font-size: 1rem;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-    cursor: pointer;
-    transition: var(--btn-transition);
-  }
-
-  button:hover {
-    background: var(--btn-hover-bg);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
-  }
-
-  button:active {
-    transform: translateY(0);
-    box-shadow: var(--btn-shadow);
-    opacity: 0.9;
-  }
-
-  button:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.4);
-  }
-</style>
-<button onclick="{increaseCount()}">Clicked: {count}</button>
+<!-- In your component HTML -->
+<button onclick="handleClick">Click me</button>
 
-<script>
-  const count = 0;
+<script src="component-logic.js" type="module" bind></script>
+```
 
-  const increaseCount = () => {
-    count++;
+```js
+<script src="path_to_file.js" bind></script>
+```
 
-    if (count >= 10) {
-      alert("to many clicks");
-    }
+- External scripts without bind are injected via a `<script>` tag (for non‑module, or third‑party scripts).
+- `type="module"` scripts (inline or external) are added to the shadow/root as real modules.
+
+## Managing State
+
+To manage state in LadrillosJS, you can use the `this.setState()` method to update the component's state. The `this.state` object holds the component's state variables, and you can modify them as needed.
+
+When you call `this.setState({ key: value, … })`, LadrillosJS will automatically re-render the component with the updated state.
+
+## Emitting
+
+To emit events from your component, you can use the `this.emit()` method. This allows you to trigger custom events that can be listened to by parent components or other parts of your application. If you don't pass a second argument, the event will be emitted with the component's state as the data.
+
+```js
+this.emit("event-name", { some: "data" });
+```
+
+To listen to emitted events, you can use the `this.listen()` method on the component instance:
+
+```js
+this.listen("event-name", (payload) => {
+  console.log(payload); // Access the emitted data
+});
+```
+
+## Two‑Way Binding
+
+LadrillosJS provides built‑in two‑way data binding for form controls and contenteditable elements via the `data-bind` attribute.  
+When a component is initialized, any element with `data-bind="key"` will:
+
+- Push its initial value/content into `this.state.key`.
+- Listen for user input (e.g. `input` or `change` events) and update `this.state.key` automatically.
+- Re-render whenever you call `this.setState({ key: newValue })`, updating the element’s value or innerText.
+
+Usage example:
+
+```html
+<!-- In your component HTML -->
+<input type="text" placeholder="Username" data-bind="username" />
+<div contenteditable="true" placeholder="About you…" data-bind="bio"></div>
+<button onclick="submit">Submit</button>
+
+<script>
+  const submit = () => {
+    console.log("Username:", this.state.username);
+    console.log("Bio:", this.state.bio);
+    // reset state
+    this.setState({ username: "", bio: "" });
   };
 </script>
 ```
+
+## State Management with Stores
+
+LadrillosJS provides a simple store implementation for managing shared state across components:
+
+- `createStore(initialState)`: Creates a new store with the specified initial state
+- `getState()`: Returns the current state of the store
+- `setState(partial)`: Updates store state by merging partial object and notifies subscribers
+- `subscribe(fn)`: Registers a callback function that executes immediately and on every state change
+
+```js
+import { createStore } from "ladrillosjs";
+
+// Create a store with initial state
+export const notesStore = createStore({ notes: [] });
+
+// Update store state
+export function addNote(note) {
+  const { notes } = notesStore.getState();
+  notesStore.setState({ notes: [...notes, note] });
+}
+```
+
+### add to store
+
+```js
+import { addNote } from "../stores/notesStore.js";
+
+export default function () {
+  this.save = () => {
+    const id = Math.floor(Math.random() * 1000);
+    addNote({ id: 123, title: "my note", note: "my note content" });
+  };
+}
+```
+
+### subscribing to store changes
+
+```js
+import { notesStore } from "../stores/notesStore.js";
+notesStore.subscribe(({ notes }) => {
+  console.log("Notes updated:", notes);
+});
+```

package/dist/index-5_a431JU.js

@@ -0,0 +1,3 @@
+"use strict";var T=Object.defineProperty;var E=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable;var W=r=>{throw TypeError(r)};var P=(r,e,t)=>e in r?T(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,x=(r,e)=>{for(var t in e||(e={}))j.call(e,t)&&P(r,t,e[t]);if(E)for(var t of E(e))H.call(e,t)&&P(r,t,e[t]);return r};var q=(r,e,t)=>e.has(r)||W("Cannot "+t);var d=(r,e,t)=>(q(r,e,"read from private field"),t?t.call(r):e.get(r)),y=(r,e,t)=>e.has(r)?W("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(r):e.set(r,t);var v=(r,e,t)=>(q(r,e,"access private method"),t);var u=(r,e,t)=>new Promise((s,o)=>{var l=a=>{try{c(t.next(a))}catch(g){o(g)}},i=a=>{try{c(t.throw(a))}catch(g){o(g)}},c=a=>a.done?s(a.value):Promise.resolve(a.value).then(l,i);c((t=t.apply(r,e)).next())});const h={log(r,...e){},error(r,...e){console.error(r,...e)},warn(r,...e){}};var m,w,C,A;const S=class S{constructor(){y(this,m,new Map);y(this,w,new DOMParser);this.components={}}registerComponent(e,t,s=!0){return u(this,null,function*(){var o,l,i;if(this.components[e]){h.log(`Component ${e} already registered.`);return}this.components[e]={__registering:!0};try{const c=yield u(this,null,function*(){const n=d(this,m).get(t);if(n)return n;const k=yield(yield fetch(t)).text();return d(this,m).set(t,k),k}),a=d(this,w).parseFromString(c.replace(/<!--[\s\S]*?-->/g,""),"text/html"),g=[],$=[];for(const n of a.querySelectorAll("script")){if(n.src)$.push({src:n.src,type:(o=n.type)!=null?o:null,bind:n.hasAttribute("bind")});else if(n.textContent){let p=n.textContent.trim();p=p.replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm,"").trim(),g.push({content:p,type:(l=n.type)!=null?l:null})}n.remove()}let f="";for(const n of a.querySelectorAll("link[rel='stylesheet']"))f+=`
+`+(yield v(i=S,C,A).call(i,`${n.href}?raw`)),n.remove();for(const n of a.querySelectorAll("style")){if(n.textContent){let p=n.textContent.trim();p=p.replace(/\/\*[\s\S]*?\*\//g,"").trim(),f+=`
+`+p}n.remove()}f=f.trim(),this.components[e]={tagName:e,template:a.body.innerHTML.trim(),scripts:g,externalScripts:$,style:f},yield this._defineWebComponent(e,s),h.log(`Component ${e} registered successfully`)}catch(c){h.error(`Failed to register component ${e}:`,c),delete this.components[e]}})}registerComponents(e,t=5){return u(this,null,function*(){const s=e.map(({name:l,path:i,useShadowDOM:c})=>()=>this.registerComponent(l,i,c)),o=yield this._runWithConcurrency(s,t);return o.forEach((l,i)=>{if(l.status==="rejected"){const{name:c}=e[i];h.error(`registration failed for ${c}:`,l.reason)}}),o})}_runWithConcurrency(e,t){return u(this,null,function*(){const s=[],o=[];for(const l of e){let i;const c=l();s.push(c),i=c.then(()=>{o.splice(o.indexOf(i),1)}),o.push(i),o.length>=t&&(yield Promise.race(o))}return Promise.allSettled(s)})}_defineWebComponent(e,t){return u(this,null,function*(){const{defineWebComponent:s}=yield Promise.resolve().then(()=>require("./webcomponent-6tQP-rUH.js"));s(this.components[e],t)})}};m=new WeakMap,w=new WeakMap,C=new WeakSet,A=function(e){return u(this,null,function*(){try{const t=yield fetch(e);if(!t.ok)throw new Error(`HTTP ${t.status}`);return yield t.text()}catch(t){return h.error(`Failed to fetch resource at ${e}:`,t),""}})},y(S,C);let b=S;const F=new b;function O(r={}){let e=r;const t=new Set;return{getState(){return e},setState(s){e=x(x({},e),s),t.forEach(o=>o(e))},subscribe(s){return t.add(s),s(e),()=>t.delete(s)},reset(){e=r,t.forEach(s=>s(e))}}}const _=(...r)=>F.registerComponent(...r),M=(...r)=>F.registerComponents(...r);typeof window!="undefined"&&(window.ladrillosjs={registerComponent:_,registerComponents:M});exports.createStore=O;exports.logger=h;exports.registerComponent=_;exports.registerComponents=M;

package/dist/index-DJN3i2LF.mjs

@@ -0,0 +1,215 @@
+var v = Object.defineProperty;
+var E = Object.getOwnPropertySymbols;
+var M = Object.prototype.hasOwnProperty, T = Object.prototype.propertyIsEnumerable;
+var A = (r) => {
+  throw TypeError(r);
+};
+var W = (r, e, t) => e in r ? v(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, S = (r, e) => {
+  for (var t in e || (e = {}))
+    M.call(e, t) && W(r, t, e[t]);
+  if (E)
+    for (var t of E(e))
+      T.call(e, t) && W(r, t, e[t]);
+  return r;
+};
+var F = (r, e, t) => e.has(r) || A("Cannot " + t);
+var d = (r, e, t) => (F(r, e, "read from private field"), t ? t.call(r) : e.get(r)), y = (r, e, t) => e.has(r) ? A("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t);
+var P = (r, e, t) => (F(r, e, "access private method"), t);
+var u = (r, e, t) => new Promise((s, o) => {
+  var l = (a) => {
+    try {
+      c(t.next(a));
+    } catch (f) {
+      o(f);
+    }
+  }, i = (a) => {
+    try {
+      c(t.throw(a));
+    } catch (f) {
+      o(f);
+    }
+  }, c = (a) => a.done ? s(a.value) : Promise.resolve(a.value).then(l, i);
+  c((t = t.apply(r, e)).next());
+});
+const g = {
+  /**
+   * Log a message only in development mode
+   * @param {string} message - The message to log
+   * @param {any[]} args - Additional arguments to log
+   */
+  log(r, ...e) {
+  },
+  /**
+   * Log an error (always logs in both dev and production)
+   * @param {string} message - The error message
+   * @param {any[]} args - Additional arguments to log
+   */
+  error(r, ...e) {
+    console.error(r, ...e);
+  },
+  /**
+   * Log a warning only in development mode
+   * @param {string} message - The warning message
+   * @param {any[]} args - Additional arguments to log
+   */
+  warn(r, ...e) {
+  }
+};
+var m, w, C, _;
+const x = class x {
+  constructor() {
+    y(this, m, /* @__PURE__ */ new Map());
+    y(this, w, new DOMParser());
+    this.components = {};
+  }
+  /**
+   * Registers a web‐component by fetching its HTML, scripts, and styles.
+   * @param {string} name
+   * @param {string} path
+   * @param {boolean} [useShadowDOM=true]
+   */
+  registerComponent(e, t, s = !0) {
+    return u(this, null, function* () {
+      var o, l, i;
+      if (this.components[e]) {
+        g.log(`Component ${e} already registered.`);
+        return;
+      }
+      this.components[e] = { __registering: !0 };
+      try {
+        const c = yield u(this, null, function* () {
+          const n = d(this, m).get(t);
+          if (n) return n;
+          const k = yield (yield fetch(t)).text();
+          return d(this, m).set(t, k), k;
+        }), a = d(this, w).parseFromString(
+          c.replace(/<!--[\s\S]*?-->/g, ""),
+          "text/html"
+        ), f = [], $ = [];
+        for (const n of a.querySelectorAll("script")) {
+          if (n.src)
+            $.push({
+              src: n.src,
+              type: (o = n.type) != null ? o : null,
+              bind: n.hasAttribute("bind")
+            });
+          else if (n.textContent) {
+            let p = n.textContent.trim();
+            p = p.replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm, "").trim(), f.push({
+              content: p,
+              type: (l = n.type) != null ? l : null
+            });
+          }
+          n.remove();
+        }
+        let h = "";
+        for (const n of a.querySelectorAll("link[rel='stylesheet']"))
+          h += `
+` + (yield P(i = x, C, _).call(i, `${n.href}?raw`)), n.remove();
+        for (const n of a.querySelectorAll("style")) {
+          if (n.textContent) {
+            let p = n.textContent.trim();
+            p = p.replace(/\/\*[\s\S]*?\*\//g, "").trim(), h += `
+` + p;
+          }
+          n.remove();
+        }
+        h = h.trim(), this.components[e] = {
+          tagName: e,
+          template: a.body.innerHTML.trim(),
+          scripts: f,
+          externalScripts: $,
+          style: h
+        }, yield this._defineWebComponent(e, s), g.log(`Component ${e} registered successfully`);
+      } catch (c) {
+        g.error(`Failed to register component ${e}:`, c), delete this.components[e];
+      }
+    });
+  }
+  /**
+   * Registers multiple components with optional concurrency throttling.
+   * @param {{name: string, path: string,useShadowDOM:boolean}[]} components
+   * @param {number} [concurrency=5] max simultaneous registrations
+   */
+  registerComponents(e, t = 5) {
+    return u(this, null, function* () {
+      const s = e.map(
+        ({ name: l, path: i, useShadowDOM: c }) => () => this.registerComponent(l, i, c)
+      ), o = yield this._runWithConcurrency(s, t);
+      return o.forEach((l, i) => {
+        if (l.status === "rejected") {
+          const { name: c } = e[i];
+          g.error(`registration failed for ${c}:`, l.reason);
+        }
+      }), o;
+    });
+  }
+  /** @private */
+  _runWithConcurrency(e, t) {
+    return u(this, null, function* () {
+      const s = [], o = [];
+      for (const l of e) {
+        let i;
+        const c = l();
+        s.push(c), i = c.then(() => {
+          o.splice(o.indexOf(i), 1);
+        }), o.push(i), o.length >= t && (yield Promise.race(o));
+      }
+      return Promise.allSettled(s);
+    });
+  }
+  /** @private */
+  _defineWebComponent(e, t) {
+    return u(this, null, function* () {
+      const { defineWebComponent: s } = yield import("./webcomponent-BGA1yU7J.mjs");
+      s(this.components[e], t);
+    });
+  }
+};
+m = new WeakMap(), w = new WeakMap(), C = new WeakSet(), _ = function(e) {
+  return u(this, null, function* () {
+    try {
+      const t = yield fetch(e);
+      if (!t.ok) throw new Error(`HTTP ${t.status}`);
+      return yield t.text();
+    } catch (t) {
+      return g.error(`Failed to fetch resource at ${e}:`, t), "";
+    }
+  });
+}, y(x, C);
+let b = x;
+const q = new b();
+function D(r = {}) {
+  let e = r;
+  const t = /* @__PURE__ */ new Set();
+  return {
+    // read-only access
+    getState() {
+      return e;
+    },
+    // update state by merging partial, then notify
+    setState(s) {
+      e = S(S({}, e), s), t.forEach((o) => o(e));
+    },
+    // subscribe: fn will be called immediately and on every change
+    subscribe(s) {
+      return t.add(s), s(e), () => t.delete(s);
+    },
+    // clear store
+    reset() {
+      e = r, t.forEach((s) => s(e));
+    }
+  };
+}
+const j = (...r) => q.registerComponent(...r), H = (...r) => q.registerComponents(...r);
+typeof window != "undefined" && (window.ladrillosjs = {
+  registerComponent: j,
+  registerComponents: H
+  // changed code
+});
+export {
+  H as a,
+  D as c,
+  g as l,
+  j as r
+};

package/dist/ladrillosjs.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./main-BaJULV0N.js");exports.ladrillos=e.ladrillos;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-5_a431JU.js");exports.createStore=e.createStore;exports.registerComponent=e.registerComponent;exports.registerComponents=e.registerComponents;

package/dist/ladrillosjs.es.js

@@ -1,4 +1,6 @@
-import { a as o } from "./main-CE6RxSxw.mjs";
+import { c as o, r as t, a as s } from "./index-DJN3i2LF.mjs";
 export {
-  o as ladrillos
+  o as createStore,
+  t as registerComponent,
+  s as registerComponents
 };

package/dist/ladrillosjs.umd.js

@@ -1,5 +1,3 @@
-(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports):typeof define=="function"&&define.amd?define(["exports"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.ladrillosjs={}))})(this,function(n){"use strict";var F=Object.defineProperty;var W=n=>{throw TypeError(n)};var O=(n,e,o)=>e in n?F(n,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):n[e]=o;var C=(n,e,o)=>O(n,typeof e!="symbol"?e+"":e,o),j=(n,e,o)=>e.has(n)||W("Cannot "+o);var L=(n,e,o)=>(j(n,e,"read from private field"),o?o.call(n):e.get(n)),P=(n,e,o)=>e.has(n)?W("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(n):e.set(n,o);var A=(n,e,o)=>new Promise((_,S)=>{var $=p=>{try{x(o.next(p))}catch(a){S(a)}},M=p=>{try{x(o.throw(p))}catch(a){S(a)}},x=p=>p.done?_(p.value):Promise.resolve(p.value).then($,M);x((o=o.apply(n,e)).next())});var p;const e={log(a,...c){},error(a,...c){console.error(a,...c)},warn(a,...c){}},o=["___vscode_livepreview_injected_script"];class _{constructor(){P(this,p,new Map);this.components={}}registerComponent(c,d,u=!0){return A(this,null,function*(){if(this.components[c]){e.log(`Component ${c} already registered, skipping.`);return}try{const f=[];let g=L(this,p).get(d);g||(g=yield(yield fetch(d)).text(),L(this,p).set(d,g));const N=g.replace(/<!--[\s\S]*?-->/g,""),w=new DOMParser().parseFromString(N,"text/html");Array.from(w.querySelectorAll("script[external]")).forEach(i=>{const t=i.getAttribute("src");t&&f.push(t),i.remove()});let E="";const B=Array.from(w.querySelectorAll("script:not([type='module']):not([external])"));function b(i){return A(this,null,function*(){try{const t=yield fetch(i);if(!t.ok)throw new Error(`HTTP ${t.status}`);return yield t.text()}catch(t){return e.error(`Failed to fetch resource at ${i}:`,t),""}})}for(const i of B){const t=i.getAttribute("src");if(t&&o.some(r=>t.includes(r))){e.log(`Skipping ignored script "${t}"`),i.remove();continue}t?E+=`
-`+(yield b(t)):E+=`
-`+i.textContent,i.remove()}E=E.replace(/\/\*[\s\S]*?\*\//g,"").replace(/(^|[^:])\/\/.*$/gm,"$1").trim();let y="";const q=Array.from(w.querySelectorAll("link[rel='stylesheet']"));for(const i of q){const t=i.getAttribute("href");t&&(y+=`
-`+(yield b(t+"?raw"))),i.remove()}const T=Array.from(w.querySelectorAll("style"));for(const i of T)y+=`
-`+i.textContent,i.remove();y=y.trim();const v=document.createElement("template");v.innerHTML=w.body.innerHTML,this.components[c]={tagName:c,template:v,script:E,style:y,externalScripts:f},this._defineWebComponent(c,u),e.log(`Component ${c} registered successfully`)}catch(f){e.error(`Failed to register component ${c}:`,f)}})}_defineWebComponent(c,d){return A(this,null,function*(){const{defineWebComponent:u}=yield Promise.resolve().then(()=>x);u(this.components[c],d)})}}p=new WeakMap,C(_,"_SCRIPT_ALL",/<script>([\s\S]*?)<\/script>/g),C(_,"_STYLE_ALL",/<style>([\s\S]*?)<\/style>/g),C(_,"_SCRIPT_ONE",/<script>([\s\S]*?)<\/script>/),C(_,"_STYLE_ONE",/<style>([\s\S]*?)<\/style>/);const S=new _;function $(a,c={}){return new Proxy(c,{set(d,u,f){const g=d[u];return d[u]=f,g!==f&&!a._initializing&&(typeof a._updateBinding=="function"?a._updateBinding(u,f):a._update()),!0},get(d,u){return d[u]}})}const x=Object.freeze(Object.defineProperty({__proto__:null,defineWebComponent:(a,c)=>{if(!a){e.error("Component is not defined or invalid.");return}if(customElements.get(a.tagName)){e.warn(`Component ${a.tagName} is already defined.`);return}const{tagName:d,template:u,script:f,style:g,externalScripts:N}=a,R=/{(.*?)}/g,w=/{\s*([\w$]+)\(\)\s*}/,B=(i=>{const t=new Set;return i.innerHTML.replace(R,(r,s)=>t.add(s.trim().toLowerCase())),Array.from(t)})(u),b=f.replace(/\b(?:const|let|var)\s+([\w$]+)\s*=/g,"state.$1 =").replace(/function\s+([\w$]+)\s*\(/g,"state.$1 = function (").replace(/\bclass\s+([\w$]+)\s*(extends\s+[\w$]+\s*)?{/g,"state.$1 = class $1 $2{"),y=f?new Function("state",`with(state){${b}}`):()=>{},T=(i=>{const t=[];return i.content.querySelectorAll("*").forEach(r=>{Array.from(r.attributes).forEach(s=>{if(!s.name.startsWith("on"))return;const l=s.name.slice(2),m=s.value.match(w);m&&(r.dataset._evtIndex=t.length,t.push({evt:l,fnName:m[1]}),r.removeAttribute(s.name))})}),t})(u);class v extends HTMLElement{constructor(){super(),c&&this.attachShadow({mode:"open"}),this.state={},this.styleElement=document.createElement("style"),this.scriptElement=document.createElement("script"),this.styleElement.textContent=g||"",this._textBindings={},this._origText=new Map,this._hasConnected=!1,this._isUpdating=!1,this._isBinding=!1}connectedCallback(){if(this._hasConnected)return;this._hasConnected=!0,this._textBindings={},this._origText=new Map;const t=u.content.cloneNode(!0);this.shadowRoot?this.shadowRoot.innerHTML="":this.innerHTML="",N.forEach(s=>{const l=document.createElement("script");l.src=s,l.onload=()=>{e.log(`Loaded external script: ${s}`)},document.head.appendChild(l)}),this.shadowRoot?(this.shadowRoot.appendChild(this.scriptElement),this.shadowRoot.appendChild(this.styleElement),this.shadowRoot.appendChild(t)):(this.appendChild(this.styleElement),this.appendChild(t)),this.state=$(this,{}),this._initializing=!0;try{y.call(this,this.state)}catch(s){console.error("Error initializing component script:",s)}finally{this._initializing=!1}const r=this.shadowRoot||this;this._processTemplate(r)}_processTemplate(t){this._getAllTextNodes(t).forEach(s=>{const l=s.textContent;l.includes("{")&&l.includes("}")&&(this._origText.set(s,l),s.textContent=l.replace(/{([^}]+)}/g,(m,h)=>(h=h.trim(),this._textBindings[h]=this._textBindings[h]||[],this._textBindings[h].push(s),this.hasAttribute(h)?this.getAttribute(h):this.state[h]!==void 0?this.state[h]:m)))}),T.forEach((s,l)=>{const m=t.querySelector(`[data-_evt-index="${l}"]`);m.removeAttribute("data-_evt-index"),m.addEventListener(s.evt,h=>{const H=this.state[s.fnName];typeof H=="function"&&H.call(m,h)})})}_getAllTextNodes(t){const r=[],s=document.createTreeWalker(t,NodeFilter.SHOW_TEXT,null,!1);let l;for(;l=s.nextNode();)r.push(l);return r}_update(){if(!this._isUpdating){this._isUpdating=!0;try{const t=u.content.cloneNode(!0);this._processTemplate(t),this.shadowRoot?(this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(this.styleElement),this.shadowRoot.appendChild(t)):(this.innerHTML="",this.appendChild(this.styleElement),this.appendChild(t))}finally{this._isUpdating=!1}}}_updateBinding(t){if(!this._isBinding){this._isBinding=!0;try{(this._textBindings[t]||[]).forEach(s=>{const l=this._origText.get(s)||"";s.textContent=l.replace(R,(m,h)=>(h=h.trim(),this.hasAttribute(h)?this.getAttribute(h):this.state[h]))})}finally{this._isBinding=!1,this.emit(t,this.state[t])}}}disconnectedCallback(){this._hasConnected=!1,T.forEach((t,r)=>{const s=(this.shadowRoot||this).querySelector(`[data-_evt-index="${r}"]`);s&&s.removeEventListener(t.evt,this.state[t.fnName])}),e.log("disconnectedCallback",this)}static get observedAttributes(){return B}attributeChangedCallback(t,r,s){r!==s&&(this.state[t]=s)}emit(t,r){const s=r!=null?r:this.state;this.dispatchEvent(new CustomEvent(t,{detail:s,bubbles:!0}))}querySelector(t){return this.shadowRoot?this.shadowRoot.querySelector(t):super.querySelector(t)}querySelectorAll(t){return this.shadowRoot?this.shadowRoot.querySelectorAll(t):super.querySelectorAll(t)}}customElements.define(d,v),e.log(`Web component defined: <${d}></${d}>`)}},Symbol.toStringTag,{value:"Module"}));n.ladrillos=S,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+(function(c,a){typeof exports=="object"&&typeof module!="undefined"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(c=typeof globalThis!="undefined"?globalThis:c||self,a(c.ladrillosjs={}))})(this,function(c){"use strict";var J=Object.defineProperty;var P=Object.getOwnPropertySymbols;var D=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var U=c=>{throw TypeError(c)};var z=(c,a,l)=>a in c?J(c,a,{enumerable:!0,configurable:!0,writable:!0,value:l}):c[a]=l,M=(c,a)=>{for(var l in a||(a={}))D.call(a,l)&&z(c,l,a[l]);if(P)for(var l of P(a))G.call(a,l)&&z(c,l,a[l]);return c};var V=(c,a,l)=>a.has(c)||U("Cannot "+l);var j=(c,a,l)=>(V(c,a,"read from private field"),l?l.call(c):a.get(c)),k=(c,a,l)=>a.has(c)?U("Cannot add the same private member more than once"):a instanceof WeakSet?a.add(c):a.set(c,l);var H=(c,a,l)=>(V(c,a,"access private method"),l);var S=(c,a,l)=>new Promise((A,T)=>{var q=w=>{try{x(l.next(w))}catch($){T($)}},L=w=>{try{x(l.throw(w))}catch($){T($)}},x=w=>w.done?A(w.value):Promise.resolve(w.value).then(q,L);x((l=l.apply(c,a)).next())});var B,W,N,Z;var a=typeof document!="undefined"?document.currentScript:null;const l={log(y,...r){},error(y,...r){console.error(y,...r)},warn(y,...r){}},R=class R{constructor(){k(this,B,new Map);k(this,W,new DOMParser);this.components={}}registerComponent(r,h,f=!0){return S(this,null,function*(){var p,_,b;if(this.components[r]){l.log(`Component ${r} already registered.`);return}this.components[r]={__registering:!0};try{const m=yield S(this,null,function*(){const t=j(this,B).get(h);if(t)return t;const e=yield(yield fetch(h)).text();return j(this,B).set(h,e),e}),v=j(this,W).parseFromString(m.replace(/<!--[\s\S]*?-->/g,""),"text/html"),O=[],E=[];for(const t of v.querySelectorAll("script")){if(t.src)E.push({src:t.src,type:(p=t.type)!=null?p:null,bind:t.hasAttribute("bind")});else if(t.textContent){let n=t.textContent.trim();n=n.replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm,"").trim(),O.push({content:n,type:(_=t.type)!=null?_:null})}t.remove()}let F="";for(const t of v.querySelectorAll("link[rel='stylesheet']"))F+=`
+`+(yield H(b=R,N,Z).call(b,`${t.href}?raw`)),t.remove();for(const t of v.querySelectorAll("style")){if(t.textContent){let n=t.textContent.trim();n=n.replace(/\/\*[\s\S]*?\*\//g,"").trim(),F+=`
+`+n}t.remove()}F=F.trim(),this.components[r]={tagName:r,template:v.body.innerHTML.trim(),scripts:O,externalScripts:E,style:F},yield this._defineWebComponent(r,f),l.log(`Component ${r} registered successfully`)}catch(m){l.error(`Failed to register component ${r}:`,m),delete this.components[r]}})}registerComponents(r,h=5){return S(this,null,function*(){const f=r.map(({name:_,path:b,useShadowDOM:m})=>()=>this.registerComponent(_,b,m)),p=yield this._runWithConcurrency(f,h);return p.forEach((_,b)=>{if(_.status==="rejected"){const{name:m}=r[b];l.error(`registration failed for ${m}:`,_.reason)}}),p})}_runWithConcurrency(r,h){return S(this,null,function*(){const f=[],p=[];for(const _ of r){let b;const m=_();f.push(m),b=m.then(()=>{p.splice(p.indexOf(b),1)}),p.push(b),p.length>=h&&(yield Promise.race(p))}return Promise.allSettled(f)})}_defineWebComponent(r,h){return S(this,null,function*(){const{defineWebComponent:f}=yield Promise.resolve().then(()=>$);f(this.components[r],h)})}};B=new WeakMap,W=new WeakMap,N=new WeakSet,Z=function(r){return S(this,null,function*(){try{const h=yield fetch(r);if(!h.ok)throw new Error(`HTTP ${h.status}`);return yield h.text()}catch(h){return l.error(`Failed to fetch resource at ${r}:`,h),""}})},k(R,N);let A=R;const T=new A;function q(y={}){let r=y;const h=new Set;return{getState(){return r},setState(f){r=M(M({},r),f),h.forEach(p=>p(r))},subscribe(f){return h.add(f),f(r),()=>h.delete(f)},reset(){r=y,h.forEach(f=>f(r))}}}const L=(...y)=>T.registerComponent(...y),x=(...y)=>T.registerComponents(...y);typeof window!="undefined"&&(window.ladrillosjs={registerComponent:L,registerComponents:x});const $=Object.freeze(Object.defineProperty({__proto__:null,defineWebComponent:(y,r)=>{var v,I;const{tagName:h,template:f,scripts:p,externalScripts:_,style:b}=y,E=class E extends HTMLElement{constructor(){super(),r&&this.attachShadow({mode:"open"}),this.root=r?this.shadowRoot:document,this.state={},this._bindings=[],this._eventBindings=[],this.observer=new MutationObserver(t=>{t.forEach(n=>{if(n.type==="attributes"){const e=n.attributeName,s=this.getAttribute(e);this._handleAttributeChange(e,s)}})}),this.observer.observe(this,{attributes:!0,attributeOldValue:!0})}connectedCallback(){this._loadTemplate(),this._loadStyles(),this._loadScript(),this._initializeStateFromAttributes(),this._setupTwoWayBindings()}disconnectedCallback(){this.observer.disconnect(),this._eventBindings.forEach(({element:t,event:n,listener:e})=>{t.removeEventListener(n,e)}),this._eventBindings=[]}_handleAttributeChange(t,n){var s;const e=H(s=E,v,I).call(s,n);this.state[t]=e,this._render()}_loadTemplate(){r?this.shadowRoot.innerHTML=f:this.innerHTML=f,this._scanBindings()}_scanBindings(){const t=document.createTreeWalker(this.root,NodeFilter.SHOW_TEXT,null,!1);let n;for(;n=t.nextNode();){const e=[...n.textContent.matchAll(/{([^}]+)}/g)];if(e.length){const s=e.map(([,i])=>({node:n,template:n.textContent,key:i.trim()}));this._bindings.push(s)}}this.root.querySelectorAll("*").forEach(e=>{Array.from(e.attributes).forEach(s=>{const i=[...s.value.matchAll(/{([^}]+)}/g)];i.length&&i.forEach(([,o])=>{this._bindings.push({element:e,attrName:s.name,template:s.value,key:o.trim()})})})}),this._getEventBindings()}_getEventBindings(){this.root.querySelectorAll("*").forEach(t=>{Array.from(t.attributes).forEach(n=>{if(!n.name.startsWith("on"))return;const e=n.name.slice(2),s=n.value.trim();t.removeAttribute(n.name);let i;const o=s.trim();if(/^\([^)]*\)\s*=>/.test(o)){const u=new Function(`return (${o})`).call(this);i=d=>u(d)}else o.includes("(")?i=()=>new Function(`return ${o}`).call(this):i=u=>{typeof this[o]=="function"?this[o](u):typeof this.state[o]=="function"&&this.state[o](u)};t.addEventListener(e,i),this._eventBindings.push({key:s,element:t,event:e,listener:i})})})}_loadStyles(){const t=document.createElement("style");t.textContent=b,r?this.root.appendChild(t):this.root.head.appendChild(t)}_loadScript(){return S(this,null,function*(){var t;for(const n of _){const e=new URL(n.src,typeof document=="undefined"&&typeof location=="undefined"?require("url").pathToFileURL(__filename).href:typeof document=="undefined"?location.href:a&&a.tagName.toUpperCase()==="SCRIPT"&&a.src||new URL("ladrillosjs.umd.js",document.baseURI).href).href;if(n.type==="module"&&(n!=null&&n.bind))try{const s=yield import(e);typeof s.default=="function"?s.default.call(this):typeof s.init=="function"?s.init.call(this):l.error(`Module ${n.src} does not export a default function or init function.`)}catch(s){console.error(`Failed to load component module ${n.src}`,s)}else n!=null&&n.bind?yield fetch(e).then(s=>s.text()).then(s=>this._processScriptText(s.replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm,"").trim())):yield this._injectScriptTag(n.src,n.type)}for(const n of p)if(n.type==="module"){const e=document.createElement("script");e.type="module",e.textContent=n.content,((t=this.shadowRoot)!=null?t:this).appendChild(e)}else this._processScriptText(n.content);this._render()})}_injectScriptTag(t,n){return new Promise((e,s)=>{const i=document.createElement("script");i.src=t,n&&(i.type=n),i.onload=e,i.onerror=s,document.head.appendChild(i)})}_initializeStateFromAttributes(){this.getAttributeNames().forEach(t=>{const n=this.getAttribute(t);this._handleAttributeChange(t,n)})}_setupTwoWayBindings(){const t=this.root.querySelectorAll("[data-bind]"),n={};t.forEach(e=>{const s=e.getAttribute("data-bind"),i=e.isContentEditable,o="value"in e,u=i||o?"input":"change",d=()=>{const X=i?e.innerText:o?e.value:e.textContent;this.setState({[s]:X})};e.addEventListener(u,d),this._eventBindings.push({element:e,event:u,listener:d});const g=o?"value":void 0,C=o?e.getAttribute("value")||`{${s}}`:i?e.innerHTML:e.textContent;this._bindings.push({element:e,key:s,attrName:g,template:C}),n[s]=o?e.value:i?e.innerText:e.textContent}),this.setState(n)}_render(){this._bindings.forEach(t=>{const n=Array.isArray(t)?t:[t],{node:e,template:s}=n[0];if(!e)return;const i={};n.forEach(({key:d})=>{var g;i[d]=(g=this.state[d])!=null?g:""});const o=this._renderTemplate(s,i);if(/<[a-z][\s\S]*>/i.test(o)){const d=document.createRange().createContextualFragment(o);e.nodeType===Node.TEXT_NODE?e.replaceWith(d):e.innerHTML=o}else e==null||e.nodeType,Node.TEXT_NODE,e.textContent=o}),this._bindings.filter(t=>t.element).forEach(({element:t,attrName:n,template:e,key:s})=>{var u;const i=(u=s.split(".").reduce((d,g)=>d==null?void 0:d[g],this.state))!=null?u:"",o=new RegExp(`\\{\\s*${s}\\s*\\}`,"g");t.setAttribute(n,e.replace(o,i))}),this.root.querySelectorAll("[data-bind]").forEach(t=>{var s;const n=t.getAttribute("data-bind"),e=(s=this.state[n])!=null?s:"";t.isContentEditable?t.innerText!==e&&(t.innerText=e):"value"in t?t.value!==e&&(t.value=e):t.textContent!==e&&(t.textContent=e)})}_renderTemplate(t,n){return t.replace(/\{\s*([-\w.]+)\s*}/g,(e,s)=>{let i=s.split(".").reduce((o,u)=>o==null?void 0:o[u],this.state);if(typeof i=="function")try{i=i.call(this)}catch(o){i=""}return i!=null?i:""})}_processScriptText(t){const n=/(?:const|let|var)\s+([$_A-Za-z][$_A-Za-z0-9]*)\s*=\s*([\s\S]+?);/g,e=/=>\s*{([\s\S]*?)};/g,s={};let i=0;for(;(i=t.indexOf("function ",i))!==-1;){const u=/^function\s+([$_A-Za-z][$_A-Za-z0-9]*)\s*\([^)]*\)\s*{/.exec(t.slice(i));if(!u){i+=8;continue}const d=u[1];let g=0,C=i+u[0].length-1;do t[C]==="{"?g++:t[C]==="}"&&g--,C++;while(C<t.length&&g>0);s[d]=t.slice(i,C),i=C}for(const u in s)if(this._isBound(u))try{const d=new Function(`return (${s[u]});`).call(this).bind(this);this[u]=d}catch(d){console.error("failed to eval function",u,d)}let o;for(;o=n.exec(t);){const[,u,d]=o;if(!this._isBound(u))continue;const g=this._evalExpression(d.trim(),t,e,u);typeof g=="function"?this[u]=g.bind(this):this.state[u]=g}new Function(t).call(this)}_evalExpression(t,n,e,s){try{return new Function(`return (${t});`).call(this)}catch(i){let o,u;for(;o=e.exec(n);)if(u=o[1].trim(),u)try{return new Function(`${u}`).bind(this)}catch(d){return console.error(d),u}return t}}_isBound(t){const n=this._eventBindings.some(s=>s.key===t),e=this._bindings.some(s=>Array.isArray(s)?s.some(i=>i.key===t):s.key===t);return n||e}emit(t,n){const e=n!=null?n:this.state;this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}listen(t,n){const e=s=>n(s.detail);document.addEventListener(t,e),this._eventBindings.push({element:document,event:t,listener:e})}setState(t){Object.assign(this.state,t),this._render()}querySelector(t){return this.root.querySelector(t)}querySelectorAll(t){return this.root.querySelectorAll(t)}};v=new WeakSet,I=function(t){if(t==="")return null;if(t!=="undefined")try{return JSON.parse(t)}catch(n){return t}},k(E,v);let m=E;customElements.define(h,m),l.log(`Web component defined: <${h}></${h}>`)}},Symbol.toStringTag,{value:"Module"}));c.createStore=q,c.registerComponent=L,c.registerComponents=x,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});