Merge pull request #1052 from alleyinteractive/issue-1051

Update Node, npm versions and dependencies
alleyinteractive · Jan 29, 2024 · 057a6c3 · 057a6c3
2 parents 3ff3756 + b4ae13a
commit 057a6c3
Show file tree

Hide file tree

Showing 20 changed files with 15,383 additions and 17,369 deletions.
diff --git a/.github/workflows/built-release.yml b/.github/workflows/built-release.yml
@@ -12,7 +12,7 @@ jobs:
     secrets:
       GH_TOKEN: ${{ secrets.GH_TOKEN }}
     with:
-      node: 16
+      node: 21
       php: '8.2'
       composer_install: true
       draft: false
diff --git a/.github/workflows/node-tests.yml b/.github/workflows/node-tests.yml
@@ -17,6 +17,6 @@ jobs:
     uses: alleyinteractive/.github/.github/workflows/node-tests.yml@main
     with:
       ci: true
-      node: 16
+      node: 21
       run-audit: false
       working-directory: ./
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-16
+20
diff --git a/assets/js/admin-settings/frontend.jsx b/assets/js/admin-settings/frontend.jsx
@@ -4,9 +4,11 @@ import ReactDOM from 'react-dom';
 // Components.
 import AdminSettings from './index';
 
-ReactDOM.render(
+const container = document.getElementById('apple-news-options__page');
+const root = ReactDOM.createRoot(container);
+
+root.render(
   <StrictMode>
     <AdminSettings />
   </StrictMode>,
-  document.getElementById('apple-news-options__page'),
 );
diff --git a/assets/js/admin-settings/index.jsx b/assets/js/admin-settings/index.jsx
@@ -15,7 +15,7 @@ import useSiteOptions from '../services/hooks/use-site-options';
 import deleteAtIndex from '../util/delete-at-index';
 import updateValueAtIndex from '../util/update-value-at-index';
 
-const AdminSettings = () => {
+function AdminSettings() {
   const [{
     loading, setSettings, saving, settings,
   }, saveSettings] = useSiteOptions();
@@ -141,6 +141,6 @@ const AdminSettings = () => {
       </div>
     </div>
   );
-};
+}
 
 export default AdminSettings;
diff --git a/assets/js/admin-settings/rule.jsx b/assets/js/admin-settings/rule.jsx
@@ -12,7 +12,7 @@ import React from 'react';
 // Components.
 import TermSelector from '../components/term-selector';
 
-const Rule = ({
+function Rule({
   busy,
   field,
   onDelete,
@@ -21,7 +21,7 @@ const Rule = ({
   taxonomy,
   termId,
   value,
-}) => {
+}) {
   const {
     fields,
     sections,
@@ -124,7 +124,7 @@ const Rule = ({
       </td>
     </tr>
   );
-};
+}
 
 Rule.propTypes = {
   busy: PropTypes.bool.isRequired,

diff --git a/assets/js/components/icon/index.jsx b/assets/js/components/icon/index.jsx
@@ -1,21 +1,22 @@
 import React from 'react';
 
-const Icon = () => (
-  <svg
-    enableBackground="new 0 0 26.77438 26.77438"
-    height="26.77438px"
-    version="1.1"
-    viewBox="0 0 26.77438 26.77438"
-    width="26.77438px"
-    x="0px"
-    xmlns="http://www.w3.org/2000/svg"
-    y="0px"
-  >
-    <g>
+function Icon() {
+  return (
+    <svg
+      enableBackground="new 0 0 26.77438 26.77438"
+      height="26.77438px"
+      version="1.1"
+      viewBox="0 0 26.77438 26.77438"
+      width="26.77438px"
+      x="0px"
+      xmlns="http://www.w3.org/2000/svg"
+      y="0px"
+    >
       <g>
         <g>
-          <path
-            d="M4.71813,13.5345v4.77055l0.00002,0.65257
+          <g>
+            <path
+              d="M4.71813,13.5345v4.77055l0.00002,0.65257
               c0,0.0568-0.00002,0.11365,0.00035,0.17044c0.00025,0.04783,0.00081,0.0957,0.00209,0.14355
               c0.00283,0.10423,0.00899,0.20939,0.02751,0.31251c0.01879,0.10458,0.04945,0.20193,0.0978,0.29693
               c0.04756,0.0934,0.10962,0.17891,0.1837,0.253c0.07406,0.07407,0.15948,0.13619,0.25284,0.18372
@@ -42,11 +43,12 @@ const Icon = () => (
               c-0.0741-0.0741-0.15947-0.1362-0.25285-0.18375c-0.09504-0.04841-0.19239-0.0791-0.297-0.09789
               c-0.10299-0.01854-0.2081-0.02468-0.31226-0.02751c-0.04781-0.00125-0.09565-0.00183-0.14348-0.00211
               c-0.0568-0.00035-0.1136-0.00032-0.17037-0.00032l-0.65233-0.00002H13.53452"
-          />
+            />
+          </g>
         </g>
       </g>
-    </g>
-  </svg>
-);
+    </svg>
+  );
+}
 
 export default Icon;
diff --git a/assets/js/pluginsidebar/panels/cover-image.jsx b/assets/js/pluginsidebar/panels/cover-image.jsx
@@ -4,32 +4,34 @@ import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const CoverImage = ({
+function CoverImage({
   coverImageCaption,
   coverImageId,
   onChangeCoverImageCaption,
   onChangeCoverImageId,
-}) => (
-  <PanelBody
-    initialOpen={false}
-    title={__('Cover Image', 'apple-news')}
-  >
-    <BaseControl>
-      <ImagePicker
-        onReset={() => onChangeCoverImageId(0)}
-        onUpdate={({ id }) => onChangeCoverImageId(id)}
-        value={coverImageId}
+}) {
+  return (
+    <PanelBody
+      initialOpen={false}
+      title={__('Cover Image', 'apple-news')}
+    >
+      <BaseControl>
+        <ImagePicker
+          onReset={() => onChangeCoverImageId(0)}
+          onUpdate={({ id }) => onChangeCoverImageId(id)}
+          value={coverImageId}
+        />
+      </BaseControl>
+      <TextareaControl
+        help={__('This is optional and can be left blank.', 'apple-news')}
+        label={__('Caption', 'apple-news')}
+        onChange={onChangeCoverImageCaption}
+        placeholder={__('Add an image caption here.', 'apple-news')}
+        value={coverImageCaption}
       />
-    </BaseControl>
-    <TextareaControl
-      help={__('This is optional and can be left blank.', 'apple-news')}
-      label={__('Caption', 'apple-news')}
-      onChange={onChangeCoverImageCaption}
-      placeholder={__('Add an image caption here.', 'apple-news')}
-      value={coverImageCaption}
-    />
-  </PanelBody>
-);
+    </PanelBody>
+  );
+}
 
 CoverImage.propTypes = {
   coverImageCaption: PropTypes.string.isRequired,

diff --git a/assets/js/pluginsidebar/panels/maturity-rating.jsx b/assets/js/pluginsidebar/panels/maturity-rating.jsx
@@ -3,28 +3,30 @@ import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const MaturityRating = ({
+function MaturityRating({
   maturityRating,
   onChangeMaturityRating,
-}) => (
-  <PanelBody
-    initialOpen={false}
-    title={__('Maturity Rating', 'apple-news')}
-  >
-    <SelectControl
-      help={__('Select the optional maturity rating for this post.', 'apple-news')}
-      label={__('Select Maturity Rating', 'apple-news')}
-      onChange={onChangeMaturityRating}
-      options={[
-        { label: '', value: '' },
-        { label: __('Kids', 'apple-news'), value: 'KIDS' },
-        { label: __('Mature', 'apple-news'), value: 'MATURE' },
-        { label: __('General', 'apple-news'), value: 'GENERAL' },
-      ]}
-      value={maturityRating}
-    />
-  </PanelBody>
-);
+}) {
+  return (
+    <PanelBody
+      initialOpen={false}
+      title={__('Maturity Rating', 'apple-news')}
+    >
+      <SelectControl
+        help={__('Select the optional maturity rating for this post.', 'apple-news')}
+        label={__('Select Maturity Rating', 'apple-news')}
+        onChange={onChangeMaturityRating}
+        options={[
+          { label: '', value: '' },
+          { label: __('Kids', 'apple-news'), value: 'KIDS' },
+          { label: __('Mature', 'apple-news'), value: 'MATURE' },
+          { label: __('General', 'apple-news'), value: 'GENERAL' },
+        ]}
+        value={maturityRating}
+      />
+    </PanelBody>
+  );
+}
 
 MaturityRating.propTypes = {
   maturityRating: PropTypes.string.isRequired,