Add tag name transformer support to defineCustomElement
What is the current behavior?
GitHub Issue Number: N/A
What is the new behavior?
Documentation
Does this introduce a breaking change?
- [ ] Yes
- [x] No
Testing
Other information
Hey @sdvg - thanks for looking at this, but I think this pattern (and a lot more) will be covered by this https://github.com/stenciljs/core/pull/6211
@johnjenkins Oh no, I wasn't aware you're working on this as well. Bad timing from my side, I guess. Anyway, I'm happy to see progress on this feature!
I will ping you on Discord. Let's find out if anything from my PRs can be salvaged or if I can support you in another way with this.
Related PR for React Adapter: https://github.com/stenciljs/output-targets/pull/635
Overview of this approach:
- Singleton Module for Runtime Transformation:
- Each adapter includes a singleton module that can store a tag name transformer function at runtime. For example:
import { setTagNameTransformer } from '@stencil/react-output-target/runtime'; setTagNameTransformer((tagName: string) => tagName + '-modified');
- Each adapter includes a singleton module that can store a tag name transformer function at runtime. For example:
- Propagating the transformer: The adapter wrapper components pass the tag name transformer function to the
defineCustomElementfunction in the core dist-custom-elements output target. - Tag name modification during registration: When a custom element is defined,
defineCustomElementinvokes the transformer function to modify tag names before registration. - Framework adapter integration: The Framework adapter similarly calls the tag name transformer to modify tag names before rendering.
Gonna close this one out as I think has been covered via #6211 (We still need to roll out changes to the official output targets)