Svelte SSR (#1349)

* add Svelte SSR support

* Formatting

Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>

Author: Stefan Buhrmester

packages/svelte/package.json

@@ -19,6 +19,10 @@
   "keywords": [
     "svelte"
   ],
+  "exports": {
+    ".": "./src/index.js",
+    "./server": "./src/server.js"
+  },
   "main": "src/index.js",
   "peerDependencies": {
     "svelte": "^3.20.0"

packages/svelte/src/App.svelte

@@ -1,22 +1,7 @@
 <script>
-  import { router } from '@inertiajs/core'
   import Render, { h } from './Render.svelte'
   import store from './store'
 
-  export let initialPage, resolveComponent
-
-  router.init({
-    initialPage,
-    resolveComponent,
-    swapComponent: async ({ component, page, preserveState }) => {
-      store.update((current) => ({
-        component,
-        page,
-        key: preserveState ? current.key : Date.now(),
-      }))
-    },
-  })
-
   $: child = $store.component && h($store.component.default, $store.page.props)
   $: layout = $store.component && $store.component.layout
   $: components = layout

packages/svelte/src/SSR.svelte

@@ -0,0 +1,8 @@
+<script>
+  import App from './App.svelte'
+  export let id, initialPage
+</script>
+
+<div data-server-rendered="true" {id} data-page={JSON.stringify(initialPage)}>
+  <App />
+</div>

packages/svelte/src/createInertiaApp.js

@@ -1,32 +1,56 @@
-import { setupProgress } from '@inertiajs/core'
+import { router, setupProgress } from '@inertiajs/core'
 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, render }) {
+export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page, visitOptions }) {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
   const initialPage = page || JSON.parse(el.dataset.page)
   const resolveComponent = (name) => Promise.resolve(resolve(name))
+  const initialComponent = await resolveComponent(initialPage.component)
 
-  let head = []
+  if (!isServer) {
+    router.init({
+      initialPage,
+      resolveComponent,
+      swapComponent: async ({ component, page, preserveState }) => {
+        store.update((current) => ({
+          component,
+          page,
+          key: preserveState ? current.key : Date.now(),
+        }))
+      },
+    })
+
+    if (progress) {
+      setupProgress(progress)
+    }
 
-  const svelteApp = await resolveComponent(initialPage.component).then((initialComponent) => {
     return setup({
       el,
       App,
       props: {
         initialPage,
         initialComponent,
         resolveComponent,
-        onHeadUpdate: isServer ? (elements) => (head = elements) : null,
+        visitOptions,
       },
     })
-  })
-
-  if (!isServer && progress) {
-    setupProgress(progress)
   }
 
   if (isServer) {
-    // TODO
+    store.set({
+      component: initialComponent,
+      page: initialPage,
+      key: null,
+    })
+
+    const { html, head } = SSR.render({ id, initialPage })
+
+    return {
+      body: html,
+      head: [head],
+    }
   }
 }

packages/svelte/src/server.js

@@ -0,0 +1 @@
+export { default as default } from '@inertiajs/core/server'