feat: start/watch not detecting file changes

CHANGELOG.md

@@ -1,3 +1,18 @@
+## [2.0.7](https://github.com/hayes0724/shopify-packer/compare/2.0.6...2.0.7) (2021-03-26)
+
+
+### :bug: Bug Fixes
+
+* ssl check if folder exists before creating keys ([79b4223](https://github.com/hayes0724/shopify-packer/commit/79b4223ccbfa0ce33ebfa187b307828c2e07559b))
+
+
+### :sparkles: Features
+
+* dev settings asset loader for fonts and images ([467d081](https://github.com/hayes0724/shopify-packer/commit/467d0810d27857d0d0da7402d6a0ae6151121074))
+* start/watch not detecting file changes ([3fa73a9](https://github.com/hayes0724/shopify-packer/commit/3fa73a9c8fade826301e5c5228cc8eb414154f86))
+
+
+
 ## [2.0.6](https://github.com/hayes0724/shopify-packer/compare/2.0.5...2.0.6) (2021-03-25)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hayes0724/shopify-packer",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "bin": {
     "packer": "cli/index.js"
   },

src/server/asset/index.js

@@ -7,11 +7,13 @@ const {sslKeyCert} = require('../ssl');
 const isHotUpdateFile = require('../is-hot-update-file');
 const PackerConfig = require('../../config');
 const config = new PackerConfig(require('../../../packer.schema'));
+const path = require('path');
 
 module.exports = class AssetServer {
   constructor(options) {
     options.webpackConfig.output.publicPath = `https://${options.address}:${options.port}/`;
-    this.assetHashes = {};
+    this.assetHashes = new Map();
+    this.updates = new Set();
     this.address = options.address;
     this.options = options;
     this.port = options.port;
@@ -26,6 +28,11 @@ module.exports = class AssetServer {
 
   start() {
     this.compiler.hooks.done.tap('DevServer', this._onCompileDone.bind(this));
+    this.compiler.hooks.assetEmitted.tap(
+      'DevServer',
+      this._onAssetEmit.bind(this)
+    );
+
     this.ssl = sslKeyCert();
     this.server = createServer(this.ssl, this.app);
 
@@ -40,19 +47,39 @@ module.exports = class AssetServer {
     this.client.skipNextSync = value;
   }
 
+  _onAssetEmit(file, info) {
+    if (this._isLiquidStyle(file) && this._hasAssetChanged(file, info)) {
+      return this.updates.add(`assets/${file}`);
+    }
+    if (this._isLiquidTagFile(file) && this._hasAssetChanged(file, info)) {
+      return 'snippets/' + path.basename(file);
+    }
+    if (this._isLiquidFile(file) && this._hasAssetChanged(file, info)) {
+      return this.updates.add(file.replace('../', ''));
+    } else {
+      this._hasAssetChanged(file, info);
+    }
+  }
+
   _onCompileDone(stats) {
-    const files = this._getAssetsToUpload(stats);
+    const files = [...this.updates];
+    this.updates.clear();
+    this.files = [...files];
     return this.client.sync(files, stats);
   }
 
   _onAfterSync(files) {
-    const _syncHandler = () => {
+    /*const _syncHandler = () => {
       this.app.webpackHotMiddleware.publish({
         action: 'shopify_upload_finished',
         force: files.length > 0,
       });
     };
-    setTimeout(_syncHandler, parseInt(config.get('network.reload')));
+    setTimeout(_syncHandler, parseInt(config.get('network.reload')));*/
+    this.app.webpackHotMiddleware.publish({
+      action: 'shopify_upload_finished',
+      force: files.length > 0,
+    });
   }
 
   _isChunk(key, chunks) {
@@ -64,19 +91,29 @@ module.exports = class AssetServer {
   }
 
   _isLiquidStyle(key) {
-    return key.indexOf('styleLiquid.scss.liquid') > -1;
+    return key.indexOf('styleLiquid.css.liquid') > -1;
   }
 
-  _hasAssetChanged(key, asset) {
-    const oldHash = this.assetHashes[key];
-    const newHash = this._updateAssetHash(key, asset);
+  _isLiquidFile(file) {
+    return file.includes('.liquid');
+  }
+
+  _isLiquidTagFile(file) {
+    return (
+      file.includes('style-tags.liquid') || file.includes('script-tags.liquid')
+    );
+  }
+
+  _hasAssetChanged(key, info) {
+    const oldHash = this.assetHashes.get(key);
+    const newHash = this._updateAssetHash(key, info);
 
     return oldHash !== newHash;
   }
 
-  _getAssetsToUpload(stats) {
-    const assets = Object.entries(stats.compilation.assets);
-    const chunks = stats.compilation.chunks;
+  _getAssetsToUpload(compilation) {
+    const assets = Object.entries(compilation.assets);
+    const chunks = compilation.chunks;
     return (
       assets
         .filter(([key, asset]) => {
@@ -94,11 +131,10 @@ module.exports = class AssetServer {
     );
   }
 
-  _updateAssetHash(key, asset) {
-    const rawSource = asset.source();
+  _updateAssetHash(key, info) {
+    const rawSource = info.content;
     const source = Array.isArray(rawSource) ? rawSource.join('\n') : rawSource;
     const hash = createHash('sha256').update(source).digest('hex');
-
-    return (this.assetHashes[key] = hash);
+    return this.assetHashes.set(key, hash);
   }
 };

src/server/client.js

@@ -17,7 +17,7 @@ module.exports = class Client {
   }
 
   async sync(files, stats) {
-    this.files = files;
+    this.files = [...files];
 
     await this.hooks.beforeSync.promise(this.files, stats);
 
@@ -33,7 +33,7 @@ module.exports = class Client {
       this.hooks.syncDone.call(this.files, stats);
     }
 
-    this.hooks.afterSync.promise(this.files, stats);
+    await this.hooks.afterSync.promise(this.files, stats);
 
     this.skipNextSync = false;
   }

src/server/prompts/skip-settings-data.js

@@ -23,15 +23,13 @@ function _includesSettingsData(files) {
 
 function _filterIgnoredFiles(files) {
   const envIgnoreGlobs = getIgnoreFilesValue().split(':');
-  console.log(envIgnoreGlobs);
   return flatten(
     envIgnoreGlobs.map((glob) => {
       if (glob[0] !== '/') {
         /* eslint-disable-next-line no-param-reassign */
         glob = `/${glob}`;
       }
-
-      return files.filter(minimatch.filter(glob));
+      return [...files].filter(minimatch.filter(glob));
     })
   );
 }

src/server/sync.js

@@ -1,8 +1,9 @@
 const https = require('https');
-
 const chalk = require('chalk');
 const figures = require('figures');
 const themekit = require('@shopify/themekit');
+const PackerConfig = require('../config');
+const config = new PackerConfig(require('../../packer.schema'));
 
 const {
   validate,
@@ -13,8 +14,6 @@ const {
   getIgnoreFilesValue,
   getAllowLiveValue,
 } = require('../env');
-const PackerConfig = require('../config');
-const config = new PackerConfig(require('../../packer.schema'));
 
 let deploying = false;
 let filesToDeploy = [];
@@ -73,7 +72,6 @@ async function deploy(cmd = '', files = [], replace = true) {
   if (!['deploy'].includes(cmd)) {
     throw new Error('shopify-deploy.deploy() first argument must be deploy');
   }
-
   deploying = true;
 
   console.log(chalk.magenta(`\n${figures.arrowUp}  Uploading to Shopify...`));
@@ -105,7 +103,7 @@ async function promiseThemekitDeploy(cmd, files, replace) {
     console.log('using no delete flag, files will not be removed before');
     settings.nodelete = true;
   }
-  await themekit.command(cmd, settings, {
+  return await themekit.command(cmd, settings, {
     cwd: config.get('theme.dist.root'),
   });
 }
@@ -197,7 +195,6 @@ module.exports = {
     if (!files.length) {
       return Promise.reject(new Error('No files to deploy.'));
     }
-
     filesToDeploy = [...new Set([...filesToDeploy, ...files])];
 
     return maybeDeploy();

src/webpack/config/dev.config.js

@@ -44,13 +44,19 @@ module.exports = merge([
         },
         {
           test: /\.(eot|ttf|woff|woff2|otf)$/,
-          exclude: /node_modules/,
+          exclude: config.get('commonExcludes'),
           type: 'asset',
+          generator: {
+            filename: '[name].[ext]',
+          },
         },
         {
           test: /\.(png|svg|jpg|gif)$/,
           exclude: config.get('commonExcludes'),
           type: 'asset',
+          generator: {
+            filename: '[name].[ext]',
+          },
         },
       ],
     },

src/webpack/parts/core.js

@@ -24,9 +24,9 @@ const core = {
       {
         test: /\.(liquid|json)$/,
         exclude: [/(css|scss|sass)\.liquid$/, ...config.get('commonExcludes')],
-        loader: 'file-loader',
-        options: {
-          name: '../[path][name].[ext]',
+        type: 'asset/resource',
+        generator: {
+          filename: '../[path][name].[ext]',
         },
       },
       {