Skip to content

Commit 1a1a2d3

Browse files
quentinderoubaixquentinderoubaix
committed
feat: use /state instead of deprecated /stores
1 parent 863721b commit 1a1a2d3

26 files changed

Lines changed: 309 additions & 237 deletions

‎demo/scripts/includeSamples.plugin.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type {Plugin} from 'vite';
22
import path from 'path';
3-
import type {Frameworks} from '$lib/stores';
3+
import type {Frameworks} from '$lib/routing.svelte';
44
import {readFile} from 'fs/promises';
55
import {existsSync} from 'fs';
66

‎demo/src/lib/docsearch/Search.svelte‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
<script lang="ts">
2-
import {onMount} from 'svelte';
32
import docsearch from '@docsearch/js';
4-
import {selectedFramework$} from '$lib/stores';
3+
import {routing} from '$lib/routing.svelte';
54
65
function generateUniqueId() {
76
return 'id-' + Math.random().toString(36).slice(2, 11);
87
}
98
let uniqueId = generateUniqueId();
109
11-
onMount(() => {
12-
selectedFramework$.subscribe((value) => {
13-
docsearch({
14-
container: `#docsearch-${uniqueId}`,
15-
appId: 'B76VWEHQMR',
16-
indexName: 'agnosui',
17-
apiKey: 'e82efd11bdb692114cb75b90299504b8',
18-
searchParameters: {
19-
facetFilters: [`${value ? 'tags:' + value : ''}`],
20-
},
21-
});
10+
$effect(() => {
11+
docsearch({
12+
container: `#docsearch-${uniqueId}`,
13+
appId: 'B76VWEHQMR',
14+
indexName: 'agnosui',
15+
apiKey: 'e82efd11bdb692114cb75b90299504b8',
16+
searchParameters: {
17+
facetFilters: [`${routing.selectedFramework ? 'tags:' + routing.selectedFramework : ''}`],
18+
},
2219
});
2320
});
2421
</script>

‎demo/src/lib/layout/ComponentTypeAlert.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
import {Alert} from '@agnos-ui/svelte-bootstrap/components/alert';
33
import biInfoCircleFill from 'bootstrap-icons/icons/info-circle-fill.svg?raw';
4-
import {page} from '$app/stores';
4+
import {page} from '$app/state';
55
import Svg from './Svg.svelte';
66
import {untrack} from 'svelte';
77
@@ -14,7 +14,7 @@
1414
} = $props();
1515
let alert: ReturnType<typeof Alert>;
1616
17-
let componentName = $derived($page.url.pathname.match(regex)?.[2]);
17+
let componentName = $derived(page.url.pathname.match(regex)?.[2]);
1818
$effect(() => {
1919
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
2020
componentName;

‎demo/src/lib/layout/Header.svelte‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
2-
import {pathToRoot$, selectedApiFramework$, selectedPackageType$, selectedTabName$} from '../stores';
3-
import {page} from '$app/stores';
2+
import {routing} from '../routing.svelte';
3+
import {page} from '$app/state';
44
import {getTitle} from '../../app';
55
import Svg from '$lib/layout/Svg.svelte';
66
import angularLogo from '$resources/logo-angular.svg?raw';
@@ -19,10 +19,10 @@
1919
2020
let {title, pageTitle = '', status = '', cssFramework = ''}: Props = $props();
2121
22-
let tabs = $derived($page.data.tabs ?? []);
23-
let isBlog = $derived($page.route.id?.startsWith('/blog/'));
24-
let builtPageTitle = $derived(getTitle(pageTitle || title, isBlog ? '' : $selectedApiFramework$, $selectedPackageType$));
25-
let includesFwk = $derived(!!$page.params.framework);
22+
let tabs = $derived(page.data.tabs ?? []);
23+
let isBlog = $derived(page.route.id?.startsWith('/blog/'));
24+
let builtPageTitle = $derived(getTitle(pageTitle || title, isBlog ? '' : routing.selectedApiFramework, routing.selectedPackageType));
25+
let includesFwk = $derived(!!page.params.framework);
2626
</script>
2727

2828
<svelte:head>
@@ -41,16 +41,16 @@
4141
{#if status === 'inprogress'}<span class="badge text-bg-warning">In progress</span>{/if}
4242
{#if status === 'beta'}<span class="badge text-bg-info">Beta</span>{/if}
4343
{#if includesFwk}
44-
{#if $selectedApiFramework$ === 'typescript'}<span class="d-block d-md-none p-0"
44+
{#if routing.selectedApiFramework === 'typescript'}<span class="d-block d-md-none p-0"
4545
><Svg svg={typescriptLogo} className="icon-24 d-flex position-relative" /></span
4646
>{/if}
47-
{#if $selectedApiFramework$ === 'react'}<span class="d-block d-md-none p-0"
47+
{#if routing.selectedApiFramework === 'react'}<span class="d-block d-md-none p-0"
4848
><Svg svg={reactLogo} className="icon-24 d-flex position-relative" /></span
4949
>{/if}
50-
{#if $selectedApiFramework$ === 'angular'}<span class="d-block d-md-none p-0"
50+
{#if routing.selectedApiFramework === 'angular'}<span class="d-block d-md-none p-0"
5151
><Svg svg={angularLogo} className="icon-24 d-flex position-relative" /></span
5252
>{/if}
53-
{#if $selectedApiFramework$ === 'svelte'}<span class="d-block d-md-none p-0"
53+
{#if routing.selectedApiFramework === 'svelte'}<span class="d-block d-md-none p-0"
5454
><Svg svg={svelteLogo} className="icon-24 d-flex position-relative" /></span
5555
>{/if}
5656
{/if}
@@ -68,10 +68,10 @@
6868
{#if tabs.length}
6969
<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">
7070
{#each tabs as { title, key, path }}
71-
{@const isActive = $selectedTabName$ === key}
71+
{@const isActive = routing.selectedTabName === key}
7272
<li class="nav-item" role="presentation">
7373
<a
74-
href={`${$pathToRoot$}docs/${$selectedApiFramework$}${path}`}
74+
href={`${routing.pathToRoot}docs/${routing.selectedApiFramework}${path}`}
7575
role="tab"
7676
class="nav-link au-nav-link-onlightbg"
7777
aria-selected={isActive}

‎demo/src/lib/layout/Published.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import {page} from '$app/stores';
2+
import {page} from '$app/state';
33
import Svg from '$lib/layout/Svg.svelte';
44
import twitter from 'bootstrap-icons/icons/twitter-x.svg?raw';
55
import facebook from 'bootstrap-icons/icons/facebook.svg?raw';
@@ -37,11 +37,11 @@
3737
let canWebShare = $state(false);
3838
let mounted = $state(false);
3939
40-
let encodedUrl = $derived(encodeURIComponent($page.url.href));
40+
let encodedUrl = $derived(encodeURIComponent(page.url.href));
4141
let encodedTitle = $derived(encodeURIComponent(title));
4242
let formattedDate = $derived(Intl.DateTimeFormat('en-US', {dateStyle: 'medium'}).format(new Date(date)));
4343
let webShareData = $derived({
44-
url: $page.url.href,
44+
url: page.url.href,
4545
title,
4646
});
4747

‎demo/src/lib/layout/Sample.svelte‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
import openLink from 'bootstrap-icons/icons/box-arrow-up-right.svg?raw';
1414
import codeSvg from 'bootstrap-icons/icons/code.svg?raw';
1515
import stackblitz from '$resources/icons/stackblitz.svg?raw';
16-
import {pathToRoot$, selectedFramework$} from '../stores';
16+
import {routing} from '../routing.svelte';
1717
import Lazy from './Lazy.svelte';
1818
import Svg from './Svg.svelte';
1919
import type {SampleInfo} from './sample';
@@ -73,22 +73,22 @@
7373
showCode = $bindable(false),
7474
}: Props = $props();
7575
let code = $state('');
76-
let isPlaceholder = $derived(sample.files[$selectedFramework$].entryPoint === 'placeholder');
76+
let isPlaceholder = $derived(sample.files[routing.selectedFramework].entryPoint === 'placeholder');
7777
let path = $derived(isPlaceholder ? `placeholder/placeholdersample` : `${sample.componentName}/${sample.sampleName}`.toLowerCase());
78-
let files = $derived(Object.keys(sample.files[$selectedFramework$].files));
78+
let files = $derived(Object.keys(sample.files[routing.selectedFramework].files));
7979
let selectedFileName = $state('');
8080
$effect.pre(() => {
81-
selectedFileName = sample.files[$selectedFramework$].entryPoint;
81+
selectedFileName = sample.files[routing.selectedFramework].entryPoint;
8282
});
83-
let complementaryUrl = $derived(sample.files[$selectedFramework$].complementaryUrl);
83+
let complementaryUrl = $derived(sample.files[routing.selectedFramework].complementaryUrl);
8484
$effect.pre(() => {
8585
if (showCode) {
86-
void sample.files[$selectedFramework$].files[selectedFileName]().then((val) => (code = val));
86+
void sample.files[routing.selectedFramework].files[selectedFileName]().then((val) => (code = val));
8787
} else {
8888
code = '';
8989
}
9090
});
91-
let sampleBaseUrl = $derived(`${$pathToRoot$}${$selectedFramework$}/samples${complementaryUrl}/#/${path}`);
91+
let sampleBaseUrl = $derived(`${routing.pathToRoot}${routing.selectedFramework}/samples${complementaryUrl}/#/${path}`);
9292
let sampleUrl = $derived(sampleBaseUrl + (urlParameters ? `#${JSON.stringify(urlParameters)}` : ''));
9393
9494
const {showSpinner$, handlerDirective} = createIframeHandler(height, !noresize);
@@ -118,7 +118,7 @@
118118
class="btn btn-sm btn-link m-1 p-0"
119119
aria-label="Open example in stackblitz"
120120
use:tooltip={{content: 'Edit in Stackblitz'}}
121-
onclick={async () => (await import('../stackblitz')).openInStackblitz(sample, $selectedFramework$)}
121+
onclick={async () => (await import('../stackblitz')).openInStackblitz(sample, routing.selectedFramework)}
122122
><Svg className="icon-24 align-middle" svg={stackblitz} /></button
123123
>
124124
{/if}
@@ -144,7 +144,12 @@
144144
</ul>
145145
{/if}
146146
<div class="border border-top-0">
147-
<Lazy component={() => import('./Code.svelte')} {code} fileName={selectedFileName} language={isPlaceholder ? $selectedFramework$ : undefined}>
147+
<Lazy
148+
component={() => import('./Code.svelte')}
149+
{code}
150+
fileName={selectedFileName}
151+
language={isPlaceholder ? routing.selectedFramework : undefined}
152+
>
148153
<div class="spinner-border text-primary-emphasis" role="status">
149154
<span class="visually-hidden">Loading...</span>
150155
</div>

‎demo/src/lib/layout/StatusAlert.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import {Alert, type AlertProps} from '@agnos-ui/svelte-bootstrap/components/alert';
33
import biInfoCircleFill from 'bootstrap-icons/icons/info-circle-fill.svg?raw';
44
import biExclamationTriangleFill from 'bootstrap-icons/icons/exclamation-triangle-fill.svg?raw';
5-
import {page} from '$app/stores';
5+
import {page} from '$app/state';
66
import Svg from './Svg.svelte';
77
import {untrack} from 'svelte';
88
@@ -22,7 +22,7 @@
2222
? 'This component is still under active development. More features will be added in the near future.'
2323
: 'This component has all the basic functionalities implemented. More polishing features might be added in the near future.',
2424
);
25-
let componentName = $derived($page.url.pathname.match(regex)?.[2]);
25+
let componentName = $derived(page.url.pathname.match(regex)?.[2]);
2626
let issueUrl = $derived(`https://github.com/AmadeusITGroup/AgnosUI/issues?q=is%3Aopen+is%3Aissue+label%3A%22widget%3A+${componentName}%22`);
2727
$effect(() => {
2828
// eslint-disable-next-line @typescript-eslint/no-unused-expressions

‎demo/src/lib/layout/sample.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type {Frameworks} from '$lib/stores';
1+
import type {Frameworks} from '$lib/routing.svelte';
22

33
export type AsyncFilesSet = Record<string, () => Promise<string>>;
44

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {intersectionApi} from '$lib/stores';
2-
import {navigating as appNavigating} from '$app/stores';
3-
import {fromStore} from 'svelte/store';
2+
import {navigating} from '$app/state';
43

54
/**
65
* Create a directive to facilitate the interception usage in Svelte
@@ -19,13 +18,12 @@ import {fromStore} from 'svelte/store';
1918
*/
2019
export function createTOC(getElements: (node: HTMLElement) => HTMLElement[]) {
2120
let container = $state<HTMLElement>();
22-
const navigating = fromStore(appNavigating);
2321
function directive(node: HTMLElement) {
2422
container = node;
2523
}
2624

2725
$effect(() => {
28-
if (!navigating.current) {
26+
if (!navigating.to) {
2927
intersectionApi.patch({
3028
elements: container ? getElements(container) : [],
3129
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import Code from '$lib/layout/Code.svelte';
33
import Sample from '$lib/layout/Sample.svelte';
44
import type {SampleInfo} from '$lib/layout/sample';
5-
import {selectedFramework$} from '$lib/stores';
5+
import {routing} from '$lib/routing.svelte';
66
import samples from '../samples';
77
88
interface Props {
@@ -27,7 +27,7 @@
2727
$effect(() => {
2828
if (lang !== 'sample' && text.trim().match(/^\{[a-z-]+\}$/) && extensions.has(lang)) {
2929
const codeKey = text.trim().slice(1, -1);
30-
void import(`../../../../../docs/code/${codeKey}/${codeKey}-${$selectedFramework$}.${extensions.get(lang)}?raw`).then(
30+
void import(`../../../../../docs/code/${codeKey}/${codeKey}-${routing.selectedFramework}.${extensions.get(lang)}?raw`).then(
3131
(val) => (code = val.default),
3232
);
3333
} else {

0 commit comments

Comments
 (0)