Skip to content

Commit d4a17ee

Browse files
committed
add Svelte SSR support
1 parent c033e72 commit d4a17ee

File tree

5 files changed

+43
-26
lines changed

5 files changed

+43
-26
lines changed

packages/svelte/package.json

+4
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
"keywords": [
2020
"svelte"
2121
],
22+
"exports": {
23+
".": "./src/index.js",
24+
"./server": "./src/server.js"
25+
},
2226
"main": "src/index.js",
2327
"peerDependencies": {
2428
"svelte": "^3.20.0"

packages/svelte/src/App.svelte

-15
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,7 @@
11
<script>
2-
import { router } from '@inertiajs/core'
32
import Render, { h } from './Render.svelte'
43
import store from './store'
54
6-
export let initialPage, resolveComponent
7-
8-
router.init({
9-
initialPage,
10-
resolveComponent,
11-
swapComponent: async ({ component, page, preserveState }) => {
12-
store.update((current) => ({
13-
component,
14-
page,
15-
key: preserveState ? current.key : Date.now()
16-
}))
17-
}
18-
})
19-
205
$: child = $store.component && h($store.component.default, $store.page.props)
216
$: layout = $store.component && $store.component.layout
227
$: components = layout

packages/svelte/src/SSR.svelte

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<script>
2+
import App from './App.svelte'
3+
export let id, initialPage
4+
</script>
5+
6+
<div data-server-rendered="true" {id} data-page={JSON.stringify(initialPage)}>
7+
<App />
8+
</div>
+30-11
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,51 @@
1-
import { setupProgress } from '@inertiajs/core'
1+
import { setupProgress, router } from '@inertiajs/core'
22
import App from './App.svelte'
3+
import SSR from './SSR.svelte'
4+
import store from './store'
35

4-
export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page, render }) {
6+
export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page, visitOptions }) {
57
const isServer = typeof window === 'undefined'
68
const el = isServer ? null : document.getElementById(id)
79
const initialPage = page || JSON.parse(el.dataset.page)
810
const resolveComponent = (name) => Promise.resolve(resolve(name))
11+
const initialComponent = await resolveComponent(initialPage.component)
12+
913

10-
let head = []
11-
12-
const svelteApp = await resolveComponent(initialPage.component).then((initialComponent) => {
14+
if (!isServer) {
15+
router.init({
16+
initialPage,
17+
resolveComponent,
18+
swapComponent: async ({ component, page, preserveState }) => {
19+
store.update((current) => ({
20+
component,
21+
page,
22+
key: preserveState ? current.key : Date.now()
23+
}))
24+
}
25+
})
26+
if (progress) setupProgress(progress)
1327
return setup({
1428
el,
1529
App,
1630
props: {
1731
initialPage,
1832
initialComponent,
1933
resolveComponent,
20-
onHeadUpdate: isServer ? (elements) => (head = elements) : null,
34+
visitOptions
2135
},
2236
})
23-
})
24-
25-
if (!isServer && progress) {
26-
setupProgress(progress)
2737
}
2838

2939
if (isServer) {
30-
// TODO
40+
store.set({
41+
component: initialComponent,
42+
page: initialPage,
43+
key: null
44+
})
45+
const { html, head } = SSR.render({id, initialPage})
46+
return {
47+
body: html,
48+
head: [head]
49+
}
3150
}
3251
}

packages/svelte/src/server.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as default } from '@inertiajs/core/server'

0 commit comments

Comments
 (0)