Skip to content

feat: ENG-9092 Correctly convert For loop in Mitosis JSX to repeat.collection in Builder JSON #1777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
midhunadarvin merged 13 commits into from
Jun 24, 2025
Merged

feat: ENG-9092 Correctly convert For loop in Mitosis JSX to repeat.collection in Builder JSON #1777

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f167f3d
feat: correct `repeat.collection` mapping
midhunadarvin Jun 19, 2025
846529b
fix
midhunadarvin Jun 19, 2025
451c210
fix: tests
midhunadarvin Jun 19, 2025
5cc316d
chore: add changeset
midhunadarvin Jun 19, 2025
2e08f3c
fix: review comment
midhunadarvin Jun 24, 2025
bfcc9ee
fix: type
midhunadarvin Jun 24, 2025
7dd65e2
fix: type
midhunadarvin Jun 24, 2025
ca81d98
fix: Array.from
midhunadarvin Jun 24, 2025
b60b720
fix: issue
midhunadarvin Jun 24, 2025
78ba7d0
fix: removed the meaningful state check
midhunadarvin Jun 24, 2025
9d2287d
fix: review comment
midhunadarvin Jun 24, 2025
7365bd8
fix: review comment add more types to check
midhunadarvin Jun 24, 2025
9a0ffe8
fix: review comment
midhunadarvin Jun 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/thirty-melons-hammer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@builder.io/mitosis': patch
'@builder.io/mitosis-cli': patch
---

Correct the conversion of MitosisJSX `For` component to Builder JSON `repeat.collection`
99 changes: 64 additions & 35 deletions packages/core/src/__tests__/builder/__snapshots__/builder.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,9 +158,7 @@ exports[`Builder > Advanced For 1`] = `
"name": "Core:Fragment",
},
"repeat": {
"collection": "Array.from({
length: 10
})",
"collection": "state.dataBuilderList1",
"itemName": "_",
},
},
Expand Down Expand Up @@ -196,9 +194,7 @@ exports[`Builder > Advanced For 1`] = `
"name": "Core:Fragment",
},
"repeat": {
"collection": "Array.from({
length: 10
})",
"collection": "state.dataBuilderList1",
},
},
{
Expand Down Expand Up @@ -291,9 +287,7 @@ exports[`Builder > Advanced For 1`] = `
"name": "Core:Fragment",
},
"repeat": {
"collection": "Array.from({
length: 10
})",
"collection": "state.dataBuilderList1",
"itemName": "person",
},
},
Expand Down Expand Up @@ -387,9 +381,7 @@ exports[`Builder > Advanced For 1`] = `
"name": "Core:Fragment",
},
"repeat": {
"collection": "Array.from({
length: 10
})",
"collection": "state.dataBuilderList1",
"itemName": "person",
},
},
Expand All @@ -404,6 +396,22 @@ exports[`Builder > Advanced For 1`] = `
],
"jsCode": "Object.assign(state, { name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
",
"state": {
"dataBuilderList1": [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
],
"name": "'PatrickJS'",
"names": "['Steve', 'PatrickJS']",
},
"tsCode": "useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
",
},
Expand All @@ -414,7 +422,22 @@ exports[`Builder > Advanced For 2`] = `
"import { useStore, For } from \\"@builder.io/mitosis\\";

export default function MyComponent(props) {
const state = useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
const state = useStore({
name: \\"PatrickJS\\",
names: [\\"Steve\\", \\"PatrickJS\\"],
dataBuilderList1: [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
],
});

return (
<main>
Expand All @@ -429,20 +452,10 @@ export default function MyComponent(props) {
</For>
<For each={state.names}>{(person, index) => <span>{person}</span>}</For>
<For each={state.names}>{(item, index) => <br />}</For>
<For
each={Array.from({
length: 10,
})}
>
<For each={state.dataBuilderList1}>
{(_, index) => <pre>{index}</pre>}
</For>
<For
each={Array.from({
length: 10,
})}
>
{(item, index) => <p>{index}</p>}
</For>
<For each={state.dataBuilderList1}>{(item, index) => <p>{index}</p>}</For>
<For each={state.names}>
{(person, index) => (
<span>
Expand All @@ -451,11 +464,7 @@ export default function MyComponent(props) {
</span>
)}
</For>
<For
each={Array.from({
length: 10,
})}
>
<For each={state.dataBuilderList1}>
{(person, index) => (
<span>
<span>{person}</span>
Expand All @@ -471,11 +480,7 @@ export default function MyComponent(props) {
</span>
)}
</For>
<For
each={Array.from({
length: 10,
})}
>
<For each={state.dataBuilderList1}>
{(person, index) => (
<span>
<span>{person}</span>
Expand Down Expand Up @@ -783,6 +788,10 @@ Object.assign(state, {

state.findAndRunScripts();
",
"state": {
"scriptsInserted": [],
"scriptsRun": [],
},
"tsCode": "var props = state;

useStore({
Expand Down Expand Up @@ -980,6 +989,10 @@ Object.assign(state, {

state.findAndRunScripts();
",
"state": {
"scriptsInserted": [],
"scriptsRun": [],
},
"tsCode": "var props = state;

useStore({
Expand Down Expand Up @@ -1131,6 +1144,12 @@ exports[`Builder > Fragment 1`] = `
],
"jsCode": "Object.assign(state, { people: [\\"Steve\\", \\"Sewell\\"] });
",
"state": {
"people": [
"Steve",
"Sewell",
],
},
"tsCode": "useStore({ people: [\\"Steve\\", \\"Sewell\\"] });
",
},
Expand Down Expand Up @@ -1280,6 +1299,11 @@ if (state.useLazyLoading()) {
listener();
}
",
"state": {
"imageLoaded": false,
"load": false,
"scrollListener": null,
},
"tsCode": "var props = state;

useStore({
Expand Down Expand Up @@ -3167,6 +3191,11 @@ fetch(
state.reviews = data.data;
});
",
"state": {
"name": "'test'",
"reviews": [],
"showReviewPrompt": false,
},
"tsCode": "var props = state;

useStore({
Expand Down
Loading