From 2732c5ba12a3648aa8d26f78d8b9f25ce5ea6da7 Mon Sep 17 00:00:00 2001
From: Marvin Brouwer <marvin-brouwer@live.nl>
Date: Fri, 19 Jan 2024 21:08:24 +0100
Subject: [PATCH 1/8] chore: configured whitespace for consistency

---
 .editorconfig         |  5 +++++
 .vscode/settings.json | 18 ++++++++++--------
 2 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 .editorconfig

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000000..86b561542f
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,5 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0eb31972af..74a96f84fa 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,9 +1,11 @@
 {
-  "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit",
-    "source.organizeImports": "explicit"
-  },
-  "typescript.format.enable": true,
-  "editor.formatOnSave": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
+	"files.eol": "\n",
+	"editor.renderWhitespace": "boundary",
+	"editor.codeActionsOnSave": {
+		"source.fixAll": "explicit",
+		"source.organizeImports": "explicit"
+	},
+	"typescript.format.enable": true,
+	"editor.formatOnSave": true,
+	"typescript.tsdk": "node_modules/typescript/lib"
+}
\ No newline at end of file

From 601ca7a79b0cacd43476d0f8438912f446510ded Mon Sep 17 00:00:00 2001
From: Marvin Brouwer <marvin-brouwer@live.nl>
Date: Mon, 22 Jan 2024 08:40:16 +0100
Subject: [PATCH 2/8] feat(1333): Added documentation of intended feature

---
 docs/components.md | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/docs/components.md b/docs/components.md
index b2eb9cffce..33ff5fda5c 100644
--- a/docs/components.md
+++ b/docs/components.md
@@ -380,3 +380,27 @@ export default function Layout(props) {
   );
 }
 ```
+
+### Slots with data
+
+In case of components that might need to reference data inside of slots, you can simply pass along props:
+
+```jsx
+import { Slot } from '@builder.io/mitosis';
+
+export default function Carousel(props) {
+  return (
+    <ul className="carousel">
+      <For each={props.items} >
+      {
+        (item) => (
+          <li className="carousel-item">
+            <Slot name="item" item={item}>Top default</Slot>
+          </li>
+        )
+      }
+      </For>
+    </ul>
+  );
+}
+```

From aedb2acf426fb33915449b54005d6c07a09fd2a2 Mon Sep 17 00:00:00 2001
From: Marvin Brouwer <marvin-brouwer@live.nl>
Date: Mon, 22 Jan 2024 20:58:14 +0100
Subject: [PATCH 3/8] feat(1333): Added data binding for vue slots

---
 .../vue-composition.test.ts.snap              | 106 ++++++++----
 .../__tests__/__snapshots__/vue.test.ts.snap  | 118 +++++++++----
 .../data/blocks/slot-named-data.raw.tsx       |  17 ++
 .../__tests__/data/blocks/slot-named.raw.tsx  |   4 +-
 packages/core/src/__tests__/test-generator.ts |   2 +
 packages/core/src/generators/vue/blocks.ts    | 160 +++++++++---------
 6 files changed, 266 insertions(+), 141 deletions(-)
 create mode 100644 packages/core/src/__tests__/data/blocks/slot-named-data.raw.tsx

diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
index 53578b0172..ceed8eb4b5 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -12,7 +12,7 @@ exports[`Vue > jsx > Javascript Test > AdvancedRef 1`] = `
         @change=\\"name = $event.target.value\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-      <select name=\\"cars\\" id=\\"cars\\">
+      <select id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
       </select>
@@ -215,7 +215,7 @@ exports[`Vue > jsx > Javascript Test > BasicBooleanAttribute 1`] = `
 "<template>
   <div>
     <template v-if=\\"$slots.default\\">
-      <slot />
+      <slot :_text=\\"$slots.default\\" />
 
       {{ type }}
     </template>
@@ -303,7 +303,7 @@ exports[`Vue > jsx > Javascript Test > BasicRef 1`] = `
         @change=\\"name = $event.target.value\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-      <select name=\\"cars\\" id=\\"cars\\">
+      <select id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
       </select>
@@ -478,7 +478,7 @@ function getColumnCssWidth(index) {
 exports[`Vue > jsx > Javascript Test > ContentSlotHtml 1`] = `
 "<template>
   <div>
-    <slot name=\\"testing\\"></slot>
+    <slot name=\\"testing\\" :name=\\"$slots.testing\\"></slot>
     <div>
       <hr />
     </div>
@@ -510,7 +510,7 @@ exports[`Vue > jsx > Javascript Test > ContentSlotJSX 1`] = `
       <div>
         <hr />
       </div>
-      <div><slot /></div>
+      <div><slot :_text=\\"$slots.default\\" /></div>
     </div>
   </template>
 </template>
@@ -1050,7 +1050,7 @@ exports[`Vue > jsx > Javascript Test > Image 1`] = `
 
       <source :srcset=\\"srcset\\" />
     </picture>
-    <slot />
+    <slot :_text=\\"$slots.default\\" />
   </div>
 </template>
 
@@ -1215,7 +1215,6 @@ const props = defineProps([
 exports[`Vue > jsx > Javascript Test > InputParent 1`] = `
 "<template>
   <form-input-component
-    name=\\"kingzez\\"
     type=\\"text\\"
     :onChange=\\"(value) => handleChange(value)\\"
   ></form-input-component>
@@ -1267,7 +1266,7 @@ exports[`Vue > jsx > Javascript Test > Section 1`] = `
     \\"
     v-bind=\\"attributes\\"
   >
-    <slot />
+    <slot :_text=\\"$slots.default\\" />
   </section>
 </template>
 
@@ -1286,7 +1285,7 @@ exports[`Vue > jsx > Javascript Test > Section 2`] = `
         }\\"
         v-bind=\\"attributes\\"
       >
-        <slot />
+        <slot :_text=\\"$slots.default\\" />
       </section>
     </template>
   </template>
@@ -1345,8 +1344,10 @@ exports[`Vue > jsx > Javascript Test > SlotHtml 1`] = `
 "<template>
   <div>
     <content-slot-code>
-      <template #testing>
+      <template #testing :testing=\\"<div>Hello</div>\\">
+        {
         <div>Hello</div>
+        }
       </template>
     </content-slot-code>
   </div>
@@ -1373,12 +1374,32 @@ exports[`Vue > jsx > Javascript Test > SlotNamed 1`] = `
 "<template>
   <div>
     <slot name=\\"top\\"></slot>
-    <slot name=\\"left\\">Default left</slot>
+    <slot name=\\"left\\">Left</slot>
+    <p>Default slots</p>
     <slot>Default Child</slot>
+    <slot>Default, named Child</slot>
   </div>
 </template>"
 `;
 
+exports[`Vue > jsx > Javascript Test > SlotNamedData 1`] = `
+"<template>
+  <div>
+    <slot name=\\"top\\" :data=\\"data\\"></slot>
+    <slot name=\\"left\\" :left=\\"data\\">Left</slot>
+    <p>Default slots</p>
+    <slot :data=\\"data\\">Default, named Child</slot>
+    <p>Template slots</p>
+    <template #data :data=\\"data\\"> { data } </template>
+    <template #keyed :data=\\"data\\"> { data } </template>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps([\\"data\\"]);
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > Stamped.io 1`] = `
 "<template>
   <div :data-user=\\"name\\">
@@ -2303,7 +2324,7 @@ const props = defineProps([\\"name\\"]);
 exports[`Vue > jsx > Javascript Test > propsDestructure 1`] = `
 "<template>
   <div>
-    <slot /> {{ type }}
+    <slot :_text=\\"$slots.default\\" /> {{ type }}
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </template>
@@ -2704,7 +2725,7 @@ exports[`Vue > jsx > Javascript Test > self-referencing component 1`] = `
     {{ name }}
 
     <template v-if=\\"name === 'Batman'\\">
-      <my-component name=\\"Bruce Wayne\\"></my-component>
+      <my-component></my-component>
     </template>
   </div>
 </template>
@@ -2718,10 +2739,10 @@ exports[`Vue > jsx > Javascript Test > self-referencing component with children
 "<template>
   <div>
     {{ name }}
-    <slot />
+    <slot :_text=\\"$slots.default\\" />
 
     <template v-if=\\"name === 'Batman'\\">
-      <my-component name=\\"Bruce\\">
+      <my-component>
         <div>Wayne</div>
       </my-component>
     </template>
@@ -3001,7 +3022,7 @@ exports[`Vue > jsx > Typescript Test > AdvancedRef 1`] = `
         @change=\\"name = $event.target.value\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-      <select name=\\"cars\\" id=\\"cars\\">
+      <select id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
       </select>
@@ -3217,7 +3238,7 @@ exports[`Vue > jsx > Typescript Test > BasicBooleanAttribute 1`] = `
 "<template>
   <div>
     <template v-if=\\"$slots.default\\">
-      <slot />
+      <slot :_text=\\"$slots.default\\" />
 
       {{ type }}
     </template>
@@ -3310,7 +3331,7 @@ exports[`Vue > jsx > Typescript Test > BasicRef 1`] = `
         @change=\\"name = $event.target.value\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-      <select name=\\"cars\\" id=\\"cars\\">
+      <select id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
       </select>
@@ -3519,7 +3540,7 @@ function getColumnCssWidth(index: number) {
 exports[`Vue > jsx > Typescript Test > ContentSlotHtml 1`] = `
 "<template>
   <div>
-    <slot name=\\"testing\\"></slot>
+    <slot name=\\"testing\\" :name=\\"$slots.testing\\"></slot>
     <div>
       <hr />
     </div>
@@ -3558,7 +3579,7 @@ exports[`Vue > jsx > Typescript Test > ContentSlotJSX 1`] = `
       <div>
         <hr />
       </div>
-      <div><slot /></div>
+      <div><slot :_text=\\"$slots.default\\" /></div>
     </div>
   </template>
 </template>
@@ -4126,7 +4147,7 @@ exports[`Vue > jsx > Typescript Test > Image 1`] = `
 
       <source :srcset=\\"srcset\\" />
     </picture>
-    <slot />
+    <slot :_text=\\"$slots.default\\" />
   </div>
 </template>
 
@@ -4315,7 +4336,6 @@ const props = defineProps<FormInputProps>();
 exports[`Vue > jsx > Typescript Test > InputParent 1`] = `
 "<template>
   <form-input-component
-    name=\\"kingzez\\"
     type=\\"text\\"
     :onChange=\\"(value) => handleChange(value)\\"
   ></form-input-component>
@@ -4372,7 +4392,7 @@ exports[`Vue > jsx > Typescript Test > Section 1`] = `
     \\"
     v-bind=\\"attributes\\"
   >
-    <slot />
+    <slot :_text=\\"$slots.default\\" />
   </section>
 </template>
 
@@ -4397,7 +4417,7 @@ exports[`Vue > jsx > Typescript Test > Section 2`] = `
         }\\"
         v-bind=\\"attributes\\"
       >
-        <slot />
+        <slot :_text=\\"$slots.default\\" />
       </section>
     </template>
   </template>
@@ -4473,8 +4493,10 @@ exports[`Vue > jsx > Typescript Test > SlotHtml 1`] = `
 "<template>
   <div>
     <content-slot-code>
-      <template #testing>
+      <template #testing :testing=\\"<div>Hello</div>\\">
+        {
         <div>Hello</div>
+        }
       </template>
     </content-slot-code>
   </div>
@@ -4509,8 +4531,10 @@ exports[`Vue > jsx > Typescript Test > SlotNamed 1`] = `
 "<template>
   <div>
     <slot name=\\"top\\"></slot>
-    <slot name=\\"left\\">Default left</slot>
+    <slot name=\\"left\\">Left</slot>
+    <p>Default slots</p>
     <slot>Default Child</slot>
+    <slot>Default, named Child</slot>
   </div>
 </template>
 
@@ -4521,6 +4545,28 @@ type Props = {
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > SlotNamedData 1`] = `
+"<template>
+  <div>
+    <slot name=\\"top\\" :data=\\"data\\"></slot>
+    <slot name=\\"left\\" :left=\\"data\\">Left</slot>
+    <p>Default slots</p>
+    <slot :data=\\"data\\">Default, named Child</slot>
+    <p>Template slots</p>
+    <template #data :data=\\"data\\"> { data } </template>
+    <template #keyed :data=\\"data\\"> { data } </template>
+  </div>
+</template>
+
+<script setup lang=\\"ts\\">
+type Props = {
+  [key: string]: string;
+};
+
+const props = defineProps<Props>();
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > Stamped.io 1`] = `
 "<template>
   <div :data-user=\\"name\\">
@@ -5571,7 +5617,7 @@ const props = defineProps<MyBasicComponentProps>();
 exports[`Vue > jsx > Typescript Test > propsDestructure 1`] = `
 "<template>
   <div>
-    <slot /> {{ type }}
+    <slot :_text=\\"$slots.default\\" /> {{ type }}
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </template>
@@ -6019,7 +6065,7 @@ exports[`Vue > jsx > Typescript Test > self-referencing component 1`] = `
     {{ name }}
 
     <template v-if=\\"name === 'Batman'\\">
-      <my-component name=\\"Bruce Wayne\\"></my-component>
+      <my-component></my-component>
     </template>
   </div>
 </template>
@@ -6033,10 +6079,10 @@ exports[`Vue > jsx > Typescript Test > self-referencing component with children
 "<template>
   <div>
     {{ name }}
-    <slot />
+    <slot :_text=\\"$slots.default\\" />
 
     <template v-if=\\"name === 'Batman'\\">
-      <my-component name=\\"Bruce\\">
+      <my-component>
         <div>Wayne</div>
       </my-component>
     </template>
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 4a0defc237..f26d37de76 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -12,7 +12,7 @@ exports[`Vue > jsx > Javascript Test > AdvancedRef 1`] = `
         @change=\\"name = $event.target.value\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-      <select name=\\"cars\\" id=\\"cars\\">
+      <select id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
       </select>
@@ -286,7 +286,7 @@ exports[`Vue > jsx > Javascript Test > BasicBooleanAttribute 1`] = `
 "<template>
   <div>
     <template v-if=\\"$slots.default\\">
-      <slot />
+      <slot :_text=\\"$slots.default\\" />
 
       {{ type }}
     </template>
@@ -392,7 +392,7 @@ exports[`Vue > jsx > Javascript Test > BasicRef 1`] = `
         @change=\\"name = $event.target.value\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-      <select name=\\"cars\\" id=\\"cars\\">
+      <select id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
       </select>
@@ -611,7 +611,7 @@ export default defineComponent({
 exports[`Vue > jsx > Javascript Test > ContentSlotHtml 1`] = `
 "<template>
   <div>
-    <slot name=\\"testing\\"></slot>
+    <slot name=\\"testing\\" :name=\\"$slots.testing\\"></slot>
     <div>
       <hr />
     </div>
@@ -647,7 +647,7 @@ exports[`Vue > jsx > Javascript Test > ContentSlotJSX 1`] = `
     <div>
       <hr />
     </div>
-    <div><slot /></div>
+    <div><slot :_text=\\"$slots.default\\" /></div>
   </div>
 </template>
 
@@ -1216,7 +1216,7 @@ exports[`Vue > jsx > Javascript Test > Image 1`] = `
 
       <source :srcset=\\"srcset\\" />
     </picture>
-    <slot />
+    <slot :_text=\\"$slots.default\\" />
   </div>
 </template>
 
@@ -1395,7 +1395,6 @@ export default defineComponent({
 exports[`Vue > jsx > Javascript Test > InputParent 1`] = `
 "<template>
   <form-input-component
-    name=\\"kingzez\\"
     type=\\"text\\"
     :onChange=\\"(value) => handleChange(value)\\"
   ></form-input-component>
@@ -1464,7 +1463,7 @@ exports[`Vue > jsx > Javascript Test > Section 1`] = `
     \\"
     v-bind=\\"attributes\\"
   >
-    <slot />
+    <slot :_text=\\"$slots.default\\" />
   </section>
 </template>
 
@@ -1490,7 +1489,7 @@ exports[`Vue > jsx > Javascript Test > Section 2`] = `
     :key=\\"index\\"
     v-bind=\\"attributes\\"
   >
-    <slot />
+    <slot :_text=\\"$slots.default\\" />
   </section>
 </template>
 
@@ -1564,8 +1563,10 @@ exports[`Vue > jsx > Javascript Test > SlotHtml 1`] = `
 "<template>
   <div>
     <content-slot-code>
-      <template #testing>
+      <template #testing :testing=\\"<div>Hello</div>\\">
+        {
         <div>Hello</div>
+        }
       </template>
     </content-slot-code>
   </div>
@@ -1606,8 +1607,10 @@ exports[`Vue > jsx > Javascript Test > SlotNamed 1`] = `
 "<template>
   <div>
     <slot name=\\"top\\"></slot>
-    <slot name=\\"left\\">Default left</slot>
+    <slot name=\\"left\\">Left</slot>
+    <p>Default slots</p>
     <slot>Default Child</slot>
+    <slot>Default, named Child</slot>
   </div>
 </template>
 
@@ -1620,6 +1623,30 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > SlotNamedData 1`] = `
+"<template>
+  <div>
+    <slot name=\\"top\\" :data=\\"data\\"></slot>
+    <slot name=\\"left\\" :left=\\"data\\">Left</slot>
+    <p>Default slots</p>
+    <slot :data=\\"data\\">Default, named Child</slot>
+    <p>Template slots</p>
+    <template #data :data=\\"data\\"> { data } </template>
+    <template #keyed :data=\\"data\\"> { data } </template>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"slot-code\\",
+
+  props: [\\"data\\"],
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > Stamped.io 1`] = `
 "<template>
   <div :data-user=\\"name\\">
@@ -2819,7 +2846,7 @@ export default defineComponent({
 exports[`Vue > jsx > Javascript Test > propsDestructure 1`] = `
 "<template>
   <div>
-    <slot /> {{ type }}
+    <slot :_text=\\"$slots.default\\" /> {{ type }}
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </template>
@@ -3276,7 +3303,7 @@ exports[`Vue > jsx > Javascript Test > self-referencing component 1`] = `
     {{ name }}
 
     <template v-if=\\"name === 'Batman'\\">
-      <my-component name=\\"Bruce Wayne\\"></my-component>
+      <my-component></my-component>
     </template>
   </div>
 </template>
@@ -3296,10 +3323,10 @@ exports[`Vue > jsx > Javascript Test > self-referencing component with children
 "<template>
   <div>
     {{ name }}
-    <slot />
+    <slot :_text=\\"$slots.default\\" />
 
     <template v-if=\\"name === 'Batman'\\">
-      <my-component name=\\"Bruce\\">
+      <my-component>
         <div>Wayne</div>
       </my-component>
     </template>
@@ -3687,7 +3714,7 @@ exports[`Vue > jsx > Typescript Test > AdvancedRef 1`] = `
         @change=\\"name = $event.target.value\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-      <select name=\\"cars\\" id=\\"cars\\">
+      <select id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
       </select>
@@ -3974,7 +4001,7 @@ exports[`Vue > jsx > Typescript Test > BasicBooleanAttribute 1`] = `
 "<template>
   <div>
     <template v-if=\\"$slots.default\\">
-      <slot />
+      <slot :_text=\\"$slots.default\\" />
 
       {{ type }}
     </template>
@@ -4085,7 +4112,7 @@ exports[`Vue > jsx > Typescript Test > BasicRef 1`] = `
         @change=\\"name = $event.target.value\\"
       />
       <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
-      <select name=\\"cars\\" id=\\"cars\\">
+      <select id=\\"cars\\">
         <option value=\\"supra\\">GR Supra</option>
         <option value=\\"86\\">GR 86</option>
       </select>
@@ -4338,7 +4365,7 @@ export default defineComponent({
 exports[`Vue > jsx > Typescript Test > ContentSlotHtml 1`] = `
 "<template>
   <div>
-    <slot name=\\"testing\\"></slot>
+    <slot name=\\"testing\\" :name=\\"$slots.testing\\"></slot>
     <div>
       <hr />
     </div>
@@ -4381,7 +4408,7 @@ exports[`Vue > jsx > Typescript Test > ContentSlotJSX 1`] = `
     <div>
       <hr />
     </div>
-    <div><slot /></div>
+    <div><slot :_text=\\"$slots.default\\" /></div>
   </div>
 </template>
 
@@ -4997,7 +5024,7 @@ exports[`Vue > jsx > Typescript Test > Image 1`] = `
 
       <source :srcset=\\"srcset\\" />
     </picture>
-    <slot />
+    <slot :_text=\\"$slots.default\\" />
   </div>
 </template>
 
@@ -5223,7 +5250,6 @@ export default defineComponent({
 exports[`Vue > jsx > Typescript Test > InputParent 1`] = `
 "<template>
   <form-input-component
-    name=\\"kingzez\\"
     type=\\"text\\"
     :onChange=\\"(value) => handleChange(value)\\"
   ></form-input-component>
@@ -5297,7 +5323,7 @@ exports[`Vue > jsx > Typescript Test > Section 1`] = `
     \\"
     v-bind=\\"attributes\\"
   >
-    <slot />
+    <slot :_text=\\"$slots.default\\" />
   </section>
 </template>
 
@@ -5329,7 +5355,7 @@ exports[`Vue > jsx > Typescript Test > Section 2`] = `
     :key=\\"index\\"
     v-bind=\\"attributes\\"
   >
-    <slot />
+    <slot :_text=\\"$slots.default\\" />
   </section>
 </template>
 
@@ -5424,8 +5450,10 @@ exports[`Vue > jsx > Typescript Test > SlotHtml 1`] = `
 "<template>
   <div>
     <content-slot-code>
-      <template #testing>
+      <template #testing :testing=\\"<div>Hello</div>\\">
+        {
         <div>Hello</div>
+        }
       </template>
     </content-slot-code>
   </div>
@@ -5474,8 +5502,10 @@ exports[`Vue > jsx > Typescript Test > SlotNamed 1`] = `
 "<template>
   <div>
     <slot name=\\"top\\"></slot>
-    <slot name=\\"left\\">Default left</slot>
+    <slot name=\\"left\\">Left</slot>
+    <p>Default slots</p>
     <slot>Default Child</slot>
+    <slot>Default, named Child</slot>
   </div>
 </template>
 
@@ -5492,6 +5522,34 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > SlotNamedData 1`] = `
+"<template>
+  <div>
+    <slot name=\\"top\\" :data=\\"data\\"></slot>
+    <slot name=\\"left\\" :left=\\"data\\">Left</slot>
+    <p>Default slots</p>
+    <slot :data=\\"data\\">Default, named Child</slot>
+    <p>Template slots</p>
+    <template #data :data=\\"data\\"> { data } </template>
+    <template #keyed :data=\\"data\\"> { data } </template>
+  </div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+type Props = {
+  [key: string]: string;
+};
+
+export default defineComponent({
+  name: \\"slot-code\\",
+
+  props: [\\"data\\"],
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > Stamped.io 1`] = `
 "<template>
   <div :data-user=\\"name\\">
@@ -6833,7 +6891,7 @@ export default defineComponent({
 exports[`Vue > jsx > Typescript Test > propsDestructure 1`] = `
 "<template>
   <div>
-    <slot /> {{ type }}
+    <slot :_text=\\"$slots.default\\" /> {{ type }}
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </template>
@@ -7337,7 +7395,7 @@ exports[`Vue > jsx > Typescript Test > self-referencing component 1`] = `
     {{ name }}
 
     <template v-if=\\"name === 'Batman'\\">
-      <my-component name=\\"Bruce Wayne\\"></my-component>
+      <my-component></my-component>
     </template>
   </div>
 </template>
@@ -7357,10 +7415,10 @@ exports[`Vue > jsx > Typescript Test > self-referencing component with children
 "<template>
   <div>
     {{ name }}
-    <slot />
+    <slot :_text=\\"$slots.default\\" />
 
     <template v-if=\\"name === 'Batman'\\">
-      <my-component name=\\"Bruce\\">
+      <my-component>
         <div>Wayne</div>
       </my-component>
     </template>
diff --git a/packages/core/src/__tests__/data/blocks/slot-named-data.raw.tsx b/packages/core/src/__tests__/data/blocks/slot-named-data.raw.tsx
new file mode 100644
index 0000000000..715d63cbc5
--- /dev/null
+++ b/packages/core/src/__tests__/data/blocks/slot-named-data.raw.tsx
@@ -0,0 +1,17 @@
+import { Slot } from '@builder.io/mitosis';
+
+type Props = { [key: string]: string };
+
+export default function SlotCode(props: Props) {
+  return (
+    <div>
+      <Slot name="top" data={props.data} />
+      <Slot name="left" left={props.data}>Left</Slot>
+      <p>Default slots</p>
+      <Slot name="default" data={props.data}>Default, named Child</Slot>
+      <p>Template slots</p>
+      <Slot data={props.data}>Default Child</Slot>
+      <Slot key="keyed" data={props.data}>Keyed child</Slot>
+    </div>
+  );
+}
diff --git a/packages/core/src/__tests__/data/blocks/slot-named.raw.tsx b/packages/core/src/__tests__/data/blocks/slot-named.raw.tsx
index 6574be8875..c1cc3a32e9 100644
--- a/packages/core/src/__tests__/data/blocks/slot-named.raw.tsx
+++ b/packages/core/src/__tests__/data/blocks/slot-named.raw.tsx
@@ -6,8 +6,10 @@ export default function SlotCode(props: Props) {
   return (
     <div>
       <Slot name="top" />
-      <Slot name="left">Default left</Slot>
+      <Slot name="left">Left</Slot>
+      <p>Default slots</p>
       <Slot>Default Child</Slot>
+      <Slot name="default">Default, named Child</Slot>
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index 71448500c2..354be44c99 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -95,6 +95,7 @@ const slotDefault = getRawFile('./data/blocks/slot-default.raw.tsx');
 const slotHtml = getRawFile('./data/blocks/slot-html.raw.tsx');
 const slotJsx = getRawFile('./data/blocks/slot-jsx.raw.tsx');
 const slotNamed = getRawFile('./data/blocks/slot-named.raw.tsx');
+const slotNamedData = getRawFile('./data/blocks/slot-named-data.raw.tsx');
 const stamped = getRawFile('./data/blocks/stamped-io.raw.tsx');
 const submitButtonBlock = getRawFile('./data/blocks/submit-button.raw.tsx');
 const text = getRawFile('./data/blocks/text.raw.tsx');
@@ -221,6 +222,7 @@ const SLOTS_TESTS: Tests = {
   SlotJsx: slotJsx,
   SlotHtml: slotHtml,
   SlotNamed: slotNamed,
+  SlotNamedData: slotNamedData,
   classState,
 };
 
diff --git a/packages/core/src/generators/vue/blocks.ts b/packages/core/src/generators/vue/blocks.ts
index 39bbbbe256..8ff65b3f89 100644
--- a/packages/core/src/generators/vue/blocks.ts
+++ b/packages/core/src/generators/vue/blocks.ts
@@ -86,14 +86,14 @@ const NODE_MAPPERS: {
 
     return firstChild
       ? pipe(
-          firstChild,
-          addBindingsToJson({ key: keyValue }),
-          addPropertiesToJson({
-            [SPECIAL_PROPERTIES.V_FOR]: forValue,
-            ...(jsonIf ? { [SPECIAL_PROPERTIES.V_IF]: jsonIf } : {}),
-          }),
-          (block) => blockToVue(block, options),
-        )
+        firstChild,
+        addBindingsToJson({ key: keyValue }),
+        addPropertiesToJson({
+          [SPECIAL_PROPERTIES.V_FOR]: forValue,
+          ...(jsonIf ? { [SPECIAL_PROPERTIES.V_IF]: jsonIf } : {}),
+        }),
+        (block) => blockToVue(block, options),
+      )
       : '';
   },
   Show(json, options, scope) {
@@ -103,14 +103,13 @@ const NODE_MAPPERS: {
     <template ${SPECIAL_PROPERTIES.V_IF}="${encodeQuotes(ifValue)}">
       ${json.children.map((item) => blockToVue(item, options)).join('\n')}
     </template>
-    ${
-      isMitosisNode(json.meta.else)
+    ${isMitosisNode(json.meta.else)
         ? `
         <template ${SPECIAL_PROPERTIES.V_ELSE}>
           ${blockToVue(json.meta.else, options)}
         </template>`
         : ''
-    }
+      }
     `;
 
     switch (options.vueVersion) {
@@ -237,10 +236,10 @@ const NODE_MAPPERS: {
             | undefined;
           const elseString = firstChildOfFirstChild
             ? pipe(
-                firstChildOfFirstChild,
-                addPropertiesToJson({ [SPECIAL_PROPERTIES.V_ELSE]: '' }),
-                (block) => blockToVue(block, options),
-              )
+              firstChildOfFirstChild,
+              addPropertiesToJson({ [SPECIAL_PROPERTIES.V_ELSE]: '' }),
+              (block) => blockToVue(block, options),
+            )
             : '';
 
           return `
@@ -255,16 +254,16 @@ const NODE_MAPPERS: {
         } else {
           const ifString = firstChild
             ? pipe(
-                firstChild,
-                addPropertiesToJson({ [SPECIAL_PROPERTIES.V_IF]: ifValue }),
-                (block) => blockToVue(block, options),
-              )
+              firstChild,
+              addPropertiesToJson({ [SPECIAL_PROPERTIES.V_IF]: ifValue }),
+              (block) => blockToVue(block, options),
+            )
             : '';
 
           const elseString = isMitosisNode(elseBlock)
             ? pipe(elseBlock, addPropertiesToJson({ [SPECIAL_PROPERTIES.V_ELSE]: '' }), (block) =>
-                blockToVue(block, options),
-              )
+              blockToVue(block, options),
+            )
             : '';
 
           return `
@@ -278,31 +277,30 @@ const NODE_MAPPERS: {
     const slotName = json.bindings.name?.code || json.properties.name;
 
     const renderChildren = () => json.children?.map((item) => blockToVue(item, options)).join('\n');
+    console.log(Object.keys(json.bindings))
 
     if (!slotName) {
-      const key = Object.keys(json.bindings).find(Boolean);
+      const key = Object.keys(json.bindings).find((key) => key !== 'key');
       if (!key) {
         if (!json.children?.length) {
-          return '<slot/>';
+          return `<slot${getSlotBindings(json)}/>`;
         }
-        return `<slot>${renderChildren()}</slot>`;
+        return `<slot${getSlotBindings(json)}>${renderChildren()}</slot>`;
       }
 
-      return `
-        <template #${key}>
-          ${json.bindings[key]?.code}
-        </template>
-      `;
+      return `<template #${json.properties.key || key}${getSlotBindings(json)}>
+        { ${json.bindings[key]?.code} }
+      </template>`;
     }
 
     if (slotName === 'default') {
-      return `<slot>${renderChildren()}</slot>`;
+      return `<slot${getSlotBindings(json)}>${renderChildren()}</slot>`;
     }
 
     return `<slot name="${stripSlotPrefix(
       slotName,
       SLOT_PREFIX,
-    ).toLowerCase()}">${renderChildren()}</slot>`;
+    ).toLowerCase()}"${getSlotBindings(json)}>${renderChildren()}</slot>`;
   },
 };
 
@@ -310,52 +308,52 @@ const SPECIAL_HTML_TAGS = ['style', 'script'];
 
 const stringifyBinding =
   (node: MitosisNode) =>
-  ([key, value]: [string, Binding]) => {
-    const isValidHtmlTag = VALID_HTML_TAGS.includes(node.name);
-
-    if (value.type === 'spread') {
-      return ''; // we handle this after
-    } else if (key === 'class') {
-      return `:class="_classStringToObject(${value?.code})"`;
-      // TODO: support dynamic classes as objects somehow like Vue requires
-      // https://vuejs.org/v2/guide/class-and-style.html
-    } else {
-      // TODO: proper babel transform to replace. Util for this
-      const useValue = value?.code || '';
-
-      if (key.startsWith('on') && isValidHtmlTag) {
-        // handle html native on[event] props
-        const { arguments: cusArgs = ['event'] } = value!;
-        let event = key.replace('on', '').toLowerCase();
-        const isAssignmentExpression = useValue.includes('=');
-
-        const eventHandlerValue = pipe(
-          replaceIdentifiers({
-            code: useValue,
-            from: cusArgs[0],
-            to: '$event',
-          }),
-          isAssignmentExpression ? identity : removeSurroundingBlock,
-          removeSurroundingBlock,
-          encodeQuotes,
-        );
-
-        const eventHandlerKey = `${SPECIAL_PROPERTIES.V_ON_AT}${event}`;
-
-        return `${eventHandlerKey}="${eventHandlerValue}"`;
-      } else if (key.startsWith('on')) {
-        // handle on[custom event] props
-        const { arguments: cusArgs = ['event'] } = node.bindings[key]!;
-        return `:${key}="(${cusArgs.join(',')}) => ${encodeQuotes(useValue)}"`;
-      } else if (key === 'ref') {
-        return `ref="${encodeQuotes(useValue)}"`;
-      } else if (BINDING_MAPPERS[key]) {
-        return `${BINDING_MAPPERS[key]}="${encodeQuotes(useValue.replace(/"/g, "\\'"))}"`;
+    ([key, value]: [string, Binding]) => {
+      const isValidHtmlTag = VALID_HTML_TAGS.includes(node.name);
+
+      if (value.type === 'spread') {
+        return ''; // we handle this after
+      } else if (key === 'class') {
+        return `:class="_classStringToObject(${value?.code})"`;
+        // TODO: support dynamic classes as objects somehow like Vue requires
+        // https://vuejs.org/v2/guide/class-and-style.html
       } else {
-        return `:${key}="${encodeQuotes(useValue)}"`;
+        // TODO: proper babel transform to replace. Util for this
+        const useValue = value?.code || '';
+
+        if (key.startsWith('on') && isValidHtmlTag) {
+          // handle html native on[event] props
+          const { arguments: cusArgs = ['event'] } = value!;
+          let event = key.replace('on', '').toLowerCase();
+          const isAssignmentExpression = useValue.includes('=');
+
+          const eventHandlerValue = pipe(
+            replaceIdentifiers({
+              code: useValue,
+              from: cusArgs[0],
+              to: '$event',
+            }),
+            isAssignmentExpression ? identity : removeSurroundingBlock,
+            removeSurroundingBlock,
+            encodeQuotes,
+          );
+
+          const eventHandlerKey = `${SPECIAL_PROPERTIES.V_ON_AT}${event}`;
+
+          return `${eventHandlerKey}="${eventHandlerValue}"`;
+        } else if (key.startsWith('on')) {
+          // handle on[custom event] props
+          const { arguments: cusArgs = ['event'] } = node.bindings[key]!;
+          return `:${key}="(${cusArgs.join(',')}) => ${encodeQuotes(useValue)}"`;
+        } else if (key === 'ref') {
+          return `ref="${encodeQuotes(useValue)}"`;
+        } else if (BINDING_MAPPERS[key]) {
+          return `${BINDING_MAPPERS[key]}="${encodeQuotes(useValue.replace(/"/g, "\\'"))}"`;
+        } else {
+          return `:${key}="${encodeQuotes(useValue)}"`;
+        }
       }
-    }
-  };
+    };
 
 const stringifySpreads = ({ node, spreadType }: { node: MitosisNode; spreadType: SpreadType }) => {
   const spreads = Object.values(node.bindings)
@@ -375,8 +373,10 @@ const stringifySpreads = ({ node, spreadType }: { node: MitosisNode; spreadType:
   return ` ${key}="${encodeQuotes(stringifiedValue)}" `;
 };
 
-const getBlockBindings = (node: MitosisNode) => {
+const getSlotBindings = (node: MitosisNode) => getBlockBindings(node, 'name', 'key');
+const getBlockBindings = (node: MitosisNode, ...exclude: string[]) => {
   const stringifiedProperties = Object.entries(node.properties)
+    .filter(([key]) => !exclude.includes(key))
     .map(([key, value]) => {
       if (key === 'className') {
         return '';
@@ -392,7 +392,7 @@ const getBlockBindings = (node: MitosisNode) => {
     .map(stringifyBinding(node))
     .join(' ');
 
-  return [
+  return ' ' + [
     stringifiedProperties,
     stringifiedBindings,
     stringifySpreads({ node, spreadType: 'normal' }),
@@ -407,7 +407,7 @@ export const blockToVue: BlockRenderer = (node, options, scope) => {
   }
 
   if (isChildren({ node })) {
-    return `<slot/>`;
+    return `<slot${getSlotBindings(node)}/>`;
   }
 
   if (SPECIAL_HTML_TAGS.includes(node.name)) {
@@ -425,7 +425,7 @@ export const blockToVue: BlockRenderer = (node, options, scope) => {
     if (isSlotProperty(textCode, SLOT_PREFIX)) {
       const slotName = stripSlotPrefix(textCode, SLOT_PREFIX).toLowerCase();
 
-      if (slotName === 'default') return `<slot/>`;
+      if (slotName === 'default') return `<slot${getSlotBindings(node)}/>`;
 
       return `<slot name="${slotName}"/>`;
     }
@@ -434,7 +434,7 @@ export const blockToVue: BlockRenderer = (node, options, scope) => {
 
   let str = `<${node.name} `;
 
-  str += getBlockBindings(node);
+  str += getSlotBindings(node);
 
   if (SELF_CLOSING_HTML_TAGS.has(node.name)) {
     return str + ' />';

From 121bf935059e90cde1b6a7813c64d4f5fcf3f1b5 Mon Sep 17 00:00:00 2001
From: Marvin Brouwer <marvin-brouwer@live.nl>
Date: Mon, 22 Jan 2024 22:07:14 +0100
Subject: [PATCH 4/8] fix(1333): Corrected vue template implementation

---
 .../__snapshots__/vue-composition.test.ts.snap     | 14 ++------------
 .../src/__tests__/__snapshots__/vue.test.ts.snap   | 14 ++------------
 .../__tests__/data/blocks/slot-named-data.raw.tsx  |  3 ---
 packages/core/src/generators/vue/blocks.ts         |  6 +++---
 4 files changed, 7 insertions(+), 30 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
index ceed8eb4b5..3cb5d6df8e 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -1344,10 +1344,8 @@ exports[`Vue > jsx > Javascript Test > SlotHtml 1`] = `
 "<template>
   <div>
     <content-slot-code>
-      <template #testing :testing=\\"<div>Hello</div>\\">
-        {
+      <template #testing>
         <div>Hello</div>
-        }
       </template>
     </content-slot-code>
   </div>
@@ -1389,9 +1387,6 @@ exports[`Vue > jsx > Javascript Test > SlotNamedData 1`] = `
     <slot name=\\"left\\" :left=\\"data\\">Left</slot>
     <p>Default slots</p>
     <slot :data=\\"data\\">Default, named Child</slot>
-    <p>Template slots</p>
-    <template #data :data=\\"data\\"> { data } </template>
-    <template #keyed :data=\\"data\\"> { data } </template>
   </div>
 </template>
 
@@ -4493,10 +4488,8 @@ exports[`Vue > jsx > Typescript Test > SlotHtml 1`] = `
 "<template>
   <div>
     <content-slot-code>
-      <template #testing :testing=\\"<div>Hello</div>\\">
-        {
+      <template #testing>
         <div>Hello</div>
-        }
       </template>
     </content-slot-code>
   </div>
@@ -4552,9 +4545,6 @@ exports[`Vue > jsx > Typescript Test > SlotNamedData 1`] = `
     <slot name=\\"left\\" :left=\\"data\\">Left</slot>
     <p>Default slots</p>
     <slot :data=\\"data\\">Default, named Child</slot>
-    <p>Template slots</p>
-    <template #data :data=\\"data\\"> { data } </template>
-    <template #keyed :data=\\"data\\"> { data } </template>
   </div>
 </template>
 
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index f26d37de76..99a7c73097 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -1563,10 +1563,8 @@ exports[`Vue > jsx > Javascript Test > SlotHtml 1`] = `
 "<template>
   <div>
     <content-slot-code>
-      <template #testing :testing=\\"<div>Hello</div>\\">
-        {
+      <template #testing>
         <div>Hello</div>
-        }
       </template>
     </content-slot-code>
   </div>
@@ -1630,9 +1628,6 @@ exports[`Vue > jsx > Javascript Test > SlotNamedData 1`] = `
     <slot name=\\"left\\" :left=\\"data\\">Left</slot>
     <p>Default slots</p>
     <slot :data=\\"data\\">Default, named Child</slot>
-    <p>Template slots</p>
-    <template #data :data=\\"data\\"> { data } </template>
-    <template #keyed :data=\\"data\\"> { data } </template>
   </div>
 </template>
 
@@ -5450,10 +5445,8 @@ exports[`Vue > jsx > Typescript Test > SlotHtml 1`] = `
 "<template>
   <div>
     <content-slot-code>
-      <template #testing :testing=\\"<div>Hello</div>\\">
-        {
+      <template #testing>
         <div>Hello</div>
-        }
       </template>
     </content-slot-code>
   </div>
@@ -5529,9 +5522,6 @@ exports[`Vue > jsx > Typescript Test > SlotNamedData 1`] = `
     <slot name=\\"left\\" :left=\\"data\\">Left</slot>
     <p>Default slots</p>
     <slot :data=\\"data\\">Default, named Child</slot>
-    <p>Template slots</p>
-    <template #data :data=\\"data\\"> { data } </template>
-    <template #keyed :data=\\"data\\"> { data } </template>
   </div>
 </template>
 
diff --git a/packages/core/src/__tests__/data/blocks/slot-named-data.raw.tsx b/packages/core/src/__tests__/data/blocks/slot-named-data.raw.tsx
index 715d63cbc5..91559efb3f 100644
--- a/packages/core/src/__tests__/data/blocks/slot-named-data.raw.tsx
+++ b/packages/core/src/__tests__/data/blocks/slot-named-data.raw.tsx
@@ -9,9 +9,6 @@ export default function SlotCode(props: Props) {
       <Slot name="left" left={props.data}>Left</Slot>
       <p>Default slots</p>
       <Slot name="default" data={props.data}>Default, named Child</Slot>
-      <p>Template slots</p>
-      <Slot data={props.data}>Default Child</Slot>
-      <Slot key="keyed" data={props.data}>Keyed child</Slot>
     </div>
   );
 }
diff --git a/packages/core/src/generators/vue/blocks.ts b/packages/core/src/generators/vue/blocks.ts
index 8ff65b3f89..c6675395ac 100644
--- a/packages/core/src/generators/vue/blocks.ts
+++ b/packages/core/src/generators/vue/blocks.ts
@@ -288,8 +288,8 @@ const NODE_MAPPERS: {
         return `<slot${getSlotBindings(json)}>${renderChildren()}</slot>`;
       }
 
-      return `<template #${json.properties.key || key}${getSlotBindings(json)}>
-        { ${json.bindings[key]?.code} }
+      return `<template #${json.properties.key || key}>
+        ${json.bindings[key]?.code}
       </template>`;
     }
 
@@ -373,7 +373,7 @@ const stringifySpreads = ({ node, spreadType }: { node: MitosisNode; spreadType:
   return ` ${key}="${encodeQuotes(stringifiedValue)}" `;
 };
 
-const getSlotBindings = (node: MitosisNode) => getBlockBindings(node, 'name', 'key');
+const getSlotBindings = (node: MitosisNode) => getBlockBindings(node, 'name');
 const getBlockBindings = (node: MitosisNode, ...exclude: string[]) => {
   const stringifiedProperties = Object.entries(node.properties)
     .filter(([key]) => !exclude.includes(key))

From 740d2795741a7184d947ab6fcb697af7726c2b3a Mon Sep 17 00:00:00 2001
From: Marvin Brouwer <marvin-brouwer@live.nl>
Date: Mon, 22 Jan 2024 22:31:06 +0100
Subject: [PATCH 5/8] feat(1333): Added data binding for svelte slots
 fix(1333): Fixed whitespace issues in svelte snapshot

---
 .../__snapshots__/svelte.test.ts.snap         |  70 +++++---
 packages/core/src/generators/svelte/blocks.ts | 153 +++++++++---------
 2 files changed, 124 insertions(+), 99 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 6a8f9a34c0..a9a80df884 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -383,7 +383,6 @@ exports[`Svelte > jsx > Javascript Test > Button 1`] = `
       {text}
     </a>
   {/if}
-
   {#if !link}
     <button type=\\"button\\" {...attributes}>
       {text}
@@ -1123,8 +1122,8 @@ exports[`Svelte > jsx > Javascript Test > RawText 1`] = `
 </script>
 
 <span class={attributes?.class || attributes?.className}
-  >{@html text || \\"\\"}</span
->"
+  >{@html text || \\"\\"}
+</span>"
 `;
 
 exports[`Svelte > jsx > Javascript Test > Section 1`] = `
@@ -1269,15 +1268,30 @@ import  ContentSlotCode from './content-slot-jsx.raw';
 </script>
 
 <div >
-  <ContentSlotCode  slotTesting={<div>Hello</div>} ></ContentSlotCode>
+  <ContentSlotCode  slotTesting={<div>Hello</div>}></ContentSlotCode>
 </div>"
 `;
 
 exports[`Svelte > jsx > Javascript Test > SlotNamed 1`] = `
 "<div>
   <slot name=\\"top\\" />
-  <slot name=\\"left\\">Default left</slot>
+  <slot name=\\"left\\">Left</slot>
+  <p>Default slots</p>
   <slot>Default Child</slot>
+  <slot name=\\"default\\">Default, named Child</slot>
+</div>"
+`;
+
+exports[`Svelte > jsx > Javascript Test > SlotNamedData 1`] = `
+"<script>
+  export let data;
+</script>
+
+<div>
+  <slot name=\\"top\\" {data} />
+  <slot name=\\"left\\" left={data}>Left</slot>
+  <p>Default slots</p>
+  <slot name=\\"default\\" {data}>Default, named Child</slot>
 </div>"
 `;
 
@@ -1321,7 +1335,6 @@ exports[`Svelte > jsx > Javascript Test > Stamped.io 1`] = `
       showReviewPrompt = true;
     }}>Write a review</button
   >
-
   {#if showReviewPrompt || \\"asdf\\"}
     <input placeholder=\\"Email\\" />
 
@@ -1339,7 +1352,6 @@ exports[`Svelte > jsx > Javascript Test > Stamped.io 1`] = `
       Submit
     </button>
   {/if}
-
   {#each reviews as review, index (review.id)}
     <div class=\\"review\\">
       <img class=\\"img\\" src={review.avatar} />
@@ -1498,7 +1510,6 @@ exports[`Svelte > jsx > Javascript Test > basicForNoTagReference 1`] = `
 
 <svelte:component this={TagNameGetter()}>
   Hello <svelte:component this={tag}>{name}</svelte:component>
-
   {#each actions as action}
     <svelte:component this={TagName}>
       <svelte:component this={action.icon} />
@@ -1737,7 +1748,6 @@ exports[`Svelte > jsx > Javascript Test > defaultProps 1`] = `
       {text}
     </a>
   {/if}
-
   {#if !link}
     <button
       type=\\"button\\"
@@ -1771,7 +1781,6 @@ exports[`Svelte > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
       {text}
     </a>
   {/if}
-
   {#if !link}
     <button
       type=\\"button\\"
@@ -2351,7 +2360,6 @@ exports[`Svelte > jsx > Javascript Test > renderBlock 1`] = `
       {#each childrenWithoutParentComponent() as child (\\"render-block-\\" + child.id)}
         <svelte:self block={child} context={childrenContext()} />
       {/each}
-
       {#each childrenWithoutParentComponent() as child (\\"block-style-\\" + child.id)}
         <BlockStyles block={child} context={childrenContext()} />
       {/each}
@@ -2458,7 +2466,6 @@ exports[`Svelte > jsx > Javascript Test > self-referencing component 1`] = `
 
 <div>
   {name}
-
   {#if name === \\"Batman\\"}
     <svelte:self name=\\"Bruce Wayne\\" />
   {/if}
@@ -2473,7 +2480,6 @@ exports[`Svelte > jsx > Javascript Test > self-referencing component with childr
 <div>
   {name}
   <slot />
-
   {#if name === \\"Batman\\"}
     <svelte:self name=\\"Bruce\\">
       <div>Wayne</div>
@@ -3140,7 +3146,6 @@ exports[`Svelte > jsx > Typescript Test > Button 1`] = `
       {text}
     </a>
   {/if}
-
   {#if !link}
     <button type=\\"button\\" {...attributes}>
       {text}
@@ -4025,8 +4030,8 @@ exports[`Svelte > jsx > Typescript Test > RawText 1`] = `
 </script>
 
 <span class={attributes?.class || attributes?.className}
-  >{@html text || \\"\\"}</span
->"
+  >{@html text || \\"\\"}
+</span>"
 `;
 
 exports[`Svelte > jsx > Typescript Test > Section 1`] = `
@@ -4224,7 +4229,7 @@ import  ContentSlotCode from './content-slot-jsx.raw';
 </script>
 
 <div >
-  <ContentSlotCode  slotTesting={<div>Hello</div>} ></ContentSlotCode>
+  <ContentSlotCode  slotTesting={<div>Hello</div>}></ContentSlotCode>
 </div>"
 `;
 
@@ -4240,8 +4245,29 @@ exports[`Svelte > jsx > Typescript Test > SlotNamed 1`] = `
 
 <div>
   <slot name=\\"top\\" />
-  <slot name=\\"left\\">Default left</slot>
+  <slot name=\\"left\\">Left</slot>
+  <p>Default slots</p>
   <slot>Default Child</slot>
+  <slot name=\\"default\\">Default, named Child</slot>
+</div>"
+`;
+
+exports[`Svelte > jsx > Typescript Test > SlotNamedData 1`] = `
+"<script context=\\"module\\" lang=\\"ts\\">
+  type Props = {
+    [key: string]: string;
+  };
+</script>
+
+<script lang=\\"ts\\">
+  export let data: Props[\\"data\\"];
+</script>
+
+<div>
+  <slot name=\\"top\\" {data} />
+  <slot name=\\"left\\" left={data}>Left</slot>
+  <p>Default slots</p>
+  <slot name=\\"default\\" {data}>Default, named Child</slot>
 </div>"
 `;
 
@@ -4292,7 +4318,6 @@ exports[`Svelte > jsx > Typescript Test > Stamped.io 1`] = `
       showReviewPrompt = true;
     }}>Write a review</button
   >
-
   {#if showReviewPrompt || \\"asdf\\"}
     <input placeholder=\\"Email\\" />
 
@@ -4310,7 +4335,6 @@ exports[`Svelte > jsx > Typescript Test > Stamped.io 1`] = `
       Submit
     </button>
   {/if}
-
   {#each reviews as review, index (review.id)}
     <div class=\\"review\\">
       <img class=\\"img\\" src={review.avatar} />
@@ -4524,7 +4548,6 @@ exports[`Svelte > jsx > Typescript Test > basicForNoTagReference 1`] = `
 
 <svelte:component this={TagNameGetter()}>
   Hello <svelte:component this={tag}>{name}</svelte:component>
-
   {#each actions as action}
     <svelte:component this={TagName}>
       <svelte:component this={action.icon} />
@@ -4819,7 +4842,6 @@ exports[`Svelte > jsx > Typescript Test > defaultProps 1`] = `
       {text}
     </a>
   {/if}
-
   {#if !link}
     <button
       type=\\"button\\"
@@ -4863,7 +4885,6 @@ exports[`Svelte > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
       {text}
     </a>
   {/if}
-
   {#if !link}
     <button
       type=\\"button\\"
@@ -5549,7 +5570,6 @@ exports[`Svelte > jsx > Typescript Test > renderBlock 1`] = `
       {#each childrenWithoutParentComponent() as child (\\"render-block-\\" + child.id)}
         <svelte:self block={child} context={childrenContext()} />
       {/each}
-
       {#each childrenWithoutParentComponent() as child (\\"block-style-\\" + child.id)}
         <BlockStyles block={child} context={childrenContext()} />
       {/each}
@@ -5681,7 +5701,6 @@ exports[`Svelte > jsx > Typescript Test > self-referencing component 1`] = `
 
 <div>
   {name}
-
   {#if name === \\"Batman\\"}
     <svelte:self name=\\"Bruce Wayne\\" />
   {/if}
@@ -5696,7 +5715,6 @@ exports[`Svelte > jsx > Typescript Test > self-referencing component with childr
 <div>
   {name}
   <slot />
-
   {#if name === \\"Batman\\"}
     <svelte:self name=\\"Bruce\\">
       <div>Wayne</div>
diff --git a/packages/core/src/generators/svelte/blocks.ts b/packages/core/src/generators/svelte/blocks.ts
index 707a30ee81..577ce4335f 100644
--- a/packages/core/src/generators/svelte/blocks.ts
+++ b/packages/core/src/generators/svelte/blocks.ts
@@ -29,7 +29,7 @@ const mappers: {
     let props = '';
     for (const key in json.properties) {
       const value = json.properties[key];
-      props += ` ${key}="${value}" `;
+      props += ` ${key}="${value}"`;
     }
 
     let bindings = '';
@@ -37,7 +37,7 @@ const mappers: {
     for (const key in json.bindings) {
       const value = json.bindings[key];
       if (value && key !== 'innerHTML') {
-        bindings += ` ${key}=\${${value.code}} `;
+        bindings += ` ${key}=\${${value.code}}`;
       }
     }
 
@@ -45,13 +45,13 @@ const mappers: {
 
     // We have to obfuscate `"style"` due to a limitation in the svelte-preprocessor plugin.
     // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
-    return `{@html \`<\${'style'} ${bindings} ${props}>\${${innerText}}<\${'/style'}>\`}`;
+    return `{@html \`<\${'style'}${joinAttributes(bindings, props)}>\${${innerText}}<\${'/style'}>\`}`;
   },
   script: ({ json, options, parentComponent }) => {
     let props = '';
     for (const key in json.properties) {
       const value = json.properties[key];
-      props += ` ${key}="${value}" `;
+      props += ` ${key}="${value}"`;
     }
 
     let bindings = '';
@@ -59,13 +59,13 @@ const mappers: {
     for (const key in json.bindings) {
       const value = json.bindings[key];
       if (value && key !== 'innerHTML') {
-        bindings += ` ${key}=\${${value.code}} `;
+        bindings += ` ${key}=\${${value.code}}`;
       }
     }
 
     const innerText = json.bindings.innerHTML?.code || '';
 
-    return `{@html \`<script ${bindings} ${props}>\${${innerText}}</script>\`}`;
+    return `{@html \`<script${joinAttributes(bindings, props)}>\${${innerText}}</script>\`}`;
   },
   Fragment: ({ json, options, parentComponent }) => {
     if (json.bindings.innerHTML?.code) {
@@ -90,30 +90,23 @@ const mappers: {
 
     const args = getForArguments(json, { excludeCollectionName: true }).join(', ');
 
-    return `
-{#each ${json.bindings.each?.code} as ${args} ${keyValue ? `(${keyValue})` : ''}}
+    return `{#each ${json.bindings.each?.code} as ${args} ${keyValue ? `(${keyValue})` : ''}}
 ${json.children.map((item) => blockToSvelte({ json: item, options, parentComponent })).join('\n')}
-{/each}
-`;
+{/each}`;
   },
   Show: ({ json, options, parentComponent }) => {
-    return `
-{#if ${json.bindings.when?.code} }
-${json.children.map((item) => blockToSvelte({ json: item, options, parentComponent })).join('\n')}
+    const elseCondition = !json.meta.else ? '' : `{:else}
+      ${blockToSvelte({
+      json: json.meta.else as MitosisNode,
+      options,
+      parentComponent,
+    })}`
 
-  ${
-    json.meta.else
-      ? `
-  {:else}
-  ${blockToSvelte({
-    json: json.meta.else as MitosisNode,
-    options,
-    parentComponent,
-  })}
-  `
-      : ''
-  }
-{/if}`;
+    return `{#if ${json.bindings.when?.code} }
+      ${json.children.map((item) => blockToSvelte({ json: item, options, parentComponent })).join('\n')}
+
+    ${elseCondition}
+    {/if}`;
   },
   Slot({ json, options, parentComponent }) {
     const slotName = json.bindings.name?.code || json.properties.name;
@@ -127,22 +120,20 @@ ${json.children.map((item) => blockToSvelte({ json: item, options, parentCompone
       const key = Object.keys(json.bindings).find(Boolean);
       if (!key) {
         if (!json.children?.length) {
-          return '<slot/>';
+          return `<slot${stringifySlotBindings(json)}/>`;
         }
-        return `<slot>${renderChildren()}</slot>`;
+        return `<slot${stringifySlotBindings(json)}>${renderChildren()}</slot>`;
       }
 
-      return `
-        <span #${key}>
-        ${json.bindings[key]?.code}
-        </span>
-      `;
+      return `<span #${key}>
+          ${json.bindings[key]?.code}
+        </span>`;
     }
 
     return `<slot name="${stripSlotPrefix(
       slotName,
       SLOT_PREFIX,
-    ).toLowerCase()}">${renderChildren()}</slot>`;
+    ).toLowerCase()}"${stringifySlotBindings(json)}>${renderChildren()}</slot>`;
   },
 };
 
@@ -213,45 +204,64 @@ type BlockToSvelte<T extends BaseNode = MitosisNode> = (props: {
 }) => string;
 
 const stringifyBinding =
-  (node: MitosisNode, options: ToSvelteOptions) =>
-  ([key, binding]: [string, Binding | undefined]) => {
-    if (key === 'innerHTML' || !binding) {
-      return '';
-    }
+  (node: MitosisNode) =>
+    ([key, binding]: [string, Binding | undefined]) => {
+      if (key === 'innerHTML' || !binding) {
+        return '';
+      }
 
-    const { code, arguments: cusArgs = ['event'], type } = binding;
-    const isValidHtmlTag = VALID_HTML_TAGS.includes(node.name) || node.name === 'svelte:element';
+      const { code, arguments: cusArgs = ['event'], type } = binding;
+      const isValidHtmlTag = VALID_HTML_TAGS.includes(node.name) || node.name === 'svelte:element';
 
-    if (type === 'spread') {
-      const spreadValue = key === 'props' ? '$$props' : code;
-      return ` {...${spreadValue}} `;
-    } else if (key.startsWith('on') && isValidHtmlTag) {
-      // handle html native on[event] props
-      const event = key.replace('on', '').toLowerCase();
-      // TODO: handle quotes in event handler values
+      if (type === 'spread') {
+        const spreadValue = key === 'props' ? '$$props' : code;
+        return `{...${spreadValue}}`;
+      } else if (key.startsWith('on') && isValidHtmlTag) {
+        // handle html native on[event] props
+        const event = key.replace('on', '').toLowerCase();
+        // TODO: handle quotes in event handler values
 
-      const valueWithoutBlock = removeSurroundingBlock(code);
+        const valueWithoutBlock = removeSurroundingBlock(code);
 
-      if (valueWithoutBlock === key) {
-        return ` on:${event}={${valueWithoutBlock}} `;
+        if (valueWithoutBlock === key) {
+          return `on:${event}={${valueWithoutBlock}}`;
+        } else {
+          return `on:${event}="{${cusArgs.join(',')} => {${valueWithoutBlock}}}"`;
+        }
+      } else if (key.startsWith('on')) {
+        // handle on[custom event] props
+        const valueWithoutBlock = removeSurroundingBlock(code);
+
+        if (valueWithoutBlock === key) {
+          return `${key}={${valueWithoutBlock}}`;
+        } else {
+          return `${key}={(${cusArgs.join(',')}) => ${valueWithoutBlock}}`;
+        }
+      } else if (key === 'ref') {
+        return `bind:this={${code}}`;
       } else {
-        return ` on:${event}="{${cusArgs.join(',')} => {${valueWithoutBlock}}}" `;
+        return `${key}={${code}}`;
       }
-    } else if (key.startsWith('on')) {
-      // handle on[custom event] props
-      const valueWithoutBlock = removeSurroundingBlock(code);
+    };
 
-      if (valueWithoutBlock === key) {
-        return ` ${key}={${valueWithoutBlock}} `;
-      } else {
-        return ` ${key}={(${cusArgs.join(',')}) => ${valueWithoutBlock}}`;
-      }
-    } else if (key === 'ref') {
-      return ` bind:this={${code}} `;
-    } else {
-      return ` ${key}={${code}} `;
-    }
-  };
+const joinAttributes = (...attributes: string[]) => {
+
+  const value = attributes
+    .join(' ')
+    .trim()
+
+  if (value.length === 0) return ''
+  return ' ' + value
+}
+const stringifySlotBindings = (node: MitosisNode) =>
+  stringifyBindings(node, 'name');
+
+const stringifyBindings = (node: MitosisNode, ...exclude: string[]) => joinAttributes(
+  ...Object
+    .entries(node.bindings)
+    .filter(([key]) => !exclude.includes(key))
+    .map(stringifyBinding(node))
+);
 
 export const blockToSvelte: BlockToSvelte = ({ json, options, parentComponent }) => {
   if (mappers[json.name as keyof typeof mappers]) {
@@ -296,21 +306,18 @@ export const blockToSvelte: BlockToSvelte = ({ json, options, parentComponent })
 
   for (const key in json.properties) {
     const value = json.properties[key];
-    str += ` ${key}="${value}" `;
+    str += ` ${key}="${value}"`;
   }
 
-  const stringifiedBindings = Object.entries(json.bindings)
-    .map(stringifyBinding(json, options))
-    .join('');
-
-  str += stringifiedBindings;
+  str += stringifyBindings(json);
 
   // if we have innerHTML, it doesn't matter whether we have closing tags or not, or children or not.
   // we use the innerHTML content as children and don't render the self-closing tag.
   if (json.bindings.innerHTML?.code) {
     str += '>';
     str += BINDINGS_MAPPER.innerHTML(json, options);
-    str += `</${tagName}>`;
+    str += `
+</${tagName}>`;
     return str;
   }
 

From e7c1fde783268fdd008b6f4233c83d3a004bf21c Mon Sep 17 00:00:00 2001
From: Marvin Brouwer <marvin-brouwer@live.nl>
Date: Tue, 23 Jan 2024 15:42:30 +0100
Subject: [PATCH 6/8] temp(1333): Playing around with react on a pc without
 yarn

---
 packages/core/src/generators/react/blocks.ts | 39 ++++++++++++--------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/core/src/generators/react/blocks.ts b/packages/core/src/generators/react/blocks.ts
index fa80a60664..a67bb10f90 100644
--- a/packages/core/src/generators/react/blocks.ts
+++ b/packages/core/src/generators/react/blocks.ts
@@ -65,6 +65,15 @@ const NODE_MAPPERS: {
     if (!slotProp.startsWith('props.slot')) {
       slotProp = `props.slot${upperFirst(camelCase(slotProp))}`;
     }
+    if (slotProp.length !== 0) {
+      const slotParams = Object.keys(json.properties)
+        .filter(key => !key.startsWith('slot'));
+      const slotParamBinding = slotParams.length === 0
+        ? '()'
+        : `({ ${slotParams.join(', ')} })`
+
+      slotProp += slotParamBinding;
+    }
 
     return `{${slotProp} ${hasChildren ? `|| (${renderChildren()})` : ''}}`;
   },
@@ -83,9 +92,9 @@ const NODE_MAPPERS: {
       options,
     )}?.map((${forArguments}) => (
       ${wrap ? openFrag(options) : ''}${json.children
-      .filter(filterEmptyTextNodes)
-      .map((item) => blockToReact(item, options, component))
-      .join('\n')}${wrap ? closeFrag(options) : ''}
+        .filter(filterEmptyTextNodes)
+        .map((item) => blockToReact(item, options, component))
+        .join('\n')}${wrap ? closeFrag(options) : ''}
     ))}`;
   },
   Show(json, options, component) {
@@ -95,16 +104,15 @@ const NODE_MAPPERS: {
       (wrapInFragment(json.meta.else as any) || checkIsForNode(json.meta.else as any));
     return `{${processBinding(json.bindings.when?.code as string, options)} ? (
       ${wrap ? openFrag(options) : ''}${json.children
-      .filter(filterEmptyTextNodes)
-      .map((item) => blockToReact(item, options, component))
-      .join('\n')}${wrap ? closeFrag(options) : ''}
-    ) : ${
-      !json.meta.else
+        .filter(filterEmptyTextNodes)
+        .map((item) => blockToReact(item, options, component))
+        .join('\n')}${wrap ? closeFrag(options) : ''}
+    ) : ${!json.meta.else
         ? 'null'
         : (wrapElse ? openFrag(options) : '') +
-          blockToReact(json.meta.else as any, options, component) +
-          (wrapElse ? closeFrag(options) : '')
-    }}`;
+        blockToReact(json.meta.else as any, options, component) +
+        (wrapElse ? closeFrag(options) : '')
+      }}`;
   },
 };
 
@@ -118,8 +126,8 @@ const ATTTRIBUTE_MAPPERS: { [key: string]: string } = {
 // TODO: Maybe in the future allow defining `string | function` as values
 const BINDING_MAPPERS: {
   [key: string]:
-    | string
-    | ((key: string, value: string, options?: ToReactOptions) => [string, string]);
+  | string
+  | ((key: string, value: string, options?: ToReactOptions) => [string, string]);
 } = {
   ref(ref, value, options) {
     if (options?.preact) {
@@ -212,8 +220,9 @@ export const blockToReact = (
         options,
       )} } `;
     } else if (key.startsWith('slot')) {
-      // <Component slotProjected={<AnotherComponent />} />
-      str += ` ${key}={${value}} `;
+      // <Component slotProjected={() => <AnotherComponent />} />
+      // TODO <Component slotProjected={(slotProps) => <AnotherComponent {...slotProps} />} />
+      str += ` ${key}={() => ${value}} `;
     } else if (key === 'class') {
       str += ` className={${useBindingValue}} `;
     } else if (BINDING_MAPPERS[key]) {

From 75c2726f31a9ce319cd5e7958723ea4dd1169e0d Mon Sep 17 00:00:00 2001
From: Marvin Brouwer <marvin-brouwer@live.nl>
Date: Tue, 23 Jan 2024 22:03:47 +0100
Subject: [PATCH 7/8] feat(1333): Added testcase to showcase collection with
 slots

---
 .../__snapshots__/svelte.test.ts.snap         | 34 +++++++++++++
 .../vue-composition.test.ts.snap              | 36 ++++++++++++++
 .../__tests__/__snapshots__/vue.test.ts.snap  | 48 +++++++++++++++++++
 .../data/blocks/slot-collection.raw.tsx       | 16 +++++++
 packages/core/src/__tests__/test-generator.ts |  2 +
 5 files changed, 136 insertions(+)
 create mode 100644 packages/core/src/__tests__/data/blocks/slot-collection.raw.tsx

diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index a9a80df884..1f7f78be43 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -1212,6 +1212,20 @@ exports[`Svelte > jsx > Javascript Test > Select 1`] = `
 </select>"
 `;
 
+exports[`Svelte > jsx > Javascript Test > SlotCollection 1`] = `
+"<script>
+  import { For } from \\"../../../flow\\";
+
+  export let someCollection;
+</script>
+
+<ul>
+  {#each someCollection as item}
+    <li><slot name=\\"itemdisplay\\" {item} /></li>
+  {/each}
+</ul>"
+`;
+
 exports[`Svelte > jsx > Javascript Test > SlotDefault 1`] = `
 "<div>
   <slot>
@@ -4149,6 +4163,26 @@ exports[`Svelte > jsx > Typescript Test > Select 1`] = `
 </select>"
 `;
 
+exports[`Svelte > jsx > Typescript Test > SlotCollection 1`] = `
+"<script context=\\"module\\" lang=\\"ts\\">
+  type Props = {
+    [key: string]: string;
+  };
+</script>
+
+<script lang=\\"ts\\">
+  import { For } from \\"../../../flow\\";
+
+  export let someCollection: Props[\\"someCollection\\"];
+</script>
+
+<ul>
+  {#each someCollection as item}
+    <li><slot name=\\"itemdisplay\\" {item} /></li>
+  {/each}
+</ul>"
+`;
+
 exports[`Svelte > jsx > Typescript Test > SlotDefault 1`] = `
 "<script context=\\"module\\" lang=\\"ts\\">
   type Props = {
diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
index 3cb5d6df8e..e839d0c7a8 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -1330,6 +1330,22 @@ const props = defineProps([
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > SlotCollection 1`] = `
+"<template>
+  <ul>
+    <template :key=\\"index\\" v-for=\\"(item, index) in someCollection\\">
+      <li><slot name=\\"itemdisplay\\" :item=\\"item\\"></slot></li>
+    </template>
+  </ul>
+</template>
+
+<script setup>
+import { For } from \\"../../../flow\\";
+
+const props = defineProps([\\"someCollection\\"]);
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > SlotDefault 1`] = `
 "<template>
   <div>
@@ -4468,6 +4484,26 @@ const props = defineProps<FormSelectProps>();
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > SlotCollection 1`] = `
+"<template>
+  <ul>
+    <template :key=\\"index\\" v-for=\\"(item, index) in someCollection\\">
+      <li><slot name=\\"itemdisplay\\" :item=\\"item\\"></slot></li>
+    </template>
+  </ul>
+</template>
+
+<script setup lang=\\"ts\\">
+import { For } from \\"../../../flow\\";
+
+type Props = {
+  [key: string]: string;
+};
+
+const props = defineProps<Props>();
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > SlotDefault 1`] = `
 "<template>
   <div>
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 99a7c73097..1b46ab7506 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -1541,6 +1541,28 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > SlotCollection 1`] = `
+"<template>
+  <ul>
+    <li v-for=\\"(item, index) in someCollection\\" :key=\\"index\\">
+      <slot name=\\"itemdisplay\\" :item=\\"item\\"></slot>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+import { For } from \\"../../../flow\\";
+
+export default defineComponent({
+  name: \\"slot-code\\",
+
+  props: [\\"someCollection\\"],
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > SlotDefault 1`] = `
 "<template>
   <div>
@@ -5419,6 +5441,32 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > SlotCollection 1`] = `
+"<template>
+  <ul>
+    <li v-for=\\"(item, index) in someCollection\\" :key=\\"index\\">
+      <slot name=\\"itemdisplay\\" :item=\\"item\\"></slot>
+    </li>
+  </ul>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+import { For } from \\"../../../flow\\";
+
+type Props = {
+  [key: string]: string;
+};
+
+export default defineComponent({
+  name: \\"slot-code\\",
+
+  props: [\\"someCollection\\"],
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > SlotDefault 1`] = `
 "<template>
   <div>
diff --git a/packages/core/src/__tests__/data/blocks/slot-collection.raw.tsx b/packages/core/src/__tests__/data/blocks/slot-collection.raw.tsx
new file mode 100644
index 0000000000..d1af7fa50b
--- /dev/null
+++ b/packages/core/src/__tests__/data/blocks/slot-collection.raw.tsx
@@ -0,0 +1,16 @@
+import { Slot } from '@builder.io/mitosis';
+import { For } from '../../../flow';
+
+type Props = { [key: string]: string };
+
+export default function SlotCode(props: Props) {
+  return (
+    <ul>
+      <For each={props.someCollection}>
+        {(item) => (
+          <li><Slot name="itemDisplay" item={item} /></li>
+        )}
+      </For>
+    </ul>
+  );
+}
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index 354be44c99..818a9ec8ea 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -96,6 +96,7 @@ const slotHtml = getRawFile('./data/blocks/slot-html.raw.tsx');
 const slotJsx = getRawFile('./data/blocks/slot-jsx.raw.tsx');
 const slotNamed = getRawFile('./data/blocks/slot-named.raw.tsx');
 const slotNamedData = getRawFile('./data/blocks/slot-named-data.raw.tsx');
+const slotCollection = getRawFile('./data/blocks/slot-collection.raw.tsx');
 const stamped = getRawFile('./data/blocks/stamped-io.raw.tsx');
 const submitButtonBlock = getRawFile('./data/blocks/submit-button.raw.tsx');
 const text = getRawFile('./data/blocks/text.raw.tsx');
@@ -223,6 +224,7 @@ const SLOTS_TESTS: Tests = {
   SlotHtml: slotHtml,
   SlotNamed: slotNamed,
   SlotNamedData: slotNamedData,
+  SlotCollection: slotCollection,
   classState,
 };
 

From 4d674890636e09f95a062bc5041d5d6af9fd1d11 Mon Sep 17 00:00:00 2001
From: Marvin Brouwer <marvin-brouwer@live.nl>
Date: Wed, 24 Jan 2024 17:34:24 +0100
Subject: [PATCH 8/8] feat(1333): Added support for React data slots
 feat(1333): made vue, react, and svelte slots consistent

---
 .../__snapshots__/preact.test.ts.snap         | 179 +++++++++++++--
 .../__snapshots__/react-native.test.ts.snap   | 217 ++++++++++++++++--
 .../__snapshots__/react.test.ts.snap          | 175 ++++++++++++--
 .../__tests__/__snapshots__/rsc.test.ts.snap  | 175 ++++++++++++--
 .../__snapshots__/svelte.test.ts.snap         | 121 ++++++----
 .../__tests__/__snapshots__/taro.test.ts.snap | 179 +++++++++++++--
 .../vue-composition.test.ts.snap              |  57 ++++-
 .../__tests__/__snapshots__/vue.test.ts.snap  |  59 ++++-
 .../data/blocks/content-slot-html.raw.tsx     |   2 +-
 .../data/blocks/content-slot-jsx.raw.tsx      |   3 +-
 .../__tests__/data/blocks/slot-html.raw.tsx   |   6 +-
 .../__tests__/data/blocks/slot-jsx.raw.tsx    |  16 +-
 packages/core/src/generators/react/blocks.ts  |  45 ++--
 packages/core/src/generators/svelte/blocks.ts |  12 +-
 packages/core/src/generators/vue/blocks.ts    |  17 +-
 15 files changed, 1111 insertions(+), 152 deletions(-)

diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index e8c0d46af5..7da0f0d17c 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -555,7 +555,7 @@ import { h, Fragment } from \\"preact\\";
 function ContentSlotCode(props) {
   return (
     <div>
-      {props.slotTesting}
+      {props.slotTesting?.()}
 
       <div>
         <hr />
@@ -600,7 +600,10 @@ function ContentSlotJsxCode(props) {
             className={cls()}
           >
             {showContent && props.slotContent ? (
-              <Fragment>{props.slotContent || \\"{props.content}\\"}</Fragment>
+              <Fragment>
+                {props.slotContent?.({ stateName: state.name }) ||
+                  \\"{props.content}\\"}
+              </Fragment>
             ) : null}
 
             <div>
@@ -1325,6 +1328,25 @@ export default SelectComponent;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > SlotCollection 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { For } from \\"../../../flow\\";
+
+function SlotCode(props) {
+  return (
+    <ul>
+      {props.someCollection?.map((item) => (
+        <li>{props.slotItemDisplay?.({ item })}</li>
+      ))}
+    </ul>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > SlotDefault 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -1349,7 +1371,15 @@ import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 function SlotCode(props) {
   return (
     <div>
-      <ContentSlotCode slotTesting={<div>Hello</div>}></ContentSlotCode>
+      <ContentSlotCode slotContent={() => <div>Hello</div>} />
+
+      <ContentSlotCode slotContent={() => <div>Hello</div>}></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
     </div>
   );
 }
@@ -1361,12 +1391,26 @@ export default SlotCode;
 exports[`Preact > jsx > Javascript Test > SlotJsx 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
+import { Slot } from \\"../../../../dist/src\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+export function ExampleComponent(props) {
+  return <div>{props.name}</div>;
+}
 
 function SlotCode(props) {
   return (
     <div>
-      <ContentSlotCode slotTesting={<div>Hello</div>} />
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <ExampleComponent name={contentProps.stateName} />
+        )}
+      ></ContentSlotCode>
     </div>
   );
 }
@@ -1382,11 +1426,37 @@ import { h, Fragment } from \\"preact\\";
 function SlotCode(props) {
   return (
     <div>
-      {props.slotTop}
+      {props.slotTop?.()}
+
+      {props.slotLeft?.() || \\"Left\\"}
 
-      {props.slotLeft || \\"Default left\\"}
+      <p>Default slots</p>
 
       {props.children || \\"Default Child\\"}
+
+      {props.children || \\"Default, named Child\\"}
+    </div>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`Preact > jsx > Javascript Test > SlotNamedData 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function SlotCode(props) {
+  return (
+    <div>
+      {props.slotTop?.({ data: props.data })}
+
+      {props.slotLeft?.({ left: props.data }) || \\"Left\\"}
+
+      <p>Default slots</p>
+
+      {props.children || \\"Default, named Child\\"}
     </div>
   );
 }
@@ -3940,14 +4010,14 @@ import { h, Fragment } from \\"preact\\";
 
 type Props = {
   [key: string]: string | JSX.Element;
-  slotTesting: JSX.Element;
+  slotTesting: () => JSX.Element;
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 function ContentSlotCode(props: Props) {
   return (
     <div>
-      {props.slotTesting}
+      {props.slotTesting?.()}
 
       <div>
         <hr />
@@ -3967,6 +4037,7 @@ exports[`Preact > jsx > Typescript Test > ContentSlotJSX 1`] = `
 import { h, Fragment } from \\"preact\\";
 import { useState } from \\"preact/hooks\\";
 
+// TODO: Figure out how the slotsProps are generated and fix state-name={state.name} support in type
 type Props = {
   [key: string]: string | JSX.Element;
 };
@@ -3997,7 +4068,10 @@ function ContentSlotJsxCode(props: Props) {
             className={cls()}
           >
             {showContent && props.slotContent ? (
-              <Fragment>{props.slotContent || \\"{props.content}\\"}</Fragment>
+              <Fragment>
+                {props.slotContent?.({ stateName: state.name }) ||
+                  \\"{props.content}\\"}
+              </Fragment>
             ) : null}
 
             <div>
@@ -4835,6 +4909,29 @@ export default SelectComponent;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > SlotCollection 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+type Props = {
+  [key: string]: string;
+};
+import { For } from \\"../../../flow\\";
+
+function SlotCode(props: Props) {
+  return (
+    <ul>
+      {props.someCollection?.map((item) => (
+        <li>{props.slotItemDisplay?.({ item })}</li>
+      ))}
+    </ul>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > SlotDefault 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -4867,7 +4964,15 @@ import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 function SlotCode(props: Props) {
   return (
     <div>
-      <ContentSlotCode slotTesting={<div>Hello</div>}></ContentSlotCode>
+      <ContentSlotCode slotContent={() => <div>Hello</div>} />
+
+      <ContentSlotCode slotContent={() => <div>Hello</div>}></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
     </div>
   );
 }
@@ -4883,12 +4988,26 @@ import { h, Fragment } from \\"preact\\";
 type Props = {
   [key: string]: string;
 };
+import { Slot } from \\"../../../../dist/src\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+export function ExampleComponent(props: Props) {
+  return <div>{props.name}</div>;
+}
 
 function SlotCode(props: Props) {
   return (
     <div>
-      <ContentSlotCode slotTesting={<div>Hello</div>} />
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <ExampleComponent name={contentProps.stateName} />
+        )}
+      ></ContentSlotCode>
     </div>
   );
 }
@@ -4908,11 +5027,41 @@ type Props = {
 function SlotCode(props: Props) {
   return (
     <div>
-      {props.slotTop}
+      {props.slotTop?.()}
+
+      {props.slotLeft?.() || \\"Left\\"}
 
-      {props.slotLeft || \\"Default left\\"}
+      <p>Default slots</p>
 
       {props.children || \\"Default Child\\"}
+
+      {props.children || \\"Default, named Child\\"}
+    </div>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`Preact > jsx > Typescript Test > SlotNamedData 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+type Props = {
+  [key: string]: string;
+};
+
+function SlotCode(props: Props) {
+  return (
+    <div>
+      {props.slotTop?.({ data: props.data })}
+
+      {props.slotLeft?.({ left: props.data }) || \\"Left\\"}
+
+      <p>Default slots</p>
+
+      {props.children || \\"Default, named Child\\"}
     </div>
   );
 }
@@ -7397,7 +7546,7 @@ function MyComponent(props) {
   return (
     <div>
       {props.children || \\"default\\"}
-      {props.slotTest || <div>default</div>}
+      {props.slotTest?.() || <div>default</div>}
     </div>
   );
 }
@@ -7807,7 +7956,7 @@ function MyComponent(props: any) {
   return (
     <div>
       {props.children || \\"default\\"}
-      {props.slotTest || <div>default</div>}
+      {props.slotTest?.() || <div>default</div>}
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index 86ef16e0a8..912a95c2fc 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -649,7 +649,7 @@ import {
 function ContentSlotCode(props) {
   return (
     <View>
-      {props.slotTesting}
+      {props.slotTesting?.()}
 
       <View>
         <View />
@@ -700,7 +700,11 @@ function ContentSlotJsxCode(props) {
             onClick={(event) => show()}
           >
             {showContent && props.slotContent ? (
-              <>{props.slotContent || <Text>{props.content}</Text>}</>
+              <>
+                {props.slotContent?.({ stateName: state.name }) || (
+                  <Text>{props.content}</Text>
+                )}
+              </>
             ) : null}
 
             <View>
@@ -1462,6 +1466,32 @@ export default SelectComponent;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > SlotCollection 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from \\"react-native\\";
+import { For } from \\"../../../flow\\";
+
+function SlotCode(props) {
+  return (
+    <View>
+      {props.someCollection?.map((item) => (
+        <View>{props.slotItemDisplay?.({ item })}</View>
+      ))}
+    </View>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > SlotDefault 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -1504,7 +1534,15 @@ import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 function SlotCode(props) {
   return (
     <View>
-      <ContentSlotCode slotTesting={<div>Hello</div>}></ContentSlotCode>
+      <ContentSlotCode slotContent={() => <div>Hello</div>} />
+
+      <ContentSlotCode slotContent={() => <div>Hello</div>}></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
     </View>
   );
 }
@@ -1523,12 +1561,26 @@ import {
   Image,
   Text,
 } from \\"react-native\\";
+import { Slot } from \\"../../../../dist/src\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+export function ExampleComponent(props) {
+  return <div>{props.name}</div>;
+}
 
 function SlotCode(props) {
   return (
     <View>
-      <ContentSlotCode slotTesting={<div>Hello</div>} />
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <ExampleComponent name={contentProps.stateName} />
+        )}
+      ></ContentSlotCode>
     </View>
   );
 }
@@ -1551,11 +1603,48 @@ import {
 function SlotCode(props) {
   return (
     <View>
-      {props.slotTop}
+      {props.slotTop?.()}
 
-      {props.slotLeft || <Text>Default left</Text>}
+      {props.slotLeft?.() || <Text>Left</Text>}
+
+      <View>
+        <Text>Default slots</Text>
+      </View>
 
       {props.children || <Text>Default Child</Text>}
+
+      {props.children || <Text>Default, named Child</Text>}
+    </View>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React Native > jsx > Javascript Test > SlotNamedData 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from \\"react-native\\";
+
+function SlotCode(props) {
+  return (
+    <View>
+      {props.slotTop?.({ data: props.data })}
+
+      {props.slotLeft?.({ left: props.data }) || <Text>Left</Text>}
+
+      <View>
+        <Text>Default slots</Text>
+      </View>
+
+      {props.children || <Text>Default, named Child</Text>}
     </View>
   );
 }
@@ -4609,14 +4698,14 @@ import {
 
 type Props = {
   [key: string]: string | JSX.Element;
-  slotTesting: JSX.Element;
+  slotTesting: () => JSX.Element;
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 function ContentSlotCode(props: Props) {
   return (
     <View>
-      {props.slotTesting}
+      {props.slotTesting?.()}
 
       <View>
         <View />
@@ -4643,6 +4732,7 @@ import {
 } from \\"react-native\\";
 import { useState } from \\"react\\";
 
+// TODO: Figure out how the slotsProps are generated and fix state-name={state.name} support in type
 type Props = {
   [key: string]: string | JSX.Element;
 };
@@ -4672,7 +4762,11 @@ function ContentSlotJsxCode(props: Props) {
             onClick={(event) => show()}
           >
             {showContent && props.slotContent ? (
-              <>{props.slotContent || <Text>{props.content}</Text>}</>
+              <>
+                {props.slotContent?.({ stateName: state.name }) || (
+                  <Text>{props.content}</Text>
+                )}
+              </>
             ) : null}
 
             <View>
@@ -5547,6 +5641,36 @@ export default SelectComponent;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > SlotCollection 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from \\"react-native\\";
+
+type Props = {
+  [key: string]: string;
+};
+import { For } from \\"../../../flow\\";
+
+function SlotCode(props: Props) {
+  return (
+    <View>
+      {props.someCollection?.map((item) => (
+        <View>{props.slotItemDisplay?.({ item })}</View>
+      ))}
+    </View>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > SlotDefault 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -5597,7 +5721,15 @@ import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 function SlotCode(props: Props) {
   return (
     <View>
-      <ContentSlotCode slotTesting={<div>Hello</div>}></ContentSlotCode>
+      <ContentSlotCode slotContent={() => <div>Hello</div>} />
+
+      <ContentSlotCode slotContent={() => <div>Hello</div>}></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
     </View>
   );
 }
@@ -5620,12 +5752,26 @@ import {
 type Props = {
   [key: string]: string;
 };
+import { Slot } from \\"../../../../dist/src\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+export function ExampleComponent(props: Props) {
+  return <div>{props.name}</div>;
+}
 
 function SlotCode(props: Props) {
   return (
     <View>
-      <ContentSlotCode slotTesting={<div>Hello</div>} />
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <ExampleComponent name={contentProps.stateName} />
+        )}
+      ></ContentSlotCode>
     </View>
   );
 }
@@ -5652,11 +5798,52 @@ type Props = {
 function SlotCode(props: Props) {
   return (
     <View>
-      {props.slotTop}
+      {props.slotTop?.()}
 
-      {props.slotLeft || <Text>Default left</Text>}
+      {props.slotLeft?.() || <Text>Left</Text>}
+
+      <View>
+        <Text>Default slots</Text>
+      </View>
 
       {props.children || <Text>Default Child</Text>}
+
+      {props.children || <Text>Default, named Child</Text>}
+    </View>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React Native > jsx > Typescript Test > SlotNamedData 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from \\"react-native\\";
+
+type Props = {
+  [key: string]: string;
+};
+
+function SlotCode(props: Props) {
+  return (
+    <View>
+      {props.slotTop?.({ data: props.data })}
+
+      {props.slotLeft?.({ left: props.data }) || <Text>Left</Text>}
+
+      <View>
+        <Text>Default slots</Text>
+      </View>
+
+      {props.children || <Text>Default, named Child</Text>}
     </View>
   );
 }
@@ -8636,7 +8823,7 @@ function MyComponent(props) {
   return (
     <View>
       {props.children || <Text>default</Text>}
-      {props.slotTest || (
+      {props.slotTest?.() || (
         <View>
           <Text>default</Text>
         </View>
@@ -9149,7 +9336,7 @@ function MyComponent(props: any) {
   return (
     <View>
       {props.children || <Text>default</Text>}
-      {props.slotTest || (
+      {props.slotTest?.() || (
         <View>
           <Text>default</Text>
         </View>
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 9055266541..473b76e691 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -550,7 +550,7 @@ exports[`React > jsx > Javascript Test > ContentSlotHtml 1`] = `
 function ContentSlotCode(props) {
   return (
     <div>
-      {props.slotTesting}
+      {props.slotTesting?.()}
 
       <div>
         <hr />
@@ -595,7 +595,10 @@ function ContentSlotJsxCode(props) {
             className={cls()}
           >
             {showContent && props.slotContent ? (
-              <>{props.slotContent || \\"{props.content}\\"}</>
+              <>
+                {props.slotContent?.({ stateName: state.name }) ||
+                  \\"{props.content}\\"}
+              </>
             ) : null}
 
             <div>
@@ -1315,6 +1318,24 @@ export default SelectComponent;
 "
 `;
 
+exports[`React > jsx > Javascript Test > SlotCollection 1`] = `
+"import * as React from \\"react\\";
+import { For } from \\"../../../flow\\";
+
+function SlotCode(props) {
+  return (
+    <ul>
+      {props.someCollection?.map((item) => (
+        <li>{props.slotItemDisplay?.({ item })}</li>
+      ))}
+    </ul>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
 exports[`React > jsx > Javascript Test > SlotDefault 1`] = `
 "import * as React from \\"react\\";
 
@@ -1337,7 +1358,15 @@ import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 function SlotCode(props) {
   return (
     <div>
-      <ContentSlotCode slotTesting={<div>Hello</div>}></ContentSlotCode>
+      <ContentSlotCode slotContent={() => <div>Hello</div>} />
+
+      <ContentSlotCode slotContent={() => <div>Hello</div>}></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
     </div>
   );
 }
@@ -1348,12 +1377,26 @@ export default SlotCode;
 
 exports[`React > jsx > Javascript Test > SlotJsx 1`] = `
 "import * as React from \\"react\\";
+import { Slot } from \\"../../../../dist/src\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+export function ExampleComponent(props) {
+  return <div>{props.name}</div>;
+}
 
 function SlotCode(props) {
   return (
     <div>
-      <ContentSlotCode slotTesting={<div>Hello</div>} />
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <ExampleComponent name={contentProps.stateName} />
+        )}
+      ></ContentSlotCode>
     </div>
   );
 }
@@ -1368,11 +1411,36 @@ exports[`React > jsx > Javascript Test > SlotNamed 1`] = `
 function SlotCode(props) {
   return (
     <div>
-      {props.slotTop}
+      {props.slotTop?.()}
+
+      {props.slotLeft?.() || \\"Left\\"}
 
-      {props.slotLeft || \\"Default left\\"}
+      <p>Default slots</p>
 
       {props.children || \\"Default Child\\"}
+
+      {props.children || \\"Default, named Child\\"}
+    </div>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React > jsx > Javascript Test > SlotNamedData 1`] = `
+"import * as React from \\"react\\";
+
+function SlotCode(props) {
+  return (
+    <div>
+      {props.slotTop?.({ data: props.data })}
+
+      {props.slotLeft?.({ left: props.data }) || \\"Left\\"}
+
+      <p>Default slots</p>
+
+      {props.children || \\"Default, named Child\\"}
     </div>
   );
 }
@@ -3888,14 +3956,14 @@ exports[`React > jsx > Typescript Test > ContentSlotHtml 1`] = `
 
 type Props = {
   [key: string]: string | JSX.Element;
-  slotTesting: JSX.Element;
+  slotTesting: () => JSX.Element;
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 function ContentSlotCode(props: Props) {
   return (
     <div>
-      {props.slotTesting}
+      {props.slotTesting?.()}
 
       <div>
         <hr />
@@ -3915,6 +3983,7 @@ exports[`React > jsx > Typescript Test > ContentSlotJSX 1`] = `
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
+// TODO: Figure out how the slotsProps are generated and fix state-name={state.name} support in type
 type Props = {
   [key: string]: string | JSX.Element;
 };
@@ -3945,7 +4014,10 @@ function ContentSlotJsxCode(props: Props) {
             className={cls()}
           >
             {showContent && props.slotContent ? (
-              <>{props.slotContent || \\"{props.content}\\"}</>
+              <>
+                {props.slotContent?.({ stateName: state.name }) ||
+                  \\"{props.content}\\"}
+              </>
             ) : null}
 
             <div>
@@ -4778,6 +4850,28 @@ export default SelectComponent;
 "
 `;
 
+exports[`React > jsx > Typescript Test > SlotCollection 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+  [key: string]: string;
+};
+import { For } from \\"../../../flow\\";
+
+function SlotCode(props: Props) {
+  return (
+    <ul>
+      {props.someCollection?.map((item) => (
+        <li>{props.slotItemDisplay?.({ item })}</li>
+      ))}
+    </ul>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
 exports[`React > jsx > Typescript Test > SlotDefault 1`] = `
 "import * as React from \\"react\\";
 
@@ -4808,7 +4902,15 @@ import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 function SlotCode(props: Props) {
   return (
     <div>
-      <ContentSlotCode slotTesting={<div>Hello</div>}></ContentSlotCode>
+      <ContentSlotCode slotContent={() => <div>Hello</div>} />
+
+      <ContentSlotCode slotContent={() => <div>Hello</div>}></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
     </div>
   );
 }
@@ -4823,12 +4925,26 @@ exports[`React > jsx > Typescript Test > SlotJsx 1`] = `
 type Props = {
   [key: string]: string;
 };
+import { Slot } from \\"../../../../dist/src\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+export function ExampleComponent(props: Props) {
+  return <div>{props.name}</div>;
+}
 
 function SlotCode(props: Props) {
   return (
     <div>
-      <ContentSlotCode slotTesting={<div>Hello</div>} />
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <ExampleComponent name={contentProps.stateName} />
+        )}
+      ></ContentSlotCode>
     </div>
   );
 }
@@ -4847,11 +4963,40 @@ type Props = {
 function SlotCode(props: Props) {
   return (
     <div>
-      {props.slotTop}
+      {props.slotTop?.()}
+
+      {props.slotLeft?.() || \\"Left\\"}
 
-      {props.slotLeft || \\"Default left\\"}
+      <p>Default slots</p>
 
       {props.children || \\"Default Child\\"}
+
+      {props.children || \\"Default, named Child\\"}
+    </div>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`React > jsx > Typescript Test > SlotNamedData 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+  [key: string]: string;
+};
+
+function SlotCode(props: Props) {
+  return (
+    <div>
+      {props.slotTop?.({ data: props.data })}
+
+      {props.slotLeft?.({ left: props.data }) || \\"Left\\"}
+
+      <p>Default slots</p>
+
+      {props.children || \\"Default, named Child\\"}
     </div>
   );
 }
@@ -7514,7 +7659,7 @@ function MyComponent(props) {
   return (
     <div>
       {props.children || \\"default\\"}
-      {props.slotTest || <div>default</div>}
+      {props.slotTest?.() || <div>default</div>}
     </div>
   );
 }
@@ -7922,7 +8067,7 @@ function MyComponent(props: any) {
   return (
     <div>
       {props.children || \\"default\\"}
-      {props.slotTest || <div>default</div>}
+      {props.slotTest?.() || <div>default</div>}
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index ad2bfe5c2e..5d0eefc7ec 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -547,7 +547,7 @@ exports[`RSC > jsx > Javascript Test > ContentSlotHtml 1`] = `
 function ContentSlotCode(props) {
   return (
     <div>
-      {props.slotTesting}
+      {props.slotTesting?.()}
 
       <div>
         <hr />
@@ -592,7 +592,10 @@ function ContentSlotJsxCode(props) {
             className={cls()}
           >
             {showContent && props.slotContent ? (
-              <>{props.slotContent || \\"{props.content}\\"}</>
+              <>
+                {props.slotContent?.({ stateName: state.name }) ||
+                  \\"{props.content}\\"}
+              </>
             ) : null}
 
             <div>
@@ -1312,6 +1315,24 @@ export default SelectComponent;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > SlotCollection 1`] = `
+"import * as React from \\"react\\";
+import { For } from \\"../../../flow\\";
+
+function SlotCode(props) {
+  return (
+    <ul>
+      {props.someCollection?.map((item) => (
+        <li>{props.slotItemDisplay?.({ item })}</li>
+      ))}
+    </ul>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > SlotDefault 1`] = `
 "import * as React from \\"react\\";
 
@@ -1334,7 +1355,15 @@ import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 function SlotCode(props) {
   return (
     <div>
-      <ContentSlotCode slotTesting={<div>Hello</div>}></ContentSlotCode>
+      <ContentSlotCode slotContent={() => <div>Hello</div>} />
+
+      <ContentSlotCode slotContent={() => <div>Hello</div>}></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
     </div>
   );
 }
@@ -1345,12 +1374,26 @@ export default SlotCode;
 
 exports[`RSC > jsx > Javascript Test > SlotJsx 1`] = `
 "import * as React from \\"react\\";
+import { Slot } from \\"../../../../dist/src\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+export function ExampleComponent(props) {
+  return <div>{props.name}</div>;
+}
 
 function SlotCode(props) {
   return (
     <div>
-      <ContentSlotCode slotTesting={<div>Hello</div>} />
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <ExampleComponent name={contentProps.stateName} />
+        )}
+      ></ContentSlotCode>
     </div>
   );
 }
@@ -1365,11 +1408,36 @@ exports[`RSC > jsx > Javascript Test > SlotNamed 1`] = `
 function SlotCode(props) {
   return (
     <div>
-      {props.slotTop}
+      {props.slotTop?.()}
+
+      {props.slotLeft?.() || \\"Left\\"}
 
-      {props.slotLeft || \\"Default left\\"}
+      <p>Default slots</p>
 
       {props.children || \\"Default Child\\"}
+
+      {props.children || \\"Default, named Child\\"}
+    </div>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`RSC > jsx > Javascript Test > SlotNamedData 1`] = `
+"import * as React from \\"react\\";
+
+function SlotCode(props) {
+  return (
+    <div>
+      {props.slotTop?.({ data: props.data })}
+
+      {props.slotLeft?.({ left: props.data }) || \\"Left\\"}
+
+      <p>Default slots</p>
+
+      {props.children || \\"Default, named Child\\"}
     </div>
   );
 }
@@ -3623,14 +3691,14 @@ exports[`RSC > jsx > Typescript Test > ContentSlotHtml 1`] = `
 
 type Props = {
   [key: string]: string | JSX.Element;
-  slotTesting: JSX.Element;
+  slotTesting: () => JSX.Element;
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
 function ContentSlotCode(props: Props) {
   return (
     <div>
-      {props.slotTesting}
+      {props.slotTesting?.()}
 
       <div>
         <hr />
@@ -3650,6 +3718,7 @@ exports[`RSC > jsx > Typescript Test > ContentSlotJSX 1`] = `
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
+// TODO: Figure out how the slotsProps are generated and fix state-name={state.name} support in type
 type Props = {
   [key: string]: string | JSX.Element;
 };
@@ -3680,7 +3749,10 @@ function ContentSlotJsxCode(props: Props) {
             className={cls()}
           >
             {showContent && props.slotContent ? (
-              <>{props.slotContent || \\"{props.content}\\"}</>
+              <>
+                {props.slotContent?.({ stateName: state.name }) ||
+                  \\"{props.content}\\"}
+              </>
             ) : null}
 
             <div>
@@ -4513,6 +4585,28 @@ export default SelectComponent;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > SlotCollection 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+  [key: string]: string;
+};
+import { For } from \\"../../../flow\\";
+
+function SlotCode(props: Props) {
+  return (
+    <ul>
+      {props.someCollection?.map((item) => (
+        <li>{props.slotItemDisplay?.({ item })}</li>
+      ))}
+    </ul>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > SlotDefault 1`] = `
 "import * as React from \\"react\\";
 
@@ -4543,7 +4637,15 @@ import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 function SlotCode(props: Props) {
   return (
     <div>
-      <ContentSlotCode slotTesting={<div>Hello</div>}></ContentSlotCode>
+      <ContentSlotCode slotContent={() => <div>Hello</div>} />
+
+      <ContentSlotCode slotContent={() => <div>Hello</div>}></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
     </div>
   );
 }
@@ -4558,12 +4660,26 @@ exports[`RSC > jsx > Typescript Test > SlotJsx 1`] = `
 type Props = {
   [key: string]: string;
 };
+import { Slot } from \\"../../../../dist/src\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+export function ExampleComponent(props: Props) {
+  return <div>{props.name}</div>;
+}
 
 function SlotCode(props: Props) {
   return (
     <div>
-      <ContentSlotCode slotTesting={<div>Hello</div>} />
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <ExampleComponent name={contentProps.stateName} />
+        )}
+      ></ContentSlotCode>
     </div>
   );
 }
@@ -4582,11 +4698,40 @@ type Props = {
 function SlotCode(props: Props) {
   return (
     <div>
-      {props.slotTop}
+      {props.slotTop?.()}
+
+      {props.slotLeft?.() || \\"Left\\"}
 
-      {props.slotLeft || \\"Default left\\"}
+      <p>Default slots</p>
 
       {props.children || \\"Default Child\\"}
+
+      {props.children || \\"Default, named Child\\"}
+    </div>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`RSC > jsx > Typescript Test > SlotNamedData 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+  [key: string]: string;
+};
+
+function SlotCode(props: Props) {
+  return (
+    <div>
+      {props.slotTop?.({ data: props.data })}
+
+      {props.slotLeft?.({ left: props.data }) || \\"Left\\"}
+
+      <p>Default slots</p>
+
+      {props.children || \\"Default, named Child\\"}
     </div>
   );
 }
@@ -6765,7 +6910,7 @@ function MyComponent(props) {
   return (
     <div>
       {props.children || \\"default\\"}
-      {props.slotTest || <div>default</div>}
+      {props.slotTest?.() || <div>default</div>}
     </div>
   );
 }
@@ -7173,7 +7318,7 @@ function MyComponent(props: any) {
   return (
     <div>
       {props.children || \\"default\\"}
-      {props.slotTest || <div>default</div>}
+      {props.slotTest?.() || <div>default</div>}
     </div>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 1f7f78be43..7882f4059f 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -488,7 +488,7 @@ exports[`Svelte > jsx > Javascript Test > ContentSlotJSX 1`] = `
     class={cls()}
   >
     {#if showContent && $$slots.content}
-      <slot name=\\"content\\">{content}</slot>
+      <slot name=\\"content\\" state-name={name}>{content}</slot>
     {/if}
     <div>
       <hr />
@@ -1235,20 +1235,6 @@ exports[`Svelte > jsx > Javascript Test > SlotDefault 1`] = `
 `;
 
 exports[`Svelte > jsx > Javascript Test > SlotHtml 1`] = `
-"<script>
-  import ContentSlotCode from \\"./content-slot-jsx.raw\\";
-</script>
-
-<div>
-  <ContentSlotCode>
-    <span #testing>
-      <div>Hello</div>
-    </span>
-  </ContentSlotCode>
-</div>"
-`;
-
-exports[`Svelte > jsx > Javascript Test > SlotJsx 1`] = `
 "<script >
 
 
@@ -1282,7 +1268,42 @@ import  ContentSlotCode from './content-slot-jsx.raw';
 </script>
 
 <div >
-  <ContentSlotCode  slotTesting={<div>Hello</div>}></ContentSlotCode>
+  <ContentSlotCode  slotContent={<div>Hello</div>}></ContentSlotCode>
+  <ContentSlotCode >
+    <template #content>
+      <div>Hello</div>
+    </template>
+  </ContentSlotCode>
+  <ContentSlotCode >
+    <template #content let:contentProps={content}>
+      <div>Hello {contentProps.stateName}</div>
+    </template>
+  </ContentSlotCode>
+</div>"
+`;
+
+exports[`Svelte > jsx > Javascript Test > SlotJsx 1`] = `
+"<script>
+  import { Slot } from \\"../../../../dist/src\\";
+  import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+  export function ExampleComponent(props) {
+    return <div>{props.name}</div>;
+  }
+
+  export let name;
+</script>
+
+<div>
+  <ContentSlotCode>
+    <template #content let:contentProps={content}>
+      <div>Hello {contentProps.stateName}</div>
+    </template>
+  </ContentSlotCode>
+  <ContentSlotCode>
+    <template #content let:contentProps={content}>
+      <ExampleComponent name={contentProps.stateName} />
+    </template>
+  </ContentSlotCode>
 </div>"
 `;
 
@@ -3248,7 +3269,7 @@ exports[`Svelte > jsx > Typescript Test > ContentSlotHtml 1`] = `
 "<script context=\\"module\\" lang=\\"ts\\">
   type Props = {
     [key: string]: string | JSX.Element;
-    slotTesting: JSX.Element;
+    slotTesting: () => JSX.Element;
   };
 </script>
 
@@ -3269,6 +3290,7 @@ exports[`Svelte > jsx > Typescript Test > ContentSlotHtml 1`] = `
 
 exports[`Svelte > jsx > Typescript Test > ContentSlotJSX 1`] = `
 "<script context=\\"module\\" lang=\\"ts\\">
+  // TODO: Figure out how the slotsProps are generated and fix state-name={state.name} support in type
   type Props = {
     [key: string]: string | JSX.Element;
   };
@@ -3302,7 +3324,7 @@ exports[`Svelte > jsx > Typescript Test > ContentSlotJSX 1`] = `
     class={cls()}
   >
     {#if showContent && $$slots.content}
-      <slot name=\\"content\\">{content}</slot>
+      <slot name=\\"content\\" state-name={name}>{content}</slot>
     {/if}
     <div>
       <hr />
@@ -4201,26 +4223,6 @@ exports[`Svelte > jsx > Typescript Test > SlotDefault 1`] = `
 `;
 
 exports[`Svelte > jsx > Typescript Test > SlotHtml 1`] = `
-"<script context=\\"module\\" lang=\\"ts\\">
-  type Props = {
-    [key: string]: string;
-  };
-</script>
-
-<script lang=\\"ts\\">
-  import ContentSlotCode from \\"./content-slot-jsx.raw\\";
-</script>
-
-<div>
-  <ContentSlotCode>
-    <span #testing>
-      <div>Hello</div>
-    </span>
-  </ContentSlotCode>
-</div>"
-`;
-
-exports[`Svelte > jsx > Typescript Test > SlotJsx 1`] = `
 "<script context='module' lang='ts'>
       type Props = {
 [key: string]: string;
@@ -4263,7 +4265,48 @@ import  ContentSlotCode from './content-slot-jsx.raw';
 </script>
 
 <div >
-  <ContentSlotCode  slotTesting={<div>Hello</div>}></ContentSlotCode>
+  <ContentSlotCode  slotContent={<div>Hello</div>}></ContentSlotCode>
+  <ContentSlotCode >
+    <template #content>
+      <div>Hello</div>
+    </template>
+  </ContentSlotCode>
+  <ContentSlotCode >
+    <template #content let:contentProps={content}>
+      <div>Hello {contentProps.stateName}</div>
+    </template>
+  </ContentSlotCode>
+</div>"
+`;
+
+exports[`Svelte > jsx > Typescript Test > SlotJsx 1`] = `
+"<script context=\\"module\\" lang=\\"ts\\">
+  type Props = {
+    [key: string]: string;
+  };
+</script>
+
+<script lang=\\"ts\\">
+  import { Slot } from \\"../../../../dist/src\\";
+  import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+  export function ExampleComponent(props: Props) {
+    return <div>{props.name}</div>;
+  }
+
+  export let name: Props[\\"name\\"];
+</script>
+
+<div>
+  <ContentSlotCode>
+    <template #content let:contentProps={content}>
+      <div>Hello {contentProps.stateName}</div>
+    </template>
+  </ContentSlotCode>
+  <ContentSlotCode>
+    <template #content let:contentProps={content}>
+      <ExampleComponent name={contentProps.stateName} />
+    </template>
+  </ContentSlotCode>
 </div>"
 `;
 
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index e9ba8c47be..7a787930ac 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -564,7 +564,7 @@ import { View } from \\"@tarojs/components\\";
 function ContentSlotCode(props) {
   return (
     <View>
-      {props.slotTesting}
+      {props.slotTesting?.()}
 
       <View>
         <View />
@@ -609,7 +609,10 @@ function ContentSlotJsxCode(props) {
             onClick={(event) => show()}
           >
             {showContent && props.slotContent ? (
-              <>{props.slotContent || \\"{props.content}\\"}</>
+              <>
+                {props.slotContent?.({ stateName: state.name }) ||
+                  \\"{props.content}\\"}
+              </>
             ) : null}
 
             <View>
@@ -1314,6 +1317,25 @@ export default SelectComponent;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > SlotCollection 1`] = `
+"import * as React from \\"react\\";
+import { For } from \\"../../../flow\\";
+import { View } from \\"@tarojs/components\\";
+
+function SlotCode(props) {
+  return (
+    <View>
+      {props.someCollection?.map((item) => (
+        <View>{props.slotItemDisplay?.({ item })}</View>
+      ))}
+    </View>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > SlotDefault 1`] = `
 "import * as React from \\"react\\";
 import { View, Text } from \\"@tarojs/components\\";
@@ -1334,7 +1356,15 @@ import { View } from \\"@tarojs/components\\";
 function SlotCode(props) {
   return (
     <View>
-      <ContentSlotCode slotTesting={<div>Hello</div>}></ContentSlotCode>
+      <ContentSlotCode slotContent={() => <div>Hello</div>} />
+
+      <ContentSlotCode slotContent={() => <div>Hello</div>}></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
     </View>
   );
 }
@@ -1345,13 +1375,27 @@ export default SlotCode;
 
 exports[`Taro > jsx > Javascript Test > SlotJsx 1`] = `
 "import * as React from \\"react\\";
+import { Slot } from \\"../../../../dist/src\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 import { View } from \\"@tarojs/components\\";
+export function ExampleComponent(props) {
+  return <div>{props.name}</div>;
+}
 
 function SlotCode(props) {
   return (
     <View>
-      <ContentSlotCode slotTesting={<div>Hello</div>} />
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <ExampleComponent name={contentProps.stateName} />
+        )}
+      ></ContentSlotCode>
     </View>
   );
 }
@@ -1367,11 +1411,37 @@ import { View, Text } from \\"@tarojs/components\\";
 function SlotCode(props) {
   return (
     <View>
-      {props.slotTop}
+      {props.slotTop?.()}
+
+      {props.slotLeft?.() || \\"Left\\"}
 
-      {props.slotLeft || \\"Default left\\"}
+      <View>Default slots</View>
 
       {props.children || \\"Default Child\\"}
+
+      {props.children || \\"Default, named Child\\"}
+    </View>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`Taro > jsx > Javascript Test > SlotNamedData 1`] = `
+"import * as React from \\"react\\";
+import { View, Text } from \\"@tarojs/components\\";
+
+function SlotCode(props) {
+  return (
+    <View>
+      {props.slotTop?.({ data: props.data })}
+
+      {props.slotLeft?.({ left: props.data }) || \\"Left\\"}
+
+      <View>Default slots</View>
+
+      {props.children || \\"Default, named Child\\"}
     </View>
   );
 }
@@ -3964,7 +4034,7 @@ exports[`Taro > jsx > Typescript Test > ContentSlotHtml 1`] = `
 
 type Props = {
   [key: string]: string | JSX.Element;
-  slotTesting: JSX.Element;
+  slotTesting: () => JSX.Element;
 };
 import type { JSX } from \\"../../../../jsx-runtime\\";
 import { View } from \\"@tarojs/components\\";
@@ -3972,7 +4042,7 @@ import { View } from \\"@tarojs/components\\";
 function ContentSlotCode(props: Props) {
   return (
     <View>
-      {props.slotTesting}
+      {props.slotTesting?.()}
 
       <View>
         <View />
@@ -3992,6 +4062,7 @@ exports[`Taro > jsx > Typescript Test > ContentSlotJSX 1`] = `
 import * as React from \\"react\\";
 import { useState } from \\"react\\";
 
+// TODO: Figure out how the slotsProps are generated and fix state-name={state.name} support in type
 type Props = {
   [key: string]: string | JSX.Element;
 };
@@ -4022,7 +4093,10 @@ function ContentSlotJsxCode(props: Props) {
             onClick={(event) => show()}
           >
             {showContent && props.slotContent ? (
-              <>{props.slotContent || \\"{props.content}\\"}</>
+              <>
+                {props.slotContent?.({ stateName: state.name }) ||
+                  \\"{props.content}\\"}
+              </>
             ) : null}
 
             <View>
@@ -4845,6 +4919,29 @@ export default SelectComponent;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > SlotCollection 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+  [key: string]: string;
+};
+import { For } from \\"../../../flow\\";
+import { View } from \\"@tarojs/components\\";
+
+function SlotCode(props: Props) {
+  return (
+    <View>
+      {props.someCollection?.map((item) => (
+        <View>{props.slotItemDisplay?.({ item })}</View>
+      ))}
+    </View>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > SlotDefault 1`] = `
 "import * as React from \\"react\\";
 
@@ -4873,7 +4970,15 @@ import { View } from \\"@tarojs/components\\";
 function SlotCode(props: Props) {
   return (
     <View>
-      <ContentSlotCode slotTesting={<div>Hello</div>}></ContentSlotCode>
+      <ContentSlotCode slotContent={() => <div>Hello</div>} />
+
+      <ContentSlotCode slotContent={() => <div>Hello</div>}></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
     </View>
   );
 }
@@ -4888,13 +4993,27 @@ exports[`Taro > jsx > Typescript Test > SlotJsx 1`] = `
 type Props = {
   [key: string]: string;
 };
+import { Slot } from \\"../../../../dist/src\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 import { View } from \\"@tarojs/components\\";
+export function ExampleComponent(props: Props) {
+  return <div>{props.name}</div>;
+}
 
 function SlotCode(props: Props) {
   return (
     <View>
-      <ContentSlotCode slotTesting={<div>Hello</div>} />
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <div>Hello {contentProps.stateName}</div>
+        )}
+      ></ContentSlotCode>
+
+      <ContentSlotCode
+        slotContent={(contentProps) => (
+          <ExampleComponent name={contentProps.stateName} />
+        )}
+      ></ContentSlotCode>
     </View>
   );
 }
@@ -4914,11 +5033,41 @@ import { View, Text } from \\"@tarojs/components\\";
 function SlotCode(props: Props) {
   return (
     <View>
-      {props.slotTop}
+      {props.slotTop?.()}
+
+      {props.slotLeft?.() || \\"Left\\"}
 
-      {props.slotLeft || \\"Default left\\"}
+      <View>Default slots</View>
 
       {props.children || \\"Default Child\\"}
+
+      {props.children || \\"Default, named Child\\"}
+    </View>
+  );
+}
+
+export default SlotCode;
+"
+`;
+
+exports[`Taro > jsx > Typescript Test > SlotNamedData 1`] = `
+"import * as React from \\"react\\";
+
+type Props = {
+  [key: string]: string;
+};
+import { View, Text } from \\"@tarojs/components\\";
+
+function SlotCode(props: Props) {
+  return (
+    <View>
+      {props.slotTop?.({ data: props.data })}
+
+      {props.slotLeft?.({ left: props.data }) || \\"Left\\"}
+
+      <View>Default slots</View>
+
+      {props.children || \\"Default, named Child\\"}
     </View>
   );
 }
@@ -7445,7 +7594,7 @@ function MyComponent(props) {
   return (
     <View>
       {props.children || \\"default\\"}
-      {props.slotTest || <View>default</View>}
+      {props.slotTest?.() || <View>default</View>}
     </View>
   );
 }
@@ -7861,7 +8010,7 @@ function MyComponent(props: any) {
   return (
     <View>
       {props.children || \\"default\\"}
-      {props.slotTest || <View>default</View>}
+      {props.slotTest?.() || <View>default</View>}
     </View>
   );
 }
diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
index e839d0c7a8..522b6f8772 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -504,7 +504,7 @@ exports[`Vue > jsx > Javascript Test > ContentSlotJSX 1`] = `
       v-bind=\\"attributes\\"
     >
       <template v-if=\\"showContent && $slots.content\\">
-        <slot name=\\"content\\">{{ content }}</slot>
+        <slot name=\\"content\\" :state-name=\\"name\\">{{ content }}</slot>
       </template>
 
       <div>
@@ -1359,11 +1359,17 @@ exports[`Vue > jsx > Javascript Test > SlotDefault 1`] = `
 exports[`Vue > jsx > Javascript Test > SlotHtml 1`] = `
 "<template>
   <div>
+    <content-slot-code :slotContent=\\"<div>Hello</div>\\"></content-slot-code>
     <content-slot-code>
-      <template #testing>
+      <template #content>
         <div>Hello</div>
       </template>
     </content-slot-code>
+    <content-slot-code>
+      <template #content=\\"contentProps\\">
+        <div>Hello {contentProps.stateName}</div>
+      </template>
+    </content-slot-code>
   </div>
 </template>
 
@@ -1375,12 +1381,27 @@ import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 exports[`Vue > jsx > Javascript Test > SlotJsx 1`] = `
 "<template>
   <div>
-    <content-slot-code :slotTesting=\\"<div>Hello</div>\\"></content-slot-code>
+    <content-slot-code>
+      <template #content=\\"contentProps\\">
+        <div>Hello {contentProps.stateName}</div>
+      </template>
+    </content-slot-code>
+    <content-slot-code>
+      <template #content=\\"contentProps\\">
+        <example-component name=\\"{contentProps.stateName}\\" />
+      </template>
+    </content-slot-code>
   </div>
 </template>
 
 <script setup>
+import { Slot } from \\"../../../../dist/src\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+export function ExampleComponent(props) {
+  return <div>{props.name}</div>;
+}
+
+const props = defineProps([\\"name\\"]);
 </script>"
 `;
 
@@ -3568,7 +3589,7 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 
 type Props = {
   [key: string]: string | JSX.Element;
-  slotTesting: JSX.Element;
+  slotTesting: () => JSX.Element;
 };
 </script>"
 `;
@@ -3584,7 +3605,7 @@ exports[`Vue > jsx > Typescript Test > ContentSlotJSX 1`] = `
       v-bind=\\"attributes\\"
     >
       <template v-if=\\"showContent && $slots.content\\">
-        <slot name=\\"content\\">{{ content }}</slot>
+        <slot name=\\"content\\" :state-name=\\"name\\">{{ content }}</slot>
       </template>
 
       <div>
@@ -3600,6 +3621,7 @@ import { computed, ref, useSlots } from \\"vue\\";
 
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
+// TODO: Figure out how the slotsProps are generated and fix state-name={state.name} support in type
 type Props = {
   [key: string]: string | JSX.Element;
 };
@@ -4523,11 +4545,17 @@ type Props = {
 exports[`Vue > jsx > Typescript Test > SlotHtml 1`] = `
 "<template>
   <div>
+    <content-slot-code :slotContent=\\"<div>Hello</div>\\"></content-slot-code>
     <content-slot-code>
-      <template #testing>
+      <template #content>
         <div>Hello</div>
       </template>
     </content-slot-code>
+    <content-slot-code>
+      <template #content=\\"contentProps\\">
+        <div>Hello {contentProps.stateName}</div>
+      </template>
+    </content-slot-code>
   </div>
 </template>
 
@@ -4543,16 +4571,31 @@ type Props = {
 exports[`Vue > jsx > Typescript Test > SlotJsx 1`] = `
 "<template>
   <div>
-    <content-slot-code :slotTesting=\\"<div>Hello</div>\\"></content-slot-code>
+    <content-slot-code>
+      <template #content=\\"contentProps\\">
+        <div>Hello {contentProps.stateName}</div>
+      </template>
+    </content-slot-code>
+    <content-slot-code>
+      <template #content=\\"contentProps\\">
+        <example-component name=\\"{contentProps.stateName}\\" />
+      </template>
+    </content-slot-code>
   </div>
 </template>
 
 <script setup lang=\\"ts\\">
+import { Slot } from \\"../../../../dist/src\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+export function ExampleComponent(props: Props) {
+  return <div>{props.name}</div>;
+}
 
 type Props = {
   [key: string]: string;
 };
+
+const props = defineProps<Props>();
 </script>"
 `;
 
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 1b46ab7506..9a4f0e6c1e 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -641,7 +641,7 @@ exports[`Vue > jsx > Javascript Test > ContentSlotJSX 1`] = `
     v-bind=\\"attributes\\"
   >
     <template v-if=\\"showContent && $slots.content\\">
-      <slot name=\\"content\\">{{ content }}</slot>
+      <slot name=\\"content\\" :state-name=\\"name\\">{{ content }}</slot>
     </template>
 
     <div>
@@ -1584,11 +1584,17 @@ export default defineComponent({
 exports[`Vue > jsx > Javascript Test > SlotHtml 1`] = `
 "<template>
   <div>
+    <content-slot-code :slotContent=\\"<div>Hello</div>\\"></content-slot-code>
     <content-slot-code>
-      <template #testing>
+      <template #content>
         <div>Hello</div>
       </template>
     </content-slot-code>
+    <content-slot-code>
+      <template #content=\\"contentProps\\">
+        <div>Hello {contentProps.stateName}</div>
+      </template>
+    </content-slot-code>
   </div>
 </template>
 
@@ -1607,18 +1613,34 @@ export default defineComponent({
 exports[`Vue > jsx > Javascript Test > SlotJsx 1`] = `
 "<template>
   <div>
-    <content-slot-code :slotTesting=\\"<div>Hello</div>\\"></content-slot-code>
+    <content-slot-code>
+      <template #content=\\"contentProps\\">
+        <div>Hello {contentProps.stateName}</div>
+      </template>
+    </content-slot-code>
+    <content-slot-code>
+      <template #content=\\"contentProps\\">
+        <example-component name=\\"{contentProps.stateName}\\" />
+      </template>
+    </content-slot-code>
   </div>
 </template>
 
 <script>
 import { defineComponent } from \\"vue\\";
 
+import { Slot } from \\"../../../../dist/src\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+export function ExampleComponent(props) {
+  return <div>{props.name}</div>;
+}
 
 export default defineComponent({
   name: \\"slot-code\\",
   components: { \\"content-slot-code\\": ContentSlotCode },
+  props: [\\"name\\"],
+
+  methods: { ExampleComponent },
 });
 </script>"
 `;
@@ -4399,7 +4421,7 @@ import type { JSX } from \\"../../../../jsx-runtime\\";
 
 type Props = {
   [key: string]: string | JSX.Element;
-  slotTesting: JSX.Element;
+  slotTesting: () => JSX.Element;
 };
 
 export default defineComponent({
@@ -4419,7 +4441,7 @@ exports[`Vue > jsx > Typescript Test > ContentSlotJSX 1`] = `
     v-bind=\\"attributes\\"
   >
     <template v-if=\\"showContent && $slots.content\\">
-      <slot name=\\"content\\">{{ content }}</slot>
+      <slot name=\\"content\\" :state-name=\\"name\\">{{ content }}</slot>
     </template>
 
     <div>
@@ -4434,6 +4456,7 @@ import { defineComponent } from \\"vue\\";
 
 import type { JSX } from \\"../../../../jsx-runtime\\";
 
+// TODO: Figure out how the slotsProps are generated and fix state-name={state.name} support in type
 type Props = {
   [key: string]: string | JSX.Element;
 };
@@ -5492,11 +5515,17 @@ export default defineComponent({
 exports[`Vue > jsx > Typescript Test > SlotHtml 1`] = `
 "<template>
   <div>
+    <content-slot-code :slotContent=\\"<div>Hello</div>\\"></content-slot-code>
     <content-slot-code>
-      <template #testing>
+      <template #content>
         <div>Hello</div>
       </template>
     </content-slot-code>
+    <content-slot-code>
+      <template #content=\\"contentProps\\">
+        <div>Hello {contentProps.stateName}</div>
+      </template>
+    </content-slot-code>
   </div>
 </template>
 
@@ -5519,14 +5548,27 @@ export default defineComponent({
 exports[`Vue > jsx > Typescript Test > SlotJsx 1`] = `
 "<template>
   <div>
-    <content-slot-code :slotTesting=\\"<div>Hello</div>\\"></content-slot-code>
+    <content-slot-code>
+      <template #content=\\"contentProps\\">
+        <div>Hello {contentProps.stateName}</div>
+      </template>
+    </content-slot-code>
+    <content-slot-code>
+      <template #content=\\"contentProps\\">
+        <example-component name=\\"{contentProps.stateName}\\" />
+      </template>
+    </content-slot-code>
   </div>
 </template>
 
 <script lang=\\"ts\\">
 import { defineComponent } from \\"vue\\";
 
+import { Slot } from \\"../../../../dist/src\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
+export function ExampleComponent(props: Props) {
+  return <div>{props.name}</div>;
+}
 
 type Props = {
   [key: string]: string;
@@ -5535,6 +5577,9 @@ type Props = {
 export default defineComponent({
   name: \\"slot-code\\",
   components: { \\"content-slot-code\\": ContentSlotCode },
+  props: [\\"name\\"],
+
+  methods: { ExampleComponent },
 });
 </script>"
 `;
diff --git a/packages/core/src/__tests__/data/blocks/content-slot-html.raw.tsx b/packages/core/src/__tests__/data/blocks/content-slot-html.raw.tsx
index ee1861dc73..71bd9ef501 100644
--- a/packages/core/src/__tests__/data/blocks/content-slot-html.raw.tsx
+++ b/packages/core/src/__tests__/data/blocks/content-slot-html.raw.tsx
@@ -3,7 +3,7 @@ import type { JSX } from '../../../../jsx-runtime';
 
 type Props = {
   [key: string]: string | JSX.Element;
-  slotTesting: JSX.Element;
+  slotTesting: () => JSX.Element;
 };
 
 export default function ContentSlotCode(props: Props) {
diff --git a/packages/core/src/__tests__/data/blocks/content-slot-jsx.raw.tsx b/packages/core/src/__tests__/data/blocks/content-slot-jsx.raw.tsx
index ac2a639aeb..ff2a155b6f 100644
--- a/packages/core/src/__tests__/data/blocks/content-slot-jsx.raw.tsx
+++ b/packages/core/src/__tests__/data/blocks/content-slot-jsx.raw.tsx
@@ -1,6 +1,7 @@
 import { Show, Slot, useDefaultProps, useStore } from '@builder.io/mitosis';
 import type { JSX } from '../../../../jsx-runtime';
 
+// TODO: Figure out how the slotsProps are generated and fix state-name={state.name} support in type
 type Props = {
   [key: string]: string | JSX.Element;
 };
@@ -35,7 +36,7 @@ export default function ContentSlotJsxCode(props: Props) {
         onClick={() => state.show()}
       >
         <Show when={state.showContent && props.slotContent}>
-          <Slot name="content">{props.content}</Slot>
+          <Slot name="content" state-name={state.name}>{props.content}</Slot>
         </Show>
         <div>
           <hr />
diff --git a/packages/core/src/__tests__/data/blocks/slot-html.raw.tsx b/packages/core/src/__tests__/data/blocks/slot-html.raw.tsx
index 6137113ef4..eb84f1f993 100644
--- a/packages/core/src/__tests__/data/blocks/slot-html.raw.tsx
+++ b/packages/core/src/__tests__/data/blocks/slot-html.raw.tsx
@@ -6,8 +6,12 @@ type Props = { [key: string]: string };
 export default function SlotCode(props: Props) {
   return (
     <div>
+      <ContentSlotCode slotContent={<div>Hello</div>} />
       <ContentSlotCode>
-        <Slot testing={<div>Hello</div>}></Slot>
+        <Slot content={<div>Hello</div>} />
+      </ContentSlotCode>
+      <ContentSlotCode>
+        <Slot content={<div>Hello {contentProps.stateName}</div>}></Slot>
       </ContentSlotCode>
     </div>
   );
diff --git a/packages/core/src/__tests__/data/blocks/slot-jsx.raw.tsx b/packages/core/src/__tests__/data/blocks/slot-jsx.raw.tsx
index def5e47a43..8a6725556b 100644
--- a/packages/core/src/__tests__/data/blocks/slot-jsx.raw.tsx
+++ b/packages/core/src/__tests__/data/blocks/slot-jsx.raw.tsx
@@ -1,3 +1,4 @@
+import { Slot } from '../../../../dist/src';
 import ContentSlotCode from './content-slot-jsx.raw';
 
 type Props = { [key: string]: string };
@@ -5,7 +6,20 @@ type Props = { [key: string]: string };
 export default function SlotCode(props: Props) {
   return (
     <div>
-      <ContentSlotCode slotTesting={<div>Hello</div>} />
+      <ContentSlotCode>
+        <Slot content={<div>Hello {contentProps.stateName}</div>} />
+      </ContentSlotCode>
+      <ContentSlotCode>
+        <Slot content={<ExampleComponent name={contentProps.stateName} />} />
+      </ContentSlotCode>
+    </div>
+  );
+}
+
+export function ExampleComponent(props: Props) {
+  return (
+    <div>
+      {props.name}
     </div>
   );
 }
diff --git a/packages/core/src/generators/react/blocks.ts b/packages/core/src/generators/react/blocks.ts
index a67bb10f90..2e76d00c59 100644
--- a/packages/core/src/generators/react/blocks.ts
+++ b/packages/core/src/generators/react/blocks.ts
@@ -49,7 +49,7 @@ const NODE_MAPPERS: {
 
     if (!slotName) {
       // TODO: update MitosisNode for simple code
-      const key = Object.keys(json.bindings).find(Boolean);
+      const key = Object.keys(json.bindings).find(key => key !== 'default');
       if (key && parentSlots) {
         const propKey = camelCase('Slot' + key[0].toUpperCase() + key.substring(1));
         parentSlots.push({ key: propKey, value: json.bindings[key]?.code });
@@ -60,22 +60,33 @@ const NODE_MAPPERS: {
       return `{${children} ${hasChildren ? `|| (${renderChildren()})` : ''}}`;
     }
 
+    if (slotName == 'default') {
+      const children = processBinding('props.children', options);
+      return `{${children} ${hasChildren ? `|| (${renderChildren()})` : ''}}`;
+    }
+
     let slotProp = processBinding(slotName as string, options).replace('name=', '');
 
     if (!slotProp.startsWith('props.slot')) {
       slotProp = `props.slot${upperFirst(camelCase(slotProp))}`;
     }
-    if (slotProp.length !== 0) {
-      const slotParams = Object.keys(json.properties)
-        .filter(key => !key.startsWith('slot'));
-      const slotParamBinding = slotParams.length === 0
-        ? '()'
-        : `({ ${slotParams.join(', ')} })`
+    const slotParams = Object.entries(json.bindings)
+      .filter(([key]) => key !== 'name')
+      .filter(([, value]) => value !== undefined)
+      .filter(([, value]) => !value!.code.startsWith('<'))
+      .map(([key, value]) => {
+        if (key === value!.code) return camelCase(key)
+        return `${camelCase(key)}: ${value!.code}`
+      });
 
-      slotProp += slotParamBinding;
-    }
+    // TODO : UseMemo?
+    const slotParamBinding = slotParams.length === 0
+      ? '?.()'
+      : `?.({ ${slotParams.join(', ')} })`
+
+    slotProp += slotParamBinding;
 
-    return `{${slotProp} ${hasChildren ? `|| (${renderChildren()})` : ''}}`;
+    return `{(${slotProp}) ${hasChildren ? `|| (${renderChildren()})` : ''}}`;
   },
   Fragment(json, options, component) {
     const wrap = wrapInFragment(json);
@@ -221,8 +232,12 @@ export const blockToReact = (
       )} } `;
     } else if (key.startsWith('slot')) {
       // <Component slotProjected={() => <AnotherComponent />} />
-      // TODO <Component slotProjected={(slotProps) => <AnotherComponent {...slotProps} />} />
-      str += ` ${key}={() => ${value}} `;
+      // <Component slotProjected={(slotProps) => <AnotherComponent {...slotProps} />} />
+      const propsName = camelCase(key.substring(4) + 'Props')
+      const propArgs = value.includes(propsName)
+        ? propsName
+        : ''
+      str += ` ${key}={(${propArgs}) => ${value}} `;
     } else if (key === 'class') {
       str += ` className={${useBindingValue}} `;
     } else if (BINDING_MAPPERS[key]) {
@@ -263,7 +278,11 @@ export const blockToReact = (
   }
   if (needsToRenderSlots.length) {
     needsToRenderSlots.forEach(({ key, value }) => {
-      str += ` ${key}={${value}} `;
+      const propsName = camelCase(key.substring(4) + 'Props')
+      const propArgs = value.includes(propsName)
+        ? propsName
+        : ''
+      str += ` ${key}={(${propArgs}) => ${value}} `;
     });
   }
   str = str.trim() + '>';
diff --git a/packages/core/src/generators/svelte/blocks.ts b/packages/core/src/generators/svelte/blocks.ts
index 577ce4335f..7ed63043fa 100644
--- a/packages/core/src/generators/svelte/blocks.ts
+++ b/packages/core/src/generators/svelte/blocks.ts
@@ -6,6 +6,7 @@ import { removeSurroundingBlock } from '@/helpers/remove-surrounding-block';
 import { isSlotProperty, stripSlotPrefix } from '@/helpers/slots';
 import { MitosisComponent } from '@/types/mitosis-component';
 import { BaseNode, Binding, ForNode, MitosisNode } from '@/types/mitosis-node';
+import { camelCase } from 'lodash';
 import { SELF_CLOSING_HTML_TAGS, VALID_HTML_TAGS } from '../../constants/html_tags';
 import { stripStateAndProps } from './helpers';
 import { ToSvelteOptions } from './types';
@@ -125,9 +126,16 @@ ${json.children.map((item) => blockToSvelte({ json: item, options, parentCompone
         return `<slot${stringifySlotBindings(json)}>${renderChildren()}</slot>`;
       }
 
-      return `<span #${key}>
+      const propsName = camelCase(key + 'Props')
+      if (json.bindings[key]?.code?.includes(propsName)) {
+        return `<template #${key} let:${propsName}={${key}}>
           ${json.bindings[key]?.code}
-        </span>`;
+        </template>`;
+      } else {
+        return `<template #${key}>
+          ${json.bindings[key]?.code}
+        </template>`;
+      }
     }
 
     return `<slot name="${stripSlotPrefix(
diff --git a/packages/core/src/generators/vue/blocks.ts b/packages/core/src/generators/vue/blocks.ts
index c6675395ac..568fa70970 100644
--- a/packages/core/src/generators/vue/blocks.ts
+++ b/packages/core/src/generators/vue/blocks.ts
@@ -8,6 +8,7 @@ import { isSlotProperty, stripSlotPrefix } from '@/helpers/slots';
 import { Dictionary } from '@/helpers/typescript';
 import { Binding, ForNode, MitosisNode, SpreadType } from '@/types/mitosis-node';
 import { identity, pipe } from 'fp-ts/lib/function';
+import { camelCase } from 'lodash';
 import { SELF_CLOSING_HTML_TAGS, VALID_HTML_TAGS } from '../../constants/html_tags';
 import {
   addBindingsToJson,
@@ -277,10 +278,9 @@ const NODE_MAPPERS: {
     const slotName = json.bindings.name?.code || json.properties.name;
 
     const renderChildren = () => json.children?.map((item) => blockToVue(item, options)).join('\n');
-    console.log(Object.keys(json.bindings))
 
     if (!slotName) {
-      const key = Object.keys(json.bindings).find((key) => key !== 'key');
+      const key = Object.keys(json.bindings).find(Boolean);
       if (!key) {
         if (!json.children?.length) {
           return `<slot${getSlotBindings(json)}/>`;
@@ -288,9 +288,16 @@ const NODE_MAPPERS: {
         return `<slot${getSlotBindings(json)}>${renderChildren()}</slot>`;
       }
 
-      return `<template #${json.properties.key || key}>
-        ${json.bindings[key]?.code}
-      </template>`;
+      const propsName = camelCase(key + 'Props')
+      if (json.bindings[key]?.code?.includes(propsName)) {
+        return `<template #${key}="${propsName}">
+          ${json.bindings[key]?.code}
+        </template>`;
+      } else {
+        return `<template #${key}>
+          ${json.bindings[key]?.code}
+        </template>`;
+      }
     }
 
     if (slotName === 'default') {