Skip to content

Commit b387d21

Browse files
nmergetnmerget
authored
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
1 parent 3dbd84e commit b387d21

35 files changed

+1629
-63
lines changed

‎.changeset/yellow-coins-sip.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'@builder.io/mitosis': patch
3+
---
4+
5+
[React, Angular] fix: issue with ``state`` inside `key` attribute in `Fragment`.
6+
7+
Example:
8+
9+
`<Fragment key={state.xxx + "abc"}...` was generated in React with `state.xxx` and in Angular without `this.`.

‎.github/workflows/checks.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ jobs:
100100
uses: actions/upload-artifact@v4
101101
with:
102102
name: snapshots-updates
103-
path: ./packages/core/src/__tests__/__snapshots__
103+
path: ./packages/core/src/**/__snapshots__
104104
retention-days: 30
105105

106106
site:

‎packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap

+30-2
Original file line numberDiff line numberDiff line change
@@ -1555,10 +1555,24 @@ exports[`Alpine.js > jsx > Javascript Test > basicForFragment 1`] = `
15551555
<div><span x-html=\\"option\\"></span></div>
15561556
</div>
15571557
</template>
1558+
<template x-for=\\"option in ['a', 'b', 'c']\\">
1559+
<div x-bind:key=\\"\`\${id}-\${option}\`\\">
1560+
<div><span x-html=\\"option\\"></span></div>
1561+
</div>
1562+
</template>
1563+
<select>
1564+
<template x-for=\\"option in ['d', 'e', 'f']\\">
1565+
<option x-bind:key=\\"\`\${id}-\${option}\`\\" x-bind:value=\\"option\\">
1566+
<span x-html=\\"option\\"></span>
1567+
</option>
1568+
</template>
1569+
</select>
15581570
</div>
15591571
<script>
15601572
document.addEventListener(\\"alpine:init\\", () => {
1561-
Alpine.data(\\"basicForFragment\\", () => ({}));
1573+
Alpine.data(\\"basicForFragment\\", () => ({
1574+
id: \\"xyz\\",
1575+
}));
15621576
});
15631577
</script>
15641578
"
@@ -4608,10 +4622,24 @@ exports[`Alpine.js > jsx > Typescript Test > basicForFragment 1`] = `
46084622
<div><span x-html=\\"option\\"></span></div>
46094623
</div>
46104624
</template>
4625+
<template x-for=\\"option in ['a', 'b', 'c']\\">
4626+
<div x-bind:key=\\"\`\${id}-\${option}\`\\">
4627+
<div><span x-html=\\"option\\"></span></div>
4628+
</div>
4629+
</template>
4630+
<select>
4631+
<template x-for=\\"option in ['d', 'e', 'f']\\">
4632+
<option x-bind:key=\\"\`\${id}-\${option}\`\\" x-bind:value=\\"option\\">
4633+
<span x-html=\\"option\\"></span>
4634+
</option>
4635+
</template>
4636+
</select>
46114637
</div>
46124638
<script>
46134639
document.addEventListener(\\"alpine:init\\", () => {
4614-
Alpine.data(\\"basicForFragment\\", () => ({}));
4640+
Alpine.data(\\"basicForFragment\\", () => ({
4641+
id: \\"xyz\\",
4642+
}));
46154643
});
46164644
</script>
46174645
"

‎packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap

+42
Original file line numberDiff line numberDiff line change
@@ -3414,6 +3414,20 @@ import { Component } from \\"@angular/core\\";
34143414
<div>{{option}}</div>
34153415
</ng-container>
34163416
</ng-container>
3417+
<ng-container
3418+
*ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
3419+
>
3420+
<ng-container>
3421+
<div>{{option}}</div>
3422+
</ng-container>
3423+
</ng-container>
3424+
<select>
3425+
<ng-container
3426+
*ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
3427+
>
3428+
<option [attr.value]=\\"option\\">{{option}}</option>
3429+
</ng-container>
3430+
</select>
34173431
</div>
34183432
\`,
34193433
styles: [
@@ -3425,9 +3439,16 @@ import { Component } from \\"@angular/core\\";
34253439
],
34263440
})
34273441
export default class BasicForFragment {
3442+
id = \\"xyz\\";
34283443
trackByOption0(_, option) {
34293444
return \`key-\${option}\`;
34303445
}
3446+
trackByOption1(_, option) {
3447+
return \`\${this.id}-\${option}\`;
3448+
}
3449+
trackByOption2(_, option) {
3450+
return \`\${this.id}-\${option}\`;
3451+
}
34313452
}
34323453

34333454
@NgModule({
@@ -11081,6 +11102,20 @@ import { Component } from \\"@angular/core\\";
1108111102
<div>{{option}}</div>
1108211103
</ng-container>
1108311104
</ng-container>
11105+
<ng-container
11106+
*ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
11107+
>
11108+
<ng-container>
11109+
<div>{{option}}</div>
11110+
</ng-container>
11111+
</ng-container>
11112+
<select>
11113+
<ng-container
11114+
*ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
11115+
>
11116+
<option [attr.value]=\\"option\\">{{option}}</option>
11117+
</ng-container>
11118+
</select>
1108411119
</div>
1108511120
\`,
1108611121
styles: [
@@ -11092,9 +11127,16 @@ import { Component } from \\"@angular/core\\";
1109211127
],
1109311128
})
1109411129
export default class BasicForFragment {
11130+
id = \\"xyz\\";
1109511131
trackByOption0(_, option) {
1109611132
return \`key-\${option}\`;
1109711133
}
11134+
trackByOption1(_, option) {
11135+
return \`\${this.id}-\${option}\`;
11136+
}
11137+
trackByOption2(_, option) {
11138+
return \`\${this.id}-\${option}\`;
11139+
}
1109811140
}
1109911141

1110011142
@NgModule({

‎packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap

+42
Original file line numberDiff line numberDiff line change
@@ -3461,6 +3461,20 @@ import { Component } from \\"@angular/core\\";
34613461
<div>{{option}}</div>
34623462
</ng-container>
34633463
</ng-container>
3464+
<ng-container
3465+
*ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
3466+
>
3467+
<ng-container>
3468+
<div>{{option}}</div>
3469+
</ng-container>
3470+
</ng-container>
3471+
<select>
3472+
<ng-container
3473+
*ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
3474+
>
3475+
<option [attr.value]=\\"option\\">{{option}}</option>
3476+
</ng-container>
3477+
</select>
34643478
</div>
34653479
\`,
34663480
styles: [
@@ -3472,9 +3486,16 @@ import { Component } from \\"@angular/core\\";
34723486
],
34733487
})
34743488
export default class BasicForFragment {
3489+
id = \\"xyz\\";
34753490
trackByOption0(_, option) {
34763491
return \`key-\${option}\`;
34773492
}
3493+
trackByOption1(_, option) {
3494+
return \`\${this.id}-\${option}\`;
3495+
}
3496+
trackByOption2(_, option) {
3497+
return \`\${this.id}-\${option}\`;
3498+
}
34783499
}
34793500

34803501
@NgModule({
@@ -11254,6 +11275,20 @@ import { Component } from \\"@angular/core\\";
1125411275
<div>{{option}}</div>
1125511276
</ng-container>
1125611277
</ng-container>
11278+
<ng-container
11279+
*ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
11280+
>
11281+
<ng-container>
11282+
<div>{{option}}</div>
11283+
</ng-container>
11284+
</ng-container>
11285+
<select>
11286+
<ng-container
11287+
*ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
11288+
>
11289+
<option [attr.value]=\\"option\\">{{option}}</option>
11290+
</ng-container>
11291+
</select>
1125711292
</div>
1125811293
\`,
1125911294
styles: [
@@ -11265,9 +11300,16 @@ import { Component } from \\"@angular/core\\";
1126511300
],
1126611301
})
1126711302
export default class BasicForFragment {
11303+
id = \\"xyz\\";
1126811304
trackByOption0(_, option) {
1126911305
return \`key-\${option}\`;
1127011306
}
11307+
trackByOption1(_, option) {
11308+
return \`\${this.id}-\${option}\`;
11309+
}
11310+
trackByOption2(_, option) {
11311+
return \`\${this.id}-\${option}\`;
11312+
}
1127111313
}
1127211314

1127311315
@NgModule({

‎packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap

+42
Original file line numberDiff line numberDiff line change
@@ -3543,6 +3543,20 @@ import { Component } from \\"@angular/core\\";
35433543
<div>{{option}}</div>
35443544
</ng-container>
35453545
</ng-container>
3546+
<ng-container
3547+
*ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
3548+
>
3549+
<ng-container>
3550+
<div>{{option}}</div>
3551+
</ng-container>
3552+
</ng-container>
3553+
<select>
3554+
<ng-container
3555+
*ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
3556+
>
3557+
<option [attr.value]=\\"option\\">{{option}}</option>
3558+
</ng-container>
3559+
</select>
35463560
</div>
35473561
\`,
35483562
styles: [
@@ -3554,9 +3568,16 @@ import { Component } from \\"@angular/core\\";
35543568
],
35553569
})
35563570
export default class BasicForFragment {
3571+
id = \\"xyz\\";
35573572
trackByOption0(_, option) {
35583573
return \`key-\${option}\`;
35593574
}
3575+
trackByOption1(_, option) {
3576+
return \`\${this.id}-\${option}\`;
3577+
}
3578+
trackByOption2(_, option) {
3579+
return \`\${this.id}-\${option}\`;
3580+
}
35603581
}
35613582

35623583
@NgModule({
@@ -11485,6 +11506,20 @@ import { Component } from \\"@angular/core\\";
1148511506
<div>{{option}}</div>
1148611507
</ng-container>
1148711508
</ng-container>
11509+
<ng-container
11510+
*ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
11511+
>
11512+
<ng-container>
11513+
<div>{{option}}</div>
11514+
</ng-container>
11515+
</ng-container>
11516+
<select>
11517+
<ng-container
11518+
*ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
11519+
>
11520+
<option [attr.value]=\\"option\\">{{option}}</option>
11521+
</ng-container>
11522+
</select>
1148811523
</div>
1148911524
\`,
1149011525
styles: [
@@ -11496,9 +11531,16 @@ import { Component } from \\"@angular/core\\";
1149611531
],
1149711532
})
1149811533
export default class BasicForFragment {
11534+
id = \\"xyz\\";
1149911535
trackByOption0(_, option) {
1150011536
return \`key-\${option}\`;
1150111537
}
11538+
trackByOption1(_, option) {
11539+
return \`\${this.id}-\${option}\`;
11540+
}
11541+
trackByOption2(_, option) {
11542+
return \`\${this.id}-\${option}\`;
11543+
}
1150211544
}
1150311545

1150411546
@NgModule({

‎packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap

+42
Original file line numberDiff line numberDiff line change
@@ -3113,13 +3113,34 @@ import { Component } from \\"@angular/core\\";
31133113
<div>{{option}}</div>
31143114
</ng-container>
31153115
</ng-container>
3116+
<ng-container
3117+
*ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
3118+
>
3119+
<ng-container>
3120+
<div>{{option}}</div>
3121+
</ng-container>
3122+
</ng-container>
3123+
<select>
3124+
<ng-container
3125+
*ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
3126+
>
3127+
<option [attr.value]=\\"option\\">{{option}}</option>
3128+
</ng-container>
3129+
</select>
31163130
</div>
31173131
\`,
31183132
})
31193133
export default class BasicForFragment {
3134+
id = \\"xyz\\";
31203135
trackByOption0(_, option) {
31213136
return \`key-\${option}\`;
31223137
}
3138+
trackByOption1(_, option) {
3139+
return \`\${this.id}-\${option}\`;
3140+
}
3141+
trackByOption2(_, option) {
3142+
return \`\${this.id}-\${option}\`;
3143+
}
31233144
}
31243145

31253146
@NgModule({
@@ -9974,13 +9995,34 @@ import { Component } from \\"@angular/core\\";
99749995
<div>{{option}}</div>
99759996
</ng-container>
99769997
</ng-container>
9998+
<ng-container
9999+
*ngFor=\\"let option of ['a', 'b', 'c']; trackBy: trackByOption1\\"
10000+
>
10001+
<ng-container>
10002+
<div>{{option}}</div>
10003+
</ng-container>
10004+
</ng-container>
10005+
<select>
10006+
<ng-container
10007+
*ngFor=\\"let option of ['d', 'e', 'f']; trackBy: trackByOption2\\"
10008+
>
10009+
<option [attr.value]=\\"option\\">{{option}}</option>
10010+
</ng-container>
10011+
</select>
997710012
</div>
997810013
\`,
997910014
})
998010015
export default class BasicForFragment {
10016+
id = \\"xyz\\";
998110017
trackByOption0(_, option) {
998210018
return \`key-\${option}\`;
998310019
}
10020+
trackByOption1(_, option) {
10021+
return \`\${this.id}-\${option}\`;
10022+
}
10023+
trackByOption2(_, option) {
10024+
return \`\${this.id}-\${option}\`;
10025+
}
998410026
}
998510027

998610028
@NgModule({

0 commit comments

Comments
 (0)