hotfix: add watch command to the Bolt build config so there's a consi…

…stent check for tasks that internally need to watch files for changes; addresses non-prod build issues that cropped up during the v2.1.0-beta.0 release. Also add updates to address Jest tests being unable to run till a full Bolt build has completed

apps/bolt-site/.boltrc.js

@@ -4,7 +4,7 @@ const argv = require('yargs').argv;
 
 const config = {
   lang: ['en'],
-  renderingService: true, // starts PHP service for rendering Twig templates
+  renderingService: false, // starts PHP service for rendering Twig templates
   openServerAtStart: false,
   webpackDevServer: true,
   // Environmental variable / preset to use

apps/pattern-lab/.boltrc.js

@@ -7,7 +7,7 @@ const config = {
   // Note: if lang is defined, the first item is currently the one used by default in the Pattern Lab build, pending further iterations on this!
   lang: ['en', 'ja'],
 
-  renderingService: true, // starts PHP service for rendering Twig templates
+  renderingService: false, // starts PHP service for rendering Twig templates
   openServerAtStart: false,
   // Environmental variable / preset to use
   env: 'pl',

jest-global-setup.js

@@ -0,0 +1,24 @@
+const webpackTasks = require('@bolt/build-tools/tasks/webpack-tasks');
+const createWebpackConfig = require('@bolt/build-tools/create-webpack-config');
+const { buildPrep } = require('@bolt/build-tools/tasks/task-collections');
+const { getConfig } = require('@bolt/build-tools/utils/config-store');
+
+module.exports = async function() {
+  try {
+    let config = await getConfig();
+    await buildPrep(); // Generate folders, manifest data, etc needed for Twig renderer
+
+    // don't compile anything in Webpack except for the exported JSON data from Bolt's Design Tokens
+    config.components.global = ['./packages/core/styles/index.scss'];
+    config.components.individual = [];
+
+    // Disabling Sourcemaps here technically isn't REQUIRED but this might help speed things along, especially on Travis
+    config.sourceMaps = false;
+
+    const customWebpackConfig = await createWebpackConfig(config);
+
+    await webpackTasks.compile(customWebpackConfig);
+  } catch (error) {
+    console.log(error);
+  }
+};

jest.config.js

@@ -7,8 +7,10 @@ module.exports = {
     'packages/uikit-workshop',
     'packages/build-tools/plugins/sass-export-data/tests',
     'packages/components/bolt-button/__tests__/button-wc.test.js',
+    'packages/patternlab-node',
   ],
   testEnvironment: 'node',
+  globalSetup: './jest-global-setup.js',
   // Notify not working correctly; we want to only get a notification when tests fail, and then get ONE success notificaiton after it passes
   // notify: true,
   // notifyMode: 'failure-success',

packages/build-tools/cli.js

@@ -74,6 +74,9 @@ program
         config.quick =
           typeof options.quick === 'undefined' ? config.quick : options.quick;
 
+        config.watch =
+          typeof options.watch === 'undefined' ? config.watch : options.watch;
+
         config.prod =
           typeof program.prod === 'undefined' ? config.prod : program.prod;
 
@@ -162,12 +165,17 @@ program
         '--webpack-dev-server',
         configSchema.properties.webpackDevServer.description,
       )
+      .option('--watch', configSchema.properties.watch.description)
       .action(async options => {
+        if (options.watch === undefined) {
+          options.watch = true;
+        }
         await updateConfig(options, program);
         require('./tasks/task-collections').serve();
       });
 
     program.command('watch').action(async options => {
+      options.watch = true;
       await updateConfig(options, program);
       require('./tasks/task-collections').watch();
     });
@@ -189,7 +197,11 @@ program
         '--webpack-dev-server',
         configSchema.properties.webpackDevServer.description,
       )
+      .option('--watch', configSchema.properties.watch.description)
       .action(async options => {
+        if (options.watch === undefined) {
+          options.watch = true;
+        }
         await updateConfig(options, program);
         require('./tasks/task-collections').start();
       });
@@ -242,6 +254,20 @@ program
         });
     }
 
+    if (config.env === 'static') {
+      program
+        .command('static')
+        .description('Static Site Compile')
+        .action(async options => {
+          await updateConfig(options, program);
+          try {
+            await require('./tasks/static-tasks').compile();
+          } catch (error) {
+            log.errorAndExit('Static Site Generation failed', error);
+          }
+        });
+    }
+
     // This will tell you all that got `require()`-ed
     // We want to only load what we need - that's why not all `require` statements are at top
     // log.info('All that got `require()`-ed');

packages/build-tools/create-webpack-config.js

@@ -48,7 +48,7 @@ async function createWebpackConfig(buildConfig) {
   let langSuffix = `${config.lang ? '-' + config.lang : ''}`;
 
   let themifyOptions = {
-    watchForChanges: config.prod ? false : true,
+    watchForChanges: config.watch === true ? true : false,
     classPrefix: 't-bolt-',
     screwIE11: false,
     fallback: {
@@ -263,14 +263,14 @@ async function createWebpackConfig(buildConfig) {
     {
       loader: 'css-loader',
       options: {
-        sourceMap: true,
+        sourceMap: config.sourceMaps,
         modules: false, // needed for JS referencing classNames directly, such as critical fonts
       },
     },
     {
       loader: 'postcss-loader',
       options: {
-        sourceMap: true,
+        sourceMap: config.sourceMaps,
         plugins: () => [
           require('@bolt/postcss-themify')(themifyOptions),
           postcssDiscardDuplicates,
@@ -298,7 +298,7 @@ async function createWebpackConfig(buildConfig) {
     {
       loader: 'sass-loader',
       options: {
-        sourceMap: true,
+        sourceMap: config.sourceMaps,
         importer: [globImporter(), npmSass.importer],
         functions: sassExportData,
         precision: 3,
@@ -437,7 +437,7 @@ async function createWebpackConfig(buildConfig) {
     // Config recommendation based off of https://slack.engineering/keep-webpack-fast-a-field-guide-for-better-build-performance-f56a5995e8f1#f548
     webpackConfig.plugins.push(
       new UglifyJsPlugin({
-        sourceMap: true,
+        sourceMap: config.sourceMaps,
         parallel: true,
         cache: true,
         uglifyOptions: {
@@ -474,12 +474,11 @@ async function createWebpackConfig(buildConfig) {
     );
 
     // @todo Evaluate best source map approach for production
-    webpackConfig.devtool = 'hidden-source-map';
+    webpackConfig.devtool = config.sourceMaps === false ? '' : 'hidden-source-map';
   } else {
     // not prod
     // @todo fix source maps
-    // webpackConfig.devtool = 'cheap-module-eval-source-map';
-    webpackConfig.devtool = 'eval';
+    webpackConfig.devtool = config.sourceMaps === false ? '' : 'cheap-module-eval-source-map';
   }
 
   if (config.wwwDir) {

packages/build-tools/plugins/postcss-themify/src/index.js

@@ -565,7 +565,7 @@ const nonDefaultVariations = variationValues;
 module.exports = postcss.plugin('postcss-bolt-themify', opts => {
   options = buildOptions(opts);
 
-  if (options.watchForChanges && !isWatchingForChanges) {
+  if (options.watchForChanges === true && !isWatchingForChanges) {
     isWatchingForChanges = true;
     // console.log('watching for color palette changes...');
     watchColorPaletteFile(options.fallback.jsonPath, function() {

packages/build-tools/tasks/task-collections.js

@@ -96,7 +96,7 @@ async function clean() {
   }
 }
 
-async function serve(buildTime = timer.start(), localDev) {
+async function serve(buildTime = timer.start()) {
   config = config || (await getConfig());
   await getExtraTasks();
 
@@ -107,7 +107,7 @@ async function serve(buildTime = timer.start(), localDev) {
     }
     if (config.wwwDir) {
       serverTasks.push(extraTasks.server.serve());
-      if (config.webpackDevServer && localDev !== false) {
+      if (config.webpackDevServer && config.watch !== false) {
         serverTasks.push(webpackTasks.server(buildTime));
       }
     }
@@ -136,10 +136,8 @@ async function images() {
   }
 }
 
-async function build(localDev = false, shouldReturnTime = false) {
-  const startTime = timer.start();
+async function buildPrep() {
   config = config || (await getConfig());
-
   try {
     await getExtraTasks();
     config.prod ? await clean() : '';
@@ -149,14 +147,21 @@ async function build(localDev = false, shouldReturnTime = false) {
       process.cwd(),
       config.extraTwigNamespaces,
     );
+  } catch (error) {
+    log.errorAndExit('Build failed', error);
+  }
+}
 
-    config.prod || localDev === false ? await webpackTasks.compile() : '';
-
+async function build(shouldReturnTime = false) {
+  const startTime = timer.start();
+  config = config || (await getConfig());
+  try {
+    await buildPrep(startTime);
+    config.prod || config.watch === false ? await webpackTasks.compile() : '';
     await images();
-
-    if (config.prod || localDev === false) {
-      await compileBasedOnEnvironment();
-    }
+    config.prod || config.watch === false
+      ? await compileBasedOnEnvironment()
+      : '';
 
     if (shouldReturnTime) {
       return startTime;
@@ -208,7 +213,6 @@ async function start() {
   try {
     if (!config.quick) {
       buildTime = await build({
-        localDev: true,
         shouldReturnTime: true,
       });
     }
@@ -227,6 +231,7 @@ module.exports = {
   start,
   images,
   build,
+  buildPrep,
   watch,
   clean,
   criticalcss,

packages/build-tools/tasks/webpack-tasks.js

@@ -15,13 +15,18 @@ const timer = require('../utils/timer');
 const webpackServeWaitpage = require('./webpack-serve-waitpage');
 
 let config;
+let cachedWebpackConfigs;
 
-let webpackConfigs;
-async function compile() {
+async function compile(customConfig) {
+  let webpackConfigs;
   config = config || (await getConfig());
   config.devServer = false;
 
-  if (!webpackConfigs) {
+  if (customConfig) {
+    webpackConfigs = customConfig;
+  } else if (cachedWebpackConfigs) {
+    webpackConfigs = cachedWebpackConfigs;
+  } else {
     webpackConfigs = await createWebpackConfig(config);
   }
 
@@ -107,10 +112,16 @@ async function compile() {
 compile.description = 'Compile Webpack';
 compile.displayName = 'webpack:compile';
 
-async function watch() {
-  const config = await getConfig();
+async function watch(customConfig) {
+  let webpackConfigs;
+  config = config || (await getConfig());
+  config.devServer = false;
 
-  if (!webpackConfigs) {
+  if (customConfig) {
+    webpackConfigs = customConfig;
+  } else if (cachedWebpackConfigs) {
+    webpackConfigs = cachedWebpackConfigs;
+  } else {
     webpackConfigs = await createWebpackConfig(config);
   }
 
@@ -184,13 +195,17 @@ async function watch() {
 watch.description = 'Watch & fast re-compile Webpack';
 watch.displayName = 'webpack:watch';
 
-async function server(buildTime) {
+async function server(buildTime, customConfig) {
+  let webpackConfigs;
   let initialBuild = true;
   config = config || (await getConfig());
   config.devServer = true;
-  // const serverConfig = await getServerConfig(); // WIP: working on browsersync integration w/ Webpack
 
-  if (!webpackConfigs) {
+  if (customConfig) {
+    webpackConfigs = customConfig;
+  } else if (cachedWebpackConfigs) {
+    webpackConfigs = cachedWebpackConfigs;
+  } else {
     webpackConfigs = await createWebpackConfig(config);
   }
 
@@ -276,7 +291,7 @@ async function server(buildTime) {
               initialBuild
                 ? initialWebpackSpinnerFailed()
                 : webpackSpinnerFailed();
-              // Only keep the first error. Others are often indicative
+              // Only keep the first error. Oforre often indicative
               // of the same problem, but confuse the reader with noise.
               if (messages.errors.length > 1) {
                 messages.errors.length = 1;

packages/build-tools/utils/config-store.js

@@ -32,6 +32,8 @@ async function getDefaultConfig() {
       port: ports[0],
       proxyPort: ports[1],
       proxyHeader: configSchema.properties.proxyHeader.default,
+      watch: configSchema.properties.watch.default,
+      sourceMaps: configSchema.properties.sourceMaps.default,
       renderingServicePort: ports[2],
       i18n: configSchema.properties.i18n.default,
       renderingService: configSchema.properties.renderingService.default,

packages/build-tools/utils/config.schema.yml

@@ -17,6 +17,14 @@
       title: Array of language-specific builds to generate. The 1st langugage specified is the default used for local development.
       default:
         - en
+    watch:
+      type: boolean
+      description: Configures internal tasks to watch for changes vs exiting when finished.
+      default: false
+    sourceMaps:
+      type: boolean
+      description: When set to true, generates sourcemaps when CSS and JS files are compiled.
+      default: true
     i18n:
       type: boolean
       description: Should the design system's assets be compiled for multiple languages? Automatically defaults to false for local dev, true for prod.

travis.sh

@@ -1,10 +1,11 @@
 #!/usr/bin/env bash
 echo "===./travis.sh"
+echo "================"
+echo "===yarn run test"
+time yarn run test
 echo "===yarn run build"
 time yarn run build
 echo "---done: yarn run build"
-echo "===yarn run test"
-time yarn run test
 echo "---done: yarn run test"
 echo "===yarn run deploy"
 time yarn run deploy