feat: last runes changes (#975)

core/src/services/floatingUI.ts

@@ -76,7 +76,7 @@ const defaultConfig: FloatingUIProps = {
 	arrowOptions: {},
 };
 
-export type FloatingUI = Omit<Widget<FloatingUIProps, FloatingUIState, object, FloatingUIDirectives>, 'api'>;
+export type FloatingUI = Widget<FloatingUIProps, FloatingUIState, object, FloatingUIDirectives>;
 
 /**
  * Create a floating UI service.
@@ -192,5 +192,6 @@ export const createFloatingUI = (propsConfig?: PropsConfig<FloatingUIProps>): Fl
 			 */
 			arrowDirective: mergeDirectives(arrowDirective, directiveSubscribe(arrowStyleApplyAction$)),
 		},
+		api: {},
 	};
 };

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

@@ -1,11 +1,10 @@
 <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';
 
 	let accordion: Accordion;
-	const thirdItemDisabled$ = writable(false);
+	let thirdItemDisabled = $state(false);
 </script>
 
 <Accordion bind:this={accordion}>
@@ -46,8 +45,8 @@
 					<button use:directives.toggleDirective 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" onclick={() => thirdItemDisabled$.update((disabled) => !disabled)}>
-						{$thirdItemDisabled$ ? 'En' : 'Dis'}able third
+					<button type="button" class="btn btn-sm btn-outline-secondary" onclick={() => (thirdItemDisabled = !thirdItemDisabled)}>
+						{thirdItemDisabled ? 'En' : 'Dis'}able third
 					</button>
 					<button type="button" class="btn btn-sm btn-outline-danger" onclick={() => accordion.api.collapseAll()}> Collapse all </button>
 				</div>
@@ -61,7 +60,7 @@
 			{/if}
 		{/snippet}
 	</AccordionItem>
-	<AccordionItem disabled={$thirdItemDisabled$}>
+	<AccordionItem disabled={thirdItemDisabled}>
 		{#snippet structure({state, directives})}
 			<div
 				use:directives.headerDirective

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

@@ -1,36 +1,25 @@
 <script lang="ts">
 	import {Alert} from '@agnos-ui/svelte-bootstrap/components/alert';
-	import type {AlertProps} from '@agnos-ui/svelte-bootstrap/components/alert';
-	import {writable} from 'svelte/store';
+	import {AlertService} from './alert-service.svelte';
 
-	function createAlerts() {
-		const {subscribe, set, update} = writable([] as Partial<AlertProps>[]);
-
-		return {
-			subscribe,
-			add: (alert: Partial<AlertProps>) => update((alerts) => [...alerts, alert]),
-			remove: (alert: Partial<AlertProps>) => update((alerts) => alerts.filter((a) => a !== alert)),
-			reset: () => set([]),
-		};
-	}
-
-	const alerts$ = createAlerts();
+	const alertService = new AlertService();
 </script>
 
-<button class="btn btn-primary addError me-1" onclick={() => alerts$.add({type: 'danger', children: 'Error', dismissible: true, animated: true})}
+<button class="btn btn-primary addError me-1" onclick={() => alertService.add({type: 'danger', children: 'Error', dismissible: true, animated: true})}
 	>Add error</button
 >
 
-<button class="btn btn-primary addInfo me-1" onclick={() => alerts$.add({type: 'info', children: 'Info', dismissible: true, animated: true})}
+<button class="btn btn-primary addInfo me-1" onclick={() => alertService.add({type: 'info', children: 'Info', dismissible: true, animated: true})}
 	>Add info</button
 >
 
-<button class="btn btn-primary addWarning me-1" onclick={() => alerts$.add({type: 'warning', children: 'Warning', dismissible: true, animated: true})}
-	>Add warning</button
+<button
+	class="btn btn-primary addWarning me-1"
+	onclick={() => alertService.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)}
-	<Alert {...alert} onHidden={() => alerts$.remove(alert)} />
+<div class="alertCount mb-3">Alerts in the service: {alertService.alerts.length}</div>
+{#each alertService.alerts as alert (alert)}
+	<Alert {...alert} onHidden={() => alertService.remove(alert)} />
 {/each}

svelte/demo/src/bootstrap/samples/alert/alert-service.svelte.ts

@@ -0,0 +1,13 @@
+import type {AlertProps} from '@agnos-ui/svelte-bootstrap/components/alert';
+
+export class AlertService {
+	#alerts = $state<Partial<AlertProps>[]>([]);
+
+	get alerts() {
+		return this.#alerts;
+	}
+
+	readonly add = (alert: Partial<AlertProps>) => this.#alerts.push(alert);
+	readonly remove = (alert: Partial<AlertProps>) => this.#alerts.splice(this.#alerts.indexOf(alert), 1);
+	readonly reset = () => (this.#alerts = []);
+}

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

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import '@agnos-ui/common/samples/floatingui/floatingui.scss';
+	import {callWidgetFactory} from '@agnos-ui/svelte-bootstrap/config';
 	import {createFloatingUI} from '@agnos-ui/svelte-bootstrap/services/floatingUI';
 	import {autoPlacement, hide, offset, shift} from '@floating-ui/dom';
-	import {fromStore} from 'svelte/store';
 
 	const {
+		state: fState,
 		directives: {floatingDirective, referenceDirective, arrowDirective},
-		stores: {placement$, middlewareData$},
-	} = createFloatingUI({
+	} = callWidgetFactory({
+		factory: createFloatingUI,
 		props: {
 			arrowOptions: {
 				padding: 6,
@@ -24,8 +25,6 @@
 			},
 		},
 	});
-	const placement = fromStore(placement$);
-	const middlewareData = fromStore(middlewareData$);
 
 	let displayPopover = $state(true);
 	const toggleButton = () => {
@@ -42,9 +41,9 @@
 	{#if displayPopover}
 		<div
 			use:floatingDirective
-			data-popper-placement={placement.current}
+			data-popper-placement={fState.placement}
 			class="popover bs-popover-auto position-absolute"
-			class:invisible={middlewareData.current?.hide?.referenceHidden}
+			class:invisible={fState.middlewareData?.hide?.referenceHidden}
 			role="tooltip"
 		>
 			<div class="popover-arrow position-absolute" use:arrowDirective></div>

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

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import {Toast} from '@agnos-ui/svelte-bootstrap/components/toast';
-	import type {ToastProps} from '@agnos-ui/svelte-bootstrap/components/toast';
-	import {writable} from 'svelte/store';
 	import {ToastPositions} from '@agnos-ui/common/samples/toast/toast-positions.enum';
+	import {ToastService} from './toast-service.svelte';
 
 	const positions = Object.entries(ToastPositions).map((entry) => {
 		return {
@@ -12,27 +11,7 @@
 	});
 	let position = $state(ToastPositions.topLeft);
 
-	function createToasts() {
-		const {subscribe, update} = writable(new Map(Object.values(ToastPositions).map((entry) => [entry as string, [] as Partial<ToastProps>[]])));
-		return {
-			subscribe,
-			add: (toast: Partial<ToastProps>) =>
-				update((toasts) => {
-					toasts.get(toast.className!)?.push(toast);
-					return toasts;
-				}),
-			remove: (toast: Partial<ToastProps>) =>
-				update((toasts) => {
-					toasts.set(
-						toast.className!,
-						toasts.get(toast.className!)!.filter((t) => t !== toast),
-					);
-					return toasts;
-				}),
-		};
-	}
-
-	const toasts$ = createToasts();
+	const toastService = new ToastService();
 </script>
 
 <p class="mb-2">To position toast wherever you want you should have a <code>toast-container</code> with a custom position defined by CSS classes.</p>
@@ -47,18 +26,18 @@
 		</select>
 		<button
 			class="btn btn-primary addToast ms-2"
-			onclick={() => toasts$.add({autoHide: true, delay: 3000, className: position, children: 'Simple toast', header: 'I am header'})}
+			onclick={() => toastService.add({autoHide: true, delay: 3000, className: position, children: 'Simple toast', header: 'I am header'})}
 			>Show toast</button
 		>
 	</div>
 </div>
 
 <div class="d-flex position-relative mt-2 w-100" aria-live="polite" aria-atomic="true" style="height: 500px; background-color: gray;">
-	{#each $toasts$.entries() as [position, toasts]}
+	{#each Object.entries(toastService.toasts) as [position, toasts]}
 		<div class={`toast-container p-3 ${position}`}>
 			{#each toasts as toast}
 				{@const {dismissible, animatedOnInit, animated, children, header} = toast}
-				<Toast {dismissible} {animatedOnInit} {animated} {children} {header} onHidden={() => toasts$.remove(toast)} />
+				<Toast {dismissible} {animatedOnInit} {animated} {children} {header} onHidden={() => toastService.remove(toast)} />
 			{/each}
 		</div>
 	{/each}

svelte/demo/src/bootstrap/samples/toast/toast-service.svelte.ts

@@ -0,0 +1,14 @@
+import {ToastPositions} from '@agnos-ui/common/samples/toast/toast-positions.enum';
+import type {ToastProps} from '@agnos-ui/svelte-bootstrap/components/toast';
+
+export class ToastService {
+	// eslint-disable-next-line @typescript-eslint/prefer-readonly
+	#toasts = $state(Object.fromEntries(Object.values(ToastPositions).map((entry) => [entry as string, [] as Partial<ToastProps>[]])));
+
+	get toasts() {
+		return this.#toasts;
+	}
+
+	readonly add = (toast: Partial<ToastProps>) => this.#toasts[toast.className!].push(toast);
+	readonly remove = (toast: Partial<ToastProps>) => this.#toasts[toast.className!].splice(this.#toasts[toast.className!].indexOf(toast), 1);
+}

svelte/demo/src/bootstrap/samples/transition/Collapse.svelte

@@ -4,22 +4,21 @@
 	import '@agnos-ui/common/samples/transition/collapse.scss';
 	import collapseIcon from '@agnos-ui/common/samples/transition/collapseButton.svg?raw';
 	import type {Snippet} from 'svelte';
-	import {fromStore} from 'svelte/store';
+	import {callWidgetFactory} from '@agnos-ui/svelte-bootstrap/config';
 
 	let {headerText, expanded = false, children}: {headerText: string; expanded: boolean; children: Snippet} = $props();
 
 	const {
-		stores: {visible$, hidden$},
+		state,
 		api: {toggle},
 		directives: {directive},
-	} = createTransition({
+	} = callWidgetFactory({
+		factory: createTransition,
 		props: {
 			visible: expanded,
 			transition: collapseVerticalTransition,
 		},
 	});
-	const visible = fromStore(visible$);
-	const hidden = fromStore(hidden$);
 </script>
 
 <div class="card">
@@ -30,15 +29,15 @@
 			onclick={() => toggle()}
 			class="btn toggle-button"
 			aria-controls="collapse-content"
-			aria-expanded={visible.current || undefined}
+			aria-expanded={state.visible || undefined}
 		>
 			{headerText}
-			<span class="ms-1 collapse-icon" class:expanded={visible.current}>
+			<span class="ms-1 collapse-icon" class:expanded={state.visible}>
 				{@html collapseIcon}
 			</span>
 		</button>
 	</div>
-	{#if !hidden.current}
+	{#if !state.hidden}
 		<div id="collapse-content" use:directive>
 			<div class="card-body">
 				{@render children()}

svelte/demo/src/bootstrap/samples/transition/Flip.svelte

@@ -3,13 +3,15 @@
 	import {createSimpleClassTransition} from '@agnos-ui/svelte-bootstrap/services/transitions/simpleClassTransition';
 	import '@agnos-ui/common/samples/transition/flip.scss';
 	import type {Snippet} from 'svelte';
+	import {callWidgetFactory} from '@agnos-ui/svelte-bootstrap/config';
 
 	let {hiddenText, children}: {hiddenText: string; children: Snippet} = $props();
 
 	const {
 		api: {show, hide},
 		directives: {directive},
-	} = createTransition({
+	} = callWidgetFactory({
+		factory: createTransition,
 		props: {
 			visible: false,
 			transition: createSimpleClassTransition({hideClasses: ['hide'], animationPendingHideClasses: ['hide']}),