feat(doc): svelte 5 migration

AmadeusITGroup · Sep 24, 2024 · 51ed242 · 51ed242
1 parent 526b694
commit 51ed242
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 22 deletions.
diff --git a/angular/docs/Slots.md b/angular/docs/Slots.md
@@ -1,5 +1,3 @@
-## Slots in Angular
-
 Angular applications usually handle slots using [content projection](https://angular.dev/guide/components/content-projection).  
 We support this behavior, while going further.
 

diff --git a/docs/01-Headless/02-Slots.md b/docs/01-Headless/02-Slots.md
@@ -18,8 +18,15 @@ This separation of structure and content enhances code reusability and promotes
 
 ## AgnosUI Slot
 
-AgnosUI core components include slots as **properties** prefixed by _slot_ in their states.  
-This allows to specifiy the projected content in multiple manners, like simple `string`, context-aware functions, standard slots or even fully-fledged components.
+AgnosUI components include slots as **properties**. This allows to specify the projected content in multiple manners, depending on the framework.
+
+<!-- <framework-specific src="Slots.md"> -->
+<p align="center">
+    <a href="../../angular/docs/Slots.md">Slots in Angular</a>&nbsp;&nbsp;
+    <a href="../../react/docs/Slots.md">Slots in React</a>&nbsp;&nbsp;
+    <a href="../../svelte/docs/Slots.md">Slots in Svelte</a>
+</p>
+<!-- </framework-specific> -->
 
 To illustrate the basic usage, let's see in action how we can use a simple slot in the Bootstrap flavour of the **Alert** component:
 
@@ -45,20 +52,11 @@ For instance, we may configure the _slotStructure_ of the **Alert** to use a cus
 {Slot Configuration:alert/icon:402}
 ```
 
-<!-- <framework-specific src="Slots.md"> -->
-
 ## Headless Usage
 
 AgnosUI provides utilities to manage slots for each framework, as frameworks have differences in their implementations of slots / templates / snippets.  
 To learn more about the specificies of each framework, go here:
 
-<p align="center">
-    <a href="../../angular/docs/Slots.md">Slots in Angular</a>&nbsp;&nbsp;
-    <a href="../../react/docs/Slots.md">Slots in React</a>&nbsp;&nbsp;
-    <a href="../../svelte/docs/Slots.md">Slots in Svelte</a>
-</p>
-<!-- </framework-specific> -->
-
 ## Headless example
 
 You can check out the following example, re-writing the Bootstrap flavour of the **Rating** component as readonly:

diff --git a/react/docs/Slots.md b/react/docs/Slots.md
@@ -1,5 +1,3 @@
-## Slots in React
-
 React manages slots using the `children` specific property, as [documented here](https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children).  
 We support this behavior, while going further.
 

diff --git a/svelte/docs/Slots.md b/svelte/docs/Slots.md
@@ -1,11 +1,8 @@
-## Slots in Svelte
-
-Svelte manages slots using the [slot special element](https://svelte.dev/docs/special-elements#slot).  
-Note that this will change when Svelte 5 comes out and brings snippets to the fray.  
-We support this behavior, while going further.
+Svelte 5 manages slots using [Snippets](https://svelte-5-preview.vercel.app/docs/snippets).
 
 The AgnosUI Svelte slots can be set using:
 
 - a simple `string`
-- a function `(props: Props) => string`
-- a Svelte component
+- a Svelte snippet
+
+> Due to technical constraints with Svelte 5, AgnosUI Svelte slot properties cannot be set through a function or Svelte component