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.

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

feat: Support custom tag names #420

Open
3 tasks done
sdvg opened this issue Feb 26, 2024 · 2 comments
Open
3 tasks done

feat: Support custom tag names #420

sdvg opened this issue Feb 26, 2024 · 2 comments
Labels
help wanted a good issue for the community package: angular @stencil/angular-output-target package package: react @stencil/react-output-target package package: vue @stencil/vue-output-target package type: feature New feature, request or improvement.

Comments

@sdvg
Copy link

sdvg commented Feb 26, 2024

Prerequisites

Describe the Feature Request

Allow the tag names emitted by the output targets to be modified.

Describe the Use Case

Stencil already supports the option tagNameTransform: https://github.com/ionic-team/stencil/blob/16519d935ab6dcff31144f62d44bfdf95ea48d93/src/declarations/stencil-public-compiler.ts#L342

This allows us to add a suffix to our component tag names, for example. It would be good to have a similar option in the adapters so we can still make use of the adapters, while using custom tag names.

Describe Preferred Solution

A usage example could look like this:

import { setCustomTagNameTransformer } from <my-library>/react'

const transformTagName = (tagName: string) => `${tagName}-v2`;
setCustomTagNameTransformer(transformTagName);

Describe Alternatives

Implementing the web component tags directly, without utilizing the adapters.

Related Code

No response

Additional Information

The general idea of using Stencil in a Microfrontend environment is explained very well here: https://dev.to/sanderand/running-multiple-versions-of-a-stencil-design-system-without-conflicts-2f46

Part of this is configuring tagNameTransform.

Draft PR showcasing a possible implementation: #421

@ionitron-bot ionitron-bot bot added the triage label Feb 26, 2024
Copy link

ionitron-bot bot commented Feb 26, 2024

Thanks for the issue!

This project is currently maintained for the purposes of supporting Ionic Framework. At this time, only new issues & pull requests that support Ionic Framework will be prioritized. For the latest updates regarding the maintenance status of this project, please see this section of the project's README

@christian-bromann christian-bromann added type: feature New feature, request or improvement. package: angular @stencil/angular-output-target package package: react @stencil/react-output-target package package: vue @stencil/vue-output-target package help wanted a good issue for the community and removed triage labels Oct 12, 2024
Copy link

ionitron-bot bot commented Oct 12, 2024

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.
Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted a good issue for the community package: angular @stencil/angular-output-target package package: react @stencil/react-output-target package package: vue @stencil/vue-output-target package type: feature New feature, request or improvement.
Projects
None yet
Development

No branches or pull requests

2 participants