[App Extensibility ⚙️] Introduce project .force_overrides file @@W-17569698@@

[bendvc]

Description

In order to help those migrating from v3 to new extensibility model in v4 we need to make sure there is an escape hatch for those customers that have overridden files that are not part of the extension-chakra-storefront public file API.

To do this we introduce the .force_overrides that allows the PWA developer to instruct the extensibility SDK to treat the files listed in this "dot" file at overridable. This allows their current projects to be migrated to the latest version of the platform.

It's suggested that over time the customer should whittle this list down, so it, over time, has no entries in it. This will result in their projects being a lot more upgradable.

Force.Overrides.720p.mov

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

• Add new rule for when the override! loader is used, based on looking at a "dot" file.

How to Test-Drive This PR

• Checkout this branch.
• Generate a project using the command below and ensure both storefront and store locator extensions are selected. No need to extract the extensions.
• node packages/pwa-kit-create-app/scripts/create-mobify-app-dev.js --outputDir generated-retail-react-app-test-project
• Create an override for the "list" component at /app/overrides/@salesforce/extension-chakra-store-locator/components/list.tsx
• The file should look like this.

import React from 'react'

export const StoreLocatorList = (): JSX.Element => {
    return (
        <>
            Overridden!
        </>
    )
}

• Run the project npm start and navigate to the store locator `/store-locator' path.
• Notice that you do not see the "Overridden!" text.
• Now open the .force_overrides file and add the below line at the end of the file:
• @salesforce/extension-chakra-store-locator/src/components/list.tsx
• Rerun the project and goto the store locator again.
• You should see the override! text.

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)

[kevinxh]

🤔 are the file paths supposed to be relative paths or absolute paths? The example look like neither

[bendvc]

So it's really more of a module import path, I was wavering on this a little too. I could make it something like:

./@salesforce/extension-sample/src/pages/home.tsx

or

./node_modules/@salesforce/extension-sample/src/pages/home.tsx

I think the second one is probably the way to go and shouldn't be hard to fix.

[adamraya]

Are we missing adding documentation in README.md files or similar to let users know how to use this file?

[bendvc]

I've create this small ticket to do this later.

https://gus.lightning.force.com/lightning/_classic/%2Fa07EE0000285F7zYAE

[adamraya]

Should we add a test for handle a malformed overridable list?

[bendvc]

The overridable list in simply text file.. each line that isn't being commented out is interpreted as a path. I think the simplicity of this means we don't have to validate it or maintain code that validates it.

Let's evaluate this later and we can create a ticket if there is a benefit to doing this validation.