feat: support head updating by @vueuse/head (antfu-collective#7)

* wip: @vueuse/head

* feat: support @vueuse/head

* chore: update readme

Author: antfu

.gitignore

@@ -2,3 +2,4 @@ node_modules
 .DS_Store
 dist
 example/README.md
+.vite-ssg-temp

.npmrc

@@ -1 +1,2 @@
 shamefully-hoist = true
+ignore-workspace-root-check = true

README.md

@@ -64,6 +64,34 @@ export default {
 
 Component `ClientOnly` is registered globally along with the app creation.
 
+## Document head
+
+From `v0.4.0`, we ships [`@vueuse/head`](https://github.com/vueuse/head) to manage the document head out-of-box. You can directly use it in your pages/components, for example:
+
+```vue
+<template>
+  <button @click="count++">Click</button>
+</template>
+
+<script setup>
+import { useHead } from '@vueuse/head'
+
+useHead({
+  title: 'Website Title',
+  meta: [
+    {
+      name: `description`,
+      content: `Website description`,
+    },
+  ],
+})
+</script>
+```
+
+That's all, no configuration needed. Vite SSG will handle the server-side rendering and merging automatically.
+
+Refer to [`@vueuse/head`'s docs](https://github.com/vueuse/head) for more usage about `useHead`.
+
 ## Comparsion
 
 ### Use [Vitepress](https://github.com/vuejs/vitepress) when you want:

bin/vite-ssg.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
 'use strict'
-require('../dist/cli')
+require('../dist/node/cli')

example/package.json

@@ -8,16 +8,16 @@
     "vue": "^3.0.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^1.0.4",
+    "@vitejs/plugin-vue": "^1.0.6",
     "@vue/compiler-sfc": "^3.0.5",
     "cross-env": "^7.0.3",
     "typescript": "^4.1.3",
-    "vite": "^2.0.0-beta.10",
-    "vite-plugin-components": "^0.6.1",
-    "vite-plugin-md": "^0.2.0",
+    "vite": "^2.0.0-beta.31",
+    "vite-plugin-components": "^0.6.6",
+    "vite-plugin-md": "^0.2.1",
     "vite-plugin-voie": "npm:@antfu/vite-plugin-voie@^0.7.1",
     "vite-ssg": "workspace:*",
     "voie-pages": "^0.4.0",
-    "vue-router": "^4.0.2"
+    "vue-router": "^4.0.3"
   }
 }

example/src/pages/b.vue

@@ -0,0 +1,22 @@
+<template>
+  <p>Hello I am B</p>
+</template>
+
+<script setup lang="ts">
+import { useHead } from '@vueuse/head'
+
+useHead({
+  title: 'Hello',
+  meta: [
+    {
+      name: 'description',
+      content: 'Website description',
+    },
+  ],
+  style: [
+    {
+      children: 'body {color: #567839}',
+    },
+  ],
+})
+</script>

package.json

@@ -28,11 +28,12 @@
     "dev": "npm run build -- --watch",
     "example:dev": "cp README.md example/README.md && npm -C example run dev",
     "example:build": "cp README.md example/README.md && npm -C example run build",
-    "build": "tsup src/index.ts src/cli.ts --dts --format cjs,esm",
+    "build": "tsup src/index.ts src/node/cli.ts --dts --format cjs,esm",
     "prepublishOnly": "npm run build",
     "release": "npx bumpp --commit --tag && npm publish && git push"
   },
   "dependencies": {
+    "@vueuse/head": "^0.2.1",
     "chalk": "^4.1.0",
     "fs-extra": "^9.0.1",
     "jsdom": "^16.4.0",
@@ -48,18 +49,18 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.4.3",
     "@types/fs-extra": "^9.0.6",
-    "@types/jsdom": "^16.2.5",
+    "@types/jsdom": "^16.2.6",
     "@types/yargs": "^15.0.12",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
+    "@typescript-eslint/eslint-plugin": "^4.14.0",
     "@vue/compiler-sfc": "^3.0.5",
     "@vue/server-renderer": "^3.0.5",
-    "eslint": "^7.17.0",
-    "rollup": "^2.36.1",
+    "eslint": "^7.18.0",
+    "rollup": "^2.37.0",
     "standard-version": "^9.1.0",
     "tsup": "^3.11.0",
     "typescript": "^4.1.3",
-    "vite": "^2.0.0-beta.12",
+    "vite": "^2.0.0-beta.31",
     "vue": "^3.0.5",
-    "vue-router": "^4.0.2"
+    "vue-router": "^4.0.3"
   }
 }