Update docs and examples with Svelte 5 references and syntax (#2368)

* chore(docs): adapt SvelteKit example to Svelte 5 syntax

Signed-off-by: Felix Kaechele <[email protected]>

* chore(docs): Update Svelte docs links

Signed-off-by: Felix Kaechele <[email protected]>

---------

Signed-off-by: Felix Kaechele <[email protected]>

Author: kaechele

docs/ja/openapi-fetch/examples.md

@@ -22,7 +22,7 @@ See [swr-openapi](/swr-openapi/)
 
 ## Svelte / SvelteKit
 
-[SvelteKit](https://kit.svelte.dev) の自動型推論機能は、クライアントサイドでのデータ取得や[ページデータ](https://kit.svelte.dev/docs/load#page-data)の取得において、openapi-fetchの型を簡単に活用できます。また、追加のライブラリを必要とせずに動作します。SvelteKitは、ロード関数内で[カスタムフェッチ](https://kit.svelte.dev/docs/load#making-fetch-requests)を使用することを推奨しており、これは[フェッチオプション](/ja/openapi-fetch/api#fetch-オプション)で実現できます。
+[SvelteKit](https://svelte.dev/docs/kit) の自動型推論機能は、クライアントサイドでのデータ取得や[ページデータ](https://svelte.dev/docs/kit/load#Page-data)の取得において、openapi-fetchの型を簡単に活用できます。また、追加のライブラリを必要とせずに動作します。SvelteKitは、ロード関数内で[カスタムフェッチ](https://svelte.dev/docs/kit/load#Making-fetch-requests)を使用することを推奨しており、これは[フェッチオプション](/ja/openapi-fetch/api#fetch-オプション)で実現できます。
 
 _注: SvelteKitを使用しない場合でも、`src/routes/+page.svelte` 内のルート例は、SvelteKitの機能を使用しておらず、どのようなセットアップにも適用可能です。_
 

docs/openapi-fetch/examples.md

@@ -22,7 +22,7 @@ See [swr-openapi](/swr-openapi/)
 
 ## Svelte / SvelteKit
 
-[SvelteKit](https://kit.svelte.dev)’s automatic type inference can easily pick up openapi-fetch’s types in both clientside fetching and [Page Data](https://kit.svelte.dev/docs/load#page-data) fetching. And it doesn’t need any additional libraries to work. SvelteKit also advises to use their [custom fetch](https://kit.svelte.dev/docs/load#making-fetch-requests) in load functions. This can be achieved with [fetch options](/openapi-fetch/api#fetch-options).
+[SvelteKit](https://svelte.dev/docs/kit)’s automatic type inference can easily pick up openapi-fetch’s types in both clientside fetching and [Page Data](https://svelte.dev/docs/kit/load#Page-data) fetching. And it doesn’t need any additional libraries to work. SvelteKit also advises to use their [custom fetch](https://svelte.dev/docs/kit/load#Making-fetch-requests) in load functions. This can be achieved with [fetch options](/openapi-fetch/api#fetch-options).
 
 _Note: if you’re using Svelte without SvelteKit, the root example in `src/routes/+page.svelte` doesn’t use any SvelteKit features and is generally-applicable to any setup._
 

docs/zh/openapi-fetch/examples.md

@@ -22,7 +22,7 @@ See [swr-openapi](/swr-openapi/)
 
 ## Svelte / SvelteKit
 
-[SvelteKit](https://kit.svelte.dev) 的自动类型推断可以轻松地在客户端获取和 [Page Data](https://kit.svelte.dev/docs/load#page-data) 获取中捕获 openapi-fetch 的类型。而且它不需要任何额外的库。SvelteKit 还建议使用它们的[自定义 fetch](https://kit.svelte.dev/docs/load#making-fetch-requests)在 load 函数中工作。这可以通过 [fetch options](/openapi-fetch/api#fetch-options) 实现。
+[SvelteKit](https://svelte.dev/docs/kit) 的自动类型推断可以轻松地在客户端获取和 [Page Data](https://svelte.dev/docs/kit/load#Page-data) 获取中捕获 openapi-fetch 的类型。而且它不需要任何额外的库。SvelteKit 还建议使用它们的[自定义 fetch](https://svelte.dev/docs/kit/load#Making-fetch-requests)在 load 函数中工作。这可以通过 [fetch options](/openapi-fetch/api#fetch-options) 实现。
 
 _注意：如果你在没有 SvelteKit 的情况下使用 Svelte，`src/routes/+page.svelte` 中的根示例不使用任何 SvelteKit 特性，通常适用于任何设置。_
 

packages/openapi-fetch/examples/sveltekit/package.json

@@ -7,19 +7,20 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
-  "dependencies": {
-    "@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
-    "openapi-fetch": "workspace:^"
-  },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.20.8",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@sveltejs/adapter-auto": "^6.0.1",
+    "@sveltejs/kit": "^2.22.2",
+    "@sveltejs/vite-plugin-svelte": "^5.1.0",
+    "openapi-fetch": "workspace:^",
     "openapi-typescript": "workspace:^",
-    "svelte": "^5.28.2",
-    "svelte-check": "^3.8.6",
-    "tslib": "^2.8.1",
+    "svelte": "^5.34.9",
+    "svelte-check": "^4.2.2",
     "typescript": "^5.8.3",
-    "vite": "^6.3.4"
+    "vite": "^6.3.5"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
   }
 }

packages/openapi-fetch/examples/sveltekit/src/app.d.ts

@@ -1,10 +1,11 @@
-// See https://kit.svelte.dev/docs/types#app
+// See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {
 	namespace App {
 		// interface Error {}
 		// interface Locals {}
 		// interface PageData {}
+		// interface PageState {}
 		// interface Platform {}
 	}
 }

packages/openapi-fetch/examples/sveltekit/src/routes/+page.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { onMount } from "svelte";
+
   import client from "$lib/api/index.js";
 
-  let fact: Awaited<ReturnType<typeof getFact>> | undefined;
+  let fact: Awaited<ReturnType<typeof getFact>> | undefined = $state(undefined);
 
   async function getFact() {
     return client.GET("/fact", {
@@ -12,8 +13,8 @@
     });
   }
 
-  onMount(() => {
-    getFact().then((res) => (fact = res));
+  onMount(async () => {
+    fact = await getFact();
   });
 </script>
 
@@ -26,5 +27,7 @@
       <pre><code>{JSON.stringify(fact.data, undefined, 2)}</code></pre>
     {/if}
   {/if}
-  <button type="button" on:click={() => getFact().then((res) => (fact = res))}>Another fact!</button>
+  <button type="button" onclick={async () => (fact = await getFact())}>
+    Another fact!
+  </button>
 </div>

packages/openapi-fetch/examples/sveltekit/src/routes/page-data/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { PageData } from "./$types";
+  import type { PageProps } from "./$types";
 
-  export let data: PageData;
+  let { data }: PageProps = $props();
 </script>
 
 <div>
@@ -13,5 +13,5 @@
   {:else}
     <div>Loading...</div>
   {/if}
-  <button type="button" on:click={() => location.reload()}>Another fact!</button>
+  <button type="button" onclick={() => location.reload()}>Another fact!</button>
 </div>

packages/openapi-fetch/examples/sveltekit/src/routes/page-data/+page.ts

@@ -1,9 +1,11 @@
+import type { PageLoad } from "./$types";
+
 import client from "$lib/api/index.js";
 
 // Note: this uses Svelte’s custom fetcher as an example, but Node’s
 // native fetch works, too. See Svelte’s docs to learn the difference:
-// @see https://kit.svelte.dev/docs/load#making-fetch-requests
-export async function load({ fetch }) {
+// @see https://svelte.dev/docs/kit/load#Making-fetch-requests
+export const load: PageLoad = async ({ fetch }) => {
   const fact = await client.GET("/fact", {
     params: { query: { max_length: 500 } },
     fetch,
@@ -15,4 +17,4 @@ export async function load({ fetch }) {
       error: fact.error,
     },
   };
-}
+};

packages/openapi-fetch/examples/sveltekit/svelte.config.js

@@ -3,14 +3,14 @@ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // Consult https://svelte.dev/docs/kit/integrations
   // for more information about preprocessors
   preprocess: vitePreprocess(),
 
   kit: {
-    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
-    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+    // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+    // See https://svelte.dev/docs/kit/adapters for more information about adapters.
     adapter: adapter(),
   },
 };

packages/openapi-fetch/examples/sveltekit/tsconfig.json

@@ -3,15 +3,16 @@
   "compilerOptions": {
     "allowJs": true,
     "checkJs": true,
-    "lib": ["DOM"],
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "strict": true
+    "strict": true,
+    "moduleResolution": "bundler"
   }
-  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+  // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+  // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
   //
   // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
   // from the referenced tsconfig.json - TypeScript does not merge them in