jyapayne/docsify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(render): init event in ssr

Browse source
This commit is contained in:
qingwei.li 2017-05-30 01:25:52 +08:00 • committed by cinwell.li
commit eba1c987a8
6 changed files with 68 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

36
app.js
View file

@ -1,12 +1,46 @@
var serveStatic = require('serve-static') var serveStatic = require('serve-static')
var http = require('http') var http = require('http')
var fs = require('fs') 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) { http.createServer(function (req, res) {
serveStatic('.')(req, res, function () { 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')) res.end(fs.readFileSync('dev.html'))
}) })
}).listen(3000, '0.0.0.0') }).listen(3000, '0.0.0.0')
console.log(`\nListening at http://0.0.0.0:3000\n`) console.log(`\nListening at http://0.0.0.0:3000\n`)

1
dev.html
View file

@ -32,6 +32,7 @@
subMaxLevel: 2, subMaxLevel: 2,
mergeNavbar: true, mergeNavbar: true,
formatUpdated: '{MM}/{DD} {HH}:{mm}', formatUpdated: '{MM}/{DD} {HH}:{mm}',
routerMode: 'history',
plugins: [ plugins: [
function(hook) { function(hook) {
hook.beforeEach(function (html) { hook.beforeEach(function (html) {

19
packages/docsify-server-renderer/index.js
View file

@ -30,7 +30,7 @@ export default class Renderer {
config, config,
cache cache
}) { }) {
this.html = this.template = template this.html = template
this.path = cwd(path) this.path = cwd(path)
this.config = Object.assign(config, { this.config = Object.assign(config, {
routerMode: 'history' routerMode: 'history'
@ -43,10 +43,12 @@ export default class Renderer {
this.router.getCurrentPath = () => this.url this.router.getCurrentPath = () => this.url
this._renderHtml('inject-config', `<script>window.$docsify = ${JSON.stringify(config)}</script>`) this._renderHtml('inject-config', `<script>window.$docsify = ${JSON.stringify(config)}</script>`)
this._renderHtml('inject-app', mainTpl(config)) this._renderHtml('inject-app', mainTpl(config))
this.template = this.html
} }
renderToString (url) { renderToString (url) {
this.url = url this.url = url = this.router.parse(url).path
// TODO render cover page // TODO render cover page
const { loadSidebar, loadNavbar } = this.config const { loadSidebar, loadNavbar } = this.config
@ -65,19 +67,26 @@ export default class Renderer {
this._renderHtml('navbar', this._render(navbarFile, 'navbar')) this._renderHtml('navbar', this._render(navbarFile, 'navbar'))
} }
return this.html const html = this.html
this.html = this.template
return html
} }
_renderHtml (match, content) { _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) { _render (path, type) {
let html = this._loadFile(path) let html = this._loadFile(path)
const { subMaxLevel, maxLevel } = this.config
switch (type) { switch (type) {
case 'sidebar': 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 break
case 'cover': case 'cover':
html = this.compiler.cover(html) html = this.compiler.cover(html)

9
src/core/fetch/index.js
View file

@ -2,6 +2,7 @@ import { get } from './ajax'
import { callHook } from '../init/lifecycle' import { callHook } from '../init/lifecycle'
import { getParentPath } from '../router/util' import { getParentPath } from '../router/util'
import { noop } from '../util/core' import { noop } from '../util/core'
import { getAndActive } from '../event/sidebar'
function loadNested (path, file, next, vm, first) { function loadNested (path, file, next, vm, first) {
path = first ? path : path.replace(/\/$/, '') path = first ? path : path.replace(/\/$/, '')
@ -70,7 +71,15 @@ export function fetchMixin (proto) {
} }
export function initFetch (vm) { export function initFetch (vm) {
const { loadSidebar } = vm.config
// server-client renderer
if (vm.rendered) { 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._fetchCover()
vm.$resetEvents() vm.$resetEvents()
callHook(vm, 'doneEach') callHook(vm, 'doneEach')

13
src/core/render/index.js
View file

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

2
src/core/router/history/html5.js
View file

@ -10,7 +10,7 @@ export class HTML5History extends History {
} }
getCurrentPath () { getCurrentPath () {
const base = this.config.base const base = this.config.basePath
let path = window.location.pathname let path = window.location.pathname
if (base && path.indexOf(base) === 0) { if (base && path.indexOf(base) === 0) {