Simplify assets

packages/slate-config/common/paths.schema.js

@@ -15,20 +15,15 @@ module.exports = {
   // Source directory of theme
   'paths.theme.src': (config) => path.join(config.get('paths.theme'), 'src'),
 
+  'paths.theme.src.assets': (config) =>
+    path.join(config.get('paths.theme.src'), 'assets'),
+
   // Source of theme configuration files
   'paths.theme.src.config': (config) =>
     path.join(config.get('paths.theme.src'), 'config'),
 
-  // Source font directory for theme
-  'paths.theme.src.fonts': (config) =>
-    path.join(config.get('paths.theme.src'), 'assets', 'fonts'),
-
-  // Source of images directory
-  'paths.theme.src.images': (config) =>
-    path.join(config.get('paths.theme.src'), 'assets', 'images'),
-
   // Source of theme liquid layout files
-  'paths.theme.src.layouts': (config) =>
+  'paths.theme.src.layout': (config) =>
     path.join(config.get('paths.theme.src'), 'layout'),
 
   // Source of translation locales
@@ -37,19 +32,15 @@ module.exports = {
 
   // Source scripts directory for theme
   'paths.theme.src.scripts': (config) =>
-    path.join(config.get('paths.theme.src'), 'assets', 'scripts'),
+    path.join(config.get('paths.theme.src'), 'scripts'),
 
   // Source snippets directory
   'paths.theme.src.snippets': (config) =>
     path.join(config.get('paths.theme.src'), 'snippets'),
 
   // Static asset directory for files that statically copied to paths.theme.dist.assets
-  'paths.theme.src.static': (config) =>
-    path.join(config.get('paths.theme.src'), 'assets', 'static'),
-
-  // Main SVG source directory for theme
-  'paths.theme.src.svgs': (config) =>
-    path.join(config.get('paths.theme.src'), 'assets', 'svg'),
+  'paths.theme.src.sections': (config) =>
+    path.join(config.get('paths.theme.src'), 'sections'),
 
   // Source liquid template directory
   'paths.theme.src.templates': (config) =>
@@ -70,6 +61,10 @@ module.exports = {
   'paths.theme.dist.config': (config) =>
     path.join(config.get('paths.theme.dist'), 'config'),
 
+  // Distribution of theme liquid layout files
+  'paths.theme.dist.layout': (config) =>
+    path.join(config.get('paths.theme.dist'), 'layout'),
+
   // Distribution snippets directory
   'paths.theme.dist.snippets': (config) =>
     path.join(config.get('paths.theme.dist'), 'snippets'),
@@ -78,6 +73,12 @@ module.exports = {
   'paths.theme.dist.locales': (config) =>
     path.join(config.get('paths.theme.dist'), 'locales'),
 
+  'paths.theme.dist.sections': (config) =>
+    path.join(config.get('paths.theme.dist'), 'sections'),
+
+  'paths.theme.dist.templates': (config) =>
+    path.join(config.get('paths.theme.dist'), 'templates'),
+
   // Directory for storing all temporary and/or cache files
   'paths.theme.cache': (config) =>
     path.join(config.get('paths.theme'), '.cache'),

packages/slate-tools/slate-tools.schema.js

@@ -109,7 +109,5 @@ module.exports = {
   'webpack.cssnano.settings': {zindex: false, reduceIdents: false},
 
   // Object which contains entrypoints used in webpack's config.entry key
-  'webpack.entrypoints': {
-    static: path.resolve(__dirname, 'tools/webpack/static-files-glob.js'),
-  },
+  'webpack.entrypoints': {},
 };

packages/slate-tools/tools/asset-server/app.js

@@ -3,13 +3,18 @@ const webpackHotMiddleware = require('webpack-hot-middleware');
 const corsMiddleware = require('cors');
 const express = require('express');
 
+const {isHotUpdateFile} = require('../utilities');
+
 module.exports = class App {
   constructor(compiler) {
     const app = express();
 
     app.webpackDevMiddleware = webpackDevMiddleware(compiler, {
       logLevel: 'silent',
       reload: true,
+      writeToDisk: (filePath) => {
+        return !isHotUpdateFile(filePath);
+      },
     });
     app.webpackHotMiddleware = webpackHotMiddleware(compiler, {
       log: false,

packages/slate-tools/tools/asset-server/client.js

@@ -7,32 +7,32 @@ module.exports = class Client {
     this.skipNextSync = false;
     this.files = [];
     this.hooks = {
-      beforeSync: new AsyncSeriesHook(['files']),
-      sync: new SyncHook(['files']),
-      syncDone: new SyncHook(['files']),
-      afterSync: new AsyncSeriesHook(['files']),
-      syncSkipped: new SyncHook(['files']),
+      beforeSync: new AsyncSeriesHook(['files', 'stats']),
+      sync: new SyncHook(['files', 'stats']),
+      syncDone: new SyncHook(['files', 'stats']),
+      afterSync: new AsyncSeriesHook(['files', 'stats']),
+      syncSkipped: new SyncHook(['files', 'stats']),
     };
   }
 
-  async sync(files) {
+  async sync(files, stats) {
     this.files = files;
 
-    await this.hooks.beforeSync.promise(this.files);
+    await this.hooks.beforeSync.promise(this.files, stats);
 
     if (this.files.length === 0) {
       this.skipNextSync = true;
     }
 
     if (this.skipNextSync) {
-      this.hooks.syncSkipped.call(this.files);
+      this.hooks.syncSkipped.call(this.files, stats);
     } else {
-      this.hooks.sync.call(this.files);
+      this.hooks.sync.call(this.files, stats);
       await sync(this.files);
-      this.hooks.syncDone.call(this.files);
+      this.hooks.syncDone.call(this.files, stats);
     }
 
-    this.hooks.afterSync.promise(this.files);
+    this.hooks.afterSync.promise(this.files, stats);
 
     this.skipNextSync = false;
   }

packages/slate-tools/tools/asset-server/index.js

@@ -1,12 +1,11 @@
-const fs = require('fs');
 const webpack = require('webpack');
 const {createServer} = require('https');
 const createHash = require('crypto').createHash;
 const SlateConfig = require('@shopify/slate-config');
 
 const App = require('./app');
 const Client = require('./client');
-const {sslKeyCert} = require('../utilities');
+const {sslKeyCert, isHotUpdateFile} = require('../utilities');
 const config = new SlateConfig(require('../../slate-tools.schema'));
 
 module.exports = class DevServer {
@@ -48,32 +47,47 @@ module.exports = class DevServer {
   }
 
   _onCompileDone(stats) {
-    const files = this._getChangedLiquidFiles(stats);
+    const files = this._getAssetsToUpload(stats);
 
-    return this.client.sync(files);
+    return this.client.sync(files, stats);
   }
 
   _onAfterSync(files) {
+    // Send an event to webpackHotMiddleware to force a page reload if there are
+    // files that require it.
     this.app.webpackHotMiddleware.publish({
       action: 'shopify_upload_finished',
       force: files.length > 0,
     });
   }
 
-  _getChangedLiquidFiles(stats) {
+  _isChunk(key, chunks) {
+    return (
+      chunks.filter((chunk) => {
+        return key.indexOf(chunk.id) > -1;
+      }).length > 0
+    );
+  }
+
+  _hasAssetChanged(key, asset) {
+    const oldHash = this.assetHashes[key];
+    const newHash = this._updateAssetHash(key, asset);
+
+    return oldHash !== newHash;
+  }
+
+  _getAssetsToUpload(stats) {
     const assets = Object.entries(stats.compilation.assets);
+    const chunks = stats.compilation.chunks;
 
     return (
       assets
         .filter(([key, asset]) => {
-          const oldHash = this.assetHashes[key];
-          const newHash = this._updateAssetHash(key, asset);
-
           return (
             asset.emitted &&
-            (/\.liquid$/.test(key) || /\.json$/.test(key)) &&
-            fs.existsSync(asset.existsAt) &&
-            oldHash !== newHash
+            !this._isChunk(key, chunks) &&
+            !isHotUpdateFile(key) &&
+            this._hasAssetChanged(key, asset)
           );
         })
         /* eslint-disable-next-line no-unused-vars */