@wcstack/state 1.3.19 → 1.4.0

package/dist/index.esm.js

@@ -1121,6 +1121,7 @@ function parseFilterArgs(argsText) {
     const args = [];
     let current = '';
     let inQuote = null;
+    let hasQuote = false;
     for (let i = 0; i < argsText.length; i++) {
         const char = argsText[i];
         if (inQuote) {
@@ -1133,17 +1134,20 @@ function parseFilterArgs(argsText) {
         }
         else if (char === '"' || char === "'") {
             inQuote = char;
+            hasQuote = true;
         }
         else if (char === ',') {
             args.push(current.trim());
             current = '';
+            hasQuote = false;
         }
         else {
             current += char;
         }
     }
-    if (current.trim()) {
-        args.push(current.trim());
+    const last = current.trim();
+    if (last || hasQuote) {
+        args.push(last);
     }
     return args;
 }
@@ -1670,10 +1674,9 @@ function isPossibleTwoWay(node, propName) {
         if (typeof customClass === "undefined") {
             raiseError(`Custom element <${customTagName}> is not defined. Cannot determine if property "${propName}" is suitable for two-way binding.`);
         }
-        const reactivityInfo = customClass.wcsReactivity;
-        if (reactivityInfo) {
-            if (reactivityInfo.properties?.includes(propName)
-                || (reactivityInfo.propertyMap?.[propName] ?? null) !== null) {
+        const bindable = customClass.wcBindable;
+        if (bindable?.protocol === "wc-bindable" && bindable?.version === 1) {
+            if (bindable.properties.some(p => p.name === propName)) {
                 return true;
             }
         }
@@ -1683,28 +1686,27 @@ function isPossibleTwoWay(node, propName) {
 
 const handlerByHandlerKey$2 = new Map();
 const bindingSetByHandlerKey$2 = new Map();
-function getHandlerKey$2(binding, eventName) {
+const DEFAULT_GETTER = (e) => e.detail;
+function getHandlerKey$2(binding, eventName, hasGetter) {
     const filterKey = binding.inFilters.map(f => f.filterName + '(' + f.args.join(',') + ')').join('|');
-    return `${binding.stateName}::${binding.propName}::${binding.statePathName}::${eventName}::${filterKey}`;
+    return `${binding.stateName}::${binding.propName}::${binding.statePathName}::${eventName}::${filterKey}::${hasGetter ? 'g' : 'n'}`;
 }
 function getEventName$2(binding) {
     const tagName = binding.node.tagName.toLowerCase();
     // 1.default event name
     let eventName = (tagName === 'select') ? 'change' : 'input';
-    // 2.protocol 
+    // 2.wcBindable protocol
     const customTagName = getCustomElement(binding.node);
     if (customTagName !== null) {
         const customClass = customElements.get(customTagName);
         if (typeof customClass === "undefined") {
             raiseError(`Custom element <${customTagName}> is not defined. Cannot determine event name for two-way binding.`);
         }
-        const reactivityInfo = customClass.wcsReactivity;
-        if (reactivityInfo) {
-            if (reactivityInfo.properties?.includes(binding.propName)) {
-                eventName = reactivityInfo.defaultEvent;
-            }
-            if (reactivityInfo.propertyMap?.[binding.propName]) {
-                eventName = reactivityInfo.propertyMap[binding.propName];
+        const bindable = customClass.wcBindable;
+        if (bindable?.protocol === "wc-bindable" && bindable?.version === 1) {
+            const propDesc = bindable.properties.find(p => p.name === binding.propName);
+            if (propDesc) {
+                eventName = propDesc.event;
             }
         }
     }
@@ -1716,17 +1718,39 @@ function getEventName$2(binding) {
     }
     return eventName;
 }
-const twowayEventHandlerFunction = (stateName, propName, statePathName, inFilters) => (event) => {
+function getValueGetter(binding) {
+    const customTagName = getCustomElement(binding.node);
+    if (customTagName !== null) {
+        const customClass = customElements.get(customTagName);
+        if (customClass) {
+            const bindable = customClass.wcBindable;
+            if (bindable?.protocol === "wc-bindable" && bindable?.version === 1) {
+                const propDesc = bindable.properties.find(p => p.name === binding.propName);
+                if (propDesc) {
+                    return propDesc.getter ?? DEFAULT_GETTER;
+                }
+            }
+        }
+    }
+    return null;
+}
+const twowayEventHandlerFunction = (stateName, propName, statePathName, inFilters, valueGetter) => (event) => {
     const node = event.target;
     if (node === null) {
         console.warn(`[@wcstack/state] event.target is null.`);
         return;
     }
-    if (!(propName in node)) {
-        console.warn(`[@wcstack/state] Property "${propName}" does not exist on target element.`);
-        return;
+    let newValue;
+    if (valueGetter !== null) {
+        newValue = valueGetter(event);
+    }
+    else {
+        if (!(propName in node)) {
+            console.warn(`[@wcstack/state] Property "${propName}" does not exist on target element.`);
+            return;
+        }
+        newValue = node[propName];
     }
-    const newValue = node[propName];
     let filteredNewValue = newValue;
     for (const filter of inFilters) {
         filteredNewValue = filter.filterFn(filteredNewValue);
@@ -1756,10 +1780,11 @@ function attachTwowayEventHandler(binding) {
     }
     if (isPossibleTwoWay(binding.node, binding.propName) && binding.propModifiers.indexOf('ro') === -1) {
         const eventName = getEventName$2(binding);
-        const key = getHandlerKey$2(binding, eventName);
+        const valueGetter = getValueGetter(binding);
+        const key = getHandlerKey$2(binding, eventName, valueGetter !== null);
         let twowayEventHandler = handlerByHandlerKey$2.get(key);
         if (typeof twowayEventHandler === "undefined") {
-            twowayEventHandler = twowayEventHandlerFunction(binding.stateName, binding.propName, binding.statePathName, binding.inFilters);
+            twowayEventHandler = twowayEventHandlerFunction(binding.stateName, binding.propName, binding.statePathName, binding.inFilters, valueGetter);
             handlerByHandlerKey$2.set(key, twowayEventHandler);
         }
         binding.node.addEventListener(eventName, twowayEventHandler);
@@ -2855,7 +2880,18 @@ function applyChangeToProperty(binding, _context, newValue) {
     if (propSegments.length === 1) {
         const firstSegment = propSegments[0];
         if (element[firstSegment] !== newValue) {
-            element[firstSegment] = newValue;
+            try {
+                element[firstSegment] = newValue;
+            }
+            catch (error) {
+                if (config.debug) {
+                    console.warn(`Failed to set property '${firstSegment}' on element.`, {
+                        element,
+                        newValue,
+                        error
+                    });
+                }
+            }
         }
         return;
     }
@@ -2881,7 +2917,20 @@ function applyChangeToProperty(binding, _context, newValue) {
             }
             return;
         }
-        subObject[propSegments[propSegments.length - 1]] = newValue;
+        try {
+            subObject[propSegments[propSegments.length - 1]] = newValue;
+        }
+        catch (error) {
+            if (config.debug) {
+                console.warn(`Failed to set property on sub-object.`, {
+                    element,
+                    propSegments,
+                    oldValue,
+                    newValue,
+                    error
+                });
+            }
+        }
     }
 }
 
@@ -5532,7 +5581,7 @@ class State extends HTMLElement {
             else {
                 const script = this.querySelector('script[type="module"]');
                 if (script) {
-                    this._state = await loadFromInnerScript(script, `state#${this._name}`);
+                    this._state = await loadFromInnerScript(script, `${this._name}`);
                 }
                 else {
                     const timerId = setTimeout(() => {