feat(pwa-kit-dev): minor performance improvements and added comments

[ecRobertEngel]

Description

This adds two minor improvements:

• more if conditions to only execute the code than needed - it has a minor impact and saves around one second of build time as measured by the the speed-measure-webpack-plugin
• added comments explaining the code a bit more - I had to customize this plugin for a project and it took me a few minutes to understand

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

• (change1)

How to Test-Drive This PR

• (step1)

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)

[vmarta]

@ecRobertEngel thank you for this PR. We'll take a look.

[vmarta]

Re: the performance improvement, thanks.. I appreciate it.

As for the comments, IMO it's a bit too verbose. I'd rather have the comments be more higher-level, big picture stuffs. But let's have it there anyways.

[vmarta]

Since it's not always a component...

Suggested change

	// path: The RegExp that matches the path to the overridable component
	// newPath: The path to the component in the project directory
	// path: The RegExp that matches the path to the overridable file
	// newPath: The corresponding path in the project directory

[vmarta]

I think the comment is redundant if we repeat the paths. In the future, if there are changes to the paths, the comment may be forgotten to be updated.

Sometimes it's better to comment the why, rather than what the the line of code actually does.

Suggested change

	// Check if the resource was requested from 'packages/pwa-kit-react-sdk' or 'node_modules/pwa-kit-react-sdk'
	// Check if the resource was requested from these paths
	// The SDK can appear in different locations depending if you're developing pwa-kit or working in your own project

[vmarta]

How about moving this check earlier in the logic? I think conceptually it goes together with the first if condition.

So I'm thinking something like this:

if (resource.context.includes('pwa-kit-react-sdk') && sdkPaths.some((p) => resource.context.includes(p))) {
  ...
}

That (A && B) condition still follows your intention of short-circuiting when resource.context does not include "pwa-kit-react-sdk".

[ecRobertEngel]

@vmarta I agree that I went a bit overboard with the comments. I guess that was the consequence of having to debug it. 😄 I cleaned it up a bit and followed your suggestions.

I also updated the condition as per your suggestion. Thank you for your feedback. 💯