snice 2.2.2 → 2.2.3

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 /*!
- * snice v2.2.1
+ * snice v2.2.2
  * Imperative TypeScript framework for building vanilla web components with decorators, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
@@ -701,6 +701,7 @@ function cleanupObservers(instance) {
     }
 }
 
+// @request decorator transforms methods to return Promise<T>
 /**
  * Decorator for making requests from elements or controllers.
  * Uses async generator pattern for bidirectional communication.
@@ -1237,6 +1238,133 @@ function cleanupNativeElementControllers() {
     }
 }
 
+/**
+ * SimpleArray type for arrays that can be safely reflected to attributes
+ * Supports arrays of: string, number, boolean
+ * Uses full-width comma (，) as separator to avoid conflicts
+ * Strings cannot contain the full-width comma character
+ */
+class SimpleArray {
+    static { this.SEPARATOR = '，'; } // U+FF0C Full-width comma
+    /**
+     * Serialize array to string for attribute storage
+     */
+    static serialize(arr) {
+        if (!Array.isArray(arr))
+            return '';
+        return arr.map(item => {
+            if (typeof item === 'string') {
+                // Validate string doesn't contain our separator
+                if (item.includes(SimpleArray.SEPARATOR)) {
+                    throw new Error(`SimpleArray strings cannot contain the character "${SimpleArray.SEPARATOR}" (U+FF0C)`);
+                }
+                return item;
+            }
+            else if (typeof item === 'number' || typeof item === 'boolean') {
+                return String(item);
+            }
+            else {
+                throw new Error(`SimpleArray only supports string, number, and boolean types. Got: ${typeof item}`);
+            }
+        }).join(SimpleArray.SEPARATOR);
+    }
+    /**
+     * Parse string from attribute back to array
+     */
+    static parse(str) {
+        if (str === null || str === undefined)
+            return [];
+        // Empty string should not be parsed as containing an empty string
+        // since empty arrays don't get reflected (handled by the reflection logic)
+        if (str === '')
+            return [];
+        return str.split(SimpleArray.SEPARATOR).map(item => {
+            // Try to parse as number
+            if (/^-?\d+\.?\d*$/.test(item)) {
+                const num = Number(item);
+                if (!isNaN(num))
+                    return num;
+            }
+            // Parse as boolean
+            if (item === 'true')
+                return true;
+            if (item === 'false')
+                return false;
+            // Default to string
+            return item;
+        });
+    }
+}
+
+/**
+ * Detects the type constructor from an initial value
+ * @param initialValue - The default value assigned to a property field (e.g., `name = "default"` -> "default")
+ * @returns The constructor function (String, Number, Boolean, etc.) or undefined if type can't be determined
+ */
+function detectType(initialValue) {
+    if (initialValue === null || initialValue === undefined) {
+        return undefined;
+    }
+    if (typeof initialValue === 'string') {
+        return String;
+    }
+    if (typeof initialValue === 'number') {
+        return Number;
+    }
+    if (typeof initialValue === 'boolean') {
+        return Boolean;
+    }
+    if (initialValue instanceof Date) {
+        return Date;
+    }
+    if (typeof initialValue === 'bigint') {
+        return BigInt;
+    }
+    if (Array.isArray(initialValue)) {
+        return Array;
+    }
+    return undefined;
+}
+/**
+ * Parses an attribute value based on the property type
+ * @param attributeValue - The raw string value from the HTML attribute (e.g., "123", "true", "hello")
+ * @param propertyOptions - The options from @property decorator (contains explicit type, attribute name, etc.)
+ * @param currentValue - The current stored value of the property (used for type inference when no explicit type)
+ * @param initialValue - The default value assigned to the property field (used for type detection as fallback)
+ * @returns The parsed value in the correct JavaScript type
+ */
+function parseAttributeValue(attributeValue, propertyOptions, currentValue, initialValue) {
+    // Use explicit type or detect from initial value
+    const typeToUse = propertyOptions.type || detectType(initialValue);
+    switch (typeToUse) {
+        case Boolean:
+            return attributeValue !== null && attributeValue !== 'false';
+        case Number:
+            return attributeValue !== null ? Number(attributeValue) : null;
+        case String:
+            return attributeValue;
+        case Date:
+            return attributeValue ? new Date(attributeValue) : null;
+        case BigInt:
+            if (attributeValue && attributeValue.endsWith('n')) {
+                return BigInt(attributeValue.slice(0, -1));
+            }
+            else {
+                return attributeValue ? BigInt(attributeValue) : null;
+            }
+        case SimpleArray:
+            return SimpleArray.parse(attributeValue);
+        default:
+            // If no type specified and can't detect, try to infer from current value type
+            if (typeof currentValue === 'number' && attributeValue !== null) {
+                return Number(attributeValue);
+            }
+            else {
+                return attributeValue;
+            }
+    }
+}
+
 /**
  * Applies core element functionality to a constructor
  * This is shared between @element and @page decorators
@@ -1318,42 +1446,17 @@ function applyElementFunctionality(constructor) {
             const properties = constructor[PROPERTIES];
             if (properties) {
                 for (const [propName, propOptions] of properties) {
-                    // If attribute exists, it always wins
-                    if (this.hasAttribute(propName)) {
+                    // Check for attribute using proper attribute name
+                    const attributeName = typeof propOptions.attribute === 'string' ? propOptions.attribute : propName.toLowerCase();
+                    if (this.hasAttribute(attributeName)) {
                         // Attribute exists, parse and set the property value
-                        const attrValue = this.getAttribute(propName);
+                        const attrValue = this.getAttribute(attributeName);
                         // Mark as explicitly set since it came from an attribute
                         if (!this[EXPLICITLY_SET_PROPERTIES]) {
                             this[EXPLICITLY_SET_PROPERTIES] = new Set();
                         }
                         this[EXPLICITLY_SET_PROPERTIES].add(propName);
-                        switch (propOptions.type) {
-                            case Boolean:
-                                this[propName] = attrValue !== null && attrValue !== 'false';
-                                break;
-                            case Number:
-                                this[propName] = Number(attrValue);
-                                break;
-                            case String:
-                                this[propName] = attrValue;
-                                break;
-                            case Date:
-                                this[propName] = attrValue ? new Date(attrValue) : null;
-                                break;
-                            case BigInt:
-                                if (attrValue && attrValue.endsWith('n')) {
-                                    this[propName] = BigInt(attrValue.slice(0, -1));
-                                }
-                                else {
-                                    this[propName] = attrValue ? BigInt(attrValue) : null;
-                                }
-                                break;
-                            case SimpleArray:
-                                this[propName] = SimpleArray.parse(attrValue);
-                                break;
-                            default:
-                                this[propName] = attrValue;
-                        }
+                        this[propName] = parseAttributeValue(attrValue, propOptions);
                     }
                 }
             }
@@ -1528,40 +1631,11 @@ function applyElementFunctionality(constructor) {
             if (properties) {
                 for (const [propName, propOptions] of properties) {
                     const attributeName = typeof propOptions.attribute === 'string' ? propOptions.attribute : propName.toLowerCase();
-                    if (attributeName === name) {
+                    if (attributeName.toLowerCase() === name.toLowerCase()) {
                         // Check if the current property value already matches to avoid feedback loops
                         const currentValue = this[PROPERTY_VALUES]?.[propName];
                         // Parse the new value based on type
-                        let parsedValue;
-                        if (propOptions.type === Boolean) {
-                            parsedValue = newValue !== null && newValue !== 'false';
-                        }
-                        else if (propOptions.type === Number) {
-                            parsedValue = Number(newValue);
-                        }
-                        else if (propOptions.type === Date) {
-                            parsedValue = newValue ? new Date(newValue) : null;
-                        }
-                        else if (propOptions.type === BigInt) {
-                            if (newValue && newValue.endsWith('n')) {
-                                parsedValue = BigInt(newValue.slice(0, -1));
-                            }
-                            else {
-                                parsedValue = newValue ? BigInt(newValue) : null;
-                            }
-                        }
-                        else if (propOptions.type === SimpleArray) {
-                            parsedValue = SimpleArray.parse(newValue);
-                        }
-                        else {
-                            // If no type specified, try to infer from current value type
-                            if (typeof currentValue === 'number' && newValue !== null) {
-                                parsedValue = Number(newValue);
-                            }
-                            else {
-                                parsedValue = newValue;
-                            }
-                        }
+                        const parsedValue = parseAttributeValue(newValue, propOptions, currentValue, undefined);
                         // Only update if the value actually changed and avoid infinite loops
                         if (currentValue !== parsedValue) {
                             // Mark as explicitly set since it came from an attribute change
@@ -1660,11 +1734,18 @@ function property(options) {
         if (options?.reflect && options?.type === Object) {
             console.warn(`⚠️  Property '${propertyKey}' uses reflect:true with Object type.`);
         }
-        context.addInitializer(function () {
-            // No longer need warnings here since they're at decoration time
-        });
         // Return a field initializer function for new decorators
         return function (initialValue) {
+            // Detect type from initial value if not explicitly provided
+            const finalOptions = { ...options };
+            if (!finalOptions.type && initialValue !== undefined) {
+                finalOptions.type = detectType(initialValue);
+                // Update the metadata with the detected type
+                const constructor = this.constructor;
+                if (constructor[PROPERTIES]) {
+                    constructor[PROPERTIES].set(propertyKey, finalOptions);
+                }
+            }
             // Set up the property descriptor on first access
             if (!Object.hasOwnProperty.call(this.constructor.prototype, propertyKey)) {
                 const descriptor = {
@@ -1672,7 +1753,18 @@ function property(options) {
                         if (!this[PROPERTY_VALUES]) {
                             this[PROPERTY_VALUES] = {};
                         }
-                        return this[PROPERTY_VALUES][propertyKey];
+                        // If we have a stored value, return it
+                        if (this[PROPERTY_VALUES][propertyKey] !== undefined) {
+                            return this[PROPERTY_VALUES][propertyKey];
+                        }
+                        // Otherwise check attribute and parse it, or return initial value
+                        const attributeName = typeof finalOptions?.attribute === 'string' ? finalOptions?.attribute : propertyKey.toLowerCase();
+                        const attrValue = this.getAttribute?.(attributeName);
+                        // If attribute exists or we have a type that needs special handling for null (like Boolean)
+                        if (attrValue !== null || finalOptions?.type === Boolean) {
+                            return parseAttributeValue(attrValue, finalOptions || {}, undefined, initialValue);
+                        }
+                        return initialValue;
                     },
                     set(newValue) {
                         if (!this[PROPERTY_VALUES]) {
@@ -1689,10 +1781,10 @@ function property(options) {
                             this[EXPLICITLY_SET_PROPERTIES].add(propertyKey);
                         }
                         this[PROPERTY_VALUES][propertyKey] = newValue;
-                        if (options?.reflect && this.setAttribute && this[PROPERTIES_INITIALIZED] && this[EXPLICITLY_SET_PROPERTIES].has(propertyKey)) {
-                            const attributeName = typeof options.attribute === 'string' ? options.attribute : propertyKey.toLowerCase();
+                        if (finalOptions?.reflect && this.setAttribute && this[PROPERTIES_INITIALIZED] && this[EXPLICITLY_SET_PROPERTIES].has(propertyKey)) {
+                            const attributeName = typeof finalOptions.attribute === 'string' ? finalOptions.attribute : propertyKey.toLowerCase();
                             if (newValue === null || newValue === undefined || newValue === false ||
-                                (options?.type === SimpleArray && Array.isArray(newValue) && newValue.length === 0)) {
+                                (finalOptions?.type === SimpleArray && Array.isArray(newValue) && newValue.length === 0)) {
                                 this.removeAttribute(attributeName);
                             }
                             else {
@@ -1703,7 +1795,7 @@ function property(options) {
                                 else if (typeof newValue === 'bigint') {
                                     attributeValue = newValue.toString() + 'n';
                                 }
-                                else if (options?.type === SimpleArray && Array.isArray(newValue)) {
+                                else if (finalOptions?.type === SimpleArray && Array.isArray(newValue)) {
                                     attributeValue = SimpleArray.serialize(newValue);
                                 }
                                 else {
@@ -1831,63 +1923,6 @@ function queryAll(selector, options = {}) {
         };
     };
 }
-/**
- * SimpleArray type for arrays that can be safely reflected to attributes
- * Supports arrays of: string, number, boolean
- * Uses full-width comma (，) as separator to avoid conflicts
- * Strings cannot contain the full-width comma character
- */
-class SimpleArray {
-    static { this.SEPARATOR = '，'; } // U+FF0C Full-width comma
-    /**
-     * Serialize array to string for attribute storage
-     */
-    static serialize(arr) {
-        if (!Array.isArray(arr))
-            return '';
-        return arr.map(item => {
-            if (typeof item === 'string') {
-                // Validate string doesn't contain our separator
-                if (item.includes(SimpleArray.SEPARATOR)) {
-                    throw new Error(`SimpleArray strings cannot contain the character "${SimpleArray.SEPARATOR}" (U+FF0C)`);
-                }
-                return item;
-            }
-            else if (typeof item === 'number' || typeof item === 'boolean') {
-                return String(item);
-            }
-            else {
-                throw new Error(`SimpleArray only supports string, number, and boolean types. Got: ${typeof item}`);
-            }
-        }).join(SimpleArray.SEPARATOR);
-    }
-    /**
-     * Parse string from attribute back to array
-     */
-    static parse(str) {
-        if (str === null || str === undefined)
-            return [];
-        // Empty string should not be parsed as containing an empty string
-        // since empty arrays don't get reflected (handled by the reflection logic)
-        if (str === '')
-            return [];
-        return str.split(SimpleArray.SEPARATOR).map(item => {
-            // Try to parse as number
-            if (/^-?\d+\.?\d*$/.test(item)) {
-                const num = Number(item);
-                if (!isNaN(num))
-                    return num;
-            }
-            // Parse as boolean
-            if (item === 'true')
-                return true;
-            if (item === 'false')
-                return false;
-            // Default to string
-            return item;
-        });
-    }
-}
 function watch(...propertyNames) {
     return function (target, context) {
         const methodName = context.name;
@@ -3190,8 +3225,7 @@ function Router(options) {
         page,
         initialize,
         navigate,
-        register,
-        context,
+        register
     };
 }