From 4ab530ee59cbbd8d2a5506ae564f3a4f63654080 Mon Sep 17 00:00:00 2001
From: Fran Dios <frankdiox@gmail.com>
Date: Sun, 28 Feb 2021 01:41:34 +0900
Subject: [PATCH] feat: Export ClientOnly in Vue

---
 examples/vue/src/main.js  | 4 +++-
 src/index.d.ts            | 1 +
 src/vue/entry-client.d.ts | 1 +
 src/vue/entry-client.js   | 4 +++-
 src/vue/entry-server.d.ts | 1 +
 src/vue/entry-server.js   | 5 +++--
 src/vue/index.d.ts        | 1 +
 7 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/examples/vue/src/main.js b/examples/vue/src/main.js
index 8761a56..1041a09 100644
--- a/examples/vue/src/main.js
+++ b/examples/vue/src/main.js
@@ -1,7 +1,7 @@
 import './index.css'
 import App from './App.vue'
 import routes from './routes'
-import viteSSR from 'vite-ssr'
+import viteSSR, { ClientOnly } from 'vite-ssr'
 import { createHead } from '@vueuse/head'
 
 // This piece will move route.meta.state to Page props.
@@ -17,6 +17,8 @@ export default viteSSR(
     const head = createHead()
     app.use(head)
 
+    app.component(ClientOnly.name, ClientOnly)
+
     // The 'initialState' is hydrated in the browser and can be used to
     // pass it to Vuex, for example, if you prefer to rely on stores rather than page props.
     // In the server, 'initialState' is an empty object that can be mutated. It can be
diff --git a/src/index.d.ts b/src/index.d.ts
index 660b34f..33fdda1 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -21,4 +21,5 @@ declare module 'vite-ssr' {
   ) => any
 
   export default handler
+  export const ClientOnly: any
 }
diff --git a/src/vue/entry-client.d.ts b/src/vue/entry-client.d.ts
index cdd9a84..4fd1f7d 100644
--- a/src/vue/entry-client.d.ts
+++ b/src/vue/entry-client.d.ts
@@ -23,4 +23,5 @@ declare module 'vite-ssr/vue/entry-client' {
   ) => HookResponse | Promise<HookResponse>
 
   export default handlerClient
+  export const ClientOnly: typeof Vue
 }
diff --git a/src/vue/entry-client.js b/src/vue/entry-client.js
index 04d798a..168b67f 100644
--- a/src/vue/entry-client.js
+++ b/src/vue/entry-client.js
@@ -1,8 +1,11 @@
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import { getFullPath, withoutSuffix } from '../utils/route'
+export { ClientOnly } from '../components.mjs'
 
 export default async function (App, { routes, base, debug = {} } = {}, hook) {
+  const app = createApp(App)
+
   const url = window.location
   const routeBase = base && withoutSuffix(base({ url }), '/')
   const router = createRouter({
@@ -10,7 +13,6 @@ export default async function (App, { routes, base, debug = {} } = {}, hook) {
     routes,
   })
 
-  const app = createApp(App)
   app.use(router)
 
   let entryRouteName
diff --git a/src/vue/entry-server.d.ts b/src/vue/entry-server.d.ts
index 5071d25..ee28f99 100644
--- a/src/vue/entry-server.d.ts
+++ b/src/vue/entry-server.d.ts
@@ -33,4 +33,5 @@ declare module 'vite-ssr/vue/entry-server' {
   ) => Promise<Renderer>
 
   export default handlerSSR
+  export const ClientOnly: typeof Vue
 }
diff --git a/src/vue/entry-server.js b/src/vue/entry-server.js
index a2da85c..bde27f2 100644
--- a/src/vue/entry-server.js
+++ b/src/vue/entry-server.js
@@ -4,18 +4,19 @@ import { createRouter, createMemoryHistory } from 'vue-router'
 import { createUrl, getFullPath, withoutSuffix } from '../utils/route'
 import { parseHTML, findDependencies, renderPreloadLinks } from '../utils/html'
 import { renderHeadToString } from '@vueuse/head'
+export { ClientOnly } from '../components.mjs'
 
 export default function (App, { routes, base }, hook) {
   return async function (url, { manifest, preload = false, ...extra } = {}) {
-    url = createUrl(url)
+    const app = createSSRApp(App)
 
+    url = createUrl(url)
     const routeBase = base && withoutSuffix(base({ url }), '/')
     const router = createRouter({
       history: createMemoryHistory(routeBase),
       routes,
     })
 
-    const app = createSSRApp(App)
     app.use(router)
 
     // This can be injected with useSSRContext() in setup functions
diff --git a/src/vue/index.d.ts b/src/vue/index.d.ts
index fec9fa1..25f0ad0 100644
--- a/src/vue/index.d.ts
+++ b/src/vue/index.d.ts
@@ -23,4 +23,5 @@ declare module 'vite-ssr/vue' {
   ) => Promise<void>
 
   export default handlerClient
+  export const ClientOnly: typeof Vue
 }