snice 4.35.1 → 4.36.1

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.35.0
+ * snice v4.36.0
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
@@ -74,6 +74,7 @@ const RENDER_TIMERS = getSymbol('render-timers');
 const RENDER_CALLBACKS = getSymbol('render-callbacks');
 const STYLES_METHOD = getSymbol('styles-method');
 const STYLES_APPLIED = getSymbol('styles-applied');
+const PARENT_STYLES_METHODS = getSymbol('parent-styles-methods');
 // Navigation context symbols
 const CONTEXT_HANDLER = getSymbol('context-handler');
 const NAVIGATION_CONTEXT_INSTANCE = getSymbol('navigation-context-instance');
@@ -484,12 +485,13 @@ function observe(observeTarget, selectorOrOptions, options) {
     }
     return function (target, context) {
         const propertyKey = context.name;
-        const initKey = `__observe_init_${propertyKey}`;
         context.addInitializer(function () {
             const constructor = this.constructor;
-            if (constructor[initKey])
+            if (!constructor.__observeMethods)
+                constructor.__observeMethods = new Set();
+            if (constructor.__observeMethods.has(target))
                 return;
-            constructor[initKey] = true;
+            constructor.__observeMethods.add(target);
             if (!constructor[OBSERVERS]) {
                 constructor[OBSERVERS] = [];
             }
@@ -900,12 +902,13 @@ function request(requestName, options) {
 function respond(requestName, options) {
     return function (target, context) {
         const propertyKey = context.name;
-        const initKey = `__respond_init_${requestName}_${propertyKey}`;
         context.addInitializer(function () {
             const constructor = this.constructor;
-            if (constructor[initKey])
+            if (!constructor.__respondMethods)
+                constructor.__respondMethods = new Set();
+            if (constructor.__respondMethods.has(target))
                 return;
-            constructor[initKey] = true;
+            constructor.__respondMethods.add(target);
             if (!constructor[CHANNEL_HANDLERS]) {
                 constructor[CHANNEL_HANDLERS] = [];
             }
@@ -2248,14 +2251,14 @@ function on(eventName, selectorOrOptions, options) {
     }
     return function (originalMethod, context) {
         const methodName = context.name;
-        const initKey = `__on_init_${methodName}_${selector || ''}_${JSON.stringify(eventName)}`;
         context.addInitializer(function () {
             const constructor = this.constructor;
-            // Only initialize once per class, not per instance
-            if (constructor[initKey]) {
+            // Dedup by method reference — allows child to register same-named methods
+            if (!constructor.__onMethods)
+                constructor.__onMethods = new Set();
+            if (constructor.__onMethods.has(originalMethod))
                 return;
-            }
-            constructor[initKey] = true;
+            constructor.__onMethods.add(originalMethod);
             if (!constructor[ON_HANDLERS]) {
                 constructor[ON_HANDLERS] = [];
             }
@@ -2749,12 +2752,13 @@ const CONTEXT_HANDLERS = getSymbol('context-handlers');
 function context$1(options = {}) {
     return function (originalMethod, context) {
         const methodName = context.name;
-        const initKey = `__context_init_${methodName}`;
         context.addInitializer(function () {
             const constructor = this.constructor;
-            if (constructor[initKey])
+            if (!constructor.__contextMethods)
+                constructor.__contextMethods = new Set();
+            if (constructor.__contextMethods.has(originalMethod))
                 return;
-            constructor[initKey] = true;
+            constructor.__contextMethods.add(originalMethod);
             if (!constructor[CONTEXT_HANDLERS]) {
                 constructor[CONTEXT_HANDLERS] = [];
             }
@@ -3078,7 +3082,13 @@ function render(options = {}) {
 function styles() {
     return function (originalMethod, context) {
         context.addInitializer(function () {
-            // Store the styles method
+            // Collect parent styles methods before overwriting with child's
+            if (this[STYLES_METHOD] && !this[PARENT_STYLES_METHODS]) {
+                this[PARENT_STYLES_METHODS] = [this[STYLES_METHOD]];
+            }
+            else if (this[STYLES_METHOD] && this[PARENT_STYLES_METHODS]) {
+                this[PARENT_STYLES_METHODS].push(this[STYLES_METHOD]);
+            }
             this[STYLES_METHOD] = originalMethod;
         });
         return originalMethod;
@@ -3097,11 +3107,22 @@ function applyStyles(element) {
         return;
     element[STYLES_APPLIED] = true;
     try {
+        // Collect all CSS results: parent styles first, then child styles
+        const allResults = [];
+        const parentMethods = element[PARENT_STYLES_METHODS];
+        if (parentMethods) {
+            for (const method of parentMethods) {
+                const r = method.call(element);
+                if (isCSSResult(r))
+                    allResults.push(r);
+            }
+        }
         const result = stylesMethod.call(element);
         if (!isCSSResult(result)) {
             console.warn('Styles method must return css`` template result');
             return;
         }
+        allResults.push(result);
         // Ensure shadow root exists
         if (!element.shadowRoot) {
             element.attachShadow({ mode: 'open' });
@@ -3109,14 +3130,16 @@ function applyStyles(element) {
         if (!element.shadowRoot)
             return;
         // Prefer constructable stylesheets
-        if (result.styleSheet && 'adoptedStyleSheets' in element.shadowRoot) {
-            element.shadowRoot.adoptedStyleSheets = [result.styleSheet];
+        if (allResults.every(r => !!r.styleSheet) && 'adoptedStyleSheets' in element.shadowRoot) {
+            element.shadowRoot.adoptedStyleSheets = allResults.map(r => r.styleSheet);
             return;
         }
-        // Fallback to <style> tag
-        const style = document.createElement('style');
-        style.textContent = result.cssText;
-        element.shadowRoot.appendChild(style);
+        // Fallback — one <style> tag per stylesheet, preserving cascade order
+        for (const r of allResults) {
+            const style = document.createElement('style');
+            style.textContent = r.cssText;
+            element.shadowRoot.appendChild(style);
+        }
     }
     catch (error) {
         console.error('Error applying styles:', error);
@@ -3389,7 +3412,45 @@ function applyElementFunctionality(constructor) {
         }
     };
 }
+/**
+ * Walk the prototype chain and merge parent element metadata into the child.
+ * Called once at class definition time — zero per-instance cost.
+ * Skips plain HTMLElement (no metadata to merge).
+ *
+ * Only merges PROPERTIES (stored via context.metadata at decoration time)
+ * and formAssociated. Other handler registrations (@watch, @on, @ready, etc.)
+ * inherit automatically via TC39 addInitializer — parent initializers run
+ * during child instance construction.
+ */
+function mergeParentMetadata(constructor) {
+    let parent = Object.getPrototypeOf(constructor);
+    // Collect ancestors bottom-up, then merge top-down so the deepest parent goes first
+    const ancestors = [];
+    while (parent && parent !== HTMLElement && parent !== Function.prototype) {
+        ancestors.push(parent);
+        parent = Object.getPrototypeOf(parent);
+    }
+    ancestors.reverse();
+    for (const ancestor of ancestors) {
+        // Properties (Map) — parent first, child overrides
+        if (ancestor[PROPERTIES]) {
+            if (!constructor[PROPERTIES])
+                constructor[PROPERTIES] = new Map();
+            for (const [key, value] of ancestor[PROPERTIES]) {
+                if (!constructor[PROPERTIES].has(key)) {
+                    constructor[PROPERTIES].set(key, value);
+                }
+            }
+        }
+        // formAssociated — inherit if parent is form-associated
+        if (ancestor.formAssociated && !constructor.formAssociated) {
+            constructor.formAssociated = true;
+        }
+    }
+}
 function defineElement(tagName, constructor, context, options) {
+    // Merge metadata from parent @element classes (inheritance support)
+    mergeParentMetadata(constructor);
     if (context.metadata && context.metadata[PROPERTIES]) {
         if (!constructor[PROPERTIES])
             constructor[PROPERTIES] = new Map();
@@ -3443,8 +3504,12 @@ function property(options) {
             }
             // Always store property options on constructor for runtime access
             constructor[PROPERTIES].set(propertyKey, finalOptions);
-            // Set up the property descriptor on first access
-            if (!Object.hasOwn(this.constructor.prototype, propertyKey)) {
+            // Set up the property descriptor — re-define if a subclass overrides
+            // the property with different options (different closure captures)
+            const definerKey = `__propDef_${propertyKey}`;
+            const existingDefiner = this.constructor.prototype[definerKey];
+            if (!existingDefiner || existingDefiner !== options) {
+                this.constructor.prototype[definerKey] = options;
                 const descriptor = {
                     get() {
                         // attribute: false — use internal storage only, no DOM sync
@@ -3580,12 +3645,15 @@ function queryAll(selector, options = {}) {
 function watch(...propertyNames) {
     return function (target, context) {
         const methodName = context.name;
-        const initKey = `__watch_init_${methodName}`;
         context.addInitializer(function () {
             const constructor = this.constructor;
-            if (constructor[initKey])
+            // Dedup by method reference — allows child classes to register
+            // their own method with the same name as a parent's
+            if (!constructor.__watchMethods)
+                constructor.__watchMethods = new Set();
+            if (constructor.__watchMethods.has(target))
                 return;
-            constructor[initKey] = true;
+            constructor.__watchMethods.add(target);
             if (!constructor[PROPERTY_WATCHERS]) {
                 constructor[PROPERTY_WATCHERS] = new Map();
             }
@@ -3656,12 +3724,14 @@ function context() {
 }
 function registerHandler(symbol, prefix, target, context, extra) {
     const methodName = context.name;
-    const initKey = `__${prefix}_init_${methodName}`;
     context.addInitializer(function () {
         const constructor = this.constructor;
-        if (constructor[initKey])
+        const setKey = `__${prefix}Methods`;
+        if (!constructor[setKey])
+            constructor[setKey] = new Set();
+        if (constructor[setKey].has(target))
             return;
-        constructor[initKey] = true;
+        constructor[setKey].add(target);
         if (!constructor[symbol])
             constructor[symbol] = [];
         constructor[symbol].push({ methodName, method: target, ...extra });