Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Ability to rename/format generated component names #122

Open
Tracked by #242
isaaclem90 opened this issue Sep 25, 2020 · 1 comment · May be fixed by #235
Open
Tracked by #242

feat: Ability to rename/format generated component names #122

isaaclem90 opened this issue Sep 25, 2020 · 1 comment · May be fixed by #235
Labels
type: feature New feature, request or improvement.

Comments

@isaaclem90
Copy link

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.
@markhughes markhughes linked a pull request Mar 10, 2022 that will close this issue
Open
12 tasks
@sean-perkins sean-perkins mentioned this issue Mar 21, 2022
Open
9 tasks
@sean-perkins sean-perkins changed the title Possible to add suffix? feat: Ability to rename/format generated component names Mar 21, 2022
@sean-perkins sean-perkins added the type: feature New feature, request or improvement. label Mar 21, 2022
@sean-perkins
Copy link
Collaborator

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: feature New feature, request or improvement.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: introduce componentNameFormatter for react output target markhughes/stencil-ds-output-targets
2 participants
@sean-perkins @isaaclem90