Svelte 5 Adapter based on #2586

.github/workflows/playwright-chromium.yml

@@ -28,7 +28,7 @@ jobs:
         run: pnpm install
 
       - name: Build Inertia
-        run: pnpm -r --filter ./packages/core --filter ./packages/${{ matrix.adapter }}* build
+        run: pnpm -r --filter ./packages/core --filter "@inertiajs/${{ matrix.adapter == 'vue' && 'vue3' || matrix.adapter }}" build
 
       - name: Install Playwright Browsers
         run: pnpm playwright install chromium

packages/svelte/package.json

@@ -44,21 +44,21 @@
     "package": "svelte-kit sync && svelte-package --input src"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/adapter-auto": "^7.0.0",
     "@sveltejs/kit": "^2.48.5",
     "@sveltejs/package": "^2.5.4",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "axios": "^1.13.2",
     "es-check": "^9.4.5",
-    "publint": "^0.2.12",
-    "svelte": "^4.2.20",
+    "publint": "^0.3.15",
+    "svelte": "^5.43.2",
     "svelte-check": "^4.3.4",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vite": "^5.4.21"
+    "vite": "^7.1.12"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0 || ^5.0.0"
+    "svelte": "^5.0.0"
   },
   "dependencies": {
     "@inertiajs/core": "workspace:*",

packages/svelte/src/components/App.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import type { ComponentResolver, ResolvedComponent } from '../types'
   import { type Page, type PageProps } from '@inertiajs/core'
 
@@ -13,18 +13,25 @@
   import type { LayoutType, LayoutResolver } from '../types'
   import { router } from '@inertiajs/core'
   import Render, { h, type RenderProps } from './Render.svelte'
-  import { setPage } from '../page'
+  import { setPage } from '../page.svelte'
 
-  export let initialComponent: InertiaAppProps['initialComponent']
-  export let initialPage: InertiaAppProps['initialPage']
-  export let resolveComponent: InertiaAppProps['resolveComponent']
+  interface Props {
+    initialComponent: InertiaAppProps['initialComponent']
+    initialPage: InertiaAppProps['initialPage']
+    resolveComponent: InertiaAppProps['resolveComponent']
+  }
+
+  const { initialComponent, initialPage, resolveComponent }: Props = $props()
 
-  let component = initialComponent
-  let key: number | null = null
-  let page = initialPage
-  let renderProps = resolveRenderProps(component, page, key)
+  let component = $state(initialComponent)
+  let key = $state<number | null>(null)
+  let page = $state(initialPage)
+  let renderProps = $derived.by<RenderProps>(() => resolveRenderProps(component, page, key))
 
-  setPage(page)
+  // Reactively update the global page state when local page state changes
+  $effect.pre(() => {
+    setPage(page)
+  })
 
   const isServer = typeof window === 'undefined'
 
@@ -35,10 +42,8 @@
       swapComponent: async (args) => {
         component = args.component
         page = args.page
-        key = args.preserveState ? key : Date.now()
 
-        renderProps = resolveRenderProps(component, page, key)
-        setPage(page)
+        key = args.preserveState ? key : Date.now()
       },
     })
   }
@@ -47,6 +52,7 @@
    * Resolves the render props for the current page component, including layouts.
    */
   function resolveRenderProps(component: ResolvedComponent, page: Page, key: number | null = null): RenderProps {
+    // If the component does not exists, it will throw on component.default and component.layout here
     const child = h(component.default, page.props, [], key)
     const layout = component.layout
 

packages/svelte/src/components/Deferred.svelte

@@ -1,34 +1,42 @@
 <script lang="ts">
+  import { untrack } from 'svelte'
   import { page } from '../index'
-  import { onDestroy } from 'svelte'
 
-  export let data: string | string[]
+  interface Props {
+    data: string | string[]
+    fallback?: import('svelte').Snippet
+    children?: import('svelte').Snippet
+  }
 
-  const keys = Array.isArray(data) ? data : [data]
-  let loaded = false
+  let { data, fallback, children }: Props = $props()
 
-  const isServer = typeof window === 'undefined'
+  const keys = $derived(Array.isArray(data) ? data : [data])
+  let loaded = $state(false)
 
+  const isServer = typeof window === 'undefined'
   if (!isServer) {
-    const unsubscribe = page.subscribe(({ props }) => {
-      // Ensures the slot isn't loaded before the deferred props are available
-      window.queueMicrotask(() => {
-        loaded = keys.every((key) => typeof props[key] !== 'undefined')
-      })
-    })
+    // Use $effect to watch for changes in pageState.props
+    $effect(() => {
+      // Access pageState.props to make this effect reactive
+      const props = page.props
 
-    onDestroy(() => {
-      unsubscribe()
+      // Wrap this up into untrack, to make sure it doesn't gets picked as a depedency to retrigger the $effect
+      untrack(() => {
+        // Ensures the content isn't loaded before the deferred props are available
+        window.queueMicrotask(() => {
+          loaded = keys.every((key) => typeof props[key] !== 'undefined')
+        })
+      })
     })
   }
 
-  if (!$$slots.fallback) {
-    throw new Error('`<Deferred>` requires a `<svelte:fragment slot="fallback">` slot')
+  if (!fallback) {
+    throw new Error('`<Deferred>` requires a `fallback` snippet')
   }
 </script>
 
 {#if loaded}
-  <slot />
+  {@render children?.()}
 {:else}
-  <slot name="fallback" />
+  {@render fallback?.()}
 {/if}

packages/svelte/src/components/Form.svelte

@@ -12,42 +12,73 @@
   } from '@inertiajs/core'
   import { isEqual } from 'lodash-es'
   import { onMount } from 'svelte'
-  import useForm from '../useForm'
+  import useForm from '../useForm.svelte'
 
   const noop = () => undefined
 
-  export let action: FormComponentProps['action'] = ''
-  export let method: FormComponentProps['method'] = 'get'
-  export let headers: FormComponentProps['headers'] = {}
-  export let queryStringArrayFormat: FormComponentProps['queryStringArrayFormat'] = 'brackets'
-  export let errorBag: FormComponentProps['errorBag'] = null
-  export let showProgress: FormComponentProps['showProgress'] = true
-  export let transform: FormComponentProps['transform'] = (data) => data
-  export let options: FormComponentProps['options'] = {}
-  export let onCancelToken: FormComponentProps['onCancelToken'] = noop
-  export let onBefore: FormComponentProps['onBefore'] = noop
-  export let onStart: FormComponentProps['onStart'] = noop
-  export let onProgress: FormComponentProps['onProgress'] = noop
-  export let onFinish: FormComponentProps['onFinish'] = noop
-  export let onCancel: FormComponentProps['onCancel'] = noop
-  export let onSuccess: FormComponentProps['onSuccess'] = noop
-  export let onError: FormComponentProps['onError'] = noop
-  export let onSubmitComplete: FormComponentProps['onSubmitComplete'] = noop
-  export let disableWhileProcessing: boolean = false
-  export let invalidateCacheTags: FormComponentProps['invalidateCacheTags'] = []
-  export let resetOnError: FormComponentProps['resetOnError'] = false
-  export let resetOnSuccess: FormComponentProps['resetOnSuccess'] = false
-  export let setDefaultsOnSuccess: FormComponentProps['setDefaultsOnSuccess'] = false
+  interface Props {
+    action?: FormComponentProps['action']
+    method?: FormComponentProps['method']
+    headers?: FormComponentProps['headers']
+    queryStringArrayFormat?: FormComponentProps['queryStringArrayFormat']
+    errorBag?: FormComponentProps['errorBag']
+    showProgress?: FormComponentProps['showProgress']
+    transform?: FormComponentProps['transform']
+    options?: FormComponentProps['options']
+    onCancelToken?: FormComponentProps['onCancelToken']
+    onBefore?: FormComponentProps['onBefore']
+    onStart?: FormComponentProps['onStart']
+    onProgress?: FormComponentProps['onProgress']
+    onFinish?: FormComponentProps['onFinish']
+    onCancel?: FormComponentProps['onCancel']
+    onSuccess?: FormComponentProps['onSuccess']
+    onError?: FormComponentProps['onError']
+    onSubmitComplete?: FormComponentProps['onSubmitComplete']
+    disableWhileProcessing?: boolean
+    invalidateCacheTags?: FormComponentProps['invalidateCacheTags']
+    resetOnError?: FormComponentProps['resetOnError']
+    resetOnSuccess?: FormComponentProps['resetOnSuccess']
+    setDefaultsOnSuccess?: FormComponentProps['setDefaultsOnSuccess']
+    children?: import('svelte').Snippet<[any]>
+    [key: string]: any
+  }
+
+  let {
+    action = $bindable(''),
+    method = 'get',
+    headers = {},
+    queryStringArrayFormat = 'brackets',
+    errorBag = null,
+    showProgress = true,
+    transform = (data) => data,
+    options = {},
+    onCancelToken = noop,
+    onBefore = noop,
+    onStart = noop,
+    onProgress = noop,
+    onFinish = noop,
+    onCancel = noop,
+    onSuccess = noop,
+    onError = noop,
+    onSubmitComplete = noop,
+    disableWhileProcessing = false,
+    invalidateCacheTags = [],
+    resetOnError = false,
+    resetOnSuccess = false,
+    setDefaultsOnSuccess = false,
+    children,
+    ...rest
+  }: Props = $props()
 
   type FormSubmitOptions = Omit<VisitOptions, 'data' | 'onPrefetched' | 'onPrefetching'>
 
   const form = useForm({})
-  let formElement: HTMLFormElement
-  let isDirty = false
+  let formElement: HTMLFormElement = $state(null!)
+  let isDirty = $state(false)
   let defaultData: FormData = new FormData()
 
-  $: _method = isUrlMethodPair(action) ? action.method : ((method ?? 'get').toLowerCase() as Method)
-  $: _action = isUrlMethodPair(action) ? action.url : (action as string)
+  const _method = $derived(isUrlMethodPair(action) ? action.method : ((method ?? 'get').toLowerCase() as Method))
+  const _action = $derived(isUrlMethodPair(action) ? action.url : (action as string))
 
   export function getFormData(): FormData {
     return new FormData(formElement)
@@ -119,7 +150,7 @@
       ...options,
     }
 
-    $form.transform(() => transform!(_data)).submit(_method, url, submitOptions)
+    form.transform(() => transform!(_data)).submit(_method, url, submitOptions)
   }
 
   function handleSubmit(event: Event) {
@@ -141,21 +172,21 @@
 
   export function clearErrors(...fields: string[]) {
     // @ts-expect-error
-    $form.clearErrors(...fields)
+    form.clearErrors(...fields)
   }
 
   export function resetAndClearErrors(...fields: string[]) {
     // @ts-expect-error
-    $form.clearErrors(...fields)
+    form.clearErrors(...fields)
     reset(...fields)
   }
 
   export function setError(field: string | object, value?: string) {
     if (typeof field === 'string') {
       // @ts-expect-error
-      $form.setError(field, value)
+      form.setError(field, value)
     } else {
-      $form.setError(field)
+      form.setError(field)
     }
   }
 
@@ -174,32 +205,33 @@
       formEvents.forEach((e) => formElement?.removeEventListener(e, updateDirtyState))
     }
   })
-  $: slotErrors = $form.errors as Errors
+  const slotErrors = $derived(form.errors as Errors)
 </script>
 
+{/* @ts-expect-error method type does not match here*/ null}
 <form
   bind:this={formElement}
   action={_action}
   method={_method}
-  on:submit={handleSubmit}
-  on:reset={handleReset}
-  {...$$restProps}
-  inert={disableWhileProcessing && $form.processing ? true : undefined}
+  onsubmit={handleSubmit}
+  onreset={handleReset}
+  {...rest}
+  inert={disableWhileProcessing && form.processing ? true : undefined}
 >
-  <slot
-    errors={slotErrors}
-    hasErrors={$form.hasErrors}
-    processing={$form.processing}
-    progress={$form.progress}
-    wasSuccessful={$form.wasSuccessful}
-    recentlySuccessful={$form.recentlySuccessful}
-    {clearErrors}
-    {resetAndClearErrors}
-    {setError}
-    {isDirty}
-    {submit}
-    {defaults}
-    {getData}
-    {getFormData}
-  />
+  {@render children?.({
+    errors: slotErrors,
+    hasErrors: form.hasErrors,
+    processing: form.processing,
+    progress: form.progress,
+    wasSuccessful: form.wasSuccessful,
+    recentlySuccessful: form.recentlySuccessful,
+    clearErrors,
+    resetAndClearErrors,
+    setError,
+    isDirty,
+    submit,
+    defaults,
+    getData,
+    getFormData,
+  })}
 </form>