Skip to content
This repository was archived by the owner on Dec 5, 2025. It is now read-only.

Commit 1f058e7

Browse files
galvezgalvez
authored
Merge pull request #33 from fastify/svelte-hydration-order
fix(svelte): hydration order
2 parents fcb644c + cb51fa5 commit 1f058e7

File tree

9 files changed

+38
-23
lines changed

9 files changed

+38
-23
lines changed

‎packages/fastify-dx-svelte/index.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -55,20 +55,9 @@ export function createHtmlFunction (source, scope, config) {
5555
const soFooterTemplate = createHtmlTemplateFunction(soFooterSource)
5656
// This function gets registered as reply.html()
5757
return function ({ routes, context, app }) {
58-
// Initialize hydration, which can stay empty if context.serverOnly is true
59-
let hydration = ''
6058
// Decide which templating functions to use, with and without hydration
6159
const headTemplate = context.serverOnly ? soHeadTemplate : unHeadTemplate
6260
const footerTemplate = context.serverOnly ? soFooterTemplate : unFooterTemplate
63-
// Decide whether or not to include the hydration script
64-
if (!context.serverOnly) {
65-
hydration = (
66-
'<script>\n' +
67-
`window.route = ${devalue(context.toJSON())}\n` +
68-
`window.routes = ${devalue(routes.toJSON())}\n` +
69-
'</script>'
70-
)
71-
}
7261
// Render page-level <head> elements
7362
const head = new Head(context.head).render()
7463
const style = (
@@ -86,7 +75,18 @@ export function createHtmlFunction (source, scope, config) {
8675
head,
8776
hydration,
8877
}),
89-
footer: footerTemplate(context),
78+
footer: () => footerTemplate({
79+
...context,
80+
// Decide whether or not to include the hydration script
81+
...!context.serverOnly && {
82+
hydration: (
83+
'<script>\n' +
84+
`window.route = ${devalue(context.toJSON())}\n` +
85+
`window.routes = ${devalue(routes.toJSON())}\n` +
86+
'</script>'
87+
)
88+
}
89+
}),
9090
}))
9191
// Send out header and readable stream with full response
9292
this.type('text/html')

‎packages/fastify-dx-svelte/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"type": "module",
66
"main": "index.js",
77
"name": "fastify-dx-svelte",
8-
"version": "0.0.2",
8+
"version": "0.0.3",
99
"files": [
1010
"virtual/root.svelte",
1111
"virtual/route.svelte",

‎packages/fastify-dx-svelte/server/stream.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
export async function * generateHtmlStream ({ head, body, footer }) {
44
yield head
55
yield body
6-
yield footer
6+
yield footer()
77
}

‎packages/fastify-dx-svelte/virtual/core.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { getContext } from 'svelte'
22
import { useSnapshot } from 'sveltio'
33

4+
export const isServer = import.meta.env.SSR
45
export const routeContext = Symbol('routeContext')
56

67
export function useRouteContext () {

‎packages/fastify-dx-svelte/virtual/root.svelte‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,21 @@
22
import { proxy } from 'sveltio'
33
import { Router, Route } from 'svelte-routing'
44
import DXRoute from '/dx:route.svelte'
5+
import { isServer } from '/dx:core.js'
56
67
export let url = null
78
export let payload
89
9-
let state = proxy(payload.serverRoute.state)
10+
let state = isServer
11+
? payload.serverRoute.state
12+
: proxy(payload.serverRoute.state)
1013
</script>
1114

1215
<Router url="{url}">
1316
{#each payload.routes as { path, component }}
1417
<Route path="{path}" let:location>
1518
<DXRoute
19+
path={path}
1620
location={location}
1721
state={state}
1822
payload={payload}

‎starters/svelte/client/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<link rel="stylesheet" href="./base.css">
66
<!-- style -->
77
<!-- head -->
8-
<!-- hydration -->
98
</head>
109
<body>
1110
<main><!-- element --></main>
1211
</body>
12+
<!-- hydration -->
1313
<script type="module" src="/dx:mount.js"></script>
1414
</html>

‎starters/svelte/client/pages/index.svelte‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,17 @@ export let getMeta = () => {
99
<script>
1010
import logo from '/assets/logo.svg'
1111
import { Link } from 'svelte-routing'
12+
import { isServer, useRouteContext } from '/dx:core.js'
13+
const { state } = useRouteContext()
14+
15+
if (isServer) {
16+
// Should be automatically hydrated on the client
17+
state.message = 'Welcome to Fastify DX for Svelte!'
18+
}
1219
</script>
1320

1421
<img src={logo} alt="Fastify DX" />
15-
<h1>Welcome to Fastify DX for Svelte!</h1>
22+
<h1>{state.message}</h1>
1623
<ul class="columns-2">
1724
<li><Link to="/using-data">/using-data</Link> demonstrates how to
1825
leverage the <code>getData()</code> function

‎starters/svelte/client/root.svelte‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,25 @@ import 'uno.css'
33
import { proxy } from 'sveltio'
44
import { Router, Route } from 'svelte-routing'
55
import DXRoute from '/dx:route.svelte'
6+
import { isServer } from '/dx:core.js'
67
78
export let url = null
89
export let payload
910
10-
let state = proxy(payload.serverRoute.state)
11+
let state = isServer
12+
? payload.serverRoute.state
13+
: proxy(payload.serverRoute.state)
1114
</script>
1215

1316
<Router url="{url}">
1417
{#each payload.routes as { path, component }}
1518
<Route path="{path}" let:location>
16-
<DXRoute
19+
<DXRoute
1720
path={path}
18-
location={location}
19-
state={state}
21+
location={location}
22+
state={state}
2023
payload={payload}
21-
component={component} />
24+
component={component} />
2225
</Route>
2326
{/each}
2427
</Router>

‎starters/svelte/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"lint": "eslint . --ext .js,.svelte --fix"
1111
},
1212
"dependencies": {
13-
"fastify-dx-svelte": "^0.0.2",
13+
"fastify-dx-svelte": "^0.0.3",
1414
"fastify-vite": "^3.0.0-beta.23",
1515
"ky-universal": "^0.10.1",
1616
"ky": "^0.31.0"

0 commit comments

Comments
 (0)