Skip to content

Commit db011d2

Browse files
Sync kit docs (#1151)
sync kit docs Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
1 parent 61831e6 commit db011d2

File tree

5 files changed

+18
-12
lines changed

5 files changed

+18
-12
lines changed

apps/svelte.dev/content/docs/kit/25-build-and-deploy/70-adapter-cloudflare-workers.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ For testing the build, you should use [wrangler](https://developers.cloudflare.c
134134

135135
### Worker size limits
136136

137-
When deploying to workers, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](./faq#How-do-I-use-X-with-SvelteKit-How-do-I-use-a-client-side-only-library-that-depends-on-document-or-window) for more information.
137+
When deploying to workers, the server generated by SvelteKit is bundled into a single file. Wrangler will fail to publish your worker if it exceeds [the size limits](https://developers.cloudflare.com/workers/platform/limits/#worker-size) after minification. You're unlikely to hit this limit usually, but some large libraries can cause this to happen. In that case, you can try to reduce the size of your worker by only importing such libraries on the client side. See [the FAQ](./faq#How-do-I-use-a-client-side-library-accessing-document-or-window) for more information.
138138

139139
### Accessing the file system
140140

apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,12 @@ Using a content delivery network (CDN) can allow you to optimize these images dy
153153

154154
CDNs can generally be used without any need for a library. However, there are a number of libraries with Svelte support that make it easier. [`@unpic/svelte`](https://unpic.pics/img/svelte/) is a CDN-agnostic library with support for a large number of providers. You may also find that specific CDNs like [Cloudinary](https://svelte.cloudinary.dev/) have Svelte support. Finally, some content management systems (CMS) which support Svelte (such as [Contentful](https://www.contentful.com/sveltekit-starter-guide/), [Storyblok](https://github.com/storyblok/storyblok-svelte), and [Contentstack](https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-with-sveltekit-and-contentstack)) have built-in support for image handling.
155155

156+
## Icons
157+
158+
A great way to use icons is to define them purely in CSS. Iconify offers a huge set of icons [available via CSS](https://iconify.design/docs/usage/css/).
159+
160+
For icons defined in `.svelte` files, it is recommended to avoid libraries that provide a `.svelte` file per icon. These libraries can have thousands of `.svelte` files which really slow down Vite's dependency optimization. This can become especially pathological if the icons are imported both via an umbrella import and subpath import [as described in the `vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies).
161+
156162
## Best practices
157163

158164
- For each image type, use the appropriate solution from those discussed above. You can mix and match all three solutions in one project. For example, you may use Vite's built-in handling to provide images for `<meta>` tags, display images on your homepage with `@sveltejs/enhanced-img`, and display user-submitted content with a dynamic approach.

apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ Libraries work best in the browser with Vite when they distribute an ESM version
6060
6161
If you are still encountering issues we recommend searching both [the Vite issue tracker](https://github.com/vitejs/vite/issues) and the issue tracker of the library in question. Sometimes issues can be worked around by fiddling with the [`optimizeDeps`](https://vitejs.dev/config/#dep-optimization-options) or [`ssr`](https://vitejs.dev/config/#ssr-options) config values though we recommend this as only a short-term workaround in favor of fixing the library in question.
6262
63-
## How do I use the view transitions API with SvelteKit?
63+
## How do I use the view transitions API?
6464
6565
While SvelteKit does not have any specific integration with [view transitions](https://developer.chrome.com/docs/web-platform/view-transitions/), you can call `document.startViewTransition` in [`onNavigate`]($app-navigation#onNavigate) to trigger a view transition on every client-side navigation.
6666
@@ -82,15 +82,13 @@ onNavigate((navigation) => {
8282
8383
For more, see ["Unlocking view transitions"](/blog/view-transitions) on the Svelte blog.
8484
85-
## How do I use X with SvelteKit?
86-
87-
Make sure you've read the [documentation section on integrations](./integrations). If you're still having trouble, solutions to common issues are listed below.
88-
89-
### How do I setup a database?
85+
## How do I set up a database?
9086
9187
Put the code to query your database in a [server route](./routing#server) - don't query the database in .svelte files. You can create a `db.js` or similar that sets up a connection immediately and makes the client accessible throughout the app as a singleton. You can execute any one-time setup code in `hooks.server.js` and import your database helpers into any endpoint that needs them.
9288
93-
### How do I use a client-side only library that depends on `document` or `window`?
89+
You can use [the Svelte CLI](/docs/cli/overview) to automatically set up database integrations.
90+
91+
## How do I use a client-side library accessing `document` or `window`?
9492
9593
If you need access to the `document` or `window` variables or otherwise need code to run only on the client-side you can wrap it in a `browser` check:
9694
@@ -158,7 +156,7 @@ Finally, you may also consider using an `{#await}` block:
158156
{/await}
159157
```
160158
161-
### How do I use a different backend API server?
159+
## How do I use a different backend API server?
162160
163161
You can use [`event.fetch`](./load#Making-fetch-requests) to request data from an external API server, but be aware that you would need to deal with [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), which will result in complications such as generally requiring requests to be preflighted resulting in higher latency. Requests to a separate subdomain may also increase latency due to an additional DNS lookup, TLS setup, etc. If you wish to use this method, you may find [`handleFetch`](./hooks#Server-hooks-handleFetch) helpful.
164162
@@ -176,7 +174,7 @@ export function GET({ params, url }) {
176174
177175
(Note that you may also need to proxy `POST`/`PATCH` etc requests, and forward `request.headers`, depending on your needs.)
178176
179-
### How do I use middleware?
177+
## How do I use middleware?
180178
181179
`adapter-node` builds a middleware that you can use with your own server for production mode. In dev, you can add middleware to Vite by using a Vite plugin. For example:
182180
@@ -210,6 +208,8 @@ export default config;
210208
211209
See [Vite's `configureServer` docs](https://vitejs.dev/guide/api-plugin.html#configureserver) for more details including how to control ordering.
212210
211+
## How do I use Yarn?
212+
213213
### Does it work with Yarn 2?
214214
215215
Sort of. The Plug'n'Play feature, aka 'pnp', is broken (it deviates from the Node module resolution algorithm, and [doesn't yet work with native JavaScript modules](https://github.com/yarnpkg/berry/issues/638) which SvelteKit — along with an [increasing number of packages](https://blog.sindresorhus.com/get-ready-for-esm-aa53530b3f77) — uses). You can use `nodeLinker: 'node-modules'` in your [`.yarnrc.yml`](https://yarnpkg.com/configuration/yarnrc#nodeLinker) file to disable pnp, but it's probably easier to just use npm or [pnpm](https://pnpm.io/), which is similarly fast and efficient but without the compatibility headaches.

apps/svelte.dev/content/docs/kit/60-appendix/20-integrations.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,4 @@ Since SvelteKit projects are built with Vite, you can use Vite plugins to enhanc
5050

5151
## Integration FAQs
5252

53-
The SvelteKit FAQ has a [how to do X with SvelteKit](./faq#How-do-I-use-X-with-SvelteKit), which may be helpful if you still have questions.
53+
The SvelteKit FAQ has a [how to do X with SvelteKit](./faq#How-do-I-set-up-a-database), which may be helpful if you still have questions.

apps/svelte.dev/content/docs/kit/98-reference/[email protected]

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2628,7 +2628,7 @@ type SubmitFunction<
26282628
reset?: boolean;
26292629
invalidateAll?: boolean;
26302630
}) => Promise<void>;
2631-
}) => void)
2631+
}) => MaybePromise<void>)
26322632
>;
26332633
```
26342634

0 commit comments

Comments
 (0)