modern static for redirect is great now

This commit is contained in:
Sébastien Chopin 2016-11-11 01:11:21 +01:00
parent 5b0ff5617b
commit 78aabe480f
6 changed files with 43 additions and 26 deletions

View File

@ -1,5 +1,5 @@
<template>
<div id="app">
<div id="__nuxt">
<% if (loading) { %><nuxt-loading ref="loading"></nuxt-loading><% } %>
<router-view v-if="!err"></router-view>
<nuxt-error v-if="err" :error="err"></nuxt-error>
@ -17,6 +17,9 @@ export default {
}
},
<% if (loading) { %>
created () {
this.$loading = {} // for NUXT.serverRendered = false
},
mounted () {
this.$loading = this.$refs.loading
},

View File

@ -8,7 +8,7 @@ import { getMatchedComponents, flatMapComponents, getContext, getLocation } from
const noopData = () => { return {} }
const noopFetch = () => {}
function loadAsyncComponents (to, from, next) {
function loadAsyncComponents (to, ___, next) {
const resolveComponents = flatMapComponents(to, (Component, _, match, key) => {
if (typeof Component === 'function' && !Component.options) {
return new Promise(function (resolve, reject) {
@ -32,7 +32,7 @@ function loadAsyncComponents (to, from, next) {
})
}
function render (to, from, next) {
function render (to, ___, next) {
let Components = getMatchedComponents(to)
if (!Components.length) {
this.error({ statusCode: 404, message: 'This page could not be found.', url: to.path })
@ -162,7 +162,9 @@ const resolveComponents = flatMapComponents(router.match(path), (Component, _, m
const _resolve = (Component) => {
if (Component.data && typeof Component.data === 'function') {
Component._data = Component.data
Component.data = () => NUXT.data[index]
if (NUXT.serverRendered) {
Component.data = () => NUXT.data[index]
}
if (Component._Ctor && Component._Ctor.options) {
Component._Ctor.options.data = Component.data
}
@ -179,16 +181,34 @@ const resolveComponents = flatMapComponents(router.match(path), (Component, _, m
Promise.all(resolveComponents)
.then((Components) => {
const _app = new Vue(app)
const mountApp = () => _app.$mount('#__nuxt')
const onNuxtReady = window.onNuxtReady || function () {}
if (NUXT.error) _app.error(NUXT.error)
if (module.hot) hotReloadAPI(_app)
_app.$mount('#app')
// Add router hooks
router.beforeEach(loadAsyncComponents.bind(_app))
router.beforeEach(render.bind(_app))
// Call window.onModulesLoaded for jsdom testing (https://github.com/tmpvar/jsdom#dealing-with-asynchronous-script-loading)
if (typeof window.onNuxtReady === 'function') {
window.onNuxtReady(_app)
if (NUXT.serverRendered) {
mountApp()
// Call window.onModulesLoaded for jsdom testing (https://github.com/tmpvar/jsdom#dealing-with-asynchronous-script-loading)
onNuxtReady(_app)
return
}
render.call(_app, router.currentRoute, router.currentRoute, function (path) {
if (path) {
let mounted = false
router.afterEach(function () {
if (mounted) return
mounted = true
mountApp()
onNuxtReady(_app)
})
router.push(path)
return
}
mountApp()
onNuxtReady(_app)
})
})
.catch((err) => {
console.error('[nuxt.js] Cannot load components', err)

View File

@ -19,6 +19,10 @@ router.history.base = '<%= router.base %>'
// Since data fetching is async, this function is expected to
// return a Promise that resolves to the app instance.
export default context => {
// Add store to the context
<%= (store ? 'context.store = store' : '') %>
// Nuxt object
context.nuxt = { data: [], error: null<%= (store ? ', state: null' : '') %>, serverRendered: true }
// create context.next for simulate next() of beforeEach() when wanted to redirect
context.redirected = false
context.next = function (path) {
@ -29,6 +33,7 @@ export default context => {
path.path = urlJoin('<%= router.base %>', path.path)
if (!context.res) {
context.redirected = path.path
context.nuxt.serverRendered = false
return
}
context.res.writeHead(302, {
@ -42,11 +47,6 @@ export default context => {
context.route = router.currentRoute
// Add meta infos
context.meta = _app.$meta()
// Add store to the context
<%= (store ? 'context.store = store' : '') %>
// Nuxt object
context.nuxt = { data: [], error: null<%= (store ? ', state: null' : '') %> }
<%= (isDev ? 'const s = isDev && Date.now()' : '') %>
// Call data & fecth hooks on components matched by the route.

View File

@ -137,15 +137,17 @@ class Nuxt {
// Call rendertoSting from the bundleRenderer and generate the HTML (will update the context as well)
const self = this
return co(function * () {
const app = yield self.renderToString(context)
let app = yield self.renderToString(context)
if (context.nuxt && context.nuxt.error instanceof Error) {
context.nuxt.error = { statusCode: 500, message: context.nuxt.error.message }
}
if (context.redirected) {
app = '<div id="__nuxt"></div>'
}
const html = self.appTemplate({
dev: self.dev, // Use to add the extracted CSS <link> in production
baseUrl: (self.options.router.base !== '/' ? self.options.router.base : null),
baseUrl: self.options.router.base,
APP: app,
redirected: context.redirected,
context: context,
files: {
css: urlJoin(self.options.router.base, '/_nuxt/', self.options.build.filenames.css),

View File

@ -8,21 +8,13 @@
<html>
<head>
${title.toString()}
<% if (baseUrl) { %><base href="<%= baseUrl %>"><% } %>
<base href="<%= baseUrl %>">
<% if (!dev) { %><link rel="stylesheet" href="<%= files.css %>"><% } %>
<% if (redirected) { %>
<meta http-equiv="refresh" content="0; url=<%= redirected %>" />
<script type="text/javascript">
window.location.href = '<%= redirected %>'
</script>
<% } %>
</head>
<body>
<% if (!redirected) { %>
<%= APP %>
<script type="text/javascript" defer>window.__NUXT__=<%= serialize(context.nuxt) %></script>
<script src="<%= files.vendor %>" defer></script>
<script src="<%= files.app %>" defer></script>
<% } %>
</body>
</html>

View File

@ -1,6 +1,6 @@
{
"name": "nuxt",
"version": "0.3.6",
"version": "0.3.7",
"description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
"main": "index.js",
"license": "MIT",