@abcnews/aunty 13.1.1 → 13.2.0

package/README.md

@@ -59,7 +59,7 @@ module.exports = {
   // aunty command configuration
   build: {…},
   serve: {…},
-  deploy: {…},
+  deploy: [{…}],
   // internal tools configuration
   babel: {…},
   jest: {…},
@@ -75,7 +75,7 @@ module.exports = {
   "type": "<project_type>",
   "build": {…},
   "serve": {…},
-  "deploy": {…},
+  "deploy": [{…}],
   "babel": {…},
   "jest": {…},
   "webpack": {…},
@@ -85,7 +85,7 @@ module.exports = {
 
 Supported project `type`s (currently: `basic`, `preact`, `react` & `svelte`) have their own default build configuration, but you can override it by extending your project configuration.
 
-The `build`, `serve` and `deploy` properties allow you to override the default settings for those respective commands.
+The `build`, `serve` and `deploy` properties allow you to override the default settings for those respective commands. Their respective properties (and default values) are documented below.
 
 Aunty uses some tools internally, which you can also provide custom configuration for. If you supply an object for the `babel`, `jest`, `webpack`, and/or `webpackDevServer` properties, that object will be merged into the default configuration. Optionally, you can supply a function (for any property), which will be passed the default configuration for you to manually modify and return.
 
@@ -99,6 +99,45 @@ Overrides should be used sparingly, as the advantages of using a single-dependen
 
 If you don't need to override any of the project defaults, your entire aunty configuration can be a string containing the project type, as a shorthand for `{type: "<project_type>"}`. `type` is the only required property in your aunty configuration.
 
+#### `build` config properties
+
+| property               | default          | description                                                                                                                                                                     |
+| ---------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `entry`                | `"index"`        | The entry file for your project (extension should be unspecified). You can optionally supply an array for multiple entry points, which will result in multiple outputs.         |
+| `from`                 | `"src"`          | The source directory that aunty will look for your entry file(s) in.                                                                                                            |
+| `to`                   | `".aunty/build"` | The destination directory for your compiled and static assets.                                                                                                                  |
+| `staticDir`            | `"public"`       | The directory you store static assets in. You can optionally supply an array of directories, which will be merged at build time.                                                |
+| `addModernJS`          | `false`          | Setting this to true will enable a 2nd output file for each entry file named `{name}.modern.js`, which is skips browserlist-based feature polyfilling                           |
+| `includedDependencies` | `[]`             | Any packages (defined by name string or name-matching `RegExp`s) you add to this array will be transpiled in the same manner as the project source.                             |
+| `extractCSS`           | `false`          | Setting this to true will create a separate `{name}.css` output for each input, rather than bundling it with the JS (for dynamic `<style>` insertion).                          |
+| `useCSSModules`        | `true`           | Setting this to false will turn off CSS module compilation. All styles written will be 'global', and importing CSS files will not give you an object of `className` references. |
+| `showDeprecations`     | `false`          | Setting this to true will allow NodeJS to output stack traces of deprecation warnings.                                                                                          |
+
+#### `serve` config properties
+
+| property            | default       | description                                                                                                                                                                                                                                    |
+| ------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `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.                             |
+| `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
+
+`deploy` should be an array of config objects, one for each deployment target (e.g. ContentFTP)
+
+| property            | default                 | description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `from`              | build config `to` value | The directory to deploy files from (if you haven't overridden the build `to` value, it should be ".aunty/build")                                                                                                                                                                                                                                                                                                                                                                                        |
+| `files`             | `"**"`                  | A glob matching the files under your `from` directory to deploy                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| `profile`           | `"contentftp"`          | This should be the name of a key in your `~/.abc-credentials` file, which will be consulted to populate login credentials. If this is `"contentftp"` it will also populate the config's `to` and `resolvePublicPath` properties.                                                                                                                                                                                                                                                                        |
+| `publicPath`        | `"/"`                   | If `resolvePublicPath` is defined, `publicPath` will be overwritten by the return value of that function.                                                                                                                                                                                                                                                                                                                                                                                               |
+| `resolvePublicPath` | `undefined`             | A function which takes the initial config as an object, and returns an updated `publicPath`. If `profile="contentftp"`, this will be a function that knows how ContentFTP directories map onto ABC URLs.                                                                                                                                                                                                                                                                                                |
+| `to`                | `undefined`             | The directory on your target to deploy files to. If `profile="contentftp"` , this will be a versioned directory where we deploy News projects to. If you set this to a string, the patterns `<name>` and `<id>` will be replaced by the project name, and the current deployment ID, respectively. During releases, `id` is the current version; during development, it's the current git branch name. You can also specify a custom deployment ID by using the `--id` flag when running `aunty build`. |
+
+You _could_ also specify `type` (`"ftp"`/`"ssh"`), `host`, `port`, `username` & `password`, but these are best left inside your `.abc-credentials` file.
+
 ### Generators
 
 Aunty comes with a few basic generators. Run `aunty generate --help` for the full list, or `aunty generate <generator> --help` for further details.
@@ -115,46 +154,12 @@ import 'regenerator-runtime/runtime';
 
 Note: You may also need a `Promise` polyfill for IE11.
 
-### Multiple entry points
-
-By default Aunty looks for `index.js` in `src/`. Enable multiple entry points by adding a `build::entry` config to `aunty.config.js`.
-
-#### Replace 'index' with 'story'
-
-```js
-module.exports = {
-  build: {
-    entry: 'story' // will now also support `['story']`
-  }
-};
-```
-
-#### Replace 'index' with 'story', 'editor', 'graphic' & 'polyfills'
-
-```js
-module.exports = {
-  build: {
-    entry: ['story', 'editor', 'graphic', 'polyfills']
-  }
-};
-```
-
-#### Retain 'index'; add 'editor', 'graphic' & 'polyfills'
-
-```js
-module.exports = {
-  build: {
-    entry: ['index', 'editor', 'graphic', 'polyfills']
-  }
-};
-```
-
 ## Authors
 
 - Colin Gourlay ([gourlay.colin@abc.net.au](mailto:gourlay.colin@abc.net.au))
-- Nathan Hoad ([hoad.nathan@abc.net.au](mailto:hoad.nathan@abc.net.au))
 - 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
 
 ## Thanks
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abcnews/aunty",
-  "version": "13.1.1",
+  "version": "13.2.0",
   "description": "A toolkit for working with ABC News projects",
   "repository": "abcnews/aunty",
   "license": "MIT",
@@ -50,6 +50,8 @@
     "csv-loader": "^3.0.3",
     "deepmerge": "^4.0.0",
     "del": "^6.0.0",
+    "dotenv": "^16.0.3",
+    "dotenv-webpack": "^8.0.1",
     "execa": "^5.0.0",
     "fork-ts-checker-webpack-plugin": "^6.2.1",
     "ftp-deploy": "^2.3.8",

package/src/cli/clean/index.js

@@ -5,9 +5,7 @@ const del = importLazy('del');
 // Ours
 const { getProjectConfig } = require('../../config/project');
 const { OUTPUT_DIRECTORY_NAME } = require('../../constants');
-const { hvy } = require('../../utils/color');
 const { dry, info, spin } = require('../../utils/logging');
-const { inlineList } = require('../../utils/text');
 const { command } = require('../');
 const { MESSAGES } = require('./constants');
 

package/src/cli/constants.js

@@ -1,7 +1,7 @@
 // Ours
 const { createLogo } = require('../utils/branding');
 const { cmd, dim, hvy, opt, req, sec } = require('../utils/color');
-const { combine, setOfValues } = require('../utils/structures');
+const { setOfValues } = require('../utils/structures');
 
 const COMMAND_ALIASES = (module.exports.COMMAND_ALIASES = {
   b: 'build',
@@ -66,7 +66,7 @@ ${sec('Development commands')}
   ${
     isProject
       ? `${cmd('aunty generate')} ${req('<generator>')}
-    Generate code for your project or Core Media 
+    Generate code for your project or Core Media
 
   ${cmd('aunty clean')}
     Delete the current project's build output directories.
@@ -98,7 +98,7 @@ ${sec('Helper commands')}
 
   ${cmd('aunty help')} ${req('<command>')}
     Display complete help for this ${req('command')}.
-  
+
   ${cmd('aunty sign-cert')} # Mac OS only (for now)
     Create a consistent SSL certificate for the dev server
 `

package/src/cli/deploy/constants.js

@@ -1,8 +1,4 @@
-// Native
-const { join } = require('path');
-
 // Ours
-const { DEPLOY_FILE_NAME } = require('../../constants');
 const { cmd, hvy, opt, req, sec } = require('../../utils/color');
 const { styleLastSegment } = require('../../utils/text');
 
@@ -38,6 +34,7 @@ module.exports.MESSAGES = {
 
 ${sec('Options')}
 
-  ${opt('-d')}, ${opt('--dry')}  Output the deploy configuration, then exit
+  ${opt('-d')}, ${opt('--dry')}    Output the deploy configuration, then exit
+  ${opt('-f')}, ${opt('--force')}  Do not prompt to overwrite ftp deploy directory ${opt('[default: false]')}
 `
 };

package/src/cli/deploy/index.js

@@ -14,13 +14,11 @@ const { command } = require('../');
 const { addProfileProperties } = require('../../config/deploy');
 const { getProjectConfig } = require('../../config/project');
 const { DEPLOY_FILE_NAME, OUTPUT_DIRECTORY_NAME } = require('../../constants');
-const { packs, throws, unpack } = require('../../utils/async');
+const { throws } = require('../../utils/async');
 const { dry, info, spin, warn, log, error } = require('../../utils/logging');
 const { ftp, rsync } = require('../../utils/remote');
-const { combine } = require('../../utils/structures');
-const { DEFAULTS, MESSAGES, VALID_TYPES } = require('./constants');
-const { dim, opt } = require('../../utils/color');
-const { check } = require('prettier');
+const { MESSAGES, VALID_TYPES } = require('./constants');
+const { dim, opt, hvy, req } = require('../../utils/color');
 
 module.exports = command(
   {
@@ -91,8 +89,9 @@ module.exports = command(
       const { publicPath, type, to } = target;
       let shouldOverwrite = false;
 
-      // If not ftp don't worry about checking external directory
-      if (type === 'ftp') {
+      // Check if the deployment already exists
+      if (argv.force) shouldOverwrite = true;
+      else if (type === 'ftp') {
         const [checkErr] = await wrap(deploymentExists(to));
 
         if (checkErr) {
@@ -103,7 +102,8 @@ module.exports = command(
             error('An FTP error ocurred');
           }
         } else {
-          warn('Destination directory exists? OK to overwrite?');
+          warn('Destination directory exists. OK to overwrite?');
+          log(`  ┗ ${hvy('dir')}: ${req(to)}`);
 
           const overwriteSelection = (
             await cliSelect({
@@ -122,7 +122,10 @@ module.exports = command(
         }
       }
 
-      if (shouldOverwrite || type === 'ssh') {
+      // Overwrite by default if ssh for now
+      if (type === 'ssh') shouldOverwrite = true;
+
+      if (shouldOverwrite) {
         info(MESSAGES.deploy(target));
 
         const spinner = spin('Deploying');

package/src/cli/generate/constants.js

@@ -1,6 +1,6 @@
 // Ours
 const { cmd, hvy, opt, req, sec } = require('../../utils/color');
-const { combine, setOfValues } = require('../../utils/structures');
+const { setOfValues } = require('../../utils/structures');
 
 module.exports.OPTIONS = {
   boolean: ['announce'],

package/src/cli/generate/index.js

@@ -22,7 +22,6 @@ module.exports = command(
     }
 
     const generatorName = GENERATOR_ALIASES[argv._[0]] || argv._[0];
-    const generatorArgs = argv['--'];
 
     // If we didn't supply a known generator name, blow up, unless we wanted
     // the generate command's usage message (in which case, print it, then exit).

package/src/cli/index.js

@@ -1,3 +1,6 @@
+// Env
+require('dotenv').config();
+
 // Native
 const { resolve } = require('path');
 

package/src/cli/serve/constants.js

@@ -1,11 +1,11 @@
 // Ours
 const { cmd, hvy, opt, sec } = require('../../utils/color');
 
-const BUNDLE_ANALYZER_CONFIG = (module.exports.BUNDLE_ANALYZER_CONFIG = {
+module.exports.BUNDLE_ANALYZER_CONFIG = {
   analyzerHost: '127.0.0.1',
   logLevel: 'error',
   openAnalyzer: false
-});
+};
 
 module.exports.MESSAGES = {
   port: port => `Port ${port} already in use attempting to use port ${port + 1}`,

package/src/cli/serve/index.js

@@ -9,7 +9,6 @@ const { getServeConfig } = require('../../config/serve');
 const { getWebpackConfig } = require('../../config/webpack');
 const { getWebpackDevServerConfig } = require('../../config/webpackDevServer');
 const { throws } = require('../../utils/async');
-const { cmd } = require('../../utils/color');
 const { dry, info, spin } = require('../../utils/logging');
 const { combine } = require('../../utils/structures');
 const { command } = require('../');

package/src/cli/sign-cert/index.js

@@ -7,7 +7,6 @@ const makeDir = importLazy('make-dir');
 
 // Ours
 const { DEFAULT_HOST, SERVER_CERT_FILENAME, SERVER_KEY_FILENAME, getSSLPath } = require('../../config/serve');
-const { hvy } = require('../../utils/color');
 const { dry, info, spin } = require('../../utils/logging');
 const { command } = require('../');
 const { MESSAGES } = require('./constants');

package/src/config/jest/index.js

@@ -3,7 +3,7 @@ const { merge } = require('../../utils/structures');
 const { getProjectConfig } = require('../project');
 
 module.exports.getJestConfig = () => {
-  const { jest: projectJestConfig, root, type } = getProjectConfig();
+  const { jest: projectJestConfig, root } = getProjectConfig();
   const defaultTransformerPath = require.resolve('./transformer-default');
 
   return merge(

package/src/config/jest/transformer-svelte.js

@@ -5,7 +5,6 @@ const { basename } = require('path');
 // External
 const importLazy = require('import-lazy')(require);
 const svelte = importLazy('svelte/compiler');
-const sveltePreprocess = importLazy('svelte-preprocess');
 
 module.exports = {
   process(src, filename) {

package/src/config/serve.js

@@ -12,13 +12,14 @@ 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 HOME_DIR = homedir();
 const SSL_DIR = '.aunty/ssl';
 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}`)
+const DEFAULT_HOST = (module.exports.DEFAULT_HOST = probe(INTERNAL_TEST_HOST)
   ? `${hostname().toLowerCase().split('.')[0]}${INTERNAL_SUFFIX}` // hostname _may_ include INTERNAL_SUFFIX
   : 'localhost');
 const DEFAULT_PORT = 8000;

package/src/config/webpack.js

@@ -6,6 +6,7 @@ const { join, resolve } = require('path');
 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');
 const MiniCssExtractPlugin = importLazy('mini-css-extract-plugin');
 const sveltePreprocess = importLazy('svelte-preprocess');
@@ -231,6 +232,7 @@ function createWebpackConfig({ isModernJS } = {}) {
       },
       plugins: [
         new EnvironmentPlugin(Object.keys(process.env)),
+        new Dotenv(),
         hasTS
           ? new ForkTsCheckerWebpackPlugin({
               logger: { infrastructure: 'silent', issues: 'silent' },
@@ -248,11 +250,9 @@ function createWebpackConfig({ isModernJS } = {}) {
             })
           : null,
         new CopyPlugin({
-          patterns: [
-            {
-              from: join(root, staticDir)
-            }
-          ]
+          patterns: (Array.isArray(staticDir) ? staticDir : [staticDir]).map(dirName => ({
+            from: join(root, dirName)
+          }))
         })
       ].filter(x => x),
       optimization: {

package/src/config/webpackDevServer.js

@@ -36,9 +36,9 @@ module.exports.getWebpackDevServerConfig = async () => {
             }
           : 'https'
         : 'http',
-      static: {
-        directory: join(root, staticDir)
-      }
+      static: (Array.isArray(staticDir) ? staticDir : [staticDir]).map(dirName => ({
+        directory: join(root, dirName)
+      }))
     },
     projectWebpackDevServerConfig
   );

package/src/constants.js

@@ -2,5 +2,6 @@ module.exports = {
   OUTPUT_DIRECTORY_NAME: '.aunty',
   BUILD_DIRECTORY_NAME: 'build',
   DEPLOY_FILE_NAME: 'deploy.json',
-  PROJECT_CONFIG_FILE_NAME: 'aunty.config.js'
+  PROJECT_CONFIG_FILE_NAME: 'aunty.config.js',
+  INTERNAL_TEST_HOST: 'master-news-web.news-web-developer.presentation-layer.abc-prod.net.au'
 };

package/src/generators/project/index.js

@@ -11,13 +11,13 @@ const importLazy = require('import-lazy')(require);
 
 // Ours
 const { OUTPUT_DIRECTORY_NAME } = require('../../constants');
-const { cmd, hvy, opt, sec } = require('../../utils/color');
+const { cmd, hvy, opt } = require('../../utils/color');
 const { success } = require('../../utils/logging');
 const { installDependencies } = require('../../utils/npm');
 const { combine } = require('../../utils/structures');
 const { sluggify } = require('../../utils/text');
 const { projectExists } = require('../../utils/ftp');
-const { warn, info, error } = importLazy('../../utils/logging');
+const { log, warn, info } = importLazy('../../utils/logging');
 
 module.exports = class extends Generator {
   constructor(args, opts) {
@@ -30,8 +30,8 @@ module.exports = class extends Generator {
       description: `Project name. Create this directory if ${opt('--here')} is not specified`,
       required: false
     });
-    this.option('here', { description: `Assume ${opt('<name>')} is current working directory` });
-    this.option('template', { description: 'Type of project [basic|preact|react|svelte]' });
+    this.option('here', { description: `Assume ${opt('<name>')} is current working directory`, type: Boolean });
+    this.option('template', { description: 'Type of project [basic|preact|react|svelte]', type: String });
   }
 
   usage() {
@@ -53,7 +53,8 @@ Shorthand examples (assuming xyz is your project name):
     if (this.options.here) {
       const currentDirectory = path.basename(process.cwd());
 
-      info(`Info: Using currect directory name as project name:`, currentDirectory, '\n');
+      info(`Info: Using currect directory name as project name:`, currentDirectory);
+      log('Checking project name. This may take a few seconds...');
 
       const [err, exists] = await wrap(projectExists(sluggify(currentDirectory)));
 
@@ -64,12 +65,11 @@ Shorthand examples (assuming xyz is your project name):
             'Press ctrl+c to exit and rename project directory.'
         );
 
-      if (err) {
+      if (err)
         warn(
           'Warning: Unable to check if project name already exists, most likely ' +
             'due to a connection or credentials error. Please check manually before deploying.\n'
         );
-      }
 
       this.options.projectName = currentDirectory;
     } else {
@@ -79,6 +79,8 @@ Shorthand examples (assuming xyz is your project name):
         message: 'What is your project called?',
         default: this.options.projectName || 'New Project',
         validate: async input => {
+          log('\nChecking project name. This may take a few seconds...');
+
           const [err, exists] = await wrap(projectExists(sluggify(input)));
 
           if (exists)
@@ -87,12 +89,11 @@ Shorthand examples (assuming xyz is your project name):
               'danger of being overwritten. Please try a different name.'
             );
 
-          if (err) {
+          if (err)
             warn(
               'Warning: Unable to check if project name already exists, most likely ' +
                 'due to a connection or credentials error. Please check manually before deploying.\n'
             );
-          }
 
           return true;
         }

package/src/generators/project/templates/_common/_.gitignore

@@ -1,6 +1,9 @@
 # dependencies
 /node_modules
 
+# environment
+.env
+
 # output
 /<%= OUTPUT_DIRECTORY_NAME %>
 

package/src/utils/ftp.js

@@ -1,9 +1,10 @@
-// @ts-check
-
+// External
 const ftp = require('basic-ftp');
 const { to: wrap } = require('await-to-js');
+const { probe } = require('tcp-ping-sync');
 
 const { addProfileProperties, addKnownProfileProperties } = require('../config/deploy');
+const { INTERNAL_TEST_HOST } = require('../constants');
 
 /**
  * Check if a project exists on FTP
@@ -11,6 +12,10 @@ const { addProfileProperties, addKnownProfileProperties } = require('../config/d
  * @returns {Promise<boolean>}
  */
 const projectExists = async projectNameSlug => {
+  // If not on internal network FTP won't connect, so bail out
+  const isOnInternalNetwork = probe(INTERNAL_TEST_HOST);
+  if (!isOnInternalNetwork) throw new Error('Not on internal network');
+
   const config = addProfileProperties(addKnownProfileProperties({}));
   const { host, username: user, password, to } = config;
   const [baseDir] = to.split('<name>');