snice 2.2.2 → 2.2.3

package/dist/index.iife.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.
@@ -704,6 +704,7 @@ var Snice = (function (exports) {
         }
     }
 
+    // @request decorator transforms methods to return Promise<T>
     /**
      * Decorator for making requests from elements or controllers.
      * Uses async generator pattern for bidirectional communication.
@@ -1240,6 +1241,133 @@ var Snice = (function (exports) {
         }
     }
 
+    /**
+     * 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
@@ -1321,42 +1449,17 @@ var Snice = (function (exports) {
                 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);
                         }
                     }
                 }
@@ -1531,40 +1634,11 @@ var Snice = (function (exports) {
                 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
@@ -1663,11 +1737,18 @@ var Snice = (function (exports) {
             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 = {
@@ -1675,7 +1756,18 @@ var Snice = (function (exports) {
                             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]) {
@@ -1692,10 +1784,10 @@ var Snice = (function (exports) {
                                 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 {
@@ -1706,7 +1798,7 @@ var Snice = (function (exports) {
                                     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 {
@@ -1834,63 +1926,6 @@ var Snice = (function (exports) {
             };
         };
     }
-    /**
-     * 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;
@@ -3193,8 +3228,7 @@ var Snice = (function (exports) {
             page,
             initialize,
             navigate,
-            register,
-            context,
+            register
         };
     }