fix: conditional classes, dynamic params, HMR and formatter

packages/csr/src/reactive-runtime.ts

@@ -199,6 +199,45 @@ export const REACTIVE_RUNTIME = String.raw`
       });
     });
 
+    // Conditional class bindings emitted as:
+    // data-wrn-class-*='["class-name","expression"]'
+    var classBindNodes = [el].concat(
+      Array.prototype.slice.call(el.querySelectorAll("*")),
+    );
+
+    classBindNodes.forEach(function (node) {
+      if (!owns(node)) return;
+
+      Array.prototype.slice.call(node.attributes).forEach(function (marker) {
+        if (marker.name.indexOf("data-wrn-class-") !== 0) return;
+
+        var binding;
+
+        try {
+          binding = JSON.parse(marker.value);
+        } catch (e) {
+          return;
+        }
+
+        if (!binding || binding.length !== 2) return;
+
+        var className = binding[0];
+        var expression = binding[1];
+
+        reactive(function () {
+          var enabled = false;
+
+          try {
+            enabled = !!evalExpr(expression);
+          } catch (e) {
+            enabled = false;
+          }
+
+          node.classList.toggle(className, enabled);
+        });
+      });
+    });
+
     // 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.