feat: vite-ssg (#24)

.gitignore

@@ -3,3 +3,4 @@ node_modules
 dist
 *.local
 .presite
+dist-ssr

README.md

@@ -34,7 +34,7 @@
 
 - 🔥 Use the [new `<script setup>` style](https://github.com/vuejs/rfcs/pull/227)
 
-- 🖨 Server-side generation (SSG) via [presite](https://github.com/egoist/presite)
+- 🖨 Server-side generation (SSG) via [vite-ssg](https://github.com/antfu/vite-ssg)
 
 - 🦾 TypeScript, of course
 

package.json

@@ -2,11 +2,11 @@
   "private": true,
   "scripts": {
     "dev": "vite --port 3333 --open",
-    "build": "cross-env NODE_ENV=production vite build"
+    "build": "cross-env NODE_ENV=production vite-ssg build"
   },
   "dependencies": {
-    "@iconify/iconify": "^2.0.0-rc.2",
-    "@vueuse/core": "^4.0.0-rc.8",
+    "@iconify/iconify": "^2.0.0-rc.4",
+    "@vueuse/core": "^4.0.0",
     "nprogress": "^0.2.0",
     "vue": "^3.0.4",
     "vue-i18n": "9.0.0-beta.8",
@@ -14,22 +14,20 @@
   },
   "devDependencies": {
     "@antfu/eslint-config-vue": "^0.4.3",
-    "@iconify/json": "^1.1.272",
+    "@iconify/json": "^1.1.275",
     "@purge-icons/generated": "^0.4.1",
     "@tailwindcss/typography": "^0.3.1",
     "@types/nprogress": "^0.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.9.1",
+    "@typescript-eslint/eslint-plugin": "^4.10.0",
     "@vue/compiler-sfc": "^3.0.4",
+    "@vue/server-renderer": "^3.0.4",
     "@vuedx/typescript-plugin-vue": "^0.2.3",
     "autoprefixer": "^10.1.0",
-    "chromium": "^3.0.2",
     "cross-env": "^7.0.3",
-    "eslint": "^7.15.0",
-    "esno": "^0.3.0",
+    "eslint": "^7.16.0",
     "markdown-it-shiki": "^0.0.2",
-    "pnpm": "^5.13.6",
+    "pnpm": "^5.13.7",
     "postcss-nested": "^5.0.3",
-    "presite": "^2.0.2",
     "tailwindcss": "^2.0.2",
     "typescript": "^4.1.3",
     "vite": "^1.0.0-rc.13",
@@ -38,6 +36,7 @@
     "vite-plugin-purge-icons": "^0.4.5",
     "vite-plugin-pwa": "^0.1.7",
     "vite-plugin-voie": "^0.4.1",
+    "vite-ssg": "^0.0.5",
     "voie-pages": "^0.4.0"
   },
   "pnpm": {

scripts/ssg.ts

@@ -1,8 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-console.log('Starting SSG...')
-
-const { execSync } = require('child_process')
-const chromium = require('chromium')
-
-execSync(`npx cross-env CHROME_PATH="${chromium.path}" presite dist`, { stdio: 'inherit' })
-console.log('SSG Finished...')

src/logics/dark.ts

@@ -18,6 +18,6 @@ export const isDark = computed({
 
 watch(
   isDark,
-  v => document.documentElement.classList.toggle('dark', v),
+  v => typeof document !== 'undefined' && document.documentElement.classList.toggle('dark', v),
   { immediate: true },
 )

src/main.ts

@@ -1,12 +1,21 @@
 import './main.postcss'
-import { createApp } from 'vue'
+// import routes generated by Voie
+import routes from 'voie-pages'
+// progress bar
+import NProgress from 'nprogress'
+import { ViteSSG } from 'vite-ssg'
 import installPlugins from './plugins'
-
 import App from './App.vue'
 
-const app = createApp(App)
+export const createApp = ViteSSG(
+  App,
+  { routes },
+  ({ app, router, isClient }) => {
+    installPlugins(app)
 
-installPlugins(app)
-
-// true for hydrate
-app.mount('#app', true)
+    if (isClient) {
+      router.beforeEach(() => { NProgress.start() })
+      router.afterEach(() => { NProgress.done() })
+    }
+  }
+)

src/plugins/index.ts

@@ -1,9 +1,7 @@
 import { App } from 'vue'
-import installRouter from './router'
 import installI18n from './i18n'
 import './icons'
 
 export default (app: App) => {
-  installRouter(app)
   installI18n(app)
 }

src/plugins/router.ts

@@ -1,18 +0,0 @@
-import { App } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
-// import routes generated by Voie
-import routes from 'voie-pages'
-// progress bar
-import NProgress from 'nprogress'
-
-export default (app: App) => {
-  const router = createRouter({
-    history: createWebHistory(),
-    routes,
-  })
-
-  router.beforeEach(() => { NProgress.start() })
-  router.afterEach(() => { NProgress.done() })
-
-  app.use(router)
-}