Merge pull request #2059 from appwrite/fix-layout-state-mismatch

fix: switch docs layout to svelte 5, avoiding state mismatch

src/lib/components/shared/button.svelte

@@ -2,7 +2,7 @@
     import { classNames } from '$lib/utils/classnames';
     import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
     import { cva, type VariantProps } from 'cva';
-    import InlineTag from '../ui/InlineTag.svelte';
+    import InlineTag from '../ui/inline-tag.svelte';
 
     const button = cva(
         [

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

@@ -1,13 +1,11 @@
 <script lang="ts">
-    import { classNames } from '$lib/utils/classnames';
+    import type { SVGAttributes } from 'svelte/elements';
-    import type { SvelteHTMLElements } from 'svelte/elements';
     import type { IconType } from './types';
 
-    type Props = SvelteHTMLElements['svg'] & {
+    type Props = SVGAttributes<SVGElement> & {
         class?: string;
-        name: IconType;
+        name?: IconType;
     };
-
     const {
         xmlns = 'http://www.w3.org/2000/svg',
         viewBox = '0 0 24 24',

src/lib/layouts/Docs.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" module>
-    import { navigating } from '$app/stores';
     import { writable } from 'svelte/store';
 
     export type DocsLayoutVariant = 'default' | 'expanded' | 'two-side-navs';
@@ -40,8 +39,6 @@
 </script>
 
 <script lang="ts">
-    import { run } from 'svelte/legacy';
-
     import { Search, IsLoggedIn } from '$lib/components';
     import { isMac } from '$lib/utils/platform';
     import { getContext, setContext } from 'svelte';
@@ -49,6 +46,7 @@
     import { page } from '$app/state';
     import { getAppwriteDashboardUrl } from '$lib/utils/dashboard';
     import { Button, Icon, InlineTag } from '$lib/components/ui';
+    import { afterNavigate } from '$app/navigation';
 
     interface Props {
         variant?: DocsLayoutVariant;
@@ -70,7 +68,7 @@
         $layoutState.currentVariant = variant;
     });
 
-    navigating.subscribe(() => {
+    afterNavigate(() => {
         layoutState.update((n) => ({
             ...n,
             showReferences: false,

src/lib/layouts/Sidebar.svelte

@@ -138,7 +138,7 @@
                 rel="noopener noreferrer"
                 class="web-u-inline-width-100-percent-mobile"
             >
-                <Icon class="star" aria-hidden="true"></Icon>
+                <Icon class="star" aria-hidden />
                 <span class="text">Star on GitHub</span>
                 <InlineTag>{SOCIAL_STATS.GITHUB.STAT}</InlineTag>
             </Button>

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

@@ -3,21 +3,25 @@
     import Docs from '$lib/layouts/Docs.svelte';
     import Sidebar, { type NavParent, type NavTree } from '$lib/layouts/Sidebar.svelte';
     import { preferredPlatform, preferredVersion } from '$lib/utils/references';
+    import type { Snippet } from 'svelte';
 
-    $: expandable = !!page.url.pathname.match(
+    const { children }: { children: Snippet } = $props();
-        /\/docs\/references\/.*?\/(client|server).*?\/.*?\/?/
+
+    const expandable = $derived(
+        !!page.url.pathname.match(/\/docs\/references\/.*?\/(client|server).*?\/.*?\/?/)
     );
 
-    $: platform = $preferredPlatform ?? page.params?.platform ?? 'client-web';
+    const platform = $derived($preferredPlatform ?? page.params?.platform ?? 'client-web');
 
-    /* correct platform prefix for references page */
+    const resolvedPlatformPrefix = $derived(
-    $: resolvedPlatformPrefix = /^server-|^client-/.test(platform)
+        /^server-|^client-/.test(platform) ? platform : `server-${platform}`
-        ? platform
+    );
-        : `server-${platform}`;
 
-    $: prefix = `/docs/references/${$preferredVersion ?? page.params?.version ?? 'cloud'}/${resolvedPlatformPrefix}`;
+    const prefix = $derived(
+        `/docs/references/${$preferredVersion ?? page.params?.version ?? 'cloud'}/${resolvedPlatformPrefix}`
+    );
 
-    $: navigation = [
+    const navigation: NavTree = $derived([
         {
             label: 'Getting started',
             items: [
@@ -93,22 +97,7 @@
                 }
             ]
         }
-        // {
+    ]);
-        // 	label: 'Debugging',
-        // 	items: [
-        // 		{
-        // 			icon: 'icon-document-search',
-        // 			label: 'Response codes',
-        // 			href: '/docs/advanced/platform/response-codes'
-        // 		},
-        // 		{
-        // 			icon: 'icon-document-report',
-        // 			label: 'Rate-limits',
-        // 			href: '/docs/advanced/platform/rate-limits'
-        // 		}
-        // 	]
-        // }
-    ] as NavTree;
 
     const parent: NavParent = {
         href: '/docs',
@@ -118,5 +107,5 @@
 
 <Docs variant={expandable ? 'expanded' : 'two-side-navs'} isReferences={expandable}>
     <Sidebar {navigation} {expandable} {parent} />
-    <slot />
+    {@render children()}
 </Docs>

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

@@ -26,6 +26,7 @@
     import Request from './(components)/Request.svelte';
     import Response from './(components)/Response.svelte';
     import RateLimits from './(components)/RateLimits.svelte';
+    import type { SDKMethod } from '$lib/utils/specs';
 
     let { data } = $props();
 
@@ -34,7 +35,6 @@
     const headings = getContext<LayoutContext>('headings');
 
     let selected: string | undefined = $state(undefined);
-    let selectedMenuItem: HTMLElement;
 
     headings.subscribe((n) => {
         const noVisible = Object.values(n).every((n) => !n.visible);
@@ -61,7 +61,9 @@
             correctPlatform = platform.replaceAll(`server-`, ``) as Platform;
         }
 
-        preferredPlatform.set(correctPlatform as Platform);
+        if ($preferredPlatform === correctPlatform) return;
+
+        preferredPlatform.set(correctPlatform);
 
         goto(`/docs/references/${version}/${platform}/${service}`, {
             noScroll: true
@@ -71,6 +73,8 @@
     function selectVersion(event: CustomEvent<unknown>) {
         const { platform, service } = page.params;
         const version = event.detail as Version;
+        if ($preferredVersion === version) return;
+
         preferredVersion.set(version);
         goto(`/docs/references/${version}/${platform}/${service}`, {
             noScroll: true
@@ -110,8 +114,7 @@
                 : `server-${$preferredPlatform}`;
 
             goto(`/docs/references/${$preferredVersion}/${platformMode}/${page.params.service}`, {
-                noScroll: true,
+                noScroll: true
-                replaceState: false
             });
         }
 
@@ -145,7 +148,7 @@
     /**
      * Sorts methods by their operation order and title
      */
-    function sortMethods(methods: any[]) {
+    function sortMethods(methods: SDKMethod[]) {
         return methods.sort((a, b) => {
             const orderA = getOperationOrder(a.title);
             const orderB = getOperationOrder(b.title);
@@ -156,11 +159,8 @@
         });
     }
 
-    /**
+    function groupMethodsByGroup(methods: SDKMethod[]) {
-     * Groups methods by their group attribute, null group goes to '' for ordering
+        return methods.reduce<Record<string, SDKMethod[]>>((acc, method) => {
-     */
-    function groupMethodsByGroup(methods: any[]) {
-        return methods.reduce((acc, method) => {
             const groupKey = method.group || '';
             if (!acc[groupKey]) {
                 acc[groupKey] = [];
@@ -170,20 +170,6 @@
         }, {});
     }
 
-    function bindSelectedRef(node: HTMLElement, isSelected: boolean) {
-        if (isSelected) {
-            selectedMenuItem = node;
-        }
-
-        return {
-            update(newIsSelected: boolean) {
-                if (newIsSelected) {
-                    selectedMenuItem = node;
-                }
-            }
-        };
-    }
-
     let platformBindingForSelect = $derived(page.params.platform as Platform);
     let platform = $derived(/**$preferredPlatform ?? */ page.params.platform as Platform);
     let platformType = $derived(platform.startsWith('client-') ? 'CLIENT' : 'SERVER');
@@ -400,7 +386,6 @@
                                                 href={`#${method.id}`}
                                                 class="web-references-menu-link text-caption"
                                                 class:is-selected={method.id === selected}
-                                                use:bindSelectedRef={method.id === selected}
                                             >
                                                 {method.title}
                                             </a>