fix: use client/server createHead (#442)

* fix: use client/server createHead

* chore: fix lint

* chore: tree-shake server code from client build

* chore: use process.env.VITE_SSG

* chore: remove temp folder

* feat: use `import.meta.env.SSR` (#444)

* feat: use `import.meta.env.SSR`

* feat: use also `import.meta.env.SSR` instead `client`

* chore: remove client arg. from `createApp`
chore: add `vite-ssg` to `ssr.noExternal` in server build

* chore: add back client argument to `createApp`

* chore: apply suggestion

I'll change also client spa

Co-authored-by: Kevin Marrec <[email protected]>

* chore: apply suggestion also to client spa module

* fix(client)!: treeshake hydration (#445)

---------

Co-authored-by: Kevin Marrec <[email protected]>

Author: userquin

src/client/index.ts

@@ -2,6 +2,7 @@ import type { VueHeadClient } from '@unhead/vue'
 import type { Component } from 'vue'
 import type { RouterOptions, ViteSSGClientOptions, ViteSSGContext } from '../types'
 import { createHead } from '@unhead/vue/client'
+import { createHead as createSSRHead } from '@unhead/vue/server'
 import { createApp as createClientApp, createSSRApp } from 'vue'
 import { createMemoryHistory, createRouter, createWebHistory } from 'vue-router'
 import { documentReady } from '../utils/document-ready'
@@ -14,33 +15,30 @@ export function ViteSSG(
   App: Component,
   routerOptions: RouterOptions,
   fn?: (context: ViteSSGContext<true>) => Promise<void> | void,
-  options: ViteSSGClientOptions = {},
+  options?: ViteSSGClientOptions,
 ) {
   const {
     transformState,
     registerComponents = true,
     useHead = true,
     rootContainer = '#app',
-    hydration = false,
-  } = options
-  const isClient = typeof window !== 'undefined'
+  } = options ?? {}
 
-  async function createApp(client = false, routePath?: string) {
-    const app = client && !hydration
-      ? createClientApp(App)
-      : createSSRApp(App)
+  async function createApp(_client = false, routePath?: string) {
+    const app = import.meta.env.SSR || options?.hydration
+      ? createSSRApp(App)
+      : createClientApp(App)
 
     let head: VueHeadClient | undefined
 
     if (useHead) {
-      head = createHead()
-      app.use(head)
+      app.use(head = import.meta.env.SSR ? createSSRHead() : createHead())
     }
 
     const router = createRouter({
-      history: client
-        ? createWebHistory(routerOptions.base)
-        : createMemoryHistory(routerOptions.base),
+      history: import.meta.env.SSR
+        ? createMemoryHistory(routerOptions.base)
+        : createWebHistory(routerOptions.base),
       ...routerOptions,
     })
 
@@ -50,16 +48,16 @@ export function ViteSSG(
       app.component('ClientOnly', ClientOnly)
 
     const appRenderCallbacks: (() => void)[] = []
-    const onSSRAppRendered = client
-      ? () => {}
-      : (cb: () => void) => appRenderCallbacks.push(cb)
+    const onSSRAppRendered = import.meta.env.SSR
+      ? (cb: () => void) => appRenderCallbacks.push(cb)
+      : () => {}
     const triggerOnSSRAppRendered = () => {
       return Promise.all(appRenderCallbacks.map(cb => cb()))
     }
     const context: ViteSSGContext<true> = {
       app,
       head,
-      isClient,
+      isClient: !import.meta.env.SSR,
       router,
       routes,
       onSSRAppRendered,
@@ -69,7 +67,7 @@ export function ViteSSG(
       routePath,
     }
 
-    if (client) {
+    if (!import.meta.env.SSR) {
       await documentReady()
       // @ts-expect-error global variable
       context.initialState = transformState?.(window.__INITIAL_STATE__ || {}) || deserializeState(window.__INITIAL_STATE__)
@@ -92,7 +90,7 @@ export function ViteSSG(
       next()
     })
 
-    if (!client) {
+    if (!import.meta.env.SSR) {
       const route = context.routePath ?? '/'
       router.push(route)
 
@@ -108,9 +106,9 @@ export function ViteSSG(
     } as ViteSSGContext<true>
   }
 
-  if (isClient) {
+  if (!import.meta.env.SSR) {
     (async () => {
-      const { app, router } = await createApp(true)
+      const { app, router } = await createApp()
       // wait until page component is fetched before mounting
       await router.isReady()
       app.mount(rootContainer, true)

src/client/single-page.ts

@@ -2,6 +2,7 @@ import type { VueHeadClient } from '@unhead/vue'
 import type { Component } from 'vue'
 import type { ViteSSGClientOptions, ViteSSGContext } from '../types'
 import { createHead } from '@unhead/vue/client'
+import { createHead as createSSRHead } from '@unhead/vue/server'
 import { createApp as createClientApp, createSSRApp } from 'vue'
 import { documentReady } from '../utils/document-ready'
 import { deserializeState } from '../utils/state'
@@ -12,42 +13,49 @@ export * from '../types'
 export function ViteSSG(
   App: Component,
   fn?: (context: ViteSSGContext<false>) => Promise<void> | void,
-  options: ViteSSGClientOptions = {},
+  options?: ViteSSGClientOptions,
 ) {
   const {
     transformState,
     registerComponents = true,
     useHead = true,
     rootContainer = '#app',
-    hydration = false,
-  } = options
-  const isClient = typeof window !== 'undefined'
+  } = options ?? {}
 
-  async function createApp(client = false) {
-    const app = client && !hydration
-      ? createClientApp(App)
-      : createSSRApp(App)
+  async function createApp(_client = false) {
+    const app = import.meta.env.SSR || options?.hydration
+      ? createSSRApp(App)
+      : createClientApp(App)
 
     let head: VueHeadClient | undefined
 
     if (useHead) {
-      head = createHead()
-      app.use(head)
+      app.use(head = import.meta.env.SSR ? createSSRHead() : createHead())
     }
 
     const appRenderCallbacks: (() => void)[] = []
-    const onSSRAppRendered = client
-      ? () => {}
-      : (cb: () => void) => appRenderCallbacks.push(cb)
+    const onSSRAppRendered = import.meta.env.SSR
+      ? (cb: () => void) => appRenderCallbacks.push(cb)
+      : () => {}
     const triggerOnSSRAppRendered = () => {
       return Promise.all(appRenderCallbacks.map(cb => cb()))
     }
-    const context = { app, head, isClient, router: undefined, routes: undefined, initialState: {}, onSSRAppRendered, triggerOnSSRAppRendered, transformState }
+    const context = {
+      app,
+      head,
+      isClient: !import.meta.env.SSR,
+      router: undefined,
+      routes: undefined,
+      initialState: {},
+      onSSRAppRendered,
+      triggerOnSSRAppRendered,
+      transformState,
+    }
 
     if (registerComponents)
       app.component('ClientOnly', ClientOnly)
 
-    if (client) {
+    if (!import.meta.env.SSR) {
       await documentReady()
       // @ts-expect-error global variable
       context.initialState = transformState?.(window.__INITIAL_STATE__ || {}) || deserializeState(window.__INITIAL_STATE__)
@@ -64,9 +72,9 @@ export function ViteSSG(
     } as ViteSSGContext<false>
   }
 
-  if (isClient) {
+  if (!import.meta.env.SSR) {
     (async () => {
-      const { app } = await createApp(true)
+      const { app } = await createApp()
       app.mount(rootContainer, true)
     })()
   }

src/node/build.ts

@@ -1,11 +1,11 @@
+/* eslint-disable no-console */
 import type { InlineConfig, ResolvedConfig } from 'vite'
 import type { VitePluginPWAAPI } from 'vite-plugin-pwa'
 import type { RouteRecordRaw } from 'vue-router'
 import type { SSRContext } from 'vue/server-renderer'
 import type { ViteSSGContext, ViteSSGOptions } from '../types'
 import { existsSync } from 'node:fs'
 import fs from 'node:fs/promises'
-/* eslint-disable no-console */
 import { createRequire } from 'node:module'
 import { dirname, isAbsolute, join, parse } from 'node:path'
 import process from 'node:process'
@@ -109,6 +109,9 @@ export async function build(ssgOptions: Partial<ViteSSGOptions> = {}, viteConfig
       },
     },
     mode: config.mode,
+    ssr: {
+      noExternal: ['vite-ssg'],
+    },
   }))
 
   const prefix = (format === 'esm' && process.platform === 'win32') ? 'file://' : ''
@@ -280,8 +283,7 @@ async function renderHTML({
   indexHTML: string
   appHTML: string
   initialState: any
-},
-) {
+}) {
   const stateScript = initialState
     ? `\n<script>window.__INITIAL_STATE__=${initialState}</script>`
     : ''