fix(input-migration): consider whitespaces when matching against temp…

…late
ngxtension · Jun 7, 2024 · 6b2ddef · 6b2ddef
1 parent 17f45e0
commit 6b2ddef
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 1 deletion.
diff --git a/libs/plugin/src/generators/convert-signal-inputs/__snapshots__/generator.spec.ts.snap b/libs/plugin/src/generators/convert-signal-inputs/__snapshots__/generator.spec.ts.snap
@@ -4,6 +4,11 @@ exports[`convertSignalInputsGenerator should convert properly 1`] = `
 "
 import { Component, Input, input } from '@angular/core';
 
+interface Person {
+  name: string;
+  lastname: string;
+}
+
 @Component({
   
       template: \`
@@ -51,6 +56,7 @@ import { Component, Input, input } from '@angular/core';
 <button (click)="someFunctionWithnormalInput('normalInput', normalInput())"></button>
 <button (normalInput)="someFunctionWithnormalInput(normalInput(), 'normalInput')"></button>
 <button (eventWithnormalInput)="test = 'normalInput' + normalInput()"></button>
+<button (click)="test = person()?.name"></button>
 
 <a>
  {{ 'someNormalTextnormalInput' | translate: 'normalInput' }}
@@ -69,6 +75,17 @@ import { Component, Input, input } from '@angular/core';
 
 <p>{{ data().normalInput }}</p>
 
+<p>{{person()?.name ? person().name : ""}}</p>
+<p>{{
+  person().name
+}}</p>
+
+<ng-template #sample let-title="name">
+      <span>{{title}}</span>
+</ng-template>
+
+<ng-template *ngTemplateOutlet="sample; context: {name: person().name}"></ng-template>
+
   \`
 })
 export class MyCmp {
@@ -85,6 +102,7 @@ export class MyCmp {
   requiredWithAliasAndTransform = input.required<number, number | string>({ alias: 'transformedRequiredAlias', transform: numberAttribute });
   withTransformWithoutType = input(booleanAttribute(false), { transform: booleanAttribute });
   requiredWithTransformWithoutType = input(numberAttribute(1), { transform: numberAttribute });
+  person = input<Person>();
 
   @Input() set leaveMeAlone(value: number) {
     console.log('setter', value);
@@ -396,6 +414,7 @@ exports[`convertSignalInputsGenerator should convert properly for templateUrl 2`
 <button (click)="someFunctionWithnormalInput('normalInput', normalInput())"></button>
 <button (normalInput)="someFunctionWithnormalInput(normalInput(), 'normalInput')"></button>
 <button (eventWithnormalInput)="test = 'normalInput' + normalInput()"></button>
+<button (click)="test = person?.name"></button>
 
 <a>
  {{ 'someNormalTextnormalInput' | translate: 'normalInput' }}
@@ -413,6 +432,17 @@ exports[`convertSignalInputsGenerator should convert properly for templateUrl 2`
 <cmp normalInput="normalInput"></cmp>
 
 <p>{{ data().normalInput }}</p>
+
+<p>{{person?.name ? person.name : ""}}</p>
+<p>{{
+  person.name
+}}</p>
+
+<ng-template #sample let-title="name">
+      <span>{{title}}</span>
+</ng-template>
+
+<ng-template *ngTemplateOutlet="sample; context: {name: person.name}"></ng-template>
 "
 `;
 

diff --git a/libs/plugin/src/generators/convert-signal-inputs/generator.spec.ts b/libs/plugin/src/generators/convert-signal-inputs/generator.spec.ts
@@ -48,6 +48,7 @@ const template = `<div>{{ inputWithoutType }}</div>
 <button (click)="someFunctionWithnormalInput('normalInput', normalInput)"></button>
 <button (normalInput)="someFunctionWithnormalInput(normalInput, 'normalInput')"></button>
 <button (eventWithnormalInput)="test = 'normalInput' + normalInput"></button>
+<button (click)="test = person?.name"></button>
 
 <a>
  {{ 'someNormalTextnormalInput' | translate: 'normalInput' }}
@@ -65,6 +66,17 @@ const template = `<div>{{ inputWithoutType }}</div>
 <cmp normalInput="normalInput"></cmp>
 
 <p>{{ data().normalInput }}</p>
+
+<p>{{person?.name ? person.name : ""}}</p>
+<p>{{
+  person.name
+}}</p>
+
+<ng-template #sample let-title="name">
+      <span>{{title}}</span>
+</ng-template>
+
+<ng-template *ngTemplateOutlet="sample; context: {name: person.name}"></ng-template>
 `;
 
 const filesMap = {
@@ -91,6 +103,11 @@ export class MyCmp {
 	component: `
 import { Component, Input } from '@angular/core';
 
+interface Person {
+  name: string;
+  lastname: string;
+}
+
 @Component({
   template: \`
     ${template}
@@ -110,6 +127,7 @@ export class MyCmp {
   @Input({ required: true, alias: 'transformedRequiredAlias', transform: numberAttribute }) requiredWithAliasAndTransform!: number;
   @Input({ transform: booleanAttribute }) withTransformWithoutType = false;
   @Input({ transform: numberAttribute }) requiredWithTransformWithoutType = 1;
+  @Input() person: Person;
 
   @Input() set leaveMeAlone(value: number) {
     console.log('setter', value);

diff --git a/libs/plugin/src/generators/shared-utils/migrate-signals-in-template.ts b/libs/plugin/src/generators/shared-utils/migrate-signals-in-template.ts
@@ -291,7 +291,7 @@ function replaceVariablesInsideInterpolation(
 	variables: string[],
 ): string {
 	// find all interpolations and replace the variables for each interpolation
-	value = value.replaceAll(/{{(.*?)}}/g, (match) => {
+	value = value.replaceAll(/{{\s*(.*?)\s*}}/g, (match) => {
 		const usedVars = [];
 		for (const variable of variables) {
 			if (match.includes(variable)) {