fix: Builder generator includes width on Columns components (#1687)

BuilderIO · Feb 13, 2025 · 469394f · 469394f
1 parent 9e2ebac
commit 469394f
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 0 deletions.
diff --git a/.changeset/flat-days-protect.md b/.changeset/flat-days-protect.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+Builder: include Column widths in generator
diff --git a/packages/core/src/__tests__/builder.test.ts b/packages/core/src/__tests__/builder.test.ts
@@ -701,6 +701,62 @@ describe('Builder', () => {
     `);
   });
 
+  test('map Column widths', () => {
+    const content = {
+      data: {
+        blocks: [
+          {
+            '@type': '@builder.io/sdk:Element' as const,
+            component: {
+              name: 'Columns',
+              options: {
+                columns: [{ blocks: [], width: 50 }, { blocks: [] }],
+              },
+            },
+          },
+        ],
+      },
+    };
+
+    const mitosisJson = builderContentToMitosisComponent(content);
+
+    const backToBuilder = componentToBuilder()({ component: mitosisJson });
+    expect(backToBuilder).toMatchInlineSnapshot(`
+      {
+        "data": {
+          "blocks": [
+            {
+              "@type": "@builder.io/sdk:Element",
+              "actions": {},
+              "bindings": {},
+              "children": [],
+              "code": {
+                "actions": {},
+                "bindings": {},
+              },
+              "component": {
+                "name": "Columns",
+                "options": {
+                  "columns": [
+                    {
+                      "blocks": [],
+                      "width": 50,
+                    },
+                    {
+                      "blocks": [],
+                    },
+                  ],
+                },
+              },
+            },
+          ],
+          "jsCode": "",
+          "tsCode": "",
+        },
+      }
+    `);
+  });
+
   test('nodes as props', () => {
     const content = {
       data: {

diff --git a/packages/core/src/generators/builder/generator.ts b/packages/core/src/generators/builder/generator.ts
@@ -87,6 +87,7 @@ const componentMappers: {
 
     const columns = block.children!.map((item) => ({
       blocks: item.children,
+      width: item.component?.options?.width,
     }));
 
     block.component!.options.columns = columns;