@inertiajs/svelte 3.0.0-beta.4 → 3.0.0-beta.6

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/useHttp.svelte.d.ts

@@ -21,12 +21,12 @@ export interface UseHttpProps<TForm extends object, TResponse = unknown> {
     resetAndClearErrors<K extends FormDataKeys<TForm>>(...fields: K[]): this;
     setError<K extends FormDataKeys<TForm>>(field: K, value: ErrorValue): this;
     setError(errors: FormDataErrors<TForm>): this;
-    submit<R = TResponse>(...args: UseHttpSubmitArguments<R, TForm>): Promise<R>;
-    get<R = TResponse>(url: string, options?: UseHttpSubmitOptions<R, TForm>): Promise<R>;
-    post<R = TResponse>(url: string, options?: UseHttpSubmitOptions<R, TForm>): Promise<R>;
-    put<R = TResponse>(url: string, options?: UseHttpSubmitOptions<R, TForm>): Promise<R>;
-    patch<R = TResponse>(url: string, options?: UseHttpSubmitOptions<R, TForm>): Promise<R>;
-    delete<R = TResponse>(url: string, options?: UseHttpSubmitOptions<R, TForm>): Promise<R>;
+    submit(...args: UseHttpSubmitArguments<TResponse, TForm>): Promise<TResponse>;
+    get(url: string, options?: UseHttpSubmitOptions<TResponse, TForm>): Promise<TResponse>;
+    post(url: string, options?: UseHttpSubmitOptions<TResponse, TForm>): Promise<TResponse>;
+    put(url: string, options?: UseHttpSubmitOptions<TResponse, TForm>): Promise<TResponse>;
+    patch(url: string, options?: UseHttpSubmitOptions<TResponse, TForm>): Promise<TResponse>;
+    delete(url: string, options?: UseHttpSubmitOptions<TResponse, TForm>): Promise<TResponse>;
     cancel(): void;
     dontRemember<K extends FormDataKeys<TForm>>(...fields: K[]): this;
     optimistic(callback: (currentData: TForm) => Partial<TForm>): this;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inertiajs/svelte",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.6",
   "license": "MIT",
   "description": "The Svelte adapter for Inertia.js",
   "contributors": [
@@ -55,7 +55,7 @@
   "dependencies": {
     "es-toolkit": "^1.33.0",
     "laravel-precognition": "2.0.0-beta.5",
-    "@inertiajs/core": "3.0.0-beta.4"
+    "@inertiajs/core": "3.0.0-beta.6"
   },
   "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.