Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 4, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/ja/openapi-fetch/examples.md
Original file line number Diff line number Diff line change
Expand Up @@ -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の機能を使用しておらず、どのようなセットアップにも適用可能です。_

Expand Down
2 changes: 1 addition & 1 deletion docs/openapi-fetch/examples.md
Original file line number Diff line number Diff line change
Expand Up @@ -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._

Expand Down
2 changes: 1 addition & 1 deletion docs/zh/openapi-fetch/examples.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 特性,通常适用于任何设置。_

Expand Down
23 changes: 12 additions & 11 deletions packages/openapi-fetch/examples/sveltekit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
]
}
}
3 changes: 2 additions & 1 deletion packages/openapi-fetch/examples/sveltekit/src/app.d.ts
Original file line number Diff line number Diff line change
@@ -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 {}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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", {
Expand All @@ -12,8 +13,8 @@
});
}

onMount(() => {
getFact().then((res) => (fact = res));
onMount(async () => {
fact = await getFact();
});
</script>

Expand All @@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -15,4 +17,4 @@ export async function load({ fetch }) {
error: fact.error,
},
};
}
};
8 changes: 4 additions & 4 deletions packages/openapi-fetch/examples/sveltekit/svelte.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
},
};
Expand Down
7 changes: 4 additions & 3 deletions packages/openapi-fetch/examples/sveltekit/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading