feat: add support for @vueuse/head versions >1.0.0

examples/vue/package.json

@@ -11,7 +11,7 @@
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/compiler-sfc": "^3.2.26",
     "@vue/server-renderer": "^3.2.26",
-    "@vueuse/head": "^0.6.0",
+    "@vueuse/head": "^0.6.0||^1.0.0",
     "vite": "4.1.x",
     "vue": "^3.2.26",
     "vue-router": "^4.0.12"

package.json

@@ -12,7 +12,15 @@
     "dev:watch:esm": "yarn dev:watch:cjs --project tsconfig-esm.json",
     "test": "uvu -r ts-node/register test/specs",
     "test:watch": "watchlist src test -- yarn test",
-    "pretest": "run-s  \"build:compile:* --incremental --outDir ./node_modules/vite-ssr\" dev:copy",
+    "pretest": "run-s  \"build:compile:* --incremental --outDir ./node_modules/vite-ssr\" dev:copy \"test:copy:*\" \"test:fix-cli:*\"",
+    "test:copy:fixture-react": "cp -r ./node_modules/vite-ssr ./test/fixtures/react-ts-basic/node_modules/vite-ssr && cp package.json ./test/fixtures/react-ts-basic/node_modules/vite-ssr/",
+    "test:copy:fixture-vue-basic": "cp -r ./node_modules/vite-ssr ./test/fixtures/vue-ts-basic/node_modules/vite-ssr && cp package.json ./test/fixtures/vue-ts-basic/node_modules/vite-ssr/",
+    "test:copy:fixture-vue-head-v0": "cp -r ./node_modules/vite-ssr ./test/fixtures/vue-ts-head-v0/node_modules/vite-ssr && cp package.json ./test/fixtures/vue-ts-head-v0/node_modules/vite-ssr/",
+    "test:copy:fixture-vue-head-v1": "cp -r ./node_modules/vite-ssr ./test/fixtures/vue-ts-head-v1/node_modules/vite-ssr && cp package.json ./test/fixtures/vue-ts-head-v1/node_modules/vite-ssr/",
+    "test:fix-cli:fixture-react": "chmod +x ./test/fixtures/react-ts-basic/node_modules/vite-ssr/cli.js",
+    "test:fix-cli:fixture-vue-basic": "chmod +x ./test/fixtures/vue-ts-basic/node_modules/vite-ssr/cli.js",
+    "test:fix-cli:fixture-vue-head-v0": "chmod +x ./test/fixtures/vue-ts-head-v0/node_modules/vite-ssr/cli.js",
+    "test:fix-cli:fixture-vue-head-v1": "chmod +x ./test/fixtures/vue-ts-head-v1/node_modules/vite-ssr/cli.js",
     "build": "npm-run-all build:* --parallel build:compile:*",
     "build:clean": "rm -rf dist && mkdir dist",
     "build:copy": "cp README.md LICENSE dist/ && sed -e '/\"private\"/d' package.json > dist/package.json",
@@ -47,7 +55,7 @@
   "peerDependencies": {
     "@vitejs/plugin-react": "^3.0.0",
     "@vitejs/plugin-vue": "^4.0.0",
-    "@vueuse/head": "0.x",
+    "@vueuse/head": "0.x||^1.0.0",
     "react": "^17",
     "react-dom": "^17",
     "react-helmet-async": "^1.0.0",
@@ -102,6 +110,7 @@
     "@types/node-fetch": "^2.5.9",
     "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
+    "@vueuse/head": "^1.0.0",
     "execa": "^5.1.1",
     "express": "^4.17.1",
     "fs-extra": "^10.0.0",

src/build/index.ts

@@ -103,7 +103,7 @@ export = async (
 
     if (isWatching) {
       // This is a build watcher
-      const watcher = clientResult as RollupWatcher
+      const watcher = (clientResult as unknown) as RollupWatcher
       let resolved = false
 
       // @ts-ignore
@@ -140,7 +140,7 @@ export = async (
         Array.isArray(clientResult)
           ? clientResult
           : [clientResult as RollupOutput]
-      ).flatMap((result) => result.output)
+      ).flatMap((result) => (result.output as unknown) as OutputAsset)
 
       // Get the index.html from the resulting bundle.
       indexHtmlTemplate = (

src/vue/entry-server.ts

@@ -3,13 +3,20 @@ import { renderToString } from '@vue/server-renderer'
 import { createRouter, createMemoryHistory, RouteRecordRaw } from 'vue-router'
 import { getFullPath, withoutSuffix } from '../utils/route'
 import { addPagePropsGetterToRoutes } from './utils'
-import { renderHeadToString } from '@vueuse/head'
+import { renderHeadToString as renderHeadToStringOriginal } from '@vueuse/head'
 import coreViteSSR from '../core/entry-server.js'
 import type { SsrHandler } from './types'
 
 import { provideContext } from './components.js'
 export { ClientOnly, useContext } from './components.js'
 
+type RenderHeadToStringOptions = Parameters<typeof renderHeadToStringOriginal>;
+type RenderHeadToStringReturnType = ReturnType<typeof renderHeadToStringOriginal>;
+type PromisifiedRenderHeadToString = (...args: RenderHeadToStringOptions) => Promise<RenderHeadToStringReturnType> | RenderHeadToStringReturnType;
+
+// Wrap the renderHeadToString in a Promise to ensure compatibility with both versions ^0.6.0 and ^1.0.0 of @vueuse/head
+const renderHeadToString: PromisifiedRenderHeadToString = (...args) => Promise.resolve(renderHeadToStringOriginal(...args));
+
 export const viteSSR: SsrHandler = function viteSSR(
   App,
   {
@@ -73,7 +80,7 @@ export const viteSSR: SsrHandler = function viteSSR(
       headTags = '',
       htmlAttrs = '',
       bodyAttrs = '',
-    } = head ? renderHeadToString(head) : {}
+    } = head ? await renderHeadToString(head) : {}
 
     return { body, headTags, htmlAttrs, bodyAttrs }
   })

test/fixtures/react-ts-basic/package.json

@@ -2,8 +2,8 @@
   "name": "test-react-ts-basic",
   "version": "0.0.0",
   "scripts": {
-    "dev": "node ../../../node_modules/vite-ssr/cli.js --port 1337 --force",
-    "build": "node ../../../node_modules/vite-ssr/cli.js build",
+    "dev": "node ./node_modules/vite-ssr/cli.js --port 1337 --force",
+    "build": "node ./node_modules/vite-ssr/cli.js build",
     "serve": "node server"
   },
   "dependencies": {

test/fixtures/vue-ts-basic/package.json

@@ -2,8 +2,8 @@
   "name": "test-vue-ts-basic",
   "version": "0.0.0",
   "scripts": {
-    "dev": "node ../../../node_modules/vite-ssr/cli.js --port 1337 --force",
-    "build": "node ../../../node_modules/vite-ssr/cli.js build",
+    "dev": "node ./node_modules/vite-ssr/cli.js --port 1337 --force",
+    "build": "./node_modules/vite-ssr/cli.js build",
     "serve": "node server"
   },
   "dependencies": {

test/fixtures/vue-ts-head-v0/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

test/fixtures/vue-ts-head-v0/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "test-vue-ts-head-v0",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "node ./node_modules/vite-ssr/cli.js --port 1337 --force",
+    "build": "./node_modules/vite-ssr/cli.js build",
+    "serve": "node server"
+  },
+  "dependencies": {
+    "@vueuse/head": "^0.6.0",
+    "vue": "^3.2.26",
+    "vue-router": "^4.0.12"
+  },
+  "devDependencies": {
+    "@types/connect": "^3.4.35",
+    "@types/node": "^16.4.7",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/compiler-sfc": "^3.2.26",
+    "typescript": "^4.3.2",
+    "vite": "4.1.x",
+    "vue-tsc": "^0.0.24"
+  }
+}

test/fixtures/vue-ts-head-v0/src/App.vue

@@ -0,0 +1,34 @@
+<template>
+  <nav>
+    <RouterLink to="/">Home</RouterLink>
+    <RouterLink to="/about">About</RouterLink>
+    <RouterLink to="/repos">Repos</RouterLink>
+  </nav>
+
+  <div>
+    <button @click="count++">Count:{{ count }}</button>
+  </div>
+  <RouterView v-slot="{ Component }">
+    <Suspense>
+      <component :is="Component" />
+    </Suspense>
+  </RouterView>
+</template>
+
+<script lang="ts">
+import { useHead } from '@vueuse/head';
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  name: 'App',
+  setup() {
+    // Set title for testing
+    useHead({
+      title: 'vue-ts-head-v0-title',
+    });
+
+    return {
+      count: ref(0),
+    }
+  },
+})
+</script>

test/fixtures/vue-ts-head-v0/src/main.ts

@@ -0,0 +1,17 @@
+import App from './App.vue'
+import routes from './routes'
+import ssrApp from 'vite-ssr/vue'
+import { createHead, HeadObject, HeadObjectPlain } from '@vueuse/head'
+
+export default ssrApp(App, { routes }, (context) => {
+  //  data fetching`
+
+  // Create basic head
+  const head = createHead();
+
+  context.app.use(head);
+
+  return {
+    head,
+  }
+})

test/fixtures/vue-ts-head-v0/src/pages/about.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>About Page</h1>
+</template>

test/fixtures/vue-ts-head-v0/src/pages/home.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Home Page</h1>
+</template>

test/fixtures/vue-ts-head-v0/src/pages/repos.vue

@@ -0,0 +1,50 @@
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { useFetchRepos } from '../state'
+
+type Repo = {
+  id: number
+  name: string
+  description: string
+  stargazers_count: string
+}
+
+export default defineComponent({
+  name: 'ReposPage',
+  async setup() {
+    const repos = ref<Repo[]>(await useFetchRepos())
+
+    const removeRepo = (id: number) => {
+      const i = repos.value.findIndex((item) => item.id === id)
+      repos.value.splice(i, 1)
+    }
+
+    return {
+      repos,
+      removeRepo,
+    }
+  },
+})
+</script>
+
+<template>
+  <div>
+    <h1>VueJs Org Repos</h1>
+    <div
+      v-for="repo of repos"
+      :key="repo.id"
+      style="padding: 4px; border: 1px solid gray; margin: 4px"
+    >
+      <div>
+        <h3 :data-test="`name-${repo.name}`">Name: {{ repo.name }}</h3>
+        <div :data-test="`desc-${repo.name}`">
+          {{ repo.description }}
+          <strong>{{ repo.stargazers_count }} stars</strong>
+        </div>
+        <button @click="removeRepo(repo.id)" :data-test="`remove-${repo.name}`">
+          remove
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

test/fixtures/vue-ts-head-v0/src/routes.ts

@@ -0,0 +1,21 @@
+import { RouteRecordRaw } from 'vue-router'
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'home',
+    component: () => import('./pages/home.vue'),
+  },
+  {
+    name: 'about',
+    path: '/about',
+    component: () => import('./pages/about.vue'),
+  },
+  {
+    name: 'repos',
+    path: '/repos',
+    component: () => import('./pages/repos.vue'),
+  },
+]
+
+export default routes

test/fixtures/vue-ts-head-v0/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

test/fixtures/vue-ts-head-v0/src/state/index.ts

@@ -0,0 +1,21 @@
+import { useContext } from 'vite-ssr/vue'
+import { useRoute } from 'vue-router'
+
+export async function useFetchRepos() {
+  const { initialState } = useContext()
+  const { name } = useRoute()
+
+  let state = initialState[name as string] || null
+
+  if (!state) {
+    state = await (
+      await fetch('https://api.github.com/orgs/vuejs/repos')
+    ).json()
+
+    if (import.meta.env.SSR) {
+      initialState[name as string] = state
+    }
+  }
+
+  return state
+}

test/fixtures/vue-ts-head-v0/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

test/fixtures/vue-ts-head-v0/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

test/fixtures/vue-ts-head-v0/vite.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require('vite')
+const vue = require('@vitejs/plugin-vue')
+const viteSSR = require('vite-ssr/plugin')
+
+// https://vitejs.dev/config/
+module.exports = defineConfig({
+  ssr: { format: 'cjs' },
+  plugins: [viteSSR(), vue()],
+})