@abcnews/aunty 12.1.1 → 12.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abcnews/aunty",
-  "version": "12.1.1",
+  "version": "12.2.0",
   "description": "A toolkit for working with ABC News projects",
   "repository": "abcnews/aunty",
   "license": "MIT",

package/src/cli/release/constants.js

@@ -2,7 +2,7 @@
 const { cmd, hvy, ok, opt, sec } = require('../../utils/color');
 
 const FORCE_REMINDER = `Use the ${opt('--force')} option to ignore warnings or release without tagging.`;
-const VALID_BUMPS = (module.exports.VALID_BUMPS = new Set(['major', 'minor', 'patch']));
+const VALID_BUMPS = (module.exports.VALID_BUMPS = new Set(['major', 'minor', 'patch','prerelease']));
 
 const OPTIONS = (module.exports.OPTIONS = {
   string: ['bump', 'git-remote'],

package/src/cli/release/index.js

@@ -1,4 +1,5 @@
 // Native
+const { existsSync } = require('fs');
 const { join } = require('path');
 
 // External
@@ -154,4 +155,8 @@ module.exports = command(
   }
 );
 
-const updateJsonFile = (path, source) => writeJsonFile.sync(path, combine(loadJsonFile.sync(path), source));
+const updateJsonFile = (path, source) => {
+  if (existsSync(path)) {
+    writeJsonFile.sync(path, combine(loadJsonFile.sync(path), source));
+  }
+};

package/src/cli/serve/constants.js

@@ -8,6 +8,7 @@ const BUNDLE_ANALYZER_CONFIG = (module.exports.BUNDLE_ANALYZER_CONFIG = {
 });
 
 module.exports.MESSAGES = {
+  port: port => `Port ${port} already in use 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/cli/serve/index.js

@@ -23,9 +23,9 @@ module.exports = command(
     usage: MESSAGES.usage
   },
   async argv => {
-    const { hasBundleAnalysis, port } = getServeConfig();
+    const { hasBundleAnalysis, port } = await getServeConfig();
     const webpackConfig = getWebpackConfig();
-    const webpackDevServerConfig = getWebpackDevServerConfig();
+    const webpackDevServerConfig = await getWebpackDevServerConfig();
     const { hot, devMiddleware } = webpackDevServerConfig;
     const { publicPath } = devMiddleware;
     const bundleAnalyzerConfig = hasBundleAnalysis

package/src/config/deploy.js

@@ -95,9 +95,11 @@ const addKnownProfileProperties = config => {
 function resolveProperties(config) {
   const { pkg, root } = getProjectConfig();
   const { name } = pkg;
+  // Package name may be in `@scope/name` format
+  const unscopedName = name.split('/').reverse()[0];
 
   config.from = join(root, config.from);
-  config.to = config.to.replace('<name>', name).replace('<id>', config.id);
+  config.to = config.to.replace('<name>', unscopedName).replace('<id>', config.id);
   config.publicPath = typeof config.resolvePublicPath === 'function' ? config.resolvePublicPath(config) : '/';
 
   return config;

package/src/config/serve.js

@@ -2,6 +2,7 @@
 const { homedir, hostname } = require('os');
 const { readFileSync } = require('fs');
 const { join } = require('path');
+const { Socket } = require('net');
 
 // External
 const { probe } = require('tcp-ping-sync');
@@ -9,6 +10,8 @@ const { probe } = require('tcp-ping-sync');
 // Ours
 const { combine } = require('../utils/structures');
 const { getProjectConfig } = require('./project');
+const { info } = require('../utils/logging');
+const { MESSAGES } = require('../cli/serve/constants');
 
 const HOME_DIR = homedir();
 const SSL_DIR = '.aunty/ssl';
@@ -20,10 +23,14 @@ const DEFAULT_HOST = (module.exports.DEFAULT_HOST = probe(`nucwed${INTERNAL_SUFF
   : 'localhost');
 const DEFAULT_PORT = 8000;
 
-module.exports.getServeConfig = () => {
+const serveConfigPromise = getServeConfigPromise();
+
+module.exports.getServeConfig = () => serveConfigPromise;
+
+async function getServeConfigPromise() {
   const { serve } = getProjectConfig();
 
-  return combine(
+  const config = combine(
     {
       hasBundleAnalysis: false,
       host: DEFAULT_HOST,
@@ -35,9 +42,13 @@ module.exports.getServeConfig = () => {
     addEnvironmentVariables,
     addUserSSLConfig
   );
-};
+  const port = await findPort(config.port, config.port + 100, config.host);
+  config.port = port;
 
-const addEnvironmentVariables = config => {
+  return config;
+}
+
+function addEnvironmentVariables(config) {
   if (process.env.AUNTY_HOST) {
     config.host = process.env.AUNTY_HOST;
   }
@@ -47,12 +58,12 @@ const addEnvironmentVariables = config => {
   }
 
   return 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)  
+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}
 */
 function addUserSSLConfig(config) {
@@ -67,3 +78,41 @@ function addUserSSLConfig(config) {
 
   return config;
 }
+
+async function findPort(port, max = port + 100, host = '0.0.0.0') {
+  return new Promise((resolve, reject) => {
+    const socket = new Socket();
+
+    const next = () => {
+      socket.destroy();
+      info(MESSAGES.port(port));
+      if (port <= max) resolve(findPort(port + 1, max, host));
+      else reject(new Error('Could not find an available port'));
+    };
+
+    const found = () => {
+      socket.destroy();
+      resolve(port);
+    };
+
+    // Port is taken if connection can be made
+    socket.once('connect', next);
+
+    // Port is open if connection attempt times out
+    socket.setTimeout(500);
+    socket.once('timeout', found);
+
+    // If an error occurs, it's assumed the port is available.
+    socket.once('error', e => {
+      // If the connection is refused, it's assumed nothing is listening and the port is available.
+      if (e.code === 'ECONNREFUSED') {
+        found();
+      } else {
+        // Not sure what to do with other errors, so keep seeking a free port.
+        next();
+      }
+    });
+
+    socket.connect(port, host);
+  });
+}

package/src/config/webpackDevServer.js

@@ -7,10 +7,10 @@ const { getBuildConfig } = require('./build');
 const { getProjectConfig } = require('./project');
 const { getServeConfig } = require('./serve');
 
-module.exports.getWebpackDevServerConfig = () => {
+module.exports.getWebpackDevServerConfig = async () => {
   const { root, webpackDevServer: projectWebpackDevServerConfig } = getProjectConfig();
   const { staticDir } = getBuildConfig();
-  const { host, hot, https, port } = getServeConfig();
+  const { host, hot, https, port } = await getServeConfig();
 
   return combine(
     {

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);
       });
     }
   });

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

@@ -1,23 +1,23 @@
 import acto from '@abcnews/alternating-case-to-object';
 import { <% if (isOdyssey) { %>whenOdysseyLoaded<% } else { %>whenDOMReady<% } %> } from '@abcnews/env-utils';
-import { getMountValue, selectMounts } from '@abcnews/mount-utils';<% if (isTS) { %>
-import type { Mount } from '@abcnews/mount-utils';<% } %>
+import { getMountValue, selectMounts } from '@abcnews/mount-utils';
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot<% if (isTS) { %>, Root<% } %> } from 'react-dom/client';
 import App from './components/App';<% if (isTS) { %>
 import type { AppProps } from './components/App';<% } %>
 
-let appMountEl<% if (isTS) { %>: Mount<% } %>;
+let root<% if (isTS) { %>: Root<% } %>;
 let appProps<% if (isTS) { %>: AppProps<% } %>;
 
 function renderApp() {
-  render(<App {...appProps} />, appMountEl);
+  root.render(<App {...appProps} />);
 }
 
 <% if (isOdyssey) { %>whenOdysseyLoaded<% } else { %>whenDOMReady<% } %>.then(() => {
-  [appMountEl] = selectMounts('<%= projectNameFlat %>');
+  const [appMountEl] = selectMounts('<%= projectNameFlat %>');
 
   if (appMountEl) {
+    root = createRoot(appMountEl);
     appProps = acto(getMountValue(appMountEl))<% if (isTS) { %> as AppProps<% } %>;
     renderApp();
   }
@@ -29,7 +29,7 @@ if (module.hot) {
       renderApp();
     } catch (err) {
       import('./components/ErrorBox').then(({ default: ErrorBox }) => {
-        render(<ErrorBox error={err} />, appMountEl);
+        root.render(<ErrorBox error={err} />);
       });
     }
   });