diff --git a/.changeset/short-poets-reflect.md b/.changeset/short-poets-reflect.md new file mode 100644 index 00000000000..a773a2411e1 --- /dev/null +++ b/.changeset/short-poets-reflect.md @@ -0,0 +1,11 @@ +--- +"@builder.io/sdk-angular": patch +"@builder.io/sdk-react-nextjs": 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: list-type inputs within symbols were not updating in the preview diff --git a/packages/sdks-tests/src/e2e-tests/editing.spec.ts b/packages/sdks-tests/src/e2e-tests/editing.spec.ts index e9a14a3adac..47ee5584205 100644 --- a/packages/sdks-tests/src/e2e-tests/editing.spec.ts +++ b/packages/sdks-tests/src/e2e-tests/editing.spec.ts @@ -18,6 +18,7 @@ import { MODIFIED_EDITING_COLUMNS } from '../specs/editing-columns-inner-layout. import { ADD_A_TEXT_BLOCK } from '../specs/duplicated-content-using-nested-symbols.js'; import { EDITING_STYLES } from '../specs/editing-styles.js'; import { ACCORDION_WITH_NO_DETAIL } from '../specs/accordion.js'; +import { SYMBOLS_WITH_LIST_CONTENT_INPUT } from '../specs/symbols-with-list-content-input.js'; import { NEW_BLOCK_ADD, NEW_BLOCK_ADD_2 } from '../specs/new-block-add.js'; import { SECTION_CHILDREN } from '../specs/section-children.js'; @@ -646,6 +647,27 @@ test.describe('Visual Editing', () => { }); }); + test('Symbol should update the data when nested values are updated', async ({ page, basePort, sdk, packageName }) => { + + test.skip(sdk === 'qwik', 'Qwik fails to update the data when nested values are updated. Need to raise another PR.'); + test.skip(excludeGen1(sdk) || packageName === 'nextjs-sdk-next-app'); + + await launchEmbedderAndWaitForSdk({ path: '/symbols-with-list-content-input', basePort, page, sdk }); + + const newContent = cloneContent(SYMBOLS_WITH_LIST_CONTENT_INPUT); + + await sendPatchOrUpdateMessage({ + page, + content: newContent, + model: 'page', + sdk, + path: '/data/blocks/0/component/options/symbol/data/language/1/code', + updateFn: () => 'AFK', + }); + + await page.frameLocator('iframe').getByText('AFK').waitFor(); + }); + test.describe('New Block addition and deletion with components using props.children / slots', () => { test('should add new block below the last block', async ({ page, diff --git a/packages/sdks-tests/src/specs/index.ts b/packages/sdks-tests/src/specs/index.ts index e402eba64ef..aa712665511 100644 --- a/packages/sdks-tests/src/specs/index.ts +++ b/packages/sdks-tests/src/specs/index.ts @@ -89,6 +89,7 @@ import { DYNAMIC_ELEMENT } from './dynamic-element.js'; import { CUSTOM_CODE_DOM_UPDATE } from './custom-code-dom-update.js'; import { NEW_BLOCK_ADD } from './new-block-add.js'; import { DYNAMIC_BUTTON } from './dynamic-button.js'; +import { SYMBOLS_WITH_LIST_CONTENT_INPUT } from './symbols-with-list-content-input.js'; import { COLUMNS_VERTICAL_CENTERING } from './columns-vertical-centering.js'; import { SECTION_CHILDREN } from './section-children.js'; @@ -139,6 +140,7 @@ export const PAGES: Record = { '/image-high-priority': { content: imageHighPriority }, '/image-no-webp': { content: imageNoWebp }, '/data-bindings': { content: dataBindings }, + '/symbols-with-list-content-input': { content: SYMBOLS_WITH_LIST_CONTENT_INPUT }, '/data-binding-styles': { content: dataBindingStyles }, '/react-native-strict-style-mode': { content: REACT_NATIVE_STRICT_STYLE_MODE_CONTENT }, '/react-native-strict-style-mode-disabled': { content: REACT_NATIVE_STRICT_STYLE_MODE_CONTENT }, diff --git a/packages/sdks-tests/src/specs/symbols-with-list-content-input.ts b/packages/sdks-tests/src/specs/symbols-with-list-content-input.ts new file mode 100644 index 00000000000..e60b5074a1f --- /dev/null +++ b/packages/sdks-tests/src/specs/symbols-with-list-content-input.ts @@ -0,0 +1,170 @@ +export const SYMBOLS_WITH_LIST_CONTENT_INPUT = { + data: { + title: 'react-sdk', + themeId: false, + blocks: [ + { + '@type': '@builder.io/sdk:Element', + '@version': 2, + id: 'builder-fdc6514a5f0e4bcab8d3a981e5adb164', + component: { + name: 'Symbol', + options: { + symbol: { + content: { + data: { + inputs: [ + { + '@type': '@builder.io/core:Field', + meta: {}, + name: 'language', + type: 'list', + defaultValue: [{ code: 'HN' }], + required: false, + subFields: [ + { + '@type': '@builder.io/core:Field', + meta: {}, + name: 'code', + type: 'text', + required: false, + subFields: [], + helperText: '', + autoFocus: false, + simpleTextOnly: false, + disallowRemove: false, + broadcast: false, + bubble: false, + hideFromUI: false, + hideFromFieldsEditor: false, + showTemplatePicker: true, + permissionsRequiredToEdit: '', + advanced: false, + copyOnAdd: true, + onChange: '', + behavior: '', + showIf: '', + mandatory: false, + hidden: false, + noPhotoPicker: false, + model: '', + supportsAiGeneration: false, + defaultCollapsed: false, + }, + ], + helperText: '', + autoFocus: false, + simpleTextOnly: false, + disallowRemove: false, + broadcast: false, + bubble: false, + hideFromUI: false, + hideFromFieldsEditor: false, + showTemplatePicker: true, + permissionsRequiredToEdit: '', + advanced: false, + copyOnAdd: true, + onChange: '', + behavior: '', + showIf: '', + mandatory: false, + hidden: false, + noPhotoPicker: false, + model: '', + supportsAiGeneration: false, + defaultCollapsed: false, + }, + { + '@type': '@builder.io/core:Field', + meta: {}, + name: 'newField1', + type: 'text', + required: false, + subFields: [], + helperText: '', + autoFocus: false, + simpleTextOnly: false, + disallowRemove: false, + broadcast: false, + bubble: false, + hideFromUI: false, + hideFromFieldsEditor: false, + showTemplatePicker: true, + permissionsRequiredToEdit: '', + advanced: false, + copyOnAdd: true, + onChange: '', + behavior: '', + showIf: '', + mandatory: false, + hidden: false, + noPhotoPicker: false, + model: '', + supportsAiGeneration: false, + defaultCollapsed: false, + }, + ], + blocks: [ + { + '@type': '@builder.io/sdk:Element', + '@version': 2, + bindings: { + 'component.options.text': + 'var _virtual_index=state.languageItem.code;return _virtual_index', + }, + code: { bindings: { 'component.options.text': 'state.languageItem.code' } }, + repeat: { collection: 'state.language' }, + id: 'builder-080852d1360b4f08a54f436bbfe32b44', + meta: { + previousId: 'builder-8ede3ef8afbc499f9eb0152d1c3d63fc', + bindingActions: { + _newProperty: null, + component: { options: { text: null } }, + }, + }, + component: { name: 'Text', options: { text: 'Enter some text...' } }, + responsiveStyles: { + large: { + display: 'flex', + flexDirection: 'column', + position: 'relative', + flexShrink: '0', + boxSizing: 'border-box', + marginTop: '20px', + lineHeight: 'normal', + height: 'auto', + }, + }, + }, + ], + }, + }, + data: { + language: [ + { + code: 'HN', + }, + { + code: 'EN', + }, + ], + }, + model: 'symbol', + entry: 'acd89180466e478d9e9c2f0ca803e650', + ownerId: 'c59dc54530484a9cac6cbb759f637b2d', + }, + }, + }, + responsiveStyles: { + large: { + display: 'flex', + flexDirection: 'column', + position: 'relative', + flexShrink: '0', + boxSizing: 'border-box', + }, + }, + }, + ], + }, +}; diff --git a/packages/sdks/package.json b/packages/sdks/package.json index aa1c8436945..33a7cafd151 100644 --- a/packages/sdks/package.json +++ b/packages/sdks/package.json @@ -57,8 +57,8 @@ "upgrade-example:all": "yarn loop upgrade-example latest" }, "dependencies": { - "@builder.io/mitosis": "^0.6.1", - "@builder.io/mitosis-cli": "^0.6.1", + "@builder.io/mitosis": "^0.7.3", + "@builder.io/mitosis-cli": "^0.7.3", "isolated-vm": "^5.0.0", "node-fetch": "^2.6.1", "seedrandom": "^3.0.5", diff --git a/packages/sdks/src/components/block/block.helpers.ts b/packages/sdks/src/components/block/block.helpers.ts index 1c6152b33c3..09a2007725c 100644 --- a/packages/sdks/src/components/block/block.helpers.ts +++ b/packages/sdks/src/components/block/block.helpers.ts @@ -160,3 +160,8 @@ export const provideBuilderContext = ( return {}; }; + +export const generateKey = (index: number) => { + //This does not handle the case in Qwik + return index.toString(); +}; diff --git a/packages/sdks/src/components/block/block.lite.tsx b/packages/sdks/src/components/block/block.lite.tsx index 64048be8b3a..b74061347f3 100644 --- a/packages/sdks/src/components/block/block.lite.tsx +++ b/packages/sdks/src/components/block/block.lite.tsx @@ -20,6 +20,7 @@ import type { BuilderBlock } from '../../types/builder-block.js'; import DynamicDiv from '../dynamic-div.lite.jsx'; import { bindAnimations } from './animator.js'; import { + generateKey, getComponent, getInheritedStyles, getRepeatItemData, @@ -278,7 +279,7 @@ export default function Block(props: BlockProps) { {(data, index) => ( {(data, index) => ( { + store.value = props.repeatContext; + }, [props.repeatContext]); + return (