From ee40ac52e5f69c3fbfb5515fcf92975bd6b3a30e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C3=A9ter=20Tak=C3=A1cs?= Date: Tue, 16 Jun 2020 16:40:10 +0300 Subject: [PATCH] feat: allow customisation with options (#57) closes #43 Co-authored-by: Pooya Parsa --- packages/loading/app/app.vue | 32 ++++++++++++++++++-------------- packages/loading/app/index.html | 3 +-- packages/loading/lib/loading.js | 15 +++++++-------- packages/loading/lib/module.js | 26 +++++++++++++++----------- packages/loading/package.json | 1 + yarn.lock | 5 +++++ 6 files changed, 47 insertions(+), 35 deletions(-) diff --git a/packages/loading/app/app.vue b/packages/loading/app/app.vue index 232ea9c..d5c1d46 100644 --- a/packages/loading/app/app.vue +++ b/packages/loading/app/app.vue @@ -2,14 +2,19 @@
- + +
@@ -51,7 +56,7 @@

{{ bundle | capitalize }} bundle

-
+

{{ states[bundle].status }}

@@ -92,10 +97,9 @@ export default { maxReloadCount: 5, preventReload: false, manualReload: false, - baseURL: window.$BASE_URL, - baseURLAlt: window.$BASE_URL_ALT, bundles: [], - states: {} + states: {}, + options: window.$OPTIONS || {} } }, @@ -111,7 +115,7 @@ export default { } this.onData(window.$STATE) - this.sseConnect(`${this.baseURLAlt}/sse`) + this.sseConnect(`${this.options.baseURLAlt}/sse`) this.setTimeout() }, @@ -136,7 +140,7 @@ export default { this.clearTimeout() try { - const data = await fetch(`${this.baseURL}/json`).then(res => res.json()) + const data = await fetch(`${this.options.baseURL}/json`).then(res => res.json()) this.onData(data) } catch (e) { this.logError(e) diff --git a/packages/loading/app/index.html b/packages/loading/app/index.html index 17b9c22..e14db0f 100644 --- a/packages/loading/app/index.html +++ b/packages/loading/app/index.html @@ -10,7 +10,6 @@
- - + diff --git a/packages/loading/lib/loading.js b/packages/loading/lib/loading.js index 1bca2e8..de84342 100644 --- a/packages/loading/lib/loading.js +++ b/packages/loading/lib/loading.js @@ -9,9 +9,8 @@ const { parseStack } = require('./utils/error') const SSE = require('./sse') class LoadingUI { - constructor ({ baseURL = '/' } = {}) { - this.baseURL = baseURL - this.baseURLAlt = baseURL + constructor (options) { + this.options = options this._lastBroadcast = 0 @@ -52,7 +51,7 @@ class LoadingUI { } async initAlt ({ url }) { - if (this._server) { + if (this._server || this.options.baseURLAlt) { return } @@ -69,7 +68,7 @@ class LoadingUI { return new Promise((resolve, reject) => { this._server = this.app.listen(port, (err) => { if (err) { return reject(err) } - this.baseURLAlt = `http://localhost:${port}` + this.options.baseURLAlt = `http://localhost:${port}` resolve() }) }) @@ -135,9 +134,9 @@ class LoadingUI { serveIndex (req, res) { const html = this.indexTemplate - .replace(/__STATE__/g, JSON.stringify(this.state)) - .replace(/__BASE_URL__/g, this.baseURL) - .replace(/__BASE_URL_ALT__/g, this.baseURLAlt) + .replace('__STATE__', JSON.stringify(this.state)) + .replace('__OPTIONS__', JSON.stringify(this.options)) + .replace(/__BASE_URL__/g, this.options.baseURL) header(res, 'Content-Type', 'text/html') end(res, html) diff --git a/packages/loading/lib/module.js b/packages/loading/lib/module.js index 9dffaa4..6de168f 100644 --- a/packages/loading/lib/module.js +++ b/packages/loading/lib/module.js @@ -1,29 +1,33 @@ module.exports = function NuxtLoadingScreen () { - const { nuxt } = this - if (!this.options.dev) { return } - const baseURL = nuxt.options.router.base + '_loading' - nuxt.options._loadingScreenBaseURL = baseURL - + const defu = require('defu') const LoadingUI = require('./loading') - const loading = new LoadingUI({ baseURL }) + const { nuxt } = this + + const options = defu(this.options.build.loadingScreen, { + baseURL: nuxt.options.router.base + '_loading', + altPort: !process.env.CODESANDBOX_SSE, + image: undefined, + colors: {} + }) + + nuxt.options._loadingScreenBaseURL = options.baseURL + + const loading = new LoadingUI(options) nuxt.options.serverMiddleware.push({ path: '/_loading', handler: (req, res) => { loading.app(req, res) } }) - if ( - nuxt.options.loading.altPort !== false && - !process.env.CODESANDBOX_SSE - ) { + if (options.altPort !== false) { nuxt.hook('listen', async (_, { url }) => { await loading.initAlt({ url }) - nuxt.options._loadingScreenBaseURL = loading.baseURLAlt + nuxt.options._loadingScreenBaseURL = loading.options.baseURLAlt }) } diff --git a/packages/loading/package.json b/packages/loading/package.json index 2eafea5..11155bd 100644 --- a/packages/loading/package.json +++ b/packages/loading/package.json @@ -10,6 +10,7 @@ ], "dependencies": { "connect": "^3.7.0", + "defu": "^2.0.4", "get-port-please": "^1.0.0", "node-res": "^5.0.1", "serve-static": "^1.14.1" diff --git a/yarn.lock b/yarn.lock index 24d015b..7ac1f2d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4149,6 +4149,11 @@ define-property@^2.0.2: is-descriptor "^1.0.2" isobject "^3.0.1" +defu@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/defu/-/defu-2.0.4.tgz#09659a6e87a8fd7178be13bd43e9357ebf6d1c46" + integrity sha512-G9pEH1UUMxShy6syWk01VQSRVs3CDWtlxtZu7A+NyqjxaCA4gSlWAKDBx6QiUEKezqS8+DUlXLI14Fp05Hmpwg== + del@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"