Fix hot reloading for layout

This commit is contained in:
Sébastien Chopin 2016-12-24 14:15:00 +01:00
parent 3a0fcdee73
commit 3f220625b9
2 changed files with 25 additions and 8 deletions

View File

@ -14,12 +14,14 @@ layoutsKeys.forEach(function (key, i) { %>
}
export default {
data () {
return { layout: null }
},
data: () => ({
layout: null,
layoutName: ''
}),
methods: {
setLayout (layout) {
if (!layout || !layouts['_' + layout]) layout = 'default'
this.layoutName = layout
let _layout = '_' + layout
if (typeof layouts[_layout] === 'function') {
return this.loadLayout(_layout)

View File

@ -121,7 +121,8 @@ function render (to, from, next) {
if (Component._data && typeof Component._data === 'function') {
var promise = promisify(Component._data, context)
promise.then((data) => {
Component.options.data = () => data || {}
Component._cData = () => data || {}
Component.options.data = Component._cData
Component._dataFn = Component.options.data.toString().replace(/\s/g, '')
if (Component._Ctor && Component._Ctor.options) {
Component._Ctor.options.data = Component.options.data
@ -169,11 +170,13 @@ function fixPrepatch (to, ___) {
}
return instance.constructor.options.__file
})
hotReloadAPI(this)
})
}
// Special hot reload with data(context)
function hotReloadAPI (_app) {
if (!module.hot) return
const $nuxt = _app.$nuxt
var _forceUpdate = $nuxt.$forceUpdate.bind($nuxt)
$nuxt.$forceUpdate = function () {
@ -185,7 +188,14 @@ function hotReloadAPI (_app) {
Component._Ctor = Component
}
let promises = []
promises.push(_app.setLayout(Component.options.layout))
// If layout changed
if (_app.layoutName !== Component.options.layout) {
let promise = _app.setLayout(Component.options.layout)
promise.then(() => {
hotReloadAPI(_app)
})
promises.push(promise)
}
const next = function (path) {
<%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %>
router.push(path)
@ -198,12 +208,16 @@ function hotReloadAPI (_app) {
Component._data = Component._Ctor.options.data || noopData
let p = promisify(Component._data, context)
p.then((data) => {
Component.options.data = () => data || {}
Component._cData = () => data || {}
Component.options.data = Component._cData
Component._dataFn = Component.options.data.toString().replace(/\s/g, '')
Component._Ctor.options.data = Component.options.data
<%= (loading ? 'this.$loading.increase && this.$loading.increase(30)' : '') %>
})
promises.push(p)
} else if (Component._cData) {
Component.options.data = Component._cData
Component._Ctor.options.data = Component.options.data
}
// Check if fetch has been updated
const originalFetchFn = (Component.options.fetch || noopFetch).toString().replace(/\s/g, '')
@ -246,7 +260,8 @@ const resolveComponents = flatMapComponents(router.match(path), (Component, _, m
if (Component.options.data && typeof Component.options.data === 'function') {
Component._data = Component.options.data
if (NUXT.serverRendered) {
Component.options.data = () => NUXT.data[index] || {}
Component._cData = () => NUXT.data[index] || {}
Component.options.data = Component._cData
Component._dataFn = Component.options.data.toString().replace(/\s/g, '')
}
if (Component._Ctor && Component._Ctor.options) {
@ -291,7 +306,7 @@ Promise.all(resolveComponents)
_app.$loading = _app.$nuxt.$loading
<% } %>
// Hot reloading
if (module.hot) hotReloadAPI(_app)
hotReloadAPI(_app)
// Call window.onNuxtReady callbacks
Vue.nextTick(() => nuxtReady(_app))
}