fix: issue with named slots for vue, qwik and svelte and add e2e test (…

…#1391) * fix: issue with named slots for vue, qwik and svelte and add e2e test * chore: update snapshot for qwik * fix: issue with qwik named slot test: replaced e2e test with snapshot test * Create wicked-queens-sleep.md --------- Co-authored-by: Sami Jaber <jabersami@gmail.com> Co-authored-by: Sami Jaber <me@sami.website>
BuilderIO · Apr 23, 2024 · c7f2759 · c7f2759
1 parent f17e509
commit c7f2759
Show file tree

Hide file tree

Showing 28 changed files with 120 additions and 80 deletions.
diff --git a/.changeset/wicked-queens-sleep.md b/.changeset/wicked-queens-sleep.md
@@ -0,0 +1,5 @@
+---
+"@builder.io/mitosis": patch
+---
+
+Fix: named slots generation for Vue, Qwik and Svelte.
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -1189,6 +1189,7 @@ exports[`Alpine.js > jsx > Javascript Test > SlotJsx 1`] = `
 
 exports[`Alpine.js > jsx > Javascript Test > SlotNamed 1`] = `
 "<div x-data=\\"slotCode()\\">
+  <slot name=\\"myAwesomeSlot\\"></slot>
   <slot name=\\"top\\"></slot>
   <slot name=\\"left\\">Default left</slot>
   <slot>Default Child</slot>
@@ -3873,6 +3874,7 @@ exports[`Alpine.js > jsx > Typescript Test > SlotJsx 1`] = `
 
 exports[`Alpine.js > jsx > Typescript Test > SlotNamed 1`] = `
 "<div x-data=\\"slotCode()\\">
+  <slot name=\\"myAwesomeSlot\\"></slot>
   <slot name=\\"top\\"></slot>
   <slot name=\\"left\\">Default left</slot>
   <slot>Default Child</slot>

diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -1769,6 +1769,7 @@ import { Component } from \\"@angular/core\\";
   selector: \\"slot-code, SlotCode\\",
   template: \`
     <div>
+      <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
       <ng-content select=\\"[top]\\"></ng-content>
       <ng-content select=\\"[left]\\">Default left</ng-content>
       <ng-content>Default Child</ng-content>
@@ -6357,6 +6358,7 @@ type Props = {
   selector: \\"slot-code, SlotCode\\",
   template: \`
     <div>
+      <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
       <ng-content select=\\"[top]\\"></ng-content>
       <ng-content select=\\"[left]\\">Default left</ng-content>
       <ng-content>Default Child</ng-content>

diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -1802,6 +1802,7 @@ import { Component } from \\"@angular/core\\";
   selector: \\"slot-code, SlotCode\\",
   template: \`
     <div>
+      <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
       <ng-content select=\\"[top]\\"></ng-content>
       <ng-content select=\\"[left]\\">Default left</ng-content>
       <ng-content>Default Child</ng-content>
@@ -6492,6 +6493,7 @@ type Props = {
   selector: \\"slot-code, SlotCode\\",
   template: \`
     <div>
+      <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
       <ng-content select=\\"[top]\\"></ng-content>
       <ng-content select=\\"[left]\\">Default left</ng-content>
       <ng-content>Default Child</ng-content>

diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -3293,6 +3293,7 @@ import { Component } from \\"@angular/core\\";
   selector: \\"slot-code, SlotCode\\",
   template: \`
     <div>
+      <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
       <ng-content select=\\"[top]\\"></ng-content>
       <ng-content select=\\"[left]\\">Default left</ng-content>
       <ng-content>Default Child</ng-content>
@@ -3318,6 +3319,7 @@ import { CommonModule } from \\"@angular/common\\";
   selector: \\"slot-code, SlotCode\\",
   template: \`
     <div>
+      <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
       <ng-content select=\\"[top]\\"></ng-content>
       <ng-content select=\\"[left]\\">Default left</ng-content>
       <ng-content>Default Child</ng-content>
@@ -11732,6 +11734,7 @@ type Props = {
   selector: \\"slot-code, SlotCode\\",
   template: \`
     <div>
+      <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
       <ng-content select=\\"[top]\\"></ng-content>
       <ng-content select=\\"[left]\\">Default left</ng-content>
       <ng-content>Default Child</ng-content>
@@ -11761,6 +11764,7 @@ type Props = {
   selector: \\"slot-code, SlotCode\\",
   template: \`
     <div>
+      <ng-content select=\\"[my-awesome-slot]\\"></ng-content>
       <ng-content select=\\"[top]\\"></ng-content>
       <ng-content select=\\"[left]\\">Default left</ng-content>
       <ng-content>Default Child</ng-content>

diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -2715,6 +2715,7 @@ exports[`Html > jsx > Javascript Test > SlotJsx 1`] = `
 
 exports[`Html > jsx > Javascript Test > SlotNamed 1`] = `
 "<div>
+  <slot name=\\"myAwesomeSlot\\"></slot>
   <slot name=\\"top\\"></slot>
   <slot name=\\"left\\">Default left</slot>
   <slot>Default Child</slot>
@@ -9071,6 +9072,7 @@ exports[`Html > jsx > Typescript Test > SlotJsx 1`] = `
 
 exports[`Html > jsx > Typescript Test > SlotNamed 1`] = `
 "<div>
+  <slot name=\\"myAwesomeSlot\\"></slot>
   <slot name=\\"top\\"></slot>
   <slot name=\\"left\\">Default left</slot>
   <slot>Default Child</slot>

diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -315,6 +315,7 @@ exports[`Liquid > jsx > Javascript Test > SlotJsx 1`] = `
 
 exports[`Liquid > jsx > Javascript Test > SlotNamed 1`] = `
 "<div>
+  <slot name=\\"myAwesomeSlot\\"></slot>
   <slot name=\\"top\\"></slot>
   <slot name=\\"left\\">Default left</slot>
   <slot>Default Child</slot>
@@ -1178,6 +1179,7 @@ exports[`Liquid > jsx > Typescript Test > SlotJsx 1`] = `
 
 exports[`Liquid > jsx > Typescript Test > SlotNamed 1`] = `
 "<div>
+  <slot name=\\"myAwesomeSlot\\"></slot>
   <slot name=\\"top\\"></slot>
   <slot name=\\"left\\">Default left</slot>
   <slot>Default Child</slot>

diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -1686,6 +1686,7 @@ export default class SlotCode extends LitElement {
     return html\`
 
           <div>
+          <my-slot name=\\"myAwesomeSlot\\"></my-slot>
           <my-slot name=\\"top\\"></my-slot>
           <my-slot name=\\"left\\">Default left</my-slot>
           <my-slot>Default Child</my-slot>
@@ -5937,6 +5938,7 @@ export default class SlotCode extends LitElement {
     return html\`
 
           <div>
+          <my-slot name=\\"myAwesomeSlot\\"></my-slot>
           <my-slot name=\\"top\\"></my-slot>
           <my-slot name=\\"left\\">Default left</my-slot>
           <my-slot>Default Child</my-slot>

diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -1153,6 +1153,7 @@ exports[`Marko > jsx > Javascript Test > SlotNamed 1`] = `
 "class {}
 
 <div>
+  <slot name=\\"myAwesomeSlot\\"></slot>
   <slot name=\\"top\\"></slot>
   <slot name=\\"left\\">Default left</slot>
   <slot>Default Child</slot>
@@ -3522,6 +3523,7 @@ exports[`Marko > jsx > Typescript Test > SlotNamed 1`] = `
 "class {}
 
 <div>
+  <slot name=\\"myAwesomeSlot\\"></slot>
   <slot name=\\"top\\"></slot>
   <slot name=\\"left\\">Default left</slot>
   <slot>Default Child</slot>

diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -3993,6 +3993,17 @@ exports[`Parse JSX > Javascript > SlotNamed 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {},
       "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "Slot",
+          "properties": {
+            "name": "myAwesomeSlot",
+          },
+          "scope": {},
+        },
         {
           "@type": "@builder.io/mitosis/node",
           "bindings": {},
@@ -14086,6 +14097,17 @@ exports[`Parse JSX > Typescript > SlotNamed 1`] = `
       "@type": "@builder.io/mitosis/node",
       "bindings": {},
       "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "Slot",
+          "properties": {
+            "name": "myAwesomeSlot",
+          },
+          "scope": {},
+        },
         {
           "@type": "@builder.io/mitosis/node",
           "bindings": {},

diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -1339,6 +1339,7 @@ import { h, Fragment } from \\"preact\\";
 function SlotCode(props) {
   return (
     <div>
+      <>{props.myAwesomeSlot}</>
       <>{props.top}</>
       <>{props.left || \\"Default left\\"}</>
       <>{props.children || \\"Default Child\\"}</>
@@ -4799,6 +4800,7 @@ type Props = {
 function SlotCode(props: Props) {
   return (
     <div>
+      <>{props.myAwesomeSlot}</>
       <>{props.top}</>
       <>{props.left || \\"Default left\\"}</>
       <>{props.children || \\"Default Child\\"}</>

diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -2305,9 +2305,7 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > ContentSlotHtml 1`] = `
-"import { Slot } from \\"./med.js\\";
-
-import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+"import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 export const ContentSlotCode = component$((props) => {
   return (
@@ -2328,9 +2326,7 @@ export default ContentSlotCode;
 `;
 
 exports[`qwik > jsx > Javascript Test > ContentSlotJSX 1`] = `
-"import { Slot } from \\"./med.js\\";
-
-import {
+"import {
   $,
   Fragment,
   Slot,
@@ -3157,9 +3153,7 @@ export default SelectComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > SlotDefault 1`] = `
-"import { Slot } from \\"./med.js\\";
-
-import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+"import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 export const SlotCode = component$((props) => {
   return (
@@ -3178,9 +3172,7 @@ export default SlotCode;
 exports[`qwik > jsx > Javascript Test > SlotHtml 1`] = `
 "import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
-import { Slot } from \\"./med.js\\";
-
-import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 export const SlotCode = component$((props) => {
   return (
@@ -3222,13 +3214,12 @@ export default SlotCode;
 `;
 
 exports[`qwik > jsx > Javascript Test > SlotNamed 1`] = `
-"import { Slot } from \\"./med.js\\";
-
-import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+"import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 export const SlotCode = component$((props) => {
   return (
     <div>
+      <Slot name=\\"myAwesomeSlot\\"></Slot>
       <Slot name=\\"top\\"></Slot>
       <Slot name=\\"left\\">Default left</Slot>
       <Slot>Default Child</Slot>
@@ -5615,9 +5606,7 @@ export const STYLES = \`
 exports[`qwik > jsx > Typescript Test > ContentSlotHtml 1`] = `
 "import { JSX } from \\"../../../../jsx-runtime\\";
 
-import { Slot } from \\"./med.js\\";
-
-import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 type Props = {
   [key: string]: string | JSX.Element;
@@ -5644,8 +5633,6 @@ export default ContentSlotCode;
 exports[`qwik > jsx > Typescript Test > ContentSlotJSX 1`] = `
 "import { JSX } from \\"../../../../jsx-runtime\\";
 
-import { Slot } from \\"./med.js\\";
-
 import {
   $,
   Fragment,
@@ -6580,9 +6567,7 @@ export default SelectComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > SlotDefault 1`] = `
-"import { Slot } from \\"./med.js\\";
-
-import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+"import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 type Props = {
   [key: string]: string;
@@ -6604,9 +6589,7 @@ export default SlotCode;
 exports[`qwik > jsx > Typescript Test > SlotHtml 1`] = `
 "import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
-import { Slot } from \\"./med.js\\";
-
-import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 type Props = {
   [key: string]: string;
@@ -6654,16 +6637,15 @@ export default SlotCode;
 `;
 
 exports[`qwik > jsx > Typescript Test > SlotNamed 1`] = `
-"import { Slot } from \\"./med.js\\";
-
-import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+"import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 type Props = {
   [key: string]: string;
 };
 export const SlotCode = component$((props: Props) => {
   return (
     <div>
+      <Slot name=\\"myAwesomeSlot\\"></Slot>
       <Slot name=\\"top\\"></Slot>
       <Slot name=\\"left\\">Default left</Slot>
       <Slot>Default Child</Slot>
@@ -9371,9 +9353,7 @@ export default MyComponent;
 exports[`qwik > svelte > Javascript Test > imports 1`] = `
 "import Button from \\"./Button.jsx\\";
 
-import { Slot } from \\"./med.js\\";
-
-import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
+import { Fragment, Slot, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   const state = useStore({ disabled: false });
@@ -9485,9 +9465,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Javascript Test > slots 1`] = `
-"import { Slot } from \\"./med.js\\";
-
-import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+"import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props) => {
   return (
@@ -9781,9 +9759,7 @@ export default MyComponent;
 exports[`qwik > svelte > Typescript Test > imports 1`] = `
 "import Button from \\"./Button.jsx\\";
 
-import { Slot } from \\"./med.js\\";
-
-import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
+import { Fragment, Slot, component$, h, useStore } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   const state = useStore<any>({ disabled: false });
@@ -9895,9 +9871,7 @@ export default MyComponent;
 `;
 
 exports[`qwik > svelte > Typescript Test > slots 1`] = `
-"import { Slot } from \\"./med.js\\";
-
-import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+"import { Fragment, Slot, component$, h } from \\"@builder.io/qwik\\";
 
 export const MyComponent = component$((props: any) => {
   return (

diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -1550,6 +1550,7 @@ import {
 function SlotCode(props) {
   return (
     <View>
+      <>{props.myAwesomeSlot}</>
       <>{props.top}</>
       <>{props.left || <Text>Default left</Text>}</>
       <>{props.children || <Text>Default Child</Text>}</>
@@ -5770,6 +5771,7 @@ type Props = {
 function SlotCode(props: Props) {
   return (
     <View>
+      <>{props.myAwesomeSlot}</>
       <>{props.top}</>
       <>{props.left || <Text>Default left</Text>}</>
       <>{props.children || <Text>Default Child</Text>}</>

diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -1325,6 +1325,7 @@ exports[`React > jsx > Javascript Test > SlotNamed 1`] = `
 function SlotCode(props) {
   return (
     <div>
+      <>{props.myAwesomeSlot}</>
       <>{props.top}</>
       <>{props.left || \\"Default left\\"}</>
       <>{props.children || \\"Default Child\\"}</>
@@ -4737,6 +4738,7 @@ type Props = {
 function SlotCode(props: Props) {
   return (
     <div>
+      <>{props.myAwesomeSlot}</>
       <>{props.top}</>
       <>{props.left || \\"Default left\\"}</>
       <>{props.children || \\"Default Child\\"}</>