Angular SDK: address editor perf issues (#3461)

## Description https://www.loom.com/share/873dcbb2304149c9b8a36765a8134c40 overlay: https://www.loom.com/share/00e5c482e3df46e984718ec11b25b970
BuilderIO · Aug 8, 2024 · 22a3865 · 22a3865
1 parent c215cf8
commit 22a3865
Show file tree

Hide file tree

Showing 9 changed files with 131 additions and 31 deletions.
diff --git a/.changeset/seven-bears-stare.md b/.changeset/seven-bears-stare.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/sdk-angular': patch
+---
+
+Fix: Symbol infinite re-render and editor overlay not showing up.
diff --git a/packages/sdks/mitosis.config.cjs b/packages/sdks/mitosis.config.cjs
@@ -209,7 +209,49 @@ const filterActionAttrBindings = (json, item) => {
   });
 };
 
+/**
+ * @type {Plugin}
+ */
+const ANGULAR_ADD_UNUSED_PROP_TYPES = () => ({
+  json: {
+    post: (json) => {
+      if (json.name === 'BuilderImage' || json.name === 'BuilderSymbol') {
+        json.hooks.onMount = json.hooks.onMount.filter(
+          (hook) =>
+            !hook.code.includes(
+              '/** this is a hack to include the input in angular */'
+            )
+        );
+      }
+      return json;
+    },
+  },
+});
+
+/**
+ * @type {Plugin}
+ * We explicitly add the builder-id attribute to the symbol component for Angular,
+ * because mitosis doesn't support spreading `props.attributes` yet.
+ *
+ */
+const ANGULAR_FIX_SYMBOL_BUILDER_ID_ATTRIBUTE = () => ({
+  json: {
+    post: (json) => {
+      if (json.name === 'BuilderSymbol') {
+        json.children[0].bindings['builder-id'] = {
+          code: "props.attributes['builder-id']",
+          type: 'single',
+        };
+      }
+      return json;
+    },
+  },
+});
+
 // for fixing circular dependencies
+/**
+ * @type {Plugin}
+ */
 const ANGULAR_FIX_CIRCULAR_DEPENDENCIES_OF_COMPONENTS = () => ({
   code: {
     post: (code) => {
@@ -235,14 +277,12 @@ const ANGULAR_OVERRIDE_COMPONENT_REF_PLUGIN = () => ({
   code: {
     post: (code) => {
       if (code.includes('component-ref, ComponentRef')) {
-        code = code.replace(
-          '<ng-container *ngFor="let child of blockChildren; trackBy: trackByChild0">',
-          '<ng-container *ngIf="componentRef">\n<ng-container *ngFor="let child of blockChildren; trackBy: trackByChild0">'
-        );
-        code = code.replace(
-          '</ng-container>',
-          '</ng-container>\n</ng-container>'
-        );
+        code = code
+          .replace(
+            '<ng-container *ngFor="let child of blockChildren; trackBy: trackByChild0">',
+            '<ng-container *ngIf="componentRef">\n<ng-container *ngFor="let child of blockChildren; trackBy: trackByChild0">'
+          )
+          .replace('</ng-container>', '</ng-container>\n</ng-container>');
       }
       return code;
     },
@@ -254,7 +294,7 @@ const ANGULAR_BLOCKS_WRAPPER_MERGED_INPUT_REACTIVITY_PLUGIN = () => ({
     post: (code) => {
       if (code?.includes('blocks-wrapper, BlocksWrapper')) {
         const mergedInputsCode = code.match(/this.mergedInputs_.* = \{.*\};/s);
-        code = code.replace('ngOnInit', 'ngAfterViewInit');
+        code = code.replace('ngOnInit', 'ngAfterContentInit');
         code = code.replace(
           /}\n\s*$/,
           `
@@ -532,13 +572,15 @@ module.exports = {
       state: 'class-properties',
       plugins: [
         ANGULAR_FIX_CIRCULAR_DEPENDENCIES_OF_COMPONENTS,
+        ANGULAR_FIX_SYMBOL_BUILDER_ID_ATTRIBUTE,
         ANGULAR_OVERRIDE_COMPONENT_REF_PLUGIN,
         ANGULAR_COMPONENT_NAMES_HAVING_HTML_TAG_NAMES,
         INJECT_ENABLE_EDITOR_ON_EVENT_HOOKS_PLUGIN,
         ANGULAR_INITIALIZE_PROP_ON_NG_ONINIT,
         ANGULAR_BIND_THIS_FOR_WINDOW_EVENTS,
         ANGULAR_WRAP_SYMBOLS_FETCH_AROUND_CHANGES_DEPS,
         ANGULAR_BLOCKS_WRAPPER_MERGED_INPUT_REACTIVITY_PLUGIN,
+        ANGULAR_ADD_UNUSED_PROP_TYPES,
       ],
     },
     solid: {

diff --git a/packages/sdks/output/angular/scripts/multi-build.mjs b/packages/sdks/output/angular/scripts/multi-build.mjs
@@ -83,15 +83,24 @@ const alias = getEvaluatorPathAlias();
 const folderName = alias['placeholder-runtime'];
 transformFile(chooseEvalFile, folderName);
 
-// Run the Angular build command
-execSync(`ng build --project sdk-angular`, { stdio: 'inherit' });
+let caughtError = undefined;
+try {
+  // Run the Angular build command
+  execSync(`ng build --project sdk-angular`, { stdio: 'inherit' });
 
-// Remove any `package.json` generated inside the `lib/*` folder
-const packageJsonPath = path.resolve(outputPath, 'package.json');
+  // Remove any `package.json` generated inside the `lib/*` folder
+  const packageJsonPath = path.resolve(outputPath, 'package.json');
 
-if (fs.existsSync(packageJsonPath)) {
-  fs.unlinkSync(packageJsonPath);
+  if (fs.existsSync(packageJsonPath)) {
+    fs.unlinkSync(packageJsonPath);
+  }
+} catch (error) {
+  caughtError = error;
+} finally {
+  // Revert the choose-eval.ts file to its original state i.e, "placeholder-runtime"
+  transformFile(chooseEvalFile, folderName, true);
 }
 
-// Revert the choose-eval.ts file to its original state i.e, "placeholder-runtime"
-transformFile(chooseEvalFile, folderName, true);
+if (caughtError) {
+  throw caughtError;
+}
diff --git a/packages/sdks/overrides/angular/src/components/dynamic-div.ts b/packages/sdks/overrides/angular/src/components/dynamic-div.ts
@@ -69,21 +69,31 @@ export default class DynamicDiv {
     this.setAttribute(el, 'aria-hidden', this.ariaHidden);
   }
 
-  ngOnChanges() {
+  ngOnChanges(changes) {
     const el = this.v && this.v.nativeElement;
     if (!el) {
       return;
     }
-    this.setAttributes(el, this.attributes);
-    this.setAttributes(el, this.showContentProps);
-    this.setAttribute(el, 'class', this.classProp);
-    this.setAttribute(el, 'style', this.style);
-    this.setAttribute(el, 'builder-parent-id', this.builderParentId);
-    this.setAttribute(el, 'builder-path', this.builderPath);
-    this.setAttribute(el, 'builder-model', this.builderModel);
-    this.setAttribute(el, 'builder-content-id', this.builderContentId);
-    this.setAttribute(el, 'hidden', this.hidden);
-    this.setAttribute(el, 'aria-hidden', this.ariaHidden);
+
+    if (Object.keys(changes).length === 0) {
+      return;
+    }
+
+    if (changes.attributes) this.setAttributes(el, this.attributes);
+    if (changes.showContentProps) this.setAttributes(el, this.showContentProps);
+    if (changes.classProp) this.setAttribute(el, 'class', this.classProp);
+    if (changes.style) this.setAttribute(el, 'style', this.style);
+    if (changes.builderParentId)
+      this.setAttribute(el, 'builder-parent-id', this.builderParentId);
+    if (changes.builderPath)
+      this.setAttribute(el, 'builder-path', this.builderPath);
+    if (changes.builderModel)
+      this.setAttribute(el, 'builder-model', this.builderModel);
+    if (changes.builderContentId)
+      this.setAttribute(el, 'builder-content-id', this.builderContentId);
+    if (changes.hidden) this.setAttribute(el, 'hidden', this.hidden);
+    if (changes.ariaHidden)
+      this.setAttribute(el, 'aria-hidden', this.ariaHidden);
   }
 
   private setAttributes(el: HTMLElement, attributes: any) {

diff --git a/packages/sdks/overrides/angular/src/components/dynamic-renderer/dynamic-renderer.ts b/packages/sdks/overrides/angular/src/components/dynamic-renderer/dynamic-renderer.ts
@@ -6,6 +6,7 @@ import {
   ElementRef,
   Input,
   Renderer2,
+  SimpleChanges,
   TemplateRef,
   ViewChild,
   ViewContainerRef,
@@ -133,7 +134,9 @@ export class DynamicImage {
     }
   }
 
-  ngOnChanges() {
+  ngOnChanges(changes: SimpleChanges) {
+    if (!changes.attributes) return;
+
     const el = this.v && this.v.nativeElement;
     if (el && this.attributes) {
       Object.keys(this.attributes).forEach((key) => {

diff --git a/packages/sdks/src/blocks/image/image.lite.tsx b/packages/sdks/src/blocks/image/image.lite.tsx
@@ -1,4 +1,10 @@
-import { Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {
+  onMount,
+  Show,
+  useMetadata,
+  useStore,
+  useTarget,
+} from '@builder.io/mitosis';
 import type { JSX } from '@builder.io/mitosis/jsx-runtime';
 import { getSrcSet } from './image.helpers.js';
 import type { ImageProps } from './image.types.js';
@@ -62,6 +68,21 @@ export default function Image(props: ImageProps) {
       return out;
     },
   });
+
+  onMount(() => {
+    useTarget({
+      angular: () => {
+        /** this is a hack to include the input in angular */
+        const _ = {
+          a: props.lockAspectRatio,
+          b: props.width,
+          c: props.height,
+          d: props.lazy,
+          e: props.attributes,
+        };
+      },
+    });
+  });
   return (
     <>
       <picture>

diff --git a/packages/sdks/src/blocks/image/image.types.ts b/packages/sdks/src/blocks/image/image.types.ts
@@ -1,6 +1,7 @@
 import type { BuilderBlock } from '../../types/builder-block.js';
 
 export interface ImageProps {
+  attributes?: string;
   highPriority?: boolean;
   className?: string;
   image: string;
@@ -13,6 +14,7 @@ export interface ImageProps {
   backgroundPosition?: string;
   srcset?: string;
   aspectRatio?: number;
+  lockAspectRatio?: boolean;
   children?: any;
   fitContent?: boolean;
   builderBlock?: BuilderBlock;

diff --git a/packages/sdks/src/blocks/symbol/symbol.lite.tsx b/packages/sdks/src/blocks/symbol/symbol.lite.tsx
@@ -93,7 +93,14 @@ export default function Symbol(props: SymbolProps) {
       react: () => {},
       reactNative: () => {},
       solid: () => {},
-      angular: () => {},
+      angular: () => {
+        /** this is a hack to include the input in angular */
+        const _ = {
+          a: props.dataOnly,
+          b: props.inheritState,
+          c: props.renderToLiquid,
+        };
+      },
 
       default: () => {
         state.setContent();

diff --git a/packages/sdks/src/blocks/symbol/symbol.types.ts b/packages/sdks/src/blocks/symbol/symbol.types.ts
@@ -23,4 +23,5 @@ export interface SymbolProps
   dynamic?: boolean;
   attributes?: any;
   inheritState?: boolean;
+  renderToLiquid?: boolean;
 }