fix: generate hidden body correctly (#4179)

TrySound · web-flow · commit 6eae04dccc7e · 2024-09-29T17:14:12.000+02:00
Here fixed rendering body with bound show prop.
diff --git a/packages/react-sdk/src/component-generator.test.tsx b/packages/react-sdk/src/component-generator.test.tsx
@@ -788,6 +788,42 @@ return <Body>
 `);
 });
 
+test("generate conditional body", () => {
+  expect(
+    generateWebstudioComponent({
+      classesMap: new Map(),
+      scope: createScope(),
+      name: "Page",
+      rootInstanceId: "body",
+      parameters: [],
+      dataSources: toMap<DataSource>([
+        {
+          id: "conditionId",
+          scopeInstanceId: "list",
+          name: "conditionName",
+          type: "variable",
+          value: { type: "boolean", value: false },
+        },
+      ]),
+      indexesWithinAncestors: new Map(),
+      ...renderJsx(
+        <$.Body
+          ws:id="body"
+          data-ws-show={new ExpressionValue("$ws$dataSource$conditionId")}
+        ></$.Body>
+      ),
+    })
+  ).toMatchInlineSnapshot(`
+"const Page = () => {
+let [conditionName, set$conditionName] = useVariableState<any>(false)
+return (conditionName) &&
+<Body />
+
+}
+"
+`);
+});
+
 test("generate resource prop", () => {
   expect(
     generateWebstudioComponent({
diff --git a/packages/react-sdk/src/component-generator.ts b/packages/react-sdk/src/component-generator.ts
@@ -133,6 +133,7 @@ const generatePropValue = ({
 };
 
 export const generateJsxElement = ({
+  context = "jsx",
   scope,
   instance,
   props,
@@ -142,6 +143,7 @@ export const generateJsxElement = ({
   children,
   classesMap,
 }: {
+  context?: "expression" | "jsx";
   scope: Scope;
   instance: Instance;
   props: Props;
@@ -250,7 +252,13 @@ export const generateJsxElement = ({
   // {dataSourceVariable && <Instance>}
   if (conditionValue) {
     let conditionalElement = "";
-    conditionalElement += `{(${conditionValue}) &&\n`;
+    let before = "";
+    let after = "";
+    if (context === "jsx") {
+      before = "{";
+      after = "}";
+    }
+    conditionalElement += `${before}(${conditionValue}) &&\n`;
     // wrap collection with fragment when rendered inside condition
     // {dataSourceVariable &&
     //  <>
@@ -264,7 +272,7 @@ export const generateJsxElement = ({
     } else {
       conditionalElement += generatedElement;
     }
-    conditionalElement += `}\n`;
+    conditionalElement += `${after}\n`;
     return conditionalElement;
   }
 
@@ -323,6 +331,7 @@ export const generateJsxChildren = ({
         continue;
       }
       generatedChildren += generateJsxElement({
+        context: "jsx",
         scope,
         instance,
         props,
@@ -377,6 +386,7 @@ export const generateWebstudioComponent = ({
 
   const usedDataSources: DataSources = new Map();
   const generatedJsx = generateJsxElement({
+    context: "expression",
     scope,
     instance,
     props,
