Fix: columns props updates

.changeset/six-worms-tap.md

@@ -0,0 +1,11 @@
+---
+'@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/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,13 @@ 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.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

@@ -1,7 +1,12 @@
 import { AB_TEST_INTERACTIVE } from './ab-test-interactive.js';
 import { CONTENT as abTest } from './ab-test.js';
 import { ANIMATIONS } from './animations.js';
-import { CONTENT as columns } from './columns.js';
+import {
+  COLUMNS,
+  COLUMNS_WITH_NEW_SPACE,
+  COLUMNS_WITH_NEW_TEXT,
+  COLUMNS_WITH_NEW_WIDTHS,
+} 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';
@@ -57,7 +62,10 @@ const PAGES = {
   '/api-version-default': CONTENT_WITHOUT_SYMBOLS,
   '/can-track-false': homepage,
   '/css-nesting': cssNesting,
-  '/columns': columns,
+  '/columns': COLUMNS,
+  '/columns-with-new-text': COLUMNS_WITH_NEW_TEXT,
+  '/columns-with-new-space': COLUMNS_WITH_NEW_SPACE,
+  '/columns-with-new-widths': COLUMNS_WITH_NEW_WIDTHS,
   '/symbols': symbols,
   '/js-code': JS_CODE_CONTENT,
   '/symbols-without-content': CONTENT_WITHOUT_SYMBOLS,

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

@@ -1,5 +1,9 @@
 import { expect, type Page } 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 { MODIFIED_EDITING_STYLES } from '../specs/editing-styles.js';
 import { NEW_TEXT } from '../specs/helpers.js';
 import { MODIFIED_HOMEPAGE } from '../specs/homepage.js';
@@ -84,22 +88,60 @@
 test.describe('Visual Editing', () => {
   test.skip(excludeTestFor({ angular: true }), 'Angular Gen2 SDK not implemented.');
   editorTests({ noTrustedHosts: false });
-  test('correctly updates Text block in a Column block', async ({
-    page,
-    basePort,
-    packageName,
-  }) => {
-    test.skip(
-      packageName === 'react-native' ||
-        packageName === 'next-app-dir' ||
-        packageName === 'gen1-next' ||
-        packageName === 'gen1-react' ||
-        packageName === 'gen1-remix'
-    );
+  test.describe('Column block', () => {
+    test('correctly updates nested Text block', async ({ page, basePort, packageName }) => {
+      test.skip(
+        packageName === 'react-native' ||
+          packageName === 'next-app-dir' ||
+          packageName === 'gen1-next' ||
+          packageName === 'gen1-react' ||
+          packageName === 'gen1-remix'
+      );
+
+      await launchEmbedderAndWaitForSdk({ path: '/columns', basePort, page });
+      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 }) => {
+      test.skip(
+        packageName === 'react-native' ||
+          packageName === 'next-app-dir' ||
+          packageName === 'gen1-next' ||
+          packageName === 'gen1-react' ||
+          packageName === 'gen1-remix'
+      );
+
+      await launchEmbedderAndWaitForSdk({ path: '/columns', basePort, page });
+      const secondColumn = page.frameLocator('iframe').locator('.builder-column').nth(1);
+
+      await expect(secondColumn).toHaveCSS('margin-left', '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 }) => {
+      test.skip(
+        packageName === 'react-native' ||
+          packageName === 'next-app-dir' ||
+          packageName === 'gen1-next' ||
+          packageName === 'gen1-react' ||
+          packageName === 'gen1-remix'
+      );
 
-    await launchEmbedderAndWaitForSdk({ path: '/columns', basePort, page });
-    await sendContentUpdateMessage({ page, newContent: MODIFIED_COLUMNS, model: 'page' });
-    await page.frameLocator('iframe').getByText(NEW_TEXT).waitFor();
+      await launchEmbedderAndWaitForSdk({ path: '/columns', basePort, page });
+      const secondColumn = page.frameLocator('iframe').locator('.builder-column').nth(1);
+
+      const initialWidth = await (
+        await secondColumn.evaluateHandle(el => Number(getComputedStyle(el).width))
+      ).jsonValue();
+
+      await sendContentUpdateMessage({ page, newContent: COLUMNS_WITH_NEW_WIDTHS, model: 'page' });
+
+      const finalWidth = await (
+        await secondColumn.evaluateHandle(el => Number(getComputedStyle(el).width))
+      ).jsonValue();
+
+      expect(finalWidth).toBeGreaterThan(initialWidth);
+    });
   });
   test.describe('fails for empty trusted hosts', () => {
     test.fail();

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 ||
@@ -81,12 +87,13 @@ export default function Columns(props: ColumnProps) {
       return state.stackAt === 'never' ? desktopStyle : stackedStyle;
     },
 
-    flexDir:
-      props.stackColumnsAt === 'never'
+    get flexDir() {
+      return props.stackColumnsAt === 'never'
         ? 'row'
         : props.reverseColumnsWhenStacked
         ? 'column-reverse'
-        : 'column',
+        : 'column';
+    },
 
     columnsCssVars(): Dictionary<string> {
       return useTarget({