feat: migration of demo to svelte 5 (#961)

* feat: migration of demo to svelte 5 * feat: real svelte versions
AmadeusITGroup · Oct 23, 2024 · e8ad145 · e8ad145
1 parent 916ee07
commit e8ad145
Show file tree

Hide file tree

Showing 97 changed files with 1,220 additions and 718 deletions.
diff --git a/demo/package.json b/demo/package.json
@@ -173,17 +173,17 @@
 	"devDependencies": {
 		"@stackblitz/sdk": "^1.11.0",
 		"@sveltejs/adapter-static": "^3.0.5",
-		"@sveltejs/kit": "^2.6.1",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.7",
+		"@sveltejs/kit": "^2.7.2",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/dom-view-transitions": "^1.0.5",
 		"bootstrap-icons": "^1.11.3",
 		"compare-versions": "^6.1.1",
 		"front-matter": "^4.0.2",
+		"marked": "^14.1.3",
 		"prettier-plugin-svelte": "^3.2.7",
 		"shiki": "^1.21.0",
-		"svelte": "^5.0.0-next.260",
+		"svelte": "^5.0.5",
 		"svelte-check": "^4.0.4",
-		"svelte-markdown": "^0.4.1",
 		"tsx": "^4.19.1"
 	}
 }
diff --git a/demo/src/app.ts b/demo/src/app.ts
@@ -1,6 +1,3 @@
-import {intersectionApi} from '$lib/stores';
-import {afterUpdate} from 'svelte';
-
 const textToLinesRegex = /\r/g;
 
 export function getTitle(title: string, frameworkName = '', packageType = '') {
@@ -21,33 +18,3 @@ const slotRegExp = /^Slot/;
 export function normalizedType(type: string) {
 	return arrowFunctionRegExp.test(type) || functionRegExp.test(type) ? 'function' : slotRegExp.test(type) ? 'slot' : type;
 }
-
-/**
- * Create a directive to facilitate the interception usage in Svelte
- * @param getElements function that will retrieve the elements to observe
- * @returns the directive to be used in the main container to observe
- *
- * @example
- *
- * ```typescript
- * const tocDirective = createTOC((node) => [...node.querySelectorAll('section')] as HTMLElement[]);
- * ```
- *
- * ```html
- * <div use:tocDirective>...</div>
- * ```
- */
-export function createTOC(getElements: (node: HTMLElement) => HTMLElement[]) {
-	let container: HTMLElement;
-	function directive(node: HTMLElement) {
-		container = node;
-	}
-
-	afterUpdate(() => {
-		intersectionApi.patch({
-			elements: container ? getElements(container) : [],
-		});
-	});
-
-	return directive;
-}
diff --git a/demo/src/lib/api/render/ApiCode.svelte b/demo/src/lib/api/render/ApiCode.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
 	import Code from '$lib/layout/Code.svelte';
-	export let lang: string;
-	export let text: string;
+
+	let {
+		lang,
+		text,
+	}: {
+		lang: string;
+		text: string;
+	} = $props();
 </script>
 
 <Code language={lang.trim() || 'text'} code={text.trim()} noCopy />
diff --git a/demo/src/lib/api/render/ApiHeading.svelte b/demo/src/lib/api/render/ApiHeading.svelte
@@ -11,10 +11,14 @@
 	import Svg from '$lib/layout/Svg.svelte';
 	import {getContext} from 'svelte';
 
-	export let depth: 1 | 2 | 3 | 4 | 5 | 6;
-	export let text: string;
-	export let headerClassName: string = '';
-	export let raw: string;
+	interface Props {
+		depth: 1 | 2 | 3 | 4 | 5 | 6;
+		text: string;
+		headerClassName: string;
+		raw: string;
+	}
+
+	let {depth, text, headerClassName = '', raw}: Props = $props();
 	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
 	raw;
 

diff --git a/demo/src/lib/api/render/ApiParagraph.svelte b/demo/src/lib/api/render/ApiParagraph.svelte
@@ -1,10 +1,10 @@
 <script>
-	export let raw;
+	/** @type {{raw: any, text: any, children: import('svelte').Snippet}} */
+	let {raw, text, children} = $props();
 	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
 	raw;
-	export let text;
 	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
 	text;
 </script>
 
-<p><slot /></p>
+<p>{@render children()}</p>
diff --git a/demo/src/lib/api/render/ApiSection.svelte b/demo/src/lib/api/render/ApiSection.svelte
@@ -1,5 +1,6 @@
 <script>
-	export let depth;
+	/** @type {{depth: number, children: import('svelte').Snippet}} */
+	let {depth, children} = $props();
 </script>
 
-<section class={depth === 2 ? 'my-4' : 'my-3 mx-3'}><slot /></section>
+<section class={depth === 2 ? 'my-4' : 'my-3 mx-3'}>{@render children()}</section>
diff --git a/demo/src/lib/layout/Code.svelte b/demo/src/lib/layout/Code.svelte
@@ -1,39 +1,48 @@
 <script lang="ts">
 	import highlighter, {languageFromFileName, langs} from './highlight';
-	import {tooltip} from '$lib/tooltip/tooltip';
+	import {tooltip} from '$lib/tooltip/tooltip-directive.svelte';
 	import clipboard from 'bootstrap-icons/icons/clipboard.svg?raw';
 	import clipboardCheck from 'bootstrap-icons/icons/clipboard-check.svg?raw';
 	import Svg from './Svg.svelte';
-	import {writable} from '@amadeus-it-group/tansu';
 
-	export let code: string;
-	export let fileName: string | undefined = undefined;
-	export let language: string | undefined = undefined;
-	export let className: string = '';
-	export let noCopy = false;
+	interface Props {
+		code: string;
+		fileName?: string;
+		language?: string;
+		className?: string;
+		noCopy?: boolean;
+	}
+
+	let {code, fileName, language, className = '', noCopy = false}: Props = $props();
 
-	const copied = writable(false);
+	let copied = $state(false);
 	async function copyCode() {
 		await navigator.clipboard.writeText(code);
-		copied.set(true);
+		copied = true;
 	}
-	let showButton = false;
-	$: if (!showButton) copied.set(false);
+	let showButton = $state(false);
+	$effect(() => {
+		if (!showButton) {
+			copied = false;
+		}
+	});
 
-	$: appliedLanguage = language ?? languageFromFileName(fileName);
-	$: formattedCode = code
-		? highlighter.codeToHtml(code, {
-				lang: appliedLanguage && langs.includes(appliedLanguage) ? appliedLanguage : 'text',
-				themes: {light: 'light-plus', dark: 'dark-plus'},
-			})
-		: null;
+	let appliedLanguage = $derived(language ?? languageFromFileName(fileName));
+	let formattedCode = $derived(
+		code
+			? highlighter.codeToHtml(code, {
+					lang: appliedLanguage && langs.includes(appliedLanguage) ? appliedLanguage : 'text',
+					themes: {light: 'light-plus', dark: 'dark-plus'},
+				})
+			: null,
+	);
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class={`bg-light-subtle doc p-0 d-flex ${className}`}
-	on:mouseenter={() => (showButton = !noCopy)}
-	on:mouseleave={() => (showButton = false)}
+	onmouseenter={() => (showButton = !noCopy)}
+	onmouseleave={() => (showButton = false)}
 	style:min-height={noCopy ? 'unset' : '60px'}
 >
 	{#if formattedCode != null}
@@ -43,8 +52,8 @@
 		<button
 			class="btn btn-secondary copy d-flex align-items-center justify-content-center"
 			aria-label="copy to clipboard"
-			use:tooltip={{content: $copied ? 'Copied !' : 'Copy to clipboard'}}
-			on:click={copyCode}><Svg className={`align-middle icon-20`} svg={$copied ? clipboardCheck : clipboard} /></button
+			use:tooltip={{content: copied ? 'Copied !' : 'Copy to clipboard'}}
+			onclick={copyCode}><Svg className={`align-middle icon-20`} svg={copied ? clipboardCheck : clipboard} /></button
 		>
 	{/if}
 </div>

diff --git a/demo/src/lib/layout/ComponentTypeAlert.svelte b/demo/src/lib/layout/ComponentTypeAlert.svelte
@@ -1,33 +1,33 @@
 <script lang="ts">
-	import {Alert, type AlertProps} from '@agnos-ui/svelte-bootstrap/components/alert';
+	import {Alert} from '@agnos-ui/svelte-bootstrap/components/alert';
 	import biInfoCircleFill from 'bootstrap-icons/icons/info-circle-fill.svg?raw';
-	import biExclamationTriangleFill from 'bootstrap-icons/icons/exclamation-triangle-fill.svg?raw';
 	import {page} from '$app/stores';
 	import Svg from './Svg.svelte';
+	import {untrack} from 'svelte';
 
 	const regex = /\/(components|services)\/([^/]+)/;
-	const typeIcon: Record<string, string> = {
-		info: biInfoCircleFill,
-		warning: biExclamationTriangleFill,
-	};
 
-	export let componentType: string;
+	let {
+		componentType,
+	}: {
+		componentType: string;
+	} = $props();
 	let alert: Alert;
 
-	$: type = 'info' as AlertProps['type'];
-	$: componentName = $page.url.pathname.match(regex)?.[2];
-	$: {
+	let componentName = $derived($page.url.pathname.match(regex)?.[2]);
+	$effect(() => {
 		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
 		componentName;
-		alert?.api.open();
-	}
+		// FIXME untrack was required to fix an unexpected bug, see https://github.com/AmadeusITGroup/AgnosUI/issues/964
+		untrack(() => alert!.api.open());
+	});
 </script>
 
-<Alert bind:this={alert} {type} className="p-0 border-0 border-start border-5 border-{type}">
-	<div class="alert-container p-3 border border-{type} rounded-end">
+<Alert bind:this={alert} type={'info'} className="p-0 border-0 border-start border-5 border-info">
+	<div class="alert-container p-3 border border-info rounded-end">
 		<div class="d-flex align-items-center">
 			<span class="d-flex me-2">
-				<Svg svg={typeIcon[type]} className="icon-16" />
+				<Svg svg={biInfoCircleFill} className="icon-16" />
 			</span>
 			<span class="me-4">
 				This component is a <strong>{componentType}</strong> component and can be used <strong>without</strong> the Bootstrap CSS.

diff --git a/demo/src/lib/layout/Dropdown.svelte b/demo/src/lib/layout/Dropdown.svelte
@@ -1,49 +1,62 @@
 <script lang="ts">
-	import {writable} from '@amadeus-it-group/tansu';
 	import {createHasFocus} from '@agnos-ui/svelte-bootstrap/services/focustrack';
 	import type {DropdownItem} from './dropdown';
+	import {fromStore} from 'svelte/store';
+	import type {Snippet} from 'svelte';
 
-	const open$ = writable(false);
+	let open = $state(false);
 
 	type Item = $$Generic<DropdownItem>;
 
 	const {hasFocus$, directive} = createHasFocus();
-	$: $open$ = $hasFocus$;
+	const focus = fromStore(hasFocus$);
+	$effect(() => {
+		open = focus.current;
+	});
 
 	function giveFocus(el: HTMLAnchorElement | HTMLButtonElement, index: number) {
 		if (index === 0) {
 			el.focus();
 		}
 	}
 
-	const toggle = () => open$.update((val) => !val);
+	const toggle = () => (open = !open);
 
-	export let ariaLabel: string;
-	export let btnClass: string = '';
-	export let items: Item[];
-	export let placement: 'start' | 'end' = 'start';
-	export let dropdownClass: string = '';
+	interface Props {
+		ariaLabel: string;
+		btnClass: string;
+		items: Item[];
+		placement?: 'start' | 'end';
+		dropdownClass?: string;
+		buttonSnip: Snippet;
+		itemSnip: Snippet<[Item, number]>;
+	}
+
+	let {ariaLabel, btnClass = '', items, placement = 'start', dropdownClass = '', buttonSnip, itemSnip}: Props = $props();
 
 	const onpointerDown = (event: PointerEvent) => {
 		event.preventDefault();
 		(event.target as HTMLElement).focus();
 	};
+	const onmousedown = (event: MouseEvent) => {
+		event.preventDefault();
+	};
 </script>
 
 <div class="dropdown {dropdownClass}">
 	<button
 		class="btn dropdown-toggle align-items-center d-flex {btnClass}"
 		aria-label={ariaLabel}
-		on:mousedown|preventDefault
-		on:click={toggle}
+		{onmousedown}
+		onclick={toggle}
 		type="button"
-		aria-expanded={$open$}
+		aria-expanded={open}
 	>
-		<slot name="button" />
+		{@render buttonSnip()}
 	</button>
-	{#if $open$}
-		<div use:directive class="dropdown-menu dropdown-menu-{placement} position-absolute" class:show={$open$} data-bs-popper="absolute">
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
+	{#if open}
+		<div use:directive class="dropdown-menu dropdown-menu-{placement} position-absolute" class:show={open} data-bs-popper="absolute">
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			{#each items as item, index (item.id)}
 				<svelte:element
 					this={item.tag}
@@ -52,15 +65,15 @@
 					href={item.tag === 'a' ? item.href : undefined}
 					class:active={item.isSelected}
 					aria-current={item.isSelected ? 'page' : false}
-					on:pointerdown={onpointerDown}
-					on:click={() => {
+					onpointerdown={onpointerDown}
+					onclick={() => {
 						if (item.tag === 'button') {
 							item.onclick();
 						}
 						toggle();
 					}}
 				>
-					<slot name="item" {item} {index} />
+					{@render itemSnip(item, index)}
 				</svelte:element>
 			{/each}
 		</div>

diff --git a/demo/src/lib/layout/Header.svelte b/demo/src/lib/layout/Header.svelte
@@ -10,14 +10,18 @@
 	import daisyUILogo from '$resources/logo-daisyUI.svg?raw';
 	import bootstrapLogo from '$resources/bootstrap.svg?raw';
 
-	export let title: string;
-	export let pageTitle = '';
-	export let status: string = '';
-	export let cssFramework = '';
+	interface Props {
+		title: string;
+		pageTitle?: string;
+		status?: string;
+		cssFramework?: string;
+	}
+
+	let {title, pageTitle = '', status = '', cssFramework = ''}: Props = $props();
 
-	$: tabs = $page.data.tabs ?? [];
-	$: builtPageTitle = getTitle(pageTitle || title, $selectedApiFramework$, $selectedPackageType$);
-	$: includesFwk = !!$page.params.framework;
+	let tabs = $derived($page.data.tabs ?? []);
+	let builtPageTitle = $derived(getTitle(pageTitle || title, $selectedApiFramework$, $selectedPackageType$));
+	let includesFwk = $derived(!!$page.params.framework);
 </script>
 
 <svelte:head>

diff --git a/demo/src/lib/layout/Heading.svelte b/demo/src/lib/layout/Heading.svelte
@@ -3,10 +3,14 @@
 	import Svg from './Svg.svelte';
 	import link from 'bootstrap-icons/icons/link-45deg.svg?raw';
 
-	export let depth: 1 | 2 | 3 | 4 | 5 | 6;
-	export let text: string;
-	export let id: string = text.toLowerCase().replace(/\s/g, '-').trim();
-	export let headerClassName: string = '';
+	interface Props {
+		depth: 1 | 2 | 3 | 4 | 5 | 6;
+		text: string;
+		id?: string;
+		headerClassName?: string;
+	}
+
+	let {depth, text, id = text.toLowerCase().replace(/\s/g, '-').trim(), headerClassName = ''}: Props = $props();
 </script>
 
 {#if depth > 1}