🗻

BuilderIO · Oct 26, 2024 · 91fe075 · 91fe075
1 parent dc9bd26
commit 91fe075
Show file tree

Hide file tree

Showing 4 changed files with 274 additions and 0 deletions.
diff --git a/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/builder.test.ts.snap
@@ -1,5 +1,264 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Builder > Advanced For 1`] = `
+{
+  "data": {
+    "blocks": [
+      {
+        "@type": "@builder.io/sdk:Element",
+        "actions": {},
+        "bindings": {},
+        "children": [
+          {
+            "@type": "@builder.io/sdk:Element",
+            "children": [
+              {
+                "@type": "@builder.io/sdk:Element",
+                "actions": {},
+                "bindings": {},
+                "children": [
+                  {
+                    "@type": "@builder.io/sdk:Element",
+                    "bindings": {
+                      "component.options.text": "i",
+                    },
+                    "component": {
+                      "name": "Text",
+                      "options": {},
+                    },
+                    "tagName": "span",
+                  },
+                  {
+                    "@type": "@builder.io/sdk:Element",
+                    "bindings": {},
+                    "component": {
+                      "name": "Text",
+                      "options": {
+                        "text": ": ",
+                      },
+                    },
+                    "tagName": "span",
+                  },
+                  {
+                    "@type": "@builder.io/sdk:Element",
+                    "bindings": {
+                      "component.options.text": "person",
+                    },
+                    "component": {
+                      "name": "Text",
+                      "options": {},
+                    },
+                    "tagName": "span",
+                  },
+                ],
+                "code": {
+                  "actions": {},
+                  "bindings": {},
+                },
+                "properties": {},
+                "tagName": "div",
+              },
+            ],
+            "component": {
+              "name": "Core:Fragment",
+            },
+            "repeat": {
+              "collection": "state.names",
+              "indexName": "i",
+              "itemName": "person",
+            },
+          },
+          {
+            "@type": "@builder.io/sdk:Element",
+            "children": [
+              {
+                "@type": "@builder.io/sdk:Element",
+                "actions": {},
+                "bindings": {},
+                "children": [
+                  {
+                    "@type": "@builder.io/sdk:Element",
+                    "bindings": {
+                      "component.options.text": "person",
+                    },
+                    "component": {
+                      "name": "Text",
+                      "options": {},
+                    },
+                    "tagName": "span",
+                  },
+                ],
+                "code": {
+                  "actions": {},
+                  "bindings": {},
+                },
+                "properties": {},
+                "tagName": "span",
+              },
+            ],
+            "component": {
+              "name": "Core:Fragment",
+            },
+            "repeat": {
+              "collection": "state.names",
+              "itemName": "person",
+            },
+          },
+          {
+            "@type": "@builder.io/sdk:Element",
+            "children": [
+              {
+                "@type": "@builder.io/sdk:Element",
+                "actions": {},
+                "bindings": {},
+                "children": [],
+                "code": {
+                  "actions": {},
+                  "bindings": {},
+                },
+                "properties": {},
+                "tagName": "br",
+              },
+            ],
+            "component": {
+              "name": "Core:Fragment",
+            },
+            "repeat": {
+              "collection": "state.names",
+            },
+          },
+          {
+            "@type": "@builder.io/sdk:Element",
+            "children": [
+              {
+                "@type": "@builder.io/sdk:Element",
+                "actions": {},
+                "bindings": {},
+                "children": [
+                  {
+                    "@type": "@builder.io/sdk:Element",
+                    "bindings": {
+                      "component.options.text": "ee",
+                    },
+                    "component": {
+                      "name": "Text",
+                      "options": {},
+                    },
+                    "tagName": "span",
+                  },
+                ],
+                "code": {
+                  "actions": {},
+                  "bindings": {},
+                },
+                "properties": {},
+                "tagName": "pre",
+              },
+            ],
+            "component": {
+              "name": "Core:Fragment",
+            },
+            "repeat": {
+              "collection": "Array.from({
+  length: 10
+})",
+              "indexName": "ee",
+              "itemName": "_",
+            },
+          },
+          {
+            "@type": "@builder.io/sdk:Element",
+            "children": [
+              {
+                "@type": "@builder.io/sdk:Element",
+                "actions": {},
+                "bindings": {},
+                "children": [
+                  {
+                    "@type": "@builder.io/sdk:Element",
+                    "bindings": {
+                      "component.options.text": "state.$index",
+                    },
+                    "component": {
+                      "name": "Text",
+                      "options": {},
+                    },
+                    "tagName": "span",
+                  },
+                ],
+                "code": {
+                  "actions": {},
+                  "bindings": {},
+                },
+                "properties": {},
+                "tagName": "p",
+              },
+            ],
+            "component": {
+              "name": "Core:Fragment",
+            },
+            "repeat": {
+              "collection": "Array.from({
+  length: 10
+})",
+            },
+          },
+        ],
+        "code": {
+          "actions": {},
+          "bindings": {},
+        },
+        "properties": {},
+        "tagName": "main",
+      },
+    ],
+    "jsCode": "Object.assign(state, { name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
+",
+    "tsCode": "useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
+",
+  },
+}
+`;
+
+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\\"] });
+
+  return (
+    <main>
+      <For each={state.names}>
+        {(person, i) => (
+          <div>
+            <span>{i}</span>
+            <span>: </span>
+            <span>{person}</span>
+          </div>
+        )}
+      </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,
+        })}
+      >
+        {(_, ee) => <pre>{ee}</pre>}
+      </For>
+      <For
+        each={Array.from({
+          length: 10,
+        })}
+      >
+        {(item, index) => <p>{index}</p>}
+      </For>
+    </main>
+  );
+}
+"
+`;
+
 exports[`Builder > Columns 1`] = `
 {
   "data": {
@@ -60,6 +319,7 @@ exports[`Builder > Columns 1`] = `
             },
             "repeat": {
               "collection": "props.columns",
+              "indexName": "index",
               "itemName": "column",
             },
           },
@@ -2720,6 +2980,7 @@ exports[`Builder > Stamped 1`] = `
             },
             "repeat": {
               "collection": "state.reviews",
+              "indexName": "index",
               "itemName": "review",
             },
           },

diff --git a/packages/core/src/__tests__/builder.test.ts b/packages/core/src/__tests__/builder.test.ts
@@ -8,6 +8,7 @@ import { parseJsx } from '../parsers/jsx';
 import { compileAwayBuilderComponents } from '../plugins/compile-away-builder-components';
 
 import { BuilderContent } from '@builder.io/sdk';
+import advancedFor from './data/advanced-for.raw.tsx?raw';
 import columns from './data/blocks/columns.raw.tsx?raw';
 import customCode from './data/blocks/custom-code.raw.tsx?raw';
 import embed from './data/blocks/embed.raw.tsx?raw';
@@ -51,6 +52,16 @@ describe('Builder', () => {
     expect(mitosis).toMatchSnapshot();
   });
 
+  test('Advanced For', () => {
+    const component = parseJsx(advancedFor);
+    const builderJson = componentToBuilder()({ component });
+    expect(builderJson).toMatchSnapshot();
+
+    const backToMitosis = builderContentToMitosisComponent(builderJson);
+    const mitosis = componentToMitosis()({ component: backToMitosis });
+    expect(mitosis).toMatchSnapshot();
+  });
+
   test('CustomCode', () => {
     const component = parseJsx(customCode);
     const builderJson = componentToBuilder()({ component });

diff --git a/packages/core/src/generators/builder/generator.ts b/packages/core/src/generators/builder/generator.ts
@@ -176,6 +176,7 @@ const componentMappers: {
         repeat: {
           collection: node.bindings.each?.code as string,
           itemName: node.scope.forName,
+          indexName: node.scope.indexName,
         },
         children: node.children
           .filter(filterEmptyTextNodes)

diff --git a/packages/core/src/parsers/builder/builder.ts b/packages/core/src/parsers/builder/builder.ts
@@ -574,6 +574,7 @@ export const builderElementToMitosisNode = (
         },
         scope: {
           forName: block.repeat?.itemName || 'item',
+          indexName: block.repeat?.indexName,
         },
         meta: getMetaFromBlock(block, options),
         children: