Add Svelte / SvelteKit example for openapi-fetch (#1311)

Author: drwpow

docs/src/content/docs/openapi-fetch/examples.md

@@ -74,17 +74,21 @@ openapi-fetch is simple vanilla JS that can be used in any project. But sometime
 
 ### React + React Query
 
-[React Query](https://tanstack.com/query/latest) is a perfect wrapper for openapi-fetch in React. At only 13 kB, it provides clientside caching and request deduping across async React components without too much client weight in return. And its type inference preserves openapi-fetch types perfectly with minimal setup.
+<a href="https://tanstack.com/query/latest" target="_blank" rel="noopener noreferrer">React Query</a> is a perfect wrapper for openapi-fetch in React. At only 13 kB, it provides clientside caching and request deduping across async React components without too much client weight in return. And its type inference preserves openapi-fetch types perfectly with minimal setup.
 
 [View a code example in GitHub](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch/examples/react-query)
 
 ### React + SWR
 
 TODO
 
-### SvelteKit
+### Svelte / SvelteKit
 
-TODO
+<a href="https://kit.svelte.dev" target="_blank" rel="noopener noreferrer">SvelteKit</a>’s automatic type inference can easily pick up openapi-fetch’s types in both clientside fetching and <a href="https://kit.svelte.dev/docs/load#page-data" target="_blank" rel="noopener noreferrer">Page Data</a> fetching. And it doesn’t need any additional libraries to work.
+
+_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._
+
+[View a code example in GitHub](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch/examples/sveltekit)
 
 ### Vue
 

packages/openapi-fetch/examples/react-query/README.md

@@ -4,9 +4,9 @@ Example of using openapi-fetch with [React Query](https://tanstack.com/query/lat
 
 ## Setup
 
-```
+```sh
 pnpm i
 pnpm run dev
 ```
 
-You’ll then see the server running at `localhost:5173`
+You’ll see the server running at `localhost:5173`

packages/openapi-fetch/examples/react-query/package.json

@@ -7,8 +7,8 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^4.33.0",
-    "openapi-fetch": "file:../../",
-    "openapi-typescript": "workspace:",
+    "openapi-fetch": "file:../..",
+    "openapi-typescript": "workspace:^",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/openapi-fetch/examples/react-query/src/index.tsx

@@ -14,9 +14,11 @@ function Fact() {
     <div>
       {fact.isLoading && <div>Loading...</div>}
       {!!fact.error && <div>There was an error: {String(fact.error)}</div>}
-      <pre>
-        <code>{JSON.stringify(fact.data, undefined, 2)}</code>
-      </pre>
+      {!!fact.data && (
+        <pre>
+          <code>{JSON.stringify(fact.data, undefined, 2)}</code>
+        </pre>
+      )}
       <button type="button" onClick={() => fact.refetch()}>
         Another fact!
       </button>

packages/openapi-fetch/examples/react-query/src/lib/api/index.ts

@@ -1,5 +1,5 @@
 import createClient from "openapi-fetch";
-import { paths } from "./v1";
+import type { paths } from "./v1";
 
 const client = createClient<paths>({ baseUrl: "https://catfact.ninja/" });
 export default client;

packages/openapi-fetch/examples/sveltekit/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

packages/openapi-fetch/examples/sveltekit/README.md

@@ -0,0 +1,15 @@
+# openapi-fetch + Svelte/ SvelteKit
+
+Example of using openapi-fetch in [Svelte](https://svelte.dev/) / [SvelteKit](https://kit.svelte.dev).
+
+- [Svelte or clientside SvelteKit example](./src/routes/+page.svelte)
+- [SveleKit Page Data example](./src/routes/server/+page.svelte)
+
+## Setup
+
+```sh
+pnpm i
+pnpm run dev
+```
+
+You’ll see the server running at `localhost:5173`

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

@@ -0,0 +1,25 @@
+{
+  "name": "sveltekit",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "prepare": "openapi-typescript src/lib/api/v1.json -o src/lib/api/v1.d.ts"
+  },
+  "dependencies": {
+    "openapi-fetch": "file:../..",
+    "openapi-typescript": "workspace:^"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.1.0",
+    "@sveltejs/kit": "^1.22.6",
+    "svelte": "^4.2.0",
+    "svelte-check": "^3.5.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9"
+  },
+  "type": "module"
+}

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

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

packages/openapi-fetch/examples/sveltekit/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>