Merge pull request #256 from alleyinteractive/feature/update-node

Update to node 20 / npm 10 / v2.0.5

.babelrc

@@ -1,18 +1,16 @@
 {
   "plugins": [
-    "transform-runtime",
+    "@babel/plugin-transform-runtime",
     "react-hot-loader/babel",
-    "transform-object-rest-spread",
-    "transform-class-properties",
     ["module-resolver", {
       "root": [
         "./client/**",
         "./client/src/**"
-      ],
+      ]
     }]
   ],
   "presets": [
-    "env",
-    "react"
+    "@babel/preset-env",
+    "@babel/preset-react"
   ]
 }

.eslintrc.json

@@ -1,28 +1,6 @@
 {
-  "extends": "airbnb",
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaVersion": 2017,
-    "ecmaFeatures": {
-      "globalReturn": true,
-      "impliedStrict": true,
-      "jsx": true
-    },
-    "sourceType": "module"
-  },
-  "plugins": [
-    "react",
-    "jest",
-    "jasmine"
-  ],
-  "env": {
-    "es6": true,
-    "browser": true,
-    "node": true,
-    "jquery": false,
-    "jasmine": true,
-    "jest/globals": true
-  },
+  "root": true,
+  "extends": ["@alleyinteractive/eslint-config"],
   "settings": {
     "import/resolver": {
       "babel-module": {}
@@ -31,71 +9,7 @@
       "config": "./client/config/webpack.config.js"
     }
   },
-  "globals": {
-    "jQuery": false,
-    "wp": true
-  },
-  // Do NOT change these rules
   "rules": {
-    "indent": [2, 2, {"SwitchCase": 1}],
-    "max-len": [2, 100, 4, {
-      "ignoreComments": true,
-      "ignoreUrls": true
-    }],
-    "quotes": [2, "single"], // Allows template literals if they have substitutions or line breaks
-    "semi": [2, "always"],
-    "no-multiple-empty-lines": [2, {"max": 1}],
-    "comma-dangle": [2, "always-multiline"],
-    "dot-location": [2, "property"],
-    "one-var": [2, "never"],
-    "no-var": [2], // Stop using var, use const or let instead
-    "prefer-const": ["error"],
-    "no-bitwise": [2],
-    "id-length": ["error", {
-      "properties": "never",
-      "exceptions": ["x", "y", "i", "e", "n", "k"]
-    }],
-    "func-names": [1, "always"],  // This aids in debugging
-    "no-use-before-define": [2, "nofunc"],
-    "yoda": [2, "always"],
-    "object-curly-spacing": [2, "always"],
-    "array-bracket-spacing": [2, "never"],
-    "space-unary-ops": [2, {"words": true, "nonwords": true}],
-    "keyword-spacing": ["error", {"after": true}],
-    "space-before-blocks": [2, "always"],
-    "space-in-parens": [2, "never"],
-    "spaced-comment": [2, "always"],
-    "no-confusing-arrow": ["error", {"allowParens": true}],
-    "no-constant-condition": ["error"],
-    "arrow-parens": ["error", "always"],
-    "operator-linebreak": ["error", "after"],
-    "function-paren-newline": ["error", "consistent"],
-    "react/prefer-stateless-function": "off",
-    "jsx-a11y/anchor-is-valid": [ "error", {
-      "components": [ "Link" ],
-      "specialLink": [ "to" ]
-    }],
-    "jsx-a11y/label-has-for": [
-      2,
-      {
-        "required": {
-        "every": [ "id" ]
-      }
-    }],
-    "import/newline-after-import": [0],
-    "react/jsx-filename-extension": [0],
-    "react/react-in-jsx-scope": [0],
-    "react/forbid-prop-types": [0],
-    "import/no-named-as-default": [0],
-    "import/no-named-as-default-member": [0],
-    "import/no-extraneous-dependencies": [0], // Disabled since it doesn't work with webpack alias
-    "import/no-unresolved": [0], // Disabled since it doesn't work with webpack alias
-    "import/extensions": [0], // Disabled since it doesn't work with webpack alias
-    "jasmine/no-focused-tests": [1],
-    "jasmine/no-disabled-tests": [1],
-    "jasmine/missing-expect": [2],
-    "jasmine/valid-expect": [2],
-    "jasmine/no-global-setup": [2],
-    "jasmine/no-expect-in-setup-teardown": [2]
+    "react/jsx-filename-extension": [0]
   }
 }

.github/workflows/built-release.yml

@@ -11,4 +11,4 @@ jobs:
   built-release:
     uses: alleyinteractive/.github/.github/workflows/built-release.yml@main
     with:
-      node: 16
+      node: 20

.github/workflows/node-tests.yml

@@ -14,3 +14,4 @@ jobs:
     with:
       run-audit: true
       ci: true
+      node: 20

.nvmrc

@@ -1 +1 @@
-16
+20

byline-manager.php

@@ -7,7 +7,7 @@
  * Author URI:      https://alley.com
  * Text Domain:     byline-manager
  * Domain Path:     /languages
- * Version: 0.2.4
+ * Version: 0.2.5
  * Requires WP:     5.9
  * Requires PHP:    8.0
  * Tested up to:    6.3

client/config/plugins.js

@@ -4,6 +4,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const StatsPlugin = require('webpack-stats-plugin').StatsWriterPlugin;
 const DependencyExtractionWebpackPlugin =
   require('@wordpress/dependency-extraction-webpack-plugin');
+const ESLintPlugin = require('eslint-webpack-plugin');
 const StylelintPlugin = require('stylelint-webpack-plugin');
 const createWriteWpAssetManifest = require('./wpAssets');
 
@@ -21,6 +22,7 @@ module.exports = function getPlugins(mode) {
         // This maps references to @wordpress/{package-name} to the wp object.
         new DependencyExtractionWebpackPlugin(),
         new webpack.NoEmitOnErrorsPlugin(),
+        new ESLintPlugin(),
         new StylelintPlugin({
           configFile: path.join(paths.config, 'stylelint.config.js'),
         }),
@@ -44,6 +46,7 @@ module.exports = function getPlugins(mode) {
         new MiniCssExtractPlugin({
           filename: '[name].css',
         }),
+        new ESLintPlugin(),
         new StylelintPlugin({
           configFile: path.join(paths.config, 'stylelint.config.js'),
         }),

client/config/postcss.config.js

@@ -5,7 +5,6 @@ const cssImport = require('postcss-import');
 const customProps = require('postcss-custom-properties');
 const customMedia = require('postcss-custom-media');
 const nested = require('postcss-nested');
-const units = require('postcss-units');
 const focus = require('postcss-focus');
 
 // Other imports.
@@ -25,7 +24,6 @@ module.exports = () => ({
       preserve: false,
       variables: flatten(cssVars),
     }),
-    units(), // Compute rem() function
     customMedia({
       extensions: cssVars.breakpoints,
     }),

client/config/rules.js

@@ -15,12 +15,6 @@ const exclude = [
 module.exports = function getLoaders(mode) {
   const isProd = 'production' === mode;
   return [
-    {
-      enforce: 'pre',
-      test: /\.jsx?$/,
-      exclude,
-      use: 'eslint-loader',
-    },
     {
       test: /\.jsx?$/,
       exclude,

client/config/stylelint.config.js

@@ -1,5 +1,6 @@
 /* eslint-disable quote-props */
 module.exports = {
+  extends: ['@alleyinteractive/stylelint-config'],
   plugins: [
     'stylelint-order', // Plugin for enforcing alpha ordering of properties
   ],
@@ -11,51 +12,6 @@ module.exports = {
       ],
       ignore: ['after-comment'],
     }],
-    'indentation': 2,
-    'at-rule-name-case': 'lower',
-    'at-rule-name-space-after': 'always',
-    'at-rule-semicolon-newline-after': 'always',
-    'block-closing-brace-newline-after': 'always',
-    'block-no-empty': true,
-    'block-opening-brace-newline-after': 'always',
-    'block-opening-brace-space-before': 'always',
-    'color-no-invalid-hex': true,
-    'declaration-block-no-shorthand-property-overrides': true,
-    'declaration-block-semicolon-newline-after': 'always',
-    'declaration-block-trailing-semicolon': 'always',
-    'declaration-colon-space-after': 'always',
-    'declaration-no-important': true,
-    'font-family-name-quotes': 'always-unless-keyword',
-    'font-weight-notation': 'numeric',
-    'length-zero-no-unit': true,
-    'max-empty-lines': 1,
-    'media-feature-colon-space-after': 'always',
-    'media-feature-colon-space-before': 'never',
-    'media-feature-name-case': 'lower',
-    'media-feature-parentheses-space-inside': 'never',
-    'no-extra-semicolons': true,
-    'no-missing-end-of-source-newline': true,
-    'number-leading-zero': 'always',
-    'order/properties-alphabetical-order': true,
-    'rule-empty-line-before': ['always', {
-      ignore: ['after-comment'],
-    }],
-    'selector-combinator-space-after': 'always',
-    'selector-combinator-space-before': 'always',
-    'selector-descendant-combinator-no-non-space': true,
-    'selector-list-comma-newline-after': 'always',
-    'selector-max-specificity': ['0,2,1', {
-      ignoreSelectors: [':global', ':local'],
-    }],
-    'selector-no-vendor-prefix': true,
-    'selector-pseudo-class-case': 'lower',
-    'selector-pseudo-class-parentheses-space-inside': 'never',
-    'selector-pseudo-element-case': 'lower',
-    'selector-pseudo-element-colon-notation': 'double',
-    'unit-no-unknown': true,
-    'value-keyword-case': 'lower',
-    'value-list-comma-newline-after': 'always-multi-line',
-    'value-list-comma-space-after': 'always-single-line',
-    'value-no-vendor-prefix': true,
+    'selector-max-id': 1
   },
 };

client/config/webpack.config.js

@@ -12,7 +12,7 @@ module.exports = (env, argv) => {
     },
     optimization: {
       moduleIds: 'named',
-      noEmitOnErrors: true,
+      emitOnErrors: false,
       minimize: 'production' === mode,
     },
     output: getOutput(mode),

client/src/block-editor.js

@@ -15,14 +15,16 @@ import store from './store';
 // Styles.
 import './styles/styles.scss';
 
-const BylineManagerSlotFill = () => (
-  <BylineManagerPanelInfo>
-    <p>
-      <strong>{__('Byline', 'byline-manager')}</strong>
-    </p>
-    <BylineSlotContainer store={store} />
-  </BylineManagerPanelInfo>
-);
+function BylineManagerSlotFill() {
+  return (
+    <BylineManagerPanelInfo>
+      <p>
+        <strong>{__('Byline', 'byline-manager')}</strong>
+      </p>
+      <BylineSlotContainer store={store} />
+    </BylineManagerPanelInfo>
+  );
+}
 
 // Register our SlotFill provider.
 registerPlugin('byline-manager-panel-info-provider', { render: BylineManagerPanelInfoProvider });

client/src/components/byline-autocomplete/index.jsx

@@ -1,38 +1,38 @@
 // External dependencies.
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useCallback } from '@wordpress/element';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Autocomplete from 'react-autocomplete';
 
 // Hooks.
 import { useDebounce } from '@uidotdev/usehooks';
 
-const BylineAutocomplete = ({
+function BylineAutocomplete({
   id,
   profiles,
   onUpdate,
   profilesApiUrl,
   addAuthorPlaceholder,
   addAuthorLabel,
-}) => {
+}) {
   const [search, setSearch] = useState('');
   const [searchResults, setSearchResults] = useState([]);
 
   // Debounce search string from input.
   const debouncedSearchString = useDebounce(search, 750);
 
-  const doProfileSearch = (fragment) => {
+  const doProfileSearch = useCallback((fragment) => {
     apiFetch({ url: addQueryArgs(profilesApiUrl, { s: fragment }) })
       .then((rawResults) => {
         const currentIds = profiles.map((profile) => profile.id);
         const newSearchResults = rawResults.filter(
-          (result) => 0 > currentIds.indexOf(result.id),
+          (result) => currentIds.indexOf(result.id) < 0,
         );
         setSearchResults(newSearchResults);
       });
-  };
+  }, [profilesApiUrl, profiles]);
 
   const inputProps = {
     className: 'components-text-control__input',
@@ -41,17 +41,17 @@ const BylineAutocomplete = ({
     id,
     onKeyDown: (e) => {
       // If the user hits 'enter', stop the parent form from submitting.
-      if (13 === e.keyCode) {
+      if (e.keyCode === 13) {
         e.preventDefault();
       }
     },
   };
 
   useEffect(() => {
-    if ('' !== debouncedSearchString) {
+    if (debouncedSearchString !== '') {
       doProfileSearch(debouncedSearchString);
     }
-  }, [debouncedSearchString]);
+  }, [debouncedSearchString, doProfileSearch]);
 
   return (
     <div className="profile-controls components-base-control__field">
@@ -87,20 +87,18 @@ const BylineAutocomplete = ({
                 'item',
                 {
                   'item-highlighted': isHighlighted,
-                }
+                },
               )
             }
           >
             {item.name}
           </div>
         )}
-        renderInput={(props) =>
-          <input {...props} style={{ width: '100%' }} />
-        }
+        renderInput={(props) => <input {...props} style={{ width: '100%' }} />}
       />
     </div>
   );
-};
+}
 
 BylineAutocomplete.defaultProps = {
   id: 'profiles_autocomplete',