@abcnews/aunty 13.2.2 → 14.0.1

package/README.md

@@ -120,7 +120,7 @@ If you don't need to override any of the project defaults, your entire aunty con
 | `hasBundleAnalysis` | `false`       | Setting this to true will spin up a second server on another port, allowing you to inspect your bundle. The address will be logged to the console when the dev server starts.                                                                  |
 | `host`              | `"localhost"` | The hostname of your dev server. If you're on the ABC internal network, the default will change to your machine's hostname (`ws<number>.aus.aunty.abc.net.au`). The `AUNTY_HOST` environment variable, if present, will override this setting. |
 | `hot`               | `true`        | Should the dev server enable hot reloading. If `NODE_ENV !== "development"`, the default will change to `false`.                                                                                                                               |
-| `https`             | `true`        | Should the dev server use SSL (with a self-signed certificate matching the `host`). You can alternatively supply your own `{cert: string, key: string` object if you've generated your certificate some other way.                             |
+| `https`             | `true`        | Should the dev server use SSL (with a self-signed certificate matching the `host`). You can alternatively supply your own `{cert: string, key: string}` object if you've generated your certificate some other way.                             |
 | `port`              | `8000`        | The port number of your dev server. If the port specified is unavailable, **aunty** will try incrementing the port number until it finds an available one. The `AUNTY_PORT` environment variable, if present, will override this setting.      |
 
 #### `deploy` config properties
@@ -156,7 +156,7 @@ Note: You may also need a `Promise` polyfill for IE11.
 
 ## Authors
 
-- Colin Gourlay ([gourlay.colin@abc.net.au](mailto:gourlay.colin@abc.net.au))
+- Colin Gourlay
 - Simon Elvery ([elvery.simon@abc.net.au](mailto:elvery.simon@abc.net.au))
 - Joshua Byrd ([byrd.joshua@abc.net.au](mailto:byrd.joshua@abc.net.au))
 - Nathan Hoad

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abcnews/aunty",
-  "version": "13.2.2",
+  "version": "14.0.1",
   "description": "A toolkit for working with ABC News projects",
   "repository": "abcnews/aunty",
   "license": "MIT",
@@ -70,8 +70,6 @@
     "node-fetch": "^2.6.0",
     "ora": "^5.0.0",
     "pify": "^5.0.0",
-    "postcss": "^8.3.6",
-    "postcss-loader": "^6.1.1",
     "prettier": "^2.0.5",
     "requireg": "^0.2.2",
     "rsyncwrapper": "^3.0.1",
@@ -92,9 +90,6 @@
     "yeoman-environment": "^3.2.0",
     "yeoman-generator": "^5.2.0"
   },
-  "optionalDependencies": {
-    "@abcaustralia/postcss-config": "^11.2.5"
-  },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
     "eslint": "^7.7.0",

package/src/cli/serve/constants.js

@@ -8,7 +8,7 @@ module.exports.BUNDLE_ANALYZER_CONFIG = {
 };
 
 module.exports.MESSAGES = {
-  port: port => `Port ${port} already in use attempting to use port ${port + 1}`,
+  port: ({ port, errorType }) => `Port ${port} could not be used (${errorType}). Attempting to use port ${port + 1}`,
   analysis: ({ analyzerHost, analyzerPort }) => `http://${analyzerHost}:${analyzerPort}`,
   serve: ({ bundleAnalysisPath, hot, publicPath }) => `Serve (${hvy(process.env.NODE_ENV)}):${
     bundleAnalysisPath

package/src/config/project.js

@@ -9,7 +9,7 @@ const mem = require('mem');
 
 // Ours
 const { hvy } = require('../utils/color');
-const { pretty, warn } = require('../utils/logging');
+const { pretty } = require('../utils/logging');
 const { combine } = require('../utils/structures');
 const { PROJECT_CONFIG_FILE_NAME } = require('../constants');
 

package/src/config/serve.js

@@ -12,7 +12,7 @@ const { combine } = require('../utils/structures');
 const { getProjectConfig } = require('./project');
 const { info } = require('../utils/logging');
 const { MESSAGES } = require('../cli/serve/constants');
-const {INTERNAL_TEST_HOST} = require('../constants')
+const { INTERNAL_TEST_HOST } = require('../constants');
 
 const HOME_DIR = homedir();
 const SSL_DIR = '.aunty/ssl';
@@ -38,10 +38,10 @@ const addEnvironmentVariables = config => {
 
 const getSSLPath = (module.exports.getSSLPath = (host, name) => join(HOME_DIR, SSL_DIR, host, name || '.'));
 
-/*
-Set config.https to cert & key generated with `aunty sign-cert` (if they both exist)
-We expect them to be in: ~/.aunty/ssl/<host>/server.{cert|key}
-*/
+/**
+ * Set config.https to cert & key generated with `aunty sign-cert` (if they both exist)
+ * We expect them to be in: ~/.aunty/ssl/<host>/server.{cert|key}
+ */
 const addUserSSLConfig = config => {
   if (config.https === true) {
     try {
@@ -55,13 +55,16 @@ const addUserSSLConfig = config => {
   return config;
 };
 
+/**
+ * Find an open port, or keep incrementing until we get one
+ */
 const findPort = async (port, max = port + 100, host = '0.0.0.0') => {
   return new Promise((resolve, reject) => {
     const socket = new Socket();
 
-    const next = () => {
+    const next = errorType => {
       socket.destroy();
-      info(MESSAGES.port(port));
+      info(MESSAGES.port({ port, errorType }));
       if (port <= max) resolve(findPort(port + 1, max, host));
       else reject(new Error('Could not find an available port'));
     };
@@ -72,7 +75,7 @@ const findPort = async (port, max = port + 100, host = '0.0.0.0') => {
     };
 
     // Port is taken if connection can be made
-    socket.once('connect', next);
+    socket.once('connect', () => next('in use'));
 
     // Port is open if connection attempt times out
     socket.setTimeout(500);
@@ -84,8 +87,8 @@ const findPort = async (port, max = port + 100, host = '0.0.0.0') => {
       if (e.code === 'ECONNREFUSED') {
         found();
       } else {
-        // Not sure what to do with other errors, so keep seeking a free port.
-        next();
+        // Not sure what to do with other errors. Log the code & keep seeking a free port.
+        next(`error code ${e.code}`);
       }
     });
 

package/src/config/webpack.js

@@ -4,7 +4,6 @@ const { join, resolve } = require('path');
 
 // External
 const importLazy = require('import-lazy')(require);
-const getContext = importLazy('@abcaustralia/postcss-config/getContext'); // optional dependency
 const CopyPlugin = importLazy('copy-webpack-plugin');
 const Dotenv = importLazy('dotenv-webpack');
 const ForkTsCheckerWebpackPlugin = importLazy('fork-ts-checker-webpack-plugin');
@@ -19,6 +18,10 @@ const { getBuildConfig } = require('./build');
 const { getProjectConfig } = require('./project');
 
 const JSX_RESOLVE_EXTENSIONS = ['.jsx', '.tsx'];
+
+/**
+ * Project types to override the Webpack config.
+ */
 const PROJECT_TYPES_CONFIG = {
   preact: {
     resolve: {
@@ -35,6 +38,11 @@ const PROJECT_TYPES_CONFIG = {
       extensions: JSX_RESOLVE_EXTENSIONS
     }
   },
+
+  /**
+   * Svelte uses a function to modify the existing config, rather than just merging in.
+   * @see combine
+   */
   svelte: config => {
     config.resolve = {
       // Make sure that only one copy of the Svelte runtime is bundled in the app
@@ -45,7 +53,8 @@ const PROJECT_TYPES_CONFIG = {
       extensions: [...config.resolve.extensions, '.svelte'],
       // When using Svelte components installed from npm, use the original component
       // source code, rather than consuming the already-compiled version
-      mainFields: ['svelte', 'browser', 'module', 'main']
+      mainFields: ['svelte', 'browser', 'module', 'main'],
+      conditionNames: ['svelte', 'browser', 'import']
     };
 
     const { include, loader, options } = getHintedRule(config, 'scripts');
@@ -168,6 +177,10 @@ function createWebpackConfig({ isModernJS } = {}) {
       module: {
         rules: [
           {
+            /**
+             * hints are used by PROJECT_TYPES_CONFIGs to quickly select the right config.
+             * @see PROJECT_TYPES_CONFIG
+             */
             __hint__: 'scripts',
             test: hasTS ? /\.m?[jt]sx?$/ : /\.m?jsx?$/,
             include: [resolve(root, from)].concat(resolveIncludedDependencies(includedDependencies, root)),
@@ -265,7 +278,6 @@ function createWebpackConfig({ isModernJS } = {}) {
         moduleIds: isProd ? 'deterministic' : 'named'
       }
     },
-    conditionallyEnableABCAustraliaStyles,
     PROJECT_TYPES_CONFIG[type],
     projectWebpackConfig
   );
@@ -287,74 +299,3 @@ function createWebpackConfig({ isModernJS } = {}) {
 function getHintedRule(config, hint) {
   return config.module.rules.find(rule => rule.__hint__ === hint);
 }
-
-const ABC_POSTCSS_CONTEXT_SUGGESTION = `
-
-To compile @abcaustralia/* styles, you need to add the following to your package.json:
-
-"abc": {
-  "css": {
-    "libraryDir": "./node_modules/@abcaustralia/nucleus/css",
-    "logVariables": "false"
-  }
-}
-`;
-
-function getABCAustraliaPostCSSContext(isDev) {
-  try {
-    return getContext(isDev);
-  } catch (err) {
-    if (err.message.indexOf('css') > -1) {
-      err.message += ABC_POSTCSS_CONTEXT_SUGGESTION;
-    }
-
-    throw err;
-  }
-}
-
-const ABC_PACKAGE_PATTERN = /(node_modules\/@abcaustralia\/*)/;
-
-function conditionallyEnableABCAustraliaStyles(config) {
-  const { pkg } = getProjectConfig();
-
-  // Only enable if we have an @abcaustralia/* dependency
-  if (!Object.keys(pkg.dependencies || {}).find(x => x.indexOf('@abcaustralia/') === 0)) {
-    return config;
-  }
-
-  const isProd = config.mode === 'production';
-  const stylesRule = getHintedRule(config, 'styles');
-
-  stylesRule.exclude = ABC_PACKAGE_PATTERN;
-
-  config.module.rules.push({
-    __hint__: 'styles/@abcaustralia',
-    test: /\.css$/,
-    include: ABC_PACKAGE_PATTERN,
-    use: [
-      stylesRule.use[0],
-      {
-        loader: require.resolve('css-loader'),
-        options: {
-          importLoaders: 1,
-          modules: {
-            exportLocalsConvention: 'camelCase',
-            localIdentName: `${isProd ? '' : '[name]__[local]--'}[contenthash:base64:5]`
-          },
-          url: false
-        }
-      },
-      {
-        loader: require.resolve('postcss-loader'),
-        options: {
-          postcssOptions: {
-            config: require.resolve('@abcaustralia/postcss-config'),
-            ...getABCAustraliaPostCSSContext(!isProd)
-          }
-        }
-      }
-    ]
-  });
-
-  return config;
-}

package/src/config/webpackDevServer.js

@@ -17,7 +17,8 @@ module.exports.getWebpackDevServerConfig = async () => {
       allowedHosts: 'all',
       client: {
         logging: 'warn',
-        overlay: true
+        overlay: true,
+        webSocketURL: `ws${https ? 's' : ''}://${host}:${port}/ws`
       },
       devMiddleware: {
         publicPath: `http${https ? 's' : ''}://${host}:${port}/`

package/src/generators/project/templates/_common/package.json

@@ -14,11 +14,5 @@
     "start": "aunty serve",
     "dev": "aunty serve",
     "test": "aunty test"
-  }<% if (projectType === "react") { %>,
-  "abc": {
-    "css": {
-      "libraryDir": "./node_modules/@abcaustralia/nucleus/css",
-      "logVariables": "false"
-    }
-  }<% } %>
+  }
 }

package/src/generators/project/templates/react/src/index.tsx

@@ -27,7 +27,7 @@ if (module.hot) {
   module.hot.accept('./components/App', () => {
     try {
       renderApp();
-    } catch (err) {
+    } catch (err<% if (isTS) { %>: any<% } %>) {
       import('./components/ErrorBox').then(({ default: ErrorBox }) => {
         root.render(<ErrorBox error={err} />);
       });

package/src/utils/structures.js

@@ -1,5 +1,12 @@
 const deepmerge = require('deepmerge');
 
+/**
+ * Merge a function or object into the target object
+ * @param target an object to merge into
+ * @param source an object to merge with `target`, or a function that takes `target` as an argument
+ * @param isDeep use deepmerge to merge
+ * @returns
+ */
 const combine = (target, source, isDeep) =>
   typeof source === 'function'
     ? source(target)
@@ -11,11 +18,18 @@ const combine = (target, source, isDeep) =>
 
 const combineDeep = (memo, source) => combine(memo, source, true);
 
+/**
+ * Shallow merge an array of objects. Earlier values overwritten by later values
+ * @param sources Array of objects and functions to be merged using `combine`
+ * @see combine
+ */
 module.exports.combine = (...sources) => sources.reduce(combine, {});
 
+/**
+ * Deep merge an array of objects. Earlier values overwritten by later values.
+ * @param sources Array of objects and functions to be merged using `combine`
+ * @see combine
+ */
 module.exports.merge = (...sources) => sources.reduce(combineDeep, {});
 
-module.exports.setOfKeysAndValues = source =>
-  new Set([].concat(Object.keys(source).map(key => source[key])).concat(Object.keys(source)));
-
 module.exports.setOfValues = source => new Set(Object.keys(source).map(key => source[key]));