Skip to content

Commit 63dd977

Browse files
TorstenDittmannTorstenDittmann
authored
Merge pull request #2059 from appwrite/fix-layout-state-mismatch
fix: switch docs layout to svelte 5, avoiding state mismatch
2 parents acb4d53 + 1a393c9 commit 63dd977

File tree

6 files changed

+32
-62
lines changed

6 files changed

+32
-62
lines changed

‎src/lib/components/shared/button.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { classNames } from '$lib/utils/classnames';
33
import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
44
import { cva, type VariantProps } from 'cva';
5-
import InlineTag from '../ui/InlineTag.svelte';
5+
import InlineTag from '../ui/inline-tag.svelte';
66
77
const button = cva(
88
[

‎src/lib/components/ui/icon/icon.svelte

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
<script lang="ts">
2-
import { classNames } from '$lib/utils/classnames';
3-
import type { SvelteHTMLElements } from 'svelte/elements';
2+
import type { SVGAttributes } from 'svelte/elements';
43
import type { IconType } from './types';
54
6-
type Props = SvelteHTMLElements['svg'] & {
5+
type Props = SVGAttributes<SVGElement> & {
76
class?: string;
8-
name: IconType;
7+
name?: IconType;
98
};
10-
119
const {
1210
xmlns = 'http://www.w3.org/2000/svg',
1311
viewBox = '0 0 24 24',

‎src/lib/layouts/Docs.svelte

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script lang="ts" module>
2-
import { navigating } from '$app/stores';
32
import { writable } from 'svelte/store';
43
54
export type DocsLayoutVariant = 'default' | 'expanded' | 'two-side-navs';
@@ -40,15 +39,14 @@
4039
</script>
4140

4241
<script lang="ts">
43-
import { run } from 'svelte/legacy';
44-
4542
import { Search, IsLoggedIn } from '$lib/components';
4643
import { isMac } from '$lib/utils/platform';
4744
import { getContext, setContext } from 'svelte';
4845
import { SOCIAL_STATS } from '$lib/constants';
4946
import { page } from '$app/state';
5047
import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
5148
import { Button, Icon, InlineTag } from '$lib/components/ui';
49+
import { afterNavigate } from '$app/navigation';
5250
5351
interface Props {
5452
variant?: DocsLayoutVariant;
@@ -70,7 +68,7 @@
7068
$layoutState.currentVariant = variant;
7169
});
7270
73-
navigating.subscribe(() => {
71+
afterNavigate(() => {
7472
layoutState.update((n) => ({
7573
...n,
7674
showReferences: false,

‎src/lib/layouts/Sidebar.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@
138138
rel="noopener noreferrer"
139139
class="web-u-inline-width-100-percent-mobile"
140140
>
141-
<Icon class="star" aria-hidden="true"></Icon>
141+
<Icon class="star" aria-hidden />
142142
<span class="text">Star on GitHub</span>
143143
<InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
144144
</Button>

‎src/routes/docs/references/+layout.svelte

Lines changed: 15 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,25 @@
33
import Docs from '$lib/layouts/Docs.svelte';
44
import Sidebar, { type NavParent, type NavTree } from '$lib/layouts/Sidebar.svelte';
55
import { preferredPlatform, preferredVersion } from '$lib/utils/references';
6+
import type { Snippet } from 'svelte';
67
7-
$: expandable = !!page.url.pathname.match(
8-
/\/docs\/references\/.*?\/(client|server).*?\/.*?\/?/
8+
const { children }: { children: Snippet } = $props();
9+
10+
const expandable = $derived(
11+
!!page.url.pathname.match(/\/docs\/references\/.*?\/(client|server).*?\/.*?\/?/)
912
);
1013
11-
$: platform = $preferredPlatform ?? page.params?.platform ?? 'client-web';
14+
const platform = $derived($preferredPlatform ?? page.params?.platform ?? 'client-web');
1215
13-
/* correct platform prefix for references page */
14-
$: resolvedPlatformPrefix = /^server-|^client-/.test(platform)
15-
? platform
16-
: `server-${platform}`;
16+
const resolvedPlatformPrefix = $derived(
17+
/^server-|^client-/.test(platform) ? platform : `server-${platform}`
18+
);
1719
18-
$: prefix = `/docs/references/${$preferredVersion ?? page.params?.version ?? 'cloud'}/${resolvedPlatformPrefix}`;
20+
const prefix = $derived(
21+
`/docs/references/${$preferredVersion ?? page.params?.version ?? 'cloud'}/${resolvedPlatformPrefix}`
22+
);
1923
20-
$: navigation = [
24+
const navigation: NavTree = $derived([
2125
{
2226
label: 'Getting started',
2327
items: [
@@ -93,22 +97,7 @@
9397
}
9498
]
9599
}
96-
// {
97-
// label: 'Debugging',
98-
// items: [
99-
// {
100-
// icon: 'icon-document-search',
101-
// label: 'Response codes',
102-
// href: '/docs/advanced/platform/response-codes'
103-
// },
104-
// {
105-
// icon: 'icon-document-report',
106-
// label: 'Rate-limits',
107-
// href: '/docs/advanced/platform/rate-limits'
108-
// }
109-
// ]
110-
// }
111-
] as NavTree;
100+
]);
112101
113102
const parent: NavParent = {
114103
href: '/docs',
@@ -118,5 +107,5 @@
118107

119108
<Docs variant={expandable ? 'expanded' : 'two-side-navs'} isReferences={expandable}>
120109
<Sidebar {navigation} {expandable} {parent} />
121-
<slot />
110+
{@render children()}
122111
</Docs>

‎src/routes/docs/references/[version]/[platform]/[service]/+page.svelte

Lines changed: 10 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
import Request from './(components)/Request.svelte';
2727
import Response from './(components)/Response.svelte';
2828
import RateLimits from './(components)/RateLimits.svelte';
29+
import type { SDKMethod } from '$lib/utils/specs';
2930
3031
let { data } = $props();
3132
@@ -34,7 +35,6 @@
3435
const headings = getContext<LayoutContext>('headings');
3536
3637
let selected: string | undefined = $state(undefined);
37-
let selectedMenuItem: HTMLElement;
3838
3939
headings.subscribe((n) => {
4040
const noVisible = Object.values(n).every((n) => !n.visible);
@@ -61,7 +61,9 @@
6161
correctPlatform = platform.replaceAll(`server-`, ``) as Platform;
6262
}
6363
64-
preferredPlatform.set(correctPlatform as Platform);
64+
if ($preferredPlatform === correctPlatform) return;
65+
66+
preferredPlatform.set(correctPlatform);
6567
6668
goto(`/docs/references/${version}/${platform}/${service}`, {
6769
noScroll: true
@@ -71,6 +73,8 @@
7173
function selectVersion(event: CustomEvent<unknown>) {
7274
const { platform, service } = page.params;
7375
const version = event.detail as Version;
76+
if ($preferredVersion === version) return;
77+
7478
preferredVersion.set(version);
7579
goto(`/docs/references/${version}/${platform}/${service}`, {
7680
noScroll: true
@@ -110,8 +114,7 @@
110114
: `server-${$preferredPlatform}`;
111115
112116
goto(`/docs/references/${$preferredVersion}/${platformMode}/${page.params.service}`, {
113-
noScroll: true,
114-
replaceState: false
117+
noScroll: true
115118
});
116119
}
117120
@@ -145,7 +148,7 @@
145148
/**
146149
* Sorts methods by their operation order and title
147150
*/
148-
function sortMethods(methods: any[]) {
151+
function sortMethods(methods: SDKMethod[]) {
149152
return methods.sort((a, b) => {
150153
const orderA = getOperationOrder(a.title);
151154
const orderB = getOperationOrder(b.title);
@@ -156,11 +159,8 @@
156159
});
157160
}
158161
159-
/**
160-
* Groups methods by their group attribute, null group goes to '' for ordering
161-
*/
162-
function groupMethodsByGroup(methods: any[]) {
163-
return methods.reduce((acc, method) => {
162+
function groupMethodsByGroup(methods: SDKMethod[]) {
163+
return methods.reduce<Record<string, SDKMethod[]>>((acc, method) => {
164164
const groupKey = method.group || '';
165165
if (!acc[groupKey]) {
166166
acc[groupKey] = [];
@@ -170,20 +170,6 @@
170170
}, {});
171171
}
172172
173-
function bindSelectedRef(node: HTMLElement, isSelected: boolean) {
174-
if (isSelected) {
175-
selectedMenuItem = node;
176-
}
177-
178-
return {
179-
update(newIsSelected: boolean) {
180-
if (newIsSelected) {
181-
selectedMenuItem = node;
182-
}
183-
}
184-
};
185-
}
186-
187173
let platformBindingForSelect = $derived(page.params.platform as Platform);
188174
let platform = $derived(/**$preferredPlatform ?? */ page.params.platform as Platform);
189175
let platformType = $derived(platform.startsWith('client-') ? 'CLIENT' : 'SERVER');
@@ -400,7 +386,6 @@
400386
href={`#${method.id}`}
401387
class="web-references-menu-link text-caption"
402388
class:is-selected={method.id === selected}
403-
use:bindSelectedRef={method.id === selected}
404389
>
405390
{method.title}
406391
</a>

0 commit comments

Comments
 (0)