Extract rendering outside createInertiaApp to allow Svelte 4 & 5 compatibility

Author: jamesst20

packages/svelte/src/createInertiaApp.js

@@ -1,12 +1,9 @@
-import { VERSION } from 'svelte/compiler';
 import { router, setupProgress } from '@inertiajs/core'
 import App from './App.svelte'
 import SSR from './SSR.svelte'
 import store from './store'
 
-const SVELTE_MAJOR_VERSION = parseInt(VERSION.split('.')[0]);
-
-export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page }) {
+export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page, ssr }) {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
   const initialPage = page || JSON.parse(el.dataset.page)
@@ -47,18 +44,19 @@ export default async function createInertiaApp({ id = 'app', resolve, setup, pro
   }
 
   if (isServer) {
-    const { html, head } = await (async () => {
-      if (SVELTE_MAJOR_VERSION < 5) {
-        return SSR.render({ id, initialPage })
-      } else {
-        const { render } = await import('svelte/server')
-        return render(SSR, { props: { id, initialPage } })
-      }
-    })()
+    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],
+      head: [
+        head,
+        // Note: Svelte 5 no longer output CSS
+        ...(css?.code ? [`<style data-vite-css>${css?.code}</style>`] : []),
+      ],
     }
   }
 }

playgrounds/svelte/resources/js/app.js

@@ -7,6 +7,9 @@ createInertiaApp({
     return pages[`./Pages/${name}.svelte`]
   },
   setup({ el, App }) {
+    // Svelte 4: new App({ target: el, hydrate: true })
+
+    // Svelte 5
     if (el.dataset.serverRendered === 'true') {
       hydrate(App, { target: el })
     } else {

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

playgrounds/svelte/vite.config.js

@@ -9,6 +9,11 @@ export default defineConfig({
       ssr: 'resources/js/ssr.js',
       refresh: true,
     }),
-    svelte(),
+      svelte({
+          compilerOptions: {
+              // Svelte 4 only
+              // hydratable: true
+          }
+      }),
   ],
 })