Merge pull request #33 from fastify/svelte-hydration-order

fix(svelte): hydration order
fastify · Jun 30, 2022 · 1f058e7 · 1f058e7
2 parents fcb644c + cb51fa5
commit 1f058e7
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 23 deletions.
diff --git a/packages/fastify-dx-svelte/index.js b/packages/fastify-dx-svelte/index.js
@@ -55,20 +55,9 @@ export function createHtmlFunction (source, scope, config) {
   const soFooterTemplate = createHtmlTemplateFunction(soFooterSource)
   // This function gets registered as reply.html()
   return function ({ routes, context, app }) {
-    // Initialize hydration, which can stay empty if context.serverOnly is true
-    let hydration = ''
     // Decide which templating functions to use, with and without hydration
     const headTemplate = context.serverOnly ? soHeadTemplate : unHeadTemplate
     const footerTemplate = context.serverOnly ? soFooterTemplate : unFooterTemplate
-    // Decide whether or not to include the hydration script
-    if (!context.serverOnly) {
-      hydration = (
-        '<script>\n' +
-        `window.route = ${devalue(context.toJSON())}\n` +
-        `window.routes = ${devalue(routes.toJSON())}\n` +
-        '</script>'
-      )
-    }
     // Render page-level <head> elements
     const head = new Head(context.head).render()
     const style = (
@@ -86,7 +75,18 @@ export function createHtmlFunction (source, scope, config) {
         head, 
         hydration,
       }),
-      footer: footerTemplate(context),
+      footer: () => footerTemplate({
+        ...context,
+        // Decide whether or not to include the hydration script
+        ...!context.serverOnly && {
+          hydration: (
+            '<script>\n' +
+            `window.route = ${devalue(context.toJSON())}\n` +
+            `window.routes = ${devalue(routes.toJSON())}\n` +
+            '</script>'
+          )
+        }        
+      }),
     }))
     // Send out header and readable stream with full response
     this.type('text/html')

diff --git a/packages/fastify-dx-svelte/package.json b/packages/fastify-dx-svelte/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "main": "index.js",
   "name": "fastify-dx-svelte",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "files": [
     "virtual/root.svelte",
     "virtual/route.svelte",

diff --git a/packages/fastify-dx-svelte/server/stream.js b/packages/fastify-dx-svelte/server/stream.js
@@ -3,5 +3,5 @@
 export async function * generateHtmlStream ({ head, body, footer }) {
   yield head
   yield body
-  yield footer
+  yield footer()
 }
diff --git a/packages/fastify-dx-svelte/virtual/core.js b/packages/fastify-dx-svelte/virtual/core.js
@@ -1,6 +1,7 @@
 import { getContext } from 'svelte'
 import { useSnapshot } from 'sveltio'
 
+export const isServer = import.meta.env.SSR
 export const routeContext = Symbol('routeContext')
 
 export function useRouteContext () {

diff --git a/packages/fastify-dx-svelte/virtual/root.svelte b/packages/fastify-dx-svelte/virtual/root.svelte
@@ -2,17 +2,21 @@
 import { proxy } from 'sveltio'
 import { Router, Route } from 'svelte-routing'
 import DXRoute from '/dx:route.svelte'
+import { isServer } from '/dx:core.js'
 
 export let url = null
 export let payload
 
-let state = proxy(payload.serverRoute.state)
+let state = isServer
+  ? payload.serverRoute.state
+  : proxy(payload.serverRoute.state)
 </script>
 
 <Router url="{url}">
   {#each payload.routes as { path, component }}
     <Route path="{path}" let:location>
       <DXRoute 
+        path={path}
         location={location}
         state={state}
         payload={payload}

diff --git a/starters/svelte/client/index.html b/starters/svelte/client/index.html
@@ -5,10 +5,10 @@
     <link rel="stylesheet" href="./base.css">
     <!-- style -->
     <!-- head -->
-    <!-- hydration -->
   </head>
   <body>
     <main><!-- element --></main>
   </body>
+  <!-- hydration -->
   <script type="module" src="/dx:mount.js"></script>
 </html>
diff --git a/starters/svelte/client/pages/index.svelte b/starters/svelte/client/pages/index.svelte
@@ -9,10 +9,17 @@ export let getMeta = () => {
 <script>
 import logo from '/assets/logo.svg'
 import { Link } from 'svelte-routing'
+import { isServer, useRouteContext } from '/dx:core.js'
+const { state } = useRouteContext()
+
+if (isServer) {
+  // Should be automatically hydrated on the client
+  state.message = 'Welcome to Fastify DX for Svelte!'
+}
 </script>
 
 <img src={logo} alt="Fastify DX" />
-<h1>Welcome to Fastify DX for Svelte!</h1>
+<h1>{state.message}</h1>
 <ul class="columns-2">
   <li><Link to="/using-data">/using-data</Link> demonstrates how to 
   leverage the <code>getData()</code> function 

diff --git a/starters/svelte/client/root.svelte b/starters/svelte/client/root.svelte
@@ -3,22 +3,25 @@ import 'uno.css'
 import { proxy } from 'sveltio'
 import { Router, Route } from 'svelte-routing'
 import DXRoute from '/dx:route.svelte'
+import { isServer } from '/dx:core.js'
 
 export let url = null
 export let payload
 
-let state = proxy(payload.serverRoute.state)
+let state = isServer
+  ? payload.serverRoute.state
+  : proxy(payload.serverRoute.state)
 </script>
 
 <Router url="{url}">
   {#each payload.routes as { path, component }}
     <Route path="{path}" let:location>
-    	<DXRoute 
+      <DXRoute 
         path={path}
-    	  location={location}
-    		state={state}
+        location={location}
+        state={state}
         payload={payload}
-    		component={component} />
+        component={component} />
     </Route>
   {/each}
 </Router>
diff --git a/starters/svelte/package.json b/starters/svelte/package.json
@@ -10,7 +10,7 @@
     "lint": "eslint . --ext .js,.svelte --fix"
   },
   "dependencies": {
-    "fastify-dx-svelte": "^0.0.2",
+    "fastify-dx-svelte": "^0.0.3",
     "fastify-vite": "^3.0.0-beta.23",
     "ky-universal": "^0.10.1",
     "ky": "^0.31.0"