snice 3.4.0 → 3.5.0

package/dist/index.iife.js

@@ -1,5 +1,5 @@
 /*!
- * snice v3.3.1
+ * snice v3.4.1
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
@@ -9,23 +9,22 @@ var Snice = (function (exports) {
 
     // Global namespace for Snice framework
     // Ensures all registries and symbols are shared across different JS files/modules
-    // Initialize or get the global Snice namespace
-    function initGlobalNamespace() {
-        if (!globalThis.snice) {
-            globalThis.snice = {
-                controllerRegistry: new Map(),
-                controllerIdCounter: 0,
-                symbols: new Map()
-            };
-        }
-        return globalThis.snice;
+    // Initialize the global Snice namespace on globalThis
+    // This ensures all module instances share the same registry
+    if (!globalThis.snice) {
+        globalThis.snice = {
+            controllerRegistry: new Map(),
+            controllerIdCounter: 0,
+            symbols: new Map()
+        };
     }
-    // Export the global namespace
-    const snice = initGlobalNamespace();
+    // Export direct reference to globalThis.snice
+    const snice = globalThis.snice;
     // Helper function to get or create a global symbol
+    // Uses Symbol.for() to ensure symbols are shared across multiple Snice instances
     function getSymbol(name) {
         if (!snice.symbols.has(name)) {
-            snice.symbols.set(name, Symbol(name));
+            snice.symbols.set(name, Symbol.for(`snice:${name}`));
         }
         return snice.symbols.get(name);
     }
@@ -708,8 +707,9 @@ var Snice = (function (exports) {
      * Provides html`` and css`` tagged template processors with differential rendering
      */
     // Unique symbols for type checking
-    const HTML_RESULT = Symbol('html-result');
-    const CSS_RESULT = Symbol('css-result');
+    // Use Symbol.for() to ensure symbols are shared across multiple Snice instances
+    const HTML_RESULT = Symbol.for('snice:html-result');
+    const CSS_RESULT = Symbol.for('snice:css-result');
     /**
      * Tagged template function for creating HTML templates
      *
@@ -778,10 +778,12 @@ var Snice = (function (exports) {
     /**
      * Nothing - represents no value (different from null/undefined)
      * Used to remove content from templates
+     * Use Symbol.for() to ensure symbols are shared across multiple Snice instances
      */
-    const nothing = Symbol('nothing');
+    const nothing = Symbol.for('snice:nothing');
     // Unique symbol for unsafe HTML
-    const UNSAFE_HTML = Symbol('unsafe-html');
+    // Use Symbol.for() to ensure symbols are shared across multiple Snice instances
+    const UNSAFE_HTML = Symbol.for('snice:unsafe-html');
     /**
      * Mark a string as raw HTML that should not be escaped
      * WARNING: Only use with sanitized content - using user input can lead to XSS!
@@ -1646,8 +1648,9 @@ var Snice = (function (exports) {
             context.addInitializer(function () {
                 const constructor = this.constructor;
                 // Only initialize once per class, not per instance
-                if (constructor[initKey])
+                if (constructor[initKey]) {
                     return;
+                }
                 constructor[initKey] = true;
                 if (!constructor[ON_HANDLERS]) {
                     constructor[ON_HANDLERS] = [];
@@ -1835,7 +1838,10 @@ var Snice = (function (exports) {
                 // If element has shadow root, listen on both shadow root AND host element
                 // to catch events from inside shadow DOM (with correct target) and on host itself
                 const shadowRoot = targetElement.shadowRoot;
-                const handledSymbol = Symbol('snice-event-handled');
+                // Use Symbol.for() with method name to ensure symbols are shared across Snice instances
+                // Method names are unique within a class, so this prevents double-firing of the same handler
+                // while allowing multiple different handlers on the same event
+                const handledSymbol = Symbol.for(`snice:event-handled:${handler.methodName}`);
                 const wrappedMethod = (event) => {
                     // Prevent double-triggering when listening on both shadow root and host
                     if (event[handledSymbol]) {
@@ -1942,7 +1948,12 @@ var Snice = (function (exports) {
      */
     function controller(name) {
         return function (constructor, _context) {
-            snice.controllerRegistry.set(name, constructor);
+            // Access globalThis.snice directly to ensure consistency
+            const registry = globalThis.snice?.controllerRegistry;
+            if (!registry) {
+                throw new Error('Snice global registry not initialized');
+            }
+            registry.set(name, constructor);
             // Mark as controller class for channel decorator detection
             constructor.prototype[IS_CONTROLLER_CLASS] = true;
             return constructor;
@@ -1970,8 +1981,15 @@ var Snice = (function (exports) {
         if (existingController) {
             await detachController(element);
         }
-        const ControllerClass = snice.controllerRegistry.get(controllerName);
+        // Access globalThis.snice directly to ensure consistency
+        const registry = globalThis.snice?.controllerRegistry;
+        if (!registry) {
+            throw new Error('Snice global registry not initialized');
+        }
+        const ControllerClass = registry.get(controllerName);
         if (!ControllerClass) {
+            // Debug: log what's actually in the registry
+            console.error(`Controller "${controllerName}" not found. Available:`, Array.from(registry.keys()));
             throw new Error(`Controller "${controllerName}" not found in registry`);
         }
         // Create controller instance with unique ID and scope
@@ -2341,7 +2359,8 @@ var Snice = (function (exports) {
 
     var _a, _b, _c;
     // Symbol for storing the Set of elements
-    const REGISTERED_ELEMENTS_SET = Symbol('registered-elements-set');
+    // Use Symbol.for() to ensure symbols are shared across multiple Snice instances
+    const REGISTERED_ELEMENTS_SET = Symbol.for('snice:registered-elements-set');
     // Counter for generating unique context IDs
     let contextIdCounter = 0;
     /**