From 872634a9d9ae802c117e6176c275377bfd2f461e Mon Sep 17 00:00:00 2001
From: Yash Wadhia <yashwadhia@Yashs-MacBook-Pro.local>
Date: Thu, 27 Feb 2025 08:04:38 +0530
Subject: [PATCH 1/9] fix(dynamic-renderer): Refactor component resolution to
 use a map for dynamic rendering

---
 .../scripts/generate-dynamic-renderer.mjs      | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/sdks/output/angular/scripts/generate-dynamic-renderer.mjs b/packages/sdks/output/angular/scripts/generate-dynamic-renderer.mjs
index fa6c6bd8a20..29ce600c1ec 100644
--- a/packages/sdks/output/angular/scripts/generate-dynamic-renderer.mjs
+++ b/packages/sdks/output/angular/scripts/generate-dynamic-renderer.mjs
@@ -129,7 +129,7 @@ const generateComponents = () => {
       <ng-container *ngIf="useTypeOf(TagName) === 'string'">
         <ng-container
           *ngComponentOutlet="
-            TagName;
+            getComponentType(TagName);
             inputs: {
               attributes: attributes,
               actionAttributes: actionAttributes
@@ -185,13 +185,17 @@ export default class DynamicRenderer {
 
   constructor(private vcRef: ViewContainerRef) {}
 
+  private tagComponentMap: { [key: string]: any } = {
+    ${htmlElements.map((el) => `'${el}': Dynamic${capitalize(el)}`).join(',\n    ')}
+  };
+
+  getComponentType(tagName: string): any {
+    return this.tagComponentMap[tagName] || null;
+  }
+
   ngOnInit() {
-    if (typeof this.TagName === 'string') {
-      switch (this.TagName) {
-        ${htmlElements.map((el) => `case '${el}': this.TagName = Dynamic${capitalize(el)}; break;`).join('\n        ')}
-        default:
-          break;
-      }
+    if (typeof this.TagName === 'string' && this.tagComponentMap[this.TagName]) {
+      this.TagName = this.tagComponentMap[this.TagName];
     }
     this.myContent = [this.vcRef.createEmbeddedView(this.tagnameTemplateRef).rootNodes];
   }

From bdb5aa1a37f8d7c9576333fcaff44e7dcf4ac85f Mon Sep 17 00:00:00 2001
From: Yash Wadhia <yashwadhia@Yashs-MacBook-Pro.local>
Date: Fri, 28 Feb 2025 12:47:16 +0530
Subject: [PATCH 2/9] feat(dynamic button test): Added a test case to tackle
 assertion error when adding link to the button. Implemented typing simulation

---
 .../src/e2e-tests/dynamic-button.spec.ts      | 55 +++++++++++++++++++
 .../sdks-tests/src/specs/dynamic-button.ts    | 40 ++++++++++++++
 packages/sdks-tests/src/specs/index.ts        |  3 +-
 3 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
 create mode 100644 packages/sdks-tests/src/specs/dynamic-button.ts

diff --git a/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts b/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
new file mode 100644
index 00000000000..94185ab49dd
--- /dev/null
+++ b/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
@@ -0,0 +1,55 @@
+import { expect } from '@playwright/test';
+import { test } from '../helpers/index.js';
+import {
+  cloneContent,
+  launchEmbedderAndWaitForSdk,
+  sendContentUpdateMessage,
+} from '../helpers/visual-editor.js';
+import { DYNAMIC_BUTTON } from '../specs/dynamic-button.js';
+
+test.describe.only('Dynamic Button', () => {
+  test('should render a button', async ({ page, sdk, basePort }) => {
+    test.skip(sdk !== 'angular');
+
+    await launchEmbedderAndWaitForSdk({
+      path: '/dynamic-button',
+      basePort,
+      page,
+      sdk,
+    });
+
+    const buttonLocator = page
+      .frameLocator('iframe')
+      .locator('[builder-id="builder-b53d1cc2bcbb481b869207fdd97ee1db"]');
+    await expect(buttonLocator).toHaveText('Click me!');
+    const newContent = cloneContent(DYNAMIC_BUTTON);
+
+    //simulating typing in the link field
+    newContent.data.blocks[0].component.options.link = '#';
+    await sendContentUpdateMessage({
+      page,
+      newContent,
+      model: 'page',
+    });
+
+    newContent.data.blocks[0].component.options.link = '#g';
+    await sendContentUpdateMessage({
+      page,
+      newContent,
+      model: 'page',
+    });
+
+    newContent.data.blocks[0].component.options.link = '#go';
+    await sendContentUpdateMessage({
+      page,
+      newContent,
+      model: 'page',
+    });
+
+    const updatedButtonLocator = page
+      .frameLocator('iframe')
+      .locator('[builder-id="builder-b53d1cc2bcbb481b869207fdd97ee1db"]');
+
+    await expect(updatedButtonLocator).toBeVisible();
+  });
+});
diff --git a/packages/sdks-tests/src/specs/dynamic-button.ts b/packages/sdks-tests/src/specs/dynamic-button.ts
new file mode 100644
index 00000000000..c43f4370b3d
--- /dev/null
+++ b/packages/sdks-tests/src/specs/dynamic-button.ts
@@ -0,0 +1,40 @@
+export const DYNAMIC_BUTTON = {
+  data: {
+    title: 'angular-sdk-test',
+    themeId: false,
+    blocks: [
+      {
+        '@type': '@builder.io/sdk:Element',
+        '@version': 2,
+        id: 'builder-b53d1cc2bcbb481b869207fdd97ee1db',
+        component: {
+          name: 'Core:Button',
+          options: {
+            text: 'Click me!',
+            openLinkInNewTab: false,
+          },
+        },
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            flexShrink: '0',
+            boxSizing: 'border-box',
+            marginTop: '20px',
+            appearance: 'none',
+            paddingTop: '15px',
+            paddingBottom: '15px',
+            paddingLeft: '25px',
+            paddingRight: '25px',
+            backgroundColor: 'black',
+            color: 'white',
+            borderRadius: '4px',
+            textAlign: 'center',
+            cursor: 'pointer',
+          },
+        },
+      },
+    ],
+  },
+};
diff --git a/packages/sdks-tests/src/specs/index.ts b/packages/sdks-tests/src/specs/index.ts
index 14f08c1b19a..2029d4ed78e 100644
--- a/packages/sdks-tests/src/specs/index.ts
+++ b/packages/sdks-tests/src/specs/index.ts
@@ -87,7 +87,7 @@ import { VIDEO_LAZY_LOAD } from './video-lazy-load.js';
 import { COLUMNS_VERTICAL_CENTER_FLEX } from './columns-vertical-center-flex.js';
 import { DYNAMIC_ELEMENT } from './dynamic-element.js';
 import { CUSTOM_CODE_DOM_UPDATE } from './custom-code-dom-update.js';
-
+import { DYNAMIC_BUTTON } from './dynamic-button.js';
 function isBrowser(): boolean {
   return typeof window !== 'undefined' && typeof document !== 'undefined';
 }
@@ -279,6 +279,7 @@ export const PAGES: Record<string, Page> = {
   '/can-track-false-pre-init': { content: HOMEPAGE, target: 'gen1' },
   '/dynamic-element': { content: DYNAMIC_ELEMENT },
   '/custom-code-dom-update': { content: CUSTOM_CODE_DOM_UPDATE },
+  '/dynamic-button': { content: DYNAMIC_BUTTON },
 } as const;
 
 export type Path = keyof typeof PAGES;

From 1804a5c6017325ad5e97fde37a0fd54ba33760e0 Mon Sep 17 00:00:00 2001
From: Yash Wadhia <yashwadhia@Yashs-MacBook-Pro.local>
Date: Fri, 28 Feb 2025 13:38:11 +0530
Subject: [PATCH 3/9] fix: removed 'only' from test case

---
 packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts b/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
index 94185ab49dd..013dd06a9ba 100644
--- a/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
+++ b/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
@@ -7,7 +7,7 @@ import {
 } from '../helpers/visual-editor.js';
 import { DYNAMIC_BUTTON } from '../specs/dynamic-button.js';
 
-test.describe.only('Dynamic Button', () => {
+test.describe('Dynamic Button', () => {
   test('should render a button', async ({ page, sdk, basePort }) => {
     test.skip(sdk !== 'angular');
 

From 7c1899f8919daae960fac786833717a07a0ef019 Mon Sep 17 00:00:00 2001
From: Yash Wadhia <yashwadhia@Yashs-MacBook-Pro.local>
Date: Mon, 3 Mar 2025 08:27:58 +0530
Subject: [PATCH 4/9] docs: changeset

---
 .changeset/loud-jars-sleep.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/loud-jars-sleep.md

diff --git a/.changeset/loud-jars-sleep.md b/.changeset/loud-jars-sleep.md
new file mode 100644
index 00000000000..81e66168acb
--- /dev/null
+++ b/.changeset/loud-jars-sleep.md
@@ -0,0 +1,5 @@
+---
+"@builder.io/sdk-angular": patch
+---
+
+Resolved assertion error encountered when dynamically switching components

From 3d6aa46a7bb77cee3dd9796bdf68e0af329d15d7 Mon Sep 17 00:00:00 2001
From: Yash Wadhia <yashwadhia@Yashs-MacBook-Pro.local>
Date: Mon, 3 Mar 2025 12:54:48 +0530
Subject: [PATCH 5/9] fix: allowed dynamic test cases for all the sdks.
 checking href value

---
 .../src/e2e-tests/dynamic-button.spec.ts           | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts b/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
index 013dd06a9ba..26fb7ad541d 100644
--- a/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
+++ b/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { test } from '../helpers/index.js';
+import { checkIsRN, test } from '../helpers/index.js';
 import {
   cloneContent,
   launchEmbedderAndWaitForSdk,
@@ -9,7 +9,6 @@ import { DYNAMIC_BUTTON } from '../specs/dynamic-button.js';
 
 test.describe('Dynamic Button', () => {
   test('should render a button', async ({ page, sdk, basePort }) => {
-    test.skip(sdk !== 'angular');
 
     await launchEmbedderAndWaitForSdk({
       path: '/dynamic-button',
@@ -18,9 +17,10 @@ test.describe('Dynamic Button', () => {
       sdk,
     });
 
-    const buttonLocator = page
-      .frameLocator('iframe')
-      .locator('[builder-id="builder-b53d1cc2bcbb481b869207fdd97ee1db"]');
+    const buttonLocator = checkIsRN(sdk) ? page.frameLocator('iframe').locator('button') : page
+    .frameLocator('iframe')
+    .locator('[builder-id="builder-b53d1cc2bcbb481b869207fdd97ee1db"]');
+    
     await expect(buttonLocator).toHaveText('Click me!');
     const newContent = cloneContent(DYNAMIC_BUTTON);
 
@@ -46,10 +46,12 @@ test.describe('Dynamic Button', () => {
       model: 'page',
     });
 
-    const updatedButtonLocator = page
+    const updatedButtonLocator = checkIsRN(sdk) ? page.frameLocator('iframe').locator('a') : page
       .frameLocator('iframe')
       .locator('[builder-id="builder-b53d1cc2bcbb481b869207fdd97ee1db"]');
 
     await expect(updatedButtonLocator).toBeVisible();
+    
+    await expect(updatedButtonLocator).toHaveAttribute('href', '#go');
   });
 });

From 2f8ef6ba59db1e3d01852ea7061b7ce304f717f8 Mon Sep 17 00:00:00 2001
From: Yash Wadhia <yashwadhia@Yashs-MacBook-Pro.local>
Date: Mon, 3 Mar 2025 16:40:58 +0530
Subject: [PATCH 6/9] fix: skipping other sdk where sendContentUpdateMessage
 does not work

---
 .../sdks-tests/src/e2e-tests/dynamic-button.spec.ts  | 12 +++++++++---
 packages/sdks-tests/src/specs/dynamic-button.ts      |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts b/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
index 26fb7ad541d..2f469de5168 100644
--- a/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
+++ b/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
@@ -8,8 +8,14 @@ import {
 import { DYNAMIC_BUTTON } from '../specs/dynamic-button.js';
 
 test.describe('Dynamic Button', () => {
-  test('should render a button', async ({ page, sdk, basePort }) => {
-
+  test('should render a button', async ({ page, sdk, basePort, packageName }) => {
+    test.skip(
+      packageName === 'nextjs-sdk-next-app' ||
+        packageName === 'gen1-next14-pages' ||
+        packageName === 'gen1-next15-app' ||
+        packageName === 'gen1-remix' ||
+        packageName === 'gen1-react'
+    );
     await launchEmbedderAndWaitForSdk({
       path: '/dynamic-button',
       basePort,
@@ -24,7 +30,7 @@ test.describe('Dynamic Button', () => {
     await expect(buttonLocator).toHaveText('Click me!');
     const newContent = cloneContent(DYNAMIC_BUTTON);
 
-    //simulating typing in the link field
+    // simulating typing in the link field
     newContent.data.blocks[0].component.options.link = '#';
     await sendContentUpdateMessage({
       page,
diff --git a/packages/sdks-tests/src/specs/dynamic-button.ts b/packages/sdks-tests/src/specs/dynamic-button.ts
index c43f4370b3d..fab808ecf3d 100644
--- a/packages/sdks-tests/src/specs/dynamic-button.ts
+++ b/packages/sdks-tests/src/specs/dynamic-button.ts
@@ -1,6 +1,6 @@
 export const DYNAMIC_BUTTON = {
   data: {
-    title: 'angular-sdk-test',
+    title: 'dynamic-button-sdk-test',
     themeId: false,
     blocks: [
       {

From 6d149d863d710d4ccd6ce5aafddb0ea57ab6e52e Mon Sep 17 00:00:00 2001
From: Yash Wadhia <yashwadhia@Yashs-MacBook-Pro.local>
Date: Mon, 3 Mar 2025 20:41:23 +0530
Subject: [PATCH 7/9] fix: added test.fail for svelte. Updated
 sendContentUpdateMessage to sendPatchOrUpdateMessage

---
 .../src/e2e-tests/dynamic-button.spec.ts      | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts b/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
index 2f469de5168..5145835f587 100644
--- a/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
+++ b/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
@@ -3,12 +3,13 @@ import { checkIsRN, test } from '../helpers/index.js';
 import {
   cloneContent,
   launchEmbedderAndWaitForSdk,
-  sendContentUpdateMessage,
+  sendPatchOrUpdateMessage,
 } from '../helpers/visual-editor.js';
 import { DYNAMIC_BUTTON } from '../specs/dynamic-button.js';
 
 test.describe('Dynamic Button', () => {
   test('should render a button', async ({ page, sdk, basePort, packageName }) => {
+    test.fail(sdk === 'svelte', 'Not showing the href attribute in Svelte');
     test.skip(
       packageName === 'nextjs-sdk-next-app' ||
         packageName === 'gen1-next14-pages' ||
@@ -31,25 +32,31 @@ test.describe('Dynamic Button', () => {
     const newContent = cloneContent(DYNAMIC_BUTTON);
 
     // simulating typing in the link field
-    newContent.data.blocks[0].component.options.link = '#';
-    await sendContentUpdateMessage({
+    await sendPatchOrUpdateMessage({
       page,
-      newContent,
+      content: cloneContent(DYNAMIC_BUTTON),
       model: 'page',
+      sdk,
+      updateFn: () => '#',
+      path: '/data/blocks/0/component/options/link',
     });
 
-    newContent.data.blocks[0].component.options.link = '#g';
-    await sendContentUpdateMessage({
+    await sendPatchOrUpdateMessage({
       page,
-      newContent,
+      content: newContent,
       model: 'page',
+      sdk,
+      updateFn: () => '#g',
+      path: '/data/blocks/0/component/options/link',
     });
 
-    newContent.data.blocks[0].component.options.link = '#go';
-    await sendContentUpdateMessage({
+    await sendPatchOrUpdateMessage({
       page,
-      newContent,
+      content: newContent,
       model: 'page',
+      sdk,
+      updateFn: () => '#go',
+      path: '/data/blocks/0/component/options/link',
     });
 
     const updatedButtonLocator = checkIsRN(sdk) ? page.frameLocator('iframe').locator('a') : page

From a9222327033bfa215301e1e190403672cca93171 Mon Sep 17 00:00:00 2001
From: Yash Wadhia <yashwadhia@Yashs-MacBook-Pro.local>
Date: Mon, 3 Mar 2025 21:09:14 +0530
Subject: [PATCH 8/9] fix: Added fail case along with description for test
 failing in oldReact

---
 packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts b/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
index 5145835f587..aac2ab47326 100644
--- a/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
+++ b/packages/sdks-tests/src/e2e-tests/dynamic-button.spec.ts
@@ -9,13 +9,13 @@ import { DYNAMIC_BUTTON } from '../specs/dynamic-button.js';
 
 test.describe('Dynamic Button', () => {
   test('should render a button', async ({ page, sdk, basePort, packageName }) => {
-    test.fail(sdk === 'svelte', 'Not showing the href attribute in Svelte');
+
+    test.fail(sdk === 'svelte' || sdk === 'oldReact', 'Not showing the href attribute in Svelte');
     test.skip(
       packageName === 'nextjs-sdk-next-app' ||
         packageName === 'gen1-next14-pages' ||
         packageName === 'gen1-next15-app' ||
-        packageName === 'gen1-remix' ||
-        packageName === 'gen1-react'
+        packageName === 'gen1-remix'
     );
     await launchEmbedderAndWaitForSdk({
       path: '/dynamic-button',

From d14b625142e05b7b9925738d24245c35bb88f119 Mon Sep 17 00:00:00 2001
From: Yash Wadhia <188822535+yash-builder@users.noreply.github.com>
Date: Tue, 4 Mar 2025 22:54:28 +0530
Subject: [PATCH 9/9] Update .changeset/loud-jars-sleep.md

Co-authored-by: Sami Jaber <me@sami.website>
---
 .changeset/loud-jars-sleep.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/loud-jars-sleep.md b/.changeset/loud-jars-sleep.md
index 81e66168acb..66940cadb24 100644
--- a/.changeset/loud-jars-sleep.md
+++ b/.changeset/loud-jars-sleep.md
@@ -2,4 +2,4 @@
 "@builder.io/sdk-angular": patch
 ---
 
-Resolved assertion error encountered when dynamically switching components
+Fix: crashes when visually editing blocks (encountered when SDK dynamically switched HTML elements)