Skip to content

Commit

Permalink
Fix: Angular ngOnChanges (#1525)
Browse files Browse the repository at this point in the history 
* add import

* f

* f

* f

* f
  • Loading branch information
@samijaber
samijaber authored Aug 7, 2024
1 parent 03f1f58 commit 45de754
Show file tree
Hide file tree
Showing 8 changed files with 411 additions and 326 deletions.
5 changes: 5 additions & 0 deletions .changeset/afraid-numbers-protect.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@builder.io/mitosis': patch
---

Angular: fix: add typed argument `changes: SimpleChanges` to `ngOnChanges` lifecycle hook
5 changes: 5 additions & 0 deletions .changeset/ninety-lies-boil.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@builder.io/mitosis': patch
---

Angular: Fix: set initial value of `inputs` for `*ngComponentOutlet`to`{}`instead of`null`.
90 changes: 48 additions & 42 deletions packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export default class MyBasicRefComponent {
return this.name.toLowerCase();
};

ngOnChanges() {
ngOnChanges(changes) {
if (typeof window !== \\"undefined\\") {
console.log(\\"Received an update\\");
}
Expand Down Expand Up @@ -684,7 +684,7 @@ export default class MyPreviousComponent {

private _prevCount = this.count;

ngOnChanges() {
ngOnChanges(changes) {
if (typeof window !== \\"undefined\\") {
this._prevCount = this.count;
}
Expand Down Expand Up @@ -2354,7 +2354,7 @@ import {
ViewChild,
ElementRef,
Input,
ViewContainerRef,
ViewChild,
TemplateRef,
} from \\"@angular/core\\";

Expand Down Expand Up @@ -2522,7 +2522,7 @@ import { Component } from \\"@angular/core\\";
export default class MyBasicOnUpdateReturnComponent {
name = \\"PatrickJS\\";

ngOnChanges() {
ngOnChanges(changes) {
if (typeof window !== \\"undefined\\") {
const controller = new AbortController();
const signal = controller.signal;
Expand Down Expand Up @@ -3058,7 +3058,7 @@ import {
ViewChild,
ElementRef,
Input,
ViewContainerRef,
ViewChild,
TemplateRef,
} from \\"@angular/core\\";

Expand Down Expand Up @@ -3290,7 +3290,7 @@ import { Component } from \\"@angular/core\\";
],
})
export default class MultipleOnUpdate {
ngOnChanges() {
ngOnChanges(changes) {
if (typeof window !== \\"undefined\\") {
console.log(\\"Runs on every update/rerender\\");
console.log(\\"Runs on every update/rerender as well\\");
Expand Down Expand Up @@ -3332,7 +3332,7 @@ export default class MultipleOnUpdateWithDeps {
c = \\"c\\";
d = \\"d\\";

ngOnChanges() {
ngOnChanges(changes) {
if (typeof window !== \\"undefined\\") {
console.log(\\"Runs when this.a or this.b changes\\", this.a, this.b);

Expand Down Expand Up @@ -3756,7 +3756,7 @@ import { Component } from \\"@angular/core\\";
],
})
export default class OnUpdate {
ngOnChanges() {
ngOnChanges(changes) {
if (typeof window !== \\"undefined\\") {
console.log(\\"Runs on every update/rerender\\");
}
Expand Down Expand Up @@ -3797,7 +3797,7 @@ export default class OnUpdateWithDeps {
a = \\"a\\";
b = \\"b\\";

ngOnChanges() {
ngOnChanges(changes) {
if (typeof window !== \\"undefined\\") {
console.log(
\\"Runs when this.a, this.b or size changes\\",
Expand Down Expand Up @@ -4055,7 +4055,7 @@ export default class OnUpdate {
};
};

ngOnChanges() {
ngOnChanges(changes) {
if (typeof window !== \\"undefined\\") {
this.foo({
someOption: this.bar,
Expand All @@ -4082,7 +4082,7 @@ import {
ViewChild,
ElementRef,
Input,
ViewContainerRef,
ViewChild,
TemplateRef,
} from \\"@angular/core\\";

Expand Down Expand Up @@ -4417,7 +4417,7 @@ export default class RenderContent {
}
}

ngOnChanges() {
ngOnChanges(changes) {
if (typeof window !== \\"undefined\\") {
dispatchNewContentToVisualEditor(this.content);
}
Expand Down Expand Up @@ -4804,7 +4804,7 @@ export default class MyBasicComponent {
@Input() id;
@Input() foo;

ngOnChanges() {
ngOnChanges(changes) {
if (typeof window !== \\"undefined\\") {
console.log(\\"props.id changed\\", this.id);
console.log(\\"props.foo.value.bar.baz changed\\", this.foo.value.bar.baz);
Expand Down Expand Up @@ -5486,7 +5486,13 @@ exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Te
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component, ViewChild, ElementRef, Input } from \\"@angular/core\\";
import {
Component,
ViewChild,
ElementRef,
Input,
SimpleChanges,
} from \\"@angular/core\\";

export interface Props {
showInput: boolean;
Expand Down Expand Up @@ -5543,7 +5549,7 @@ export default class MyBasicRefComponent {
return this.name.toLowerCase();
};

ngOnChanges() {
ngOnChanges(changes: SimpleChanges) {
if (typeof window !== \\"undefined\\") {
console.log(\\"Received an update\\");
}
Expand Down Expand Up @@ -6156,7 +6162,7 @@ exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Te
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";
import { Component, SimpleChanges } from \\"@angular/core\\";

export interface Props {
showInput: boolean;
Expand Down Expand Up @@ -6196,7 +6202,7 @@ export default class MyPreviousComponent {

private _prevCount = this.count;

ngOnChanges() {
ngOnChanges(changes: SimpleChanges) {
if (typeof window !== \\"undefined\\") {
this._prevCount = this.count;
}
Expand Down Expand Up @@ -8084,7 +8090,7 @@ import {
ViewChild,
ElementRef,
Input,
ViewContainerRef,
ViewChild,
TemplateRef,
} from \\"@angular/core\\";

Expand Down Expand Up @@ -8245,7 +8251,7 @@ exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Te
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";
import { Component, SimpleChanges } from \\"@angular/core\\";

@Component({
selector:
Expand All @@ -8264,7 +8270,7 @@ import { Component } from \\"@angular/core\\";
export default class MyBasicOnUpdateReturnComponent {
name = \\"PatrickJS\\";

ngOnChanges() {
ngOnChanges(changes: SimpleChanges) {
if (typeof window !== \\"undefined\\") {
const controller = new AbortController();
const signal = controller.signal;
Expand Down Expand Up @@ -8837,7 +8843,7 @@ import {
ViewChild,
ElementRef,
Input,
ViewContainerRef,
ViewChild,
TemplateRef,
} from \\"@angular/core\\";

Expand Down Expand Up @@ -9065,7 +9071,7 @@ exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Te
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";
import { Component, SimpleChanges } from \\"@angular/core\\";

@Component({
selector: \\"multiple-on-update, MultipleOnUpdate\\",
Expand All @@ -9081,7 +9087,7 @@ import { Component } from \\"@angular/core\\";
],
})
export default class MultipleOnUpdate {
ngOnChanges() {
ngOnChanges(changes: SimpleChanges) {
if (typeof window !== \\"undefined\\") {
console.log(\\"Runs on every update/rerender\\");
console.log(\\"Runs on every update/rerender as well\\");
Expand All @@ -9102,7 +9108,7 @@ exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Te
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";
import { Component, SimpleChanges } from \\"@angular/core\\";

@Component({
selector: \\"multiple-on-update-with-deps, MultipleOnUpdateWithDeps\\",
Expand All @@ -9123,7 +9129,7 @@ export default class MultipleOnUpdateWithDeps {
c = \\"c\\";
d = \\"d\\";

ngOnChanges() {
ngOnChanges(changes: SimpleChanges) {
if (typeof window !== \\"undefined\\") {
console.log(\\"Runs when this.a or this.b changes\\", this.a, this.b);

Expand Down Expand Up @@ -9540,7 +9546,7 @@ exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Te
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";
import { Component, SimpleChanges } from \\"@angular/core\\";

@Component({
selector: \\"on-update, OnUpdate\\",
Expand All @@ -9556,7 +9562,7 @@ import { Component } from \\"@angular/core\\";
],
})
export default class OnUpdate {
ngOnChanges() {
ngOnChanges(changes: SimpleChanges) {
if (typeof window !== \\"undefined\\") {
console.log(\\"Runs on every update/rerender\\");
}
Expand All @@ -9576,7 +9582,7 @@ exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Te
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component, Input } from \\"@angular/core\\";
import { Component, Input, SimpleChanges } from \\"@angular/core\\";

type Props = {
size: string;
Expand All @@ -9601,7 +9607,7 @@ export default class OnUpdateWithDeps {
a = \\"a\\";
b = \\"b\\";

ngOnChanges() {
ngOnChanges(changes: SimpleChanges) {
if (typeof window !== \\"undefined\\") {
console.log(
\\"Runs when this.a, this.b or size changes\\",
Expand Down Expand Up @@ -9873,7 +9879,7 @@ exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Te
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";
import { Component, SimpleChanges } from \\"@angular/core\\";

@Component({
selector: \\"on-update, OnUpdate\\",
Expand All @@ -9897,7 +9903,7 @@ export default class OnUpdate {
};
};

ngOnChanges() {
ngOnChanges(changes: SimpleChanges) {
if (typeof window !== \\"undefined\\") {
this.foo({
someOption: this.bar,
Expand All @@ -9924,7 +9930,7 @@ import {
ViewChild,
ElementRef,
Input,
ViewContainerRef,
ViewChild,
TemplateRef,
} from \\"@angular/core\\";

Expand Down Expand Up @@ -10231,7 +10237,7 @@ exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Te
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component, Input } from \\"@angular/core\\";
import { Component, Input, SimpleChanges } from \\"@angular/core\\";

type Props = {
customComponents: string[];
Expand Down Expand Up @@ -10280,7 +10286,7 @@ export default class RenderContent {
}
}

ngOnChanges() {
ngOnChanges(changes: SimpleChanges) {
if (typeof window !== \\"undefined\\") {
dispatchNewContentToVisualEditor(this.content);
}
Expand Down Expand Up @@ -10674,7 +10680,7 @@ exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Te
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component, Input } from \\"@angular/core\\";
import { Component, Input, SimpleChanges } from \\"@angular/core\\";

type Props = {
id: string;
Expand Down Expand Up @@ -10705,7 +10711,7 @@ export default class MyBasicComponent {
@Input() id!: Props[\\"id\\"];
@Input() foo!: Props[\\"foo\\"];

ngOnChanges() {
ngOnChanges(changes: SimpleChanges) {
if (typeof window !== \\"undefined\\") {
console.log(\\"props.id changed\\", this.id);
console.log(\\"props.foo.value.bar.baz changed\\", this.foo.bar.baz);
Expand Down Expand Up @@ -11789,7 +11795,7 @@ export default class MyComponent {
}
}

ngOnChanges() {
ngOnChanges(changes) {
if (typeof window !== \\"undefined\\") {
console.log(\\"onAfterUpdate\\");
}
Expand Down Expand Up @@ -11880,7 +11886,7 @@ export default class MyComponent {
this.result = a_ * b_;
};

ngOnChanges() {
ngOnChanges(changes) {
if (typeof window !== \\"undefined\\") {
this.calculateResult(this.a, this.b);
}
Expand Down Expand Up @@ -12413,7 +12419,7 @@ exports[`Angular with Preserve Imports and File Extensions > svelte > Typescript
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";
import { Component, SimpleChanges } from \\"@angular/core\\";

@Component({
selector: \\"my-component, MyComponent\\",
Expand All @@ -12435,7 +12441,7 @@ export default class MyComponent {
}
}

ngOnChanges() {
ngOnChanges(changes: SimpleChanges) {
if (typeof window !== \\"undefined\\") {
console.log(\\"onAfterUpdate\\");
}
Expand Down Expand Up @@ -12498,7 +12504,7 @@ exports[`Angular with Preserve Imports and File Extensions > svelte > Typescript
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component } from \\"@angular/core\\";
import { Component, SimpleChanges } from \\"@angular/core\\";

@Component({
selector: \\"my-component, MyComponent\\",
Expand Down Expand Up @@ -12526,7 +12532,7 @@ export default class MyComponent {
this.result = a_ * b_;
};

ngOnChanges() {
ngOnChanges(changes: SimpleChanges) {
if (typeof window !== \\"undefined\\") {
this.calculateResult(this.a, this.b);
}
Expand Down
Loading

0 comments on commit 45de754

Please sign in to comment.