Svelte 5 Adapter based on #2586

.github/workflows/es2020-compatibility.yml

@@ -10,7 +10,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        adapter: ['core', 'react', 'vue', 'svelte']
+        adapter: ['core', 'react', 'vue', 'svelte', 'svelte5']
 
     steps:
       - name: Checkout code

.github/workflows/playwright.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-24.04
     strategy:
       matrix:
-        adapter: ['vue', 'react', 'svelte']
+        adapter: ['vue', 'react', 'svelte', 'svelte5']
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -27,7 +27,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: Type-check test-app
         run: cd packages/${{ matrix.adapter == 'vue' && 'vue3' || matrix.adapter }}/test-app && pnpm run type-check

.github/workflows/publish.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        adapter: ['core', 'vue3', 'react', 'svelte']
+        adapter: ['core', 'vue3', 'react', 'svelte', 'svelte5']
     steps:
       - name: Checkout
         uses: actions/checkout@v4

CONTRIBUTING.md

@@ -16,6 +16,8 @@ inertia/
 │   │   └── test-app/  React test application
 │   ├── svelte/        Svelte adapter
 │   │   └── test-app/  Svelte test application
+│   ├── svelte5/       Svelte 5 adapter
+│   │   └── test-app/  Svelte 5 test application
 │   └── vue3/          Vue 3 adapter
 │       └── test-app/  Vue 3 test application
 ├── playgrounds/       Full Laravel applications for manual testing
@@ -72,6 +74,7 @@ Run the test suite for a specific adapter:
 ```sh
 pnpm test:react
 pnpm test:svelte
+pnpm test:svelte5
 pnpm test:vue
 ```
 
@@ -109,6 +112,7 @@ All adapters use the same Node.js backend and Playwright test suite. The only di
 tests/app/server.js         Shared Node.js backend
 ├── serves: react test app  (when PACKAGE=react)
 ├── serves: svelte test app (when PACKAGE=svelte)
+├── serves: svelte5 test app (when PACKAGE=svelte5)
 └── serves: vue test app    (when PACKAGE=vue3)
 
 tests/*.spec.ts             Shared Playwright test suite
@@ -120,6 +124,7 @@ When running a test command, the correct adapter is selected automatically:
 | ------- | --------------- | ---------------- | -------------------------------------------------- |
 | React   | `react`         | 13716            | [http://localhost:13716/](http://localhost:13716/) |
 | Svelte  | `svelte`        | 13717            | [http://localhost:13717/](http://localhost:13717/) |
+| Svelte5 | `svelte5`       | 13718            | [http://localhost:13718/](http://localhost:13718/) |
 | Vue 3   | `vue3`          | 13715            | [http://localhost:13715/](http://localhost:13715/) |
 
 ### Automatic Test Server Boot
@@ -141,6 +146,7 @@ Or start an individual one:
 ```sh
 pnpm dev:test-app:react
 pnpm dev:test-app:svelte
+pnpm dev:test-app:svelte5
 pnpm dev:test-app:vue
 ```
 

package.json

@@ -12,18 +12,22 @@
     "dev:test-app": "pnpx concurrently -c \"#61dafb,#d43008,#32a06f\" \"pnpm dev:test-app:react\" \"pnpm dev:test-app:svelte\" \"pnpm dev:test-app:vue\" --names=react,svelte,vue",
     "dev:test-app:react": "pnpx concurrently -c \"#c4b5fd,#ffa800\" \"cd tests/app && PACKAGE=react pnpm serve:watch\" \"cd packages/react/test-app && pnpm run dev\" --names=server,vite",
     "dev:test-app:svelte": "pnpx concurrently -c \"#c4b5fd,#ffa800\" \"cd tests/app && PACKAGE=svelte pnpm serve:watch\" \"cd packages/svelte/test-app && pnpm run dev\" --names=server,vite",
+    "dev:test-app:svelte5": "pnpx concurrently -c \"#c4b5fd,#ffa800\" \"cd tests/app && PACKAGE=svelte5 pnpm serve:watch\" \"cd packages/svelte5/test-app && pnpm run dev\" --names=server,vite",
     "dev:test-app:vue": "pnpx concurrently -c \"#c4b5fd,#ffa800\" \"cd tests/app && PACKAGE=vue3 pnpm serve:watch\" \"cd packages/vue3/test-app && pnpm run dev\" --names=server,vite",
     "es2020-check": "pnpm -r --filter './packages/*' es2020-check",
     "lint:test-app": "pnpm -r --filter './packages/*/test-app' lint",
     "lint:test-app:react": "cd packages/react/test-app && pnpm run lint",
     "lint:test-app:svelte": "cd packages/svelte/test-app && pnpm run lint",
+    "lint:test-app:svelte5": "cd packages/svelte5/test-app && pnpm run lint",
     "lint:test-app:vue": "cd packages/vue3/test-app && pnpm run lint",
     "type-check:test-app": "pnpm -r --filter './packages/*/test-app' type-check",
     "type-check:test-app:react": "cd packages/react/test-app && pnpm run type-check",
     "type-check:test-app:svelte": "cd packages/svelte/test-app && pnpm run type-check",
+    "type-check:test-app:svelte5": "cd packages/svelte5/test-app && pnpm run type-check",
     "type-check:test-app:vue": "cd packages/vue3/test-app && pnpm run type-check",
     "test:react": "PACKAGE=react playwright test",
     "test:svelte": "PACKAGE=svelte playwright test",
+    "test:svelte5": "PACKAGE=svelte5 playwright test",
     "test:vue": "PACKAGE=vue3 playwright test",
     "playground:react": "cd playgrounds/react && ./init.sh && composer run dev",
     "playground:svelte4": "cd playgrounds/svelte4 && ./init.sh && composer run dev",

packages/svelte5/.gitignore

@@ -0,0 +1,6 @@
+dist
+types
+node_modules
+package-lock.json
+yarn.lock
+.svelte-kit

packages/svelte5/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Jonathan Reinink <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/svelte5/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@inertiajs/svelte5",
+  "version": "2.2.14",
+  "license": "MIT",
+  "description": "The Svelte 5 adapter for Inertia.js",
+  "contributors": [
+    "Jonathan Reinink <[email protected]>",
+    "Pedro Borges <[email protected]>"
+  ],
+  "homepage": "https://inertiajs.com/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/inertiajs/inertia.git",
+    "directory": "packages/svelte5"
+  },
+  "bugs": {
+    "url": "https://github.com/inertiajs/inertia/issues"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "svelte": "./dist/server.js"
+    }
+  },
+  "scripts": {
+    "build": "pnpm package && svelte-check --tsconfig ./tsconfig.json && publint",
+    "build:with-deps": "svelte-kit sync && vite build --config vite-with-deps.config.js",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "dev": "pnpm package --watch",
+    "es2020-check": "pnpm build:with-deps && es-check es2020 \"dist/**/*.js\" --checkFeatures --module --noCache --verbose",
+    "package": "svelte-kit sync && svelte-package --input src",
+    "prepublishOnly": "pnpm build"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.48.4",
+    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "axios": "^1.13.1",
+    "es-check": "^9.4.4",
+    "publint": "^0.3.15",
+    "svelte": "^5.43.2",
+    "svelte-check": "^4.3.3",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "dependencies": {
+    "@inertiajs/core": "workspace:*",
+    "@types/lodash-es": "^4.17.12",
+    "lodash-es": "^4.17.21"
+  }
+}

packages/svelte5/readme.md

@@ -0,0 +1,3 @@
+# Inertia.js Svelte Adapter
+
+Visit [inertiajs.com](https://inertiajs.com/) to learn more.

packages/svelte5/src/components/App.svelte

@@ -0,0 +1,109 @@
+<script module lang="ts">
+  import type { ComponentResolver, ResolvedComponent } from '../types'
+  import { type Page, type PageProps } from '@inertiajs/core'
+
+  export interface InertiaAppProps<SharedProps extends PageProps = PageProps> {
+    initialComponent: ResolvedComponent
+    initialPage: Page<SharedProps>
+    resolveComponent: ComponentResolver
+  }
+</script>
+
+<script lang="ts">
+  import type { LayoutType, LayoutResolver } from '../types'
+  import { router } from '@inertiajs/core'
+  import Render, { h, type RenderProps } from './Render.svelte'
+  import { setPage } from '../page.svelte'
+
+  interface Props {
+    initialComponent: InertiaAppProps['initialComponent']
+    initialPage: InertiaAppProps['initialPage']
+    resolveComponent: InertiaAppProps['resolveComponent']
+  }
+
+  const { initialComponent, initialPage, resolveComponent }: Props = $props()
+
+  let component = $state(initialComponent)
+  let key = $state<number | null>(null)
+  let page = $state(initialPage)
+  let renderProps = $derived.by<RenderProps>(() => resolveRenderProps(component, page, key))
+
+  // Reactively update the global page state when local page state changes
+  $effect.pre(() => {
+    setPage(page)
+  })
+
+  const isServer = typeof window === 'undefined'
+
+  if (!isServer) {
+    router.init<ResolvedComponent>({
+      initialPage,
+      resolveComponent,
+      swapComponent: async (args) => {
+        component = args.component
+        page = args.page
+
+        key = args.preserveState ? key : Date.now()
+      },
+    })
+  }
+
+  /**
+   * 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
+
+    return layout ? resolveLayout(layout, child, page.props, key) : child
+  }
+
+  /**
+   * Builds the nested layout structure by wrapping the child component with the provided layouts.
+   *
+   * Resulting nested structure:
+   *
+   *    {
+   *      "component": OuterLayout,
+   *      "key": 123456,
+   *      "children": [{
+   *        "component": InnerLayout,
+   *        "key": 123456,
+   *        "children": [{
+   *          "component": PageComponent,
+   *          "key": 123456,
+   *          "children": [],
+   *        }],
+   *      }],
+   *    }
+   */
+  function resolveLayout(
+    layout: LayoutType,
+    child: RenderProps,
+    pageProps: PageProps,
+    key: number | null,
+  ): RenderProps {
+    if (isLayoutFunction(layout)) {
+      return layout(h, child)
+    }
+
+    if (Array.isArray(layout)) {
+      return layout
+        .slice()
+        .reverse()
+        .reduce((currentRender, layoutComponent) => h(layoutComponent, pageProps, [currentRender], key), child)
+    }
+
+    return h(layout, pageProps, child ? [child] : [], key)
+  }
+
+  /**
+   * Type guard to check if layout is a LayoutResolver
+   */
+  function isLayoutFunction(layout: LayoutType): layout is LayoutResolver {
+    return typeof layout === 'function' && layout.length === 2 && typeof layout.prototype === 'undefined'
+  }
+</script>
+
+<Render {...renderProps} />

packages/svelte5/src/components/Deferred.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { untrack } from 'svelte'
+  import { page } from '../index'
+
+  interface Props {
+    data: string | string[]
+    fallback?: import('svelte').Snippet
+    children?: import('svelte').Snippet
+  }
+
+  let { data, fallback, children }: Props = $props()
+
+  const keys = Array.isArray(data) ? data : [data]
+  let loaded = $state(false)
+
+  const isServer = typeof window === 'undefined'
+  if (!isServer) {
+    // Use $effect to watch for changes in pageState.props
+    $effect(() => {
+      // Access pageState.props to make this effect reactive
+      const props = page.props
+
+      // 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 (!fallback) {
+    throw new Error('`<Deferred>` requires a `fallback` snippet')
+  }
+</script>
+
+{#if loaded}
+  {@render children?.()}
+{:else}
+  {@render fallback?.()}
+{/if}