HMR implementation

config.yml.example

@@ -1,7 +1,17 @@
 development:
-  password: 
+  password:
   theme_id: ""
-  store: 
+  store:
+  directory: dist/
+  ignore_files:
+    - config/settings_data.json
+    - "*.js"
+    - "*.hot-update.json"
+
+production:
+  password:
+  theme_id: ""
+  store:
   directory: dist/
   ignore_files:
     - config/settings_data.json

package.json

@@ -7,9 +7,9 @@
   "author": "Mike Salvati",
   "private": true,
   "scripts": {
-    "start": "webpack --mode=development --watch",
+    "start": "webpack serve --mode=development",
     "build": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid",
-    "deploy": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid && shopify-themekit deploy"
+    "deploy": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid && shopify-themekit deploy --env=production"
   },
   "dependencies": {
     "tailwindcss": "^1.9.6",

src/components/sections/header/header.liquid

@@ -1,4 +1,5 @@
 <section data-section-id="{{ section.id }}">
+  {% include "message" %}
   {%-  if section.settings.announcement_bar_enabled -%}
   <div class="announcement-bar-container text-center p-2">
     {%-  if section.settings.announcement_bar_link != blank -%}
@@ -141,4 +142,4 @@
     max-width: {{section.settings.logo_max_width}}px;
   }
 </style>
-{%- endif -%}
+{%- endif -%}

src/components/snippets/message/message.js

@@ -1,5 +1,5 @@
 // testing importing scss
-import "./message.scss";
+import './message.scss';
 
 // Testing arrow functions
 const messageFunction = () => 'Message JS ES6 Function';

src/components/snippets/message/message.liquid

@@ -4,4 +4,4 @@
     <h1 class="message_heading">This is a message from a snippet</h1>
 </div>
 
-{{ 'bundle.message.js' | asset_url | script_tag }}
+{{ 'bundle.message.js' | asset_url | script_tag }}

webpack.config.js

@@ -2,13 +2,15 @@ const path = require('path');
 const glob = require('glob');
 const { argv } = require('yargs');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const WebpackShellPluginNext = require('webpack-shell-plugin-next');
 
-const isDev = argv.mode === 'development';
-const stats = isDev ? 'errors-warnings' : { children: false };
+
+const isDevMode = argv.mode === 'development';
+const stats = isDevMode ? 'errors-warnings' : { children: false };
+const port = 9000;
+const publicPath = isDevMode ? `https://localhost:${port}/` : '';
 
 module.exports = {
     stats: stats,
@@ -19,14 +21,18 @@ module.exports = {
     }, {}),
     output: {
         filename: './assets/bundle.[name].js',
+        hotUpdateChunkFilename: './hot/[id].[fullhash].hot-update.js',
+        hotUpdateMainFilename: './hot/[fullhash].hot-update.json',
         path: path.resolve(__dirname, 'dist'),
+        publicPath,
     },
+    cache: false,
     module: {
         rules: [
             {
                 test: /\.(sc|sa|c)ss$/,
                 use: [
-                    MiniCssExtractPlugin.loader,
+                    isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                     {
                         loader: 'css-loader',
                         options: {
@@ -58,18 +64,18 @@ module.exports = {
         ],
     },
     plugins: [
-        new CleanWebpackPlugin(),
-        isDev &&
-            new BundleAnalyzerPlugin({
-                analyzerMode: 'disabled',
-                generateStatsFile: true,
-            }),
-        isDev &&
+        new CleanWebpackPlugin({
+            cleanStaleWebpackAssets: false,
+        }),
+        isDevMode &&
             new WebpackShellPluginNext({
                 onBuildStart: {
-                    scripts: ['echo -- Webpack build started 🛠'],
-                    blocking: true,
-                    parallel: false,
+                    scripts: [
+                        'echo -- Webpack build started 🛠',
+                        'shopify-themekit watch --env=development',
+                    ],
+                    blocking: false,
+                    parallel: true,
                 },
                 onBuildError: {
                     scripts: ['echo -- ☠️ Aw snap, Webpack build failed...'],
@@ -80,39 +86,50 @@ module.exports = {
                         'echo -- Building TailwindCSS...',
                         'npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid',
                         'echo -- Deploying to theme ✈️',
-                        'shopify-themekit deploy',
+                        'shopify-themekit deploy --env=development',
                         'echo -- Deployment competed ✓',
                         'shopify-themekit open',
-                        'shopify-themekit watch',
                     ],
                     blocking: true,
                     parallel: false,
                 },
             }),
-
         new MiniCssExtractPlugin({
-            filename: '/assets/bundle.[name].css',
+            filename: './assets/bundle.[name].css',
         }),
         new CopyPlugin({
             patterns: [
                 {
-                    from: 'src/components/*/*.liquid',
+                    from: 'src/components/**/*.liquid',
                     to: '[folder]/[name].[ext]',
-                },
-                {
-                    from: 'src/components/templates/**/*.liquid',
-                    to: 'templates/[name].[ext]',
-                    flatten: true,
-                },
-                {
-                    from: 'src/components/sections/**/*.liquid',
-                    to: 'sections/[name].[ext]',
-                    flatten: true,
-                },
-                {
-                    from: 'src/components/snippets/**/*.liquid',
-                    to: 'snippets/[name].[ext]',
                     flatten: true,
+                    transformPath(targetPath, absolutePath) {
+                        const relativePath = path.join(__dirname, 'src/components');
+                        const diff = path.relative(relativePath, absolutePath);
+                        const targetFolder = diff.split(path.sep)[0];
+                        return path.join(targetFolder, path.basename(absolutePath));
+                    },
+                    transform: isDevMode
+                        ? function (content) {
+                              content = content
+                                  .toString()
+                                  .replace(
+                                      /{{\s*'([^']+)'\s*\|\s*asset_url\s*\|\s*(stylesheet_tag|script_tag)\s*}}/g,
+                                      function (matched, fileName, type) {
+                                          if (type === 'stylesheet_tag') {
+                                              if (fileName !== 'tailwind.css') {
+                                                  return '';
+                                              }
+                                              return matched;
+                                          }
+
+                                          return `<script src="${publicPath}assets/${fileName}"></script>`;
+                                      }
+                                  );
+
+                              return content;
+                          }
+                        : undefined,
                 },
                 {
                     from: 'src/assets/**/*',
@@ -130,4 +147,21 @@ module.exports = {
             ],
         }),
     ].filter(Boolean),
+    devServer: {
+        contentBase: path.join(__dirname, 'dist'),
+        publicPath: '/',
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+            'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
+        },
+        compress: true,
+        port,
+        https: true,
+        disableHostCheck: true,
+        hot: true,
+        liveReload: false,
+        overlay: true,
+        writeToDisk: true,
+    },
 };