feat: Ability to rename/format generated component names

[isaaclem90]

I'm wondering if there is such option for us to add suffix when we create a React version of it?

For example, below is my stencil Component IonicButton, I'm wondering if it's possible to configure so that it spits a different component name?

import {Component, h, Prop} from '@stencil/core';

@Component({
  tag: 'ionic-button',
  shadow: false
})
export class IonicButton {
  /**
   * Button text
   */
  @Prop() text: string;

  render() {
    return <button class={'button button--primary'}>xxx</button>;
  }
}

generated index.ts

export const IonicButton = /*@__PURE__*/createReactComponent<JSX.IonicButton, HTMLIonicButtonElement>('ionic-button');

Instead of spitting IonicButton, I would like to have IonicButtonReact instead.

The actual problem I'm facing is because we have a single storybook that use stencil as source of truth, and we render React version on this single storybook, and we facing a name clashing issue.

[sean-perkins]

After reviewing this request in depth, I do think this makes sense as a feature. I've had some discussion on #235 if the Stencil compiler or the output targets should be responsible for this change. I still think that question is valid, but is focused more on the tag name of the web component and less about the selector of the custom component wrapper.

I think much of the approach in #235 makes sense, to both safeguard what the component name can be, as well as allowing you as the implementer, the ability to format the generated names to your choosing.

I would like to have this implementation aligned across the output targets, as it's a common problem/need across all outputs. Currently we do not have a common lib to share logic across output targets. I think the first lift here, is to create that shared library that each output target can leverage. This will help lower the maintenance of these implementations.

In the interim, I've added this item to the Q2 tentative roadmap.