fix: state init in angular in correct sequence (#1520)

* sequence matters, first initialize state then binding states * update tests * changeset * tests * Update .changeset/rude-garlics-impress.md --------- Co-authored-by: Sami Jaber <[email protected]>
BuilderIO · Aug 2, 2024 · 4c662df · 4c662df
1 parent 3f5fff1
commit 4c662df
Show file tree

Hide file tree

Showing 10 changed files with 560 additions and 18 deletions.
diff --git a/.changeset/rude-garlics-impress.md b/.changeset/rude-garlics-impress.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+Angular: Fix: state initialization sequence. Initialize states in `ngOnInit` first, followed by bindings that depend upon them.
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -4969,6 +4969,52 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > stateInitSequence 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+ selector: \\"my-component, MyComponent\\",
+ template: \`
+ <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class MyComponent {
+ @Input() value;
+
+ val = null;
+
+ useObjectWrapper(...args) {
+ let obj = {};
+ args.forEach((arg) => {
+ obj = { ...obj, ...arg };
+ });
+ return obj;
+ }
+
+ ngOnInit() {
+ this.val = this.value;
+ }
+}
+
+@NgModule({
+ declarations: [MyComponent],
+ imports: [CommonModule, CompModule],
+ exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -10824,6 +10870,52 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > stateInitSequence 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+ selector: \\"my-component, MyComponent\\",
+ template: \`
+ <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class MyComponent {
+ @Input() value!: any;
+
+ val = null;
+
+ useObjectWrapper(...args: any[]) {
+ let obj = {};
+ args.forEach((arg) => {
+ obj = { ...obj, ...arg };
+ });
+ return obj;
+ }
+
+ ngOnInit() {
+ this.val = this.value;
+ }
+}
+
+@NgModule({
+ declarations: [MyComponent],
+ imports: [CommonModule, CompModule],
+ exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";

diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -5065,6 +5065,53 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > stateInitSequence 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+ selector: \\"my-component, MyComponent\\",
+ template: \`
+ <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class MyComponent {
+ @Input() value;
+
+ val = null;
+
+ useObjectWrapper(...args) {
+ let obj = {};
+ args.forEach((arg) => {
+ obj = { ...obj, ...arg };
+ });
+ return obj;
+ }
+
+ ngOnInit() {
+ this.val = this.value;
+ }
+}
+
+@NgModule({
+ declarations: [MyComponent],
+ imports: [CommonModule, CompModule],
+ exports: [MyComponent],
+ bootstrap: [SomeOtherComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -11030,6 +11077,53 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > stateInitSequence 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+ selector: \\"my-component, MyComponent\\",
+ template: \`
+ <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class MyComponent {
+ @Input() value!: any;
+
+ val = null;
+
+ useObjectWrapper(...args: any[]) {
+ let obj = {};
+ args.forEach((arg) => {
+ obj = { ...obj, ...arg };
+ });
+ return obj;
+ }
+
+ ngOnInit() {
+ this.val = this.value;
+ }
+}
+
+@NgModule({
+ declarations: [MyComponent],
+ imports: [CommonModule, CompModule],
+ exports: [MyComponent],
+ bootstrap: [SomeOtherComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";

diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -5168,6 +5168,52 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > stateInitSequence 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+ selector: \\"my-component, MyComponent\\",
+ template: \`
+ <Comp [val]=\\"node_0_Comp\\">{{val}}</Comp>
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class MyComponent {
+ @Input() value;
+
+ val = null;
+ node_0_Comp = null;
+
+ ngOnInit() {
+ this.val = this.value;
+ this.node_0_Comp = { ...this.val };
+ }
+
+ ngOnChanges() {
+ if (typeof window !== \\"undefined\\") {
+ this.node_0_Comp = { ...this.val };
+ }
+ }
+}
+
+@NgModule({
+ declarations: [MyComponent],
+ imports: [CommonModule, CompModule],
+ exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -11224,6 +11270,52 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > stateInitSequence 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+ selector: \\"my-component, MyComponent\\",
+ template: \`
+ <Comp [val]=\\"node_0_Comp\\">{{val}}</Comp>
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class MyComponent {
+ @Input() value!: any;
+
+ val = null;
+ node_0_Comp = null;
+
+ ngOnInit() {
+ this.val = this.value;
+ this.node_0_Comp = { ...this.val };
+ }
+
+ ngOnChanges() {
+ if (typeof window !== \\"undefined\\") {
+ this.node_0_Comp = { ...this.val };
+ }
+ }
+}
+
+@NgModule({
+ declarations: [MyComponent],
+ imports: [CommonModule, CompModule],
+ exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > styleClassAndCss 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";