Skip to content

Commit f495e2b

Browse files
techniqtechniq
committed
Switch back to page from $app/stores until full Svelte 5 migration occurs
1 parent 9d36b1a commit f495e2b

File tree

4 files changed

+30
-30
lines changed

4 files changed

+30
-30
lines changed

‎packages/svelte-ux/src/routes/+error.svelte

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<script lang="ts">
2-
import { page } from '$app/state';
2+
import { page } from '$app/stores';
33
4-
$: console.error(page.error);
4+
$: console.error($page.error);
55
</script>
66

77
<div class="p-4">
88
<div class="grid gap-4">
9-
<span class="text-2xl font-bold">Error: {page.status}</span>
9+
<span class="text-2xl font-bold">Error: {$page.status}</span>
1010

11-
{#if page.error}
11+
{#if $page.error}
1212
<div>
1313
<h2 class="text-lg font-bold mb-1">Message:</h2>
1414
<pre
15-
class="ml-2 p-4 border border-danger-300 rounded-md text-xs bg-danger-50 text-danger-content">{page
15+
class="ml-2 p-4 border border-danger-300 rounded-md text-xs bg-danger-50 text-danger-content">{$page
1616
.error.message}</pre>
1717
</div>
1818
{/if}

‎packages/svelte-ux/src/routes/_NavMenu.svelte

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { NavItem } from 'svelte-ux';
33
import { entries } from '@layerstack/utils';
44
5-
import { page } from '$app/state';
5+
import { page } from '$app/stores';
66
77
import LucideArrowUpRight from '~icons/lucide/arrow-up-right';
88
import LucideHouse from '~icons/lucide/house';
@@ -78,19 +78,19 @@
7878
};
7979
</script>
8080

81-
<NavItem text="Getting Started" icon={LucideHouse} currentUrl={page.url} path="/" />
82-
<NavItem text="Customization" icon={LucideSettings2} currentUrl={page.url} path="/customization" />
83-
<!-- <NavItem text="Theme" icon={mdiPalette} currentUrl={page.url} path="/theme" /> -->
84-
<NavItem text="Changelog" icon={LucideList} currentUrl={page.url} path="/changelog" />
81+
<NavItem text="Getting Started" icon={LucideHouse} currentUrl={$page.url} path="/" />
82+
<NavItem text="Customization" icon={LucideSettings2} currentUrl={$page.url} path="/customization" />
83+
<!-- <NavItem text="Theme" icon={mdiPalette} currentUrl={$page.url} path="/theme" /> -->
84+
<NavItem text="Changelog" icon={LucideList} currentUrl={$page.url} path="/changelog" />
8585

8686
<h1>Components</h1>
8787
{#each entries(components) as [header, items]}
8888
<h2>{header}</h2>
8989
{#each items as item}
9090
{#if typeof item === 'object'}
91-
<NavItem text={item.label} currentUrl={page.url} path="/docs/components/{item.value}" />
91+
<NavItem text={item.label} currentUrl={$page.url} path="/docs/components/{item.value}" />
9292
{:else}
93-
<NavItem text={item} currentUrl={page.url} path="/docs/components/{item}" />
93+
<NavItem text={item} currentUrl={$page.url} path="/docs/components/{item}" />
9494
{/if}
9595
{/each}
9696
{/each}
@@ -99,7 +99,7 @@
9999
<NavItem
100100
text="LayerChart"
101101
icon={LucideArrowUpRight}
102-
currentUrl={page.url}
102+
currentUrl={$page.url}
103103
path="https://www.layerchart.com"
104104
target="_blank"
105105
/>
@@ -108,14 +108,14 @@
108108
<NavItem
109109
text="@layerstack/svelte-actions"
110110
icon={LucideArrowUpRight}
111-
currentUrl={page.url}
111+
currentUrl={$page.url}
112112
path="https://www.layerstack.dev/docs/svelte-actions"
113113
target="_blank"
114114
/>
115115
<NavItem
116116
text="@layerstack/svelte-table"
117117
icon={LucideArrowUpRight}
118-
currentUrl={page.url}
118+
currentUrl={$page.url}
119119
path="https://www.layerstack.dev/docs/svelte-table/actions"
120120
target="_blank"
121121
/>
@@ -124,14 +124,14 @@
124124
<NavItem
125125
text="@layerstack/svelte-stores"
126126
icon={LucideArrowUpRight}
127-
currentUrl={page.url}
127+
currentUrl={$page.url}
128128
path="https://www.layerstack.dev/docs/svelte-stores"
129129
target="_blank"
130130
/>
131131
<NavItem
132132
text="@layerstack/svelte-table"
133133
icon={LucideArrowUpRight}
134-
currentUrl={page.url}
134+
currentUrl={$page.url}
135135
path="https://www.layerstack.dev/docs/svelte-table/stores"
136136
target="_blank"
137137
/>
@@ -140,14 +140,14 @@
140140
<NavItem
141141
text="@layerstack/tailwind"
142142
icon={LucideArrowUpRight}
143-
currentUrl={page.url}
143+
currentUrl={$page.url}
144144
path="https://www.layerstack.dev/docs/tailwind"
145145
target="_blank"
146146
/>
147147
<NavItem
148148
text="@layerstack/utils"
149149
icon={LucideArrowUpRight}
150-
currentUrl={page.url}
150+
currentUrl={$page.url}
151151
path="https://www.layerstack.dev/docs/utils"
152152
target="_blank"
153153
/>

‎packages/svelte-ux/src/routes/docs/+layout.svelte

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@
2727
import Code from '$lib/components/Code.svelte';
2828
import ViewSourceButton from '$docs/ViewSourceButton.svelte';
2929
30-
import { page } from '$app/state';
30+
import { page } from '$app/stores';
3131
32-
$: [type, name] = page.url.pathname.split('/').slice(2) ?? [];
33-
$: title = page.data.meta?.title ?? name;
32+
$: [type, name] = $page.url.pathname.split('/').slice(2) ?? [];
33+
$: title = $page.data.meta?.title ?? name;
3434
$: pageUrl = `src/routes/docs/${type}/${name}/+page.svelte?plain=1`;
3535
$: sourceUrl = `src/lib/${type}/${name}.${type === 'components' ? 'svelte' : 'ts'}`;
3636
$: ({
@@ -43,7 +43,7 @@
4343
pageSource,
4444
api,
4545
status,
46-
} = page.data.meta ?? {});
46+
} = $page.data.meta ?? {});
4747
4848
$: showTableOfContents = $xlScreen;
4949
@@ -152,7 +152,7 @@
152152

153153
<div class="px-4">
154154
{#if !$xlScreen}
155-
{#key page.route.id}
155+
{#key $page.route.id}
156156
<Dialog
157157
bind:open={showTableOfContents}
158158
classes={{ dialog: 'w-[420px] max-w-[95vw] max-h-[95dvh]' }}
@@ -187,14 +187,14 @@
187187
<div class="grid xl:grid-cols-[1fr_auto] gap-6 pb-4">
188188
<div class="overflow-auto p-1">
189189
{#if type === 'components' && !hideUsage}
190-
{#key page.route.id}
190+
{#key $page.route.id}
191191
<h1 id="usage">Usage</h1>
192192
<Code source={`import { ${name} } from 'svelte-ux';`} language="javascript" />
193193
{/key}
194194
{/if}
195195

196196
{#if features}
197-
{#key page.route.id}
197+
{#key $page.route.id}
198198
<h1 id="features">Features</h1>
199199
<ul class="grid gap-2 pl-4 text-surface-content">
200200
{#each features as feature}
@@ -270,7 +270,7 @@
270270
On this page
271271
</div>
272272
<!-- Rebuild toc when page changes -->
273-
{#key page.route.id}
273+
{#key $page.route.id}
274274
<TableOfContents
275275
linkIndent={12}
276276
classes={{

‎packages/svelte-ux/src/routes/docs/components/NavItem/+page.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,23 @@
22
import { NavItem } from 'svelte-ux';
33
import Preview from '$lib/components/Preview.svelte';
44
5-
import { page } from '$app/state';
5+
import { page } from '$app/stores';
66
</script>
77

88
<h1>Examples</h1>
99

1010
<h2>Default</h2>
1111

1212
<Preview>
13-
<NavItem text="Home" currentUrl={page.url} path="/" />
13+
<NavItem text="Home" currentUrl={$page.url} path="/" />
1414
</Preview>
1515

1616
<h2>Active path</h2>
1717

1818
<Preview>
1919
<NavItem
2020
text="NavItem"
21-
currentUrl={page.url}
21+
currentUrl={$page.url}
2222
path="/docs/components/NavItem"
2323
classes={{ root: 'pl-3', active: 'bg-primary/10 text-primary' }}
2424
/>

0 commit comments

Comments
 (0)