feat: allow custom decorator fields
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 25/100
- Issue type
- Feature
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- typescript
- Domain
- tooling
Research direction
The issue names no files or tests; start by tracing decorator definitions into compiler metadata and the output target plugin process. Done means component authors can provide arbitrary custom data on decorators and output targets can access it for component-specific configuration.
Written by the indexing model from the issue text.
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already include this feature request, without success.
Describe the Feature Request
Allow component authors to pass arbitrary data to Stencil's decorators, that can then be accessed in the compiler metadata during the output target process.
Describe the Use Case
Stencil's output target plugin system is a really unique and powerful feature of Stencil. However, configuration of output targets is only currently possible in the Stencil config file. This is fine for high level config options that affect all components, but in some circumstances it might be useful to allow for configuration in individual component files.
Example:
Consider an output target that outputs GrapesJS drag-and-drop editor plugins. I might want a field on Props, grapesExclude, that dictates whether the prop is exposed in the GrapesJS GUI.
Prop({
custom: {
grapesExclude: true
}
}) foo;
Example2:
Perhaps I want to alter the name of a specific component, but only when it is output to React?
Component({
custom: {
reactName: 'MyReactComponent'
}
});
Describe Preferred Solution
My current thinking is an additional field in all decorators:
custom: any
Describe Alternatives
No response
Related Code
No response
Additional Information
I think this kind of flexibility could open up some neat functionality in the output targets. If anyone else has any additional potential use cases, please post below!
- Dominant language
- TypeScript
- Stars
- 13.1k
- Forks
- 855
- Avg merge
- 4h 7m
- Merged PRs (30d)
- 44
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from stenciljs/core
-
Stencil v5
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
Stencil v5
Difficulty 4/5 3-5 days Newbie friendliness 55/100
-
Bug: Validated Stencil v5
Difficulty 4/5 3-5 days Newbie friendliness 48/100
-
Feature: Want this? Upvote it!
Difficulty 5/5 Over a week Newbie friendliness 25/100
-
Feature: Want this? Upvote it!
Difficulty 4/5 3-5 days Newbie friendliness 48/100
Similar issues
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 76/100
-
code-quality refactoring
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
langchain-ai/deepagents#6450 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
vercel/react-tweet#225 ·