Delay refresh

.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  "env": {
+    "es6": true
+  }
+};

README.md

@@ -38,6 +38,7 @@ This CLI tool requires the following components:
   - store
   - password
   - api_key (needed for deployment)
+  - delay (Optional, delay before reloading the page, 1600-2000ms seem to work well)
 
 2. A `webpack.config.js` in your root directory. This file should at least export an object with the following properties:
 ```javascript
@@ -103,7 +104,10 @@ module.exports = {
 }
 ```
 
-6. The following line in the entry JS file (e.g. main.js file):
+6. The following line in the entry JS file (e.g. main.js file) to change
+   the public URL of the output directory when referenced in a browser.
+During development it uses your `local` URL and on production it uses
+Shopify's CDN.
 
 ```javascript
 __webpack_public_path__ = BRRL_PATH(BRRL_PUBLIC_PATH, BRRL_PROXY) // eslint-disable-line camelcase
@@ -113,7 +117,7 @@ __webpack_public_path__ = BRRL_PATH(BRRL_PUBLIC_PATH, BRRL_PROXY) // eslint-disa
 ```liquid
 In the head:
 {% if settings.is_dev_mode %}
-  {{ '/dev/main.js' | script_tag }}
+  {{ 'https://localhost:3000/main.js' | script_tag }}
 {% else %}
   {{ 'main.css' | asset_url | stylesheet_tag }}
 {% endif %}

lib/configure.js

@@ -1,6 +1,7 @@
 const path = require('path')
 const fs = require('fs')
 const yaml = require('js-yaml')
+const portFinderSync = require('portfinder-sync')
 const Err = require('./error')
 
 class Configure {
@@ -19,6 +20,7 @@ class Configure {
     this.ymlFile = false
     this.defaults = Object.assign({}, {
       publicPath: '/dev',
+      port: 3000,
       local: 'localhost',
       dist: `${this.cwd}/dist`,
       theme_id: '',
@@ -28,7 +30,8 @@ class Configure {
       target: '',
       hmr: true,
       domain: false,
-      ignore_files: []
+      ignore_files: [],
+      delay: 0
     }, defaults)
 
     this.findConfig()
@@ -93,6 +96,7 @@ class Configure {
     }
 
     this.checkProxyTarget()
+    this.checkPort()
     this.checkPublicPath()
     this.checkDist()
   }
@@ -108,9 +112,13 @@ class Configure {
     }
   }
 
+  checkPort () {
+    this.port = portFinderSync.getPort(this.defaults.port)
+  }
+
   checkPublicPath () {
     if (this.shopify) {
-      this.publicPath = this.defaults.publicPath
+      this.publicPath = `https://${this.defaults.local}:${this.port}/`
     } else {
       const uri = this.webpack.output.path.split('/wp-content/')[1]
       this.publicPath = `/wp-content/${uri}`

lib/hot-client.js

@@ -0,0 +1,16 @@
+/* eslint-disable */
+/* global __webpack_public_path__ window */
+// remove trailing slash from webpack public path
+// see https://github.com/glenjamin/webpack-hot-middleware/issues/154
+const tmpPublicPath = __webpack_public_path__
+__webpack_public_path__ = __webpack_public_path__.replace(/\/$/, '')
+const client = require('webpack-hot-middleware/client?dynamicPublicPath=true&reload=true')
+// and add the trailing slash again so we don't run into issue with webpack itself...
+__webpack_public_path__ = tmpPublicPath
+
+client.subscribe((event) => {
+  if (event.action === 'shopify_upload_finished') {
+    // Reload the page
+    window.location.reload()
+  }
+});

lib/mutator.js

@@ -130,7 +130,7 @@ class Mutator {
         fs.copySync(path, `${dest.absolute}`)
         if (upload) {
           sendToShopify('upload', dest.relative, e => {
-            bs.reload()
+            this.shopifyUploadFinished()
             resolve()
           })
         } else {
@@ -170,7 +170,7 @@ class Mutator {
 
           if (upload) {
             sendToShopify('upload', `/dist/config/settings_schema.json`, () => {
-              bs.reload()
+              this.shopifyUploadFinished()
               resolve()
             })
           } else {
@@ -180,6 +180,18 @@ class Mutator {
     })
   }
 
+  shopifyUploadFinished () {
+    if (!config.get('delay')) {
+      bs.emitter.emit('shopify_upload_finished')
+      return
+    }
+
+    const delayRefresh = setTimeout(() => {
+      clearTimeout(delayRefresh)
+      bs.emitter.emit('shopify_upload_finished')
+    }, config.get('delay'))
+  }
+
   setFileLocation (file) {
     let {dirname: path} = file
 

lib/watcher.js

@@ -15,6 +15,7 @@ class Watcher {
 
   constructor() {
     this.compiler = Webpack(true).compiler
+    this.webpackHotMiddleware = WHM(this.compiler)
 
     this.copy()
     this.serve()
@@ -38,7 +39,7 @@ class Watcher {
             }
           }),
           ...(config.get('hmr') ? [
-            WHM(this.compiler)
+            this.webpackHotMiddleware
           ] : [])
         ],
         proxyReq: [
@@ -58,13 +59,20 @@ class Watcher {
       },
       open: (this.isLocalhost() ? 'internal' : 'external'),
       host: config.get('local'),
+      port: config.get('port'),
       https: this.getSSL(),
-      notify: false
+      notify: true
     }
   }
 
   serve () {
     bs.init(this.getServerConfig())
+    bs.emitter.on('shopify_upload_finished', () => {
+      // Notify the HMR client that we finished uploading files to Shopify
+      this.webpackHotMiddleware.publish({
+        action: 'shopify_upload_finished'
+      })
+    })
   }
 
   copy () {

lib/webpack.js

@@ -7,7 +7,7 @@ const Err = require('./error')
 class Webpacker {
   constructor (watching = false) {
     this.watching = watching
-    this.hmr = 'webpack-hot-middleware/client?reload=true'
+    this.hmr = path.resolve(__dirname, 'hot-client.js')
 
     this.getConfig()
     this.prepareDevtool()
@@ -100,13 +100,16 @@ class Webpacker {
         BRRL_VERSION: JSON.stringify(config.get('package').version),
         BRRL_PROXY: JSON.stringify(config.get('local')),
         BRRL_PATH: function(path, proxy) {
+          // use document.currentScript to know the currently processed JS file
+          // see https://github.com/vuejs/vue-cli/commit/5b1709abf010413b2f0b3d1a94ebb9577218c051
+          const currentScript = window.document.currentScript;
           if (!proxy) {
             proxy = 'localhost';
           };
-          if (document.location.hostname === proxy) {
+          if (new URL(currentScript.src).hostname === proxy) {
             return path;
           } else {
-            return SHOPIFY_CDN;
+            return window.SHOPIFY_CDN;
           };
         }
       })

package.json

@@ -23,6 +23,7 @@
     "js-yaml": "^3.12.0",
     "minimatch": "^3.0.4",
     "moment-timezone": "^0.5.21",
+    "portfinder-sync": "0.0.2",
     "shopify-node-api": "^1.8.0",
     "webpack-dev-middleware": "^3.1.3",
     "webpack-hot-middleware": "^2.22.3"