ladrillosjs 2.0.0-rc.6 → 2.0.0

package/dist/shared-Sk_U4mcq.dev.js

@@ -0,0 +1,161 @@
+//#region src/core/events/eventBus.ts
+/**
+* Initialize or get the global event bus.
+* This is shared with external module scripts that inject their own $emit/$listen.
+*/
+function getEventBus() {
+	if (!globalThis.__ladrillosEventBus) globalThis.__ladrillosEventBus = {
+		listeners: /* @__PURE__ */ new Map(),
+		componentListeners: /* @__PURE__ */ new Map()
+	};
+	return globalThis.__ladrillosEventBus;
+}
+/**
+* Get the listeners map (uses global storage)
+*/
+function getEventListeners() {
+	return getEventBus().listeners;
+}
+/**
+* Get the component listeners map (uses global storage)
+*/
+function getComponentListeners() {
+	return getEventBus().componentListeners;
+}
+/**
+* Emit an event to all registered listeners.
+*
+* @param eventName - The name of the event to emit
+* @param data - Optional data to pass to listeners
+*
+* @example
+* ```js
+* $emit("user-logged-in", { userId: 123, username: "john" });
+* $emit("show-modal");
+* $emit("item-added", { id: 1, name: "Product" });
+* ```
+*/
+function $emit(eventName, data) {
+	const listeners = getEventListeners().get(eventName);
+	if (!listeners || listeners.size === 0) return;
+	for (const registration of listeners) try {
+		registration.callback(data);
+	} catch (error) {
+		console.error(`[LadrillosJS] Error in event listener for "${eventName}":`, error);
+	}
+}
+/**
+* Listen for events from any component.
+*
+* @param eventName - The name of the event to listen for
+* @param callback - Function to call when the event is emitted
+* @param componentId - Optional component ID for automatic cleanup
+* @returns Unsubscribe function to remove the listener
+*
+* @example
+* ```js
+* // Basic usage
+* $listen("user-logged-in", (user) => {
+*   console.log(`Welcome, ${user.username}!`);
+*   isLoggedIn = true;
+* });
+*
+* // With unsubscribe
+* const unsubscribe = $listen("notifications", handleNotification);
+* // Later: unsubscribe();
+* ```
+*/
+function $listen(eventName, callback, componentId) {
+	const eventListeners = getEventListeners();
+	const componentListeners = getComponentListeners();
+	let listeners = eventListeners.get(eventName);
+	if (!listeners) {
+		listeners = /* @__PURE__ */ new Set();
+		eventListeners.set(eventName, listeners);
+	}
+	const registration = {
+		callback,
+		componentId
+	};
+	listeners.add(registration);
+	if (componentId) {
+		let componentRegs = componentListeners.get(componentId);
+		if (!componentRegs) {
+			componentRegs = /* @__PURE__ */ new Set();
+			componentListeners.set(componentId, componentRegs);
+		}
+		componentRegs.add({
+			event: eventName,
+			registration
+		});
+	}
+	return () => {
+		const eventListeners = getEventListeners();
+		const componentListeners = getComponentListeners();
+		listeners?.delete(registration);
+		if (listeners?.size === 0) eventListeners.delete(eventName);
+		if (componentId) {
+			const componentRegs = componentListeners.get(componentId);
+			if (componentRegs) {
+				for (const reg of componentRegs) if (reg.registration === registration) {
+					componentRegs.delete(reg);
+					break;
+				}
+				if (componentRegs.size === 0) componentListeners.delete(componentId);
+			}
+		}
+	};
+}
+/**
+* Remove all listeners registered by a specific component.
+* Called automatically when a component is disconnected from the DOM.
+*
+* @param componentId - The component's unique ID
+*/
+function cleanupComponentListeners(componentId) {
+	const eventListeners = getEventListeners();
+	const componentListeners = getComponentListeners();
+	const componentRegs = componentListeners.get(componentId);
+	if (!componentRegs) return;
+	for (const { event, registration } of componentRegs) {
+		const listeners = eventListeners.get(event);
+		if (listeners) {
+			listeners.delete(registration);
+			if (listeners.size === 0) eventListeners.delete(event);
+		}
+	}
+	componentListeners.delete(componentId);
+}
+/**
+* Creates event bus helpers bound to a specific component.
+* This enables automatic cleanup when the component is disconnected.
+*
+* @param componentId - The unique ID of the component
+* @returns Object containing bound $emit and $listen functions
+*/
+function createEventBusHelpers(componentId) {
+	/**
+	* Emit an event (same as global $emit)
+	*/
+	function boundEmit(eventName, data) {
+		$emit(eventName, data);
+	}
+	/**
+	* Listen for an event with automatic component tracking
+	*/
+	function boundListen(eventName, callback) {
+		return $listen(eventName, callback, componentId);
+	}
+	return {
+		$emit: boundEmit,
+		$listen: boundListen
+	};
+}
+/**
+* Names of event bus helpers (for Function parameter lists)
+*/
+var eventBusHelperNames = ["$emit", "$listen"];
+//#endregion
+export { eventBusHelperNames as a, createEventBusHelpers as i, $listen as n, cleanupComponentListeners as r, $emit as t };
+
+//# sourceMappingURL=shared-Sk_U4mcq.dev.js.map

package/dist/shared-Sk_U4mcq.dev.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-Sk_U4mcq.dev.js","names":[],"sources":["../src/core/events/eventBus.ts"],"sourcesContent":["/**\r\n * LadrillosJS Global Event Bus\r\n *\r\n * Provides cross-component communication without prop drilling.\r\n *\r\n * Usage:\r\n * - $emit(\"event-name\", data) - Emit an event to all listeners\r\n * - $listen(\"event-name\", callback) - Listen for events from any component\r\n *\r\n * @example\r\n * ```html\r\n * <!-- Component A: Emitting events -->\r\n * <script>\r\n *   const login = () => {\r\n *     $emit(\"user-logged-in\", { userId: 123, username: \"john\" });\r\n *   };\r\n * </script>\r\n *\r\n * <!-- Component B: Listening for events -->\r\n * <script>\r\n *   let isLoggedIn = false;\r\n *   let username = \"\";\r\n *\r\n *   $listen(\"user-logged-in\", (user) => {\r\n *     isLoggedIn = true;\r\n *     username = user.username;\r\n *   });\r\n * </script>\r\n * ```\r\n */\r\n\r\n// ============================================================================\r\n// Types\r\n// ============================================================================\r\n\r\n/**\r\n * Event listener callback function type\r\n */\r\nexport type EventListener<T = unknown> = (data: T) => void;\r\n\r\n/**\r\n * Public alias for EventListener (for external API)\r\n */\r\nexport type EventCallback<T = unknown> = EventListener<T>;\r\n\r\n/**\r\n * Internal listener registration with metadata for cleanup\r\n */\r\ninterface ListenerRegistration {\r\n  callback: EventListener;\r\n  componentId?: string; // Track which component registered this listener\r\n}\r\n\r\n/**\r\n * Unsubscribe function returned by $listen\r\n */\r\nexport type Unsubscribe = () => void;\r\n\r\n// ============================================================================\r\n// Global Event Bus (Singleton)\r\n// ============================================================================\r\n\r\n/**\r\n * Global event bus interface for type safety\r\n */\r\ninterface GlobalEventBus {\r\n  listeners: Map<string, Set<ListenerRegistration>>;\r\n  componentListeners: Map<\r\n    string,\r\n    Set<{ event: string; registration: ListenerRegistration }>\r\n  >;\r\n}\r\n\r\n/**\r\n * Extend globalThis to include our event bus\r\n */\r\ndeclare global {\r\n  var __ladrillosEventBus: GlobalEventBus | undefined;\r\n}\r\n\r\n/**\r\n * Initialize or get the global event bus.\r\n * This is shared with external module scripts that inject their own $emit/$listen.\r\n */\r\nfunction getEventBus(): GlobalEventBus {\r\n  if (!globalThis.__ladrillosEventBus) {\r\n    globalThis.__ladrillosEventBus = {\r\n      listeners: new Map(),\r\n      componentListeners: new Map(),\r\n    };\r\n  }\r\n  return globalThis.__ladrillosEventBus;\r\n}\r\n\r\n/**\r\n * Get the listeners map (uses global storage)\r\n */\r\nfunction getEventListeners(): Map<string, Set<ListenerRegistration>> {\r\n  return getEventBus().listeners;\r\n}\r\n\r\n/**\r\n * Get the component listeners map (uses global storage)\r\n */\r\nfunction getComponentListeners(): Map<\r\n  string,\r\n  Set<{ event: string; registration: ListenerRegistration }>\r\n> {\r\n  return getEventBus().componentListeners;\r\n}\r\n\r\n/**\r\n * Emit an event to all registered listeners.\r\n *\r\n * @param eventName - The name of the event to emit\r\n * @param data - Optional data to pass to listeners\r\n *\r\n * @example\r\n * ```js\r\n * $emit(\"user-logged-in\", { userId: 123, username: \"john\" });\r\n * $emit(\"show-modal\");\r\n * $emit(\"item-added\", { id: 1, name: \"Product\" });\r\n * ```\r\n */\r\nexport function $emit<T = unknown>(eventName: string, data?: T): void {\r\n  const eventListeners = getEventListeners();\r\n  const listeners = eventListeners.get(eventName);\r\n  if (!listeners || listeners.size === 0) {\r\n    // No listeners for this event - that's fine, just return\r\n    return;\r\n  }\r\n\r\n  // Call all listeners with the data\r\n  for (const registration of listeners) {\r\n    try {\r\n      registration.callback(data as T);\r\n    } catch (error) {\r\n      console.error(\r\n        `[LadrillosJS] Error in event listener for \"${eventName}\":`,\r\n        error\r\n      );\r\n    }\r\n  }\r\n}\r\n\r\n/**\r\n * Listen for events from any component.\r\n *\r\n * @param eventName - The name of the event to listen for\r\n * @param callback - Function to call when the event is emitted\r\n * @param componentId - Optional component ID for automatic cleanup\r\n * @returns Unsubscribe function to remove the listener\r\n *\r\n * @example\r\n * ```js\r\n * // Basic usage\r\n * $listen(\"user-logged-in\", (user) => {\r\n *   console.log(`Welcome, ${user.username}!`);\r\n *   isLoggedIn = true;\r\n * });\r\n *\r\n * // With unsubscribe\r\n * const unsubscribe = $listen(\"notifications\", handleNotification);\r\n * // Later: unsubscribe();\r\n * ```\r\n */\r\nexport function $listen<T = unknown>(\r\n  eventName: string,\r\n  callback: EventListener<T>,\r\n  componentId?: string\r\n): Unsubscribe {\r\n  const eventListeners = getEventListeners();\r\n  const componentListeners = getComponentListeners();\r\n\r\n  // Get or create the listener set for this event\r\n  let listeners = eventListeners.get(eventName);\r\n  if (!listeners) {\r\n    listeners = new Set();\r\n    eventListeners.set(eventName, listeners);\r\n  }\r\n\r\n  // Create registration object\r\n  const registration: ListenerRegistration = {\r\n    callback: callback as EventListener,\r\n    componentId,\r\n  };\r\n\r\n  // Add to event listeners\r\n  listeners.add(registration);\r\n\r\n  // Track by component ID for cleanup\r\n  if (componentId) {\r\n    let componentRegs = componentListeners.get(componentId);\r\n    if (!componentRegs) {\r\n      componentRegs = new Set();\r\n      componentListeners.set(componentId, componentRegs);\r\n    }\r\n    componentRegs.add({ event: eventName, registration });\r\n  }\r\n\r\n  // Return unsubscribe function\r\n  return () => {\r\n    const eventListeners = getEventListeners();\r\n    const componentListeners = getComponentListeners();\r\n\r\n    listeners?.delete(registration);\r\n\r\n    // Clean up empty listener sets\r\n    if (listeners?.size === 0) {\r\n      eventListeners.delete(eventName);\r\n    }\r\n\r\n    // Remove from component tracking\r\n    if (componentId) {\r\n      const componentRegs = componentListeners.get(componentId);\r\n      if (componentRegs) {\r\n        for (const reg of componentRegs) {\r\n          if (reg.registration === registration) {\r\n            componentRegs.delete(reg);\r\n            break;\r\n          }\r\n        }\r\n        if (componentRegs.size === 0) {\r\n          componentListeners.delete(componentId);\r\n        }\r\n      }\r\n    }\r\n  };\r\n}\r\n\r\n/**\r\n * Remove all listeners registered by a specific component.\r\n * Called automatically when a component is disconnected from the DOM.\r\n *\r\n * @param componentId - The component's unique ID\r\n */\r\nexport function cleanupComponentListeners(componentId: string): void {\r\n  const eventListeners = getEventListeners();\r\n  const componentListeners = getComponentListeners();\r\n\r\n  const componentRegs = componentListeners.get(componentId);\r\n  if (!componentRegs) return;\r\n\r\n  for (const { event, registration } of componentRegs) {\r\n    const listeners = eventListeners.get(event);\r\n    if (listeners) {\r\n      listeners.delete(registration);\r\n      if (listeners.size === 0) {\r\n        eventListeners.delete(event);\r\n      }\r\n    }\r\n  }\r\n\r\n  componentListeners.delete(componentId);\r\n}\r\n\r\n/**\r\n * Remove all event listeners (useful for testing)\r\n */\r\nexport function clearAllListeners(): void {\r\n  getEventListeners().clear();\r\n  getComponentListeners().clear();\r\n}\r\n\r\n/**\r\n * Get the count of listeners for an event (useful for debugging)\r\n */\r\nexport function getListenerCount(eventName: string): number {\r\n  return getEventListeners().get(eventName)?.size ?? 0;\r\n}\r\n\r\n/**\r\n * Check if an event has any listeners\r\n */\r\nexport function hasListeners(eventName: string): boolean {\r\n  return (getEventListeners().get(eventName)?.size ?? 0) > 0;\r\n}\r\n\r\n// ============================================================================\r\n// Factory for Component-Bound Helpers\r\n// ============================================================================\r\n\r\n/**\r\n * Creates event bus helpers bound to a specific component.\r\n * This enables automatic cleanup when the component is disconnected.\r\n *\r\n * @param componentId - The unique ID of the component\r\n * @returns Object containing bound $emit and $listen functions\r\n */\r\nexport function createEventBusHelpers(componentId: string) {\r\n  /**\r\n   * Emit an event (same as global $emit)\r\n   */\r\n  function boundEmit<T = unknown>(eventName: string, data?: T): void {\r\n    $emit(eventName, data);\r\n  }\r\n\r\n  /**\r\n   * Listen for an event with automatic component tracking\r\n   */\r\n  function boundListen<T = unknown>(\r\n    eventName: string,\r\n    callback: EventListener<T>\r\n  ): Unsubscribe {\r\n    return $listen(eventName, callback, componentId);\r\n  }\r\n\r\n  return {\r\n    $emit: boundEmit,\r\n    $listen: boundListen,\r\n  };\r\n}\r\n\r\n/**\r\n * Names of event bus helpers (for Function parameter lists)\r\n */\r\nexport const eventBusHelperNames = [\"$emit\", \"$listen\"];\r\n"],"mappings":";;;;;AAoFA,SAAS,cAA8B;CACrC,IAAI,CAAC,WAAW,qBACd,WAAW,sBAAsB;EAC/B,2BAAW,IAAI,IAAI;EACnB,oCAAoB,IAAI,IAAI;CAC9B;CAEF,OAAO,WAAW;AACpB;;;;AAKA,SAAS,oBAA4D;CACnE,OAAO,YAAY,CAAC,CAAC;AACvB;;;;AAKA,SAAS,wBAGP;CACA,OAAO,YAAY,CAAC,CAAC;AACvB;;;;;;;;;;;;;;AAeA,SAAgB,MAAmB,WAAmB,MAAgB;CAEpE,MAAM,YADiB,kBACL,CAAA,CAAe,IAAI,SAAS;CAC9C,IAAI,CAAC,aAAa,UAAU,SAAS,GAEnC;CAIF,KAAK,MAAM,gBAAgB,WACzB,IAAI;EACF,aAAa,SAAS,IAAS;CACjC,SAAS,OAAO;EACd,QAAQ,MACN,8CAA8C,UAAU,KACxD,KACF;CACF;AAEJ;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAgB,QACd,WACA,UACA,aACa;CACb,MAAM,iBAAiB,kBAAkB;CACzC,MAAM,qBAAqB,sBAAsB;CAGjD,IAAI,YAAY,eAAe,IAAI,SAAS;CAC5C,IAAI,CAAC,WAAW;EACd,4BAAY,IAAI,IAAI;EACpB,eAAe,IAAI,WAAW,SAAS;CACzC;CAGA,MAAM,eAAqC;EAC/B;EACV;CACF;CAGA,UAAU,IAAI,YAAY;CAG1B,IAAI,aAAa;EACf,IAAI,gBAAgB,mBAAmB,IAAI,WAAW;EACtD,IAAI,CAAC,eAAe;GAClB,gCAAgB,IAAI,IAAI;GACxB,mBAAmB,IAAI,aAAa,aAAa;EACnD;EACA,cAAc,IAAI;GAAE,OAAO;GAAW;EAAa,CAAC;CACtD;CAGA,aAAa;EACX,MAAM,iBAAiB,kBAAkB;EACzC,MAAM,qBAAqB,sBAAsB;EAEjD,WAAW,OAAO,YAAY;EAG9B,IAAI,WAAW,SAAS,GACtB,eAAe,OAAO,SAAS;EAIjC,IAAI,aAAa;GACf,MAAM,gBAAgB,mBAAmB,IAAI,WAAW;GACxD,IAAI,eAAe;IACjB,KAAK,MAAM,OAAO,eAChB,IAAI,IAAI,iBAAiB,cAAc;KACrC,cAAc,OAAO,GAAG;KACxB;IACF;IAEF,IAAI,cAAc,SAAS,GACzB,mBAAmB,OAAO,WAAW;GAEzC;EACF;CACF;AACF;;;;;;;AAQA,SAAgB,0BAA0B,aAA2B;CACnE,MAAM,iBAAiB,kBAAkB;CACzC,MAAM,qBAAqB,sBAAsB;CAEjD,MAAM,gBAAgB,mBAAmB,IAAI,WAAW;CACxD,IAAI,CAAC,eAAe;CAEpB,KAAK,MAAM,EAAE,OAAO,kBAAkB,eAAe;EACnD,MAAM,YAAY,eAAe,IAAI,KAAK;EAC1C,IAAI,WAAW;GACb,UAAU,OAAO,YAAY;GAC7B,IAAI,UAAU,SAAS,GACrB,eAAe,OAAO,KAAK;EAE/B;CACF;CAEA,mBAAmB,OAAO,WAAW;AACvC;;;;;;;;AAmCA,SAAgB,sBAAsB,aAAqB;;;;CAIzD,SAAS,UAAuB,WAAmB,MAAgB;EACjE,MAAM,WAAW,IAAI;CACvB;;;;CAKA,SAAS,YACP,WACA,UACa;EACb,OAAO,QAAQ,WAAW,UAAU,WAAW;CACjD;CAEA,OAAO;EACL,OAAO;EACP,SAAS;CACX;AACF;;;;AAKA,IAAa,sBAAsB,CAAC,SAAS,SAAS"}

package/dist/types/index.d.ts

@@ -83,6 +83,12 @@ export type LoopDescriptor = {
     previousItems?: unknown[];
     /** Cached key getter function for performance */
     keyGetter?: (item: unknown, index: number) => unknown;
+    /**
+     * Whether the template subtree contains any <if> chain. Detected once at
+     * scan time so per-row rendering can skip the conditional-resolution walk
+     * entirely for the common conditional-free template.
+     */
+    hasConditionals?: boolean;
 };
 /**
  * Component library types for TypeScript support

package/dist/utils/devWarnings.d.ts

@@ -74,6 +74,10 @@ export declare enum ErrorCode {
     CONDITIONAL_ERROR = 403,
     COMPONENT_LOAD_FAILED = 501,
     COMPONENT_NOT_FOUND = 502,
+    COMPONENT_ALREADY_REGISTERED = 503,
+    INVALID_COMPONENT_PATH = 504,
+    COMPONENT_REGISTRATION_FAILED = 505,
+    INVALID_COMPONENT_NAME = 506,
     MODULE_LOAD_FAILED = 601,
     MODULE_EXECUTION_FAILED = 602
 }
@@ -81,6 +85,23 @@ export declare enum ErrorCode {
  * Get documentation URL for an error code
  */
 export declare function getErrorDocsUrl(code: ErrorCode): string;
+export interface DiagnosticDetails {
+    /** Stable code that links this diagnostic to the error reference. */
+    code: ErrorCode;
+    /** A concise, concrete action the developer can take. */
+    hint?: string;
+}
+export declare class LadrillosError extends Error {
+    readonly code: ErrorCode;
+    readonly docsUrl: string;
+    readonly componentContext: ComponentContext | null;
+    readonly hint?: string;
+    constructor(message: string, code: ErrorCode, options?: {
+        context?: ComponentContext | null;
+        hint?: string;
+        cause?: unknown;
+    });
+}
 /**
  * Custom error handler signature. If registered via `configure({ onError })`,
  * framework errors are forwarded here in addition to being logged.
@@ -95,7 +116,7 @@ export declare function setErrorHandler(handler: LadrillosErrorHandler | null):
  * Log a styled warning message (dev mode only).
  * Includes component context if available.
  */
-export declare function warn(message: string, context?: ComponentContext | null): void;
+export declare function warn(message: string, context?: ComponentContext | null, details?: DiagnosticDetails): void;
 /**
  * Log a styled error message.
  * Errors are always logged, even in production.
@@ -103,7 +124,7 @@ export declare function warn(message: string, context?: ComponentContext | null)
  * If a custom error handler is registered via `configure({ onError })`, it is
  * also invoked so embedders can route framework errors to telemetry.
  */
-export declare function error(message: string, context?: ComponentContext | null, cause?: unknown): void;
+export declare function error(message: string, context?: ComponentContext | null, cause?: unknown, details?: DiagnosticDetails): void;
 /**
  * Log an expression evaluation error with detailed context.
  *
@@ -126,7 +147,7 @@ export declare function scriptError(message: string, originalError: Error, conte
 /**
  * Create a formatted error for throwing with component context.
  */
-export declare function createError(message: string, code: ErrorCode, context?: ComponentContext | null): Error;
+export declare function createError(message: string, code: ErrorCode, context?: ComponentContext | null, hint?: string, cause?: unknown): LadrillosError;
 /**
  * Log a deprecation warning (only once per feature).
  */

package/dist/utils/directives.d.ts

@@ -100,6 +100,16 @@ export declare const SHOW_DIRECTIVE = "$show";
  *   <select $bind="selectedOption">...</select>
  */
 export declare const BIND_DIRECTIVE = "$bind";
+/**
+ * Ensures a $bind element's value is synced to state before a user event
+ * handler for the same event runs.
+ *
+ * Inline handlers (onchange, oninput, $on:) are registered before $bind's
+ * own listener, so without this the handler would read the previous value
+ * from state. setupTwoWayBinding stores the sync function on the element;
+ * handler wrappers call this first so user code always sees fresh state.
+ */
+export declare function syncBindBeforeHandler(event: Event): void;
 /**
  * $ref - Reference Directive
  *

package/dist/utils/jsevents.d.ts

@@ -2,3 +2,8 @@
  * List of inline event handler attributes to transform
  */
 export declare const EVENT_ATTRIBUTES: string[];
+/**
+ * Set form for O(1) membership checks on hot paths (per-attribute checks
+ * while rendering loop rows).
+ */
+export declare const EVENT_ATTRIBUTE_SET: Set<string>;

package/dist/utils/sandbox.d.ts

@@ -1,3 +1,14 @@
+/**
+ * NOT A SECURITY SANDBOX.
+ *
+ * Despite the filename, this module does not sandbox untrusted code. Component
+ * scripts run with full access to the page (window, document, fetch, …) — see
+ * the "Security & Trust Model" section of the README. Component HTML is trusted
+ * code, exactly like a `.js` file you import. The lists below are a *scoping
+ * convenience* (which names are injected as parameters so component code reads
+ * like plain JS), not a trust boundary. Do not rely on them to run untrusted
+ * component files.
+ */
 /**
  * Globals that are explicitly injected into the scope.
  * These are passed as function parameters with their actual values.

package/dist/utils/stateTransform.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Shared reference-rewriting helper for the runtime "state access"
+ * transforms in scriptParser.ts and moduleExecutor.ts.
+ *
+ * Rewrites standalone references to a reactive variable into
+ * `__state__.varName`. A plain regex substitution corrupts ES6
+ * object-literal shorthand, the one place a bare identifier reference
+ * cannot be replaced by a member expression:
+ *
+ *   $emit("msg", { text, name })      // `name` is a reactive variable
+ *     plain rewrite → { text, __state__.name }        // SyntaxError!
+ *     this helper   → { text, name: __state__.name }  // valid + reactive
+ *
+ * Destructuring DECLARATIONS (`const { name } = obj`) are left untouched:
+ * they declare a local binding that shadows the state variable, and
+ * rewriting the pattern would be a SyntaxError. Destructuring ASSIGNMENTS
+ * (`({ name } = obj)`) are object literals in expression position, so the
+ * shorthand expansion yields `({ name: __state__.name } = obj)` — valid,
+ * and it correctly writes into reactive state.
+ *
+ * Callers must mask string literals BEFORE calling this (both transforms
+ * already protect strings with placeholders); otherwise string contents
+ * would be rewritten and could confuse the bracket scan.
+ *
+ * Known limitations (unchanged from the previous inline rewrites):
+ *   - Destructuring with defaults (`const { name = 1 } = o`) and state-named
+ *     function parameters are not scope-analyzed.
+ *   - Shorthand inside a plain statement block that happens to look like a
+ *     slot (e.g. a comma expression `{ name, other; }`) is treated as a
+ *     labeled statement after expansion, which is still valid JS.
+ */
+/**
+ * Full state-access transform shared by scriptParser.ts (component scripts
+ * and re-created event-handler function definitions) and moduleExecutor.ts
+ * (module scripts).
+ *
+ * Character-scans the code so that:
+ *   - "..." and '...' string literals are protected from rewriting
+ *   - template-literal TEXT segments are protected, while the expressions
+ *     inside ${...} are recursively transformed (and the transformed result
+ *     is itself protected, so restored string literals inside it are not
+ *     re-rewritten by the outer pass)
+ *   - comments are copied through untouched
+ *
+ * It then rewrites top-level declarations (`let x = v` → `__state__.x ??= v`,
+ * so attribute overrides already in state win over script defaults) unless
+ * `rewriteDeclarations` is false (the event-handler funcDefs path, which has
+ * no declarations to rewrite), and finally rewrites standalone references
+ * via replaceVarWithStateAccess (object-shorthand aware).
+ */
+export declare function transformCodeToStateAccess(code: string, variables: string[], options?: {
+    rewriteDeclarations?: boolean;
+}): string;
+/**
+ * Replaces standalone references to `varName` with `__state__.varName`,
+ * expanding object-literal shorthand and skipping destructuring declarations.
+ */
+export declare function replaceVarWithStateAccess(code: string, varName: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ladrillosjs",
-  "version": "2.0.0-rc.6",
+  "version": "2.0.0",
   "description": "A lightweight, zero-dependency web component framework for building modular web applications.",
   "type": "module",
   "main": "./dist/index.js",
@@ -9,18 +9,30 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "development": "./dist/index.dev.js",
       "default": "./dist/index.js"
     },
+    "./dev": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.dev.js"
+    },
     "./core": {
       "types": "./dist/core.d.ts",
+      "development": "./dist/core.dev.js",
       "default": "./dist/core.js"
     },
+    "./core/dev": {
+      "types": "./dist/core.d.ts",
+      "default": "./dist/core.dev.js"
+    },
     "./lazy": {
       "types": "./dist/lazy.d.ts",
+      "development": "./dist/lazy.dev.js",
       "default": "./dist/lazy.js"
     },
     "./events": {
       "types": "./dist/events.d.ts",
+      "development": "./dist/events.dev.js",
       "default": "./dist/events.js"
     }
   },
@@ -29,8 +41,7 @@
     "dist/**/*.js.map",
     "dist/**/*.d.ts",
     "LICENSE",
-    "README.md",
-    "CHANGELOG.md"
+    "README.md"
   ],
   "engines": {
     "node": ">=18"
@@ -48,15 +59,17 @@
   ],
   "scripts": {
     "clean": "rimraf dist dist-cdn coverage",
-    "build": "npm run clean && vite build --config vite.npm.config.ts",
-    "build:dev": "tsc -p tsconfig.json",
-    "dev": "tsc -p tsconfig.json -w",
+    "build": "npm run clean && vite build --config vite.npm.config.ts && vite build --config vite.npm.dev.config.ts",
+    "build:dev": "vite build --config vite.npm.dev.config.ts",
+    "dev": "vite build --config vite.npm.dev.config.ts --watch",
     "build:cdn": "vite build --config vite.cdn.config.ts",
     "build:cdn:dev": "vite build --config vite.cdn.dev.config.ts",
     "watch:cdn": "vite build --config vite.cdn.dev.config.ts --watch",
     "serve:cdn": "npx serve dist-cdn -p 3000 --cors",
     "serve:cdn-sample": "npx serve samples/cdn-sample -p 8080 --cors",
+    "serve:repl": "node scripts/cors-server.mjs samples/repl 8080 .",
     "dev:cdn": "concurrently -n build,cdn,sample -c auto \"npm run watch:cdn\" \"npm run serve:cdn\" \"npm run serve:cdn-sample\"",
+    "dev:repl": "concurrently -n build,sample -c auto \"npm run watch:cdn\" \"npm run serve:repl\"",
     "dev:demo": "npm run build && concurrently -n lib,demo -c auto \"npm run dev\" \"npm --prefix samples/ladrillos-demo run dev\"",
     "dev:site": "npm run build && concurrently -n lib,site -c auto \"npm run dev\" \"npm --prefix samples/vite-basic-site run dev\"",
     "dev:vite": "npm run build && concurrently -n lib,vite -c auto \"npm run dev\" \"npm --prefix samples/vite-sample run dev\"",
@@ -85,12 +98,13 @@
   },
   "devDependencies": {
     "@vitest/coverage-v8": "^4.1.4",
-    "concurrently": "^9.2.1",
+    "concurrently": "^10.0.3",
     "happy-dom": "^20.9.0",
     "rimraf": "^6.0.1",
     "terser": "^5.44.1",
-    "typescript": "~5.9.3",
-    "vite": "^7.2.7",
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "typescript": "npm:@typescript/typescript6@^6.0.2",
+    "vite": "^8.1.3",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.1.4"
   }

package/dist/core/reactivity/dependencyTracker.d.ts

@@ -1,120 +0,0 @@
-/**
- * Fine-Grained Dependency Tracking
- *
- * Key optimizations:
- * 1. WeakMap for automatic garbage collection of unused dependencies
- * 2. Set-based dependency storage for O(1) add/remove/has operations
- * 3. Bitwise flags for tracking dependency states
- * 4. Lazy subscription - only track what's actually used
- *
- * This system enables surgical DOM updates - only the exact bindings
- * that depend on a changed value are updated.
- */
-/**
- * A reactive effect that should be re-run when dependencies change.
- */
-export interface ReactiveEffect {
-    /** The function to run when dependencies change */
-    run: () => void;
-    /** Unique identifier for deduplication */
-    id: number;
-    /** Whether the effect is currently active */
-    active: boolean;
-    /** Dependencies this effect subscribes to */
-    deps: Dep[];
-}
-/**
- * A dependency is a Set of effects that depend on a value.
- */
-export type Dep = Set<ReactiveEffect> & {
-    /** Cleanup function for this dep */
-    cleanup?: () => void;
-};
-/**
- * Dependency map for an object - maps property keys to their deps.
- */
-export type DepsMap = Map<string | symbol, Dep>;
-/**
- * Tracks a dependency on a property access.
- * Call this in a Proxy getter to register the current effect as a subscriber.
- *
- * @param target - The reactive object being accessed
- * @param key - The property being accessed
- *
- * @example
- * // In a reactive proxy getter:
- * get(target, key) {
- *   track(target, key);
- *   return Reflect.get(target, key);
- * }
- */
-export declare function track(target: object, key: string | symbol): void;
-/**
- * Triggers effects that depend on a property.
- * Call this in a Proxy setter after the value changes.
- *
- * @param target - The reactive object being modified
- * @param key - The property being modified
- *
- * @example
- * // In a reactive proxy setter:
- * set(target, key, value) {
- *   const result = Reflect.set(target, key, value);
- *   trigger(target, key);
- *   return result;
- * }
- */
-export declare function trigger(target: object, key: string | symbol): void;
-/**
- * Creates and registers a reactive effect.
- * The effect function is called immediately, and dependencies are automatically tracked.
- * When any dependency changes, the effect is re-run.
- *
- * @param fn - The effect function
- * @returns A function to stop the effect
- *
- * @example
- * const stop = effect(() => {
- *   console.log('Count is:', state.count);
- * });
- * // Logs immediately: "Count is: 0"
- *
- * state.count = 5;
- * // Logs again: "Count is: 5"
- *
- * stop(); // Stop watching
- * state.count = 10;
- * // No log - effect is stopped
- */
-export declare function effect(fn: () => void): () => void;
-/**
- * Temporarily pause dependency tracking.
- * Useful when reading values without creating dependencies.
- */
-export declare function pauseTracking(): void;
-/**
- * Resume dependency tracking after pauseTracking().
- */
-export declare function resumeTracking(): void;
-/**
- * Execute a function without tracking dependencies.
- *
- * @param fn - Function to execute
- * @returns The return value of fn
- */
-export declare function untrack<T>(fn: () => T): T;
-/**
- * Gets the dependency map for a target object.
- * Useful for debugging and testing.
- */
-export declare function getDeps(target: object): DepsMap | undefined;
-/**
- * Gets the number of effects depending on a property.
- * Useful for debugging and testing.
- */
-export declare function getDepCount(target: object, key: string | symbol): number;
-/**
- * Clears all dependency tracking.
- * Useful for testing or cleanup.
- */
-export declare function resetTracking(): void;

package/dist/events.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"events.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lazy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"lazy.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/shared-7ZWfGAEo.js

@@ -1,2 +0,0 @@
-import{s as o,g as r}from"./shared-CM0Gy9QI.js";function a(a){void 0!==a.cacheSize&&o(a.cacheSize),void 0!==a.onError&&r(a.onError)}export{a as c};
-//# sourceMappingURL=shared-7ZWfGAEo.js.map

package/dist/shared-7ZWfGAEo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"shared-7ZWfGAEo.js","sources":["../src/core/configure.ts"],"sourcesContent":["/**\r\n * Framework-level configuration API for LadrillosJS.\r\n *\r\n * Exposed to consumers via `import { configure } from 'ladrillosjs'`.\r\n * All options are optional; unspecified keys retain their defaults.\r\n */\r\n\r\nimport { setCacheSize } from \"./component/cache\";\r\nimport {\r\n  setErrorHandler,\r\n  type LadrillosErrorHandler,\r\n} from \"../utils/devWarnings\";\r\n\r\n/**\r\n * Options accepted by `configure()`.\r\n */\r\nexport interface LadrillosConfig {\r\n  /**\r\n   * Maximum number of component source files retained in the LRU cache.\r\n   * Defaults to 25. Must be a positive integer.\r\n   */\r\n  cacheSize?: number;\r\n\r\n  /**\r\n   * Custom error handler. Called in addition to the framework's built-in\r\n   * console logging so embedders can route framework errors to telemetry.\r\n   *\r\n   * @example\r\n   * configure({\r\n   *   onError: (err) => telemetry.capture(err),\r\n   * });\r\n   */\r\n  onError?: LadrillosErrorHandler | null;\r\n}\r\n\r\n/**\r\n * Configure framework-level options.\r\n *\r\n * Safe to call at any time; subsequent calls override prior values. Pass\r\n * `onError: null` to clear a previously registered handler.\r\n */\r\nexport function configure(config: LadrillosConfig): void {\r\n  if (config.cacheSize !== undefined) {\r\n    setCacheSize(config.cacheSize);\r\n  }\r\n  if (config.onError !== undefined) {\r\n    setErrorHandler(config.onError);\r\n  }\r\n}\r\n"],"names":["configure","config","cacheSize","setCacheSize","onError","setErrorHandler"],"mappings":"gDAyCO,SAASA,EAAUC,QACC,IAArBA,EAAOC,WACTC,EAAaF,EAAOC,gBAEC,IAAnBD,EAAOG,SACTC,EAAgBJ,EAAOG,QAE3B"}