[inertiajs#1872] Update Svelte 5 compatibility

Author: jamesst20

packages/svelte/package.json

@@ -55,9 +55,9 @@
     "@sveltejs/adapter-auto": "^3.2.0",
     "@sveltejs/kit": "^2.5.7",
     "@sveltejs/package": "^2.3.1",
-    "@sveltejs/vite-plugin-svelte": "4.0.0-next.0",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "publint": "^0.1.16",
-    "svelte": "5.0.0-next.131",
+    "svelte": "^4.2.16",
     "svelte-check": "^3.7.1",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
@@ -67,4 +67,4 @@
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module"
-}
+}

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,12 +1,13 @@
-import { VERSION } from 'svelte/compiler';
 import { router, setupProgress, type InertiaAppResponse, type Page } from '@inertiajs/core'
 import type { ComponentType } from 'svelte'
 import App from './components/App.svelte'
+import type { SSRProps } from './components/SSR.svelte'
 import SSR from './components/SSR.svelte'
 import store from './store'
 import type { ComponentsResolver, ResolvedComponents } from './types'
 
-const SVELTE_MAJOR_VERSION = parseInt(VERSION.split('.')[0]);
+type SvelteRenderResult = { html: string; head: string; css?: { code: string } }
+type SSRComponent = ComponentType<SSR> & { render?: (props: SSRProps) => SvelteRenderResult }
 
 interface CreateInertiaAppProps {
   id?: string
@@ -28,6 +29,7 @@ interface CreateInertiaAppProps {
         showSpinner?: boolean
       }
   page?: Page
+  ssr?: (AppSSR: SSRComponent, props: SSRProps) => SvelteRenderResult
 }
 
 export default async function createInertiaApp({
@@ -36,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)
@@ -81,18 +84,19 @@ export default async function createInertiaApp({
   }
 
   if (isServer) {
-    const { html, head } = await (async () => {
-      if (SVELTE_MAJOR_VERSION < 5) {
-        return (SSR as any).render({ id, initialPage })
-      } else {
-        const { render } = await import('svelte/server')
-        return render(SSR as any, { props: { id, initialPage } })
-      }
-    })()
+    if (!ssr) {
+      throw new Error(`createInertiaApp must provide ssr(...) for server-side rendering.`)
+    }
+
+    const { html, head, css } = ssr(SSR as SSRComponent, { 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/lib/useForm.ts

@@ -47,9 +47,7 @@ interface InertiaFormProps<TForm extends FormDataType> {
 
 export type InertiaForm<TForm extends FormDataType> = InertiaFormProps<TForm> & TForm
 
-export default function useForm<TForm extends FormDataType>(
-  data: TForm | (() => TForm),
-): Writable<InertiaForm<TForm>>
+export default function useForm<TForm extends FormDataType>(data: TForm | (() => TForm)): Writable<InertiaForm<TForm>>
 export default function useForm<TForm extends FormDataType>(
   rememberKey: string,
   data: TForm | (() => TForm),
@@ -83,13 +81,10 @@ export default function useForm<TForm extends FormDataType>(
       })
     },
     data() {
-      return Object.keys((typeof data === 'function' ? data() : data) as FormDataType).reduce(
-        (carry, key) => {
-          carry[key] = this[key]
-          return carry
-        },
-        {} as FormDataType,
-      ) as TForm
+      return Object.keys((typeof data === 'function' ? data() : data) as FormDataType).reduce((carry, key) => {
+        carry[key] = this[key]
+        return carry
+      }, {} as FormDataType) as TForm
     },
     transform(callback) {
       transform = callback

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,5 +1,6 @@
 import { createInertiaApp } from '@inertiajs/svelte'
 import createServer from '@inertiajs/svelte/server'
+import { render } from 'svelte/server'
 
 createServer((page) =>
   createInertiaApp({
@@ -8,5 +9,10 @@ createServer((page) =>
       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
+        }
+    }),
   ],
 })