feat(svelte/demo/bootstrap): svelte 5 migration

svelte/demo/src/bootstrap/main.ts

@@ -1,6 +1,7 @@
 import App from './App.svelte';
 import '@agnos-ui/core-bootstrap/scss/agnosui.scss';
+import {mount} from 'svelte';
 
-export const main = new App({
+export const main = mount(App, {
 	target: document.getElementById('root')!,
 });

svelte/demo/src/bootstrap/samples/accordion/CustomHeaders.route.svelte

@@ -1,18 +1,16 @@
-<script context="module" lang="ts">
+<script lang="ts">
 	import {Accordion, AccordionItem} from '@agnos-ui/svelte-bootstrap/components/accordion';
 	import '@agnos-ui/common/samples/accordion/custom.scss';
 	import {writable} from 'svelte/store';
 	import BODY from '@agnos-ui/common/samples/accordion/body.txt?raw';
-</script>
 
-<script lang="ts">
 	let accordion: Accordion;
 	const thirdItemDisabled$ = writable(false);
 </script>
 
 <Accordion bind:this={accordion}>
 	<AccordionItem>
-		<svelte:fragment slot="structure" let:state let:widget>
+		{#snippet structure({state, widget})}
 			<div
 				use:widget.directives.headerDirective
 				class="accordion-button accordion-header custom-header justify-content-between"
@@ -32,10 +30,10 @@
 					</div>
 				</div>
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 	</AccordionItem>
 	<AccordionItem>
-		<svelte:fragment slot="structure" let:state let:widget>
+		{#snippet structure({state, widget})}
 			<div
 				use:widget.directives.headerDirective
 				class="accordion-button accordion-header custom-header justify-content-between"
@@ -50,10 +48,10 @@
 						type="button"
 						class="btn btn-sm btn-outline-primary {state.buttonClassName} au-accordion-item-button">Toggle second</button
 					>
-					<button type="button" class="btn btn-sm btn-outline-secondary" on:click={() => thirdItemDisabled$.update((disabled) => !disabled)}>
+					<button type="button" class="btn btn-sm btn-outline-secondary" onclick={() => thirdItemDisabled$.update((disabled) => !disabled)}>
 						{$thirdItemDisabled$ ? 'En' : 'Dis'}able third
 					</button>
-					<button type="button" class="btn btn-sm btn-outline-danger" on:click={() => accordion.api.collapseAll()}> Collapse all </button>
+					<button type="button" class="btn btn-sm btn-outline-danger" onclick={() => accordion.api.collapseAll()}> Collapse all </button>
 				</div>
 			</div>
 			{#if state.shouldBeInDOM}
@@ -63,10 +61,10 @@
 					</div>
 				</div>
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 	</AccordionItem>
 	<AccordionItem disabled={$thirdItemDisabled$}>
-		<svelte:fragment slot="structure" let:state let:widget>
+		{#snippet structure({state, widget})}
 			<div
 				use:widget.directives.headerDirective
 				class="accordion-header accordion-button custom-header justify-content-between"
@@ -88,6 +86,6 @@
 					</div>
 				</div>
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 	</AccordionItem>
 </Accordion>

svelte/demo/src/bootstrap/samples/accordion/Default.route.svelte

@@ -1,12 +1,14 @@
-<script context="module" lang="ts">
+<script lang="ts">
 	import {Accordion, AccordionItem} from '@agnos-ui/svelte-bootstrap/components/accordion';
 	import BODY from '@agnos-ui/common/samples/accordion/body.txt?raw';
 </script>
 
 <Accordion>
 	<AccordionItem header="Simple" visible>{BODY}</AccordionItem>
 	<AccordionItem>
-		<span slot="header">&#9733; <b>Fancy</b> title &#9733;</span>
+		{#snippet header()}
+			<span>&#9733; <b>Fancy</b> title &#9733;</span>
+		{/snippet}
 		{BODY}
 	</AccordionItem>
 	<AccordionItem header="Disabled" disabled>{BODY}</AccordionItem>

svelte/demo/src/bootstrap/samples/accordion/TogglePanels.route.svelte

@@ -1,9 +1,7 @@
-<script context="module" lang="ts">
+<script lang="ts">
 	import {Accordion, AccordionItem} from '@agnos-ui/svelte-bootstrap/components/accordion';
 	import BODY from '@agnos-ui/common/samples/accordion/body.txt?raw';
-</script>
 
-<script lang="ts">
 	let accordion: Accordion;
 	let secondAccordionItem: AccordionItem;
 </script>
@@ -14,8 +12,8 @@
 </Accordion>
 <hr />
 <div class="d-flex flex-wrap gap-2">
-	<button class="btn btn-sm btn-outline-primary" on:click={() => accordion.api.toggle('first')}>Toggle first</button>
-	<button class="btn btn-sm btn-outline-primary" on:click={() => secondAccordionItem.api.toggle()}>Toggle second</button>
-	<button class="btn btn-sm btn-outline-primary" on:click={() => accordion.api.expandAll()}>Expand all</button>
-	<button class="btn btn-sm btn-outline-primary" on:click={() => accordion.api.collapseAll()}>Collapse all</button>
+	<button class="btn btn-sm btn-outline-primary" onclick={() => accordion.api.toggle('first')}>Toggle first</button>
+	<button class="btn btn-sm btn-outline-primary" onclick={() => secondAccordionItem.api.toggle()}>Toggle second</button>
+	<button class="btn btn-sm btn-outline-primary" onclick={() => accordion.api.expandAll()}>Expand all</button>
+	<button class="btn btn-sm btn-outline-primary" onclick={() => accordion.api.collapseAll()}>Collapse all</button>
 </div>

svelte/demo/src/bootstrap/samples/alert/Config.route.svelte

@@ -14,7 +14,7 @@
 	});
 </script>
 
-<button class="btn btn-primary showAlert" on:click={() => alert.api.open()} type="button">Show alert</button>
+<button class="btn btn-primary showAlert" onclick={() => alert.api.open()} type="button">Show alert</button>
 
 <br />
 <br />

svelte/demo/src/bootstrap/samples/alert/Dynamic.route.svelte

@@ -14,26 +14,23 @@
 		};
 	}
 
-	export const alerts$ = createAlerts();
+	const alerts$ = createAlerts();
 </script>
 
-<button class="btn btn-primary addError me-1" on:click={() => alerts$.add({type: 'danger', children: 'Error', dismissible: true, animated: true})}
+<button class="btn btn-primary addError me-1" onclick={() => alerts$.add({type: 'danger', children: 'Error', dismissible: true, animated: true})}
 	>Add error</button
 >
 
-<button class="btn btn-primary addInfo me-1" on:click={() => alerts$.add({type: 'info', children: 'Info', dismissible: true, animated: true})}
+<button class="btn btn-primary addInfo me-1" onclick={() => alerts$.add({type: 'info', children: 'Info', dismissible: true, animated: true})}
 	>Add info</button
 >
 
-<button
-	class="btn btn-primary addWarning me-1"
-	on:click={() => alerts$.add({type: 'warning', children: 'Warning', dismissible: true, animated: true})}>Add warning</button
+<button class="btn btn-primary addWarning me-1" onclick={() => alerts$.add({type: 'warning', children: 'Warning', dismissible: true, animated: true})}
+	>Add warning</button
 >
 
 <br />
 <div class="alertCount mb-3">Alerts in the service: {$alerts$.length}</div>
 {#each $alerts$ as alert (alert)}
-	{@const {dismissible, animatedOnInit, animated, type, children} = alert}
-
-	<Alert {dismissible} {animatedOnInit} {animated} {type} {children} onHidden={() => alerts$.remove(alert)} />
+	<Alert {...alert} onHidden={() => alerts$.remove(alert)} />
 {/each}

svelte/demo/src/bootstrap/samples/alert/Icon.route.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
-	import {Alert} from '@agnos-ui/svelte-bootstrap/components/alert';
+	import {Alert, type AlertContext} from '@agnos-ui/svelte-bootstrap/components/alert';
 	import {createWidgetsDefaultConfig} from '@agnos-ui/svelte-bootstrap/config';
 	import IconStructure from './IconStructure.svelte';
 
-	createWidgetsDefaultConfig().set({alert: {dismissible: false, className: 'd-flex align-items-center', structure: IconStructure}});
+	createWidgetsDefaultConfig().set({alert: {dismissible: false, className: 'd-flex align-items-center', structure}});
 </script>
 
+{#snippet structure(props: AlertContext)}
+	<IconStructure {...props} />
+{/snippet}
+
 <Alert type="success">Alert success with a customisable icon</Alert>
 <Alert type="warning">Alert warning with a customisable icon</Alert>
 <Alert type="danger">Alert danger with a customisable icon</Alert>

svelte/demo/src/bootstrap/samples/alert/IconStructure.svelte

@@ -1,17 +1,13 @@
 <script lang="ts">
 	import {Slot} from '@agnos-ui/svelte-bootstrap/slot';
-	import type {AlertSlots} from '@agnos-ui/svelte-bootstrap/components/alert';
 	import biCheckCircleFill from 'bootstrap-icons/icons/check-circle-fill.svg?raw';
 	import biInfoCircleFill from 'bootstrap-icons/icons/info-circle-fill.svg?raw';
 	import biExclamationTriangleFill from 'bootstrap-icons/icons/exclamation-triangle-fill.svg?raw';
 	import biDashCircleFill from 'bootstrap-icons/icons/dash-circle-fill.svg?raw';
 	import biLightbulb from 'bootstrap-icons/icons/lightbulb.svg?raw';
+	import type {AlertContext} from '@agnos-ui/svelte-bootstrap/components/alert';
 
-	type $$Props = AlertSlots['structure'];
-	type $$Slots = AlertSlots;
-
-	export let state: $$Props['state'];
-	export let widget: $$Props['widget'];
+	let {state, widget}: AlertContext = $props();
 
 	const typeIcon: Record<string, string> = {
 		success: biCheckCircleFill,
@@ -24,14 +20,8 @@
 
 <span class="d-flex me-2">{@html typeIcon[state.type]}</span>
 <div class="alert-body">
-	<Slot slotContent={state.children} props={{widget, state}} let:component let:props>
-		<svelte:fragment slot="slot" let:props><slot {...props} /></svelte:fragment>
-		<svelte:component this={component} {...props}>
-			<svelte:fragment let:state let:widget><slot {state} {widget} /></svelte:fragment>
-			<svelte:fragment slot="structure" let:state let:widget><slot name="structure" {state} {widget} /></svelte:fragment>
-		</svelte:component>
-	</Slot>
+	<Slot content={state.children} props={{widget, state}} />
 </div>
 {#if state.dismissible}
-	<button type="button" class="btn-close ms-auto" on:click={() => widget.api.close()} aria-label={state.ariaCloseButtonLabel} />
+	<button type="button" class="btn-close ms-auto" onclick={() => widget.api.close()} aria-label={state.ariaCloseButtonLabel}></button>
 {/if}

svelte/demo/src/bootstrap/samples/floatingUI/FloatingUI.route.svelte

@@ -35,7 +35,7 @@
 </script>
 
 <div class="position-relative overflow-auto border border-primary-subtle demo-floatingui" use:scrollToMiddle>
-	<button use:referenceDirective type="button" class="btn btn-primary" on:click={toggleButton}>Toggle popover</button>
+	<button use:referenceDirective type="button" class="btn btn-primary" onclick={toggleButton}>Toggle popover</button>
 	{#if displayPopover}
 		<div
 			use:floatingDirective

svelte/demo/src/bootstrap/samples/focustrack/Focustrack.route.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
 	import {activeElement$, createHasFocus} from '@agnos-ui/svelte-bootstrap/services/focustrack';
+	import {onMount} from 'svelte';
 
 	const {hasFocus$, directive} = createHasFocus();
 
-	let activeElements: {tagName: string | undefined; id: string | undefined}[] = [];
-	$: activeElements = [...activeElements, {tagName: $activeElement$?.tagName.toLowerCase(), id: $activeElement$?.id || undefined}];
+	let activeElements: {tagName: string | undefined; id: string | undefined}[] = $state([]);
+	onMount(() =>
+		activeElement$.subscribe((activeElement) => {
+			activeElements.push({tagName: activeElement?.tagName.toLowerCase(), id: activeElement?.id || undefined});
+		}),
+	);
 </script>
 
 <div class="demo-focustrack">
@@ -20,5 +25,5 @@
 	</div>
 	<label for="activeElementHistory" class="form-label">Active element history:</label>
 	<textarea class="form-control mb-2" id="activeElementHistory" readonly>{JSON.stringify(activeElements)}</textarea>
-	<button class="btn btn-primary" on:click={() => (activeElements = [])}>Clear</button>
+	<button class="btn btn-primary" onclick={() => (activeElements = [])}>Clear</button>
 </div>

svelte/demo/src/bootstrap/samples/modal/Component.route.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
-	import {openModal} from '@agnos-ui/svelte-bootstrap/components/modal';
-	import ComponentModal from './ComponentModal.svelte';
-	const launch = () => openModal({title: 'Hi there!', children: ComponentModal, contentData: {name: 'World'}});
+	import {type ModalContext, openModal} from '@agnos-ui/svelte-bootstrap/components/modal';
+	const onclick = () => openModal({title: 'Hi there!', children, contentData: {name: 'World'}});
 </script>
 
-<button type="button" class="btn btn-primary" on:click={() => launch()}>Launch demo modal</button>
+{#snippet children({state, widget}: ModalContext<{name: string}>)}
+	<p>Hello, {state.contentData.name}!</p>
+	<button type="button" class="btn btn-outline-primary" onclick={() => widget.api.close()}>Close</button>
+{/snippet}
+
+<button type="button" class="btn btn-primary" {onclick}>Launch demo modal</button>

svelte/demo/src/bootstrap/samples/modal/Default.route.svelte

@@ -2,21 +2,21 @@
 	import {Modal, modalCloseButtonClick, modalOutsideClick} from '@agnos-ui/svelte-bootstrap/components/modal';
 
 	let modal: Modal<unknown>;
-	let message = '';
-	let fullscreen = false;
+	let message = $state('');
+	let fullscreen = $state(false);
 </script>
 
 <Modal bind:this={modal} title="Save changes" {fullscreen}>
 	Do you want to save your changes?
-	<svelte:fragment slot="footer">
-		<button type="button" class="btn btn-outline-primary" on:click={() => modal.api.close(true)}>Yes</button>
-		<button type="button" class="btn btn-outline-danger" on:click={() => modal.api.close(false)}>No</button>
-	</svelte:fragment>
+	{#snippet footer()}
+		<button type="button" class="btn btn-outline-primary" onclick={() => modal.api.close(true)}>Yes</button>
+		<button type="button" class="btn btn-outline-danger" onclick={() => modal.api.close(false)}>No</button>
+	{/snippet}
 </Modal>
 <button
 	type="button"
 	class="btn btn-primary"
-	on:click={async () => {
+	onclick={async () => {
 		message = '';
 		const result = await modal.api.open();
 		if (result === modalCloseButtonClick) {

svelte/demo/src/bootstrap/samples/modal/Stack.route.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import {openModal} from '@agnos-ui/svelte-bootstrap/components/modal';
+	import {type ModalContext, openModal} from '@agnos-ui/svelte-bootstrap/components/modal';
 	import StackModal from './StackModal.svelte';
 </script>
 
-<button class="btn btn-primary" on:click={() => openModal({title: 'First modal', className: 'modal-sm', children: StackModal})}
-	>Launch demo modal</button
->
+{#snippet children(props: ModalContext<void>)}
+	<StackModal {...props} />
+{/snippet}
+
+<button class="btn btn-primary" onclick={() => openModal({title: 'First modal', className: 'modal-sm', children})}>Launch demo modal</button>

svelte/demo/src/bootstrap/samples/modal/StackModal.svelte

@@ -1,20 +1,17 @@
 <script lang="ts">
-	import type {ModalSlots} from '@agnos-ui/svelte-bootstrap/components/modal';
-	import {openModal} from '@agnos-ui/svelte-bootstrap/components/modal';
-	import Self from './StackModal.svelte';
-
-	type $$Props = ModalSlots['default'];
-	type $$Slots = ModalSlots;
-	export let widget: $$Props['widget'];
-	export let state: $$Props['state'];
+	import {type ModalContext, openModal} from '@agnos-ui/svelte-bootstrap/components/modal';
+	let {state, widget}: ModalContext<void> = $props();
 </script>
 
 This is a modal<br /><br />
-<button class="btn btn-outline-primary m-1" on:click={() => openModal({title: 'Other modal', children: Self, container: state.modalElement})}>
+<button
+	class="btn btn-outline-primary m-1"
+	onclick={() => openModal({title: 'Other modal', children: state.children, container: state.modalElement})}
+>
 	Launch other modal</button
 ><br />
-<button class="btn btn-outline-secondary m-1" on:click={() => widget.api.patch({backdrop: true})}>Enable backdrop</button><button
+<button class="btn btn-outline-secondary m-1" onclick={() => widget.api.patch({backdrop: true})}>Enable backdrop</button><button
 	class="btn btn-outline-secondary m-1"
-	on:click={() => widget.api.patch({backdrop: false})}>Disable backdrop</button
+	onclick={() => widget.api.patch({backdrop: false})}>Disable backdrop</button
 ><br />
-<button class="btn btn-outline-secondary m-1" on:click={() => widget.api.close()}>Close</button>
+<button class="btn btn-outline-secondary m-1" onclick={() => widget.api.close()}>Close</button>

svelte/demo/src/bootstrap/samples/navManager/NavManagerLine.svelte

@@ -15,7 +15,7 @@
 		},
 	};
 
-	export let text = '';
+	let {text = ''} = $props();
 </script>
 
 <div class="d-flex demo-navmanager-line">

svelte/demo/src/bootstrap/samples/navManager/NavManagerWithSelectorLine.svelte

@@ -16,7 +16,7 @@
 		selector: (divElement) => divElement.querySelectorAll('input,span'),
 	};
 
-	export let text = '';
+	let {text = ''} = $props();
 </script>
 
 <div class="d-flex demo-navmanager-line" use:directive={navManagerConfig}>

svelte/demo/src/bootstrap/samples/pagination/Custom.route.svelte

@@ -2,20 +2,22 @@
 	import {Pagination} from '@agnos-ui/svelte-bootstrap/components/pagination';
 	import CustomPages from './CustomPages.svelte';
 
-	function getPageSymbol(displayedPage: number) {
-		return ['A', 'B', 'C', 'D', 'E', 'F'][displayedPage - 1];
-	}
+	const getPageSymbol = (displayedPage: number) => ['A', 'B', 'C', 'D', 'E', 'F'][displayedPage - 1];
 
 	let page = 4;
 </script>
 
 <p>A pagination with customized links:</p>
 <Pagination bind:page collectionSize={60} previousPageLabel="Prev" nextPageLabel="Next" ariaLabel="Page navigation with customized links">
-	<svelte:fragment slot="numberLabel" let:displayedPage>
+	{#snippet numberLabel({displayedPage})}
 		{getPageSymbol(displayedPage)}
-	</svelte:fragment>
+	{/snippet}
 </Pagination>
 <hr />
 
 <p>A pagination with customized pages:</p>
-<Pagination bind:page collectionSize={60} pagesDisplay={CustomPages} ariaLabel="Page navigation with customized pages" />
+<Pagination bind:page collectionSize={60} ariaLabel="Page navigation with customized pages">
+	{#snippet pagesDisplay(props)}
+		<CustomPages {...props} />
+	{/snippet}
+</Pagination>