feat: render text

server-dev.ts

@@ -17,15 +17,8 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
   const app = new Koa()
 
   const vite = await createViteServer({
-    server: {
-      middlewareMode: true,
-      watch: {
-        // During tests we edit the files too fast and sometimes chokidar
-        // misses change events, so enforce polling for consistency
-        usePolling: true,
-        interval: 100,
-      },
-    },
+    server: { middlewareMode: true },
+    appType: 'custom',
   })
 
   app.use(koaConnect(vite.middlewares))
@@ -50,7 +43,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
       ctx.type = 'text/html'
       ctx.body = html
     } catch (e) {
-      vite.ssrFixStacktrace(e as Error)
+      vite && vite.ssrFixStacktrace(e as Error)
       ctx.throw(500, e as Error)
     }
   })

src/entry-client.ts

@@ -1,17 +1,17 @@
 import { createApp } from './main'
-import i18n from '@/language/i18n'
+import { createKUNGalgameRouter } from './router'
+import { setupPinia } from './store'
 import '@/styles/index.scss'
 
-const { app, router, pinia } = createApp()
+const { app } = createApp()
 
-app.use(router)
-app.use(i18n)
+const router = createKUNGalgameRouter()
+const pinia = setupPinia()
 
 if (window.__INITIAL_STATE__) {
   pinia.state.value = JSON.parse(window.__INITIAL_STATE__)
 }
 
 router.isReady().then(() => {
-  app.mount('#app')
-  console.log('hydrated')
+  app.mount('#app', true)
 })

src/entry-server.ts

@@ -1,6 +1,9 @@
-import { basename } from 'path'
 import { createApp } from './main'
 
+import { createKUNGalgameRouter } from './router'
+import { setupPinia } from './store'
+import i18n from '@/language/i18n'
+
 import { renderToString } from '@vue/server-renderer'
 
 import type { ParameterizedContext } from 'koa'
@@ -27,20 +30,12 @@ const renderPreloadLinks = (
   let links = ''
   const seen = new Set()
   if (modules === undefined) throw new Error()
-
   modules.forEach((id) => {
     const files = manifest[id]
     if (files) {
       files.forEach((file) => {
         if (!seen.has(file)) {
           seen.add(file)
-          const filename = basename(file)
-          if (manifest[filename]) {
-            for (const depFile of manifest[filename]) {
-              links += renderPreloadLink(depFile)
-              seen.add(depFile)
-            }
-          }
           links += renderPreloadLink(file)
         }
       })
@@ -52,18 +47,28 @@ const renderPreloadLinks = (
 export const render = async (
   ctx: ParameterizedContext,
   manifest: Record<string, string[]>
-): Promise<[string, string]> => {
-  const { app, router } = createApp()
+): Promise<[string, string, string]> => {
+  const { app } = createApp()
 
+  // router
+  const router = createKUNGalgameRouter()
   app.use(router)
   await router.push(ctx.path)
   await router.isReady()
 
+  // pinia
+  const pinia = setupPinia()
+  app.use(pinia)
+  const state = JSON.stringify(pinia.state.value)
+
+  // i18n
+  app.use(i18n)
+
   const renderCtx: { modules?: string[] } = {}
 
   const renderedHtml = await renderToString(app, renderCtx)
 
   const preloadLinks = renderPreloadLinks(renderCtx.modules, manifest)
 
-  return [renderedHtml, preloadLinks]
+  return [renderedHtml, state, preloadLinks]
 }

src/error/onRequestError.ts

@@ -1,4 +1,3 @@
-import { useRouter } from 'vue-router'
 // Global message component (top)
 import Message from '@/components/alert/Message'
 import { generateTokenByRefreshTokenApi } from '@/api'
@@ -14,7 +13,7 @@ interface ErrorResponseData {
   message: string
 }
 
-const router = useRouter()
+const router = createKUNGalgameRouter()
 
 /**
  * Acts as an interceptor, first recognizing common errors based on predictable status codes.

src/main.ts

@@ -1,25 +1,7 @@
-import App from './App.vue'
 import { createSSRApp } from 'vue'
+import App from './App.vue'
 
-import { createKUNGalgameRouter } from './router'
-import { setupRouterGuard } from '@/router/guard'
-
-import i18n from '@/language/i18n'
-
-import { setupPinia } from '@/store/index'
-
-import '@/styles/index.scss'
-
-export function createApp() {
+export const createApp = () => {
   const app = createSSRApp(App)
-  const pinia = setupPinia(app)
-  app.use(pinia)
-
-  const router = createKUNGalgameRouter()
-  setupRouterGuard(router)
-  app.use(router)
-
-  app.use(i18n)
-
-  return { app, router, pinia }
+  return { app }
 }

src/store/index.ts

@@ -4,7 +4,6 @@
  */
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
-import type { App } from 'vue'
 
 // Import store for the income and expense public disclosure page
 import { useKUNGalgameBalanceStore } from './modules/balance'
@@ -36,12 +35,11 @@ import { useKUNGalgameTopicStore } from './modules/topic'
 const pinia = createPinia()
 
 // Function to set up Pinia, to be called in main.ts
-export const setupPinia = (app: App<Element>) => {
+export const setupPinia = () => {
   if (!import.meta.env.SSR) {
     pinia.use(piniaPluginPersistedstate)
   }
 
-  app.use(pinia)
   return pinia
 }