release: WRNexusJS 0.2.35

packages/compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.2.34",
+  "version": "0.2.35",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/compiler/src/codegen.ts

@@ -1065,11 +1065,20 @@ function renderComponentNode(node: ViewNode, ctx: CompCtx): string {
     })
     .join("");
 
+  const staticClassValue = staticClasses.join(" ");
+
+  const classHasReactiveExpression =
+    staticClassValue.includes("{") && exprRefsState(staticClassValue, ctx.stateNames);
+
   const classAttribute =
     staticClasses.length > 0 || conditionalClasses.length > 0
-      ? ` class="${compileAttrValue(staticClasses.join(" "), ctx)}${initialConditionalClasses}"`
+      ? ` class="${compileAttrValue(staticClassValue, ctx)}${initialConditionalClasses}"`
       : "";
 
+  const classReactiveBinding = classHasReactiveExpression
+    ? ` data-wrn-bind-class="${escLit(attrEscape(JSON.stringify(["class", staticClassValue])))}"`
+    : "";
+
   const classBindings = conditionalClasses
     .map(({ className, expression }, index) => {
       const marker = attrEscape(JSON.stringify([className, expression]));
@@ -1083,7 +1092,8 @@ function renderComponentNode(node: ViewNode, ctx: CompCtx): string {
   const childCtx =
     loops.length > 0 ? { ...ctx, loopVars: new Set([...(ctx.loopVars ?? []), ...loops]) } : ctx;
 
-  const allAttrs = `${classAttribute}${classBindings}${attrs}`;
+  const allAttrs =
+    `${classAttribute}` + `${classReactiveBinding}` + `${classBindings}` + `${attrs}`;
 
   if (VOID_ELEMENTS.has(node.tag.toLowerCase())) {
     return `<${node.tag}${allAttrs}>`;

packages/compiler/test/compiler.test.ts

@@ -610,3 +610,39 @@ function extractBehavior(output: string): {
 
   return JSON.parse(Buffer.from(match![1], "base64").toString("utf8"));
 }
+test("component interpolated class attributes remain reactive", () => {
+  const output = generate(
+    parse(`
+component CookieToggle {
+  state personalizationCookies = false
+
+  view {
+    <span
+      class="base {personalizationCookies ? 'enabled' : 'disabled'}"
+    >
+      Cookie
+    </span>
+  }
+}
+`),
+  );
+
+  const match = output.match(/data-wrn-bind-class="([^"]+)"/);
+
+  expect(match).not.toBeNull();
+
+  const encodedBinding = match?.[1] ?? "";
+
+  const decodedBinding = encodedBinding
+    .replaceAll("&quot;", '"')
+    .replaceAll("&#39;", "'")
+    .replaceAll("&amp;", "&")
+    .replaceAll("&lt;", "<")
+    .replaceAll("&gt;", ">");
+
+  const binding = JSON.parse(decodedBinding) as [string, string];
+
+  expect(binding[0]).toBe("class");
+
+  expect(binding[1]).toBe("base {personalizationCookies ? 'enabled' : 'disabled'}");
+});