features

212 notes in this subject, read out of this brain and free to use. This is page 4 of 4.

Page interface properties

Page has: url (URL with pathname property), params (current page parameters), route (with id property), status (HTTP status code), error (App.Error | null), data (merged load function results), state (App.PageState from pushState/replaceState), form (populated after form submission)

RemoteCommand type

RemoteCommand is a function type for remote command functions. It accepts undefined extends Input ? Input | void : Input, returns Promise<Output>, has updates method accepting RemoteQueryUpdate array, and pending property returning number of pending executions.

RemoteLiveQuery type

RemoteLiveQuery is RemoteResource<T> & AsyncIterable<T> with: connected (true if live stream connected), done (true if current iterator done), reconnect() (reconnects stream immediately returning Promise<void>)

RemoteLiveQueryFunction signature

RemoteLiveQueryFunction is a function type for remote query.live functions that accepts arg (undefined extends Input ? Input | void : Input) and returns RemoteLiveQuery<Output>. Optional Validated generic parameter represents argument type after schema validation/transformation.

RemoteQuery set method behavior

The RemoteQuery set(value: T) method works differently on client and server. On the client, it updates the query value without re-fetching. On the server within a command or form context, it specifies data to accompany the action response back to the client, preventing SvelteKit from needing to refresh all queries in a second server round-trip.

RemoteQuery refresh method behavior

The RemoteQuery refresh(): Promise<void> method works differently on client and server. On the client, it re-fetches the query from the server. On the server within a command or form context, it refreshes the data and accompanies it with the action response back to the client, preventing SvelteKit from needing to refresh all queries in a second server round-trip.

RemoteQuery withOverride for optimistic updates

The RemoteQuery withOverride(update: (current: T) => T): RemoteQueryOverride method temporarily overrides a query's value during a single-flight mutation to provide optimistic updates. It takes a function that receives the current value and returns the updated value.

RemoteQueryFunction generic parameters and signature

RemoteQueryFunction has the signature (arg: undefined extends Input ? Input | void : Input) => RemoteQuery<Output>. It takes three generic parameters: Input (argument type before validation), Output (return type), and optional Validated (argument type after schema validation and transformation). For Standard Schema validators with transforms, Validated differs from Input. For 'unchecked' validators and queries without arguments, Validated defaults to Input.

RemoteQueryOverride type signature

RemoteQueryOverride is a function type with signature () => void.

RemoteResource promise and property structure

RemoteResource<T> extends Promise<T> and has the following properties: get error(): any (the error if query fails, often HttpError but not guaranteed), get loading(): boolean (true before first result is available and during refreshes), and either {get current(): undefined; ready: false} before ready or {get current(): T; ready: true} when ready is true.

RemoteQueryUpdate union type

RemoteQueryUpdate is a union type that can be: RemoteQuery<any>, RemoteLiveQuery<any>, RemoteQueryFunction<any, any>, RemoteLiveQueryFunction<any, any>, or RemoteQueryOverride.

$env module options table

Environment variables can be accessed through four different modules based on when they are available and their access level: $env/dynamic/private (runtime, private), $env/static/private (build time, private), $env/dynamic/public (runtime, public), and $env/static/public (build time, public).

$env/static/private module overview

The $env/static/private module provides access to environment variables that are injected statically into your bundle at build time and are limited to private access.

$env/static/private cannot be imported in client-side code

This module cannot be imported into client-side code due to its private access restriction.

$env/static/private variable inclusion rules

The $env/static/private module only includes variables that do not begin with config.kit.env.publicPrefix and do start with config.kit.env.privatePrefix (if configured).

$env/static/private uses build time values permanently

Values imported from $env/static/private are the same even if different values are set at runtime, because they are statically replaced in your code with their build time values.

View transitions API in SvelteKit

SvelteKit does not have any specific integration with view transitions. However, you can call document.startViewTransition in the onNavigate hook to trigger a view transition on every client-side navigation. The code should check if document.startViewTransition exists before calling it, and return a Promise that wraps the navigation.complete promise.

SvelteKit defaults to client-side navigation after initial server render

Unlike traditional multi-page app frameworks, SvelteKit defaults to client-side navigation after the initial server-rendered page load. This enables faster page transitions, persistent state between pages (such as a sidebar's scroll position), and less data usage. It also avoids re-running third-party scripts like analytics on every page load.

SvelteKit uses one language for both server and client

Unlike traditional server frameworks, SvelteKit allows you to use one language instead of effectively having two tightly-coupled apps. Because SvelteKit runs wherever JavaScript runs, you can use the same language for both server-side and client-side code.

Snapshot feature for form state preservation

Since SvelteKit 1.5, you can export a `snapshot` object from a `+page.svelte` or `+layout.svelte` file. The snapshot object has two methods: `capture()` and `restore()`. The `capture()` function returns state to store when the user leaves the page. The `restore()` function receives that state if the user navigates back. Snapshot data is stored in sessionStorage and persists across page reloads and navigation to other sites.

Snapshot example with textarea

Example of capturing and restoring textarea value using snapshots: ```svelte <script lang="ts"> import type { Snapshot } from './$types'; let comment = ''; export const snapshot: Snapshot = { capture: () => comment, restore: (value) => (comment = value) }; </script> <form method="POST"> <label for="comment">Comment</label> <textarea id="comment" bind:value={comment} /> <button>Post comment</button> </form> ```

Image optimization support in SvelteKit

SvelteKit includes experimental image optimization support with documentation at /docs/kit/images.

Shallow routing feature

Shallow routing is a feature that allows you to associate state with a history entry without causing navigation. It is useful for creating modals that you can dismiss by swiping back, or pop-up views of routes you don't want to do a full navigation to. This feature is documented at /docs/kit/shallow-routing.

<script module> block behavior

A <script module> block runs once when the module first evaluates, rather than for each component instance. Variables declared in this block can be referenced elsewhere in the component, but not vice versa. You can export bindings from this block, and they will become exports of the compiled module. You cannot export default, since the default export is the component itself.

CSS scoping in <style> blocks

CSS inside a <style> block is scoped to that component. Selectors only affect elements within that component, not globally.

.svelte file structure and sections

A .svelte file contains three optional sections: a script block for instance-level logic, a script module block for module-level logic that runs once when the module evaluates, markup (HTML), and a style block for component-scoped CSS.

<script> block in Svelte components

The <script> block contains JavaScript or TypeScript (when adding lang="ts" attribute) that runs when a component instance is created. Variables declared or imported at the top level can be referenced in the component's markup. Runes can be used to declare component props and add reactivity.

TypeScript support in Svelte components

To use TypeScript in a .svelte file, add the lang="ts" attribute to the <script> tag. When importing exports from a <script module> block into a .ts file, ensure your editor is set up so TypeScript knows about them, which is handled by the VS Code extension and IntelliJ plugin.

<script module> legacy syntax in Svelte 4

In Svelte 4, the module script tag was created using <script context="module">. In current versions, use <script module> instead.

State sharing limitation in .svelte.js files

You cannot export reassigned state from .svelte.js and .svelte.ts files when sharing reactive state across modules.

.svelte.js/.svelte.ts files are Svelte 5 feature

.svelte.js and .svelte.ts files are a concept that did not exist prior to Svelte 5.

.svelte.js and .svelte.ts files

.svelte.js and .svelte.ts files are module files that behave like any other .js or .ts module, except that you can use runes. They are useful for creating reusable reactive logic or sharing reactive state across an app.

Give your agent this brain