fix: ENG-8176 fallback UI for unknown elements

.changeset/odd-ducks-joke.md

@@ -0,0 +1,5 @@
+---
+"@builder.io/sdk-angular": patch
+---
+
+Fix: handle the rendering of unknown HTML elements.

packages/sdks-tests/src/e2e-tests/duplicate-attributes.spec.ts

@@ -1,13 +1,10 @@
 import { expect } from '@playwright/test';
-import { excludeTestFor, test } from '../helpers/index.js';
+import { test } from '../helpers/index.js';
 
 test.describe('Duplicate Attributes', () => {
-  test('wrapped block has no duplicate attributes', async ({ page, packageName, sdk }) => {
-    test.fail(
-      excludeTestFor({ angular: true }, sdk),
-      'attributes not spread out so cant set footer'
-    );
+  test('wrapped block has no duplicate attributes', async ({ page, packageName }) => {
     test.skip(packageName === 'react-native-74' || packageName === 'react-native-76-fabric');
+
     await page.goto('/duplicate-attributes');
 
     const footer = await page.locator('footer');

packages/sdks-tests/src/e2e-tests/dynamic-element.spec.ts

@@ -0,0 +1,16 @@
+import { expect } from '@playwright/test';
+import { test } from '../helpers/index.js';
+
+test.describe('Unknown Element', () => {
+  test('unknown element is rendered', async ({ page, sdk }) => {
+    test.skip(sdk !== 'angular');
+    await page.goto('/dynamic-element');
+
+    const tagNameLocator = await page.locator('test');
+    const tagNameId = await tagNameLocator.getAttribute('builder-id');
+
+    expect(tagNameId).toBe('builder-493100cea9504d56886045462b65b481');
+    await expect(tagNameLocator).toHaveAttribute('class','builder-493100cea9504d56886045462b65b481 builder-block');
+    await expect(tagNameLocator).toHaveText('testing text');
+  });
+});

packages/sdks-tests/src/specs/dynamic-element.ts

@@ -0,0 +1,47 @@
+export const DYNAMIC_ELEMENT ={
+    "data": {
+      "title": "angular-test-1",
+      "themeId": false,
+      "blocks": [
+        {
+          "@type": "@builder.io/sdk:Element",
+          "@version": 2,
+          "tagName": "test",
+          "id": "builder-493100cea9504d56886045462b65b481",
+          "component": { "name": "Text", "options": { "text": "testing text" } },
+          "responsiveStyles": {
+            "large": {
+              "display": "flex",
+              "flexDirection": "column",
+              "position": "relative",
+              "flexShrink": "0",
+              "boxSizing": "border-box",
+              "marginTop": "20px",
+              "lineHeight": "normal",
+              "height": "auto"
+            }
+          }
+        },
+        {
+          "@type": "@builder.io/sdk:Element",
+          "@version": 2,
+          "tagName": "p",
+          "id": "builder-f6bddd39177d490fb278ad6516fa6a75",
+          "component": { "name": "Text", "options": { "text": "2222" } },
+          "responsiveStyles": {
+            "large": {
+              "display": "flex",
+              "flexDirection": "column",
+              "position": "relative",
+              "flexShrink": "0",
+              "boxSizing": "border-box",
+              "marginTop": "20px",
+              "lineHeight": "normal",
+              "height": "auto"
+            }
+          }
+        }
+      ]
+    }
+  }
+

packages/sdks-tests/src/specs/index.ts

@@ -83,6 +83,7 @@ import {
 } from './variant-containers.js';
 import { EMBED_AND_CUSTOM_CODE } from './embed-and-custom-code.js';
 import { COLUMNS_VERTICAL_CENTER_FLEX } from './columns-vertical-center-flex.js';
+import { DYNAMIC_ELEMENT } from './dynamic-element.js';
 
 function isBrowser(): boolean {
   return typeof window !== 'undefined' && typeof document !== 'undefined';
@@ -271,6 +272,7 @@ export const PAGES: Record<string, Page> = {
   },
   '/columns-vertical-center-flex': { content: COLUMNS_VERTICAL_CENTER_FLEX },
   '/can-track-false-pre-init': { content: HOMEPAGE, target: 'gen1' },
+  '/dynamic-element': { content: DYNAMIC_ELEMENT },
 } as const;
 
 export type Path = keyof typeof PAGES;

packages/sdks/output/angular/scripts/generate-dynamic-renderer.mjs

@@ -76,16 +76,11 @@ const dynamicComponentTemplate = (tagName) => {
 export class Dynamic${capitalize(tagName)} {
   @Input() attributes!: any;
   @Input() actionAttributes?: any;
-
   @ViewChild('v', { read: ElementRef }) v!: ElementRef;
-
   _listenerFns = new Map<string, () => void>();
-
   constructor(private renderer: Renderer2) {}
-
   setAttributes(el: any, value: any, changes?: any) {
     if (!el) return;
-
     const target = changes ? changes : value;
     Object.keys(target).forEach((key) => {
       if (key.startsWith('on')) {
@@ -98,17 +93,14 @@ export class Dynamic${capitalize(tagName)} {
       }
     });
   }
-
   ngAfterViewInit() {
     this.setAttributes(this.v?.nativeElement, this.attributes);
   }
-
   ngOnChanges(changes: SimpleChanges) {
     if (changes.attributes) {
       this.setAttributes(this.v?.nativeElement, this.attributes, changes.attributes.currentValue);
     }
   }
-
   ngOnDestroy() {
     this._listenerFns.forEach(fn => fn());
   }
@@ -132,19 +124,33 @@ const generateComponents = () => {
             TagName;
             inputs: {
               attributes: attributes,
-              actionAttributes: actionAttributes
+              actionAttributes: actionAttributes,
+              tagName: tagName
+            };
+            content: myContent
+          "
+        ></ng-container>
+      </ng-container>
+      <ng-container *ngIf="!(useTypeOf(TagName) === 'string') && getClassName() === 'DynamicElement'">
+        <ng-container
+          *ngComponentOutlet="
+            TagName;
+            inputs: {
+              attributes: attributes,
+              actionAttributes: actionAttributes,
+              tagName: tagName
             };
             content: myContent
           "
         ></ng-container>
       </ng-container>
-      <ng-container *ngIf="!(useTypeOf(TagName) === 'string')">
+       <ng-container *ngIf="!(useTypeOf(TagName) === 'string') && getClassName() === ''">
         <ng-container
           *ngComponentOutlet="
             TagName;
             inputs: {
               attributes: attributes,
-              actionAttributes: actionAttributes
+              actionAttributes: actionAttributes,
             };
             content: myContent
           "
@@ -157,7 +163,7 @@ const generateComponents = () => {
           TagName;
           inputs: {
             attributes: attributes,
-            actionAttributes: actionAttributes
+            actionAttributes: actionAttributes,
           };
           content: myContent
         "
@@ -174,22 +180,31 @@ export default class DynamicRenderer {
   @Input() TagName!: any;
   @Input() attributes!: any;
   @Input() actionAttributes!: any;
+  @Input() tagName : string;
 
   @ViewChild('tagnameTemplate', { static: true }) tagnameTemplateRef!: TemplateRef<any>;
 
+  className: string = '';
   myContent?: any[][];
 
   useTypeOf(obj: any): string {
     return typeof obj;
   }
 
+  getClassName(): string {
+    return this.className;
+  }
+
   constructor(private vcRef: ViewContainerRef) {}
 
   ngOnInit() {
     if (typeof this.TagName === 'string') {
       switch (this.TagName) {
         ${htmlElements.map((el) => `case '${el}': this.TagName = Dynamic${capitalize(el)}; break;`).join('\n        ')}
         default:
+          this.tagName = this.TagName;
+          this.TagName = DynamicElement;
+          this.className = 'DynamicElement';
           break;
       }
     }
@@ -198,9 +213,60 @@ export default class DynamicRenderer {
 }
 `;
 
-  htmlElements.forEach((tagName) => {
-    dynamicRendererCode += dynamicComponentTemplate(tagName) + '\n';
-  });
+htmlElements.forEach((tagName) => {
+  dynamicRendererCode += dynamicComponentTemplate(tagName) + '\n';
+});
+
+  dynamicRendererCode += `
+  @Component({
+      selector: 'dynamic-element',
+      template: '<ng-content></ng-content>',
+      standalone: true
+    })
+
+    export class DynamicElement {
+      @Input() tagName: string;
+      @Input() attributes: any;
+      @Input() actionAttributes: any;
+
+      private _element!: HTMLElement;
+      private _listenerFns = new Map<string, () => void>();
+
+      constructor(private hostRef: ElementRef, private renderer: Renderer2) {}
+
+      ngOnInit() {
+        if(this.tagName){
+          this._element = this.renderer.createElement(this.tagName);
+          this.renderer.appendChild(this.hostRef.nativeElement, this._element);
+          this.setAttributes(this._element, this.attributes);
+        }
+      }
+
+      ngAfterViewInit(){
+        if(this.hostRef.nativeElement.children.length > 1){
+          this.renderer.appendChild(this.hostRef.nativeElement.children[1], this.hostRef.nativeElement.children[0]);
+        }
+      }
+
+      ngOnDestroy() {
+        this._listenerFns.forEach((fn) => fn());
+      }
+
+      setAttributes(el: any, attributes: any) {
+        if (!attributes) return;
+        Object.keys(attributes).forEach((key) => {
+          if (key.startsWith('on')) {
+            if (this._listenerFns.has(key)) {
+              this._listenerFns.get(key)!();
+            }
+            const eventType = key.replace('on', '').toLowerCase();
+            this._listenerFns.set(key, this.renderer.listen(el, eventType, attributes[key]));
+          } else {
+            this.renderer.setAttribute(el, key, attributes[key] ?? '');
+          }
+        });
+      }
+    }`
 
   fs.writeFileSync(PATH_TO_DYNAMIC_RENDERER, dynamicRendererCode);
 

packages/sdks/src/components/block/block.lite.tsx

@@ -146,7 +146,7 @@ export default function Block(props: BlockProps) {
          * eslint-disable-next-line @typescript-eslint/ban-ts-comment
          * @ts-ignore */
         reactNative: View,
-        angular: DynamicDiv,
+        angular: props.block.tagName || DynamicDiv,
         default: props.block.tagName || 'div',
       });
     },