fix: [Angular] fix logic used for parsing objects provided as input t…

…o useObjectWrapper (#1490) * fix logic used for parsing objects provided as input to useObjectWrapper method in Angular * update test case * yarn test:update * prettier * update solution * update solution * cleanup * update solution * add comments to used regexps for future reference * Update .changeset/perfect-seas-bow.md Co-authored-by: Sidharth Mohanty <[email protected]> * Update .changeset/perfect-seas-bow.md Co-authored-by: Sidharth Mohanty <[email protected]> --------- Co-authored-by: Lukasz.Jablonski <[email protected]> Co-authored-by: Sidharth Mohanty <[email protected]>
BuilderIO · Aug 26, 2024 · d446881 · d446881
1 parent 6962c36
commit d446881
Show file tree

Hide file tree

Showing 9 changed files with 1,283 additions and 323 deletions.
diff --git a/.changeset/perfect-seas-bow.md b/.changeset/perfect-seas-bow.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+Angular: Fix: `useObjectWrapper` logic to correctly handle spread and objects as arguments
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -1582,7 +1582,10 @@ import { Builder } from \\"@builder.io/sdk\\";
  selector: \\"img-component, ImgComponent\\",
  template: \`
  <img
- [ngStyle]=\\"useObjectWrapper({ objectFit: backgroundSize || 'cover' }, { objectPosition: backgroundPosition || 'center' })\\"
+ [ngStyle]=\\"{
+ objectFit: backgroundSize || 'cover',
+ objectPosition: backgroundPosition || 'center'
+ }\\"
  [attr.alt]=\\"altText\\"
  [attr.src]=\\"imgSrc\\"
  />
@@ -1601,14 +1604,6 @@ export default class ImgComponent {
  @Input() attributes;
  @Input() imgSrc;
  @Input() altText;
-
- useObjectWrapper(...args) {
- let obj = {};
- args.forEach((arg) => {
- obj = { ...obj, ...arg };
- });
- return obj;
- }
 }
 
 @NgModule({
@@ -1795,7 +1790,11 @@ import { Component, Input } from \\"@angular/core\\";
  template: \`
  <ng-container *ngIf=\\"max\\">
  <ng-container *ngFor=\\"let item of items\\">
- <section [ngStyle]=\\"useObjectWrapper({ maxWidth: item + max })\\">
+ <section
+ [ngStyle]=\\"{
+ maxWidth: item + max
+ }\\"
+ >
  <ng-content></ng-content>
  </section>
  </ng-container>
@@ -1814,14 +1813,6 @@ export default class SectionStateComponent {
 
  max = 42;
  items = [42];
-
- useObjectWrapper(...args) {
- let obj = {};
- args.forEach((arg) => {
- obj = { ...obj, ...arg };
- });
- return obj;
- }
 }
 
 @NgModule({
@@ -2262,7 +2253,13 @@ import { Component, Input } from \\"@angular/core\\";
  template: \`
  <video
  preload=\\"none\\"
- [ngStyle]=\\"useObjectWrapper(attributes?.style, { width: '100%' }, { height: '100%' }, { objectFit: fit }, { objectPosition: position }, { borderRadius: 1 })\\"
+ [ngStyle]=\\"useObjectWrapper({
+ width: '100%' },{
+ height: '100%' },
+ attributes?.style,{
+ objectFit: fit },{
+ objectPosition: position },{
+ borderRadius: 1 },)\\"
  [attr.poster]=\\"posterImage\\"
  [attr.autoplay]=\\"autoPlay\\"
  [attr.muted]=\\"muted\\"
@@ -4978,7 +4975,12 @@ import { Component, Input } from \\"@angular/core\\";
 @Component({
  selector: \\"my-component, MyComponent\\",
  template: \`
- <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+ <Comp
+ [val]=\\"useObjectWrapper( val
+ )\\"
+ >
+ {{val}}
+ </Comp>
  \`,
  styles: [
  \`
@@ -5026,7 +5028,9 @@ import { Component } from \\"@angular/core\\";
  template: \`
  <div
  class=\\"builder-column div\\"
- [ngStyle]=\\"useObjectWrapper({ width: '100%' })\\"
+ [ngStyle]=\\"{
+ width: '100%'
+ }\\"
  ></div>
  \`,
  styles: [
@@ -5042,15 +5046,7 @@ import { Component } from \\"@angular/core\\";
  \`,
  ],
 })
-export default class MyComponent {
- useObjectWrapper(...args) {
- let obj = {};
- args.forEach((arg) => {
- obj = { ...obj, ...arg };
- });
- return obj;
- }
-}
+export default class MyComponent {}
 
 @NgModule({
  declarations: [MyComponent],
@@ -5369,6 +5365,83 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > useObjectWrapper 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+ selector: \\"my-component, MyComponent\\",
+ template: \`
+ <div>
+ <Comp
+ [val1]=\\"useObjectWrapper( attributes2
+ )\\"
+ [val2]=\\"useObjectWrapper( attributes,
+ attributes2
+ )\\"
+ [val3]=\\"useObjectWrapper( something,{
+ anything: 'hello' },{
+ hello: 'world' },)\\"
+ [val4]=\\"useObjectWrapper( attributes,
+ something,{
+ anything: [1, 2, 3] },{
+ hello: 'hello' },
+ attributes2
+ )\\"
+ [val5]=\\"useObjectWrapper( attributes,
+ something,{
+ anything: [1, 2, 3] },{
+ anythingString: ['a', 'b', 'c'] },{
+ hello: 'hello' },
+ spreadAttrs
+ )\\"
+ [val6]=\\"{
+ anything: [1, 2, 3]
+ }\\"
+ ></Comp>
+ </div>
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class MyComponent {
+ @Input() spreadAttrs;
+
+ attributes = {
+ id: 1,
+ };
+ attributes2 = {
+ id2: 1,
+ };
+ something = {
+ id3: 1,
+ };
+
+ useObjectWrapper(...args) {
+ let obj = {};
+ args.forEach((arg) => {
+ obj = { ...obj, ...arg };
+ });
+ return obj;
+ }
+}
+
+@NgModule({
+ declarations: [MyComponent],
+ imports: [CommonModule, CompModule],
+ exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > useTarget 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -7211,7 +7284,10 @@ import { Builder } from \\"@builder.io/sdk\\";
  selector: \\"img-component, ImgComponent\\",
  template: \`
  <img
- [ngStyle]=\\"useObjectWrapper({ objectFit: backgroundSize || 'cover' }, { objectPosition: backgroundPosition || 'center' })\\"
+ [ngStyle]=\\"{
+ objectFit: backgroundSize || 'cover',
+ objectPosition: backgroundPosition || 'center'
+ }\\"
  [attr.alt]=\\"altText\\"
  [attr.src]=\\"imgSrc\\"
  />
@@ -7230,14 +7306,6 @@ export default class ImgComponent {
  @Input() attributes!: ImgProps[\\"attributes\\"];
  @Input() imgSrc!: ImgProps[\\"imgSrc\\"];
  @Input() altText!: ImgProps[\\"altText\\"];
-
- useObjectWrapper(...args: any[]) {
- let obj = {};
- args.forEach((arg) => {
- obj = { ...obj, ...arg };
- });
- return obj;
- }
 }
 
 @NgModule({
@@ -7452,7 +7520,11 @@ export interface SectionProps {
  template: \`
  <ng-container *ngIf=\\"max\\">
  <ng-container *ngFor=\\"let item of items\\">
- <section [ngStyle]=\\"useObjectWrapper({ maxWidth: item + max })\\">
+ <section
+ [ngStyle]=\\"{
+ maxWidth: item + max
+ }\\"
+ >
  <ng-content></ng-content>
  </section>
  </ng-container>
@@ -7471,14 +7543,6 @@ export default class SectionStateComponent {
 
  max = 42;
  items = [42];
-
- useObjectWrapper(...args: any[]) {
- let obj = {};
- args.forEach((arg) => {
- obj = { ...obj, ...arg };
- });
- return obj;
- }
 }
 
 @NgModule({
@@ -7998,7 +8062,13 @@ export interface VideoProps {
  template: \`
  <video
  preload=\\"none\\"
- [ngStyle]=\\"useObjectWrapper(attributes?.style, { width: '100%' }, { height: '100%' }, { objectFit: fit }, { objectPosition: position }, { borderRadius: 1 })\\"
+ [ngStyle]=\\"useObjectWrapper({
+ width: '100%' },{
+ height: '100%' },
+ attributes?.style,{
+ objectFit: fit },{
+ objectPosition: position },{
+ borderRadius: 1 },)\\"
  [attr.poster]=\\"posterImage\\"
  [attr.autoplay]=\\"autoPlay\\"
  [attr.muted]=\\"muted\\"
@@ -10885,7 +10955,12 @@ import { Component, Input } from \\"@angular/core\\";
 @Component({
  selector: \\"my-component, MyComponent\\",
  template: \`
- <Comp [val]=\\"useObjectWrapper(val)\\">{{val}}</Comp>
+ <Comp
+ [val]=\\"useObjectWrapper( val
+ )\\"
+ >
+ {{val}}
+ </Comp>
  \`,
  styles: [
  \`
@@ -10933,7 +11008,9 @@ import { Component } from \\"@angular/core\\";
  template: \`
  <div
  class=\\"builder-column div\\"
- [ngStyle]=\\"useObjectWrapper({ width: '100%' })\\"
+ [ngStyle]=\\"{
+ width: '100%'
+ }\\"
  ></div>
  \`,
  styles: [
@@ -10949,15 +11026,7 @@ import { Component } from \\"@angular/core\\";
  \`,
  ],
 })
-export default class MyComponent {
- useObjectWrapper(...args: any[]) {
- let obj = {};
- args.forEach((arg) => {
- obj = { ...obj, ...arg };
- });
- return obj;
- }
-}
+export default class MyComponent {}
 
 @NgModule({
  declarations: [MyComponent],
@@ -11284,6 +11353,83 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > useObjectWrapper 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+ selector: \\"my-component, MyComponent\\",
+ template: \`
+ <div>
+ <Comp
+ [val1]=\\"useObjectWrapper( attributes2
+ )\\"
+ [val2]=\\"useObjectWrapper( attributes,
+ attributes2
+ )\\"
+ [val3]=\\"useObjectWrapper( something,{
+ anything: 'hello' },{
+ hello: 'world' },)\\"
+ [val4]=\\"useObjectWrapper( attributes,
+ something,{
+ anything: [1, 2, 3] },{
+ hello: 'hello' },
+ attributes2
+ )\\"
+ [val5]=\\"useObjectWrapper( attributes,
+ something,{
+ anything: [1, 2, 3] },{
+ anythingString: ['a', 'b', 'c'] },{
+ hello: 'hello' },
+ spreadAttrs
+ )\\"
+ [val6]=\\"{
+ anything: [1, 2, 3]
+ }\\"
+ ></Comp>
+ </div>
+ \`,
+ styles: [
+ \`
+ :host {
+ display: contents;
+ }
+ \`,
+ ],
+})
+export default class MyComponent {
+ @Input() spreadAttrs!: any;
+
+ attributes = {
+ id: 1,
+ };
+ attributes2 = {
+ id2: 1,
+ };
+ something = {
+ id3: 1,
+ };
+
+ useObjectWrapper(...args: any[]) {
+ let obj = {};
+ args.forEach((arg) => {
+ obj = { ...obj, ...arg };
+ });
+ return obj;
+ }
+}
+
+@NgModule({
+ declarations: [MyComponent],
+ imports: [CommonModule, CompModule],
+ exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > useTarget 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";