stencil-ds-output-targets: bug: react custom elements does not account for dist-custom-elements-bundle

With the release of Stencil 2.4.0, we now have a new option for output target, the dist-custom-elements. It will generate a bundle with each component on their own file:

class Component extends HTMLElement { ...compiled } customElements.define('component', Component)-ish

Some Stencil components, like layout components, can cause a lot of cumulative layout shift due to the lazy load.

It would be really nice if react-output-target had an option to import from the dist-custom-elements, so that bundlers can leverage three-shaking.

I think that it would be as simple as adding an option, and if true, add to the react output:

+import { Component as RawComponent } '${componentCorePackage}/components/component';
export const Component = /*@__PURE__*/createReactComponent<JSX.Component, HTMLComponentElement>('component');

The main challenge would be to make the Component variable use the RawComponent variable, so that static analysis can tell when to include it in the bundle or not.

Any thoughts?

PS: I’d be willing to contribute to a PR, once agreed on how to proceed.