feat: allow customisation with options (#57)

closes #43 Co-authored-by: Pooya Parsa <pyapar@gmail.com>
nuxt · Jun 16, 2020 · ee40ac5 · ee40ac5
1 parent f04edfe
commit ee40ac5
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 35 deletions.
diff --git a/packages/loading/app/app.vue b/packages/loading/app/app.vue
@@ -2,14 +2,19 @@
   <div class="loading-screen" :class="{ hide: allDone && !preventReload }">
     <div class="row">
       <transition appear>
-        <svg class="logo" width="220" height="166" xmlns="http://www.w3.org/2000/svg">
-          <g transform="translate(-18 -29)" fill="none" fill-rule="evenodd">
-            <path d="M0 176h67.883a22.32 22.32 0 0 1 2.453-7.296L134 57.718 100.881 0 0 176zM218.694 176H250L167.823 32 153 58.152l62.967 110.579a21.559 21.559 0 0 1 2.727 7.269z" />
-            <path d="M86.066 189.388a8.241 8.241 0 0 1-.443-.908 11.638 11.638 0 0 1-.792-6.566H31.976l78.55-138.174 33.05 58.932L154 94.882l-32.69-58.64C120.683 35.1 116.886 29 110.34 29c-2.959 0-7.198 1.28-10.646 7.335L20.12 176.185c-.676 1.211-3.96 7.568-.7 13.203C20.912 191.95 24.08 195 31.068 195h66.646c-6.942 0-10.156-3.004-11.647-5.612z" fill="#00C58E" />
-            <path d="M235.702 175.491L172.321 62.216c-.655-1.191-4.313-7.216-10.68-7.216-2.868 0-6.977 1.237-10.32 7.193L143 75.706v26.104l18.709-32.31 62.704 111.626h-23.845c.305 1.846.134 3.74-.496 5.498a7.06 7.06 0 0 1-.497 1.122l-.203.413c-3.207 5.543-10.139 5.841-11.494 5.841h37.302c1.378 0 8.287-.298 11.493-5.841 1.423-2.52 2.439-6.758-.97-12.668z" fill="#108775" />
-            <path d="M201.608 189.07l.21-.418c.206-.364.378-.745.515-1.139a10.94 10.94 0 0 0 .515-5.58 16.938 16.938 0 0 0-2.152-5.72l-49.733-87.006L143.5 76h-.136l-7.552 13.207-49.71 87.006a17.534 17.534 0 0 0-1.917 5.72c-.4 2.21-.148 4.486.725 6.557.13.31.278.613.444.906 1.497 2.558 4.677 5.604 11.691 5.604h92.592c1.473 0 8.651-.302 11.971-5.93zm-58.244-86.657l45.455 79.52H97.934l45.43-79.52z" fill="#2F495E" fill-rule="nonzero" />
-          </g>
-        </svg>
+        <template v-if="!options.image">
+          <svg class="logo" width="220" height="166" xmlns="http://www.w3.org/2000/svg">
+            <g transform="translate(-18 -29)" fill="none" fill-rule="evenodd">
+              <path d="M0 176h67.883a22.32 22.32 0 0 1 2.453-7.296L134 57.718 100.881 0 0 176zM218.694 176H250L167.823 32 153 58.152l62.967 110.579a21.559 21.559 0 0 1 2.727 7.269z" />
+              <path d="M86.066 189.388a8.241 8.241 0 0 1-.443-.908 11.638 11.638 0 0 1-.792-6.566H31.976l78.55-138.174 33.05 58.932L154 94.882l-32.69-58.64C120.683 35.1 116.886 29 110.34 29c-2.959 0-7.198 1.28-10.646 7.335L20.12 176.185c-.676 1.211-3.96 7.568-.7 13.203C20.912 191.95 24.08 195 31.068 195h66.646c-6.942 0-10.156-3.004-11.647-5.612z" fill="#00C58E" />
+              <path d="M235.702 175.491L172.321 62.216c-.655-1.191-4.313-7.216-10.68-7.216-2.868 0-6.977 1.237-10.32 7.193L143 75.706v26.104l18.709-32.31 62.704 111.626h-23.845c.305 1.846.134 3.74-.496 5.498a7.06 7.06 0 0 1-.497 1.122l-.203.413c-3.207 5.543-10.139 5.841-11.494 5.841h37.302c1.378 0 8.287-.298 11.493-5.841 1.423-2.52 2.439-6.758-.97-12.668z" fill="#108775" />
+              <path d="M201.608 189.07l.21-.418c.206-.364.378-.745.515-1.139a10.94 10.94 0 0 0 .515-5.58 16.938 16.938 0 0 0-2.152-5.72l-49.733-87.006L143.5 76h-.136l-7.552 13.207-49.71 87.006a17.534 17.534 0 0 0-1.917 5.72c-.4 2.21-.148 4.486.725 6.557.13.31.278.613.444.906 1.497 2.558 4.677 5.604 11.691 5.604h92.592c1.473 0 8.651-.302 11.971-5.93zm-58.244-86.657l45.455 79.52H97.934l45.43-79.52z" fill="#2F495E" fill-rule="nonzero" />
+            </g>
+          </svg>
+        </template>
+        <template v-else>
+          <img :src="options.image" style="max-width: 220px; max-height: 166px;">
+        </template>
       </transition>
     </div>
     <div v-if="!bundles.length && !hasErrors && !preventReload" class="row placeholder">
@@ -51,7 +56,7 @@
       <div v-for="bundle of bundles" :key="bundle" class="row">
         <h3>{{ bundle | capitalize }} bundle</h3>
         <div class="progress_bar_container">
-          <div class="progress_bar" :class="bundle" :style="{ width: `${states[bundle].progress}%` }" />
+          <div class="progress_bar" :class="bundle" :style="{ width: `${states[bundle].progress}%`, backgroundColor: `${options.colors[bundle]}` }" />
         </div>
         <h4>{{ states[bundle].status }}</h4>
       </div>
@@ -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
@@ -10,7 +10,6 @@
   <!-- nuxt_loading_screen -->
   <div id="nuxt_loading_screen"></div>
   <script>window.$STATE = __STATE__</script>
-  <script>window.$BASE_URL = '__BASE_URL__'</script>
-  <script>window.$BASE_URL_ALT = '__BASE_URL_ALT__'</script>
+  <script>window.$OPTIONS = __OPTIONS__</script>
 </body>
 </html>
diff --git 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
@@ -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
@@ -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
@@ -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"