fix: do not set width binding on Builder Column if value is undefined (…

…#1642)
BuilderIO · Nov 22, 2024 · 73a55a3 · 73a55a3
1 parent be48701
commit 73a55a3
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 10 deletions.
diff --git a/.changeset/soft-moons-change.md b/.changeset/soft-moons-change.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[Builder]: Do not set width binding on Column if value is undefined
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -32,7 +32,7 @@ We need your help! If you found a bug, it's best to [create an issue](https://gi
 
 ## Developing for Core & Testing
 
-In `core`, we use vitest snapshots & integeration tests for test coverage. If you are solving a problem that is reproducible by a fiddle in [mitosis.builder.io/playground](/playground), we highly recommend the following flow:
+In `core`, we use vitest snapshots & integration tests for test coverage. If you are solving a problem that is reproducible by a fiddle in [mitosis.builder.io/playground](/playground), we highly recommend the following flow:
 
 ### Snapshot test
 
@@ -55,8 +55,8 @@ PS: don't worry about failing imports in the raw test TSX files. These are not a
 
 #### Create new e2e project for another target
 
-If you want to create a new project inside ``e2e``. You should name the folder `e2e-XXX` where `XXX` should be replaced with the target. 
-Make sure that you change the ``name`` inside `package.json` of this project to `@builder.io/e2e-XXX`. Additionally, you need to add `private: true` to `package.json` to avoid publishing the project.
+If you want to create a new project inside `e2e`. You should name the folder `e2e-XXX` where `XXX` should be replaced with the target.
+Make sure that you change the `name` inside `package.json` of this project to `@builder.io/e2e-XXX`. Additionally, you need to add `private: true` to `package.json` to avoid publishing the project.
 
 ### Test your changes
 

diff --git a/packages/cli/src/__tests__/__snapshots__/cli-integration.test.ts.snap b/packages/cli/src/__tests__/__snapshots__/cli-integration.test.ts.snap
@@ -21,7 +21,7 @@ function MyComponent(props) {
         paddingRight: \\"0px\\",
       }}
     >
-      <Column width={}>
+      <Column>
         <Image
           image=\\"https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2F8e096f01b00343dca3952d645f7ae024?width=998&height=1000\\"
           backgroundPosition=\\"center\\"
@@ -111,7 +111,7 @@ function MyComponent(props) {
           </div>
         </div>
       </Column>
-      <Column width={}>
+      <Column>
         <Image
           image=\\"https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2F70c33c597e9946e9a79ab99ad9a999d3?width=998&height=1000\\"
           backgroundPosition=\\"center\\"
@@ -211,7 +211,7 @@ function MyComponent(props) {
           </div>
         </div>
       </Column>
-      <Column width={}>
+      <Column>
         <Image
           image=\\"https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2F226d855cb0ee46e4a2c7baa6990c1118?width=998&height=1000\\"
           backgroundPosition=\\"center\\"

diff --git a/packages/core/src/__tests__/builder.test.ts b/packages/core/src/__tests__/builder.test.ts
@@ -593,6 +593,44 @@ describe('Builder', () => {
     expect(mitosis.trim()).toEqual(code.trim());
   });
 
+  test('do not generate empty expression for width on Column', () => {
+    const content = {
+      data: {
+        blocks: [
+          {
+            '@type': '@builder.io/sdk:Element' as const,
+            component: {
+              name: 'Columns',
+              options: {
+                columns: [{ blocks: [] }, { blocks: [], width: 50 }],
+              },
+            },
+          },
+        ],
+      },
+    };
+
+    const mitosisJson = builderContentToMitosisComponent(content);
+
+    const mitosis = componentToMitosis(mitosisOptions)({
+      component: mitosisJson,
+    });
+
+    expect(mitosis).toMatchInlineSnapshot(`
+      "import { Columns, Column } from \\"@components\\";
+
+      export default function MyComponent(props) {
+        return (
+          <Columns>
+            <Column />
+            <Column width={50} />
+          </Columns>
+        );
+      }
+      "
+    `);
+  });
+
   test('nodes as props', () => {
     const content = {
       data: {

diff --git a/packages/core/src/generators/mitosis/generator.ts b/packages/core/src/generators/mitosis/generator.ts
@@ -138,7 +138,7 @@ export const blockToMitosis = (
   for (const key in json.bindings) {
     const value = json.bindings[key]?.code as string;
 
-    if (json.slots?.[key]) {
+    if (!value || json.slots?.[key]) {
       continue;
     }
 

diff --git a/packages/core/src/parsers/builder/builder.ts b/packages/core/src/parsers/builder/builder.ts
@@ -347,9 +347,15 @@ const componentMappers: {
       block.component?.options.columns?.map((col: any, index: number) =>
         createMitosisNode({
           name: 'Column',
-          bindings: {
-            width: { code: col.width?.toString() },
-          },
+          /**
+           * If width if undefined, do not create a binding otherwise its JSX will
+           * be <Column width={} /> which is not valid due to the empty expression.
+           */
+          ...(col.width !== undefined && {
+            bindings: {
+              width: { code: col.width.toString() },
+            },
+          }),
           ...(col.link && {
             properties: {
               link: col.link,