feat: make state-based attributes reactive

packages/csr/src/reactive-runtime.ts

@@ -199,6 +199,38 @@ export const REACTIVE_RUNTIME = String.raw`
       });
     });
 
+    // Reactive ordinary attributes emitted by the compiler. Each marker stores
+    // [attributeName, originalTemplate], preserving an SSR value while allowing
+    // state changes to update type, aria-*, class, href, and other attributes.
+    var bindNodes = [el].concat(Array.prototype.slice.call(el.querySelectorAll("*")));
+    bindNodes.forEach(function (node) {
+      if (!owns(node)) return;
+      Array.prototype.slice.call(node.attributes).forEach(function (marker) {
+        if (marker.name.indexOf("data-wrn-bind-") !== 0) return;
+        var binding;
+        try { binding = JSON.parse(marker.value); } catch (e) { return; }
+        if (!binding || binding.length !== 2) return;
+        var name = binding[0];
+        var template = binding[1];
+        reactive(function () {
+          var exact = /^\{([^{}]+)\}$/.exec(template);
+          var raw;
+          if (exact) {
+            try { raw = evalExpr(exact[1].trim()); } catch (e) { return; }
+          } else {
+            raw = template.replace(/\{([^{}]+)\}/g, function (_, expr) {
+              try {
+                var value = evalExpr(expr.trim());
+                return value == null ? "" : String(value);
+              } catch (e) { return ""; }
+            });
+          }
+          if (raw === false || raw == null) node.removeAttribute(name);
+          else node.setAttribute(name, raw === true ? "" : String(raw));
+        });
+      });
+    });
+
     // {{expr}} / {expr} interpolation in text nodes
     var walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
     var textNode;