fix(render): init event in ssr

docsifyjs · May 29, 2017 · eba1c98 · eba1c98
1 parent 3444884
commit eba1c98
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 12 deletions.
diff --git a/app.js b/app.js
@@ -1,12 +1,46 @@
 var serveStatic = require('serve-static')
 var http = require('http')
 var fs = require('fs')
+var Renderer = require('./packages/docsify-server-renderer/build.js')
+
+var renderer = new Renderer({
+  template: `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>docsify</title>
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <link rel="stylesheet" href="/themes/vue.css" title="vue">
+</head>
+<body>
+  <!--inject-app-->
+  <!--inject-config-->
+<script src="/lib/docsify.js"></script>
+</body>
+</html>`,
+  config: {
+    name: 'docsify',
+    repo: 'qingwei-li/docsify',
+    basePath: '/docs/',
+    loadNavbar: true,
+    loadSidebar: true,
+    subMaxLevel: 3,
+    auto2top: true
+  },
+  path: './'
+})
 
 http.createServer(function (req, res) {
   serveStatic('.')(req, res, function () {
-    res.writeHead(200, { 'Content-Type': 'text/html' })
+    // TEST SSR
+    // const html = renderer.renderToString(req.url)
+    // res.end(html)
+
+    res.writeHead(404, { 'Content-Type': 'text/html' })
     res.end(fs.readFileSync('dev.html'))
   })
 }).listen(3000, '0.0.0.0')
 
 console.log(`\nListening at http://0.0.0.0:3000\n`)
+
diff --git a/dev.html b/dev.html
@@ -32,6 +32,7 @@
     subMaxLevel: 2,
     mergeNavbar: true,
     formatUpdated: '{MM}/{DD} {HH}:{mm}',
+    routerMode: 'history',
     plugins: [
       function(hook) {
         hook.beforeEach(function (html) {

diff --git a/packages/docsify-server-renderer/index.js b/packages/docsify-server-renderer/index.js
@@ -30,7 +30,7 @@ export default class Renderer {
     config,
     cache
   }) {
-    this.html = this.template = template
+    this.html = template
     this.path = cwd(path)
     this.config = Object.assign(config, {
       routerMode: 'history'
@@ -43,10 +43,12 @@ export default class Renderer {
     this.router.getCurrentPath = () => this.url
     this._renderHtml('inject-config', `<script>window.$docsify = ${JSON.stringify(config)}</script>`)
     this._renderHtml('inject-app', mainTpl(config))
+
+    this.template = this.html
   }
 
   renderToString (url) {
-    this.url = url
+    this.url = url = this.router.parse(url).path
     // TODO render cover page
     const { loadSidebar, loadNavbar } = this.config
 
@@ -65,19 +67,26 @@ export default class Renderer {
       this._renderHtml('navbar', this._render(navbarFile, 'navbar'))
     }
 
-    return this.html
+    const html = this.html
+    this.html = this.template
+
+    return html
   }
 
   _renderHtml (match, content) {
-    this.html = this.html.replace(new RegExp(`<!--${match}-->`, 'g'), content)
+    return this.html = this.html.replace(new RegExp(`<!--${match}-->`, 'g'), content)
   }
 
   _render (path, type) {
     let html = this._loadFile(path)
+    const { subMaxLevel, maxLevel } = this.config
 
     switch (type) {
       case 'sidebar':
-        html = this.compiler.sidebar(html)
+        html = this.compiler.sidebar(html, maxLevel)
+          + `<script>window.__SUB_SIDEBAR__ = ${JSON.stringify(
+            this.compiler.subSidebar(html, subMaxLevel)
+          )}</script>`
         break
       case 'cover':
         html = this.compiler.cover(html)

diff --git a/src/core/fetch/index.js b/src/core/fetch/index.js
@@ -2,6 +2,7 @@ import { get } from './ajax'
 import { callHook } from '../init/lifecycle'
 import { getParentPath } from '../router/util'
 import { noop } from '../util/core'
+import { getAndActive } from '../event/sidebar'
 
 function loadNested (path, file, next, vm, first) {
   path = first ? path : path.replace(/\/$/, '')
@@ -70,7 +71,15 @@ export function fetchMixin (proto) {
 }
 
 export function initFetch (vm) {
+  const { loadSidebar } = vm.config
+
+  // server-client renderer
   if (vm.rendered) {
+    const activeEl = getAndActive(vm.router, '.sidebar-nav', true, true)
+    if (loadSidebar && activeEl) {
+      activeEl.parentNode.innerHTML += window.__SUB_SIDEBAR__
+    }
+    vm._bindEventOnRendered(activeEl)
     vm._fetchCover()
     vm.$resetEvents()
     callHook(vm, 'doneEach')

diff --git a/src/core/render/index.js b/src/core/render/index.js
@@ -54,10 +54,6 @@ function renderMain (html) {
   } else {
     this.config.executeScript && executeScript()
   }
-
-  if (this.config.auto2top) {
-    scroll2Top(this.config.auto2top)
-  }
 }
 
 function renderNameLink (vm) {
@@ -91,7 +87,12 @@ export function renderMixin (proto) {
       activeEl.parentNode.innerHTML += this.compiler.subSidebar(subMaxLevel)
     }
     // bind event
-    this.activeLink = activeEl
+    this._bindEventOnRendered()
+  }
+
+  proto._bindEventOnRendered = function (activeEl) {
+    const { autoHeader, auto2top } = this.config
+
     scrollActiveSidebar(this.router)
 
     if (autoHeader && activeEl) {
@@ -103,6 +104,8 @@ export function renderMixin (proto) {
         dom.before(main, h1)
       }
     }
+
+    auto2top && scroll2Top(auto2top)
   }
 
   proto._renderNav = function (text) {

diff --git a/src/core/router/history/html5.js b/src/core/router/history/html5.js
@@ -10,7 +10,7 @@ export class HTML5History extends History {
   }
 
   getCurrentPath () {
-    const base = this.config.base
+    const base = this.config.basePath
     let path = window.location.pathname
 
     if (base && path.indexOf(base) === 0) {