fix: state initialization in angular sdk (#3456)

## Description Fix state initialization in Angular and remove all hacks to correctly initialise states, fixes show-if hide-ifs, repeat elements, reactivity and some blocks Jira https://builder-io.atlassian.net/browse/ENG-6293 _Screenshot_ If relevant, add a screenshot or two of the changes you made.
BuilderIO · Aug 7, 2024 · 53d3cf9 · 53d3cf9
1 parent 11e118c
commit 53d3cf9
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 91 deletions.
diff --git a/.changeset/hungry-lizards-attend.md b/.changeset/hungry-lizards-attend.md
@@ -0,0 +1,5 @@
+---
+"@builder.io/sdk-angular": patch
+---
+
+Fix: State inits in Angular which fixes repeat elements, show-if and hide-if and Columns
diff --git a/packages/sdks-tests/src/e2e-tests/blocks.spec.ts b/packages/sdks-tests/src/e2e-tests/blocks.spec.ts
@@ -3,14 +3,7 @@ import fs from 'fs';
 import path from 'path';
 import { VIDEO_CDN_URL } from '../specs/video.js';
 import type { ExpectedStyles } from '../helpers/index.js';
-import {
-  excludeRn,
-  excludeTestFor,
-  checkIsRN,
-  test,
-  isSSRFramework,
-  mockFolderPath,
-} from '../helpers/index.js';
+import { excludeRn, checkIsRN, test, isSSRFramework, mockFolderPath } from '../helpers/index.js';
 
 test.describe('Blocks', () => {
   test('Text', async ({ page, sdk, packageName }) => {
@@ -406,10 +399,6 @@ test.describe('Blocks', () => {
               "intermittent success, can't use test.fail()"
             );
 
-            test.fail(
-              (sizeName === 'mobile' || sizeName === 'tablet') &&
-                excludeTestFor({ angular: true }, sdk)
-            );
             await page.setViewportSize(size);
             await page.goto('/columns');
             const columns = checkIsRN(sdk)
@@ -445,10 +434,6 @@ test.describe('Blocks', () => {
 
     test('check different width columns are correctly rendered', async ({ page, sdk }) => {
       test.skip(checkIsRN(sdk));
-      test.fail(
-        excludeTestFor({ angular: true }, sdk),
-        "Angular SDK columns don't set the width correctly"
-      );
 
       await page.goto('/columns-with-different-widths');
 
@@ -488,10 +473,6 @@ test.describe('Blocks', () => {
 
     test('space is correctly allocated', async ({ page, sdk }) => {
       test.skip(checkIsRN(sdk));
-      test.fail(
-        excludeTestFor({ angular: true }, sdk),
-        "Angular SDK columns don't set the width correctly"
-      );
 
       await page.goto('/columns-with-different-widths');
 

diff --git a/packages/sdks-tests/src/e2e-tests/repeat-items-bindings.spec.ts b/packages/sdks-tests/src/e2e-tests/repeat-items-bindings.spec.ts
@@ -1,9 +1,8 @@
 import { expect } from '@playwright/test';
-import { excludeTestFor, test } from '../helpers/index.js';
+import { test } from '../helpers/index.js';
 
 test.describe('Repeat items bindings', () => {
   test('Updating state should display repeat collection', async ({ page, sdk }) => {
-    test.fail(excludeTestFor({ angular: true }, sdk), 'Angular Gen2 SDK not implemented.');
     test.fail(sdk === 'rsc', "NextJS SDK doesn't support state updates");
 
     await page.goto('/repeat-items-bindings/');

diff --git a/packages/sdks-tests/src/e2e-tests/show-hide-if.spec.ts b/packages/sdks-tests/src/e2e-tests/show-hide-if.spec.ts
@@ -35,7 +35,6 @@ test.describe('Show If & Hide If', () => {
   });
   test('works with repeat elements', async ({ page, packageName, sdk }) => {
     test.fail(excludeTestFor({ rsc: true }, sdk), 'RSC SDK has no interactivity');
-    test.fail(excludeTestFor({ angular: true }, sdk), 'Angular SDK does not support this yet');
 
     // since these are flaky tests, we have to `.skip()` instead of `.fail()`, seeing as they might sometimes pass.
     test.skip(

diff --git a/packages/sdks/mitosis.config.cjs b/packages/sdks/mitosis.config.cjs
@@ -235,13 +235,6 @@ const ANGULAR_OVERRIDE_COMPONENT_REF_PLUGIN = () => ({
   code: {
     post: (code) => {
       if (code.includes('component-ref, ComponentRef')) {
-        // onInit we check for this.isInteractive as its available at that time
-        // and set the Wrapper to InteractiveElement or componentRef
-        code = code.replace(
-          'ngOnInit() {\n',
-          `ngOnInit() {\n  this.Wrapper = this.isInteractive ? InteractiveElement : this.componentRef;\n`
-        );
-        // we need to wrap the blockChildren in a ngIf to prevent rendering when componentRef is undefined
         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">'
@@ -493,25 +486,6 @@ const ANGULAR_BIND_THIS_FOR_WINDOW_EVENTS = () => ({
 
 // required for registering custom components properly
 const ANGULAR_INITIALIZE_PROP_ON_NG_ONINIT = () => ({
-  json: {
-    pre: (json) => {
-      if (json.name === 'ContentComponent') {
-        const builderContextSignalCode =
-          json.state['builderContextSignal'].code;
-        const registeredComponentsCode =
-          json.state['registeredComponents'].code;
-        if (!json.hooks.onInit?.code) {
-          json.hooks.onInit = {
-            code: '',
-          };
-        }
-        json.hooks.onInit.code += `
-          this.builderContextSignal = ${builderContextSignalCode};
-          this.registeredComponents = ${registeredComponentsCode};
-          `;
-      }
-    },
-  },
   code: {
     post: (code) => {
       if (code.includes('content-component, ContentComponent')) {
@@ -520,18 +494,6 @@ const ANGULAR_INITIALIZE_PROP_ON_NG_ONINIT = () => ({
           'this.contentSetState.bind(this)'
         );
       }
-      if (code.includes('content-styles, ContentStyles')) {
-        const injectedStyles = code.match(/injectedStyles = `.*;/s);
-        code = code.replace(
-          /}\n\s*$/,
-          `
-            ngOnInit() {
-              this.${injectedStyles}
-            }
-          }
-          `
-        );
-      }
       return code;
     },
   },
@@ -737,6 +699,13 @@ module.exports = {
               if (json.name === 'CustomCode') {
                 json.refs.elementRef.typeParameter = 'any';
               }
+
+              /**
+               * Fix component name as `Button` is imported from react-native
+               */
+              if (json.name === 'Button') {
+                json.name = 'BuilderButton';
+              }
             },
           },
         }),

diff --git a/packages/sdks/package.json b/packages/sdks/package.json
@@ -57,8 +57,8 @@
     "upgrade-example:all": "yarn loop upgrade-example latest"
   },
   "dependencies": {
-    "@builder.io/mitosis": "0.3.16",
-    "@builder.io/mitosis-cli": "0.3.16",
+    "@builder.io/mitosis": "0.3.20",
+    "@builder.io/mitosis-cli": "0.3.20",
     "isolated-vm": "^5.0.0",
     "node-fetch": "^2.6.1",
     "nx": "16.10.0",

diff --git a/packages/sdks/src/blocks/columns/columns.lite.tsx b/packages/sdks/src/blocks/columns/columns.lite.tsx
@@ -164,14 +164,18 @@ export default function Columns(props: ColumnProps) {
     },
 
     columnsStyles(): string {
+      const childColumnDiv = useTarget({
+        angular: `.${props.builderBlock.id}-breakpoints .builder-column:first-of-type`,
+        default: `.${props.builderBlock.id}-breakpoints > .builder-column`,
+      });
       return `
         @media (max-width: ${state.getWidthForBreakpointSize('medium')}px) {
           .${props.builderBlock.id}-breakpoints {
             flex-direction: var(--flex-dir-tablet);
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-tablet) !important;
             margin-left: var(--column-margin-left-tablet) !important;
           }
@@ -183,7 +187,7 @@ export default function Columns(props: ColumnProps) {
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-mobile) !important;
             margin-left: var(--column-margin-left-mobile) !important;
           }

diff --git a/packages/sdks/src/blocks/symbol/symbol.lite.tsx b/packages/sdks/src/blocks/symbol/symbol.lite.tsx
@@ -93,9 +93,7 @@ export default function Symbol(props: SymbolProps) {
       react: () => {},
       reactNative: () => {},
       solid: () => {},
-      angular: () => {
-        state.contentToUse = props.symbol?.content;
-      },
+      angular: () => {},
 
       default: () => {
         state.setContent();

diff --git a/packages/sdks/src/components/content-variants/content-variants.lite.tsx b/packages/sdks/src/components/content-variants/content-variants.lite.tsx
@@ -1,7 +1,6 @@
 import {
   For,
   Show,
-  onInit,
   onMount,
   useMetadata,
   useStore,
@@ -82,17 +81,6 @@ export default function ContentVariants(props: VariantsProviderProps) {
     },
   });
 
-  onInit(() => {
-    useTarget({
-      angular: () => {
-        state.shouldRenderVariants = checkShouldRenderVariants({
-          canTrack: getDefaultCanTrack(props.canTrack),
-          content: props.content,
-        });
-      },
-    });
-  });
-
   return (
     <>
       <Show when={!props.isNestedRender && TARGET !== 'reactNative'}>

diff --git a/yarn.lock b/yarn.lock
@@ -3707,11 +3707,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@builder.io/mitosis-cli@npm:0.3.16":
-  version: 0.3.16
-  resolution: "@builder.io/mitosis-cli@npm:0.3.16"
+"@builder.io/mitosis-cli@npm:0.3.20":
+  version: 0.3.20
+  resolution: "@builder.io/mitosis-cli@npm:0.3.20"
   dependencies:
-    "@builder.io/mitosis": 0.3.16
+    "@builder.io/mitosis": 0.3.20
     debug: ^4.3.4
     dedent: ^0.7.0
     esbuild: ^0.12.16
@@ -3724,13 +3724,13 @@ __metadata:
     ts-morph: ^19.0.0
   bin:
     mitosis: bin/mitosis
-  checksum: 950f196d4acf0f5664de8946bb12901cbf2856086057cfc0b7a0b1b7d2ea250fa4693347f696b9f677a80e50e0752aa1a8e6e625e9d839ae117d76a99c473ee5
+  checksum: 716412537d9c9bc17f5cffdf3b5da9ec5c4728350c4c3c1e9eae074834ff82ba70435f4544ad22b7903f2dbbf26fc0951a548e8bf4b0f6af941f6091d874cc29
   languageName: node
   linkType: hard
 
-"@builder.io/mitosis@npm:0.3.16":
-  version: 0.3.16
-  resolution: "@builder.io/mitosis@npm:0.3.16"
+"@builder.io/mitosis@npm:0.3.20":
+  version: 0.3.20
+  resolution: "@builder.io/mitosis@npm:0.3.20"
   dependencies:
     "@angular/compiler": ^11.2.11
     "@babel/core": 7.14.5
@@ -3755,7 +3755,7 @@ __metadata:
     svelte-preprocess: ^5.0.3
     ts-morph: ^19.0.0
     typescript: ^5.3.2
-  checksum: 111fc5452bf8668120b137d0653ca8acb9069aaa73f248cce31574674020b63ae219ec8bb7c3b506a2fa412270f0aea14b1e860c7b2d393318c58b292e100dda
+  checksum: 89dcfc425b523746234b73488e6e20e1692c335925ffb264fc9ce77883559de67e9e11b0b6ea62ba27f2d1fa12fe1d56db6248f2225c323f7b7641421d7005d6
   languageName: node
   linkType: hard
 
@@ -4164,8 +4164,8 @@ __metadata:
   dependencies:
     "@arethetypeswrong/cli": ^0.13.3
     "@builder.io/eslint-plugin-mitosis": ^0.0.16
-    "@builder.io/mitosis": 0.3.16
-    "@builder.io/mitosis-cli": 0.3.16
+    "@builder.io/mitosis": 0.3.20
+    "@builder.io/mitosis-cli": 0.3.20
     "@types/node-fetch": ^2.5.12
     "@types/seedrandom": ^3.0.4
     "@types/traverse": ^0.6.32