🏃 (#1634)

BuilderIO · Nov 8, 2024 · e90df53 · e90df53
1 parent 6f6db62
commit e90df53
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 34 deletions.
diff --git a/.changeset/warm-lobsters-nail.md b/.changeset/warm-lobsters-nail.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[Solid] Fix: handle Fragment with `key` prop
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -3743,25 +3743,55 @@ export default MyComponent;
 `;
 
 exports[`Solid > jsx > Javascript Test > basicForFragment 1`] = `
-"Property or signature expected. (26:17)
-  24 | {(option, _index) => {
-  25 |   const index = _index();
-> 26 |   return < key={\`key-\${option}\`} ><div >{option}</div></>}}
-     |                 ^
-  27 |
-  28 | </For></div>
-  29 |"
+"import { For } from \\"solid-js\\";
+
+function BasicForFragment(props) {
+  return (
+    <>
+      <div>
+        <For each={[\\"a\\", \\"b\\", \\"c\\"]}>
+          {(option, _index) => {
+            const index = _index();
+            return (
+              <Fragment key={\`key-\${option}\`}>
+                <div>{option}</div>
+              </Fragment>
+            );
+          }}
+        </For>
+      </div>
+    </>
+  );
+}
+
+export default BasicForFragment;
+"
 `;
 
 exports[`Solid > jsx > Javascript Test > basicForFragment 2`] = `
-"Property or signature expected. (26:17)
-  24 | {(option, _index) => {
-  25 |   const index = _index();
-> 26 |   return < key={\`key-\${option}\`} ><div >{option}</div></>}}
-     |                 ^
-  27 |
-  28 | </For></div>
-  29 |"
+"import { For } from \\"solid-js\\";
+
+function BasicForFragment(props) {
+  return (
+    <>
+      <div>
+        <For each={[\\"a\\", \\"b\\", \\"c\\"]}>
+          {(option, _index) => {
+            const index = _index();
+            return (
+              <Fragment key={\`key-\${option}\`}>
+                <div>{option}</div>
+              </Fragment>
+            );
+          }}
+        </For>
+      </div>
+    </>
+  );
+}
+
+export default BasicForFragment;
+"
 `;
 
 exports[`Solid > jsx > Javascript Test > basicForNoTagReference 1`] = `
@@ -11957,25 +11987,55 @@ export default MyComponent;
 `;
 
 exports[`Solid > jsx > Typescript Test > basicForFragment 1`] = `
-"Property or signature expected. (26:17)
-  24 | {(option, _index) => {
-  25 |   const index = _index();
-> 26 |   return < key={\`key-\${option}\`} ><div >{option}</div></>}}
-     |                 ^
-  27 |
-  28 | </For></div>
-  29 |"
+"import { For } from \\"solid-js\\";
+
+function BasicForFragment(props: any) {
+  return (
+    <>
+      <div>
+        <For each={[\\"a\\", \\"b\\", \\"c\\"]}>
+          {(option, _index) => {
+            const index = _index();
+            return (
+              <Fragment key={\`key-\${option}\`}>
+                <div>{option}</div>
+              </Fragment>
+            );
+          }}
+        </For>
+      </div>
+    </>
+  );
+}
+
+export default BasicForFragment;
+"
 `;
 
 exports[`Solid > jsx > Typescript Test > basicForFragment 2`] = `
-"Property or signature expected. (26:17)
-  24 | {(option, _index) => {
-  25 |   const index = _index();
-> 26 |   return < key={\`key-\${option}\`} ><div >{option}</div></>}}
-     |                 ^
-  27 |
-  28 | </For></div>
-  29 |"
+"import { For } from \\"solid-js\\";
+
+function BasicForFragment(props: any) {
+  return (
+    <>
+      <div>
+        <For each={[\\"a\\", \\"b\\", \\"c\\"]}>
+          {(option, _index) => {
+            const index = _index();
+            return (
+              <Fragment key={\`key-\${option}\`}>
+                <div>{option}</div>
+              </Fragment>
+            );
+          }}
+        </For>
+      </div>
+    </>
+  );
+}
+
+export default BasicForFragment;
+"
 `;
 
 exports[`Solid > jsx > Typescript Test > basicForNoTagReference 1`] = `

diff --git a/packages/core/src/generators/solid/blocks.ts b/packages/core/src/generators/solid/blocks.ts
@@ -57,7 +57,9 @@ export const blockToSolid = (
 
   let str = '';
 
-  if (json.name === 'Fragment') {
+  const isFragmentWithoutKey = json.name === 'Fragment' && !json.bindings.key;
+
+  if (isFragmentWithoutKey) {
     str += '<';
   } else {
     str += `<${json.name} `;
@@ -128,7 +130,7 @@ export const blockToSolid = (
       .join('\n');
   }
 
-  if (json.name === 'Fragment') {
+  if (isFragmentWithoutKey) {
     str += '</>';
   } else {
     str += `</${json.name}>`;