Merge pull request #89 from bemusic/progress

feat(boot): implement chunk loading progress

config/webpack.js

@@ -1,7 +1,8 @@
 
-import path     from './path'
-import NODE_ENV from 'node-env'
-import webpack  from 'webpack'
+import path           from './path'
+import NODE_ENV       from 'node-env'
+import webpack        from 'webpack'
+import ProgressPlugin from '../src/webpack-progress'
 
 let config = {
   context: path('src'),
@@ -50,7 +51,9 @@ let config = {
     ],
     postLoaders: [],
   },
-  plugins: [],
+  plugins: [
+    new ProgressPlugin(),
+  ],
 }
 
 if (NODE_ENV === 'test' || process.env.COV === 'true') {

src/boot/boot.js

@@ -3,11 +3,14 @@ import './boot.scss'
 import template from './boot.jade'
 import version from 'val!./version.js'
 
-var boot = document.createElement('div')
+let boot = document.createElement('div')
 boot.id = 'boot'
 boot.className = 'bemuse-boot'
 boot.innerHTML = template()
-boot.querySelector('.js-progress-bar').classList.add('is-indeterminate')
+
+let bar = boot.querySelector('.js-progress-bar')
+bar.classList.add('is-indeterminate')
+
 boot.querySelector('.js-version').appendChild(
   document.createTextNode(`v${version}`))
 
@@ -17,3 +20,13 @@ export function hide() {
   boot.style.display = 'none'
 }
 
+export function setProgress(progress) {
+  if (progress === null) {
+    bar.classList.add('is-indeterminate')
+    bar.style.width = ''
+  } else {
+    bar.classList.remove('is-indeterminate')
+    bar.style.width = (progress * 100).toFixed(2) + '%'
+  }
+}
+

src/boot/index.js

@@ -9,6 +9,7 @@ import querystring      from 'querystring'
 
 import loadModule       from 'val!./loader.js'
 
+import LoadingContext   from './loading-context'
 import * as boot        from './boot'
 import * as ErrorDialog from './error-dialog'
 
@@ -24,9 +25,16 @@ let mode = data.mode || 'comingSoon'
 
 /* istanbul ignore else - we can check that by functional tests */
 if (loadModule[mode]) {
-  loadModule[mode](function(loadedModule) {
-    boot.hide()
-    loadedModule.main()
+  let context = new LoadingContext()
+  boot.setProgress(null)
+  context.onprogress = function(loaded, total) {
+    boot.setProgress(loaded / total)
+  }
+  context.use(function() {
+    loadModule[mode](function(loadedModule) {
+      boot.hide()
+      loadedModule.main()
+    })
   })
 } else {
   console.error('Invalid mode:', mode)

src/boot/loading-context.js

@@ -0,0 +1,37 @@
+
+export class LoadingContext {
+  load(script, head) {
+    let src = script.src
+    let xh = new XMLHttpRequest()
+    xh.open('GET', src, true)
+    xh.responseType = 'blob'
+    xh.onprogress = (e) => {
+      if (e.total && e.lengthComputable) {
+        this.onprogress(e.loaded, e.total)
+      }
+    }
+    xh.onload = () => {
+      let parts = [xh.response, '\n//# sourceURL=' + src]
+      let type = 'text/javascript'
+      let url = URL.createObjectURL(new Blob(parts, { type }))
+      script.src = url
+      head.appendChild(script)
+    }
+    xh.send(null)
+  }
+  onprogress() {
+  }
+  use(callback) {
+    let old = window.WebpackLoadingContext
+    try {
+      window.WebpackLoadingContext = this
+      callback()
+    } finally {
+      window.WebpackLoadingContext = old
+    }
+  }
+}
+
+export default LoadingContext
+
+

src/webpack-progress/index.js

@@ -0,0 +1,15 @@
+
+module.exports = function ProgressPlugin() {
+  return function ProgressPluginInstance() {
+    this.plugin('compilation', function(compilation) {
+      compilation.mainTemplate.plugin('require-ensure', function(result) {
+        result = result.replace('head.appendChild(script);', function() {
+          return 'window.WebpackLoadingContext ? ' +
+            'window.WebpackLoadingContext.load(script, head) : ' +
+            'head.appendChild(script);'
+        })
+        return result
+      })
+    })
+  }
+}