Move SSR logic to user-land

inertiajs · Oct 15, 2024 · 4140452 · 4140452
1 parent 5248f00
commit 4140452
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 34 deletions.
diff --git a/packages/svelte/src/createInertiaApp.ts b/packages/svelte/src/createInertiaApp.ts
@@ -1,7 +1,6 @@
 import { router, setupProgress, type InertiaAppResponse, type Page } from '@inertiajs/core'
 import escape from 'html-escape'
 import type { ComponentType } from 'svelte'
-import { version as SVELTE_VERSION } from 'svelte/package.json'
 import App, { type InertiaAppProps } from './components/App.svelte'
 import type { ComponentResolver } from './types'
 
@@ -11,11 +10,11 @@ type AppComponent = ComponentType<App> & { render: (props: InertiaAppProps) => S
 interface CreateInertiaAppProps {
   id?: string
   resolve: ComponentResolver
-  setup?: (props: {
-    el: HTMLElement
+  setup: (props: {
+    el: HTMLElement | null
     App: ComponentType<App>
     props: InertiaAppProps
-  }) => void | App
+  }) => void | App | SvelteRenderResult
   progress?:
     | false
     | {
@@ -36,7 +35,7 @@ export default async function createInertiaApp({
 }: CreateInertiaAppProps): InertiaAppResponse {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
-  const initialPage: Page = page || JSON.parse(el?.dataset?.page || '{}')
+  const initialPage: Page = page || JSON.parse(el?.dataset.page || '{}')
   const resolveComponent = (name: string) => Promise.resolve(resolve(name))
 
   const [initialComponent] = await Promise.all([
@@ -46,26 +45,10 @@ export default async function createInertiaApp({
 
   const props: InertiaAppProps = { initialPage, initialComponent, resolveComponent }
 
-  if (setup) {
-    if (!el) {
-      throw new Error(`Element with ID "${id}" not found.`)
-    }
-
-    setup({ el, App, props })
-  }
+  const svelteApp = setup({ el, App, props })
 
   if (isServer) {
-    const isSvelte5 = SVELTE_VERSION.startsWith('5')
-    const { html, head, css } = await (async () => {
-      if (isSvelte5) {
-        const { render } = await dynamicImport('svelte/server')
-        if (typeof render === 'function') {
-          return render(App, { props }) as SvelteRenderResult
-        }
-      }
-
-      return (App as AppComponent).render(props)
-    })()
+    const { html, head, css } = svelteApp as SvelteRenderResult
 
     return {
       body: `<div data-server-rendered="true" id="${id}" data-page="${escape(JSON.stringify(initialPage))}">${html}</div>`,
@@ -77,14 +60,3 @@ export default async function createInertiaApp({
     setupProgress(progress)
   }
 }
-
-// Loads the module dynamically during execution instead of at
-// build time. The `@vite-ignore` flag prevents Vite from
-// analyzing or pre-bundling this import.
-async function dynamicImport(module: string) {
-  try {
-    return await import(/* @vite-ignore */ module)
-  } catch {
-    return null
-  }
-}
diff --git a/playgrounds/svelte4/resources/js/ssr.ts b/playgrounds/svelte4/resources/js/ssr.ts
@@ -9,5 +9,8 @@ createServer((page) =>
       const pages = import.meta.glob<ResolvedComponent>('./Pages/**/*.svelte', { eager: true })
       return pages[`./Pages/${name}.svelte`]
     },
+    setup({ App, props }) {
+      return App.render(props)
+    }
   }),
 )
diff --git a/playgrounds/svelte5/resources/js/ssr.ts b/playgrounds/svelte5/resources/js/ssr.ts
@@ -1,6 +1,7 @@
 import { createInertiaApp } from '@inertiajs/svelte'
 import createServer from '@inertiajs/svelte/server'
 import { ResolvedComponent } from '@inertiajs/svelte'
+import { render } from 'svelte/server'
 
 createServer((page) =>
   createInertiaApp({
@@ -9,5 +10,8 @@ createServer((page) =>
       const pages = import.meta.glob<ResolvedComponent>('./Pages/**/*.svelte', { eager: true })
       return pages[`./Pages/${name}.svelte`]
     },
+    setup({ App, props }) {
+      return render(App, { props })
+    }
   }),
 )