diff --git a/packages/sdks-tests/src/e2e-tests/editing.spec.ts b/packages/sdks-tests/src/e2e-tests/editing.spec.ts index 5b6aba7a50a..63e24640b23 100644 --- a/packages/sdks-tests/src/e2e-tests/editing.spec.ts +++ b/packages/sdks-tests/src/e2e-tests/editing.spec.ts @@ -646,10 +646,23 @@ test.describe('Visual Editing', () => { }); }); - test('Symbol should update the data when nested values are updated', async ({ page, basePort, sdk }) => { - + test.only('Symbol should update the data when nested values are updated', async ({ + page, + basePort, + sdk, + }) => { test.skip(excludeGen1(sdk)); + const urlMatch = /https:\/\/cdn\.builder\.io\/api\/v3\/content\/symbol/; + + await page.route(urlMatch, async route => { + return route.fulfill({ + status: 200, + json: { + results: [NESTED_SYMBOL_CONTENT], + }, + }); + }); await launchEmbedderAndWaitForSdk({ path: '/nested-symbol', basePort, page, sdk }); const newContent = cloneContent(NESTED_SYMBOL_CONTENT); @@ -660,7 +673,7 @@ test.describe('Visual Editing', () => { model: 'page', sdk, path: '/data/blocks/0/component/options/symbol/data/language/1/code', - updateFn: () => 'AFK', + updateFn: () => 'ABCDEF', }); await page.frameLocator('iframe').getByText('AFK').waitFor(); diff --git a/packages/sdks/mitosis.config.cjs b/packages/sdks/mitosis.config.cjs index 69f0b73840c..f523932a83e 100644 --- a/packages/sdks/mitosis.config.cjs +++ b/packages/sdks/mitosis.config.cjs @@ -702,6 +702,26 @@ const ANGULAR_WRAP_SYMBOLS_FETCH_AROUND_CHANGES_DEPS = () => ({ 'if (changes.symbol) { this.setContent(); }' ); } + + + if (code.includes('selector: "builder-symbol"')) { + code = code.replaceAll(`this.setAttributes( + this.elRef0?.nativeElement, + this.elRef0_state_0, + changes["elRef0_state_0"]?.currentValue + );`, ` + console.log('DEBUG: changes', Object.keys(changes)); + if(changes?.symbol && changes?.symbol?.currentValue) { + this.node_3_ContentVariants = {...this.node_3_ContentVariants, ...changes?.symbol?.currentValue.data}; + } + console.log('DEBUG: this.node_3_ContentVariants', JSON.stringify(this.node_3_ContentVariants, null, 2)); + this.setAttributes( + this.elRef0?.nativeElement, + this.elRef0_state_0, + changes["elRef0_state_0"]?.currentValue + );`); + } + return code; }, }, diff --git a/packages/sdks/src/blocks/symbol/symbol.lite.tsx b/packages/sdks/src/blocks/symbol/symbol.lite.tsx index 717c2e50818..1a2c42f2052 100644 --- a/packages/sdks/src/blocks/symbol/symbol.lite.tsx +++ b/packages/sdks/src/blocks/symbol/symbol.lite.tsx @@ -72,7 +72,7 @@ export default function Symbol(props: SymbolProps) { }))) as Nullable, }), setContent() { - if (state.contentToUse) return; + if (state.contentToUse || props.symbol?.data) return; fetchSymbolContent({ symbol: props.symbol, diff --git a/packages/sdks/src/components/content-variants/content-variants.lite.tsx b/packages/sdks/src/components/content-variants/content-variants.lite.tsx index 69939737ae2..8adb143f4af 100644 --- a/packages/sdks/src/components/content-variants/content-variants.lite.tsx +++ b/packages/sdks/src/components/content-variants/content-variants.lite.tsx @@ -2,6 +2,7 @@ import { For, Show, onMount, + onUpdate, useMetadata, useStore, useTarget, @@ -84,6 +85,13 @@ export default function ContentVariants(props: VariantsProviderProps) { }, }); + onUpdate(() => { + console.log( + 'DEBUG: ContentVariants props.data', + JSON.stringify(props.data, null, 2) + ); + }, [props.data]); + return ( <> diff --git a/packages/sdks/src/components/content/components/enable-editor.lite.tsx b/packages/sdks/src/components/content/components/enable-editor.lite.tsx index e1851db3290..ab86041435f 100644 --- a/packages/sdks/src/components/content/components/enable-editor.lite.tsx +++ b/packages/sdks/src/components/content/components/enable-editor.lite.tsx @@ -114,6 +114,10 @@ export default function EnableEditor(props: BuilderEditorProps) { }); }, default: () => { + console.log( + 'DEBUG: EnableEditor mergeNewContent newContentValue', + JSON.stringify(newContentValue.data.language, null, 2) + ); props.builderContextSignal.value.content = newContentValue; }, }); @@ -228,6 +232,10 @@ export default function EnableEditor(props: BuilderEditorProps) { }, emitStateUpdate() { if (isEditing()) { + console.log( + 'DEBUG: EnableEditor emitStateUpdate', + JSON.stringify(props.builderContextSignal.value.rootState, null, 2) + ); window.dispatchEvent( new CustomEvent( 'builder:component:stateChange', @@ -471,6 +479,7 @@ export default function EnableEditor(props: BuilderEditorProps) { onUpdate(() => { if (props.data) { + state.mergeNewRootState({ language: null }); state.mergeNewRootState(props.data); } }, [props.data]); diff --git a/packages/sdks/src/components/content/content.helpers.ts b/packages/sdks/src/components/content/content.helpers.ts index fa0864b6a6b..a261fb90312 100644 --- a/packages/sdks/src/components/content/content.helpers.ts +++ b/packages/sdks/src/components/content/content.helpers.ts @@ -31,6 +31,10 @@ export const getContentInitialValue = ({ content, data, }: Pick): Nullable => { + console.trace( + 'DEBUG: getContentInitialValue data', + JSON.stringify(data, null, 2) + ); return !content ? undefined : { diff --git a/packages/sdks/src/components/content/content.lite.tsx b/packages/sdks/src/components/content/content.lite.tsx index 520e3804a01..03fdce6f59c 100644 --- a/packages/sdks/src/components/content/content.lite.tsx +++ b/packages/sdks/src/components/content/content.lite.tsx @@ -1,6 +1,7 @@ import { Show, onInit, + onUpdate, setContext, useMetadata, useState, @@ -72,6 +73,13 @@ export default function ContentComponent(props: ContentProps) { ), }); + onUpdate(() => { + console.log( + 'DEBUG: ContentComponent props.data', + JSON.stringify(props.data, null, 2) + ); + }, [props.data]); + const [builderContextSignal, setBuilderContextSignal] = useState( { @@ -202,6 +210,8 @@ export default function ContentComponent(props: ContentProps) { }, // eslint-disable-next-line object-shorthand solid: { setBuilderContextSignal: setBuilderContextSignal }, + // eslint-disable-next-line object-shorthand + angular: { setBuilderContextSignal: setBuilderContextSignal }, default: {}, })} >