feat: use /state instead of deprecated /stores

demo/scripts/includeSamples.plugin.ts

@@ -1,6 +1,6 @@
 import type {Plugin} from 'vite';
 import path from 'path';
-import type {Frameworks} from '$lib/stores';
+import type {Frameworks} from '$lib/routing.svelte';
 import {readFile} from 'fs/promises';
 import {existsSync} from 'fs';
 

demo/src/lib/docsearch/Search.svelte

@@ -1,24 +1,21 @@
 <script lang="ts">
-	import {onMount} from 'svelte';
 	import docsearch from '@docsearch/js';
-	import {selectedFramework$} from '$lib/stores';
+	import {routing} from '$lib/routing.svelte';
 
 	function generateUniqueId() {
 		return 'id-' + Math.random().toString(36).slice(2, 11);
 	}
 	let uniqueId = generateUniqueId();
 
-	onMount(() => {
-		selectedFramework$.subscribe((value) => {
-			docsearch({
-				container: `#docsearch-${uniqueId}`,
-				appId: 'B76VWEHQMR',
-				indexName: 'agnosui',
-				apiKey: 'e82efd11bdb692114cb75b90299504b8',
-				searchParameters: {
-					facetFilters: [`${value ? 'tags:' + value : ''}`],
-				},
-			});
+	$effect(() => {
+		docsearch({
+			container: `#docsearch-${uniqueId}`,
+			appId: 'B76VWEHQMR',
+			indexName: 'agnosui',
+			apiKey: 'e82efd11bdb692114cb75b90299504b8',
+			searchParameters: {
+				facetFilters: [`${routing.selectedFramework ? 'tags:' + routing.selectedFramework : ''}`],
+			},
 		});
 	});
 </script>

demo/src/lib/layout/ComponentTypeAlert.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import {Alert} from '@agnos-ui/svelte-bootstrap/components/alert';
 	import biInfoCircleFill from 'bootstrap-icons/icons/info-circle-fill.svg?raw';
-	import {page} from '$app/stores';
+	import {page} from '$app/state';
 	import Svg from './Svg.svelte';
 	import {untrack} from 'svelte';
 
@@ -14,7 +14,7 @@
 	} = $props();
 	let alert: ReturnType<typeof Alert>;
 
-	let componentName = $derived($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;

demo/src/lib/layout/Header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import {pathToRoot$, selectedApiFramework$, selectedPackageType$, selectedTabName$} from '../stores';
-	import {page} from '$app/stores';
+	import {routing} from '../routing.svelte';
+	import {page} from '$app/state';
 	import {getTitle} from '../../app';
 	import Svg from '$lib/layout/Svg.svelte';
 	import angularLogo from '$resources/logo-angular.svg?raw';
@@ -19,10 +19,10 @@
 
 	let {title, pageTitle = '', status = '', cssFramework = ''}: Props = $props();
 
-	let tabs = $derived($page.data.tabs ?? []);
-	let isBlog = $derived($page.route.id?.startsWith('/blog/'));
-	let builtPageTitle = $derived(getTitle(pageTitle || title, isBlog ? '' : $selectedApiFramework$, $selectedPackageType$));
-	let includesFwk = $derived(!!$page.params.framework);
+	let tabs = $derived(page.data.tabs ?? []);
+	let isBlog = $derived(page.route.id?.startsWith('/blog/'));
+	let builtPageTitle = $derived(getTitle(pageTitle || title, isBlog ? '' : routing.selectedApiFramework, routing.selectedPackageType));
+	let includesFwk = $derived(!!page.params.framework);
 </script>
 
 <svelte:head>
@@ -41,16 +41,16 @@
 			{#if status === 'inprogress'}<span class="badge text-bg-warning">In progress</span>{/if}
 			{#if status === 'beta'}<span class="badge text-bg-info">Beta</span>{/if}
 			{#if includesFwk}
-				{#if $selectedApiFramework$ === 'typescript'}<span class="d-block d-md-none p-0"
+				{#if routing.selectedApiFramework === 'typescript'}<span class="d-block d-md-none p-0"
 						><Svg svg={typescriptLogo} className="icon-24 d-flex position-relative" /></span
 					>{/if}
-				{#if $selectedApiFramework$ === 'react'}<span class="d-block d-md-none p-0"
+				{#if routing.selectedApiFramework === 'react'}<span class="d-block d-md-none p-0"
 						><Svg svg={reactLogo} className="icon-24 d-flex position-relative" /></span
 					>{/if}
-				{#if $selectedApiFramework$ === 'angular'}<span class="d-block d-md-none p-0"
+				{#if routing.selectedApiFramework === 'angular'}<span class="d-block d-md-none p-0"
 						><Svg svg={angularLogo} className="icon-24 d-flex position-relative" /></span
 					>{/if}
-				{#if $selectedApiFramework$ === 'svelte'}<span class="d-block d-md-none p-0"
+				{#if routing.selectedApiFramework === 'svelte'}<span class="d-block d-md-none p-0"
 						><Svg svg={svelteLogo} className="icon-24 d-flex position-relative" /></span
 					>{/if}
 			{/if}
@@ -68,10 +68,10 @@
 	{#if tabs.length}
 		<ul class="nav-tabs overflow-x-auto overflow-y-hidden px-4 px-lg-5 d-flex flex-nowrap content-tabset justify-content-start nav" role="tablist">
 			{#each tabs as { title, key, path }}
-				{@const isActive = $selectedTabName$ === key}
+				{@const isActive = routing.selectedTabName === key}
 				<li class="nav-item" role="presentation">
 					<a
-						href={`${$pathToRoot$}docs/${$selectedApiFramework$}${path}`}
+						href={`${routing.pathToRoot}docs/${routing.selectedApiFramework}${path}`}
 						role="tab"
 						class="nav-link au-nav-link-onlightbg"
 						aria-selected={isActive}

demo/src/lib/layout/Published.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import {page} from '$app/stores';
+	import {page} from '$app/state';
 	import Svg from '$lib/layout/Svg.svelte';
 	import twitter from 'bootstrap-icons/icons/twitter-x.svg?raw';
 	import facebook from 'bootstrap-icons/icons/facebook.svg?raw';
@@ -37,11 +37,11 @@
 	let canWebShare = $state(false);
 	let mounted = $state(false);
 
-	let encodedUrl = $derived(encodeURIComponent($page.url.href));
+	let encodedUrl = $derived(encodeURIComponent(page.url.href));
 	let encodedTitle = $derived(encodeURIComponent(title));
 	let formattedDate = $derived(Intl.DateTimeFormat('en-US', {dateStyle: 'medium'}).format(new Date(date)));
 	let webShareData = $derived({
-		url: $page.url.href,
+		url: page.url.href,
 		title,
 	});
 

demo/src/lib/layout/Sample.svelte

@@ -13,7 +13,7 @@
 	import openLink from 'bootstrap-icons/icons/box-arrow-up-right.svg?raw';
 	import codeSvg from 'bootstrap-icons/icons/code.svg?raw';
 	import stackblitz from '$resources/icons/stackblitz.svg?raw';
-	import {pathToRoot$, selectedFramework$} from '../stores';
+	import {routing} from '../routing.svelte';
 	import Lazy from './Lazy.svelte';
 	import Svg from './Svg.svelte';
 	import type {SampleInfo} from './sample';
@@ -73,22 +73,22 @@
 		showCode = $bindable(false),
 	}: Props = $props();
 	let code = $state('');
-	let isPlaceholder = $derived(sample.files[$selectedFramework$].entryPoint === 'placeholder');
+	let isPlaceholder = $derived(sample.files[routing.selectedFramework].entryPoint === 'placeholder');
 	let path = $derived(isPlaceholder ? `placeholder/placeholdersample` : `${sample.componentName}/${sample.sampleName}`.toLowerCase());
-	let files = $derived(Object.keys(sample.files[$selectedFramework$].files));
+	let files = $derived(Object.keys(sample.files[routing.selectedFramework].files));
 	let selectedFileName = $state('');
 	$effect.pre(() => {
-		selectedFileName = sample.files[$selectedFramework$].entryPoint;
+		selectedFileName = sample.files[routing.selectedFramework].entryPoint;
 	});
-	let complementaryUrl = $derived(sample.files[$selectedFramework$].complementaryUrl);
+	let complementaryUrl = $derived(sample.files[routing.selectedFramework].complementaryUrl);
 	$effect.pre(() => {
 		if (showCode) {
-			void sample.files[$selectedFramework$].files[selectedFileName]().then((val) => (code = val));
+			void sample.files[routing.selectedFramework].files[selectedFileName]().then((val) => (code = val));
 		} else {
 			code = '';
 		}
 	});
-	let sampleBaseUrl = $derived(`${$pathToRoot$}${$selectedFramework$}/samples${complementaryUrl}/#/${path}`);
+	let sampleBaseUrl = $derived(`${routing.pathToRoot}${routing.selectedFramework}/samples${complementaryUrl}/#/${path}`);
 	let sampleUrl = $derived(sampleBaseUrl + (urlParameters ? `#${JSON.stringify(urlParameters)}` : ''));
 
 	const {showSpinner$, handlerDirective} = createIframeHandler(height, !noresize);
@@ -118,7 +118,7 @@
 					class="btn btn-sm btn-link m-1 p-0"
 					aria-label="Open example in stackblitz"
 					use:tooltip={{content: 'Edit in Stackblitz'}}
-					onclick={async () => (await import('../stackblitz')).openInStackblitz(sample, $selectedFramework$)}
+					onclick={async () => (await import('../stackblitz')).openInStackblitz(sample, routing.selectedFramework)}
 					><Svg className="icon-24 align-middle" svg={stackblitz} /></button
 				>
 			{/if}
@@ -144,7 +144,12 @@
 			</ul>
 		{/if}
 		<div class="border border-top-0">
-			<Lazy component={() => import('./Code.svelte')} {code} fileName={selectedFileName} language={isPlaceholder ? $selectedFramework$ : undefined}>
+			<Lazy
+				component={() => import('./Code.svelte')}
+				{code}
+				fileName={selectedFileName}
+				language={isPlaceholder ? routing.selectedFramework : undefined}
+			>
 				<div class="spinner-border text-primary-emphasis" role="status">
 					<span class="visually-hidden">Loading...</span>
 				</div>

demo/src/lib/layout/StatusAlert.svelte

@@ -2,7 +2,7 @@
 	import {Alert, type AlertProps} 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 {page} from '$app/state';
 	import Svg from './Svg.svelte';
 	import {untrack} from 'svelte';
 
@@ -22,7 +22,7 @@
 			? 'This component is still under active development. More features will be added in the near future.'
 			: 'This component has all the basic functionalities implemented. More polishing features might be added in the near future.',
 	);
-	let componentName = $derived($page.url.pathname.match(regex)?.[2]);
+	let componentName = $derived(page.url.pathname.match(regex)?.[2]);
 	let issueUrl = $derived(`https://github.com/AmadeusITGroup/AgnosUI/issues?q=is%3Aopen+is%3Aissue+label%3A%22widget%3A+${componentName}%22`);
 	$effect(() => {
 		// eslint-disable-next-line @typescript-eslint/no-unused-expressions

demo/src/lib/layout/sample.ts

@@ -1,4 +1,4 @@
-import type {Frameworks} from '$lib/stores';
+import type {Frameworks} from '$lib/routing.svelte';
 
 export type AsyncFilesSet = Record<string, () => Promise<string>>;
 

demo/src/lib/layout/toc.svelte.ts

@@ -1,6 +1,5 @@
 import {intersectionApi} from '$lib/stores';
-import {navigating as appNavigating} from '$app/stores';
-import {fromStore} from 'svelte/store';
+import {navigating} from '$app/state';
 
 /**
  * Create a directive to facilitate the interception usage in Svelte
@@ -19,13 +18,12 @@ import {fromStore} from 'svelte/store';
  */
 export function createTOC(getElements: (node: HTMLElement) => HTMLElement[]) {
 	let container = $state<HTMLElement>();
-	const navigating = fromStore(appNavigating);
 	function directive(node: HTMLElement) {
 		container = node;
 	}
 
 	$effect(() => {
-		if (!navigating.current) {
+		if (!navigating.to) {
 			intersectionApi.patch({
 				elements: container ? getElements(container) : [],
 			});

demo/src/lib/markdown/renderers/MdCode.svelte

@@ -2,7 +2,7 @@
 	import Code from '$lib/layout/Code.svelte';
 	import Sample from '$lib/layout/Sample.svelte';
 	import type {SampleInfo} from '$lib/layout/sample';
-	import {selectedFramework$} from '$lib/stores';
+	import {routing} from '$lib/routing.svelte';
 	import samples from '../samples';
 
 	interface Props {
@@ -27,7 +27,7 @@
 	$effect(() => {
 		if (lang !== 'sample' && text.trim().match(/^\{[a-z-]+\}$/) && extensions.has(lang)) {
 			const codeKey = text.trim().slice(1, -1);
-			void import(`../../../../../docs/code/${codeKey}/${codeKey}-${$selectedFramework$}.${extensions.get(lang)}?raw`).then(
+			void import(`../../../../../docs/code/${codeKey}/${codeKey}-${routing.selectedFramework}.${extensions.get(lang)}?raw`).then(
 				(val) => (code = val.default),
 			);
 		} else {

demo/src/lib/markdown/renderers/MdLink.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import {page} from '$app/stores';
+	import {page} from '$app/state';
 	import type {Page} from '@sveltejs/kit';
 	import type {Snippet} from 'svelte';
+	import {routing} from '$lib/routing.svelte';
 
 	interface Props {
 		href?: string;
@@ -16,11 +17,11 @@
 	const docsRegExp = /\/docs\//g;
 	const mdEndRegex = /\/\d{2}-([a-zA-Z-]*)\.md$/g;
 
-	function computedAppliedHref(inputHref: string, page: Page<Record<string, string>>) {
+	function computedAppliedHref(inputHref: string, page: Page<Record<string, string>>, selectedFwk: string) {
 		if (inputHref.startsWith('../')) {
 			return new URL(
 				inputHref
-					.replace(docsRegExp, '/docs/angular/')
+					.replace(docsRegExp, `/docs/${selectedFwk}/`)
 					.replace(categoryRegex, (_m, gr1) => '/' + gr1.toLowerCase())
 					.replace(mdEndRegex, (_m, gr1) => '/' + gr1.toLowerCase()),
 				page.url.href,
@@ -29,7 +30,7 @@
 			return inputHref.match(validMdRegex)?.[1]?.toLowerCase() ?? href;
 		}
 	}
-	let appliedHref = $derived(computedAppliedHref(href, $page));
+	let appliedHref = $derived(computedAppliedHref(href, page, routing.selectedApiFramework));
 </script>
 
 <a href={appliedHref} {title}>{@render children()}</a>