@inertiajs/svelte 3.0.0-beta.1 → 3.0.0-beta.3

package/dist/components/App.svelte

@@ -35,6 +35,10 @@
   let page = $state({ ...initialPage, flash: initialPage.flash ?? {} })
   let renderProps = $derived.by<RenderProps>(() => resolveRenderProps(component, page, key))
 
+  // Synchronous initialization so the global page store is populated during SSR
+  // ($effect.pre does not run during Svelte 5 SSR)
+  setPage(page)
+
   // Reactively update the global page state when local page state changes
   $effect.pre(() => {
     setPage(page)

package/dist/createInertiaApp.d.ts

@@ -1,4 +1,4 @@
-import { type CreateInertiaAppOptions, type CreateInertiaAppOptionsForCSR, type InertiaAppSSRResponse, type Page, type PageProps } from '@inertiajs/core';
+import { type CreateInertiaAppOptions, type CreateInertiaAppOptionsForCSR, type InertiaAppSSRResponse, type Page, type PageProps, type SharedPageProps } from '@inertiajs/core';
 import App, { type InertiaAppProps } from './components/App.svelte';
 import type { ComponentResolver, SvelteInertiaAppConfig } from './types';
 type SvelteRenderResult = {
@@ -10,14 +10,22 @@ type SetupOptions<SharedProps extends PageProps> = {
     App: typeof App;
     props: InertiaAppProps<SharedProps>;
 };
-type InertiaAppOptionsForCSR<SharedProps extends PageProps> = CreateInertiaAppOptionsForCSR<SharedProps, ComponentResolver, SetupOptions<SharedProps>, SvelteRenderResult | void, SvelteInertiaAppConfig>;
+type InertiaAppOptionsForCSR<SharedProps extends PageProps> = CreateInertiaAppOptionsForCSR<SharedProps, ComponentResolver, SetupOptions<SharedProps>, SvelteRenderResult | void, SvelteInertiaAppConfig> & {
+    withApp?: (context: Map<any, any>, options: {
+        ssr: boolean;
+    }) => void;
+};
 type InertiaAppOptionsAuto<SharedProps extends PageProps> = CreateInertiaAppOptions<ComponentResolver, SetupOptions<SharedProps>, SvelteRenderResult | void, SvelteInertiaAppConfig> & {
     page?: Page<SharedProps>;
+    withApp?: (context: Map<any, any>, options: {
+        ssr: boolean;
+    }) => void;
 };
 type SvelteServerRender = (component: typeof App, options: {
     props: InertiaAppProps<PageProps>;
+    context?: Map<any, any>;
 }) => SvelteRenderResult;
 type RenderFunction<SharedProps extends PageProps> = (page: Page<SharedProps>, render: SvelteServerRender) => Promise<InertiaAppSSRResponse>;
-export default function createInertiaApp<SharedProps extends PageProps = PageProps>(options: InertiaAppOptionsForCSR<SharedProps>): Promise<InertiaAppSSRResponse | void>;
-export default function createInertiaApp<SharedProps extends PageProps = PageProps>(options?: InertiaAppOptionsAuto<SharedProps>): Promise<void | RenderFunction<SharedProps>>;
+export default function createInertiaApp<SharedProps extends PageProps = PageProps & SharedPageProps>(options: InertiaAppOptionsForCSR<SharedProps>): Promise<InertiaAppSSRResponse | void>;
+export default function createInertiaApp<SharedProps extends PageProps = PageProps & SharedPageProps>(options?: InertiaAppOptionsAuto<SharedProps>): Promise<void | RenderFunction<SharedProps>>;
 export {};

package/dist/createInertiaApp.js

@@ -2,7 +2,7 @@ import { buildSSRBody, getInitialPageFromDOM, http as httpModule, router, setupP
 import { hydrate, mount } from 'svelte';
 import App, {} from './components/App.svelte';
 import { config } from './index';
-export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page, defaults = {}, http, layout, } = {}) {
+export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page, defaults = {}, http, layout, withApp, } = {}) {
     config.replace(defaults);
     if (http) {
         httpModule.setClient(http);
@@ -27,7 +27,11 @@ export default async function createInertiaApp({ id = 'app', resolve, setup, pro
                 svelteApp = result;
             }
             else {
-                svelteApp = render(App, { props });
+                const context = new Map();
+                if (withApp) {
+                    withApp(context, { ssr: true });
+                }
+                svelteApp = render(App, { props, context });
             }
             const body = buildSSRBody(id, page, svelteApp.body);
             return {
@@ -60,11 +64,17 @@ export default async function createInertiaApp({ id = 'app', resolve, setup, pro
     if (setup) {
         await setup({ el: target, App, props });
     }
-    else if (target.hasAttribute('data-server-rendered')) {
-        hydrate(App, { target, props });
-    }
     else {
-        mount(App, { target, props });
+        const context = new Map();
+        if (withApp) {
+            withApp(context, { ssr: false });
+        }
+        if (target.hasAttribute('data-server-rendered')) {
+            hydrate(App, { target, props, context });
+        }
+        else {
+            mount(App, { target, props, context });
+        }
     }
     if (progress) {
         setupProgress(progress);

package/dist/layoutProps.svelte.d.ts

@@ -1,6 +1,5 @@
-import { type Readable } from 'svelte/store';
 export declare function setLayoutProps(props: Record<string, unknown>): void;
 export declare function setLayoutPropsFor(name: string, props: Record<string, unknown>): void;
 export declare function resetLayoutProps(): void;
 export declare const LAYOUT_CONTEXT_KEY: unique symbol;
-export declare function useLayoutProps<T extends Record<string, unknown>>(defaults: T): Readable<T>;
+export declare function useLayoutProps<T extends Record<string, unknown>>(defaults: T): T;

package/dist/layoutProps.svelte.js

@@ -1,7 +1,15 @@
 import { createLayoutPropsStore, mergeLayoutProps } from '@inertiajs/core';
 import { getContext } from 'svelte';
-import { readable } from 'svelte/store';
 const store = createLayoutPropsStore();
+const storeState = $state({
+    shared: {},
+    named: {},
+});
+store.subscribe(() => {
+    const snapshot = store.get();
+    storeState.shared = snapshot.shared;
+    storeState.named = snapshot.named;
+});
 export function setLayoutProps(props) {
     store.set(props);
 }
@@ -17,9 +25,12 @@ export function useLayoutProps(defaults) {
     const resolve = () => {
         const staticProps = context?.staticProps ?? {};
         const name = context?.name;
-        const { shared, named } = store.get();
-        const dynamicProps = name ? { ...shared, ...named[name] } : shared;
+        const dynamicProps = name ? { ...storeState.shared, ...(storeState.named[name] ?? {}) } : storeState.shared;
         return mergeLayoutProps(defaults, staticProps, dynamicProps);
     };
-    return readable(resolve(), (set) => store.subscribe(() => set(resolve())));
+    const state = $state(resolve());
+    $effect.pre(() => {
+        Object.assign(state, resolve());
+    });
+    return state;
 }

package/dist/types.d.ts

@@ -1,7 +1,7 @@
-import { type Page } from '@inertiajs/core';
+import { type Page, type SharedPageProps } from '@inertiajs/core';
 import type { Component } from 'svelte';
 import type { RenderFunction, RenderProps } from './components/Render.svelte';
-export type ComponentResolver = (name: string, page?: Page) => ResolvedComponent | Promise<ResolvedComponent>;
+export type ComponentResolver = (name: string, page?: Page<SharedPageProps>) => ResolvedComponent | Promise<ResolvedComponent>;
 export type LayoutResolver = (h: RenderFunction, page: RenderProps) => RenderProps;
 export type LayoutTuple = [Component, Record<string, unknown>?];
 export type LayoutObject = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inertiajs/svelte",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.3",
   "license": "MIT",
   "description": "The Svelte adapter for Inertia.js",
   "contributors": [
@@ -54,9 +54,9 @@
   },
   "dependencies": {
     "@types/lodash-es": "^4.17.12",
-    "laravel-precognition": "2.0.0-beta.2",
+    "laravel-precognition": "2.0.0-beta.3",
     "lodash-es": "^4.17.23",
-    "@inertiajs/core": "3.0.0-beta.1"
+    "@inertiajs/core": "3.0.0-beta.3"
   },
   "scripts": {
     "build": "pnpm package && svelte-check --tsconfig ./tsconfig.json && publint",

package/resources/boost/skills/inertia-svelte-development/SKILL.blade.php

@@ -1,6 +1,6 @@
 ---
 name: inertia-svelte-development
-description: "Develops Inertia.js v2 Svelte client-side applications. Activates when creating Svelte pages, forms, or navigation; using Link, Form, or router; working with deferred props, prefetching, or polling; or when user mentions Svelte with Inertia, Svelte pages, Svelte forms, or Svelte navigation."
+description: "Develops Inertia.js v3 Svelte 5 client-side applications. Activates when creating Svelte pages, forms, or navigation; using Link, Form, useForm, useHttp, useLayoutProps, or router; working with deferred props, prefetching, optimistic updates, instant visits, or polling; or when user mentions Svelte with Inertia, Svelte pages, Svelte forms, or Svelte navigation."
 license: MIT
 metadata:
   author: laravel
@@ -15,14 +15,24 @@ metadata:
 Activate this skill when:
 
 - Creating or modifying Svelte page components for Inertia
-- Working with forms in Svelte (using `<Form>` or `useForm`)
+- Working with forms in Svelte (using `<Form>`, `useForm`, or `useHttp`)
 - Implementing client-side navigation with `<Link>` or `router`
-- Using v2 features: deferred props, prefetching, WhenVisible, InfiniteScroll, once props, flash data, or polling
+- Using v3 features: deferred props, prefetching, optimistic updates, instant visits, layout props, HTTP requests, WhenVisible, InfiniteScroll, once props, flash data, or polling
 - Building Svelte-specific features with the Inertia protocol
 
+## Important: Svelte 5 Required
+
+Inertia v3 requires Svelte 5. All code must use Svelte 5 runes syntax:
+
+- Use `let { prop } = $props()` (not `export let prop`)
+- Use `onclick` (not `on:click`)
+- Use `$derived()` for reactive values (not `$:`)
+- Use `{#snippet}` for named slots (not `slot="name"`)
+- Use `{@render children()}` for default slot content
+
 ## Documentation
 
-Use `search-docs` for detailed Inertia v2 Svelte patterns and documentation.
+Use `search-docs` for detailed Inertia v3 Svelte patterns and documentation.
 
 ## Basic Usage
 
@@ -34,7 +44,7 @@ Svelte page components should be placed in the `{{ $assist->inertia()->pagesDire
 
 @boostsnippet("Basic Svelte Page Component", "svelte")
 <script>
-export let users
+let { users } = $props()
 </script>
 
 <div>
@@ -111,31 +121,33 @@ function createUser() {
 @if($assist->inertia()->hasFormComponent())
 ### Form Component (Recommended)
 
-The recommended way to build forms is with the `<Form>` component:
+The recommended way to build forms is with the `<Form>` component. In Svelte 5, use `{#snippet}` for the default slot:
 
 @boostsnippet("Form Component Example", "svelte")
 <script>
 import { Form } from '@inertiajs/svelte'
 </script>
 
-<Form action="/users" method="post" let:errors let:processing let:wasSuccessful>
-    <input type="text" name="name" />
-    {#if errors.name}
-        <div>{errors.name}</div>
-    {/if}
-
-    <input type="email" name="email" />
-    {#if errors.email}
-        <div>{errors.email}</div>
-    {/if}
-
-    <button type="submit" disabled={processing}>
-        {processing ? 'Creating...' : 'Create User'}
-    </button>
-
-    {#if wasSuccessful}
-        <div>User created!</div>
-    {/if}
+<Form action="/users" method="post">
+    {#snippet children({ errors, processing, wasSuccessful })}
+        <input type="text" name="name" />
+        {#if errors.name}
+            <div>{errors.name}</div>
+        {/if}
+
+        <input type="email" name="email" />
+        {#if errors.email}
+            <div>{errors.email}</div>
+        {/if}
+
+        <button type="submit" disabled={processing}>
+            {processing ? 'Creating...' : 'Create User'}
+        </button>
+
+        {#if wasSuccessful}
+            <div>User created!</div>
+        {/if}
+    {/snippet}
 </Form>
 @endboostsnippet
 
@@ -146,40 +158,40 @@ import { Form } from '@inertiajs/svelte'
 import { Form } from '@inertiajs/svelte'
 </script>
 
-<Form
-    action="/users"
-    method="post"
-    let:errors
-    let:hasErrors
-    let:processing
-    let:progress
-    let:wasSuccessful
-    let:recentlySuccessful
-    let:clearErrors
-    let:resetAndClearErrors
-    let:defaults
-    let:isDirty
-    let:reset
-    let:submit
->
-    <input type="text" name="name" value={defaults.name} />
-    {#if errors.name}
-        <div>{errors.name}</div>
-    {/if}
-
-    <button type="submit" disabled={processing}>
-        {processing ? 'Saving...' : 'Save'}
-    </button>
-
-    {#if progress}
-        <progress value={progress.percentage} max="100">
-            {progress.percentage}%
-        </progress>
-    {/if}
-
-    {#if wasSuccessful}
-        <div>Saved!</div>
-    {/if}
+<Form action="/users" method="post">
+    {#snippet children({
+        errors,
+        hasErrors,
+        processing,
+        progress,
+        wasSuccessful,
+        recentlySuccessful,
+        clearErrors,
+        resetAndClearErrors,
+        defaults,
+        isDirty,
+        reset,
+        submit
+    })}
+        <input type="text" name="name" value={defaults.name} />
+        {#if errors.name}
+            <div>{errors.name}</div>
+        {/if}
+
+        <button type="submit" disabled={processing}>
+            {processing ? 'Saving...' : 'Save'}
+        </button>
+
+        {#if progress}
+            <progress value={progress.percentage} max="100">
+                {progress.percentage}%
+            </progress>
+        {/if}
+
+        {#if wasSuccessful}
+            <div>Saved!</div>
+        {/if}
+    {/snippet}
 </Form>
 @endboostsnippet
 
@@ -199,23 +211,17 @@ Use the `search-docs` tool with a query of `form component resetting` for detail
 import { Form } from '@inertiajs/svelte'
 </script>
 
-<Form
-    action="/users"
-    method="post"
-    resetOnSuccess
-    setDefaultsOnSuccess
-    let:errors
-    let:processing
-    let:wasSuccessful
->
-    <input type="text" name="name" />
-    {#if errors.name}
-        <div>{errors.name}</div>
-    {/if}
-
-    <button type="submit" disabled={processing}>
-        Submit
-    </button>
+<Form action="/users" method="post" resetOnSuccess setDefaultsOnSuccess>
+    {#snippet children({ errors, processing, wasSuccessful })}
+        <input type="text" name="name" />
+        {#if errors.name}
+            <div>{errors.name}</div>
+        {/if}
+
+        <button type="submit" disabled={processing}>
+            Submit
+        </button>
+    {/snippet}
 </Form>
 @endboostsnippet
 @else
@@ -244,36 +250,166 @@ const form = useForm({
     password: '',
 })
 
-function submit() {
-    $form.post('/users', {
-        onSuccess: () => $form.reset('password'),
+function submit(e) {
+    e.preventDefault()
+    form.post('/users', {
+        onSuccess: () => form.reset('password'),
     })
 }
 </script>
 
-<form on:submit|preventDefault={submit}>
-    <input type="text" bind:value={$form.name} />
-    {#if $form.errors.name}
-        <div>{$form.errors.name}</div>
+<form onsubmit={submit}>
+    <input type="text" bind:value={form.name} />
+    {#if form.errors.name}
+        <div>{form.errors.name}</div>
     {/if}
 
-    <input type="email" bind:value={$form.email} />
-    {#if $form.errors.email}
-        <div>{$form.errors.email}</div>
+    <input type="email" bind:value={form.email} />
+    {#if form.errors.email}
+        <div>{form.errors.email}</div>
     {/if}
 
-    <input type="password" bind:value={$form.password} />
-    {#if $form.errors.password}
-        <div>{$form.errors.password}</div>
+    <input type="password" bind:value={form.password} />
+    {#if form.errors.password}
+        <div>{form.errors.password}</div>
     {/if}
 
-    <button type="submit" disabled={$form.processing}>
+    <button type="submit" disabled={form.processing}>
         Create User
     </button>
 </form>
 @endboostsnippet
 
-## Inertia v2 Features
+## Inertia v3 Features
+
+### HTTP Requests
+
+Use the `useHttp` hook for standalone HTTP requests that do not trigger Inertia page visits. It provides the same developer experience as `useForm`, but for plain JSON endpoints.
+
+@boostsnippet("useHttp Example", "svelte")
+<script>
+import { useHttp } from '@inertiajs/svelte'
+
+const http = useHttp({
+    query: '',
+})
+
+function search() {
+    http.get('/api/search', {
+        onSuccess: (response) => {
+            console.log(response)
+        },
+    })
+}
+</script>
+
+<input bind:value={http.query} oninput={search} />
+{#if http.processing}
+    <div>Searching...</div>
+{/if}
+@endboostsnippet
+
+### Optimistic Updates
+
+Apply data changes instantly before the server responds, with automatic rollback on failure:
+
+@boostsnippet("Optimistic Update with Router", "svelte")
+<script>
+import { router } from '@inertiajs/svelte'
+
+function like(post) {
+    router.optimistic((props) => ({
+        post: {
+            ...props.post,
+            likes: props.post.likes + 1,
+        },
+    })).post(`/posts/${post.id}/like`)
+}
+</script>
+@endboostsnippet
+
+Optimistic updates also work with `useForm` and the `<Form>` component:
+
+@boostsnippet("Optimistic Update with Form Component", "svelte")
+<script>
+import { Form } from '@inertiajs/svelte'
+</script>
+
+<Form
+    action="/todos"
+    method="post"
+    optimistic={(props, data) => ({
+        todos: [...props.todos, { id: Date.now(), name: data.name, done: false }],
+    })}
+>
+    {#snippet children({ processing })}
+        <input type="text" name="name" />
+        <button type="submit" disabled={processing}>Add Todo</button>
+    {/snippet}
+</Form>
+@endboostsnippet
+
+### Instant Visits
+
+Navigate to a new page immediately without waiting for the server response. The target component renders right away with shared props, while page-specific props load in the background.
+
+@verbatim
+@boostsnippet("Instant Visit with Link", "svelte")
+<script>
+import { Link, inertia } from '@inertiajs/svelte'
+</script>
+
+<Link href="/dashboard" component="Dashboard">Dashboard</Link>
+
+<a href="/dashboard" use:inertia={{ component: 'Dashboard' }}>Dashboard</a>
+
+<Link
+    href="/posts/1"
+    component="Posts/Show"
+    pageProps={{ post: { id: 1, title: 'My Post' } }}
+>
+    View Post
+</Link>
+@endboostsnippet
+@endverbatim
+
+### Layout Props
+
+Share dynamic data between pages and persistent layouts:
+
+@boostsnippet("Layout Props in Layout", "svelte")
+<script>
+import { useLayoutProps } from '@inertiajs/svelte'
+
+const layout = useLayoutProps({
+    title: 'My App',
+    showSidebar: true,
+})
+
+let { children } = $props()
+</script>
+
+<header>{layout.title}</header>
+{#if layout.showSidebar}
+    <aside>Sidebar</aside>
+{/if}
+<main>
+    {@render children()}
+</main>
+@endboostsnippet
+
+@boostsnippet("Setting Layout Props from Page", "svelte")
+<script>
+import { setLayoutProps } from '@inertiajs/svelte'
+
+setLayoutProps({
+    title: 'Dashboard',
+    showSidebar: false,
+})
+</script>
+
+<h1>Dashboard</h1>
+@endboostsnippet
 
 ### Deferred Props
 
@@ -281,7 +417,7 @@ Use deferred props to load data after initial page render:
 
 @boostsnippet("Deferred Props with Empty State", "svelte")
 <script>
-export let users
+let { users } = $props()
 </script>
 
 <div>
@@ -308,20 +444,16 @@ Automatically refresh data at intervals:
 @boostsnippet("Polling Example", "svelte")
 <script>
 import { router } from '@inertiajs/svelte'
-import { onMount, onDestroy } from 'svelte'
-
-export let stats
+import { onMount } from 'svelte'
 
-let interval
+let { stats } = $props()
 
 onMount(() => {
-    interval = setInterval(() => {
+    const interval = setInterval(() => {
         router.reload({ only: ['stats'] })
-    }, 5000) // Poll every 5 seconds
-})
+    }, 5000)
 
-onDestroy(() => {
-    clearInterval(interval)
+    return () => clearInterval(interval)
 })
 </script>
 
@@ -339,22 +471,21 @@ Lazy-load a prop when an element scrolls into view. Useful for deferring expensi
 <script>
 import { WhenVisible } from '@inertiajs/svelte'
 
-export let stats
+let { stats } = $props()
 </script>
 
 <div>
     <h1>Dashboard</h1>
 
-    <!-- stats prop is loaded only when this section scrolls into view -->
     <WhenVisible data="stats" buffer={200}>
+        {#snippet fallback()}
+            <div class="animate-pulse">Loading stats...</div>
+        {/snippet}
+
         <div>
             <p>Total Users: {stats.total_users}</p>
             <p>Revenue: {stats.revenue}</p>
         </div>
-
-        <svelte:fragment slot="fallback">
-            <div class="animate-pulse">Loading stats...</div>
-        </svelte:fragment>
     </WhenVisible>
 </div>
 @endboostsnippet
@@ -366,7 +497,10 @@ Server-side patterns (Inertia::render, props, middleware) are covered in inertia
 ## Common Pitfalls
 
 - Using traditional `<a>` links instead of Inertia's `<Link>` component (breaks SPA behavior)
+- Using Svelte 4 syntax (`export let`, `on:click`, `$:`, `slot`) instead of Svelte 5 runes (`$props()`, `onclick`, `$derived()`, `{#snippet}`)
 - Forgetting to add loading states (skeleton screens) when using deferred props
 - Not handling the `undefined` state of deferred props before data loads
-- Using `<form>` without preventing default submission (use `<Form>` component or `on:submit|preventDefault`)
+- Using `<form>` without preventing default submission (use `<Form>` component or call `e.preventDefault()` in the `onsubmit` handler)
 - Forgetting to check if `<Form>` component is available in your Inertia version
+- Using `router.cancel()` instead of `router.cancelAll()` (v3 breaking change)
+- Using `router.on('invalid', ...)` or `router.on('exception', ...)` instead of the renamed `httpException` and `networkError` events