fix: vue ssr compatibility

build/poi.lib.config.js

@@ -18,5 +18,6 @@ module.exports = {
   chainWebpack(config) {
     config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
     config.output.libraryExport('default')
+    config.output.globalObject('this')
   }
 }

package.json

@@ -15,7 +15,6 @@
     "test:unit": "poi puppet src/**/*.test.js --test --plugin @poi/puppet --framework mocha"
   },
   "dependencies": {
-    "isomorphic-unfetch": "^3.0.0",
     "jump.js": "^1.0.2",
     "loadjs": "^3.5.4",
     "marked": "^0.5.0",

src/components/ImageZoom.vue

@@ -5,10 +5,9 @@
 </template>
 
 <script>
-import mediumZoom from 'medium-zoom'
-
 export default {
   name: 'ImageZoom',
+
   props: {
     url: {
       type: String,
@@ -25,7 +24,9 @@ export default {
       type: [String, Number]
     }
   },
+
   mounted() {
+    const mediumZoom = require('medium-zoom').default
     mediumZoom(this.$refs.img, {
       // background: '#333'
     })

src/components/Root.vue

@@ -35,20 +35,20 @@ export default {
   },
   methods: {
     insertStyle() {
-      const ID = 'docute-inserted-style'
-      const style = document.createElement('style')
-      style.id = ID
-      if (style.styleSheet) {
-        style.styleSheet.cssText = this.css
-      } else {
-        style.appendChild(document.createTextNode(this.css))
+      if (this.$ssrContext) {
+        this.$ssrContext.insertedStyle = this.css
+        return
       }
 
-      const existingStyle = document.getElementById(ID)
-      if (existingStyle) {
-        document.head.insertBefore(style, existingStyle)
-        document.head.removeChild(existingStyle)
+      const ID = 'docute-inserted-style'
+      let style = document.getElementById(ID)
+
+      if (style) {
+        style.innerHTML = this.css
       } else {
+        style = document.createElement('style')
+        style.id = ID
+        style.innerHTML = this.css
         document.head.insertBefore(style, document.head.firstChild)
       }
     }

src/index.js

@@ -4,6 +4,7 @@ import PluginAPI from './PluginAPI'
 import Root from './components/Root.vue'
 import store from './store'
 import createRouter from './router'
+import {inBrowser} from './utils'
 import alternativeComponents from './utils/alternativeComponents'
 import ImageZoom from './components/ImageZoom.vue'
 import Badge from './components/Badge.vue'
@@ -44,8 +45,11 @@ class Docute {
     const router = createRouter(config.router)
     sync(store, router)
 
+    this.router = router
+    this.store = store
+
     store.commit('SET_CONFIG', {
-      title: document.title,
+      title: inBrowser && document.title,
       ...config
     })
 
@@ -75,8 +79,11 @@ class Docute {
   mount() {
     const {target} = store.getters
     // Force hydration when there's initial state
-    const hydrate = Boolean(window[INITIAL_STATE_NAME])
-    this.app.$mount(`#${target}`, hydrate)
+    if (window[INITIAL_STATE_NAME]) {
+      this.app.$mount(`#${target}`, true)
+    } else {
+      this.app.$mount(`#${target}`)
+    }
     return this
   }
 

src/store.js

@@ -1,10 +1,9 @@
 /* globals __PRISM_VERSION__ */
 import Vue from 'vue'
 import Vuex from 'vuex'
-import fetch from 'isomorphic-unfetch'
 import marked from './utils/marked'
 import highlight from './utils/highlight'
-import {getFilenameByPath, getFileUrl, isExternalLink} from './utils'
+import {getFilenameByPath, getFileUrl, isExternalLink, inBrowser} from './utils'
 import markedRenderer from './utils/markedRenderer'
 import hooks from './hooks'
 import load from './utils/load'
@@ -14,7 +13,7 @@ import {INITIAL_STATE_NAME} from './utils/constants'
 
 Vue.use(Vuex)
 
-const initialState = window[INITIAL_STATE_NAME]
+const initialState = inBrowser && window[INITIAL_STATE_NAME]
 
 const store = new Vuex.Store({
   state: {
@@ -226,7 +225,7 @@ const store = new Vuex.Store({
   }
 })
 
-if (process.env.NODE_ENV === 'development') {
+if (process.env.NODE_ENV === 'development' && inBrowser) {
   window.store = store
 }
 

src/utils/index.js

@@ -37,3 +37,5 @@ export const getFilenameByPath = path => {
 
   return path
 }
+
+export const inBrowser = typeof window !== 'undefined'

src/views/Home.vue

@@ -57,6 +57,11 @@ export default {
     EditLink
   },
 
+  async serverPrefetch() {
+    await this.fetchFile(this.$route.path)
+    this.setTitle()
+  },
+
   mounted() {
     if (!window[INITIAL_STATE_NAME]) {
       this.fetchFile(this.$route.path).then(this.setInitialState)
@@ -76,18 +81,9 @@ export default {
         this.jumpToHash()
       })
     },
-    pageTitle(newValue) {
-      const {path} = this.$route
-      const {config, homePaths} = this.$store.getters
 
-      if (homePaths.indexOf(path) > -1) {
-        document.title = config.title
-      } else {
-        const div = document.createElement('div')
-        div.innerHTML = newValue
-        const title = div.textContent
-        document.title = `${title} - ${config.title}`
-      }
+    pageTitle() {
+      this.setTitle()
     }
   },
 
@@ -161,6 +157,24 @@ export default {
         })}`
         document.head.appendChild(script)
       }
+    },
+
+    setTitle() {
+      const {path} = this.$route
+      const {config, homePaths} = this.$store.getters
+
+      let title =
+        homePaths.indexOf(path) > -1
+          ? config.title
+          : `${this.pageTitle} - ${config.title}`
+
+      // Strip HTML tags
+      title = title.replace(/<(?:.|\n)*?>/gm, '')
+      if (this.$ssrContext) {
+        this.$ssrContext.title = title
+      } else {
+        document.title = title
+      }
     }
   }
 }

yarn.lock

@@ -6322,14 +6322,6 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
-isomorphic-unfetch@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/isomorphic-unfetch/-/isomorphic-unfetch-3.0.0.tgz#de6d80abde487b17de2c400a7ef9e5ecc2efb362"
-  integrity sha512-V0tmJSYfkKokZ5mgl0cmfQMTb7MLHsBMngTkbLY0eXvKqiVRRoZP04Ly+KhKrJfKtzC9E6Pp15Jo+bwh7Vi2XQ==
-  dependencies:
-    node-fetch "^2.2.0"
-    unfetch "^4.0.0"
-
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -7632,7 +7624,7 @@ node-fetch-npm@^2.0.2:
     json-parse-better-errors "^1.0.0"
     safe-buffer "^5.1.1"
 
-node-fetch@^2.2.0, node-fetch@^2.3.0:
+node-fetch@^2.3.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.3.0.tgz#1a1d940bbfb916a1d3e0219f037e89e71f8c5fa5"
   integrity sha512-MOd8pV3fxENbryESLgVIeaGKrdl+uaYhCSSVkjeOb/31/njTpcis5aWfdqgNlHIrKOLRbMnfPINPOML2CIFeXA==
@@ -11985,10 +11977,10 @@ umask@^1.1.0, umask@~1.1.0:
   resolved "https://registry.npmjs.org/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d"
   integrity sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0=
 
-unfetch@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.npmjs.org/unfetch/-/unfetch-4.0.1.tgz#8750c4c7497ade75d40387d7dbc4ba024416b8f6"
-  integrity sha512-HzDM9NgldcRvHVDb/O9vKoUszVij30Yw5ePjOZJig8nF/YisG7QN/9CBXZ8dsHLouXMeLZ82r+Jod9M2wFkEbQ==
+unfetch@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/unfetch/-/unfetch-4.1.0.tgz#6ec2dd0de887e58a4dee83a050ded80ffc4137db"
+  integrity sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg==
 
 unherit@^1.0.4:
   version "1.1.1"