Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -504,9 +504,11 @@ Now simply call `addLike`, from (for example) an event handler:

> [!NOTE] Commands cannot be called during render.

### Single-flight mutations
### Updating queries

To update `getLikes(item.id)`, or any other query, we need to tell SvelteKit _which_ queries need to be refreshed (unlike `form`, which by default invalidates everything, to approximate the behaviour of a native form submission).

As with forms, any queries on the page (such as `getLikes(item.id)` in the example above) will automatically be refreshed following a successful command. But we can make things more efficient by telling SvelteKit which queries will be affected by the command, either inside the command itself...
We either do that inside the command itself...

```js
/// file: likes.remote.js
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ The parameter `reason` has one of the following values:

## Socket activation

Most Linux operating systems today use a modern process manager called systemd to start the server and run and manage services. You can configure your server to allocate a socket and start and scale your app on demand. This is called [socket activation](http://0pointer.de/blog/projects/socket-activated-containers.html). In this case, the OS will pass two environment variables to your app — `LISTEN_PID` and `LISTEN_FDS`. The adapter will then listen on file descriptor 3 which refers to a systemd socket unit that you will have to create.
Most Linux operating systems today use a modern process manager called systemd to start the server and run and manage services. You can configure your server to allocate a socket and start and scale your app on demand. This is called [socket activation](https://0pointer.de/blog/projects/socket-activated-containers.html). In this case, the OS will pass two environment variables to your app — `LISTEN_PID` and `LISTEN_FDS`. The adapter will then listen on file descriptor 3 which refers to a systemd socket unit that you will have to create.

> [!NOTE] You can still use [`envPrefix`](#Options-envPrefix) with systemd socket activation. `LISTEN_PID` and `LISTEN_FDS` are always read without a prefix.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ jobs:
cache: npm

- name: Install dependencies
run: npm install
run: npm i

- name: build
env:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Doing this manually is tedious. There are a variety of techniques you can use, d
Install:

```sh
npm install --save-dev @sveltejs/enhanced-img
npm i -D @sveltejs/enhanced-img
```

Adjust `vite.config.js`:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ See [sveltesociety.dev](https://sveltesociety.dev/) for a full listing of [packa

`svelte-preprocess` has some additional functionality not found in `vitePreprocess` such as support for Pug, Babel, and global styles. However, `vitePreprocess` may be faster and require less configuration, so it is used by default. Note that CoffeeScript is [not supported](https://github.com/sveltejs/kit/issues/2920#issuecomment-996469815) by SvelteKit.

You will need to install `svelte-preprocess` with `npm install --save-dev svelte-preprocess` and [add it to your `svelte.config.js`](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md#with-svelte-config). After that, you will often need to [install the corresponding library](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md) such as `npm install -D sass` or `npm install -D less`.
You will need to install `svelte-preprocess` with `npm i -D svelte-preprocess` and [add it to your `svelte.config.js`](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md#with-svelte-config). After that, you will often need to [install the corresponding library](https://github.com/sveltejs/svelte-preprocess/blob/main/docs/getting-started.md) such as `npm i -D sass` or `npm i -D less`.

## Vite plugins

Expand Down
34 changes: 22 additions & 12 deletions apps/svelte.dev/content/docs/kit/98-reference/10-@sveltejs-kit.md
Original file line number Diff line number Diff line change
Expand Up @@ -1600,13 +1600,17 @@ Information about the target of a specific navigation.
<div class="ts-block">

```dts
interface NavigationTarget {/*…*/}
interface NavigationTarget<
Params extends
AppLayoutParams<'/'> = AppLayoutParams<'/'>,
RouteId extends AppRouteId | null = AppRouteId | null
> {/*…*/}
```

<div class="ts-block-property">

```dts
params: Record<string, string> | null;
params: Params | null;
```

<div class="ts-block-property-details">
Expand All @@ -1630,7 +1634,7 @@ Info about the target route
<div class="ts-block-property-children"><div class="ts-block-property">

```dts
id: string | null;
id: RouteId | null;
```

<div class="ts-block-property-details">
Expand Down Expand Up @@ -1928,14 +1932,16 @@ The return value of a remote `command` function. See [Remote functions](/docs/ki
<div class="ts-block">

```dts
type RemoteCommand<Input, Output> = (arg: Input) => Promise<
Awaited<Output>
> & {
updates(
...queries: Array<
RemoteQuery<any> | RemoteQueryOverride
>
): Promise<Awaited<Output>>;
type RemoteCommand<Input, Output> = {
(arg: Input): Promise<Awaited<Output>> & {
updates(
...queries: Array<
RemoteQuery<any> | RemoteQueryOverride
>
): Promise<Awaited<Output>>;
};
/** The number of pending command executions */
get pending(): number;
};
```

Expand Down Expand Up @@ -1991,6 +1997,8 @@ type RemoteForm<Result> = {
): Omit<RemoteForm<Result>, 'for'>;
/** The result of the form submission */
get result(): Result | undefined;
/** The number of pending submissions */
get pending(): number;
/** Spread this onto a `<button>` or `<input type="submit">` */
buttonProps: {
type: 'submit';
Expand All @@ -2016,6 +2024,8 @@ type RemoteForm<Result> = {
formaction: string;
onclick: (event: Event) => void;
};
/** The number of pending submissions */
get pending(): number;
};
};
```
Expand Down Expand Up @@ -2050,7 +2060,7 @@ type RemoteQuery<T> = RemoteResource<T> & {
*/
refresh(): Promise<void>;
/**
* Temporarily override the value of a query. This is used with the `updates` method of a [command](https://svelte.dev/docs/kit/remote-functions#command-Single-flight-mutations) or [enhanced form submission](https://svelte.dev/docs/kit/remote-functions#form-enhance) to provide optimistic updates.
* Temporarily override the value of a query. This is used with the `updates` method of a [command](https://svelte.dev/docs/kit/remote-functions#command-Updating-queries) or [enhanced form submission](https://svelte.dev/docs/kit/remote-functions#form-enhance) to provide optimistic updates.
*
* ```svelte
* <script>
Expand Down
2 changes: 1 addition & 1 deletion apps/svelte.dev/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
"@supabase/supabase-js": "^2.43.4",
"@sveltejs/adapter-vercel": "^5.7.2",
"@sveltejs/enhanced-img": "^0.4.3",
"@sveltejs/kit": "https://pkg.pr.new/sveltejs/kit/@sveltejs/kit@e19e9be",
"@sveltejs/kit": "^2.28.0",
"@sveltejs/site-kit": "workspace:*",
"@sveltejs/vite-plugin-svelte": "^6.0.0",
"@types/cookie": "^0.6.0",
Expand Down
5 changes: 3 additions & 2 deletions packages/site-kit/src/lib/docs/DocsContents.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,13 @@
afterNavigate(({ from, to }) => {
// TODO the fact that we're referencing route IDs from the app indicates
// that this doesn't belong in site-kit, but that's a problem for another day
// @ts-ignore
if (from?.route.id !== '/docs/[...path]') {
return;
}

const from_package = from.params!.path.split('/')[0];
const to_package = to!.params!.path.split('/')[0];
const from_package = from.params!.path!.split('/')[0];
const to_package = to!.params!.path!.split('/')[0];

if (from_package !== to_package) {
nav.scrollTo(0, 0);
Expand Down
32 changes: 14 additions & 18 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.