feat: support show percent while loading app (#6)

* fix: should be `development` mode by default * chore(readme): tweak * feat: support show percent while loading app close #3

Author: 2nthony

README.md

@@ -82,7 +82,7 @@ Or with regular HTML:
 
 ```js
 new LoadingScreenPlugin({
- logo: '<svg xmlns>...</svg>'
+ logo: '<div>my logo</div>'
 })
 ```
 
@@ -122,6 +122,11 @@ Progress hooks report details.
 
 Reference: https://webpack.js.org/plugins/progress-plugin/
 
+### showPercent
+
+- Type: `boolean`
+- Default: `true`
+
 ## Credits
 
 - [**nuxt/loading-screen**](https://github.com/nuxt/loading-screen)

app/app.vue

@@ -23,7 +23,10 @@
  <div class="progress_bar_container">
  <div class="progress_bar" :style="{ width: `${states[bundle].progress}%`, backgroundColor: theme[bundle] }" />
  </div>
- <h4>{{ states[bundle].status }}</h4>
+ <div class="progress_status_container">
+ <h4>{{ states[bundle].status }}</h4>
+ <h4 v-if="theme.showPercent">{{ states[bundle].progress }}%</h4>
+ </div>
  </div>
  </transition-group>
  </div>

app/css/loading.css

@@ -76,3 +76,8 @@ h4 {
  width: 10px;
  transition: width 0.4s;
 }
+
+.progress_status_container {
+ display: flex;
+ justify-content: space-between;
+}

lib/loading.js

@@ -12,7 +12,9 @@ class LoadingUI {
  this.baseURL = opts.baseURL
 
  this.logo = opts.logo
- this.theme = opts.theme
+ this.theme = Object.assign(opts.theme, {
+ showPercent: opts.showPercent
+ })
 
  this.serveIndex = this.serveIndex.bind(this)
  this.serveWS = this.serveWS.bind(this)

lib/plugin.js

@@ -5,26 +5,30 @@ const { ProgressPlugin: Plugin } = require('webpack')
 module.exports = class ProgressPlugin extends Plugin {
  constructor(opts = {}) {
  super()
+ this.env = opts.env || process.env.NODE_ENV || 'development'
+
+ this.isProd = this.env === 'production'
+
  this.opts = Object.assign(
  {
  baseURL: '/',
  logo: 'https://webpack.js.org/assets/icon-square-big.svg',
  host: 'localhost',
  port: process.env.port || 4000,
  callback: () => {
+ if (this.isProd) return
  console.log(`[loading screen]: http://localhost:${this.opts.port}`)
  },
  theme: {
  client: '#8ed5fb',
  server: '#1b78bf',
  modern: '#2f495e'
- }
+ },
+ showPercent: true
  },
  opts
  )
 
- this.env = opts.env || process.env.NODE_ENV
-
  this.connections = new Set()
 
  this.handler = (per, message, ...details) => {
@@ -47,10 +51,6 @@ module.exports = class ProgressPlugin extends Plugin {
  }
 
  async init() {
- if (this.env !== 'development') {
- return
- }
-
  const LoadingUI = require('./loading')
  this.loading = new LoadingUI(this.opts)