From add169ff0781c31c0babc761a829fcea656eb609 Mon Sep 17 00:00:00 2001
From: Fran Dios <frankdiox@gmail.com>
Date: Tue, 16 Feb 2021 21:02:47 +0900
Subject: [PATCH] feat: Inject custom properties in SSR context. Closes #5

---
 core/entry-server.js           | 18 ++++++++++++------
 example/src/pages/Homepage.vue | 14 ++++++++++++--
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/core/entry-server.js b/core/entry-server.js
index 0e9c4c9..fefb14e 100644
--- a/core/entry-server.js
+++ b/core/entry-server.js
@@ -39,12 +39,14 @@ export default function (App, { routes, base }, hook) {
 
     await router.isReady()
 
-    const initialState = JSON.stringify(
-      router.currentRoute.value.meta.state || {}
-    )
+    // This can be injected with useSSRContext() in setup functions
+    const context = {
+      request,
+      ...extra,
+      initialState: router.currentRoute.value.meta.state || {},
+    }
 
-    const ctx = {}
-    let html = await renderToString(app, ctx)
+    let html = await renderToString(app, context)
 
     const [helmet = ''] = html.match(/<html[^>]*?>(.|\s)*?<\/html>/im) || []
     let [, head = ''] = helmet.match(/<head[^>]*?>((.|\s)*?)<\/head>/im) || []
@@ -59,11 +61,15 @@ export default function (App, { routes, base }, hook) {
       html = html.replace(helmet, '<!---->')
     }
 
-    const dependencies = manifest ? findDependencies(ctx.modules, manifest) : []
+    const dependencies = manifest
+      ? findDependencies(context.modules, manifest)
+      : []
     if (preload && dependencies.length > 0) {
       head += renderPreloadLinks(dependencies)
     }
 
+    const initialState = JSON.stringify(context.initialState || {})
+
     return {
       // This string is replaced at build time
       // and injects all the previous variables.
diff --git a/example/src/pages/Homepage.vue b/example/src/pages/Homepage.vue
index 972a104..b419dae 100644
--- a/example/src/pages/Homepage.vue
+++ b/example/src/pages/Homepage.vue
@@ -14,7 +14,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'Homepage',
   props: {
     server: {
@@ -27,11 +29,19 @@ export default {
     },
   },
   setup() {
+    // This will be removed from the client build
+    if (import.meta.env.SSR) {
+      // Vite/plugin-vue is injecting this function in the setup scope
+      const { initialState } = useSSRContext()
+      // Initial state is mutable and will be hydrated in the client
+      initialState.perkele = true
+    }
+
     return {
       json: JSON.stringify({ something: true }),
     }
   },
-}
+})
 </script>
 
 <style scoped>