feat(react): Add a new optional prop called 'prefix' to all React components for scoping web components

[eslawski]

Here is the diff for the generated React component after these changes (PharosButton as an example):

diff --git a/old.tsx b/new.tsx
index 1b31d4e..d2d69d5 100644
--- a/old.tsx
+++ b/new.tsx
@@ -106,6 +106,10 @@ interface PharosButtonProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement
    * Indicates where to display the linked URL.
    */
   target?: LinkTarget | undefined;
+  /**
+   * The prefix for the web component
+   */
+  prefix?: string | undefined;
 }
 
 let registeredName;
@@ -131,4 +135,5 @@ PharosButton.defaultProps = {
   a11yDisabled: undefined,
   a11yHaspopup: undefined,
   fullWidth: false,
+  prefix: undefined,
 };

To use this as a consumer it would look something like the following:

  <PharosLink
    prefix="mfe-heads-up-display"
    href="https://google.com"
  >
    Hello Google!
  </PharosLink>

Other thoughts:

• This should be backward compatible as I am leaving the PharosContext in there
• All of this will go away once we upgrade to React 19 where there is native support for web components.

This change: (check at least one)

• Adds a new feature
• Fixes a bug
• Improves maintainability
• Improves documentation
• Is a release activity

Is this a breaking change? (check one)

• Yes
• No

Is the: (complete all)

• Title of this pull request clear, concise, and indicative of the issue number it addresses, if any?
• Test suite(s) passing?
• Code coverage maximal?
• Changeset added?
• Component status page up to date?

What does this change address?
A clear and concise description or a direct link to an issue [e.g. #15]
If adding a feature, a rationale for its addition goes here.

How does this change work?
A clear, detailed description of how this change addresses the issue.
This could be a bullet list if there are several moving parts.

Additional context
Add any other context here.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9f29170

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
packages/pharos/lib/index.js	64.63 KB (0%)

[eslawski]

Closing as we found a workaround. This issue will go away with React 19 where web components are supported out of the box