@inertiajs/svelte 3.0.0-beta.5 → 3.0.0-beta.7

package/dist/components/App.svelte

@@ -13,7 +13,7 @@
 <script lang="ts">
   import type { Component } from 'svelte'
   import type { LayoutType, LayoutResolver } from '../types'
-  import { normalizeLayouts } from '@inertiajs/core'
+  import { isPropsObject, normalizeLayouts } from '@inertiajs/core'
   import { router } from '@inertiajs/core'
   import Render, { h, type RenderProps } from './Render.svelte'
   import { setPage } from '../page.svelte'
@@ -37,6 +37,7 @@
 
   // Synchronous initialization so the global page store is populated during SSR
   // ($effect.pre does not run during Svelte 5 SSR)
+  // svelte-ignore state_referenced_locally
   setPage(page)
 
   // Reactively update the global page state when local page state changes
@@ -99,6 +100,7 @@
     }
 
     let effectiveLayout: LayoutType | undefined
+    let callbackProps: Record<string, unknown> | null = null
     const layoutValue = component.layout
 
     if (
@@ -106,12 +108,24 @@
       (layoutValue as Function).length <= 1 &&
       typeof (layoutValue as Function).prototype === 'undefined'
     ) {
-      effectiveLayout = (layoutValue as Function)(page.props) as LayoutType | undefined
+      const result = (layoutValue as Function)(page.props)
+
+      if (isPropsObject(result, isComponent)) {
+        effectiveLayout = defaultLayout?.(page.component, page) as LayoutType | undefined
+        callbackProps = result as Record<string, unknown>
+      } else {
+        effectiveLayout = result as LayoutType | undefined
+      }
+    } else if (isPropsObject(layoutValue, isComponent)) {
+      effectiveLayout = defaultLayout?.(page.component, page) as LayoutType | undefined
+      callbackProps = layoutValue as Record<string, unknown>
     } else {
       effectiveLayout = (layoutValue ?? defaultLayout?.(page.component, page)) as LayoutType | undefined
     }
 
-    return effectiveLayout ? resolveLayout(effectiveLayout, child, page.props, key, !!component.layout) : child
+    return effectiveLayout
+      ? resolveLayout(effectiveLayout, child, page.props, key, !!component.layout && !callbackProps, callbackProps)
+      : child
   }
 
   function resolveLayout(
@@ -120,12 +134,17 @@
     pageProps: PageProps,
     key: number | null,
     isFromPage: boolean = true,
+    callbackProps: Record<string, unknown> | null = null,
   ): RenderProps {
     if (isFromPage && isRenderFunction(layout)) {
       return (layout as LayoutResolver)(h, child)
     }
 
-    const layouts = normalizeLayouts(layout, isComponent, isFromPage ? isRenderFunction : undefined)
+    let layouts = normalizeLayouts(layout, isComponent, isFromPage ? isRenderFunction : undefined)
+
+    if (callbackProps) {
+      layouts = layouts.map((l) => ({ ...l, props: { ...l.props, ...callbackProps } }))
+    }
 
     if (layouts.length > 0) {
       const dynamicProps = isServer ? { shared: {}, named: {} } : { shared: storeState.shared, named: storeState.named }

package/dist/components/Form.svelte

@@ -20,6 +20,7 @@
   import { onMount } from 'svelte'
   import { setFormContext } from './formContext'
   import useForm from '../useForm.svelte'
+  import { config } from '..'
 
   const noop = () => undefined
 
@@ -82,7 +83,7 @@
     validateFiles = false,
     validationTimeout = 1500,
     optimistic,
-    withAllErrors = false,
+    withAllErrors = null,
     component = undefined,
     instant = false,
     children,
@@ -292,7 +293,7 @@
       form.withoutFileValidation()
     }
 
-    if (withAllErrors) {
+    if (withAllErrors ?? config.get('form.withAllErrors')) {
       form.withAllErrors()
     }
   })

package/dist/components/Form.svelte.d.ts

@@ -42,10 +42,10 @@ declare const Form: import("svelte").Component<Props, {
     resetAndClearErrors: (...fields: string[]) => void;
     setError: (fieldOrFields: string | Record<string, string>, maybeValue?: string) => void;
     defaults: () => void;
-    validate: (field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig) => import("../useForm.svelte").InertiaFormProps<Record<string, any>> & Record<string, any> & import("../useForm.svelte").InertiaFormValidationProps<Record<string, any>>;
+    validate: (field?: string | NamedInputEvent | ValidationConfig, config?: ValidationConfig) => import("..").InertiaFormProps<Record<string, any>> & Record<string, any> & import("../useForm.svelte").InertiaFormValidationProps<Record<string, any>>;
     valid: (field: string) => boolean;
     invalid: (field: string) => boolean;
-    touch: (field: string | NamedInputEvent | string[], ...fields: string[]) => import("../useForm.svelte").InertiaFormProps<Record<string, any>> & Record<string, any> & import("../useForm.svelte").InertiaFormValidationProps<Record<string, any>>;
+    touch: (field: string | NamedInputEvent | string[], ...fields: string[]) => import("..").InertiaFormProps<Record<string, any>> & Record<string, any> & import("../useForm.svelte").InertiaFormValidationProps<Record<string, any>>;
     touched: (field?: string) => boolean;
     validator: () => Validator;
 }, "action">;

package/dist/components/InfiniteScroll.svelte

@@ -58,6 +58,7 @@
   let itemsElementRef: HTMLElement = $state(null!)
   let startElementRef: HTMLElement = $state(null!)
   let endElementRef: HTMLElement = $state(null!)
+  // svelte-ignore state_referenced_locally
   const scrollProp = usePage().scrollProps?.[data]
 
   let loadingPrevious = $state(false)

package/dist/components/createForm.d.ts

@@ -1,7 +1,9 @@
-import type { FormComponentSlotProps } from '@inertiajs/core';
+import type { FormComponentProps, FormComponentSlotProps } from '@inertiajs/core';
 import type { Component, ComponentProps, Snippet } from 'svelte';
 import Form from './Form.svelte';
-type TypedFormComponent<TForm extends Record<string, any>> = Component<Omit<ComponentProps<typeof Form>, 'children'> & {
+type TypedFormComponent<TForm extends Record<string, any>> = Component<Omit<ComponentProps<typeof Form>, 'children' | 'optimistic' | 'transform'> & {
+    optimistic?: FormComponentProps<TForm>['optimistic'];
+    transform?: FormComponentProps<TForm>['transform'];
     children?: Snippet<[FormComponentSlotProps<TForm>]>;
 }>;
 export declare function createForm<TForm extends Record<string, any> = Record<string, any>>(): TypedFormComponent<TForm>;

package/dist/createInertiaApp.d.ts

@@ -10,17 +10,21 @@ type SetupOptions<SharedProps extends PageProps> = {
     App: typeof App;
     props: InertiaAppProps<SharedProps>;
 };
+type SvelteWithApp = (context: Map<any, any>, options: {
+    ssr: boolean;
+}) => void;
 type InertiaAppOptionsForCSR<SharedProps extends PageProps> = CreateInertiaAppOptionsForCSR<SharedProps, ComponentResolver, SetupOptions<SharedProps>, SvelteRenderResult | void, SvelteInertiaAppConfig> & {
-    withApp?: (context: Map<any, any>, options: {
-        ssr: boolean;
-    }) => void;
+    withApp?: never;
 };
-type InertiaAppOptionsAuto<SharedProps extends PageProps> = CreateInertiaAppOptions<ComponentResolver, SetupOptions<SharedProps>, SvelteRenderResult | void, SvelteInertiaAppConfig> & {
+type InertiaAppOptionsAuto<SharedProps extends PageProps> = Omit<CreateInertiaAppOptions<ComponentResolver, SetupOptions<SharedProps>, SvelteRenderResult | void, SvelteInertiaAppConfig>, 'setup'> & {
     page?: Page<SharedProps>;
-    withApp?: (context: Map<any, any>, options: {
-        ssr: boolean;
-    }) => void;
-};
+} & ({
+    setup?: undefined;
+    withApp?: SvelteWithApp;
+} | {
+    setup: (options: SetupOptions<SharedProps>) => SvelteRenderResult | void;
+    withApp?: never;
+});
 type SvelteServerRender = (component: typeof App, options: {
     props: InertiaAppProps<PageProps>;
     context?: Map<any, any>;

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { default as InfiniteScroll } from './components/InfiniteScroll.svelte';
 export { default as Link } from './components/Link.svelte';
 export { default as WhenVisible } from './components/WhenVisible.svelte';
 export { default as createInertiaApp } from './createInertiaApp';
-export { resetLayoutProps, setLayoutProps, setLayoutPropsFor } from './layoutProps.svelte';
+export { resetLayoutProps, setLayoutProps } from './layoutProps.svelte';
 export { default as inertia } from './link';
 export { default as page, usePage } from './page.svelte';
 export { type LayoutCallback, type ResolvedComponent, type SvelteInertiaAppConfig } from './types';

package/dist/index.js

@@ -9,7 +9,7 @@ export { default as InfiniteScroll } from './components/InfiniteScroll.svelte';
 export { default as Link } from './components/Link.svelte';
 export { default as WhenVisible } from './components/WhenVisible.svelte';
 export { default as createInertiaApp } from './createInertiaApp';
-export { resetLayoutProps, setLayoutProps, setLayoutPropsFor } from './layoutProps.svelte';
+export { resetLayoutProps, setLayoutProps } from './layoutProps.svelte';
 export { default as inertia } from './link';
 export { default as page, usePage } from './page.svelte';
 export {} from './types';

package/dist/layoutProps.svelte.d.ts

@@ -4,5 +4,7 @@ export declare const storeState: {
     named: Record<string, Record<string, unknown>>;
 };
 export declare function setLayoutProps(props: Partial<LayoutProps>): void;
-export declare function setLayoutPropsFor<K extends keyof NamedLayoutProps>(name: K, props: Partial<NamedLayoutProps[K]>): void;
+export declare function setLayoutProps<K extends keyof NamedLayoutProps>(name: K, props: Partial<NamedLayoutProps[K]>): void;
+export declare function setLayoutProps<T = never>(props: Partial<NoInfer<T>>): void;
+export declare function setLayoutProps<T = never>(name: string, props: Partial<NoInfer<T>>): void;
 export declare function resetLayoutProps(): void;

package/dist/layoutProps.svelte.js

@@ -9,11 +9,13 @@ store.subscribe(() => {
     storeState.shared = snapshot.shared;
     storeState.named = snapshot.named;
 });
-export function setLayoutProps(props) {
-    store.set(props);
-}
-export function setLayoutPropsFor(name, props) {
-    store.setFor(name, props);
+export function setLayoutProps(nameOrProps, props) {
+    if (typeof nameOrProps === 'string') {
+        store.setFor(nameOrProps, props);
+    }
+    else {
+        store.set(nameOrProps);
+    }
 }
 export function resetLayoutProps() {
     store.reset();

package/dist/types.d.ts

@@ -1,16 +1,16 @@
-import { type Page, type SharedPageProps } from '@inertiajs/core';
+import { type LayoutCallbackReturn, 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<SharedPageProps>) => ResolvedComponent | Promise<ResolvedComponent>;
 export type LayoutResolver = (h: RenderFunction, page: RenderProps) => RenderProps;
-export type LayoutCallback = (props: SharedPageProps) => unknown;
+export type LayoutCallback = (props: SharedPageProps) => LayoutCallbackReturn<Component>;
 export type LayoutTuple = [Component, Record<string, unknown>?];
 export type LayoutObject = {
     component: Component;
     props?: Record<string, unknown>;
 };
 export type NamedLayouts = Record<string, Component | LayoutTuple | LayoutObject>;
-export type LayoutType = LayoutResolver | LayoutCallback | Component | Component[] | LayoutTuple | LayoutObject | NamedLayouts | (Component | LayoutTuple | LayoutObject)[];
+export type LayoutType = LayoutResolver | ((props: any) => any) | Component | Component[] | LayoutTuple | LayoutObject | NamedLayouts | (Component | LayoutTuple | LayoutObject)[];
 export type ResolvedComponent = {
     default: Component;
     layout?: LayoutType;

package/dist/useHttp.svelte.js

@@ -31,10 +31,12 @@ export default function useHttp(...args) {
         if (options.optimistic) {
             snapshot = cloneDeep(form.data());
             const optimisticData = options.optimistic(cloneDeep(snapshot));
-            Object.keys(optimisticData).forEach((key) => {
-                ;
-                baseForm[key] = optimisticData[key];
-            });
+            if (optimisticData) {
+                Object.keys(optimisticData).forEach((key) => {
+                    ;
+                    baseForm[key] = optimisticData[key];
+                });
+            }
         }
         setFormState('processing', true);
         options.onStart?.();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inertiajs/svelte",
-  "version": "3.0.0-beta.5",
+  "version": "3.0.0-beta.7",
   "license": "MIT",
   "description": "The Svelte adapter for Inertia.js",
   "contributors": [
@@ -54,8 +54,8 @@
   },
   "dependencies": {
     "es-toolkit": "^1.33.0",
-    "laravel-precognition": "2.0.0-beta.5",
-    "@inertiajs/core": "3.0.0-beta.5"
+    "laravel-precognition": "^2.0.0",
+    "@inertiajs/core": "3.0.0-beta.7"
   },
   "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 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."
+description: "Develops Inertia.js v3 Svelte 5 client-side applications. Activates when creating Svelte pages, forms, or navigation; using Link, Form, useForm, useHttp, setLayoutProps, 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
@@ -379,18 +379,11 @@ 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()
+let { title = 'My App', showSidebar = true, children } = $props()
 </script>
 
-<header>{layout.title}</header>
-{#if layout.showSidebar}
+<header>{title}</header>
+{#if showSidebar}
     <aside>Sidebar</aside>
 {/if}
 <main>
@@ -439,30 +432,54 @@ let { users } = $props()
 
 ### Polling
 
-Automatically refresh data at intervals:
+Use the `usePoll` hook to automatically refresh data at intervals. It handles cleanup on unmount and throttles polling when the tab is inactive.
 
-@boostsnippet("Polling Example", "svelte")
+@boostsnippet("Basic Polling", "svelte")
 <script>
-import { router } from '@inertiajs/svelte'
-import { onMount } from 'svelte'
+import { usePoll } from '@inertiajs/svelte'
 
 let { stats } = $props()
 
-onMount(() => {
-    const interval = setInterval(() => {
-        router.reload({ only: ['stats'] })
-    }, 5000)
+usePoll(5000)
+</script>
+
+<div>
+    <h1>Dashboard</h1>
+    <div>Active Users: {stats.activeUsers}</div>
+</div>
+@endboostsnippet
+
+@boostsnippet("Polling With Request Options and Manual Control", "svelte")
+<script>
+import { usePoll } from '@inertiajs/svelte'
+
+let { stats } = $props()
 
-    return () => clearInterval(interval)
+const { start, stop } = usePoll(5000, {
+    only: ['stats'],
+    onStart() {
+        console.log('Polling request started')
+    },
+    onFinish() {
+        console.log('Polling request finished')
+    },
+}, {
+    autoStart: false,
+    keepAlive: true,
 })
 </script>
 
 <div>
     <h1>Dashboard</h1>
     <div>Active Users: {stats.activeUsers}</div>
+    <button onclick={start}>Start Polling</button>
+    <button onclick={stop}>Stop Polling</button>
 </div>
 @endboostsnippet
 
+- `autoStart` (default `true`) - set to `false` to start polling manually via the returned `start()` function
+- `keepAlive` (default `false`) - set to `true` to prevent throttling when the browser tab is inactive
+
 ### WhenVisible
 
 Lazy-load a prop when an element scrolls into view. Useful for deferring expensive data that sits below the fold:
@@ -490,6 +507,26 @@ let { stats } = $props()
 </div>
 @endboostsnippet
 
+### InfiniteScroll
+
+Automatically load additional pages of paginated data as users scroll:
+
+@boostsnippet("InfiniteScroll Example", "svelte")
+<script>
+import { InfiniteScroll } from '@inertiajs/svelte'
+
+let { users } = $props()
+</script>
+
+<InfiniteScroll data="users">
+    {#each users.data as user (user.id)}
+        <div>{user.name}</div>
+    {/each}
+</InfiniteScroll>
+@endboostsnippet
+
+The server must use `Inertia::scroll()` to configure the paginated data. Use the `search-docs` tool with a query of `infinite scroll` for detailed guidance on buffers, manual loading, reverse mode, and custom trigger elements.
+
 ## Server-Side Patterns
 
 Server-side patterns (Inertia::render, props, middleware) are covered in inertia-laravel guidelines.