@abcnews/aunty 12.0.3 → 12.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abcnews/aunty",
-  "version": "12.0.3",
+  "version": "12.1.2",
   "description": "A toolkit for working with ABC News projects",
   "repository": "abcnews/aunty",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^26.1.0",
     "babel-loader": "^8.2.2",
-    "chalk": "^4.1.0",
+    "chalk": "^4.1.2",
     "cli-select": "^1.1.0",
     "copy-webpack-plugin": "^8.1.1",
     "css-loader": "^5.2.1",
@@ -49,7 +49,7 @@
     "execa": "^5.0.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.2.1",
-    "ftp-deploy": "^2.3.3",
+    "ftp-deploy": "^2.3.8",
     "get-all-paths": "^1.0.1",
     "guess-root-path": "^1.0.0",
     "html-loader": "^2.1.2",
@@ -66,8 +66,8 @@
     "node-fetch": "^2.6.0",
     "ora": "^5.0.0",
     "pify": "^5.0.0",
-    "postcss": "^8.2.4",
-    "postcss-loader": "^4.1.0",
+    "postcss": "^8.3.6",
+    "postcss-loader": "^6.1.1",
     "prettier": "^2.0.5",
     "requireg": "^0.2.2",
     "rsyncwrapper": "^3.0.1",
@@ -83,14 +83,14 @@
     "update-notifier": "^5.1.0",
     "url-loader": "^4.1.1",
     "webpack": "^5.33.2",
-    "webpack-bundle-analyzer": "^4.4.1",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-dev-server": "^4.6.0",
     "write-json-file": "^4.2.0",
     "yeoman-environment": "^3.2.0",
     "yeoman-generator": "^5.2.0"
   },
   "optionalDependencies": {
-    "@abcaustralia/postcss-config": "^4.1.0"
+    "@abcaustralia/postcss-config": "^11.2.5"
   },
   "devDependencies": {
     "eslint": "^7.7.0",

package/src/cli/serve/constants.js

@@ -3,15 +3,20 @@ const { cmd, hvy, opt, sec } = require('../../utils/color');
 
 const BUNDLE_ANALYZER_CONFIG = (module.exports.BUNDLE_ANALYZER_CONFIG = {
   analyzerHost: '127.0.0.1',
-  logLevel: 'warn',
+  logLevel: 'error',
   openAnalyzer: false
 });
 
 module.exports.MESSAGES = {
   analysis: ({ analyzerHost, analyzerPort }) => `http://${analyzerHost}:${analyzerPort}`,
-  serve: ({ hot, bundleAnalysisPath }) => `Serve (${hvy(process.env.NODE_ENV)}):
+  serve: ({ bundleAnalysisPath, hot, publicPath }) => `Serve (${hvy(process.env.NODE_ENV)}):${
+    bundleAnalysisPath
+      ? `
+  ┣ ${hvy('bundle analysis')}: ${bundleAnalysisPath}`
+      : ''
+  }
   ┣ ${hvy('hot')}: ${cmd(hot ? 'yes' : 'no')}
-  ┗ ${hvy('bundle analysis')}: ${bundleAnalysisPath}`,
+  ┗ ${hvy('publicPath')}: ${publicPath}`,
   // TODO: Add aunty config section to usage
   usage: name => `Usage: ${cmd(`aunty ${name}`)} ${opt('[options]')}
 

package/src/cli/serve/index.js

@@ -23,69 +23,74 @@ module.exports = command(
     usage: MESSAGES.usage
   },
   async argv => {
-    const { port } = getServeConfig();
+    const { hasBundleAnalysis, port } = getServeConfig();
     const webpackConfig = getWebpackConfig();
     const webpackDevServerConfig = getWebpackDevServerConfig();
-    const { hot, publicPath } = webpackDevServerConfig;
-    const bundleAnalyzerConfig = combine(BUNDLE_ANALYZER_CONFIG, {
-      analyzerPort: +port + Math.floor(port / 1000) * 100 // e.g. 8000 -> 8800
-    });
+    const { hot, devMiddleware } = webpackDevServerConfig;
+    const { publicPath } = devMiddleware;
+    const bundleAnalyzerConfig = hasBundleAnalysis
+      ? combine(BUNDLE_ANALYZER_CONFIG, {
+          analyzerPort: +port + Math.floor(port / 1000) * 100 // e.g. 8000 -> 8800
+        })
+      : null;
 
     webpackConfig.forEach((config, index) => {
       config.output.publicPath = publicPath;
 
-      if (hot) {
-        config.entry = upgradeEntryToHot(config.entry, config.output.publicPath);
-        config.plugins.push(new webpack.HotModuleReplacementPlugin());
+      config.infrastructureLogging = {
+        level: 'warn'
+      };
+
+      if (bundleAnalyzerConfig) {
+        config.plugins.push(
+          new BundleAnalyzerPlugin(
+            combine(bundleAnalyzerConfig, {
+              analyzerPort: bundleAnalyzerConfig.analyzerPort + index * 10 // e.g. 8800, 8810...
+            })
+          )
+        );
       }
-
-      config.plugins.push(
-        new BundleAnalyzerPlugin(
-          combine(bundleAnalyzerConfig, {
-            analyzerPort: bundleAnalyzerConfig.analyzerPort + index * 10 // e.g. 8800, 8810...
-          })
-        )
-      );
     });
 
     if (argv.dry) {
       return dry({
         'Webpack config': webpackConfig,
         'WebpackDevServer config': webpackDevServerConfig,
-        'BundleAnalyzerPlugin config': bundleAnalyzerConfig
+        ...(bundleAnalyzerConfig
+          ? {
+              'BundleAnalyzerPlugin config': bundleAnalyzerConfig
+            }
+          : {})
       });
     }
 
     throws(await cleanCommand(['--quiet']));
 
-    info(MESSAGES.serve({ hot, bundleAnalysisPath: MESSAGES.analysis(bundleAnalyzerConfig) }));
+    info(
+      MESSAGES.serve({
+        bundleAnalysisPath: bundleAnalyzerConfig ? MESSAGES.analysis(bundleAnalyzerConfig) : null,
+        hot,
+        publicPath
+      })
+    );
 
     const compiler = webpack(webpackConfig);
-    const server = new WebpackDevServer(compiler, webpackDevServerConfig);
-
-    // Grab reference to native info logger
-    const _info = console.info;
-    let spinner;
+    const server = new WebpackDevServer(webpackDevServerConfig, compiler);
+    const [gracefullyInterrupt, restore] = gracefullyHandleLogging();
 
     return new Promise((resolve, reject) => {
-      server.listen(port, '0.0.0.0', err => {
+      server.startCallback(err => {
         if (err) {
           return reject(err);
         }
 
-        // Start spinner
         spinner = spin('Server running');
-
-        // Gracefully interrupt spinner to log info
-        console.info = msg => {
-          spinner.clear();
-          _info(msg);
-          spinner.start();
-        };
+        gracefullyInterrupt(spinner);
       });
 
-      process.on('SIGINT', function() {
-        server.close(function() {
+      process.on('SIGINT', () => {
+        spinner.clear();
+        server.stopCallback(() => {
           if (spinner) {
             spinner.succeed('Server closed');
           }
@@ -93,28 +98,32 @@ module.exports = command(
           resolve();
         });
       });
-    }).finally(() => {
-      // Always restore native info logger
-      console.info = _info;
-    });
+    }).finally(() => restore());
   }
 );
 
-function upgradeEntryToHot(entry, publicPath) {
-  const heat = [
-    `${require.resolve('webpack-dev-server/client')}?${publicPath}`,
-    require.resolve('webpack/hot/dev-server')
-  ];
+const gracefullyHandleLogging = () => {
+  const METHODS = ['debug', 'error', 'info', 'log', 'warn'];
+  const reference = {};
 
-  if (Array.isArray(entry) || typeof entry === 'string') {
-    return heat.concat(Array.isArray(entry) ? entry : [entry]);
+  for (let method of METHODS) {
+    reference[method] = console[method];
   }
 
-  return Object.keys(entry).reduce((memo, key) => {
-    const value = entry[key];
-
-    memo[key] = heat.concat(Array.isArray(value) ? value : [value]);
-
-    return memo;
-  }, {});
-}
+  return [
+    spinner => {
+      for (let method of METHODS) {
+        console[method] = (...args) => {
+          spinner.clear();
+          reference[method](...args);
+          spinner.start();
+        };
+      }
+    },
+    () => {
+      for (let method of METHODS) {
+        console[method] = reference[method];
+      }
+    }
+  ];
+};

package/src/config/serve.js

@@ -16,11 +16,7 @@ const SERVER_CERT_FILENAME = (module.exports.SERVER_CERT_FILENAME = 'server.crt'
 const SERVER_KEY_FILENAME = (module.exports.SERVER_KEY_FILENAME = 'server.key');
 const INTERNAL_SUFFIX = '.aus.aunty.abc.net.au';
 const DEFAULT_HOST = (module.exports.DEFAULT_HOST = probe(`nucwed${INTERNAL_SUFFIX}`)
-  ? `${
-      hostname()
-        .toLowerCase()
-        .split('.')[0]
-    }${INTERNAL_SUFFIX}` // hostname _may_ include INTERNAL_SUFFIX
+  ? `${hostname().toLowerCase().split('.')[0]}${INTERNAL_SUFFIX}` // hostname _may_ include INTERNAL_SUFFIX
   : 'localhost');
 const DEFAULT_PORT = 8000;
 
@@ -29,6 +25,7 @@ module.exports.getServeConfig = () => {
 
   return combine(
     {
+      hasBundleAnalysis: false,
       host: DEFAULT_HOST,
       hot: process.env.NODE_ENV === 'development',
       https: true,

package/src/config/webpackDevServer.js

@@ -14,20 +14,30 @@ module.exports.getWebpackDevServerConfig = () => {
 
   return combine(
     {
-      contentBase: join(root, staticDir),
-      disableHostCheck: true,
+      allowedHosts: 'all',
+      client: {
+        logging: 'warn',
+        overlay: true
+      },
+      devMiddleware: {
+        publicPath: `http${https ? 's' : ''}://${host}:${port}/`
+      },
       headers: {
         'Access-Control-Allow-Origin': '*'
       },
-      host,
+      host: '0.0.0.0',
       hot,
-      https,
-      noInfo: true,
-      overlay: true,
-      publicPath: `http${https ? 's' : ''}://${host}:${port}/`,
-      quiet: true,
-      watchOptions: {
-        ignored: /node_modules/
+      port,
+      server: https
+        ? typeof https === 'object'
+          ? {
+              type: 'https',
+              options: https
+            }
+          : 'https'
+        : 'http',
+      static: {
+        directory: join(root, staticDir)
       }
     },
     projectWebpackDevServerConfig

package/src/generators/project/index.js

@@ -74,7 +74,7 @@ Shorthand examples (assuming xyz is your project name):
       type: 'confirm',
       name: 'typescript',
       message: 'Will you be authoring your project in TypeScript?',
-      default: false
+      default: true
     });
 
     prompts.push({

package/src/generators/project/templates/basic/src/index.ts

@@ -27,7 +27,7 @@ if (module.hot) {
       renderApp();
     } catch (err) {
       import('./components/ErrorBox').then(({ default: ErrorBox }) => {
-        render(new ErrorBox({ error: err }).el, appMountEl);
+        render(new ErrorBox({ error: err<% if (isTS) { %> as Error<% } %> }).el, appMountEl);
       });
     }
   });