Svelte 5: Minimalest upgrade

Extract rendering outside createInertiaApp to allow Svelte 4 & 5 compatibility

Author: jamesst20

package-lock.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/package.json

@@ -1,11 +1,17 @@
-<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)}>
   <App />
-</div>
+</div>

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

@@ -1,10 +1,13 @@
 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 SSR, { type SSRProps } from './components/SSR.svelte'
 import store from './store'
 import type { ComponentResolver, InertiaComponentType } from './types'
 
+type SvelteRenderResult = { html: string; head: string; css?: { code: string } }
+type SSRComponent = ComponentType<SSR> & { render?: (props: SSRProps) => SvelteRenderResult }
+
 interface CreateInertiaAppProps {
   id?: string
   resolve: ComponentResolver
@@ -26,6 +29,7 @@ interface CreateInertiaAppProps {
         showSpinner?: boolean
       }
   page?: Page
+  ssr?: (AppSSR: SSRComponent, props: SSRProps) => SvelteRenderResult
 }
 
 export default async function createInertiaApp({
@@ -34,6 +38,7 @@ export default async function createInertiaApp({
   setup,
   progress = {},
   page,
+  ssr,
 }: CreateInertiaAppProps): InertiaAppResponse {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
@@ -76,15 +81,22 @@ export default async function createInertiaApp({
         resolveComponent,
       },
     })
-
-    return
   }
 
-  // Svelte types are written for the DOM API and not the SSR API.
-  const { html, head, css } = (SSR as any).render({ id, initialPage })
-
-  return {
-    body: html,
-    head: [head, `<style data-vite-css>${css.code}</style>`],
+  if (isServer) {
+    if (!ssr) {
+      throw new Error(`createInertiaApp must provide ssr(...) for server-side rendering.`)
+    }
+  
+    const { html, head, css } = ssr(SSR, { id, initialPage })
+  
+    return {
+      body: html,
+      head: [
+        head, 
+        // Note: Svelte 5 no longer output CSS
+        ...(css?.code ? [`<style data-vite-css>${css?.code}</style>`] : []),
+      ],
+    }
   }
 }

packages/svelte/src/lib/createInertiaApp.ts

@@ -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/package.json

@@ -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/app.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`]
     },
+    ssr: (AppSSR, props) => {
+      // Svelte 4: return AppSSR.render(props)
+      // Svelte 5: return render(AppSSR, { props })
+      return render(AppSSR, { props })
+    },
   }),
 )

playgrounds/svelte/resources/js/ssr.js

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