fix(client): make hydration work properly (close #123)

Author: meteorlxy

packages/@vuepress/bundler-vite/src/build/createBuild.ts

@@ -1,6 +1,6 @@
 import type { OutputAsset, OutputChunk, RollupOutput } from 'rollup'
 import { build } from 'vite'
-import type { ServerEntry } from '@vuepress/client'
+import type { CreateVueAppFunction } from '@vuepress/client'
 import type { App, Bundler } from '@vuepress/core'
 import { chalk, fs, ora, withSpinner } from '@vuepress/utils'
 import type { ViteBundlerOptions } from '../types'
@@ -51,13 +51,15 @@ export const createBuild = (
     ) as OutputChunk
 
     // load the compiled server bundle
-    const { createServerApp } = require(app.dir.dest(
+    const { createVueApp } = require(app.dir.dest(
       '.server',
       serverEntryChunk.fileName
-    )) as ServerEntry
+    )) as {
+      createVueApp: CreateVueAppFunction
+    }
 
     // create vue ssr app
-    const { app: vueApp, router: vueRouter } = await createServerApp()
+    const { app: vueApp, router: vueRouter } = await createVueApp()
 
     // pre-render pages to html files
     const spinner = ora()

packages/@vuepress/bundler-vite/src/build/resolveViteConfig.ts

@@ -22,9 +22,7 @@ export const resolveViteConfig = ({
         cssCodeSplit: false,
         polyfillDynamicImport: false,
         rollupOptions: {
-          input: isServer
-            ? app.dir.client('lib/server.js')
-            : app.dir.client('lib/client.js'),
+          input: app.dir.client('lib/app.js'),
           preserveEntrySignatures: 'allow-extension',
         },
         minify: isServer ? false : !app.env.isDebug,

packages/@vuepress/bundler-vite/src/plugin/createPlugin.ts

@@ -47,9 +47,13 @@ export const createPlugin = ({
           if (req.url!.endsWith('.html')) {
             res.statusCode = 200
             const template = fs.readFileSync(app.options.templateDev).toString()
+
+            // here we use `lib/index.js` instead of `lib/app.js` as the client entry to
+            // ensure all client files are loaded correctly (might be an issue of vite)
             const clientEntrySrc = `/@fs/${removeLeadingSlash(
-              app.dir.client('lib/client.js')
+              app.dir.client('lib/index.js')
             )}`
+
             res.end(
               template.replace(
                 /<\/body>/,

packages/@vuepress/bundler-webpack/src/build/createBuild.ts

@@ -1,5 +1,5 @@
 import * as webpack from 'webpack'
-import type { ServerEntry } from '@vuepress/client'
+import type { CreateVueAppFunction } from '@vuepress/client'
 import type { App, Bundler } from '@vuepress/core'
 import { chalk, fs, ora, withSpinner } from '@vuepress/utils'
 import type { WebpackBundlerOptions } from '../types'
@@ -73,12 +73,12 @@ export const createBuild = (
     } = resolveClientManifestMeta(clientManifest)
 
     // load the compiled server bundle
-    const { createServerApp } = require(app.dir.dest(
-      '.server/app'
-    )) as ServerEntry
+    const { createVueApp } = require(app.dir.dest('.server/app')) as {
+      createVueApp: CreateVueAppFunction
+    }
 
     // create vue ssr app
-    const { app: vueApp, router: vueRouter } = await createServerApp()
+    const { app: vueApp, router: vueRouter } = await createVueApp()
 
     // pre-render pages to html files
     const spinner = ora()

packages/@vuepress/bundler-webpack/src/build/createServerConfig.ts

@@ -17,9 +17,6 @@ export const createServerConfig = (
     isBuild,
   })
 
-  // server entry
-  config.entry('app').add(app.dir.client('lib/server.js'))
-
   // server output
   // remove after pages rendered
   config.output

packages/@vuepress/bundler-webpack/src/config/createBaseConfig.ts

@@ -2,6 +2,7 @@ import * as Config from 'webpack-chain'
 import type { App } from '@vuepress/core'
 import type { WebpackBundlerOptions } from '../types'
 import { handleDevtool } from './handleDevtool'
+import { handleEntry } from './handleEntry'
 import { handleMode } from './handleMode'
 import { handleModule } from './handleModule'
 import { handleNode } from './handleNode'
@@ -23,6 +24,11 @@ export const createBaseConfig = ({
   // create new webpack-chain config
   const config = new Config()
 
+  /**
+   * entry
+   */
+  handleEntry({ app, config })
+
   /**
    * mode
    */

packages/@vuepress/bundler-webpack/src/config/createClientBaseConfig.ts

@@ -19,9 +19,6 @@ export const createClientBaseConfig = ({
     isBuild,
   })
 
-  // client entry
-  config.entry('app').add(app.dir.client('lib/client.js'))
-
   // client output
   config.output
     .path(app.dir.dest())

packages/@vuepress/bundler-webpack/src/config/handleEntry.ts

@@ -0,0 +1,16 @@
+import type * as Config from 'webpack-chain'
+import type { App } from '@vuepress/core'
+
+/**
+ * Set webpack entry
+ */
+export const handleEntry = ({
+  app,
+  config,
+}: {
+  app: App
+  config: Config
+}): void => {
+  // set client app as entry point
+  config.entry('app').add(app.dir.client('lib/app.js'))
+}

packages/@vuepress/client/src/app.ts

@@ -1,7 +1,13 @@
-import { computed, h } from 'vue'
-import type { CreateAppFunction, App, ComponentOptions } from 'vue'
-import { createRouter, RouterView, START_LOCATION } from 'vue-router'
-import type { Router, RouterHistory } from 'vue-router'
+import { createApp, createSSRApp, computed, h } from 'vue'
+import type { App, ComponentOptions } from 'vue'
+import {
+  createRouter,
+  createWebHistory,
+  createMemoryHistory,
+  RouterView,
+  START_LOCATION,
+} from 'vue-router'
+import type { Router } from 'vue-router'
 import { removeEndingSlash } from '@vuepress/shared'
 import { clientAppEnhances } from '@internal/clientAppEnhances'
 import { clientAppRootComponents } from '@internal/clientAppRootComponents'
@@ -29,26 +35,24 @@ import {
 import { Content, OutboundLink } from './components'
 import { withBase } from './utils'
 
-export type AppCreator = CreateAppFunction<Element>
-export type HistoryCreator = (base?: string) => RouterHistory
-export type CreateVueAppResult = {
-  app: App
-  router: Router
-}
+/**
+ * - use `createApp` in dev mode
+ * - use `createSSRApp` in build mode
+ */
+const appCreator = __DEV__ ? createApp : createSSRApp
 
 /**
- * Create a vue app
- *
- * Accepting different app creator and history creator, so it
- * can be reused for both client side and server side
+ * - use `createWebHistory` in dev mode and build mode client bundle
+ * - use `createMemoryHistory` in build mode server bundle
  */
-export const createVueApp = async ({
-  appCreator,
-  historyCreator,
-}: {
-  appCreator: AppCreator
-  historyCreator: HistoryCreator
-}): Promise<CreateVueAppResult> => {
+const historyCreator = __SSR__ ? createMemoryHistory : createWebHistory
+
+export type CreateVueAppFunction = () => Promise<{
+  app: App
+  router: Router
+}>
+
+export const createVueApp: CreateVueAppFunction = async () => {
   // options to create vue app
   const appOptions: ComponentOptions = {
     setup() {
@@ -197,3 +201,12 @@ export const createVueApp = async ({
     router,
   }
 }
+
+// mount app in client bundle
+if (!__SSR__) {
+  createVueApp().then(({ app, router }) => {
+    router.isReady().then(() => {
+      app.mount('#app')
+    })
+  })
+}

packages/@vuepress/client/src/client.ts

@@ -5,4 +5,3 @@ export * from './types'
 export * from './utils'
 
 export type { PageHeader } from '@vuepress/shared'
-export type { ServerEntry } from './server'