release: WRNexusJS 0.2.35

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}>`;