fix: issue with state inside key of Fragment for React and Angular (#…

…1641) * fix: issue with state inside key of Fragment for React and Angular * chore: update snapshots * chore: upload all snapshots * chore: update snapshots * chore: update snapshots * chore: update snapshots
BuilderIO · Jan 7, 2025 · b387d21 · b387d21
1 parent 3dbd84e
commit b387d21
Show file tree

Hide file tree

Showing 35 changed files with 1,629 additions and 63 deletions.
diff --git a/.changeset/yellow-coins-sip.md b/.changeset/yellow-coins-sip.md
@@ -0,0 +1,9 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[React, Angular] fix: issue with ``state`` inside `key` attribute in `Fragment`.
+
+Example:
+
+`<Fragment key={state.xxx + "abc"}...` was generated in React with `state.xxx` and in Angular without `this.`.
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
@@ -100,7 +100,7 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: snapshots-updates
-          path: ./packages/core/src/__tests__/__snapshots__
+          path: ./packages/core/src/**/__snapshots__
           retention-days: 30
 
   site:

diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1555,10 +1555,24 @@ exports[`Alpine.js > jsx > Javascript Test > basicForFragment 1`] = `
       <div><span x-html=\\"option\\"></span></div>
     </div>
   </template>
+  <template x-for=\\"option in ['a', 'b', 'c']\\">
+    <div x-bind:key=\\"\`\${id}-\${option}\`\\">
+      <div><span x-html=\\"option\\"></span></div>
+    </div>
+  </template>
+  <select>
+    <template x-for=\\"option in ['d', 'e', 'f']\\">
+      <option x-bind:key=\\"\`\${id}-\${option}\`\\" x-bind:value=\\"option\\">
+        <span x-html=\\"option\\"></span>
+      </option>
+    </template>
+  </select>
 </div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
-    Alpine.data(\\"basicForFragment\\", () => ({}));
+    Alpine.data(\\"basicForFragment\\", () => ({
+      id: \\"xyz\\",
+    }));
   });
 </script>
 "
@@ -4608,10 +4622,24 @@ exports[`Alpine.js > jsx > Typescript Test > basicForFragment 1`] = `
       <div><span x-html=\\"option\\"></span></div>
     </div>
   </template>
+  <template x-for=\\"option in ['a', 'b', 'c']\\">
+    <div x-bind:key=\\"\`\${id}-\${option}\`\\">
+      <div><span x-html=\\"option\\"></span></div>
+    </div>
+  </template>
+  <select>
+    <template x-for=\\"option in ['d', 'e', 'f']\\">
+      <option x-bind:key=\\"\`\${id}-\${option}\`\\" x-bind:value=\\"option\\">
+        <span x-html=\\"option\\"></span>
+      </option>
+    </template>
+  </select>
 </div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
-    Alpine.data(\\"basicForFragment\\", () => ({}));
+    Alpine.data(\\"basicForFragment\\", () => ({
+      id: \\"xyz\\",
+    }));
   });
 </script>
 "

diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -3414,6 +3414,20 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -3425,9 +3439,16 @@ import { Component } from \\"@angular/core\\";
   ],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({
@@ -11081,6 +11102,20 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -11092,9 +11127,16 @@ import { Component } from \\"@angular/core\\";
   ],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({

diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -3461,6 +3461,20 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -3472,9 +3486,16 @@ import { Component } from \\"@angular/core\\";
   ],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({
@@ -11254,6 +11275,20 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -11265,9 +11300,16 @@ import { Component } from \\"@angular/core\\";
   ],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({

diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -3543,6 +3543,20 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -3554,9 +3568,16 @@ import { Component } from \\"@angular/core\\";
   ],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({
@@ -11485,6 +11506,20 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
   styles: [
@@ -11496,9 +11531,16 @@ import { Component } from \\"@angular/core\\";
   ],
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({

diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -3113,13 +3113,34 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({
@@ -9974,13 +9995,34 @@ import { Component } from \\"@angular/core\\";
           <div>{{option}}</div>
         </ng-container>
       </ng-container>
+      <ng-container
+        *ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
+      >
+        <ng-container>
+          <div>{{option}}</div>
+        </ng-container>
+      </ng-container>
+      <select>
+        <ng-container
+          *ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
+        >
+          <option [attr.value]=\\"option\\">{{option}}</option>
+        </ng-container>
+      </select>
     </div>
   \`,
 })
 export default class BasicForFragment {
+  id = \\"xyz\\";
   trackByOption0(_, option) {
     return \`key-\${option}\`;
   }
+  trackByOption1(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
+  trackByOption2(_, option) {
+    return \`\${this.id}-\${option}\`;
+  }
 }
 
 @NgModule({