From 078e4b6008c49ee88c4b24144f94b7b9ab3c7a20 Mon Sep 17 00:00:00 2001 From: Miguel Montalvo Date: Sun, 14 Mar 2021 03:00:04 -0700 Subject: [PATCH 1/9] Find a port to build the public path --- lib/configure.js | 9 +++++++- lib/watcher.js | 1 + package-lock.json | 55 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 4 files changed, 65 insertions(+), 1 deletion(-) diff --git a/lib/configure.js b/lib/configure.js index baac39c..958be35 100644 --- a/lib/configure.js +++ b/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: '', @@ -93,6 +95,7 @@ class Configure { } this.checkProxyTarget() + this.checkPort() this.checkPublicPath() this.checkDist() } @@ -108,9 +111,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}` diff --git a/lib/watcher.js b/lib/watcher.js index d7c9a4c..af1100f 100644 --- a/lib/watcher.js +++ b/lib/watcher.js @@ -58,6 +58,7 @@ class Watcher { }, open: (this.isLocalhost() ? 'internal' : 'external'), host: config.get('local'), + port: config.get('port'), https: this.getSSL(), notify: false } diff --git a/package-lock.json b/package-lock.json index 4496c80..e591d30 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4030,6 +4030,61 @@ "pinkie": "^2.0.0" } }, + "portfinder": { + "version": "1.0.28", + "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", + "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==", + "requires": { + "async": "^2.6.2", + "debug": "^3.1.1", + "mkdirp": "^0.5.5" + }, + "dependencies": { + "async": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", + "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "requires": { + "lodash": "^4.17.14" + } + }, + "debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "requires": { + "ms": "^2.1.1" + } + }, + "minimist": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" + }, + "mkdirp": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", + "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", + "requires": { + "minimist": "^1.2.5" + } + }, + "ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + } + } + }, + "portfinder-sync": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/portfinder-sync/-/portfinder-sync-0.0.2.tgz", + "integrity": "sha1-bjQJpzpxhDbeBTrJSThTUMqr2KI=", + "requires": { + "minimist": "^1.2.0", + "portfinder": "^1.0.10" + } + }, "portscanner": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.1.1.tgz", diff --git a/package.json b/package.json index 546e9ef..880081e 100644 --- a/package.json +++ b/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" From 967b20500585e2d8af32daabf4b54c981d53263f Mon Sep 17 00:00:00 2001 From: Miguel Montalvo Date: Sun, 14 Mar 2021 03:01:15 -0700 Subject: [PATCH 2/9] Change HMR client --- .eslintrc.js | 5 +++++ lib/hot-client.js | 9 +++++++++ lib/webpack.js | 2 +- 3 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 .eslintrc.js create mode 100644 lib/hot-client.js diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..4bbd7c2 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,5 @@ +module.exports = { + "env": { + "es6": true + } +}; diff --git a/lib/hot-client.js b/lib/hot-client.js new file mode 100644 index 0000000..36845a7 --- /dev/null +++ b/lib/hot-client.js @@ -0,0 +1,9 @@ +/* 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 diff --git a/lib/webpack.js b/lib/webpack.js index 0afd370..e098182 100644 --- a/lib/webpack.js +++ b/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() From 80a350933d25337ea8054aac29e7ee93d9abeea5 Mon Sep 17 00:00:00 2001 From: Miguel Montalvo Date: Sun, 14 Mar 2021 19:06:46 -0700 Subject: [PATCH 3/9] Enable browser sync notifications --- lib/watcher.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/watcher.js b/lib/watcher.js index af1100f..3a04a4f 100644 --- a/lib/watcher.js +++ b/lib/watcher.js @@ -60,7 +60,7 @@ class Watcher { host: config.get('local'), port: config.get('port'), https: this.getSSL(), - notify: false + notify: true } } From 5d93fbfc2139428771500a05ab5087df83712ede Mon Sep 17 00:00:00 2001 From: Miguel Montalvo Date: Sun, 14 Mar 2021 19:10:46 -0700 Subject: [PATCH 4/9] Reload the page when files are uploaded to Shopify --- lib/hot-client.js | 7 +++++++ lib/mutator.js | 4 ++-- lib/watcher.js | 9 ++++++++- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/lib/hot-client.js b/lib/hot-client.js index 36845a7..5dd748d 100644 --- a/lib/hot-client.js +++ b/lib/hot-client.js @@ -7,3 +7,10 @@ __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() + } +}); diff --git a/lib/mutator.js b/lib/mutator.js index 1f6c457..e023a40 100644 --- a/lib/mutator.js +++ b/lib/mutator.js @@ -130,7 +130,7 @@ class Mutator { fs.copySync(path, `${dest.absolute}`) if (upload) { sendToShopify('upload', dest.relative, e => { - bs.reload() + bs.emitter.emit('shopify_upload_finished') resolve() }) } else { @@ -170,7 +170,7 @@ class Mutator { if (upload) { sendToShopify('upload', `/dist/config/settings_schema.json`, () => { - bs.reload() + bs.emitter.emit('shopify_upload_finished') resolve() }) } else { diff --git a/lib/watcher.js b/lib/watcher.js index 3a04a4f..c050a75 100644 --- a/lib/watcher.js +++ b/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: [ @@ -66,6 +67,12 @@ class Watcher { 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 () { From f2f0a4bb6b7d11095070347443d44ced83c6f0d3 Mon Sep 17 00:00:00 2001 From: Miguel Montalvo Date: Tue, 16 Mar 2021 02:18:03 -0700 Subject: [PATCH 5/9] Fix dynamic public path --- lib/webpack.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/lib/webpack.js b/lib/webpack.js index e098182..d9b6a97 100644 --- a/lib/webpack.js +++ b/lib/webpack.js @@ -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; }; } }) From 6fe4c3e93eba39deb3cf18065638dacc987aa2d7 Mon Sep 17 00:00:00 2001 From: Miguel Montalvo Date: Tue, 16 Mar 2021 21:20:03 -0700 Subject: [PATCH 6/9] Update readme file --- README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 27a487a..9377001 100644 --- a/README.md +++ b/README.md @@ -103,7 +103,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 +116,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 %} From 0362b9343cc47b61072f64ff8765f0ab0b525403 Mon Sep 17 00:00:00 2001 From: Miguel Montalvo Date: Sun, 9 May 2021 02:53:05 -0700 Subject: [PATCH 7/9] Add delay before reloading the page Values between 1600ms and 2000ms seem to work well (cherry picked from commit e3d523d79ea0a715dc23ca032e1da113b59f4022) --- lib/configure.js | 3 ++- lib/mutator.js | 11 +++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/lib/configure.js b/lib/configure.js index 958be35..90443a6 100644 --- a/lib/configure.js +++ b/lib/configure.js @@ -30,7 +30,8 @@ class Configure { target: '', hmr: true, domain: false, - ignore_files: [] + ignore_files: [], + delay: 2000 }, defaults) this.findConfig() diff --git a/lib/mutator.js b/lib/mutator.js index e023a40..42112ef 100644 --- a/lib/mutator.js +++ b/lib/mutator.js @@ -130,7 +130,7 @@ class Mutator { fs.copySync(path, `${dest.absolute}`) if (upload) { sendToShopify('upload', dest.relative, e => { - bs.emitter.emit('shopify_upload_finished') + this.shopifyUploadFinished() resolve() }) } else { @@ -170,7 +170,7 @@ class Mutator { if (upload) { sendToShopify('upload', `/dist/config/settings_schema.json`, () => { - bs.emitter.emit('shopify_upload_finished') + this.shopifyUploadFinished() resolve() }) } else { @@ -180,6 +180,13 @@ class Mutator { }) } + shopifyUploadFinished () { + const delayRefresh = setTimeout(() => { + clearTimeout(delayRefresh) + bs.emitter.emit('shopify_upload_finished') + }, config.get('delay')) + } + setFileLocation (file) { let {dirname: path} = file From 8bb3518aaad153671e038af4dc3bb67c8a9174bb Mon Sep 17 00:00:00 2001 From: Miguel Montalvo Date: Sun, 9 May 2021 10:42:52 -0700 Subject: [PATCH 8/9] Make delay refresh optional (cherry picked from commit 21da3d48c868e370cbcca0afa5860b4e17774429) --- lib/configure.js | 2 +- lib/mutator.js | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/configure.js b/lib/configure.js index 90443a6..164b61b 100644 --- a/lib/configure.js +++ b/lib/configure.js @@ -31,7 +31,7 @@ class Configure { hmr: true, domain: false, ignore_files: [], - delay: 2000 + delay: 0 }, defaults) this.findConfig() diff --git a/lib/mutator.js b/lib/mutator.js index 42112ef..aec896b 100644 --- a/lib/mutator.js +++ b/lib/mutator.js @@ -181,6 +181,11 @@ 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') From d3f646cbc92b525c8a69dcef15cd165a362e1968 Mon Sep 17 00:00:00 2001 From: Miguel Montalvo Date: Sun, 9 May 2021 10:51:02 -0700 Subject: [PATCH 9/9] Document delay option (cherry picked from commit b8e8ceaaddb0edb361b5fd2bd6c94ca49a9e71da) --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 9377001..4ae540e 100644 --- a/README.md +++ b/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