Remove injectAs property, now you only have to export a method which receives the context

This commit is contained in:
Sébastien Chopin 2017-05-21 21:00:41 +02:00
parent e5052c3a87
commit 78cd3bae86
7 changed files with 70 additions and 61 deletions

View File

@ -9,7 +9,9 @@ const noopFetch = () => {}
let _lastPaths = [] let _lastPaths = []
let _lastComponentsFiles = [] let _lastComponentsFiles = []
const { app, router<%= (store ? ', store' : '') %> } = createApp() let app
let router
<%= (store ? 'let store' : '') %>
function mapTransitions(Components, to, from) { function mapTransitions(Components, to, from) {
return Components.map((Component) => { return Components.map((Component) => {
@ -319,25 +321,27 @@ if (!NUXT) {
throw new Error('[nuxt.js] cannot find the global variable __NUXT__, make sure the server is working.') throw new Error('[nuxt.js] cannot find the global variable __NUXT__, make sure the server is working.')
} }
// Get matched components // Get matched components
const path = getLocation(router.options.base) const resolveComponents = function (router) {
const resolveComponents = flatMapComponents(router.match(path), (Component, _, match, key, index) => { const path = getLocation(router.options.base)
if (typeof Component === 'function' && !Component.options) { return flatMapComponents(router.match(path), (Component, _, match, key, index) => {
return new Promise(function (resolve, reject) { if (typeof Component === 'function' && !Component.options) {
const _resolve = (Component) => { return new Promise(function (resolve, reject) {
Component = sanitizeComponent(Component) const _resolve = (Component) => {
if (NUXT.serverRendered) { Component = sanitizeComponent(Component)
applyAsyncData(Component, NUXT.data[index]) if (NUXT.serverRendered) {
applyAsyncData(Component, NUXT.data[index])
}
match.components[key] = Component
resolve(Component)
} }
match.components[key] = Component Component().then(_resolve).catch(reject)
resolve(Component) })
} }
Component().then(_resolve).catch(reject) Component = sanitizeComponent(Component)
}) match.components[key] = Component
} return Component
Component = sanitizeComponent(Component) })
match.components[key] = Component }
return Component
})
function nuxtReady (app) { function nuxtReady (app) {
window._nuxtReadyCbs.forEach((cb) => { window._nuxtReadyCbs.forEach((cb) => {
@ -351,7 +355,13 @@ function nuxtReady (app) {
}) })
} }
Promise.all(resolveComponents) createApp()
.then((__app) => {
app = __app.app
router = __app.router
<%= (store ? 'store = __app.store' : '') %>
return Promise.all(resolveComponents(router))
})
.then((Components) => { .then((Components) => {
const _app = new Vue(app) const _app = new Vue(app)

View File

@ -10,6 +10,8 @@ import NuxtError from '<%= components.ErrorPage ? components.ErrorPage : "./comp
import Nuxt from './components/nuxt.vue' import Nuxt from './components/nuxt.vue'
import App from '<%= appPath %>' import App from '<%= appPath %>'
import { getContext } from './utils'
// Component: <nuxt-child> // Component: <nuxt-child>
Vue.component(NuxtChild.name, NuxtChild) Vue.component(NuxtChild.name, NuxtChild)
// Component: <nuxt-link> // Component: <nuxt-link>
@ -32,12 +34,18 @@ const defaultTransition = <%=
.replace('afterLeave(', 'function(').replace('leaveCancelled(', 'function(') .replace('afterLeave(', 'function(').replace('leaveCancelled(', 'function(')
%> %>
function createApp (ssrContext) { async function createApp (ssrContext) {
<% if (store) { %> <% if (store) { %>
const store = createStore() const store = createStore()
<% } %> <% } %>
const router = createRouter() const router = createRouter()
if (process.server && ssrContext && ssrContext.url) {
await new Promise((resolve, reject) => {
router.push(ssrContext.url, resolve, reject)
})
}
if (process.browser) { if (process.browser) {
<% if (store) { %> <% if (store) { %>
// Replace store state before calling plugins // Replace store state before calling plugins
@ -59,7 +67,6 @@ function createApp (ssrContext) {
let app = { let app = {
router, router,
<%= (store ? 'store,' : '') %> <%= (store ? 'store,' : '') %>
ssrContext,
_nuxt: { _nuxt: {
defaultTransition: defaultTransition, defaultTransition: defaultTransition,
transitions: [ defaultTransition ], transitions: [ defaultTransition ],
@ -95,22 +102,32 @@ function createApp (ssrContext) {
...App ...App
} }
const ctx = getContext({
isServer: !!ssrContext,
isClient: !ssrContext,
route: router.currentRoute,
<%= (store ? 'store,' : '') %>
req: ssrContext ? ssrContext.req : undefined,
res: ssrContext ? ssrContext.res : undefined,
}, app)
delete ctx.redirect
delete ctx.error
// Includes & Inject external plugins // Includes & Inject external plugins
<% plugins.forEach(function (plugin) { <% plugins.forEach(function (plugin) {
if (plugin.ssr) { %> if (plugin.ssr) { %>
<%= (plugin.injectAs ? 'let ' + plugin.injectAs + ' = ' : '') %>require('<%= plugin.src %>') let <%= plugin.name %> = require('<%= plugin.src %>')
<% if (plugin.injectAs) { %> <%= plugin.name %> = <%= plugin.name %>.default || <%= plugin.name %>
<%= plugin.injectAs + ' = ' + plugin.injectAs + '.default || ' + plugin.injectAs %> if (typeof <%= plugin.name %> === 'function') {
app['<%= plugin.injectAs %>'] = <%= plugin.injectAs %> <%= plugin.name %>(ctx)
<% } }
} else { %> <% } else { %>
if (process.browser) { if (process.browser) {
<%= (plugin.injectAs ? 'let ' + plugin.injectAs + ' = ' : '') %>require('<%= plugin.src %>') let <%= plugin.name %> = require('<%= plugin.src %>')
<% if (plugin.injectAs) { %> <%= plugin.name %> = <%= plugin.name %>.default || <%= plugin.name %>
<%= plugin.injectAs + ' = ' + plugin.injectAs + '.default || ' + plugin.injectAs %> if (typeof <%= plugin.name %> === 'function') {
app['<%= plugin.injectAs %>'] = <%= plugin.injectAs %> <%= plugin.name %>(ctx)
<% } %> }
} }
<% } <% }
}) %> }) %>

View File

@ -17,10 +17,12 @@ const isDev = <%= isDev %>
// 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 async (context) => { export default async (context) => {
const { app, router<%= (store ? ', store' : '') %> } = createApp(context) const { app, router<%= (store ? ', store' : '') %> } = await createApp(context)
const _app = new Vue(app) const _app = new Vue(app)
// Add store to the context // Add store to the context
<%= (store ? 'context.store = store' : '') %> <%= (store ? 'context.store = store' : '') %>
// Add route to the context
context.route = router.currentRoute
// Nuxt object // Nuxt object
context.nuxt = { layout: 'default', data: [], error: null<%= (store ? ', state: null' : '') %>, serverRendered: true } context.nuxt = { layout: 'default', data: [], error: null<%= (store ? ', state: null' : '') %>, serverRendered: true }
// create context.next for simulate next() of beforeEach() when wanted to redirect // create context.next for simulate next() of beforeEach() when wanted to redirect
@ -46,7 +48,7 @@ export default async (context) => {
context.error = _app.$options._nuxt.error.bind(_app) context.error = _app.$options._nuxt.error.bind(_app)
<%= (isDev ? 'const s = isDev && Date.now()' : '') %> <%= (isDev ? 'const s = isDev && Date.now()' : '') %>
let ctx = null let ctx = getContext(context, app)
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) => {
@ -61,14 +63,6 @@ export default async (context) => {
// Throw back error to renderRoute() // Throw back error to renderRoute()
throw err throw err
} }
// set router's location
await new Promise((resolve) => {
router.push(context.url, resolve)
})
// Add route to the context
context.route = router.currentRoute
// Update context
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)

View File

@ -58,6 +58,7 @@ export function getContext (context, app) {
isServer: !!context.isServer, isServer: !!context.isServer,
isClient: !!context.isClient, isClient: !!context.isClient,
isDev: <%= isDev %>, isDev: <%= isDev %>,
app: app,
<%= (store ? 'store: context.store,' : '') %> <%= (store ? 'store: context.store,' : '') %>
route: (context.to ? context.to : context.route), route: (context.to ? context.to : context.route),
error: context.error, error: context.error,
@ -84,16 +85,6 @@ export function getContext (context, app) {
} }
if (context.req) ctx.req = context.req if (context.req) ctx.req = context.req
if (context.res) ctx.res = context.res if (context.res) ctx.res = context.res
// Inject external plugins in context
<% plugins.forEach(function (plugin) {
if (plugin.injectAs && plugin.ssr) { %>
ctx['<%= plugin.injectAs %>'] = app['<%= plugin.injectAs %>']
<% } else if (plugin.injectAs) { %>
if (process.browser) {
ctx['<%= plugin.injectAs %>'] = app['<%= plugin.injectAs %>']
}
<% } %>
<% }) %>
return ctx return ctx
} }

View File

@ -181,11 +181,10 @@ async function generateRoutesAndFiles () {
middleware: fs.existsSync(join(this.srcDir, 'middleware')), middleware: fs.existsSync(join(this.srcDir, 'middleware')),
store: this.options.store || fs.existsSync(join(this.srcDir, 'store')), store: this.options.store || fs.existsSync(join(this.srcDir, 'store')),
css: this.options.css, css: this.options.css,
plugins: this.options.plugins.map((p) => { plugins: this.options.plugins.map((p, i) => {
if (typeof p === 'string') { if (typeof p === 'string') p = { src: p }
return { src: r(this.srcDir, p), ssr: true } p.src = r(this.srcDir, p.src)
} return { src: p.src, ssr: (p.ssr !== false), name: `plugin${i}` }
return { src: r(this.srcDir, p.src), ssr: (p.ssr !== false), injectAs: (p.injectAs || false) }
}), }),
appPath: './App.vue', appPath: './App.vue',
layouts: Object.assign({}, this.options.layouts), layouts: Object.assign({}, this.options.layouts),

View File

@ -53,8 +53,7 @@ class Module {
// Add to nuxt plugins // Add to nuxt plugins
this.options.plugins.push({ this.options.plugins.push({
src: '~/.nuxt/' + dst, src: '~/.nuxt/' + dst,
ssr: template.ssr, ssr: template.ssr
injectAs: template.injectAs
}) })
} }

View File

@ -19,7 +19,6 @@ export async function render (req, res) {
if (!this.renderer || !this.appTemplate) { if (!this.renderer || !this.appTemplate) {
return new Promise((resolve) => { return new Promise((resolve) => {
setTimeout(() => { setTimeout(() => {
// debug('Waiting for renderer to be ready')
resolve(this.render(req, res)) resolve(this.render(req, res))
}, 1000) }, 1000)
}) })