chore(pwa-kit-dev): update eslint config

[breadadams]

Description

I didn't open an issue for this, as I wasn't sure whether to classify it as a bug, however this update is to include jsx-eslint/eslint-plugin-react#3280. So that when declaring Props through forwardRef's generic in TypeScript components you don't get an error about missing propTypes definitions.

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• Bump eslint-plugin-react to latest version
• Auto-detect React version

How to Test-Drive This PR

Add the following component to a project using the current version of pwa-kit-dev:

// index.tsx
import React from 'react';

interface Props {
  title: string
}

const MyComponent = React.forwardRef<HTMLDivElement, Props>((props, ref) => (
  <div ref={ref}>{props.title}</div> { /* <-- 🔴 Error here */ }
));

You'll get the following linter error:

'title' is missing in props validation eslint(react/prop-types)

After updating to latest version, the error is no longer present.

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[breadadams]

While bumping the dependency I noticed that this property was pointing to an old React version (since the project is using v17 currently). To avoid having to manually sync this, we can use the detect option.

Everything appears to be working as expected, the only difference is with the template-express-minimal package where you get the following warning:

template-express-minimal: Warning: React version was set to "detect" in eslint-plugin-react settings, but the "react" package is not installed. Assuming latest React version for linting.

However I wouldn't say it's an issue, since as far as I understand that package isn't intended for usage with React in the first place (and if React was installed, ESLint would pick up the correct version).

[adamraya]

TIL about the detect option, nice catch.

You're right, the template-express-minimal is not intended for usage with React and the warning is not a problem.

[adamraya]

Thanks for your contribution @breadadams
The change makes sense, but looking through the code I see thousands of lines changed in the package-lock.json file that are unrelated to the change.

This is most likely because you used npm to bump the eslint-plugin-react version.

We use lerna to manage dependencies in the monorepo and minimize the number of unintended changes in the package-lock.json files.

That way we can target updating lock files intentionally in specific PRs.

Do you mind re-creating the change using lerna to bump the eslint-plugin-react version and see if that results in fewer changes in the package-lock.json file?

You can run this lerna command at the root of the monorepo:

npm run lerna -- add eslint-plugin-react@7.32.2 packages/pwa-kit-dev/

[breadadams]

Thanks @adamraya, yep my bad I installed with npm. Much cleaner diff now 😉

Edit: Actually I guess no package-lock changes at all now is a bad sign, not sure what I'm missing here to update it 🤔 .

[breadadams]

@adamraya I've just tried updating the dependency with lerna-update-wizard and the huge diffs are back. Any suggestions? Thanks

[adamraya]

@breadadams I reproduced the same changes in the lock files locally, so that seems to be the minimal set of changes required for the bump.

Good catch bumping the version on both pwa-kit-dev and internal-lib-build.

I tested things locally, and things look good to go.
I'll merge the PR into develop and it'll be included in the next minor release v2.7.0.

Thanks again for your help here.

[breadadams]

@adamraya I just noticed that a ^ semver prefix snuck its way into my changes in one of the force pushes 😓. I intended to use a fixed version to match the other related dependencies. I'll leave it to you, but I can sort a fix if you like.