changes

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();

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;
     },
   },

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

@@ -72,7 +72,7 @@ export default function Symbol(props: SymbolProps) {
         }))) as Nullable<BuilderContent>,
     }),
     setContent() {
-      if (state.contentToUse) return;
+      if (state.contentToUse || props.symbol?.data) return;
 
       fetchSymbolContent({
         symbol: props.symbol,

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 (
     <>
       <Show when={!props.isNestedRender && TARGET !== 'reactNative'}>

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<BuilderComponentStateChange>(
             '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]);

packages/sdks/src/components/content/content.helpers.ts

@@ -31,6 +31,10 @@ export const getContentInitialValue = ({
   content,
   data,
 }: Pick<ContentProps, 'content' | 'data'>): Nullable<BuilderContent> => {
+  console.trace(
+    'DEBUG: getContentInitialValue data',
+    JSON.stringify(data, null, 2)
+  );
   return !content
     ? undefined
     : {

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<BuilderContextInterface>(
       {
@@ -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: {},
       })}
     >