From 507252eaed94efb5127e7072d569d15c1bbc99d3 Mon Sep 17 00:00:00 2001
From: Gem Xli <x.li.gem@gmail.com>
Date: Wed, 3 Mar 2021 19:54:05 +0800
Subject: [PATCH] feat: remove vite-ssr plugin

---
 client/components/VTag.vue |  5 +----
 client/entry-client.ts     |  5 ++++-
 client/entry-server.ts     | 13 +++++++++++--
 client/main.ts             |  8 ++++----
 index.html                 |  1 +
 package.json               |  4 +---
 server/vite.ts             | 14 ++++++++++----
 7 files changed, 32 insertions(+), 18 deletions(-)
diff --git a/client/components/VTag.vue b/client/components/VTag.vue
index 6d947d3..cc1f9e4 100644
--- a/client/components/VTag.vue
+++ b/client/components/VTag.vue
@@ -1,8 +1,5 @@
 <template>
-  <span
-    class="tag text-gray-400"
-    @click.stop="clickTag"
-  >
+  <span class="tag text-gray-400" @click.stop="clickTag">
     <v-link>
       <v-icon name="tags" />
       <span>{{ tag.name }}</span>
diff --git a/client/entry-client.ts b/client/entry-client.ts
index 6054a4f..8a150da 100644
--- a/client/entry-client.ts
+++ b/client/entry-client.ts
@@ -1,6 +1,9 @@
 import { createApp } from './main'
 
-createApp().then(({ app, router }) => {
+// @ts-ignore
+const initialState = window.__INITIAL_STATE__
+
+createApp(initialState).then(({ app, router }) => {
   router.isReady().then(() => {
     app.mount('#app')
   })
diff --git a/client/entry-server.ts b/client/entry-server.ts
index 3bfd80c..c739e8f 100644
--- a/client/entry-server.ts
+++ b/client/entry-server.ts
@@ -10,7 +10,8 @@ interface RenderedContext {
 }
 
 export async function render(url: string, manifest: SSRManifest) {
-  const { app, router } = await createApp()
+  const initialState = {}
+  const { app, router } = await createApp(initialState)
 
   // set the router to the desired URL before rendering
   router.push(url)
@@ -28,7 +29,15 @@ export async function render(url: string, manifest: SSRManifest) {
   // which we can then use to determine what files need to be preloaded for this
   // request.
   const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
-  return [html, preloadLinks]
+
+  // merge router state
+  Object.assign(initialState, router.currentRoute.value.meta.state)
+
+  return {
+    html,
+    preloadLinks,
+    initialState
+  }
 }
 
 function renderPreloadLinks(modules: string[], manifest: SSRManifest) {
diff --git a/client/main.ts b/client/main.ts
index 7034fe8..438c7f3 100644
--- a/client/main.ts
+++ b/client/main.ts
@@ -13,7 +13,7 @@ import { i18n } from 'vite-i18n-plugin'
 import { NProgressPlugin, i18nPlugin } from './plugins'
 import { createSSRApp } from 'vue'
 
-export async function createApp() {
+export async function createApp(initialState: Record<string, any>) {
   const router = createRouter({
     history: isSSR ? createMemoryHistory() : createWebHistory(),
     routes
@@ -28,10 +28,10 @@ export async function createApp() {
 
   if (isSSR) {
     await store.dispatch('serverInit')
-    // initialState.storeState = store.state
+    initialState.storeState = store.state
   } else {
-    // store.replaceState(initialState.storeState)
-    // r.currentRoute.value.meta.state = initialState.state
+    store.replaceState(initialState.storeState)
+    router.currentRoute.value.meta.state = initialState.state
     NProgressPlugin(router)
   }
 
diff --git a/index.html b/index.html
index 9436ca2..717a812 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,7 @@
       crossorigin="anonymous"
     />
     <!--preload-links-->
+    <!--initial-state-->
     <title>Vite App</title>
   </head>
   <body>
diff --git a/package.json b/package.json
index 28a75be..cdca3ff 100644
--- a/package.json
+++ b/package.json
@@ -7,9 +7,7 @@
   "author": "Gem Xli <x.li.gem@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "dev": "run-p dev:*",
-    "dev:client": "vite-ssr dev",
-    "dev:server": "ts-node server/index.ts",
+    "dev": "ts-node server/index.ts",
     "build": "run-p build:*",
     "build:client": "vite-ssr build",
     "build:server": "rm -rf dist-server && tsc -p server",
diff --git a/server/vite.ts b/server/vite.ts
index c0ffa29..0cc64f1 100644
--- a/server/vite.ts
+++ b/server/vite.ts
@@ -17,15 +17,21 @@ export function serveViteDev(vite: ViteDevServer): Middleware {
       const render = (await vite.ssrLoadModule('/client/entry-server.ts'))
         .render
 
-      const [appHtml, preloadLinks] = await render(url, manifest)
+      const { html, preloadLinks, initialState } = await render(url, manifest)
 
-      const html = template
+      const appHtml = template
         .replace('<!--preload-links-->', preloadLinks)
-        .replace('<!--app-html-->', appHtml)
+        .replace('<!--app-html-->', html)
+        .replace(
+          '<!--initial-state-->',
+          `<script>window.__INITIAL_STATE__=${JSON.stringify(
+            initialState
+          )}</script>`
+        )
 
       ctx.status = 200
       ctx.set({ 'Content-Type': 'text/html' })
-      ctx.body = html
+      ctx.body = appHtml
     } catch (e) {
       vite && vite.ssrFixStacktrace(e)
       console.log(e.stack)
