From ef41e205e6787b784ab5907d99652b9d74891c6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Wed, 20 Mar 2019 10:17:53 +0100 Subject: [PATCH] feat: loading screen (#5251) [release] --- distributions/nuxt/package.json | 1 + packages/cli/src/commands/dev.js | 26 ++--- packages/cli/src/utils/formatting.js | 2 +- packages/cli/test/unit/dev.test.js | 2 +- packages/config/src/options.js | 5 + packages/server/src/middleware/nuxt.js | 7 ++ packages/server/src/server.js | 1 + packages/vue-app/template/pages/index.vue | 86 ++------------- .../vue-app/template/views/loading/nuxt.html | 100 +++++++----------- packages/vue-renderer/src/renderer.js | 72 ++++++++----- packages/webpack/src/config/base.js | 3 + test/unit/basic.dev.test.js | 8 +- test/unit/renderer.test.js | 21 ++-- yarn.lock | 12 ++- 14 files changed, 156 insertions(+), 190 deletions(-) diff --git a/distributions/nuxt/package.json b/distributions/nuxt/package.json index ce3649b9c9..fd5c0300a6 100644 --- a/distributions/nuxt/package.json +++ b/distributions/nuxt/package.json @@ -58,6 +58,7 @@ "@nuxt/cli": "2.4.5", "@nuxt/core": "2.4.5", "@nuxt/generator": "2.4.5", + "@nuxt/loading-screen": "^0.0.2", "@nuxt/opencollective": "^0.2.1", "@nuxt/webpack": "2.4.5" }, diff --git a/packages/cli/src/commands/dev.js b/packages/cli/src/commands/dev.js index 4cfe5d7838..55622fbc33 100644 --- a/packages/cli/src/commands/dev.js +++ b/packages/cli/src/commands/dev.js @@ -20,13 +20,8 @@ export default { async run(cmd) { const { argv } = cmd - const nuxt = await this.startDev(cmd, argv) - // Opens the server listeners url in the default browser - if (argv.open) { - const openerPromises = nuxt.server.listeners.map(listener => opener(listener.url)) - await Promise.all(openerPromises) - } + await this.startDev(cmd, argv, argv.open) }, async startDev(cmd, argv) { @@ -47,21 +42,28 @@ export default { nuxt.hook('watch:restart', payload => this.onWatchRestart(payload, { nuxt, builder, cmd, argv })) nuxt.hook('bundler:change', changedFileName => this.onBundlerChange(changedFileName)) - // Create builder instance - const builder = await cmd.getBuilder(nuxt) - // Wait for nuxt to be ready await nuxt.ready() // Start listening await nuxt.server.listen() + // Show banner when listening + showBanner(nuxt) + + // Opens the server listeners url in the default browser (only once) + if (argv.open) { + argv.open = false + const openerPromises = nuxt.server.listeners.map(listener => opener(listener.url)) + await Promise.all(openerPromises) + } + + // Create builder instance + const builder = await cmd.getBuilder(nuxt) + // Start Build await builder.build() - // Show banner after build - showBanner(nuxt) - // Return instance return nuxt }, diff --git a/packages/cli/src/utils/formatting.js b/packages/cli/src/utils/formatting.js index 59f91184b1..e3197fb580 100644 --- a/packages/cli/src/utils/formatting.js +++ b/packages/cli/src/utils/formatting.js @@ -30,7 +30,7 @@ export function colorize(text) { .replace(/\[[^ ]+]/g, m => chalk.grey(m)) .replace(/<[^ ]+>/g, m => chalk.green(m)) .replace(/ (-[-\w,]+)/g, m => chalk.bold(m)) - .replace(/`(.+)`/g, (_, m) => chalk.bold.cyan(m)) + .replace(/`([^`]+)`/g, (_, m) => chalk.bold.cyan(m)) } export function box(message, title, options) { diff --git a/packages/cli/test/unit/dev.test.js b/packages/cli/test/unit/dev.test.js index 5faafeab17..e0b135160a 100644 --- a/packages/cli/test/unit/dev.test.js +++ b/packages/cli/test/unit/dev.test.js @@ -51,7 +51,7 @@ describe('dev', () => { // Test error on second build so we cover oldInstance stuff const builder = new Builder() builder.nuxt = new Nuxt() - Builder.prototype.build = jest.fn().mockImplementationOnce(() => Promise.reject(new Error('Build Error'))) + Builder.prototype.build = () => { throw new Error('Build Error') } await Nuxt.fileRestartHook(builder) expect(Nuxt.prototype.close).toHaveBeenCalled() diff --git a/packages/config/src/options.js b/packages/config/src/options.js index 896d40e7e1..e5da7d33d6 100644 --- a/packages/config/src/options.js +++ b/packages/config/src/options.js @@ -330,5 +330,10 @@ export function getNuxtConfig(_options) { bundleRenderer.runInNewContext = options.dev } + // Add loading screen + if (options.dev) { + options.devModules.push('@nuxt/loading-screen') + } + return options } diff --git a/packages/server/src/middleware/nuxt.js b/packages/server/src/middleware/nuxt.js index e12194a880..b430d3e946 100644 --- a/packages/server/src/middleware/nuxt.js +++ b/packages/server/src/middleware/nuxt.js @@ -12,6 +12,13 @@ export default ({ options, nuxt, renderRoute, resources }) => async function nux const url = decodeURI(req.url) res.statusCode = 200 const result = await renderRoute(url, context) + + // If result is falsy, call renderLoading + if (!result) { + await nuxt.callHook('server:nuxt:renderLoading', req, res) + return + } + await nuxt.callHook('render:route', url, result, context) const { html, diff --git a/packages/server/src/server.js b/packages/server/src/server.js index 5e57cbba96..e937f00fb1 100644 --- a/packages/server/src/server.js +++ b/packages/server/src/server.js @@ -115,6 +115,7 @@ export default class Server { context: this.renderer.context })) + // Dev middleware if (this.options.dev) { this.useMiddleware((req, res, next) => { if (!this.devMiddleware) { diff --git a/packages/vue-app/template/pages/index.vue b/packages/vue-app/template/pages/index.vue index 89c43d9d3c..c2d3284bed 100644 --- a/packages/vue-app/template/pages/index.vue +++ b/packages/vue-app/template/pages/index.vue @@ -2,15 +2,16 @@
-

The Vue Framework

+

The Vue.js Framework

Get Started @@ -85,75 +86,6 @@ } } - .VueToNuxtLogo { - display: inline-block; - animation: turn 2s linear forwards; - transform: rotateX(180deg); - position: relative; - overflow: hidden; - height: 180px; - width: 245px; - } - - .Triangle { - position: absolute; - top: 0; - left: 0; - width: 0; - height: 0; - } - - .Triangle--one { - border-left: 105px solid transparent; - border-right: 105px solid transparent; - border-bottom: 180px solid #41B883; - } - - .Triangle--two { - top: 30px; - left: 35px; - animation: goright 0.5s linear forwards 2.5s; - border-left: 87.5px solid transparent; - border-right: 87.5px solid transparent; - border-bottom: 150px solid #3B8070; - } - - .Triangle--three { - top: 60px; - left: 35px; - animation: goright 0.5s linear forwards 2.5s; - border-left: 70px solid transparent; - border-right: 70px solid transparent; - border-bottom: 120px solid #35495E; - } - - .Triangle--four { - top: 120px; - left: 70px; - animation: godown 0.5s linear forwards 2s; - border-left: 35px solid transparent; - border-right: 35px solid transparent; - border-bottom: 60px solid #fff; - } - - @keyframes turn { - 100% { - transform: rotateX(0deg); - } - } - - @keyframes godown { - 100% { - top: 180px; - } - } - - @keyframes goright { - 100% { - left: 70px; - } - } - .button { font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; position: relative; diff --git a/packages/vue-app/template/views/loading/nuxt.html b/packages/vue-app/template/views/loading/nuxt.html index 7611527be7..90fa8ce93f 100644 --- a/packages/vue-app/template/views/loading/nuxt.html +++ b/packages/vue-app/template/views/loading/nuxt.html @@ -1,6 +1,6 @@ -