[App Extensibility ⚙️] Solve IDE wildcard import resolution (@W-16825282@)

[adamraya]

Description

Problem

The IDEs are unable to resolve the overridable imports identified using a wildcard correctly and provide the proper navigation and IntelliSense.

This results in errors with red squiggly lines below the wildcard import syntax.

Example

import withRedBorder from '*/components/with-red-border'

Error

TS2307: Cannot find module '*/components/with-red-border'.

Solution

The PR implements two changes:

1. Replace the wildcard import symbol * with the dollar override! symbol to comply with the ts compilerOptions.path pattern limitation of using at most one '*' character. See ts config wildcard substitutions docs.
2. Add a tsconfig.json file with the compilerOption.path mapping the paths starting with override!/* to src/*.

{
    "compilerOptions": {
        ...
        "paths": {
            "override!/*": [
                "src/*",
            ]
        },
...

Using a different symbol to identify overridable imports solves the error caused by the wildcard symbol.

npx tsc --build
tsconfig.json:12:13 - error TS5061: Pattern '*/*' can have at most one '*' character.

12             "*/*": [
               ~~~~~

Found 1 error.

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

• Replace the wildcard import symbol * with the dollar override!.
• Adds a tsconfig.json file.

How to Test-Drive This PR

• Checkout this branch solve-wildcard-imports in your IDE.
• Open the packages/extension-base/src/setup-app.ts file.
• Verify:
  1. There are no red squiggly lines below the dollar imports.
  2. The IDE navigates to the expected file when clicking (Cmd+ Click) on the dollar import.

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)

[adamraya]

What's the plan for the js/jsx files?

Similarly, we can add a jsconfig.json file.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "override!/*": ["src/*"]
    }
  }
}

I assumed we only wanted to use ts for the extensions.