fix[gen2-sdks]: updates to column props reflect updates while visual …

…editing (#3703)

## Description

from #3220

Jira
https://builder-io.atlassian.net/browse/ENG-5992

Fixes #3219 

_Screenshot_
If relevant, add a screenshot or two of the changes you made.

.changeset/shy-boxes-think.md

@@ -0,0 +1,12 @@
+---
+"@builder.io/sdk-angular": patch
+"@builder.io/sdk-react-nextjs": patch
+"@builder.io/sdk-qwik": patch
+"@builder.io/sdk-react": patch
+"@builder.io/sdk-react-native": patch
+"@builder.io/sdk-solid": patch
+"@builder.io/sdk-svelte": patch
+"@builder.io/sdk-vue": patch
+---
+
+Fix: make Column block's state reactive to its `props`

packages/sdks-tests/src/e2e-tests/editing.spec.ts

@@ -1,5 +1,9 @@
 import { expect } from '@playwright/test';
-import { MODIFIED_COLUMNS } from '../specs/columns.js';
+import {
+  COLUMNS_WITH_NEW_SPACE,
+  COLUMNS_WITH_NEW_TEXT,
+  COLUMNS_WITH_NEW_WIDTHS,
+} from '../specs/columns.js';
 import { NEW_TEXT } from '../specs/helpers.js';
 import { HOMEPAGE } from '../specs/homepage.js';
 import { checkIsRN, test } from '../helpers/index.js';
@@ -76,24 +80,6 @@ const editorTests = ({ noTrustedHosts }: { noTrustedHosts: boolean }) => {
 
 test.describe('Visual Editing', () => {
   editorTests({ noTrustedHosts: false });
-  test('correctly updates Text block in a Column block', async ({
-    page,
-    basePort,
-    packageName,
-    sdk,
-  }) => {
-    test.skip(
-      packageName === 'nextjs-sdk-next-app' ||
-        packageName === 'gen1-next' ||
-        packageName === 'gen1-react' ||
-        packageName === 'gen1-remix'
-    );
-
-    await launchEmbedderAndWaitForSdk({ path: '/columns', basePort, page, sdk });
-    await sendContentUpdateMessage({ page, newContent: MODIFIED_COLUMNS, model: 'page' });
-    await page.frameLocator('iframe').getByText(NEW_TEXT).waitFor();
-  });
-
   test('correctly updates Box -> Columns when used Inner Layout > Columns option', async ({
     page,
     packageName,
@@ -180,6 +166,72 @@ test.describe('Visual Editing', () => {
     expect(textBlocks.length).toBe(1);
   });
 
+  test.describe('Column block', () => {
+    test('correctly updates nested Text block', async ({ page, basePort, packageName, sdk }) => {
+      test.skip(
+        packageName === 'nextjs-sdk-next-app' ||
+          packageName === 'gen1-next' ||
+          packageName === 'gen1-react' ||
+          packageName === 'gen1-remix'
+      );
+
+      await launchEmbedderAndWaitForSdk({ path: '/columns', basePort, page, sdk });
+      await sendContentUpdateMessage({ page, newContent: COLUMNS_WITH_NEW_TEXT, model: 'page' });
+      await page.frameLocator('iframe').getByText(NEW_TEXT).waitFor();
+    });
+    test('correctly updates space prop', async ({ page, basePort, packageName, sdk }) => {
+      test.skip(
+        packageName === 'nextjs-sdk-next-app' ||
+          packageName === 'gen1-next' ||
+          packageName === 'gen1-react' ||
+          packageName === 'gen1-remix'
+      );
+
+      const selector = checkIsRN(sdk)
+        ? '[data-builder-block-name=builder-column]'
+        : '.builder-column';
+      await launchEmbedderAndWaitForSdk({ path: '/columns', basePort, page, sdk });
+      const secondColumn = page.frameLocator('iframe').locator(selector).nth(1);
+
+      await expect(secondColumn).toHaveCSS('margin-left', checkIsRN(sdk) ? '0px' : '20px');
+      await sendContentUpdateMessage({ page, newContent: COLUMNS_WITH_NEW_SPACE, model: 'page' });
+      await expect(secondColumn).toHaveCSS('margin-left', '10px');
+    });
+    test('correctly updates width props', async ({ page, basePort, packageName, sdk }) => {
+      test.skip(
+        packageName === 'react-native' ||
+          packageName === 'nextjs-sdk-next-app' ||
+          packageName === 'gen1-next' ||
+          packageName === 'gen1-react' ||
+          packageName === 'gen1-remix'
+      );
+
+      await launchEmbedderAndWaitForSdk({ path: '/columns', basePort, page, sdk });
+      const secondColumn = page.frameLocator('iframe').locator('.builder-column').nth(1);
+
+      const initialWidth = await secondColumn.evaluate(el =>
+        getComputedStyle(el).width.replace('px', '')
+      );
+
+      await sendContentUpdateMessage({ page, newContent: COLUMNS_WITH_NEW_WIDTHS, model: 'page' });
+
+      await expect
+        .poll(
+          async () => {
+            const currentWidth = await secondColumn.evaluate(el =>
+              getComputedStyle(el).width.replace('px', '')
+            );
+            return Number(currentWidth);
+          },
+          {
+            message: 'Waiting for column width to increase',
+            timeout: 5000,
+          }
+        )
+        .toBeGreaterThan(Number(initialWidth));
+    });
+  });
+
   test.describe('fails for empty trusted hosts', () => {
     test.fail();
     editorTests({ noTrustedHosts: true });

packages/sdks-tests/src/specs/columns.ts

@@ -1,6 +1,6 @@
 import { NEW_TEXT } from './helpers.js';
 
-export const CONTENT = {
+export const COLUMNS = {
   createdBy: 'OcOewqA7uqVVlVfqY453F8vgcc33',
   createdDate: 1644861548711,
   data: {
@@ -1187,6 +1187,14 @@ export const CONTENT = {
   rev: 'zxiskiseoj',
 };
 
-export const MODIFIED_COLUMNS = JSON.parse(JSON.stringify(CONTENT));
-MODIFIED_COLUMNS.data.blocks[2].children![1]!.component.options.columns![0].blocks[1].component.options.text =
+export const COLUMNS_WITH_NEW_TEXT = JSON.parse(JSON.stringify(COLUMNS));
+COLUMNS_WITH_NEW_TEXT.data.blocks[2].children![1]!.component.options.columns![0].blocks[1].component.options.text =
   NEW_TEXT;
+
+export const COLUMNS_WITH_NEW_SPACE = JSON.parse(JSON.stringify(COLUMNS));
+COLUMNS_WITH_NEW_SPACE.data.blocks[2].children![1]!.component.options.stackColumnsAt = 'never'; // to test RN SDK
+COLUMNS_WITH_NEW_SPACE.data.blocks[2].children![1]!.component.options.space = 10;
+
+export const COLUMNS_WITH_NEW_WIDTHS = JSON.parse(JSON.stringify(COLUMNS));
+COLUMNS_WITH_NEW_WIDTHS.data.blocks[2].children![1]!.component.options.columns![0].width = 30;
+COLUMNS_WITH_NEW_WIDTHS.data.blocks[2].children![1]!.component.options.columns![1].width = 70;

packages/sdks-tests/src/specs/index.ts

@@ -2,7 +2,7 @@ import { AB_TEST_INTERACTIVE } from './ab-test-interactive.js';
 import { CONTENT as abTest } from './ab-test.js';
 import { CONTENT as personalizatContainer } from './personalization-container.js';
 import { ANIMATIONS } from './animations.js';
-import { CONTENT as columns } from './columns.js';
+import { COLUMNS } from './columns.js';
 import { CONTENT as contentBindings } from './content-bindings.js';
 import { CONTENT as cssNesting } from './css-nesting.js';
 import { CSS_PROPERTIES } from './css-properties.js';
@@ -82,7 +82,7 @@ export const PAGES = {
   '/api-version-default': CONTENT_WITHOUT_SYMBOLS,
   '/can-track-false': HOMEPAGE,
   '/css-nesting': cssNesting,
-  '/columns': columns,
+  '/columns': COLUMNS,
   '/symbols': symbols,
   '/js-code': JS_CODE_CONTENT,
   '/symbols-without-content': CONTENT_WITHOUT_SYMBOLS,

packages/sdks/src/blocks/columns/columns.lite.tsx

@@ -32,9 +32,15 @@ useMetadata({
 
 export default function Columns(props: ColumnProps) {
   const state = useStore({
-    gutterSize: typeof props.space === 'number' ? props.space || 0 : 20,
-    cols: props.columns || [],
-    stackAt: props.stackColumnsAt || 'tablet',
+    get gutterSize() {
+      return typeof props.space === 'number' ? props.space || 0 : 20;
+    },
+    get cols() {
+      return props.columns || [];
+    },
+    get stackAt() {
+      return props.stackColumnsAt || 'tablet';
+    },
     getTagName(column: Column) {
       return column.link
         ? props.builderLinkComponent ||
@@ -84,12 +90,13 @@ export default function Columns(props: ColumnProps) {
       return state.stackAt === 'never' ? desktopStyle : stackedStyle;
     },
 
-    flexDir:
-      props.stackColumnsAt === 'never'
+    get flexDir(): 'row' | 'column' | 'column-reverse' {
+      return props.stackColumnsAt === 'never'
         ? 'row'
         : props.reverseColumnsWhenStacked
           ? 'column-reverse'
-          : 'column',
+          : 'column';
+    },
 
     columnsCssVars(): Dictionary<string> {
       return useTarget({