ladrillosjs 2.0.0-beta.3.3 → 2.0.0-beta.3.5

package/README.md

@@ -12,6 +12,7 @@ A lightweight, zero-dependency web component framework for building modular web
 
 - [Features](#features)
 - [Installation](#installation)
+- [Using with Vite](#using-with-vite)
 - [Quick Start](#quick-start)
 - [Core Concepts](#core-concepts)
   - [Component Registration](#component-registration)
@@ -79,6 +80,131 @@ npm install ladrillosjs
 </script>
 ```
 
+## Using with Vite
+
+LadrillosJS includes a Vite plugin to automatically copy your component files to the distribution folder during build. This is useful when you have static component files that need to be served with your application.
+
+### Installation
+
+If you haven't already:
+
+```bash
+npm install --save-dev vite
+npm install ladrillosjs
+```
+
+### Setup
+
+Create or update your `vite.config.js`:
+
+```javascript
+import { defineConfig } from "vite";
+import { copyComponentsPlugin } from "ladrillosjs/vite";
+
+export default defineConfig({
+  plugins: [
+    copyComponentsPlugin({
+      src: "components", // Source directory with your components
+      dest: "components", // Destination in dist/ folder
+      copyOnDev: false, // Only copy during build (not dev server)
+    }),
+  ],
+});
+```
+
+### Basic Usage
+
+```javascript
+// vite.config.js with default settings
+import { defineConfig } from "vite";
+import { copyComponentsPlugin } from "ladrillosjs/vite";
+
+export default defineConfig({
+  plugins: [copyComponentsPlugin()],
+});
+```
+
+The plugin will:
+
+- 📁 Copy your `components/` folder to `dist/components/` during build
+- 🛡️ Handle errors gracefully with helpful logging
+- ⚙️ Use sensible defaults (src: 'components', dest: 'components')
+
+### Plugin Options
+
+```typescript
+interface CopyComponentsOptions {
+  /** Source directory containing components (default: 'components') */
+  src?: string;
+
+  /** Destination directory in dist/ (default: 'components') */
+  dest?: string;
+
+  /** Copy during development server (default: false) */
+  copyOnDev?: boolean;
+}
+```
+
+### Complete Example
+
+Project structure:
+
+```
+my-app/
+├── components/
+│   ├── header.html
+│   ├── footer.html
+│   └── card.html
+├── src/
+│   └── main.js
+├── index.html
+└── vite.config.js
+```
+
+Configuration:
+
+```javascript
+import { defineConfig } from "vite";
+import { copyComponentsPlugin } from "ladrillosjs/vite";
+
+export default defineConfig({
+  plugins: [
+    copyComponentsPlugin({
+      src: "components",
+      dest: "components",
+    }),
+  ],
+});
+```
+
+Usage in your app:
+
+```javascript
+// src/main.js
+import { registerComponents } from "ladrillosjs";
+
+await registerComponents([
+  { name: "app-header", path: "./components/header.html" },
+  { name: "app-footer", path: "./components/footer.html" },
+  { name: "app-card", path: "./components/card.html" },
+]);
+```
+
+After running `npm run build`, your components will be copied to `dist/components/` and be ready for production deployment.
+
+### Development Workflow
+
+```bash
+# Start dev server (components served from source)
+npm run dev
+
+# Build for production (components copied to dist)
+npm run build
+
+# Preview production build
+npm run preview
+```
+
 ## Quick Start
 
 ### 1. Create Your First Component
@@ -742,33 +868,9 @@ $listen("user-logged-in", (data) => {
 
 LadrillosJS supports three ways to include external JavaScript:
 
-#### 1. Component-Scoped Scripts (Default)
-
-Regular script tags execute within the component's context and have access to component state and utilities:
-
-```html
-<!-- alert-button.html -->
-<button onclick="increaseCount()">{title}: {count}</button>
-
-<!-- This script runs in the component context -->
-<script src="./alert.js"></script>
-```
-
-**alert.js:**
-
-```javascript
-// Variables and functions are available to the component
-let count = 0;
-const title = "Button Count";
-
-const increaseCount = () => {
-  count++; // Updates component state
-};
-```
-
-#### 2. ES Modules
+#### 1. ES Modules (Recommended for Complex Logic)
 
-Use `type="module"` for standard ES module imports:
+Use `type="module"` for standard ES modules with automatic state synchronization. Variables declared in modules are automatically initialized in component state and mutations are automatically synced:
 
 ```html
 <!-- side-nav.html -->
@@ -778,7 +880,7 @@ Use `type="module"` for standard ES module imports:
   <ul></ul>
 </nav>
 
-<!-- Load as ES module -->
+<!-- Load as ES module - variables and exports are auto-synced to state -->
 <script type="module" src="../js/side.js"></script>
 ```
 
@@ -787,9 +889,21 @@ Use `type="module"` for standard ES module imports:
 ```javascript
 import { registerComponent, $listen, $querySelector } from "ladrillosjs";
 
+// Declare variables that are used in template bindings
+// They are automatically initialized in component state
 const notes = [];
+
 registerComponent("note-item", "./components/note-item.html");
 
+// Export functions so they're available to event handlers
+export const createNote = () => {
+  const title = prompt("Note title:");
+  if (title) {
+    notes.push({ title, content: "" });
+  }
+};
+
+// Listen to global events
 $listen("note_saved", (data) => {
   notes.push({ ...data });
   const ul = $querySelector("ul");
@@ -801,6 +915,110 @@ $listen("note_saved", (data) => {
 });
 ```
 
+**How Module State Sync Works:**
+
+When a module script is loaded, LadrillosJS:
+
+1. **Detects variables used in template bindings** (e.g., variables in `{}` expressions)
+2. **Initializes them in component state** automatically when declared
+3. **Syncs mutations to state** automatically when assigned
+4. **Auto-attaches exports** to the component so event handlers can access them
+
+This means you write natural JavaScript without boilerplate:
+
+```javascript
+// ✨ This is all you need!
+let count = 0; // Auto-initialized in state
+let user = { name: "" }; // Works with objects too
+
+export const increment = () => {
+  count++; // Auto-synced to state!
+};
+
+export const updateUser = (name) => {
+  user.name = name; // Auto-synced to state!
+};
+```
+
+**ES Module Benefits:**
+
+- ✅ Import external libraries and utilities
+- ✅ Organize code across multiple files
+- ✅ Automatic state initialization for binding variables
+- ✅ Automatic state sync on variable mutations
+- ✅ Clean separation of concerns
+- ✅ Standard JavaScript module syntax
+
+**Example: Counter Component**
+
+```html
+<!-- counter.html -->
+<div>
+  <h2>Counter: {count}</h2>
+  <button onclick="increment()">+1</button>
+  <button onclick="decrement()">-1</button>
+  <button onclick="reset()">Reset</button>
+</div>
+
+<script type="module" src="./counter.js"></script>
+
+<style>
+  div {
+    text-align: center;
+    padding: 2rem;
+  }
+  button {
+    padding: 0.5rem 1rem;
+    margin: 0.5rem;
+    cursor: pointer;
+  }
+</style>
+```
+
+**counter.js:**
+
+```javascript
+// Variables used in template are auto-initialized
+let count = 0;
+
+// Exports are auto-attached to component for event handlers
+export const increment = () => {
+  count++;
+};
+
+export const decrement = () => {
+  count--;
+};
+
+export const reset = () => {
+  count = 0;
+};
+```
+
+#### 2. Component-Scoped Scripts
+
+Regular script tags execute within the component's context and have access to component state and utilities:
+
+```html
+<!-- alert-button.html -->
+<button onclick="increaseCount()">{title}: {count}</button>
+
+<!-- This script runs in the component context -->
+<script src="./alert.js"></script>
+```
+
+**alert.js:**
+
+```javascript
+// Variables and functions are available to the component
+let count = 0;
+const title = "Button Count";
+
+const increaseCount = () => {
+  count++; // Updates component state
+};
+```
+
 #### 3. External Libraries
 
 Use the `external` attribute for third-party libraries that shouldn't be bound to component context:
@@ -834,6 +1052,177 @@ Use the `external` attribute for third-party libraries that shouldn't be bound t
 - Libraries that need to be loaded globally
 - Scripts that don't need component context or utilities
 
+#### Module Script Best Practices
+
+**✅ Use modules for:**
+
+- Component-specific logic and functions
+- Local state management
+- Importing utilities and helpers
+- Organizing complex components
+
+**❌ Don't use modules for:**
+
+- Simple inline event handlers (use inline scripts)
+- Global libraries (use `external` attribute)
+- Scripts that need global scope
+
+**Relative Imports:**
+
+Modules automatically resolve relative imports to their proper URLs:
+
+```javascript
+// These work automatically with modules
+import { helper } from "./utils.js";
+import { Component } from "../components/component.js";
+import { api } from "../../api/client.js";
+```
+
+#### Legacy: Using `$reactive` (Optional)
+
+The `$reactive` function is still available for explicit state initialization in edge cases:
+
+```javascript
+import { $reactive } from "ladrillosjs";
+
+let count = 0;
+const setCount = $reactive("count", count); // Manual initialization
+
+// Later updates
+setCount(newValue);
+```
+
+However, this is **no longer necessary for module scripts** since variables are automatically initialized. Use it only if you need:
+
+- Explicit control over initialization timing
+- Manual setter functions
+- Backward compatibility with older code
+
+#### Advanced Module Patterns
+
+**Pattern 1: Async Data Loading**
+
+```html
+<!-- user-profile.html -->
+<div $if="{loading}">Loading user...</div>
+<div $else-if="{error}">{error}</div>
+<div $else>
+  <h1>{user.name}</h1>
+  <p>Email: {user.email}</p>
+  <p>Bio: {user.bio}</p>
+</div>
+
+<script type="module" src="./user-profile.js"></script>
+```
+
+**user-profile.js:**
+
+```javascript
+// Variables auto-initialized in component state
+let user = { name: "", email: "", bio: "" };
+let loading = true;
+let error = null;
+
+// Auto-exported so it's available as event handler
+export const loadUser = async (userId) => {
+  loading = true;
+  error = null;
+
+  try {
+    const response = await fetch(`/api/users/${userId}`);
+    user = await response.json();
+  } catch (e) {
+    error = e.message;
+  } finally {
+    loading = false;
+  }
+};
+
+// Load user on component mount
+loadUser(1);
+```
+
+**Pattern 2: Composable Logic**
+
+```javascript
+// utils/counter.js
+export const createCounter = (initial = 0) => {
+  let count = initial;
+
+  return {
+    increment: () => count++,
+    decrement: () => count--,
+    reset: () => (count = initial),
+    get value() {
+      return count;
+    },
+  };
+};
+
+// counter.js (module script)
+import { createCounter } from "./utils/counter.js";
+
+const counter = createCounter(0);
+
+export const increment = () => counter.increment();
+export const decrement = () => counter.decrement();
+export const reset = () => counter.reset();
+```
+
+**Pattern 3: Shared State Between Components**
+
+```javascript
+// store.js - shared module
+export let globalState = {
+  user: null,
+  notifications: [],
+  theme: "light",
+};
+
+export const updateUser = (user) => {
+  globalState.user = user;
+};
+
+export const addNotification = (msg) => {
+  globalState.notifications.push(msg);
+};
+
+// In component module script:
+import { globalState, updateUser } from "./store.js";
+
+let user = globalState.user;
+
+export const switchTheme = () => {
+  globalState.theme = globalState.theme === "light" ? "dark" : "light";
+};
+```
+
+**Pattern 4: Event-Driven Updates**
+
+```javascript
+import { $listen, $emit } from "ladrillosjs";
+
+let items = [];
+let selectedId = null;
+
+$listen("item:created", (item) => {
+  items = [...items, item];
+});
+
+$listen("item:deleted", (itemId) => {
+  items = items.filter((i) => i.id !== itemId);
+});
+
+export const selectItem = (id) => {
+  selectedId = id;
+  $emit("item:selected", { id, item: items.find((i) => i.id === id) });
+};
+
+export const deleteItem = (id) => {
+  $emit("item:delete-request", { id });
+};
+```
+
 ### Shadow DOM
 
 Components use Shadow DOM by default for style encapsulation:
@@ -1108,7 +1497,8 @@ $listen(eventName: string, callback: (data?) => void): () => void
 $querySelector(selector: string): Element | null
 $querySelectorAll(selector: string): NodeListOf<Element>
 
-// Reactive variables (for external modules)
+// Manual reactive initialization (optional - mainly for backward compatibility)
+// Module scripts automatically initialize and sync variables
 $reactive(name: string, initialValue: any): (value: any) => void
 ```
 

package/dist/index-CBW3yTb-.js

@@ -0,0 +1,19 @@
+"use strict";var X=Object.defineProperty,J=Object.defineProperties;var V=Object.getOwnPropertyDescriptors;var L=Object.getOwnPropertySymbols;var Y=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable;var z=t=>{throw TypeError(t)};var _=(t,e,r)=>e in t?X(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,m=(t,e)=>{for(var r in e||(e={}))Y.call(e,r)&&_(t,r,e[r]);if(L)for(var r of L(e))Q.call(e,r)&&_(t,r,e[r]);return t},h=(t,e)=>J(t,V(e));var U=(t,e,r)=>e.has(t)||z("Cannot "+r);var N=(t,e,r)=>e.has(t)?z("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,r);var b=(t,e,r)=>(U(t,e,"access private method"),r);var p=(t,e,r)=>new Promise((s,o)=>{var i=c=>{try{l(r.next(c))}catch(d){o(d)}},a=c=>{try{l(r.throw(c))}catch(d){o(d)}},l=c=>c.done?s(c.value):Promise.resolve(c.value).then(i,a);l((r=r.apply(t,e)).next())});const H=()=>{try{return!1}catch(t){return process.env.NODE_ENV==="development"}},n={log(t,...e){H()&&console.log(t,...e)},error(t,...e){console.error(t,...e)},warn(t,...e){H()&&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("")},Z=(t,e,r)=>{const s=g("⚠️ Binding Error: Failed to evaluate expression",h(m({},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)},ee=(t,e,r,s)=>{const o=g("⚠️ Event Handler Error: Failed to execute handler",h(m({},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)},te=(t,e,r)=>{const s=g("⚠️ Conditional Error: Failed to evaluate condition",h(m({},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)},re=(t,e,r)=>{const s=g("⚠️ Loop Error: Failed to process loop",h(m({},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)},M=(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)},x=(t,e,r)=>{const s=g("⚠️ Fetch Error: Failed to load resource",h(m({},r),{componentPath:t}));n.error(s),n.error(`  Error details: ${e.message}`)},P=(t,e)=>{const r=g(`⚠️ Parse Error: ${t}`,e);n.error(r)},se=(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)},oe=(t,e,r)=>{const s=g("⚠️ Two-Way Binding Error: Failed to setup binding",h(m({},r),{expression:t,lineHint:(r==null?void 0:r.lineHint)||"$model binding"}));n.error(s),n.error(`  Error details: ${e.message}`)},ne=(t,e)=>{var r;return m({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=new Map,ie=25,le=t=>{const e=u.get(t);return e&&(u.delete(t),u.set(t,e)),e},ae=(t,e)=>{if(u.has(t))u.delete(t);else if(u.size>=ie){const r=u.keys().next().value;r&&u.delete(r)}u.set(t,e)},T=t=>p(null,null,function*(){if(!t)throw new Error("Path cannot be null or empty");const e=le(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 ae(t,s),s}catch(r){x(t,r,{componentPath:t})}}),ce=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 x(t,e),""}}),$={bindings:/{([^}]+)}/g,comments:{js:/\/\*[\s\S]*?\*\/|\/\/.*$/gm,css:/\/\*[\s\S]*?\*\//g,html:/<!--[\s\S]*?-->/g}},de=new DOMParser,A=(t,e)=>p(null,null,function*(){const r=pe(t),{scripts:s,externalScripts:o}=ge(r),i=yield he(r),a=r.body.innerHTML.trim();return{tagName:e,template:a,scripts:s,externalScripts:o,styles:i}}),pe=t=>de.parseFromString(t.replace($.comments.html,""),"text/html"),ue=t=>["/@vite/","/__vite","/webpack-dev-server","/hot-update","/__webpack_hmr","/browser-sync/","/livereload.js"].some(r=>t.includes(r)),ge=t=>{var s,o;const e=[],r=[];for(const i of t.querySelectorAll("script")){if(i.src){if(ue(i.src)){i.remove();continue}const a=i.hasAttribute("external");r.push({src:i.getAttribute("src")||i.src,type:(s=i.type)!=null?s:null,external:a})}else if(i.textContent){let a=i.textContent.trim();a=a.replace($.comments.js,"").trim(),e.push({content:a,type:(o=i.type)!=null?o:null})}i.remove()}return{scripts:e,externalScripts:r}},me=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},he=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 ce(s.href),a=me(i);a&&(e+=`
+`+a)}else if(s.tagName==="STYLE"){const o=s;if(o.textContent){let i=o.textContent.trim();i=i.replace($.comments.css,"").trim(),e+=`
+`+i}}s.remove()}return e.trim()});var E,q,F;class fe{constructor(){N(this,E);this.components={},this.lazyComponents=new Set,this.intersectionObserver=null,this.lazyLoadingInProgress=new Map,this.lazyComponentsLoaded=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),b(this,E,q).call(this,e,r,s),n.log(`Component ${e} registered as lazy-loaded`);return}try{const i=yield T(r),a=yield A(i,e);this.components[e]={tagName:e,template:a.template,scripts:a.scripts,externalScripts:a.externalScripts,styles:a.styles,sourcePath:r,lazy:!1},n.log(`Component ${e} registered successfully`),yield b(this,E,F).call(this,e,s)}catch(i){M(e,r,i);return}})}}E=new WeakSet,q=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(l=>{l.forEach(c=>{c.isIntersecting&&!this.loaded&&(this.loaded=!0,this.loadComponent())})},{rootMargin:"100px"}),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 l=this.performLoad();o.lazyLoadingInProgress.set(e,l),yield l,o.lazyLoadingInProgress.delete(e),o.lazyComponentsLoaded.add(e),o.lazyComponents.delete(e),n.log(`Component ${e} lazy-loaded successfully`)}catch(l){o.lazyLoadingInProgress.delete(e),M(e,r,l)}})}performLoad(){return p(this,null,function*(){n.log(`Lazy loading component: ${e}`);const l=this.parentNode;if(this.nextSibling,!l){P(`Placeholder for ${e} has no parent node`,{componentName:e,componentPath:r});return}const c=yield T(r),d=yield A(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 f=`${e}-real`;n.log(`Defining real component with temp name: ${f}`);const y=o.components[e].tagName;o.components[e].tagName=f;const{defineWebComponent:C}=yield Promise.resolve().then(()=>require("./webcomponent-BdxW-3sK.js"));C(o.components[e],s),n.log(`Real component ${f} defined`),o.components[e].tagName=y,this.upgradePlaceholder()})}upgradePlaceholder(){const l=this,c=this.parentNode,d=this.nextSibling;if(!c){P(`Placeholder for ${e} has no parent node`,{componentName:e,componentPath:r});return}const f=`${e}-real`,y=document.createElement(f);for(n.log(`Created real component instance: ${f}`),Array.from(l.attributes).forEach(C=>{C.name!=="eager"&&y.setAttribute(C.name,C.value)});l.firstChild;)y.appendChild(l.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(l),n.log("Removed placeholder element")}}customElements.get(e)||customElements.define(e,i)},F=function(e,r){return p(this,null,function*(){const{defineWebComponent:s}=yield Promise.resolve().then(()=>require("./webcomponent-BdxW-3sK.js"));this.components[e]&&s(this.components[e],r)})};const R=new fe;class ye{constructor(){this.listeners=new Map}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(a=>{try{const l=a(r);l instanceof Promise&&i.push(l)}catch(l){n.error(`⚠️ Event Bus Error: Failed to execute listener for "${e}"`),n.error(`  Error details: ${l.message}`),i.push(Promise.reject(l))}}),i.length>0?Promise.all(i).then(()=>{}):Promise.resolve()}listen(e,r){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(r),()=>{this.off(e,r)}}off(e,r){const s=this.listeners.get(e);s&&(s.delete(r),s.size===0&&this.listeners.delete(e))}clear(e){e?this.listeners.delete(e):this.listeners.clear()}listenerCount(e){var r,s;return(s=(r=this.listeners.get(e))==null?void 0:r.size)!=null?s:0}}const k=new ye,w={};function we(t={}){const{src:e="components",dest:r="components",copyOnDev:s=!1}=t;return{name:"ladrillosjs:copy-components",apply:s?"serve":"build",generateBundle(i,a){return p(this,null,function*(){const l=w.resolve(process.cwd(),e),c=w.resolve(process.cwd(),"dist",r);if(!w.existsSync(l)){console.warn(`[ladrillosjs:copy-components] Source directory not found: ${l}`);return}try{w.existsSync(c)&&w.rmSync(c,{recursive:!0,force:!0}),w.cpSync(l,c,{recursive:!0}),console.log(`[ladrillosjs:copy-components] Copied components from ${l} to ${c}`)}catch(d){throw console.error("[ladrillosjs:copy-components] Error copying components:",d),d}})}}}const B=(t,e,r,s)=>R.registerComponent(t,e,r,s),j=t=>p(null,null,function*(){yield Promise.all(t.map(({name:e,path:r,useShadowDOM:s,lazy:o})=>R.registerComponent(e,r,s,o)))}),I=(t,e)=>k.listen(t,e),D=(t,e)=>{k.emit(t,e)},Ee=(t,e)=>{if(e){const r=e.tagName.toLowerCase();window.__ladrilloContexts||(window.__ladrilloContexts=new Map),window.__ladrilloContexts.set(r,{shadowRoot:t,element:e})}},v=()=>{const t=window.__ladrilloContexts;if(t&&t.size>0){const e=Array.from(t.values());return e[e.length-1]}return null},W=()=>{const t=v();return t&&t.element?t.element.state||{}:{}},S=t=>{const e=v();e&&e.setState&&e.setState(t)},O=(t,e)=>(S({[t]:e}),r=>{S({[t]:r})}),G=(t,e)=>{if(e)return e.querySelector(t);const r=v();if(r){const s=r.shadowRoot||r.element;if(s){const o=s.querySelector(t);if(o)return o}}return document.querySelector(t)},K=(t,e)=>{if(e)return e.querySelectorAll(t);const r=v();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:B,registerComponents:j},window.$listen=I,window.$emit=D,window.$querySelector=G,window.$querySelectorAll=K,window.$reactive=O,window.$setState=S,window.$getState=W);exports.$emit=D;exports.$getState=W;exports.$listen=I;exports.$querySelector=G;exports.$querySelectorAll=K;exports.$reactive=O;exports.$setState=S;exports.REGEX_PATTERNS=$;exports.__setComponentContext=Ee;exports.copyComponentsPlugin=we;exports.createErrorContext=ne;exports.eventBus=k;exports.logBindingError=Z;exports.logConditionalError=te;exports.logEventHandlerError=ee;exports.logLoopError=re;exports.logParseError=P;exports.logScriptError=se;exports.logTwoWayBindingError=oe;exports.logger=n;exports.registerComponent=B;exports.registerComponents=j;
+//# sourceMappingURL=index-CBW3yTb-.js.map