From 2cd92ef39182a5602c72baa0e3a0929d8faa9a46 Mon Sep 17 00:00:00 2001 From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com> Date: Fri, 13 Jan 2023 23:48:19 +1100 Subject: [PATCH] docs(svelte-query): Rework SvelteKit setup (#4811) * Add some default options * Rewrite hydration example * Run prettier * Rename example to SSR * Add recommended SvelteKit setup * Rework infinite scroll in sveltekit * Add SvelteKit note to overview * Switch basic example to sveltekit Co-authored-by: Dominik Dorfmeister --- docs/config.json | 8 +-- docs/svelte/overview.md | 5 ++ docs/svelte/ssr.md | 42 +++++++++++--- examples/svelte/auto-refetching/package.json | 8 +-- .../auto-refetching/src/routes/+layout.svelte | 9 ++- .../auto-refetching/src/routes/+layout.ts | 1 - examples/svelte/basic/.gitignore | 29 +++------- examples/svelte/basic/README.md | 58 ++++++++----------- examples/svelte/basic/index.html | 13 ----- examples/svelte/basic/package.json | 12 ++-- examples/svelte/basic/src/App.svelte | 13 ----- examples/svelte/basic/src/app.css | 12 ++-- .../svelte/{hydration => basic}/src/app.d.ts | 0 .../svelte/{hydration => basic}/src/app.html | 0 examples/svelte/basic/src/assets/svelte.svg | 1 - .../svelte/basic/src/lib/BasicQuery.svelte | 15 ----- examples/svelte/basic/src/lib/Post.svelte | 11 ++-- examples/svelte/basic/src/lib/Posts.svelte | 9 ++- examples/svelte/basic/src/lib/data.ts | 21 ++++--- examples/svelte/basic/src/lib/types.ts | 5 ++ examples/svelte/basic/src/main.ts | 8 --- .../svelte/basic/src/routes/+layout.svelte | 19 ++++++ examples/svelte/basic/src/routes/+page.svelte | 6 ++ .../basic/src/routes/[postId]/+page.svelte | 8 +++ .../svelte/basic/src/routes/[postId]/+page.ts | 6 ++ examples/svelte/basic/src/vite-env.d.ts | 2 - .../basic/{public => static}/emblem-light.svg | 0 examples/svelte/basic/svelte.config.js | 16 +++-- examples/svelte/basic/tsconfig.json | 28 ++++----- examples/svelte/basic/tsconfig.node.json | 8 --- examples/svelte/basic/vite.config.ts | 13 +++-- examples/svelte/hydration/src/lib/data.ts | 16 ----- examples/svelte/hydration/src/lib/store.ts | 4 -- .../hydration/src/routes/+layout.svelte | 19 ------ .../svelte/hydration/src/routes/+layout.ts | 1 - .../svelte/hydration/src/routes/+page.svelte | 31 ---------- examples/svelte/hydration/src/routes/+page.ts | 16 ----- .../hydration/src/routes/api/data/+server.ts | 29 ---------- .../load-more-infinite-scroll/.gitignore | 32 +++------- .../load-more-infinite-scroll/README.md | 58 ++++++++----------- .../load-more-infinite-scroll/index.html | 13 ----- .../load-more-infinite-scroll/package.json | 12 ++-- .../load-more-infinite-scroll/src/App.svelte | 13 ----- .../load-more-infinite-scroll/src/app.d.ts | 9 +++ .../load-more-infinite-scroll/src/app.html | 12 ++++ .../src/assets/svelte.svg | 1 - .../load-more-infinite-scroll/src/main.ts | 8 --- .../src/routes/+layout.svelte | 19 ++++++ .../src/routes/+page.svelte | 6 ++ .../src/vite-env.d.ts | 2 - .../static/emblem-light.svg | 0 .../svelte.config.js | 18 ++++-- .../load-more-infinite-scroll/tsconfig.json | 28 ++++----- .../tsconfig.node.json | 8 --- .../load-more-infinite-scroll/vite.config.ts | 13 +++-- .../package.json | 8 +-- .../src/routes/+layout.svelte | 9 ++- .../src/routes/+layout.ts | 1 - examples/svelte/playground/package.json | 2 +- .../playground/src/routes/+layout.svelte | 9 ++- .../svelte/playground/src/routes/+layout.ts | 1 - examples/svelte/simple/package.json | 4 +- examples/svelte/{hydration => ssr}/.gitignore | 0 examples/svelte/{hydration => ssr}/README.md | 0 .../svelte/{hydration => ssr}/package.json | 10 ++-- .../svelte/{hydration => ssr}/src/app.css | 10 ++-- examples/svelte/ssr/src/app.d.ts | 9 +++ examples/svelte/ssr/src/app.html | 11 ++++ .../{hydration => ssr}/src/lib/Post.svelte | 11 ++-- .../{hydration => ssr}/src/lib/Posts.svelte | 9 ++- examples/svelte/ssr/src/lib/data.ts | 15 +++++ examples/svelte/ssr/src/lib/types.ts | 5 ++ examples/svelte/ssr/src/routes/+layout.svelte | 13 +++++ examples/svelte/ssr/src/routes/+layout.ts | 15 +++++ examples/svelte/ssr/src/routes/+page.svelte | 6 ++ examples/svelte/ssr/src/routes/+page.ts | 11 ++++ .../ssr/src/routes/[postId]/+page.svelte | 8 +++ .../svelte/ssr/src/routes/[postId]/+page.ts | 15 +++++ .../public => ssr/static}/emblem-light.svg | 0 .../{hydration => ssr}/svelte.config.js | 0 .../svelte/{hydration => ssr}/tsconfig.json | 0 .../svelte/{hydration => ssr}/vite.config.ts | 0 examples/svelte/star-wars/package.json | 2 +- .../star-wars/src/routes/+layout.svelte | 15 +++-- .../svelte/star-wars/src/routes/+layout.ts | 1 - pnpm-lock.yaml | 58 +++++++++---------- 86 files changed, 498 insertions(+), 514 deletions(-) delete mode 100644 examples/svelte/auto-refetching/src/routes/+layout.ts delete mode 100644 examples/svelte/basic/index.html delete mode 100644 examples/svelte/basic/src/App.svelte rename examples/svelte/{hydration => basic}/src/app.d.ts (100%) rename examples/svelte/{hydration => basic}/src/app.html (100%) delete mode 100644 examples/svelte/basic/src/assets/svelte.svg delete mode 100644 examples/svelte/basic/src/lib/BasicQuery.svelte create mode 100644 examples/svelte/basic/src/lib/types.ts delete mode 100644 examples/svelte/basic/src/main.ts create mode 100644 examples/svelte/basic/src/routes/+layout.svelte create mode 100644 examples/svelte/basic/src/routes/+page.svelte create mode 100644 examples/svelte/basic/src/routes/[postId]/+page.svelte create mode 100644 examples/svelte/basic/src/routes/[postId]/+page.ts delete mode 100644 examples/svelte/basic/src/vite-env.d.ts rename examples/svelte/basic/{public => static}/emblem-light.svg (100%) delete mode 100644 examples/svelte/basic/tsconfig.node.json delete mode 100644 examples/svelte/hydration/src/lib/data.ts delete mode 100644 examples/svelte/hydration/src/lib/store.ts delete mode 100644 examples/svelte/hydration/src/routes/+layout.svelte delete mode 100644 examples/svelte/hydration/src/routes/+layout.ts delete mode 100644 examples/svelte/hydration/src/routes/+page.svelte delete mode 100644 examples/svelte/hydration/src/routes/+page.ts delete mode 100644 examples/svelte/hydration/src/routes/api/data/+server.ts delete mode 100644 examples/svelte/load-more-infinite-scroll/index.html delete mode 100644 examples/svelte/load-more-infinite-scroll/src/App.svelte create mode 100644 examples/svelte/load-more-infinite-scroll/src/app.d.ts create mode 100644 examples/svelte/load-more-infinite-scroll/src/app.html delete mode 100644 examples/svelte/load-more-infinite-scroll/src/assets/svelte.svg delete mode 100644 examples/svelte/load-more-infinite-scroll/src/main.ts create mode 100644 examples/svelte/load-more-infinite-scroll/src/routes/+layout.svelte create mode 100644 examples/svelte/load-more-infinite-scroll/src/routes/+page.svelte delete mode 100644 examples/svelte/load-more-infinite-scroll/src/vite-env.d.ts rename examples/svelte/{hydration => load-more-infinite-scroll}/static/emblem-light.svg (100%) delete mode 100644 examples/svelte/load-more-infinite-scroll/tsconfig.node.json delete mode 100644 examples/svelte/optimistic-updates-typescript/src/routes/+layout.ts delete mode 100644 examples/svelte/playground/src/routes/+layout.ts rename examples/svelte/{hydration => ssr}/.gitignore (100%) rename examples/svelte/{hydration => ssr}/README.md (100%) rename examples/svelte/{hydration => ssr}/package.json (79%) rename examples/svelte/{hydration => ssr}/src/app.css (94%) create mode 100644 examples/svelte/ssr/src/app.d.ts create mode 100644 examples/svelte/ssr/src/app.html rename examples/svelte/{hydration => ssr}/src/lib/Post.svelte (68%) rename examples/svelte/{hydration => ssr}/src/lib/Posts.svelte (88%) create mode 100644 examples/svelte/ssr/src/lib/data.ts create mode 100644 examples/svelte/ssr/src/lib/types.ts create mode 100644 examples/svelte/ssr/src/routes/+layout.svelte create mode 100644 examples/svelte/ssr/src/routes/+layout.ts create mode 100644 examples/svelte/ssr/src/routes/+page.svelte create mode 100644 examples/svelte/ssr/src/routes/+page.ts create mode 100644 examples/svelte/ssr/src/routes/[postId]/+page.svelte create mode 100644 examples/svelte/ssr/src/routes/[postId]/+page.ts rename examples/svelte/{load-more-infinite-scroll/public => ssr/static}/emblem-light.svg (100%) rename examples/svelte/{hydration => ssr}/svelte.config.js (100%) rename examples/svelte/{hydration => ssr}/tsconfig.json (100%) rename examples/svelte/{hydration => ssr}/vite.config.ts (100%) delete mode 100644 examples/svelte/star-wars/src/routes/+layout.ts diff --git a/docs/config.json b/docs/config.json index 48ffb31ff4..95329df12e 100644 --- a/docs/config.json +++ b/docs/config.json @@ -720,6 +720,10 @@ "label": "Auto Refetching / Polling / Realtime", "to": "svelte/examples/svelte/auto-refetching" }, + { + "label": "SSR", + "to": "svelte/examples/svelte/ssr" + }, { "label": "Optimistic Updates in TypeScript", "to": "svelte/examples/svelte/optimistic-updates-typescript" @@ -735,10 +739,6 @@ { "label": "Infinite Queries", "to": "svelte/examples/svelte/load-more-infinite-scroll" - }, - { - "label": "Hydration", - "to": "svelte/examples/svelte/hydration" } ] } diff --git a/docs/svelte/overview.md b/docs/svelte/overview.md index 54676713e3..79e40a8c53 100644 --- a/docs/svelte/overview.md +++ b/docs/svelte/overview.md @@ -47,6 +47,10 @@ Then call any function (e.g. createQuery) from any component: ``` +## SvelteKit + +If you are using SvelteKit, please have a look at [SSR & SvelteKit](./ssr). + ## Available Functions Svelte Query offers useful functions and components that will make managing server state in Svelte apps easier. @@ -67,3 +71,4 @@ Svelte Query offers useful functions and components that will make managing serv Svelte Query offers an API similar to React Query, but there are some key differences to be mindful of. - Many of the functions in Svelte Query return a Svelte store. To access values on these stores reactively, you need to prefix the store with a `$`. You can learn more about Svelte stores [here](https://svelte.dev/tutorial/writable-stores). +- If your query or mutation depends on variables, you must assign it reactively. You can read more about this [here](./reactivity). diff --git a/docs/svelte/ssr.md b/docs/svelte/ssr.md index 40e0fde3da..84e21596be 100644 --- a/docs/svelte/ssr.md +++ b/docs/svelte/ssr.md @@ -3,17 +3,39 @@ id: overview title: SSR and SvelteKit --- -Svelte Query supports two ways of prefetching data on the server and passing that to the client with SvelteKit. +## Setup -## Caveat +SvelteKit defaults to rendering routes with SSR. Because of this, you need to disable the query on the server. Otherwise, your query will continue executing on the server asynchronously, even after the HTML has been sent to the client. -SvelteKit defaults to rendering routes with SSR. Unless you are using one of the below solutions, you need to disable the query on the server. Otherwise, your query will continue executing on the server asynchronously, even after the HTML has been sent to the client. +The recommended way to achieve this is to use the `browser` module from SvelteKit in your `QueryClient` object. This will not disable `queryClient.prefetchQuery()`, which is used in one of the solutions below. -One way to achieve this is to `import { browser } from '$app/environment'` and add `enabled: browser` to the options of `createQuery`. This will set the query to disabled on the server, but enabled on the client. +```markdown + -Another way to achieve this is using page options. For that page or layout, you should set `export const ssr = false` in either `+page.ts` or `+layout.ts`. You can read more about using this option [here](https://kit.svelte.dev/docs/page-options#ssr). + + + +``` -## Using `initialData` +## Prefetching data + +Svelte Query supports two ways of prefetching data on the server and passing that to the client with SvelteKit. + +If you wish to view the ideal SSR setup, please have a look at the [SSR example](../examples/svelte/ssr). + + +### Using `initialData` Together with SvelteKit's [`load`](https://kit.svelte.dev/docs/load), you can pass the data loaded server-side into `createQuery`'s' `initialData` option: @@ -54,11 +76,12 @@ Cons: - If you are calling `createQuery` with the same query in multiple locations, you need to pass `initialData` to all of them - There is no way to know at what time the query was fetched on the server, so `dataUpdatedAt` and determining if the query needs refetching is based on when the page loaded instead -## Using `prefetchQuery` +### Using `prefetchQuery` Svelte Query supports prefetching queries on the server. Using this setup below, you can fetch data and pass it into QueryClientProvider before it is sent to the user's browser. Therefore, this data is already available in the cache, and no initial fetch occurs client-side. **src/routes/+layout.ts** + ```ts import { QueryClient } from '@tanstack/svelte-query' import type { LayoutLoad } from './$types' @@ -70,6 +93,7 @@ export const load: LayoutLoad = async () => { ``` **src/routes/+layout.svelte** + ```markdown diff --git a/examples/svelte/auto-refetching/src/routes/+layout.ts b/examples/svelte/auto-refetching/src/routes/+layout.ts deleted file mode 100644 index 62ad4e4f47..0000000000 --- a/examples/svelte/auto-refetching/src/routes/+layout.ts +++ /dev/null @@ -1 +0,0 @@ -export const ssr = false diff --git a/examples/svelte/basic/.gitignore b/examples/svelte/basic/.gitignore index 59362fd3fa..6fd24c7d48 100644 --- a/examples/svelte/basic/.gitignore +++ b/examples/svelte/basic/.gitignore @@ -1,24 +1,9 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - +.DS_Store node_modules -dist -dist-ssr -*.local +/build +/.svelte-kit +/package +.env +.env.* +!.env.example !lib/ - -# Editor directories and files -.vscode -.idea -.DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? diff --git a/examples/svelte/basic/README.md b/examples/svelte/basic/README.md index 4ef762ffec..5c91169b0c 100644 --- a/examples/svelte/basic/README.md +++ b/examples/svelte/basic/README.md @@ -1,48 +1,38 @@ -# Svelte + TS + Vite +# create-svelte -This template should help get you started developing with Svelte and TypeScript in Vite. +Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). -## Recommended IDE Setup +## Creating a project -[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). +If you're seeing this, you've probably already done this step. Congrats! -## Need an official Svelte framework? +```bash +# create a new project in the current directory +npm create svelte@latest -Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more. - -## Technical considerations - -**Why use this over SvelteKit?** - -- It brings its own routing solution which might not be preferable for some users. -- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app. - `vite dev` and `vite build` wouldn't work in a SvelteKit environment, for example. - -This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project. - -Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate. - -**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?** +# create a new project in my-app +npm create svelte@latest my-app +``` -Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information. +## Developing -**Why include `.vscode/extensions.json`?** +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: -Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project. +```bash +npm run dev -**Why enable `allowJs` in the TS template?** +# or start the server and open the app in a new browser tab +npm run dev -- --open +``` -While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant. +## Building -**Why is HMR not preserving my local component state?** +To create a production version of your app: -HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr). +```bash +npm run build +``` -If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR. +You can preview the production build with `npm run preview`. -```ts -// store.ts -// An extremely simple external store -import { writable } from 'svelte/store' -export default writable(0) -``` +> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. diff --git a/examples/svelte/basic/index.html b/examples/svelte/basic/index.html deleted file mode 100644 index 8fe436406e..0000000000 --- a/examples/svelte/basic/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite + Svelte + TS - - -
- - - diff --git a/examples/svelte/basic/package.json b/examples/svelte/basic/package.json index e109a9256e..49d0649853 100644 --- a/examples/svelte/basic/package.json +++ b/examples/svelte/basic/package.json @@ -1,20 +1,20 @@ { "name": "@tanstack/query-example-svelte-basic", "private": true, - "version": "0.0.0", + "version": "0.0.1", "type": "module", "scripts": { - "dev": "vite", + "dev": "vite dev", "build": "vite build", "preview": "vite preview", - "check": "svelte-check --tsconfig ./tsconfig.json" + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json" }, "dependencies": { - "@tanstack/svelte-query": "^4.12.0" + "@tanstack/svelte-query": "^4.20.0" }, "devDependencies": { - "@sveltejs/vite-plugin-svelte": "^2.0.2", - "@tsconfig/svelte": "^3.0.0", + "@sveltejs/adapter-auto": "^1.0.0", + "@sveltejs/kit": "^1.0.0", "svelte": "^3.54.0", "svelte-check": "^2.9.2", "tslib": "^2.4.1", diff --git a/examples/svelte/basic/src/App.svelte b/examples/svelte/basic/src/App.svelte deleted file mode 100644 index 33c1c6e297..0000000000 --- a/examples/svelte/basic/src/App.svelte +++ /dev/null @@ -1,13 +0,0 @@ - - - -
-

Basic Query

- -
- diff --git a/examples/svelte/basic/src/app.css b/examples/svelte/basic/src/app.css index bcc7233dd1..d301f1b2a3 100644 --- a/examples/svelte/basic/src/app.css +++ b/examples/svelte/basic/src/app.css @@ -41,14 +41,14 @@ h1 { padding: 2em; } -#app { +main { max-width: 1280px; margin: 0 auto; padding: 2rem; text-align: center; } -button { +.button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; @@ -59,11 +59,11 @@ button { cursor: pointer; transition: border-color 0.25s; } -button:hover { +.button:hover { border-color: #646cff; } -button:focus, -button:focus-visible { +.button:focus, +.button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } @@ -75,7 +75,7 @@ button:focus-visible { a:hover { color: #747bff; } - button { + .button { background-color: #f9f9f9; } } diff --git a/examples/svelte/hydration/src/app.d.ts b/examples/svelte/basic/src/app.d.ts similarity index 100% rename from examples/svelte/hydration/src/app.d.ts rename to examples/svelte/basic/src/app.d.ts diff --git a/examples/svelte/hydration/src/app.html b/examples/svelte/basic/src/app.html similarity index 100% rename from examples/svelte/hydration/src/app.html rename to examples/svelte/basic/src/app.html diff --git a/examples/svelte/basic/src/assets/svelte.svg b/examples/svelte/basic/src/assets/svelte.svg deleted file mode 100644 index c5e08481f8..0000000000 --- a/examples/svelte/basic/src/assets/svelte.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/svelte/basic/src/lib/BasicQuery.svelte b/examples/svelte/basic/src/lib/BasicQuery.svelte deleted file mode 100644 index 3f14271a5b..0000000000 --- a/examples/svelte/basic/src/lib/BasicQuery.svelte +++ /dev/null @@ -1,15 +0,0 @@ - - -{#if postId > -1} - -{:else} - -{/if} diff --git a/examples/svelte/basic/src/lib/Post.svelte b/examples/svelte/basic/src/lib/Post.svelte index 1c13cf4be3..87b0f3234d 100644 --- a/examples/svelte/basic/src/lib/Post.svelte +++ b/examples/svelte/basic/src/lib/Post.svelte @@ -1,22 +1,19 @@
- + Back
{#if !postId || $post.isLoading} Loading... diff --git a/examples/svelte/basic/src/lib/Posts.svelte b/examples/svelte/basic/src/lib/Posts.svelte index 0d3d63dad5..83b4112f66 100644 --- a/examples/svelte/basic/src/lib/Posts.svelte +++ b/examples/svelte/basic/src/lib/Posts.svelte @@ -1,11 +1,11 @@ + + +
+ +
+ diff --git a/examples/svelte/basic/src/routes/+page.svelte b/examples/svelte/basic/src/routes/+page.svelte new file mode 100644 index 0000000000..293f360067 --- /dev/null +++ b/examples/svelte/basic/src/routes/+page.svelte @@ -0,0 +1,6 @@ + + +

Basic Query

+ diff --git a/examples/svelte/basic/src/routes/[postId]/+page.svelte b/examples/svelte/basic/src/routes/[postId]/+page.svelte new file mode 100644 index 0000000000..b68acc0bc0 --- /dev/null +++ b/examples/svelte/basic/src/routes/[postId]/+page.svelte @@ -0,0 +1,8 @@ + + + diff --git a/examples/svelte/basic/src/routes/[postId]/+page.ts b/examples/svelte/basic/src/routes/[postId]/+page.ts new file mode 100644 index 0000000000..ea67748ad4 --- /dev/null +++ b/examples/svelte/basic/src/routes/[postId]/+page.ts @@ -0,0 +1,6 @@ +import type { PageLoad } from './$types' + +export const load: PageLoad = async ({ params }) => { + const postId = parseInt(params.postId) + return { postId } +} diff --git a/examples/svelte/basic/src/vite-env.d.ts b/examples/svelte/basic/src/vite-env.d.ts deleted file mode 100644 index 4078e7476a..0000000000 --- a/examples/svelte/basic/src/vite-env.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -/// -/// diff --git a/examples/svelte/basic/public/emblem-light.svg b/examples/svelte/basic/static/emblem-light.svg similarity index 100% rename from examples/svelte/basic/public/emblem-light.svg rename to examples/svelte/basic/static/emblem-light.svg diff --git a/examples/svelte/basic/svelte.config.js b/examples/svelte/basic/svelte.config.js index 49c64ac5bf..836e30422d 100644 --- a/examples/svelte/basic/svelte.config.js +++ b/examples/svelte/basic/svelte.config.js @@ -1,7 +1,15 @@ -import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' +import adapter from '@sveltejs/adapter-auto'; +import { vitePreprocess } from '@sveltejs/kit/vite'; -export default { +/** @type {import('@sveltejs/kit').Config} */ +const config = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors - preprocess: vitePreprocess() -} + preprocess: vitePreprocess(), + + kit: { + adapter: adapter() + } +}; + +export default config; diff --git a/examples/svelte/basic/tsconfig.json b/examples/svelte/basic/tsconfig.json index d38303196a..794b95b642 100644 --- a/examples/svelte/basic/tsconfig.json +++ b/examples/svelte/basic/tsconfig.json @@ -1,21 +1,17 @@ { - "extends": "@tsconfig/svelte/tsconfig.json", + "extends": "./.svelte-kit/tsconfig.json", "compilerOptions": { - "target": "ESNext", - "useDefineForClassFields": true, - "module": "ESNext", - "resolveJsonModule": true, - "baseUrl": ".", - /** - * Typecheck JS in `.svelte` and `.js` files by default. - * Disable checkJs if you'd like to use dynamic types in JS. - * Note that setting allowJs false does not prevent the use - * of JS in `.svelte` files. - */ "allowJs": true, "checkJs": true, - "isolatedModules": true - }, - "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], - "references": [{ "path": "./tsconfig.node.json" }] + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true + } + // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias + // + // 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 } diff --git a/examples/svelte/basic/tsconfig.node.json b/examples/svelte/basic/tsconfig.node.json deleted file mode 100644 index 65dbdb96ae..0000000000 --- a/examples/svelte/basic/tsconfig.node.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "composite": true, - "module": "ESNext", - "moduleResolution": "Node" - }, - "include": ["vite.config.ts"] -} diff --git a/examples/svelte/basic/vite.config.ts b/examples/svelte/basic/vite.config.ts index 401b4d4bd6..f2eb6d93cf 100644 --- a/examples/svelte/basic/vite.config.ts +++ b/examples/svelte/basic/vite.config.ts @@ -1,7 +1,8 @@ -import { defineConfig } from 'vite' -import { svelte } from '@sveltejs/vite-plugin-svelte' +import { sveltekit } from '@sveltejs/kit/vite'; +import type { UserConfig } from 'vite'; -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [svelte()] -}) +const config: UserConfig = { + plugins: [sveltekit()] +}; + +export default config; diff --git a/examples/svelte/hydration/src/lib/data.ts b/examples/svelte/hydration/src/lib/data.ts deleted file mode 100644 index d401b35752..0000000000 --- a/examples/svelte/hydration/src/lib/data.ts +++ /dev/null @@ -1,16 +0,0 @@ -export type Post = { id: number; title: string; body: string } - -export const limit = 10 - -export const getPosts = async (limit: number) => { - const parsed = await fetch('https://jsonplaceholder.typicode.com/posts').then( - (r) => r.json(), - ) - const result = parsed.filter((x: Post) => x.id <= limit) - return result -} - -export const getPostById = async (id: number) => - await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then((r) => - r.json(), - ) diff --git a/examples/svelte/hydration/src/lib/store.ts b/examples/svelte/hydration/src/lib/store.ts deleted file mode 100644 index 79ab749fdf..0000000000 --- a/examples/svelte/hydration/src/lib/store.ts +++ /dev/null @@ -1,4 +0,0 @@ -import type { DehydratedState } from '@tanstack/query-core' -import { writable } from 'svelte/store' - -export const dehydratedState = writable() diff --git a/examples/svelte/hydration/src/routes/+layout.svelte b/examples/svelte/hydration/src/routes/+layout.svelte deleted file mode 100644 index 97f28d6ee6..0000000000 --- a/examples/svelte/hydration/src/routes/+layout.svelte +++ /dev/null @@ -1,19 +0,0 @@ - - - - -
- -
- - diff --git a/examples/svelte/hydration/src/routes/+layout.ts b/examples/svelte/hydration/src/routes/+layout.ts deleted file mode 100644 index b40fb51719..0000000000 --- a/examples/svelte/hydration/src/routes/+layout.ts +++ /dev/null @@ -1 +0,0 @@ -export const ssr = true diff --git a/examples/svelte/hydration/src/routes/+page.svelte b/examples/svelte/hydration/src/routes/+page.svelte deleted file mode 100644 index 26ce099089..0000000000 --- a/examples/svelte/hydration/src/routes/+page.svelte +++ /dev/null @@ -1,31 +0,0 @@ - - -

Basic Query with Hydration

-{#if postId > -1} - -{:else} - -{/if} - - diff --git a/examples/svelte/hydration/src/routes/+page.ts b/examples/svelte/hydration/src/routes/+page.ts deleted file mode 100644 index e1a3833970..0000000000 --- a/examples/svelte/hydration/src/routes/+page.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { dehydrate, QueryClient } from '@tanstack/svelte-query' -import { getPosts, limit } from '$lib/data.js' -import type { PageLoad } from './$types' - -export const load: PageLoad = async () => { - const queryClient = new QueryClient() - - await queryClient.prefetchQuery({ - queryKey: ['posts', limit], - queryFn: () => getPosts(limit), - }) - - return { - dehydratedState: dehydrate(queryClient), - } -} diff --git a/examples/svelte/hydration/src/routes/api/data/+server.ts b/examples/svelte/hydration/src/routes/api/data/+server.ts deleted file mode 100644 index 301018f5cc..0000000000 --- a/examples/svelte/hydration/src/routes/api/data/+server.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { json, type RequestHandler } from '@sveltejs/kit' - -type Todo = { - id: string - text: string -} - -const items: Todo[] = [] - -/** @type {import('./$types').RequestHandler} */ -export const GET: RequestHandler = async (req) => { - await new Promise((r) => setTimeout(r, 1000)) - return json({ ts: Date.now(), items }, { status: 200 }) -} - -/** @type {import('./$types').RequestHandler} */ -export const POST: RequestHandler = async ({ request }) => { - const { text } = await request.json() - - if (Math.random() > 0.7) { - json({ message: 'Could not add item!' }, { status: 500 }) - } - const newTodo = { - id: Math.random().toString(), - text: text.toUpperCase() as string, - } - items.push(newTodo) - return json(newTodo, { status: 200 }) -} diff --git a/examples/svelte/load-more-infinite-scroll/.gitignore b/examples/svelte/load-more-infinite-scroll/.gitignore index 59362fd3fa..6635cf5542 100644 --- a/examples/svelte/load-more-infinite-scroll/.gitignore +++ b/examples/svelte/load-more-infinite-scroll/.gitignore @@ -1,24 +1,10 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -dist -dist-ssr -*.local -!lib/ - -# Editor directories and files -.vscode -.idea .DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example +vite.config.js.timestamp-* +vite.config.ts.timestamp-* diff --git a/examples/svelte/load-more-infinite-scroll/README.md b/examples/svelte/load-more-infinite-scroll/README.md index 4ef762ffec..5c91169b0c 100644 --- a/examples/svelte/load-more-infinite-scroll/README.md +++ b/examples/svelte/load-more-infinite-scroll/README.md @@ -1,48 +1,38 @@ -# Svelte + TS + Vite +# create-svelte -This template should help get you started developing with Svelte and TypeScript in Vite. +Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). -## Recommended IDE Setup +## Creating a project -[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). +If you're seeing this, you've probably already done this step. Congrats! -## Need an official Svelte framework? +```bash +# create a new project in the current directory +npm create svelte@latest -Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more. - -## Technical considerations - -**Why use this over SvelteKit?** - -- It brings its own routing solution which might not be preferable for some users. -- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app. - `vite dev` and `vite build` wouldn't work in a SvelteKit environment, for example. - -This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project. - -Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate. - -**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?** +# create a new project in my-app +npm create svelte@latest my-app +``` -Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information. +## Developing -**Why include `.vscode/extensions.json`?** +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: -Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project. +```bash +npm run dev -**Why enable `allowJs` in the TS template?** +# or start the server and open the app in a new browser tab +npm run dev -- --open +``` -While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant. +## Building -**Why is HMR not preserving my local component state?** +To create a production version of your app: -HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr). +```bash +npm run build +``` -If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR. +You can preview the production build with `npm run preview`. -```ts -// store.ts -// An extremely simple external store -import { writable } from 'svelte/store' -export default writable(0) -``` +> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. diff --git a/examples/svelte/load-more-infinite-scroll/index.html b/examples/svelte/load-more-infinite-scroll/index.html deleted file mode 100644 index 8fe436406e..0000000000 --- a/examples/svelte/load-more-infinite-scroll/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite + Svelte + TS - - -
- - - diff --git a/examples/svelte/load-more-infinite-scroll/package.json b/examples/svelte/load-more-infinite-scroll/package.json index eb914d6068..29f4191601 100644 --- a/examples/svelte/load-more-infinite-scroll/package.json +++ b/examples/svelte/load-more-infinite-scroll/package.json @@ -1,20 +1,20 @@ { "name": "@tanstack/query-example-svelte-load-more-infinite-scroll", "private": true, - "version": "0.0.0", + "version": "0.0.1", "type": "module", "scripts": { - "dev": "vite", + "dev": "vite dev", "build": "vite build", "preview": "vite preview", - "check": "svelte-check --tsconfig ./tsconfig.json" + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json" }, "dependencies": { - "@tanstack/svelte-query": "^4.12.0" + "@tanstack/svelte-query": "^4.20.0" }, "devDependencies": { - "@sveltejs/vite-plugin-svelte": "^2.0.2", - "@tsconfig/svelte": "^3.0.0", + "@sveltejs/adapter-auto": "^1.0.0", + "@sveltejs/kit": "^1.0.0", "svelte": "^3.54.0", "svelte-check": "^2.9.2", "tslib": "^2.4.1", diff --git a/examples/svelte/load-more-infinite-scroll/src/App.svelte b/examples/svelte/load-more-infinite-scroll/src/App.svelte deleted file mode 100644 index 1c3b2c1007..0000000000 --- a/examples/svelte/load-more-infinite-scroll/src/App.svelte +++ /dev/null @@ -1,13 +0,0 @@ - - - -
-

Infinte Load More

- -
- diff --git a/examples/svelte/load-more-infinite-scroll/src/app.d.ts b/examples/svelte/load-more-infinite-scroll/src/app.d.ts new file mode 100644 index 0000000000..1cea0dcf2b --- /dev/null +++ b/examples/svelte/load-more-infinite-scroll/src/app.d.ts @@ -0,0 +1,9 @@ +// See https://kit.svelte.dev/docs/types#app +// for information about these interfaces +// and what to do when importing types +declare namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface Platform {} +} diff --git a/examples/svelte/load-more-infinite-scroll/src/app.html b/examples/svelte/load-more-infinite-scroll/src/app.html new file mode 100644 index 0000000000..117bd02615 --- /dev/null +++ b/examples/svelte/load-more-infinite-scroll/src/app.html @@ -0,0 +1,12 @@ + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + diff --git a/examples/svelte/load-more-infinite-scroll/src/assets/svelte.svg b/examples/svelte/load-more-infinite-scroll/src/assets/svelte.svg deleted file mode 100644 index c5e08481f8..0000000000 --- a/examples/svelte/load-more-infinite-scroll/src/assets/svelte.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/svelte/load-more-infinite-scroll/src/main.ts b/examples/svelte/load-more-infinite-scroll/src/main.ts deleted file mode 100644 index 8a909a15a0..0000000000 --- a/examples/svelte/load-more-infinite-scroll/src/main.ts +++ /dev/null @@ -1,8 +0,0 @@ -import './app.css' -import App from './App.svelte' - -const app = new App({ - target: document.getElementById('app'), -}) - -export default app diff --git a/examples/svelte/load-more-infinite-scroll/src/routes/+layout.svelte b/examples/svelte/load-more-infinite-scroll/src/routes/+layout.svelte new file mode 100644 index 0000000000..8c686d17ed --- /dev/null +++ b/examples/svelte/load-more-infinite-scroll/src/routes/+layout.svelte @@ -0,0 +1,19 @@ + + + +
+ +
+ diff --git a/examples/svelte/load-more-infinite-scroll/src/routes/+page.svelte b/examples/svelte/load-more-infinite-scroll/src/routes/+page.svelte new file mode 100644 index 0000000000..14c2b4abbd --- /dev/null +++ b/examples/svelte/load-more-infinite-scroll/src/routes/+page.svelte @@ -0,0 +1,6 @@ + + +

Infinte Load More

+ diff --git a/examples/svelte/load-more-infinite-scroll/src/vite-env.d.ts b/examples/svelte/load-more-infinite-scroll/src/vite-env.d.ts deleted file mode 100644 index 4078e7476a..0000000000 --- a/examples/svelte/load-more-infinite-scroll/src/vite-env.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -/// -/// diff --git a/examples/svelte/hydration/static/emblem-light.svg b/examples/svelte/load-more-infinite-scroll/static/emblem-light.svg similarity index 100% rename from examples/svelte/hydration/static/emblem-light.svg rename to examples/svelte/load-more-infinite-scroll/static/emblem-light.svg diff --git a/examples/svelte/load-more-infinite-scroll/svelte.config.js b/examples/svelte/load-more-infinite-scroll/svelte.config.js index 49c64ac5bf..05e80f6c7d 100644 --- a/examples/svelte/load-more-infinite-scroll/svelte.config.js +++ b/examples/svelte/load-more-infinite-scroll/svelte.config.js @@ -1,7 +1,15 @@ -import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' +import adapter from '@sveltejs/adapter-auto'; +import { vitePreprocess } from '@sveltejs/kit/vite'; -export default { - // Consult https://github.com/sveltejs/svelte-preprocess +/** @type {import('@sveltejs/kit').Config} */ +const config = { + // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors - preprocess: vitePreprocess() -} + preprocess: vitePreprocess(), + + kit: { + adapter: adapter() + } +}; + +export default config; diff --git a/examples/svelte/load-more-infinite-scroll/tsconfig.json b/examples/svelte/load-more-infinite-scroll/tsconfig.json index d38303196a..794b95b642 100644 --- a/examples/svelte/load-more-infinite-scroll/tsconfig.json +++ b/examples/svelte/load-more-infinite-scroll/tsconfig.json @@ -1,21 +1,17 @@ { - "extends": "@tsconfig/svelte/tsconfig.json", + "extends": "./.svelte-kit/tsconfig.json", "compilerOptions": { - "target": "ESNext", - "useDefineForClassFields": true, - "module": "ESNext", - "resolveJsonModule": true, - "baseUrl": ".", - /** - * Typecheck JS in `.svelte` and `.js` files by default. - * Disable checkJs if you'd like to use dynamic types in JS. - * Note that setting allowJs false does not prevent the use - * of JS in `.svelte` files. - */ "allowJs": true, "checkJs": true, - "isolatedModules": true - }, - "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], - "references": [{ "path": "./tsconfig.node.json" }] + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true + } + // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias + // + // 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 } diff --git a/examples/svelte/load-more-infinite-scroll/tsconfig.node.json b/examples/svelte/load-more-infinite-scroll/tsconfig.node.json deleted file mode 100644 index 65dbdb96ae..0000000000 --- a/examples/svelte/load-more-infinite-scroll/tsconfig.node.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "composite": true, - "module": "ESNext", - "moduleResolution": "Node" - }, - "include": ["vite.config.ts"] -} diff --git a/examples/svelte/load-more-infinite-scroll/vite.config.ts b/examples/svelte/load-more-infinite-scroll/vite.config.ts index 401b4d4bd6..f2eb6d93cf 100644 --- a/examples/svelte/load-more-infinite-scroll/vite.config.ts +++ b/examples/svelte/load-more-infinite-scroll/vite.config.ts @@ -1,7 +1,8 @@ -import { defineConfig } from 'vite' -import { svelte } from '@sveltejs/vite-plugin-svelte' +import { sveltekit } from '@sveltejs/kit/vite'; +import type { UserConfig } from 'vite'; -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [svelte()] -}) +const config: UserConfig = { + plugins: [sveltekit()] +}; + +export default config; diff --git a/examples/svelte/optimistic-updates-typescript/package.json b/examples/svelte/optimistic-updates-typescript/package.json index 85c895df82..4ace661ad7 100644 --- a/examples/svelte/optimistic-updates-typescript/package.json +++ b/examples/svelte/optimistic-updates-typescript/package.json @@ -1,7 +1,8 @@ { "name": "@tanstack/query-example-svelte-optimistic-updates-typescript", - "version": "0.0.1", "private": true, + "version": "0.0.1", + "type": "module", "scripts": { "dev": "vite dev", "build": "vite build", @@ -9,7 +10,7 @@ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json" }, "dependencies": { - "@tanstack/svelte-query": "^4.12.0" + "@tanstack/svelte-query": "^4.20.0" }, "devDependencies": { "@sveltejs/adapter-auto": "^1.0.0", @@ -19,6 +20,5 @@ "tslib": "^2.4.1", "typescript": "^4.7.4", "vite": "^4.0.0" - }, - "type": "module" + } } diff --git a/examples/svelte/optimistic-updates-typescript/src/routes/+layout.svelte b/examples/svelte/optimistic-updates-typescript/src/routes/+layout.svelte index 26fb7c0a93..8c686d17ed 100644 --- a/examples/svelte/optimistic-updates-typescript/src/routes/+layout.svelte +++ b/examples/svelte/optimistic-updates-typescript/src/routes/+layout.svelte @@ -1,8 +1,15 @@ diff --git a/examples/svelte/optimistic-updates-typescript/src/routes/+layout.ts b/examples/svelte/optimistic-updates-typescript/src/routes/+layout.ts deleted file mode 100644 index 62ad4e4f47..0000000000 --- a/examples/svelte/optimistic-updates-typescript/src/routes/+layout.ts +++ /dev/null @@ -1 +0,0 @@ -export const ssr = false diff --git a/examples/svelte/playground/package.json b/examples/svelte/playground/package.json index 125de2873b..e34b0c2d37 100644 --- a/examples/svelte/playground/package.json +++ b/examples/svelte/playground/package.json @@ -10,7 +10,7 @@ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json" }, "dependencies": { - "@tanstack/svelte-query": "^4.12.0" + "@tanstack/svelte-query": "^4.20.0" }, "devDependencies": { "@sveltejs/adapter-auto": "^1.0.0", diff --git a/examples/svelte/playground/src/routes/+layout.svelte b/examples/svelte/playground/src/routes/+layout.svelte index fffc9a57be..8219a09ca9 100644 --- a/examples/svelte/playground/src/routes/+layout.svelte +++ b/examples/svelte/playground/src/routes/+layout.svelte @@ -1,8 +1,15 @@ diff --git a/examples/svelte/playground/src/routes/+layout.ts b/examples/svelte/playground/src/routes/+layout.ts deleted file mode 100644 index 62ad4e4f47..0000000000 --- a/examples/svelte/playground/src/routes/+layout.ts +++ /dev/null @@ -1 +0,0 @@ -export const ssr = false diff --git a/examples/svelte/simple/package.json b/examples/svelte/simple/package.json index 19d0ac364f..c28f0ff202 100644 --- a/examples/svelte/simple/package.json +++ b/examples/svelte/simple/package.json @@ -1,7 +1,7 @@ { "name": "@tanstack/query-example-svelte-simple", "private": true, - "version": "0.0.0", + "version": "0.0.1", "type": "module", "scripts": { "dev": "vite", @@ -10,7 +10,7 @@ "check": "svelte-check --tsconfig ./tsconfig.json" }, "dependencies": { - "@tanstack/svelte-query": "^4.12.0" + "@tanstack/svelte-query": "^4.20.0" }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^2.0.2", diff --git a/examples/svelte/hydration/.gitignore b/examples/svelte/ssr/.gitignore similarity index 100% rename from examples/svelte/hydration/.gitignore rename to examples/svelte/ssr/.gitignore diff --git a/examples/svelte/hydration/README.md b/examples/svelte/ssr/README.md similarity index 100% rename from examples/svelte/hydration/README.md rename to examples/svelte/ssr/README.md diff --git a/examples/svelte/hydration/package.json b/examples/svelte/ssr/package.json similarity index 79% rename from examples/svelte/hydration/package.json rename to examples/svelte/ssr/package.json index 9003457846..80dbca3531 100644 --- a/examples/svelte/hydration/package.json +++ b/examples/svelte/ssr/package.json @@ -1,7 +1,8 @@ { - "name": "@tanstack/query-example-svelte-hydration", - "version": "0.0.1", + "name": "@tanstack/query-example-svelte-ssr", "private": true, + "version": "0.0.1", + "type": "module", "scripts": { "dev": "vite dev", "build": "vite build", @@ -9,7 +10,7 @@ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json" }, "dependencies": { - "@tanstack/svelte-query": "^4.12.0" + "@tanstack/svelte-query": "^4.20.0" }, "devDependencies": { "@sveltejs/adapter-auto": "^1.0.0", @@ -19,6 +20,5 @@ "tslib": "^2.4.1", "typescript": "^4.7.4", "vite": "^4.0.0" - }, - "type": "module" + } } diff --git a/examples/svelte/hydration/src/app.css b/examples/svelte/ssr/src/app.css similarity index 94% rename from examples/svelte/hydration/src/app.css rename to examples/svelte/ssr/src/app.css index c57658b1ef..d301f1b2a3 100644 --- a/examples/svelte/hydration/src/app.css +++ b/examples/svelte/ssr/src/app.css @@ -48,7 +48,7 @@ main { text-align: center; } -button { +.button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; @@ -59,11 +59,11 @@ button { cursor: pointer; transition: border-color 0.25s; } -button:hover { +.button:hover { border-color: #646cff; } -button:focus, -button:focus-visible { +.button:focus, +.button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } @@ -75,7 +75,7 @@ button:focus-visible { a:hover { color: #747bff; } - button { + .button { background-color: #f9f9f9; } } diff --git a/examples/svelte/ssr/src/app.d.ts b/examples/svelte/ssr/src/app.d.ts new file mode 100644 index 0000000000..3e4ed2057b --- /dev/null +++ b/examples/svelte/ssr/src/app.d.ts @@ -0,0 +1,9 @@ +// See https://kit.svelte.dev/docs/types#app +// for information about these interfaces +// and what to do when importing types +declare namespace App { + // interface Locals {} + // interface PageData {} + // interface Error {} + // interface Platform {} +} diff --git a/examples/svelte/ssr/src/app.html b/examples/svelte/ssr/src/app.html new file mode 100644 index 0000000000..bf205c1085 --- /dev/null +++ b/examples/svelte/ssr/src/app.html @@ -0,0 +1,11 @@ + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + diff --git a/examples/svelte/hydration/src/lib/Post.svelte b/examples/svelte/ssr/src/lib/Post.svelte similarity index 68% rename from examples/svelte/hydration/src/lib/Post.svelte rename to examples/svelte/ssr/src/lib/Post.svelte index 1c13cf4be3..87b0f3234d 100644 --- a/examples/svelte/hydration/src/lib/Post.svelte +++ b/examples/svelte/ssr/src/lib/Post.svelte @@ -1,22 +1,19 @@
- + Back
{#if !postId || $post.isLoading} Loading... diff --git a/examples/svelte/hydration/src/lib/Posts.svelte b/examples/svelte/ssr/src/lib/Posts.svelte similarity index 88% rename from examples/svelte/hydration/src/lib/Posts.svelte rename to examples/svelte/ssr/src/lib/Posts.svelte index 0d3d63dad5..83b4112f66 100644 --- a/examples/svelte/hydration/src/lib/Posts.svelte +++ b/examples/svelte/ssr/src/lib/Posts.svelte @@ -1,11 +1,11 @@ + + +
+ +
+ diff --git a/examples/svelte/ssr/src/routes/+layout.ts b/examples/svelte/ssr/src/routes/+layout.ts new file mode 100644 index 0000000000..53b5e7ec76 --- /dev/null +++ b/examples/svelte/ssr/src/routes/+layout.ts @@ -0,0 +1,15 @@ +import { browser } from '$app/environment' +import { QueryClient } from '@tanstack/svelte-query' +import type { LayoutLoad } from './$types' + +export const load: LayoutLoad = async () => { + const queryClient = new QueryClient({ + defaultOptions: { + queries: { + enabled: browser, + }, + }, + }) + + return { queryClient } +} diff --git a/examples/svelte/ssr/src/routes/+page.svelte b/examples/svelte/ssr/src/routes/+page.svelte new file mode 100644 index 0000000000..dc95af5a51 --- /dev/null +++ b/examples/svelte/ssr/src/routes/+page.svelte @@ -0,0 +1,6 @@ + + +

Basic Query with SSR

+ diff --git a/examples/svelte/ssr/src/routes/+page.ts b/examples/svelte/ssr/src/routes/+page.ts new file mode 100644 index 0000000000..021b90ca9f --- /dev/null +++ b/examples/svelte/ssr/src/routes/+page.ts @@ -0,0 +1,11 @@ +import { getPosts } from '$lib/data' +import type { PageLoad } from './$types' + +export const load: PageLoad = async ({ parent }) => { + const { queryClient } = await parent() + + await queryClient.prefetchQuery({ + queryKey: ['posts', 10], + queryFn: () => getPosts(10), + }) +} diff --git a/examples/svelte/ssr/src/routes/[postId]/+page.svelte b/examples/svelte/ssr/src/routes/[postId]/+page.svelte new file mode 100644 index 0000000000..b68acc0bc0 --- /dev/null +++ b/examples/svelte/ssr/src/routes/[postId]/+page.svelte @@ -0,0 +1,8 @@ + + + diff --git a/examples/svelte/ssr/src/routes/[postId]/+page.ts b/examples/svelte/ssr/src/routes/[postId]/+page.ts new file mode 100644 index 0000000000..b30a7de223 --- /dev/null +++ b/examples/svelte/ssr/src/routes/[postId]/+page.ts @@ -0,0 +1,15 @@ +import { getPostById } from '$lib/data' +import type { PageLoad } from './$types' + +export const load: PageLoad = async ({ parent, params }) => { + const { queryClient } = await parent() + + const postId = parseInt(params.postId) + + await queryClient.prefetchQuery({ + queryKey: ['post', postId], + queryFn: () => getPostById(postId), + }) + + return { postId } +} diff --git a/examples/svelte/load-more-infinite-scroll/public/emblem-light.svg b/examples/svelte/ssr/static/emblem-light.svg similarity index 100% rename from examples/svelte/load-more-infinite-scroll/public/emblem-light.svg rename to examples/svelte/ssr/static/emblem-light.svg diff --git a/examples/svelte/hydration/svelte.config.js b/examples/svelte/ssr/svelte.config.js similarity index 100% rename from examples/svelte/hydration/svelte.config.js rename to examples/svelte/ssr/svelte.config.js diff --git a/examples/svelte/hydration/tsconfig.json b/examples/svelte/ssr/tsconfig.json similarity index 100% rename from examples/svelte/hydration/tsconfig.json rename to examples/svelte/ssr/tsconfig.json diff --git a/examples/svelte/hydration/vite.config.ts b/examples/svelte/ssr/vite.config.ts similarity index 100% rename from examples/svelte/hydration/vite.config.ts rename to examples/svelte/ssr/vite.config.ts diff --git a/examples/svelte/star-wars/package.json b/examples/svelte/star-wars/package.json index 9bf410b1c6..22afddea1d 100644 --- a/examples/svelte/star-wars/package.json +++ b/examples/svelte/star-wars/package.json @@ -10,7 +10,7 @@ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json" }, "dependencies": { - "@tanstack/svelte-query": "^4.12.0" + "@tanstack/svelte-query": "^4.20.0" }, "devDependencies": { "@sveltejs/adapter-auto": "^1.0.0", diff --git a/examples/svelte/star-wars/src/routes/+layout.svelte b/examples/svelte/star-wars/src/routes/+layout.svelte index 8c5c4a6ef7..36d59c23a8 100644 --- a/examples/svelte/star-wars/src/routes/+layout.svelte +++ b/examples/svelte/star-wars/src/routes/+layout.svelte @@ -1,8 +1,15 @@ @@ -13,9 +20,9 @@ diff --git a/examples/svelte/star-wars/src/routes/+layout.ts b/examples/svelte/star-wars/src/routes/+layout.ts deleted file mode 100644 index 62ad4e4f47..0000000000 --- a/examples/svelte/star-wars/src/routes/+layout.ts +++ /dev/null @@ -1 +0,0 @@ -export const ssr = false diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 624b63853b..b2a99447bc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -644,7 +644,7 @@ importers: specifiers: '@sveltejs/adapter-auto': ^1.0.0 '@sveltejs/kit': ^1.0.0 - '@tanstack/svelte-query': ^4.12.0 + '@tanstack/svelte-query': ^4.20.0 svelte: ^3.54.0 svelte-check: ^2.9.2 tslib: ^2.4.1 @@ -663,9 +663,9 @@ importers: examples/svelte/basic: specifiers: - '@sveltejs/vite-plugin-svelte': ^2.0.2 - '@tanstack/svelte-query': ^4.12.0 - '@tsconfig/svelte': ^3.0.0 + '@sveltejs/adapter-auto': ^1.0.0 + '@sveltejs/kit': ^1.0.0 + '@tanstack/svelte-query': ^4.20.0 svelte: ^3.54.0 svelte-check: ^2.9.2 tslib: ^2.4.1 @@ -674,19 +674,19 @@ importers: dependencies: '@tanstack/svelte-query': link:../../../packages/svelte-query devDependencies: - '@sveltejs/vite-plugin-svelte': 2.0.2_svelte@3.55.0+vite@4.0.4 - '@tsconfig/svelte': 3.0.0 + '@sveltejs/adapter-auto': 1.0.0_@sveltejs+kit@1.0.7 + '@sveltejs/kit': 1.0.7_svelte@3.55.0+vite@4.0.4 svelte: 3.55.0 svelte-check: 2.10.3_svelte@3.55.0 tslib: 2.4.1 typescript: 4.8.4 vite: 4.0.4 - examples/svelte/hydration: + examples/svelte/load-more-infinite-scroll: specifiers: '@sveltejs/adapter-auto': ^1.0.0 '@sveltejs/kit': ^1.0.0 - '@tanstack/svelte-query': ^4.12.0 + '@tanstack/svelte-query': ^4.20.0 svelte: ^3.54.0 svelte-check: ^2.9.2 tslib: ^2.4.1 @@ -703,11 +703,11 @@ importers: typescript: 4.8.4 vite: 4.0.4 - examples/svelte/load-more-infinite-scroll: + examples/svelte/optimistic-updates-typescript: specifiers: - '@sveltejs/vite-plugin-svelte': ^2.0.2 - '@tanstack/svelte-query': ^4.12.0 - '@tsconfig/svelte': ^3.0.0 + '@sveltejs/adapter-auto': ^1.0.0 + '@sveltejs/kit': ^1.0.0 + '@tanstack/svelte-query': ^4.20.0 svelte: ^3.54.0 svelte-check: ^2.9.2 tslib: ^2.4.1 @@ -716,19 +716,19 @@ importers: dependencies: '@tanstack/svelte-query': link:../../../packages/svelte-query devDependencies: - '@sveltejs/vite-plugin-svelte': 2.0.2_svelte@3.55.0+vite@4.0.4 - '@tsconfig/svelte': 3.0.0 + '@sveltejs/adapter-auto': 1.0.0_@sveltejs+kit@1.0.7 + '@sveltejs/kit': 1.0.7_svelte@3.55.0+vite@4.0.4 svelte: 3.55.0 svelte-check: 2.10.3_svelte@3.55.0 tslib: 2.4.1 typescript: 4.8.4 vite: 4.0.4 - examples/svelte/optimistic-updates-typescript: + examples/svelte/playground: specifiers: '@sveltejs/adapter-auto': ^1.0.0 '@sveltejs/kit': ^1.0.0 - '@tanstack/svelte-query': ^4.12.0 + '@tanstack/svelte-query': ^4.20.0 svelte: ^3.54.0 svelte-check: ^2.9.2 tslib: ^2.4.1 @@ -745,11 +745,11 @@ importers: typescript: 4.8.4 vite: 4.0.4 - examples/svelte/playground: + examples/svelte/simple: specifiers: - '@sveltejs/adapter-auto': ^1.0.0 - '@sveltejs/kit': ^1.0.0 - '@tanstack/svelte-query': ^4.12.0 + '@sveltejs/vite-plugin-svelte': ^2.0.2 + '@tanstack/svelte-query': ^4.20.0 + '@tsconfig/svelte': ^3.0.0 svelte: ^3.54.0 svelte-check: ^2.9.2 tslib: ^2.4.1 @@ -758,19 +758,19 @@ importers: dependencies: '@tanstack/svelte-query': link:../../../packages/svelte-query devDependencies: - '@sveltejs/adapter-auto': 1.0.0_@sveltejs+kit@1.0.7 - '@sveltejs/kit': 1.0.7_svelte@3.55.0+vite@4.0.4 + '@sveltejs/vite-plugin-svelte': 2.0.2_svelte@3.55.0+vite@4.0.4 + '@tsconfig/svelte': 3.0.0 svelte: 3.55.0 svelte-check: 2.10.3_svelte@3.55.0 tslib: 2.4.1 typescript: 4.8.4 vite: 4.0.4 - examples/svelte/simple: + examples/svelte/ssr: specifiers: - '@sveltejs/vite-plugin-svelte': ^2.0.2 - '@tanstack/svelte-query': ^4.12.0 - '@tsconfig/svelte': ^3.0.0 + '@sveltejs/adapter-auto': ^1.0.0 + '@sveltejs/kit': ^1.0.0 + '@tanstack/svelte-query': ^4.20.0 svelte: ^3.54.0 svelte-check: ^2.9.2 tslib: ^2.4.1 @@ -779,8 +779,8 @@ importers: dependencies: '@tanstack/svelte-query': link:../../../packages/svelte-query devDependencies: - '@sveltejs/vite-plugin-svelte': 2.0.2_svelte@3.55.0+vite@4.0.4 - '@tsconfig/svelte': 3.0.0 + '@sveltejs/adapter-auto': 1.0.0_@sveltejs+kit@1.0.7 + '@sveltejs/kit': 1.0.7_svelte@3.55.0+vite@4.0.4 svelte: 3.55.0 svelte-check: 2.10.3_svelte@3.55.0 tslib: 2.4.1 @@ -791,7 +791,7 @@ importers: specifiers: '@sveltejs/adapter-auto': ^1.0.0 '@sveltejs/kit': ^1.0.0 - '@tanstack/svelte-query': ^4.12.0 + '@tanstack/svelte-query': ^4.20.0 autoprefixer: ^10.4.13 postcss: ^8.4.20 svelte: ^3.54.0