Skip to content
Merged
3 changes: 2 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ dist
pnpm-lock.yaml
.vercel
_generated.md
land-110m.json
land-110m.json
/apps/svelte.dev/content/docs
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ To create a layout that applies to every page, make a file called `src/routes/+l
<slot></slot>
```

If we create pages for `/`, `/about` and `/settings`...
If we create pages for ` / `, `/about` and `/settings`...

```html
/// file: src/routes/+page.svelte
Expand Down Expand Up @@ -291,7 +291,7 @@ If an error is thrown (either `error(...)` or an unexpected error), the response

### Receiving data

By exporting `POST`/`PUT`/`PATCH`/`DELETE`/`OPTIONS`/`HEAD` handlers, `+server.js` files can be used to create a complete API:
By exporting `POST` / `PUT` / `PATCH` / `DELETE` / `OPTIONS` / `HEAD` handlers, `+server.js` files can be used to create a complete API:

```svelte
<!--- file: src/routes/add/+page.svelte --->
Expand Down Expand Up @@ -362,8 +362,8 @@ export async function fallback({ request }) {

`+server.js` files can be placed in the same directory as `+page` files, allowing the same route to be either a page or an API endpoint. To determine which, SvelteKit applies the following rules:

- `PUT`/`PATCH`/`DELETE`/`OPTIONS` requests are always handled by `+server.js` since they do not apply to pages
- `GET`/`POST`/`HEAD` requests are treated as page requests if the `accept` header prioritises `text/html` (in other words, it's a browser page request), else they are handled by `+server.js`.
- `PUT` / `PATCH` / `DELETE` / `OPTIONS` requests are always handled by `+server.js` since they do not apply to pages
- `GET` / `POST` / `HEAD` requests are treated as page requests if the `accept` header prioritises `text/html` (in other words, it's a browser page request), else they are handled by `+server.js`.
- Responses to `GET` requests will include a `Vary: Accept` header, so that proxies and browsers cache HTML and JSON responses separately.

## $types
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export const actions = {
};
```

To invoke a named action, add a query parameter with the name prefixed by a `/` character:
To invoke a named action, add a query parameter with the name prefixed by a ` / ` character:

```svelte
<!--- file: src/routes/login/+page.svelte --->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ SvelteKit will discover pages to prerender automatically, by starting at _entry
/blog/[slug] # dynamic, because of `[slug]`
```

...SvelteKit will prerender `/` and `/blog`, and in the process discover links like `<a href="/blog/hello-world">` which give it new pages to prerender.
...SvelteKit will prerender ` / ` and `/blog`, and in the process discover links like `<a href="/blog/hello-world">` which give it new pages to prerender.

Most of the time, that's enough. In some situations, links to pages like `/blog/hello-world` might not exist (or might not exist on prerendered pages), in which case we need to tell SvelteKit about their existence.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ The `fallback` page is an HTML page created by SvelteKit from your page template

On some hosts it may be `index.html` or something else entirely — consult your platform's documentation.

> [!NOTE] Note that the fallback page will always contain absolute asset paths (i.e. beginning with `/` rather than `.`) regardless of the value of [`paths.relative`](configuration#paths), since it is used to respond to requests for arbitrary paths.
> [!NOTE] Note that the fallback page will always contain absolute asset paths (i.e. beginning with ` / ` rather than `.`) regardless of the value of [`paths.relative`](configuration#paths), since it is used to respond to requests for arbitrary paths.

## Apache

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ src/routes/[...catchall]/+page.svelte

## Encoding

Some characters can't be used on the filesystem — `/` on Linux and Mac, `\ / : * ? " < > |` on Windows. The `#` and `%` characters have special meaning in URLs, and the `[ ] ( )` characters have special meaning to SvelteKit, so these also can't be used directly as part of your route.
Some characters can't be used on the filesystem — ` / ` on Linux and Mac, `\ / : * ? " < > |` on Windows. The `#` and `%` characters have special meaning in URLs, and the `[ ] ( )` characters have special meaning to SvelteKit, so these also can't be used directly as part of your route.

To use these characters in your routes, you can use hexadecimal escape sequences, which have the format `[x+nn]` where `nn` is a hexadecimal character code:

Expand Down Expand Up @@ -189,7 +189,7 @@ src/routes/
└ +layout.svelte
```

You can also put a `+page` directly inside a `(group)`, for example if `/` should be an `(app)` or a `(marketing)` page.
You can also put a `+page` directly inside a `(group)`, for example if ` / ` should be an `(app)` or a `(marketing)` page.

### Breaking out of layouts

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url);
const cache = await caches.open(CACHE);

// `build`/`files` can always be served from the cache
// `build` / `files` can always be served from the cache
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Presumably not strictly necessary here. I don't know whether this still makes sense to do anyway.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we may as well be consistent

if (ASSETS.includes(url.pathname)) {
const response = await cache.match(url.pathname);

Expand Down
8 changes: 4 additions & 4 deletions apps/svelte.dev/content/docs/kit/30-advanced/70-packaging.md
Original file line number Diff line number Diff line change
Expand Up @@ -222,10 +222,10 @@ You should think carefully about whether or not the changes you make to your pac

`svelte-package` accepts the following options:

- `-w`/`--watch` — watch files in `src/lib` for changes and rebuild the package
- `-i`/`--input` — the input directory which contains all the files of the package. Defaults to `src/lib`
- `-o`/`--output` — the output directory where the processed files are written to. Your `package.json`'s `exports` should point to files inside there, and the `files` array should include that folder. Defaults to `dist`
- `-t`/`--types` — whether or not to create type definitions (`d.ts` files). We strongly recommend doing this as it fosters ecosystem library quality. Defaults to `true`
- `-w` / `--watch` — watch files in `src/lib` for changes and rebuild the package
- `-i` / `--input` — the input directory which contains all the files of the package. Defaults to `src/lib`
- `-o` / `--output` — the output directory where the processed files are written to. Your `package.json`'s `exports` should point to files inside there, and the `files` array should include that folder. Defaults to `dist`
- `-t` / `--types` — whether or not to create type definitions (`d.ts` files). We strongly recommend doing this as it fosters ecosystem library quality. Defaults to `true`
- `--tsconfig` - the path to a tsconfig or jsconfig. When not provided, searches for the next upper tsconfig/jsconfig in the workspace path.

## Publishing
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const config = {
export default config;
```

...disabling `csr` in your root `+layout.js`/`+layout.server.js`...
...disabling `csr` in your root `+layout.js` / `+layout.server.js`...

```js
/// file: src/routes/+layout.server.js
Expand Down
2 changes: 1 addition & 1 deletion apps/svelte.dev/content/docs/kit/60-appendix/10-faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ export function GET({ params, url }) {
}
```

(Note that you may also need to proxy `POST`/`PATCH` etc requests, and forward `request.headers`, depending on your needs.)
(Note that you may also need to proxy `POST` / `PATCH` etc requests, and forward `request.headers`, depending on your needs.)

### How do I use middleware?

Expand Down
4 changes: 2 additions & 2 deletions apps/svelte.dev/content/docs/kit/60-appendix/40-migrating.md
Original file line number Diff line number Diff line change
Expand Up @@ -127,9 +127,9 @@ Previously, layout components received a `segment` prop indicating the child seg

### URLs

In Sapper, all relative URLs were resolved against the base URL — usually `/`, unless the `basepath` option was used — rather than against the current page.
In Sapper, all relative URLs were resolved against the base URL — usually ` / `, unless the `basepath` option was used — rather than against the current page.

This caused problems and is no longer the case in SvelteKit. Instead, relative URLs are resolved against the current page (or the destination page, for `fetch` URLs in `load` functions) instead. In most cases, it's easier to use root-relative (i.e. starts with `/`) URLs, since their meaning is not context-dependent.
This caused problems and is no longer the case in SvelteKit. Instead, relative URLs are resolved against the current page (or the destination page, for `fetch` URLs in `load` functions) instead. In most cases, it's easier to use root-relative (i.e. starts with ` / `) URLs, since their meaning is not context-dependent.

### &lt;a&gt; attributes

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -773,7 +773,7 @@ base?: '' | `/${string}`;

</div>

A root-relative path that must start, but not end with `/` (e.g. `/base-path`), unless it is the empty string. This specifies where your app is served from and allows the app to live on a non-root path. Note that you need to prepend all your root-relative links with the base value or they will point to the root of your domain, not your `base` (this is how the browser works). You can use [`base` from `$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths-base) for that: `<a href="{base}/your-page">Link</a>`. If you find yourself writing this often, it may make sense to extract this into a reusable component.
A root-relative path that must start, but not end with ` / ` (e.g. `/base-path`), unless it is the empty string. This specifies where your app is served from and allows the app to live on a non-root path. Note that you need to prepend all your root-relative links with the base value or they will point to the root of your domain, not your `base` (this is how the browser works). You can use [`base` from `$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths-base) for that: `<a href="{base}/your-page">Link</a>`. If you find yourself writing this often, it may make sense to extract this into a reusable component.

</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ title: What are runes?
>
> A letter or mark used as a mystical or magic symbol.

Runes are symbols that you use in `.svelte` and `.svelte.js`/`.svelte.ts` files to control the Svelte compiler. If you think of Svelte as a language, runes are part of the syntax — they are _keywords_.
Runes are symbols that you use in `.svelte` and `.svelte.js` / `.svelte.ts` files to control the Svelte compiler. If you think of Svelte as a language, runes are part of the syntax — they are _keywords_.

Runes have a `$` prefix and look like functions:

Expand Down
2 changes: 1 addition & 1 deletion apps/svelte.dev/content/docs/svelte/02-runes/02-$state.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ class Todo {
}
```

> [!NOTE] The compiler transforms `done` and `text` into `get`/`set` methods on the class prototype referencing private fields.
> [!NOTE] The compiler transforms `done` and `text` into `get` / `set` methods on the class prototype referencing private fields.

## `$state.raw`

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ The context is then available to children of the component (including slotted co
- the state is not global, it's scoped to the component. That way it's safe to render your components on the server and not leak state
- it's clear that the state is not global but rather scoped to a specific component tree and therefore can't be used in other parts of your app

> [!NOTE] `setContext`/`getContext` must be called during component initialisation.
> [!NOTE] `setContext` / `getContext` must be called during component initialisation.

Context is not inherently reactive. If you need reactive values in context then you can pass a `$state` object into context, whos properties _will_ be reactive.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -634,14 +634,14 @@ As before, you can disable whitespace trimming by setting the `preserveWhitespac
Svelte 5 requires a modern browser (in other words, not Internet Explorer) for various reasons:

- it uses [`Proxies`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
- elements with `clientWidth`/`clientHeight`/`offsetWidth`/`offsetHeight` bindings use a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) rather than a convoluted `<iframe>` hack
- elements with `clientWidth` / `clientHeight` / `offsetWidth` / `offsetHeight` bindings use a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) rather than a convoluted `<iframe>` hack
- `<input type="range" bind:value={...} />` only uses an `input` event listener, rather than also listening for `change` events as a fallback

The `legacy` compiler option, which generated bulkier but IE-friendly code, no longer exists.

## Changes to compiler options

- The `false`/`true` (already deprecated previously) and the `"none"` values were removed as valid values from the `css` option
- The `false` / `true` (already deprecated previously) and the `"none"` values were removed as valid values from the `css` option
- The `legacy` option was repurposed
- The `hydratable` option has been removed. Svelte components are always hydratable now
- The `enableSourcemap` option has been removed. Source maps are always generated now, tooling can choose to ignore it
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -360,7 +360,7 @@ function unmount(component: Record<string, any>): void;

## untrack

Use `untrack` to prevent something from being treated as an `$effect`/`$derived` dependency.
Use `untrack` to prevent something from being treated as an `$effect` / `$derived` dependency.

https://svelte-5-preview.vercel.app/docs/functions#untrack

Expand Down
Loading