[inertiajs#1872] Merge pull request #5 from jamesst20/svelte5-minimal-main

[inertiajs#1872] Svelte 5: Minimalest upgrade

Author: jamesst20

package-lock.json

@@ -25,7 +25,7 @@
   },
   "main": "src/index.js",
   "peerDependencies": {
-    "svelte": "^3.20.0 || ^4.0.0"
+    "svelte": "^3.20.0 || ^4.0.0 || ^5.0.0 || 5.0.0-next.1"
   },
   "dependencies": {
     "@inertiajs/core": "1.0.16",

packages/svelte/package.json

@@ -3,7 +3,7 @@ import App from './App.svelte'
 import SSR from './SSR.svelte'
 import store from './store'
 
-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)
@@ -44,11 +44,19 @@ export default async function createInertiaApp({ id = 'app', resolve, setup, pro
   }
 
   if (isServer) {
-    const { html, head } = SSR.render({ 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>`] : []),
+      ],
     }
   }
 }

packages/svelte/src/createInertiaApp.js

@@ -15,7 +15,7 @@
     "laravel-vite-plugin": "^1.0.2",
     "lodash": "^4.17.21",
     "postcss": "^8.4.38",
-    "svelte": "^4.2.16",
+    "svelte": "^5.0.0-next.1",
     "svelte-check": "^3.7.1",
     "tailwindcss": "^3.4.3",
     "tslib": "^2.6.2",

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

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