Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-13 09:33:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'remotes/origin/fix-middleware' into dev

Browse Source 
# Conflicts:
#	lib/app/server.js
#	lib/app/utils.js
#	lib/generate.js
#	yarn.lock
This commit is contained in:
Pooya Parsa 2017-05-15 15:33:52 +04:30
commit 32ac90482e
8 changed files with 6560 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/middleware/middleware/visits.js
View File

@ -1,3 +1,3 @@
export default function ({ store, route }) { export default function ({ store, route, redirect }) {
store.commit('ADD_VISIT', route.path) store.commit('ADD_VISIT', route.path)
} }

50
lib/app/client.js
View File

@ -3,7 +3,7 @@
import Vue from 'vue' import Vue from 'vue'
import middleware from './middleware' import middleware from './middleware'
import { createApp, NuxtError } from './index' import { createApp, NuxtError } from './index'
import { applyAsyncData, getMatchedComponents, getMatchedComponentsInstances, flatMapComponents, getContext, promiseSeries, promisify, getLocation, compile } from './utils' import { applyAsyncData, getMatchedComponents, getMatchedComponentsInstances, flatMapComponents, getContext, middlewareSeries, promisify, getLocation, compile } from './utils'
const noopData = () => { return {} } const noopData = () => { return {} }
const noopFetch = () => {} const noopFetch = () => {}
let _lastPaths = [] let _lastPaths = []
@ -79,13 +79,16 @@ function callMiddleware (Components, context, layout) {
return middleware[name] return middleware[name]
}) })
if (unknownMiddleware) return if (unknownMiddleware) return
return promiseSeries(midd, context) return middlewareSeries(midd, context)
} }
function render (to, from, next) { async function render (to, from, next) {
if (this._hashChanged) return next() if (this._hashChanged) return next()
let layout
let nextCalled = false
const _next = function (path) { const _next = function (path) {
<%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %> <%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %>
if (nextCalled) return
nextCalled = true nextCalled = true
next(path) next(path)
} }
@ -96,14 +99,13 @@ function render (to, from, next) {
this._hadError = !!this.$options._nuxt.err this._hadError = !!this.$options._nuxt.err
if (!Components.length) { if (!Components.length) {
// Default layout // Default layout
callMiddleware.call(this, Components, context) await callMiddleware.call(this, Components, context)
.then(() => this.loadLayout(typeof NuxtError.layout === 'function' ? NuxtError.layout(context) : NuxtError.layout)) if (context._redirected) return
.then(callMiddleware.bind(this, Components, context)) layout = await this.loadLayout(typeof NuxtError.layout === 'function' ? NuxtError.layout(context) : NuxtError.layout)
.then(() => { await callMiddleware.call(this, Components, context, layout)
this.error({ statusCode: 404, message: 'This page could not be found.' }) if (context._redirected) return
return next() this.error({ statusCode: 404, message: 'This page could not be found.' })
}) return next()
return
} }
// Update ._data and other properties if hot reloaded // Update ._data and other properties if hot reloaded
Components.forEach(function (Component) { Components.forEach(function (Component) {
@ -113,18 +115,17 @@ function render (to, from, next) {
} }
}) })
this.setTransitions(mapTransitions(Components, to, from)) this.setTransitions(mapTransitions(Components, to, from))
let nextCalled = false try {
// Set layout // Set layout
callMiddleware.call(this, Components, context) await callMiddleware.call(this, Components, context)
.then(() => { if (context._redirected) return
let layout = Components[0].options.layout layout = Components[0].options.layout
if (typeof layout === 'function') { if (typeof layout === 'function') {
layout = layout(context) layout = layout(context)
} }
return this.loadLayout(layout) layout = await this.loadLayout(layout)
}) await callMiddleware.call(this, Components, context, layout)
.then(callMiddleware.bind(this, Components, context)) if (context._redirected) return
.then(() => {
// Pass validation? // Pass validation?
let isValid = true let isValid = true
Components.forEach((Component) => { Components.forEach((Component) => {
@ -139,7 +140,7 @@ function render (to, from, next) {
this.error({ statusCode: 404, message: 'This page could not be found.' }) this.error({ statusCode: 404, message: 'This page could not be found.' })
return next() return next()
} }
return Promise.all(Components.map((Component, i) => { await Promise.all(Components.map((Component, i) => {
// Check if only children route changed // Check if only children route changed
Component._path = compile(to.matched[i].path)(to.params) Component._path = compile(to.matched[i].path)(to.params)
if (!this._hadError && Component._path === _lastPaths[i] && (i + 1) !== Components.length) { if (!this._hadError && Component._path === _lastPaths[i] && (i + 1) !== Components.length) {
@ -163,16 +164,13 @@ function render (to, from, next) {
} }
return Promise.all(promises) return Promise.all(promises)
})) }))
})
.then(() => {
_lastPaths = Components.map((Component, i) => compile(to.matched[i].path)(to.params)) _lastPaths = Components.map((Component, i) => compile(to.matched[i].path)(to.params))
<%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %> <%= (loading ? 'this.$loading.finish && this.$loading.finish()' : '') %>
// If not redirected // If not redirected
if (!nextCalled) { if (!nextCalled) {
next() next()
} }
}) } catch (error) {
.catch((error) => {
_lastPaths = [] _lastPaths = []
error.statusCode = error.statusCode || error.status || (error.response && error.response.status) || 500 error.statusCode = error.statusCode || error.status || (error.response && error.response.status) || 500
let layout = NuxtError.layout let layout = NuxtError.layout
@ -184,7 +182,7 @@ function render (to, from, next) {
this.error(error) this.error(error)
next(false) next(false)
}) })
}) }
} }
// Fix components format in matched, it's due to code-splitting of vue-router // Fix components format in matched, it's due to code-splitting of vue-router

290
lib/app/server.js
View File

@ -1,14 +1,13 @@
'use strict' 'use strict'
const debug = require('debug')('nuxt:render')
debug.color = 4 // force blue color
import Vue from 'vue' import Vue from 'vue'
import { stringify } from 'querystring' import { stringify } from 'querystring'
import { omit } from 'lodash' import { omit } from 'lodash'
import middleware from './middleware' import middleware from './middleware'
import { createApp, NuxtError } from './index' import { createApp, NuxtError } from './index'
import { applyAsyncData, getMatchedComponents, getContext, promiseSeries, promisify, urlJoin } from './utils' import { applyAsyncData, sanitizeComponent, getMatchedComponents, getContext, middlewareSeries, promisify, urlJoin } from './utils'
const debug = require('debug')('nuxt:render')
debug.color = 4 // force blue color
const isDev = <%= isDev %> const isDev = <%= isDev %>
@ -17,7 +16,7 @@ const isDev = <%= isDev %>
// state of our application before actually rendering it. // state of our application before actually rendering it.
// Since data fetching is async, this function is expected to // Since data fetching is async, this function is expected to
// return a Promise that resolves to the app instance. // return a Promise that resolves to the app instance.
export default context => { export default async (context) => {
const { app, router<%= (store ? ', store' : '') %> } = createApp(context) const { app, router<%= (store ? ', store' : '') %> } = createApp(context)
const _app = new Vue(app) const _app = new Vue(app)
// Add store to the context // Add store to the context
@ -48,180 +47,137 @@ export default context => {
<%= (isDev ? 'const s = isDev && Date.now()' : '') %> <%= (isDev ? 'const s = isDev && Date.now()' : '') %>
let ctx = null let ctx = null
let componentsLoaded = false
let Components = [] let Components = []
let promises = getMatchedComponents(router.match(context.url)).map((Component) => { let promises = getMatchedComponents(router.match(context.url)).map((Component) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const _resolve = (Component) => { const _resolve = (Component) => resolve(sanitizeComponent(Component))
if (!Component.options) {
Component = Vue.extend(Component) // fix issue #6
Component._Ctor = Component
} else {
Component._Ctor = Component
Component.extendOptions = Component.options
}
// For debugging purpose
if (!Component.options.name && Component.options.__file) {
Component.options.name = Component.options.__file
}
resolve(Component)
}
Component().then(_resolve).catch(reject) Component().then(_resolve).catch(reject)
}) })
}) })
return Promise.all(promises) try {
.then((_Components) => { Components = await Promise.all(promises)
componentsLoaded = true } catch (err) {
Components = _Components // Throw back error to renderRoute()
// set router's location throw err
return new Promise((resolve) => { }
router.push(context.url, resolve) // set router's location
}) await new Promise((resolve) => {
router.push(context.url, resolve)
}) })
.then(() => { // Add route to the context
// Add route to the context context.route = router.currentRoute
context.route = router.currentRoute // Update context
// Update context ctx = getContext(context, app)
ctx = getContext(context, app) // nuxtServerInit
// nuxtServerInit <% if (store) { %>
<% if (store) { %> let promise = (store._actions && store._actions.nuxtServerInit ? store.dispatch('nuxtServerInit', omit(getContext(context, app), 'redirect', 'error')) : null)
let promise = (store._actions && store._actions.nuxtServerInit ? store.dispatch('nuxtServerInit', omit(getContext(context, app), 'redirect', 'error')) : null) if (!promise || (!(promise instanceof Promise) && (typeof promise.then !== 'function'))) promise = Promise.resolve()
if (!promise || (!(promise instanceof Promise) && (typeof promise.then !== 'function'))) promise = Promise.resolve() <% } else { %>
<% } else { %> let promise = Promise.resolve()
let promise = Promise.resolve() <% } %>
<% } %> await promise
return promise // Call global middleware (nuxt.config.js)
}) let midd = <%= serialize(router.middleware, { isJSON: true }) %>
.then(() => { midd = midd.map((name) => {
// Sanitize Components if (typeof middleware[name] !== 'function') {
Components = Components.map((Component) => { context.nuxt.error = context.error({ statusCode: 500, message: 'Unknown middleware ' + name })
let promises = []
if (!Component.options) {
Component = Vue.extend(Component)
Component._Ctor = Component
} else {
Component._Ctor = Component
Component.extendOptions = Component.options
}
return Component
})
// Call global middleware (nuxt.config.js)
let midd = <%= serialize(router.middleware, { isJSON: true }) %>
midd = midd.map((name) => {
if (typeof middleware[name] !== 'function') {
context.nuxt.error = context.error({ statusCode: 500, message: 'Unknown middleware ' + name })
}
return middleware[name]
})
if (context.nuxt.error) return
return promiseSeries(midd, ctx)
})
.then(() => {
// Set layout
let layout = Components.length ? Components[0].options.layout : NuxtError.layout
if (typeof layout === 'function') {
layout = layout(ctx)
} }
return _app.loadLayout(layout).then(() => _app.setLayout(layout)) return middleware[name]
}) })
.then((layout) => { if (!context.nuxt.error) {
// Set layout to __NUXT__ await middlewareSeries(midd, ctx)
context.nuxt.layout = _app.layoutName }
// Call middleware (layout + pages) if (context.redirected) return _app
let midd = [] // Set layout
if (layout.middleware) { let layout = Components.length ? Components[0].options.layout : NuxtError.layout
midd = midd.concat(layout.middleware) if (typeof layout === 'function') layout = layout(ctx)
await _app.loadLayout(layout)
layout = _app.setLayout(layout)
// Set layout to __NUXT__
context.nuxt.layout = _app.layoutName
// Call middleware (layout + pages)
midd = []
if (layout.middleware) midd = midd.concat(layout.middleware)
Components.forEach((Component) => {
if (Component.options.middleware) {
midd = midd.concat(Component.options.middleware)
} }
Components.forEach((Component) => {
if (Component.options.middleware) {
midd = midd.concat(Component.options.middleware)
}
})
midd = midd.map((name) => {
if (typeof middleware[name] !== 'function') {
context.nuxt.error = context.error({ statusCode: 500, message: 'Unknown middleware ' + name })
}
return middleware[name]
})
if (context.nuxt.error) return
return promiseSeries(midd, ctx)
}) })
.then(() => { midd = midd.map((name) => {
// Call .validate() if (typeof middleware[name] !== 'function') {
let isValid = true context.nuxt.error = context.error({ statusCode: 500, message: 'Unknown middleware ' + name })
Components.forEach((Component) => { }
if (!isValid) return return middleware[name]
if (typeof Component.options.validate !== 'function') return })
isValid = Component.options.validate({ if (!context.nuxt.error) {
params: context.route.params || {}, await middlewareSeries(midd, ctx)
query: context.route.query || {}<%= (store ? ', store: ctx.store' : '') %> }
if (context.redirected) return _app
// Call .validate()
let isValid = true
Components.forEach((Component) => {
if (!isValid) return
if (typeof Component.options.validate !== 'function') return
isValid = Component.options.validate({
params: context.route.params || {},
query: context.route.query || {}<%= (store ? ', store: ctx.store' : '') %>
})
})
// If .validate() returned false
if (!isValid) {
// Don't server-render the page in generate mode
if (context._generate) {
context.nuxt.serverRendered = false
}
// Call the 404 error by making the Components array empty
Components = []
}
// Call asyncData & fetch hooks on components matched by the route.
let asyncDatas = await Promise.all(Components.map((Component) => {
let promises = []
if (Component.options.asyncData && typeof Component.options.asyncData === 'function') {
let promise = promisify(Component.options.asyncData, ctx)
// Call asyncData(context)
promise.then((asyncDataResult) => {
applyAsyncData(Component, asyncDataResult)
return asyncDataResult
}) })
}) promises.push(promise)
if (!isValid) { } else promises.push(null)
// Don't server-render the page in generate mode // call fetch(context)
if (context._generate) { if (Component.options.fetch) promises.push(Component.options.fetch(ctx))
context.nuxt.serverRendered = false else promises.push(null)
} return Promise.all(promises)
// Call the 404 error by making the Components array empty }))
Components = [] // If no Components found, returns 404
return _app if (!Components.length) {
} context.nuxt.error = context.error({ statusCode: 404, message: 'This page could not be found.' })
// Call asyncData & fetch hooks on components matched by the route. }
return Promise.all(Components.map((Component) => { <% if (isDev) { %>
let promises = [] if (asyncDatas.length) debug('Data fetching ' + context.url + ': ' + (Date.now() - s) + 'ms')
if (Component.options.asyncData && typeof Component.options.asyncData === 'function') { <% } %>
let promise = promisify(Component.options.asyncData, ctx) // datas are the first row of each
// Call asyncData(context) context.nuxt.data = asyncDatas.map((r) => (r[0] || {}))
promise.then((asyncDataResult) => { // If an error occured in the execution
applyAsyncData(Component, asyncDataResult) if (_app.$options._nuxt.err) {
return asyncDataResult
})
promises.push(promise)
} else {
promises.push(null)
}
if (Component.options.fetch) {
promises.push(Component.options.fetch(ctx))
} else {
promises.push(null)
}
return Promise.all(promises)
}))
})
.then((res) => {
if (!Components.length) {
context.nuxt.error = context.error({ statusCode: 404, message: 'This page could not be found.' })
<%= (store ? 'context.nuxt.state = store.state' : '') %>
return _app
}
<% if (isDev) { %>
debug('Data fetching ' + context.url + ': ' + (Date.now() - s) + 'ms')
<% } %>
// datas are the first row of each
context.nuxt.data = res.map((r) => (r[0] || {}))
context.nuxt.error = _app.$options._nuxt.err context.nuxt.error = _app.$options._nuxt.err
<%= (store ? '// Add the state from the vuex store' : '') %> }
<%= (store ? 'context.nuxt.state = store.state' : '') %> <%= (store ? '// Add the state from the vuex store' : '') %>
// If no error, return main app <%= (store ? 'context.nuxt.state = store.state' : '') %>
if (!context.nuxt.error) { // If no error, return main app
return _app if (!context.nuxt.error) {
}
// Load layout for error page
let layout = (typeof NuxtError.layout === 'function' ? NuxtError.layout(ctx) : NuxtError.layout)
context.nuxt.layout = layout || ''
return _app.loadLayout(layout)
.then(() => _app.setLayout(layout))
.then(() => _app)
})
.catch(function (error) {
if (error instanceof Error || error.constructor.toString().indexOf('Error()') !== -1) {
return Promise.reject(error)
}
if (typeof error === 'string') {
error = { statusCode: 500, message: error }
}
context.nuxt.error = context.error(error)
<%= (store ? 'context.nuxt.state = store.state' : '') %>
return _app return _app
}) }
// Load layout for error page
layout = (typeof NuxtError.layout === 'function' ? NuxtError.layout(ctx) : NuxtError.layout)
context.nuxt.layout = layout || ''
await _app.loadLayout(layout)
_app.setLayout(layout)
return _app
// if (typeof error === 'string') {
// error = { statusCode: 500, message: error }
// }
// context.nuxt.error = context.error(error)
// <%= (store ? 'context.nuxt.state = store.state' : '') %>
// return _app
} }

23
lib/app/utils.js
View File

@ -1,4 +1,6 @@
'use strict' 'use strict'
import Vue from 'vue'
const noopData = () => ({}) const noopData = () => ({})
export function applyAsyncData (Component, asyncData = {}) { export function applyAsyncData (Component, asyncData = {}) {
@ -12,6 +14,21 @@ export function applyAsyncData (Component, asyncData = {}) {
} }
} }
export function sanitizeComponent (Component) {
if (!Component.options) {
Component = Vue.extend(Component) // fix issue #6
Component._Ctor = Component
} else {
Component._Ctor = Component
Component.extendOptions = Component.options
}
// For debugging purpose
if (!Component.options.name && Component.options.__file) {
Component.options.name = Component.options.__file
}
return Component
}
export function getMatchedComponents (route) { export function getMatchedComponents (route) {
return [].concat.apply([], route.matched.map(function (m) { return [].concat.apply([], route.matched.map(function (m) {
return Object.keys(m.components).map(function (key) { return Object.keys(m.components).map(function (key) {
@ -52,7 +69,7 @@ export function getContext (context, app) {
ctx.query = ctx.route.query || {} ctx.query = ctx.route.query || {}
ctx.redirect = function (status, path, query) { ctx.redirect = function (status, path, query) {
if (!status) return if (!status) return
ctx._redirected = true ctx._redirected = true // Used in middleware
// if only 1 or 2 arguments: redirect('/') or redirect('/', { foo: 'bar' }) // if only 1 or 2 arguments: redirect('/') or redirect('/', { foo: 'bar' })
if (typeof status === 'string' && (typeof path === 'undefined' || typeof path === 'object')) { if (typeof status === 'string' && (typeof path === 'undefined' || typeof path === 'object')) {
query = path || {} query = path || {}
@ -80,13 +97,13 @@ export function getContext (context, app) {
return ctx return ctx
} }
export function promiseSeries (promises, context) { export function middlewareSeries (promises, context) {
if (!promises.length || context._redirected) { if (!promises.length || context._redirected) {
return Promise.resolve() return Promise.resolve()
} }
return promisify(promises[0], context) return promisify(promises[0], context)
.then(() => { .then(() => {
return promiseSeries(promises.slice(1), context) return middlewareSeries(promises.slice(1), context)
}) })
} }

2
package.json
View File

@ -53,7 +53,7 @@
}, },
"dependencies": { "dependencies": {
"ansi-html": "^0.0.7", "ansi-html": "^0.0.7",
"autoprefixer": "^6.7.7", "autoprefixer": "^7.0.1",
"babel-core": "^6.24.1", "babel-core": "^6.24.1",
"babel-loader": "^7.0.0", "babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1", "babel-preset-es2015": "^6.24.1",

3
test/fixtures/with-config/nuxt.config.js vendored
View File

@ -23,6 +23,7 @@ module.exports = {
string: 'Nuxt.js' string: 'Nuxt.js'
}, },
build: { build: {
extractCSS: true,
publicPath: '/orion/', publicPath: '/orion/',
analyze: { analyze: {
analyzerMode: 'disabled', analyzerMode: 'disabled',
@ -33,6 +34,6 @@ module.exports = {
} }
}, },
css: [ css: [
{src: '~/assets/app.css'} { src: '~/assets/app.css' }
] ]
} }

2
test/with-config.test.js
View File

@ -87,7 +87,7 @@ test('/test/about-bis (added with extendRoutes)', async t => {
test('Check stats.json generated by build.analyze', t => { test('Check stats.json generated by build.analyze', t => {
const stats = require(resolve(__dirname, 'fixtures/with-config/.nuxt/dist/stats.json')) const stats = require(resolve(__dirname, 'fixtures/with-config/.nuxt/dist/stats.json'))
t.is(stats.assets.length, 27) t.is(stats.assets.length, 29)
}) })
// Close server and ask nuxt to stop listening to file changes // Close server and ask nuxt to stop listening to file changes

6388
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff