@abcnews/aunty 12.1.3 → 12.2.0

package/package.json

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

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