feat: remove vite-ssr plugin

0x-jerry · Mar 3, 2021 · 507252e · 507252e
1 parent af857aa
commit 507252e
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -27,6 +27,7 @@
       crossorigin="anonymous"
     />
     <!--preload-links-->
+    <!--initial-state-->
     <title>Vite App</title>
   </head>
   <body>

diff --git 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
@@ -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)