refactor: update the UIKIt build to recompile PL when the config changes

Author: sghoweri

packages/uikit-workshop/build-tools.js

@@ -12,5 +12,6 @@ patternlab.build({
 
 webpackServer.serve(
   patternlab,
+  configFilePath,
   path.resolve(process.cwd(), config.paths.public.root)
 );

packages/uikit-workshop/build/webpack-server.js

@@ -12,14 +12,14 @@ const portfinder = require('portfinder');
 
 const fileHashes = {};
 
-async function serve(patternlab, buildDir = 'public') {
+async function serve(patternlab, configPath, buildDir = 'public') {
   // @todo: move these configs + make customizable?
   const root = path.resolve(__dirname, `${buildDir}`);
   const preferredPort = 3000;
   portfinder.basePort = preferredPort;
 
   const webpackConfigs = await webpackConfig({
-    watch: false,
+    watch: true,
     prod: false,
     buildDir: root,
     rootDir: process.cwd(),
@@ -37,6 +37,24 @@ async function serve(patternlab, buildDir = 'public') {
 
   // customize bs reload behavior based on the type of asset that's changed
   const filesToWatch = [
+    {
+      match: [`${process.cwd()}/patternlab-config.json`],
+      fn: async function(event, filePath) {
+        // when the main PL config changes, clear Node's cache (so the JSON config is re-read) and trigger another PL build
+        // this allows config changes to show up without restarting the build!
+        Object.keys(require.cache).forEach(function(key) {
+          delete require.cache[key];
+        });
+
+        const config = require(configPath);
+        const pl = require('@pattern-lab/core')(config);
+
+        pl.build({
+          watch: false,
+          cleanPublic: true,
+        });
+      },
+    },
     `${root}/**/*.css`,
     `${root}/**/*.js`,
     {