Skip to content

Commit 2a1c0da

Browse files
quentinderoubaixquentinderoubaix
authored
feat: use /state instead of deprecated /stores (#1084)
1 parent 8cfb531 commit 2a1c0da

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+333
-306
lines changed

‎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,25 +1,22 @@
11
<script lang="ts">
2-
import {onMount} from 'svelte';
32
import docsearch from '@docsearch/js';
43
import '@docsearch/css';
5-
import {selectedFramework$} from '$lib/stores';
4+
import {routing} from '$lib/routing.svelte';
65
76
function generateUniqueId() {
87
return 'id-' + Math.random().toString(36).slice(2, 11);
98
}
109
let uniqueId = generateUniqueId();
1110
12-
onMount(() => {
13-
selectedFramework$.subscribe((value) => {
14-
docsearch({
15-
container: `#docsearch-${uniqueId}`,
16-
appId: 'B76VWEHQMR',
17-
indexName: 'agnosui',
18-
apiKey: 'e82efd11bdb692114cb75b90299504b8',
19-
searchParameters: {
20-
facetFilters: [`${value ? 'tags:' + value : ''}`],
21-
},
22-
});
11+
$effect(() => {
12+
docsearch({
13+
container: `#docsearch-${uniqueId}`,
14+
appId: 'B76VWEHQMR',
15+
indexName: 'agnosui',
16+
apiKey: 'e82efd11bdb692114cb75b90299504b8',
17+
searchParameters: {
18+
facetFilters: [`${routing.selectedFramework ? 'tags:' + routing.selectedFramework : ''}`],
19+
},
2320
});
2421
});
2522
</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 '../../../../svelte/demo/src/daisyui/samples/alert/Alert.svelte';
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
77
const regex = /\/(components|services)\/([^/]+)/;
@@ -13,7 +13,7 @@
1313
} = $props();
1414
let visible = $state(true);
1515
16-
let componentName = $derived($page.url.pathname.match(regex)?.[2]);
16+
let componentName = $derived(page.url.pathname.match(regex)?.[2]);
1717
$effect(() => {
1818
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
1919
componentName;

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

Lines changed: 15 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>
@@ -45,14 +45,17 @@
4545
{#if status === 'inprogress'}<span class="badge badge-warning">In progress</span>{/if}
4646
{#if status === 'beta'}<span class="badge badge-info">Beta</span>{/if}
4747
{#if includesFwk}
48-
{#if $selectedApiFramework$ === 'typescript'}<span class="block md:hidden p-0"
48+
{#if routing.selectedApiFramework === 'typescript'}<span class="block md:hidden p-0"
4949
><Svg svg={typescriptLogo} className="icon-24 flex relative" /></span
5050
>{/if}
51-
{#if $selectedApiFramework$ === 'react'}<span class="block md:hidden p-0"><Svg svg={reactLogo} className="icon-24 flex relative" /></span
51+
{#if routing.selectedApiFramework === 'react'}<span class="block md:hidden p-0"
52+
><Svg svg={reactLogo} className="icon-24 flex relative" /></span
5253
>{/if}
53-
{#if $selectedApiFramework$ === 'angular'}<span class="block md:hidden p-0"><Svg svg={angularLogo} className="icon-24 flex relative" /></span
54+
{#if routing.selectedApiFramework === 'angular'}<span class="block md:hidden p-0"
55+
><Svg svg={angularLogo} className="icon-24 flex relative" /></span
5456
>{/if}
55-
{#if $selectedApiFramework$ === 'svelte'}<span class="block md:hidden p-0"><Svg svg={svelteLogo} className="icon-24 flex relative" /></span
57+
{#if routing.selectedApiFramework === 'svelte'}<span class="block md:hidden p-0"
58+
><Svg svg={svelteLogo} className="icon-24 flex relative" /></span
5659
>{/if}
5760
{/if}
5861
{#if cssFramework === 'bootstrap'}<span class="block md:hidden p-0"
@@ -69,10 +72,10 @@
6972
<!-- overflow-x-auto overflow-y-hidden px-4 px-lg-5 flex flex-nowrap content-tabset justify-content-start nav -->
7073
<div class="tabs tabs-lift content-tabset px-8 lg:px-12" role="tablist">
7174
{#each tabs as { title, key, path }}
72-
{@const isActive = $selectedTabName$ === key}
75+
{@const isActive = routing.selectedTabName === key}
7376
<!-- <li class="nav-item" role="presentation"> -->
7477
<a
75-
href={`${$pathToRoot$}docs/${$selectedApiFramework$}${path}`}
78+
href={`${routing.pathToRoot}docs/${routing.selectedApiFramework}${path}`}
7679
role="tab"
7780
class={['tab', {'tab-darkonlightbg': !isActive}, {active: isActive}]}
7881
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
@@ -12,7 +12,7 @@
1212
import openLink from 'bootstrap-icons/icons/box-arrow-up-right.svg?raw';
1313
import codeSvg from 'bootstrap-icons/icons/code.svg?raw';
1414
import stackblitz from '$resources/icons/stackblitz.svg?raw';
15-
import {pathToRoot$, selectedFramework$} from '../stores';
15+
import {routing} from '../routing.svelte';
1616
import Lazy from './Lazy.svelte';
1717
import Svg from './Svg.svelte';
1818
import type {SampleInfo} from './sample';
@@ -72,22 +72,22 @@
7272
showCode = $bindable(false),
7373
}: Props = $props();
7474
let code = $state('');
75-
let isPlaceholder = $derived(sample.files[$selectedFramework$].entryPoint === 'placeholder');
75+
let isPlaceholder = $derived(sample.files[routing.selectedFramework].entryPoint === 'placeholder');
7676
let path = $derived(isPlaceholder ? `placeholder/placeholdersample` : `${sample.componentName}/${sample.sampleName}`.toLowerCase());
77-
let files = $derived(Object.keys(sample.files[$selectedFramework$].files));
77+
let files = $derived(Object.keys(sample.files[routing.selectedFramework].files));
7878
let selectedFileName = $state('');
7979
$effect.pre(() => {
80-
selectedFileName = sample.files[$selectedFramework$].entryPoint;
80+
selectedFileName = sample.files[routing.selectedFramework].entryPoint;
8181
});
82-
let complementaryUrl = $derived(sample.files[$selectedFramework$].complementaryUrl);
82+
let complementaryUrl = $derived(sample.files[routing.selectedFramework].complementaryUrl);
8383
$effect.pre(() => {
8484
if (showCode) {
85-
void sample.files[$selectedFramework$].files[selectedFileName]().then((val) => (code = val));
85+
void sample.files[routing.selectedFramework].files[selectedFileName]().then((val) => (code = val));
8686
} else {
8787
code = '';
8888
}
8989
});
90-
let sampleBaseUrl = $derived(`${$pathToRoot$}${$selectedFramework$}/samples${complementaryUrl}/#/${path}`);
90+
let sampleBaseUrl = $derived(`${routing.pathToRoot}${routing.selectedFramework}/samples${complementaryUrl}/#/${path}`);
9191
let sampleUrl = $derived(sampleBaseUrl + (urlParameters ? `#${JSON.stringify(urlParameters)}` : ''));
9292
9393
const {showSpinner$, handlerDirective} = createIframeHandler(height, !noresize);
@@ -117,7 +117,7 @@
117117
class="btn btn-sm btn-link m-1 p-0 tooltip"
118118
aria-label="Open example in stackblitz"
119119
data-tip="Edit in Stackblitz"
120-
onclick={async () => (await import('../stackblitz')).openInStackblitz(sample, $selectedFramework$)}
120+
onclick={async () => (await import('../stackblitz')).openInStackblitz(sample, routing.selectedFramework)}
121121
><Svg className="icon-24 align-middle" svg={stackblitz} /></button
122122
>
123123
{/if}
@@ -141,7 +141,12 @@
141141
</div>
142142
{/if}
143143
<div>
144-
<Lazy component={() => import('./Code.svelte')} {code} fileName={selectedFileName} language={isPlaceholder ? $selectedFramework$ : undefined}>
144+
<Lazy
145+
component={() => import('./Code.svelte')}
146+
{code}
147+
fileName={selectedFileName}
148+
language={isPlaceholder ? routing.selectedFramework : undefined}
149+
>
145150
<div class="loading loading-spinner loading-xl text-primary" role="status">
146151
<span class="sr-only">Loading...</span>
147152
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import {type AlertProps} from '@agnos-ui/svelte-bootstrap/components/alert';
44
import biInfoCircleFill from 'bootstrap-icons/icons/info-circle-fill.svg?raw';
55
import biExclamationTriangleFill from 'bootstrap-icons/icons/exclamation-triangle-fill.svg?raw';
6-
import {page} from '$app/stores';
6+
import {page} from '$app/state';
77
import Svg from './Svg.svelte';
88
99
const regex = /\/(components|services|daisyUI)\/([^/]+)/;
@@ -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 visible = $state(true);
2727
let issueUrl = $derived(`https://github.com/AmadeusITGroup/AgnosUI/issues?q=is%3Aopen+is%3Aissue+label%3A%22widget%3A+${componentName}%22`);
2828
$effect(() => {

‎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)