Svelte 5: Minimalest upgrade

packages/svelte/package.json

@@ -32,7 +32,7 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^3.20.0 || ^4.0.0"
+    "svelte": "^3.20.0 || ^4.0.0 || ^5.0.0 || 5.0.0-next.1"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.0",

packages/svelte/src/lib/components/SSR.svelte

@@ -1,9 +1,15 @@
-<script lang="ts">
+<script context="module" lang="ts">
   import type { Page } from '@inertiajs/core'
+  export type SSRProps = { id: string; initialPage: Page }
+</script>
+
+<script lang="ts">
   import App from './App.svelte'
 
-  export let id: string
-  export let initialPage: Page
+  interface $$Props extends SSRProps {}
+
+  export let id: $$Props['id']
+  export let initialPage: $$Props['initialPage']
 </script>
 
 <div data-server-rendered="true" {id} data-page={JSON.stringify(initialPage)}>

packages/svelte/src/lib/createInertiaApp.ts

@@ -1,22 +1,24 @@
 import { router, setupProgress, type InertiaAppResponse, type Page } from '@inertiajs/core'
 import type { ComponentType } from 'svelte'
-import SvelteApp from './components/App.svelte'
-import SSR from './components/SSR.svelte'
+import App from './components/App.svelte'
+import SSR, { type SSRProps } from './components/SSR.svelte'
 import store from './store'
 import type { ComponentResolver, InertiaComponentType } from './types'
 
+type SSRRenderResult = { html: string; head: string; css?: { code: string } }
+type SSRComponentType = ComponentType<SSR> & { render?: (props: SSRProps) => SSRRenderResult }
+
 interface CreateInertiaAppProps {
   id?: string
   resolve: ComponentResolver
   setup: (props: {
     el: Element
-    // @ts-ignore
-    App: ComponentType<SvelteApp>
+    App: ComponentType<App> | SSRComponentType
     props: {
       initialPage: Page
       resolveComponent: ComponentResolver
     }
-  }) => void | SvelteApp
+  }) => void | SSRRenderResult
   progress?:
     | false
     | {
@@ -67,24 +69,37 @@ export default async function createInertiaApp({
     if (progress) {
       setupProgress(progress)
     }
+  }
 
-    setup({
-      el,
-      App: SvelteApp,
-      props: {
-        initialPage,
-        resolveComponent,
-      },
-    })
+  let result = setup({
+    // @ts-expect-error
+    el,
+    App: !isServer ? App : SSR,
+    props: {
+      id,
+      initialPage,
+      resolveComponent,
+    },
+  })
 
-    return
-  }
+  if (isServer) {
+    if (!result && typeof (SSR as SSRComponentType).render !== 'function') {
+      throw new Error(`setup(...) must return rendered result when in SSR mode.`)
+    } else if (!result) {
+      console.warn('Deprecated: setup(...) must be defined and must return rendered result in SSR mode.')
+      console.warn('For Svelte 5: `return render(App, { props })` or for Svelte 4: `return App.render(props)`')
+      result = (SSR as SSRComponentType).render!({ id, initialPage })
+    }
 
-  // Svelte types are written for the DOM API and not the SSR API.
-  const { html, head, css } = (SSR as any).render({ id, initialPage })
+    const { html, head, css } = result
 
-  return {
-    body: html,
-    head: [head, `<style data-vite-css>${css.code}</style>`],
+    return {
+      body: html,
+      head: [
+        head,
+        // Note: Svelte 5 no longer output CSS
+        ...(css?.code ? [`<style data-vite-css>${css?.code}</style>`] : []),
+      ],
+    }
   }
 }

playgrounds/svelte/package.json

@@ -8,14 +8,14 @@
   },
   "devDependencies": {
     "@inertiajs/svelte": "^1.0.0",
-    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "autoprefixer": "^10.4.13",
     "axios": "^1.6.0",
     "laravel-vite-plugin": "^0.7.2",
     "lodash": "^4.17.19",
     "postcss": "^8.4.31",
-    "svelte": "^4.2.14",
+    "svelte": "^5.0.0-next.126",
     "tailwindcss": "^3.2.4",
-    "vite": "^4.5.3"
+    "vite": "^5.2.11"
   }
 }

playgrounds/svelte/resources/js/app.js

@@ -1,11 +1,19 @@
 import { createInertiaApp } from '@inertiajs/svelte'
+import { hydrate, mount } from 'svelte'
 
 createInertiaApp({
   resolve: (name) => {
     const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
     return pages[`./Pages/${name}.svelte`]
   },
   setup({ el, App }) {
-    new App({ target: el, hydrate: true })
+    // Svelte 4: new App({ target: el, hydrate: true })
+
+    // Svelte 5
+    if (el.dataset.serverRendered === 'true') {
+      hydrate(App, { target: el })
+    } else {
+      mount(App, { target: el })
+    }
   },
 })

playgrounds/svelte/resources/js/ssr.js

@@ -1,12 +1,17 @@
 import { createInertiaApp } from '@inertiajs/svelte'
 import createServer from '@inertiajs/svelte/server'
-
+import { render } from 'svelte/server'
 createServer((page) =>
   createInertiaApp({
     page,
     resolve: (name) => {
       const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
       return pages[`./Pages/${name}.svelte`]
     },
+    setup({ App, props }) {
+      // Svelte 4: return App.render(props)
+      // Svelte 5:
+      return render(App, { props })
+    },
   }),
 )

playgrounds/svelte/vite.config.js

@@ -11,8 +11,9 @@ export default defineConfig({
     }),
     svelte({
       compilerOptions: {
-        hydratable: true,
-      },
+        // Svelte 4 only
+        // hydratable: true
+      }
     }),
   ],
 })