Add Svelte / SvelteKit example for openapi-fetch

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>

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

@@ -0,0 +1,12 @@
+import createClient from "openapi-fetch";
+import type { paths } from "./v1";
+import type { PageServerLoadEvent } from "../../routes/page-data/$types";
+
+const client = createClient<paths>({ baseUrl: "https://catfact.ninja/" });
+export default client;
+
+export const createServerClient = (fetcher: PageServerLoadEvent["fetch"]) =>
+  createClient<paths>({
+    baseUrl: "https://catfact.ninja/",
+    fetch: fetcher,
+  });

packages/openapi-fetch/examples/sveltekit/src/lib/api/v1.d.ts

@@ -0,0 +1,167 @@
+/**
+ * This file was auto-generated by openapi-typescript.
+ * Do not make direct changes to the file.
+ */
+
+
+export interface paths {
+  "/breeds": {
+    /**
+     * Get a list of breeds
+     * @description Returns a a list of breeds
+     */
+    get: operations["getBreeds"];
+  };
+  "/fact": {
+    /**
+     * Get Random Fact
+     * @description Returns a random fact
+     */
+    get: operations["getRandomFact"];
+  };
+  "/facts": {
+    /**
+     * Get a list of facts
+     * @description Returns a a list of facts
+     */
+    get: operations["getFacts"];
+  };
+}
+
+export type webhooks = Record<string, never>;
+
+export interface components {
+  schemas: {
+    /**
+     * Breed model
+     * @description Breed
+     */
+    Breed: {
+      /**
+       * Breed
+       * Format: string
+       * @description Breed
+       */
+      breed?: string;
+      /**
+       * Country
+       * Format: string
+       * @description Country
+       */
+      country?: string;
+      /**
+       * Origin
+       * Format: string
+       * @description Origin
+       */
+      origin?: string;
+      /**
+       * Coat
+       * Format: string
+       * @description Coat
+       */
+      coat?: string;
+      /**
+       * Pattern
+       * Format: string
+       * @description Pattern
+       */
+      pattern?: string;
+    };
+    /**
+     * CatFact model
+     * @description CatFact
+     */
+    CatFact: {
+      /**
+       * Fact
+       * Format: string
+       * @description Fact
+       */
+      fact?: string;
+      /**
+       * Length
+       * Format: int32
+       * @description Length
+       */
+      length?: number;
+    };
+  };
+  responses: never;
+  parameters: never;
+  requestBodies: never;
+  headers: never;
+  pathItems: never;
+}
+
+export type external = Record<string, never>;
+
+export interface operations {
+
+  /**
+   * Get a list of breeds
+   * @description Returns a a list of breeds
+   */
+  getBreeds: {
+    parameters: {
+      query?: {
+        /** @description limit the amount of results returned */
+        limit?: number;
+      };
+    };
+    responses: {
+      /** @description successful operation */
+      200: {
+        content: {
+          "application/json": components["schemas"]["Breed"][];
+        };
+      };
+    };
+  };
+  /**
+   * Get Random Fact
+   * @description Returns a random fact
+   */
+  getRandomFact: {
+    parameters: {
+      query?: {
+        /** @description maximum length of returned fact */
+        max_length?: number;
+      };
+    };
+    responses: {
+      /** @description successful operation */
+      200: {
+        content: {
+          "application/json": components["schemas"]["CatFact"];
+        };
+      };
+      /** @description Fact not found */
+      404: {
+        content: never;
+      };
+    };
+  };
+  /**
+   * Get a list of facts
+   * @description Returns a a list of facts
+   */
+  getFacts: {
+    parameters: {
+      query?: {
+        /** @description maximum length of returned fact */
+        max_length?: number;
+        /** @description limit the amount of results returned */
+        limit?: number;
+      };
+    };
+    responses: {
+      /** @description successful operation */
+      200: {
+        content: {
+          "application/json": components["schemas"]["CatFact"][];
+        };
+      };
+    };
+  };
+}