@wcstack/state 1.9.1 → 1.10.3

package/dist/auto.js

@@ -1,3 +1,3 @@
-import { bootstrapState } from "./index.esm.js";
-
-await bootstrapState();
+import { bootstrapState } from "./index.esm.js";
+
+await bootstrapState();

package/dist/auto.min.js

@@ -1,3 +1,3 @@
-import { bootstrapState } from "./index.esm.min.js";
-
-await bootstrapState();
+import { bootstrapState } from "./index.esm.min.js";
+
+await bootstrapState();

package/dist/index.esm.js

@@ -59,7 +59,7 @@ function setConfig(partialConfig) {
     }
 }
 
-var version$1 = "1.9.1";
+var version$1 = "1.10.3";
 var pkg = {
 	version: version$1};
 
@@ -2080,7 +2080,7 @@ function applyChangeToCommand(binding, _context, newValue) {
     if (bindable === null) {
         raiseError(`command binding requires a wc-bindable custom element. <${element.tagName.toLowerCase()}> is not wc-bindable.`);
     }
-    if (!Array.isArray(bindable.commands) || !bindable.commands.includes(methodName)) {
+    if (!Array.isArray(bindable.commands) || !bindable.commands.some((c) => c.name === methodName)) {
         raiseError(`Command "${methodName}" is not declared in wcBindable.commands of <${element.tagName.toLowerCase()}>.`);
     }
     // ここまで来たら旧解除して新 subscribe に切り替える。
@@ -2975,6 +2975,65 @@ function applyChangeToIf(bindingInfo, context, rawNewValue) {
     }
 }
 
+/**
+ * 要素 `element` の `propName` プロパティ書き込みに対して、
+ * wc-bindable inputs の `attribute` ミラー先属性名を返す。
+ *
+ * - wc-bindable でないネイティブ要素や、inputs 未宣言、attribute フィールド無しは null
+ * - inputs に同名宣言があっても `attribute` を持たないものはミラー対象外
+ *
+ * 戻り値の string がそのまま `setAttribute(name, value)` の name となる。
+ */
+function getInputAttributeMirror(element, propName) {
+    const customTagName = getCustomElement(element);
+    if (customTagName === null) {
+        return null;
+    }
+    const customClass = customElements.get(customTagName);
+    if (typeof customClass === "undefined") {
+        return null;
+    }
+    const bindable = customClass.wcBindable;
+    if (bindable?.protocol !== "wc-bindable" || bindable?.version !== 1) {
+        return null;
+    }
+    const inputs = bindable.inputs;
+    if (!Array.isArray(inputs)) {
+        return null;
+    }
+    for (const input of inputs) {
+        if (input.name === propName && typeof input.attribute === "string" && input.attribute.length > 0) {
+            return input.attribute;
+        }
+    }
+    return null;
+}
+/**
+ * mirror 属性値の表現を決める。
+ * - null / undefined → 属性削除
+ * - object / array → JSON.stringify (失敗時は String(value))
+ * - その他 (string / number / boolean / bigint) → String(value)
+ */
+function applyMirrorAttribute(element, attributeName, value) {
+    if (value === null || typeof value === "undefined") {
+        element.removeAttribute(attributeName);
+        return;
+    }
+    let formatted;
+    if (typeof value === "object") {
+        try {
+            formatted = JSON.stringify(value);
+        }
+        catch {
+            formatted = String(value);
+        }
+    }
+    else {
+        formatted = String(value);
+    }
+    element.setAttribute(attributeName, formatted);
+}
+
 /**
  * SSR 時に HTML 属性で表現できないプロパティバインディングを蓄積するストア。
  * ハイドレーション時にクライアント側で復元する。
@@ -3057,8 +3116,10 @@ function applyChangeToProperty(binding, _context, newValue) {
     if (propSegments.length === 1) {
         const firstSegment = propSegments[0];
         if (element[firstSegment] !== newValue) {
+            let propertyWriteSucceeded = false;
             try {
                 element[firstSegment] = newValue;
+                propertyWriteSucceeded = true;
             }
             catch (error) {
                 if (config.debug) {
@@ -3069,6 +3130,27 @@ function applyChangeToProperty(binding, _context, newValue) {
                     });
                 }
             }
+            // wc-bindable inputs[].attribute ミラー。プロパティ書き込みが成功したときだけ
+            // 属性へ反映する。setter が値を拒否した場合に属性だけ進んでしまうと
+            // property と attribute が乖離し、attributeChangedCallback や CSS セレクタが
+            // 実際のプロパティ値と矛盾した状態で発火するため、ここでガードする。
+            if (propertyWriteSucceeded) {
+                const mirrorAttr = getInputAttributeMirror(element, firstSegment);
+                if (mirrorAttr !== null) {
+                    try {
+                        applyMirrorAttribute(element, mirrorAttr, newValue);
+                    }
+                    catch (error) {
+                        if (config.debug) {
+                            console.warn(`Failed to mirror attribute '${mirrorAttr}' on element.`, {
+                                element,
+                                newValue,
+                                error
+                            });
+                        }
+                    }
+                }
+            }
         }
         if (inSsr()) {
             const attrHandler = SSR_ATTR_PROPS[firstSegment];