Expose component metadata in dev builds
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 38/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- typescript
- Domain
- devtools
Research direction
Start in src/runtime/profile.ts at window.stencil.inspect and the getHostRef function. Trace the $cmpMeta$ property and determine how the component metadata can be exposed on the global stencil object in development builds. Done means the metadata, including state variables, watchers, and listeners, is accessible for the Stencil Inspector use case.
Written by the indexing model from the issue text.
Description
Stencil version:
@stencil/core@1.9.0-15
I'm submitting a:
[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/
Current behavior:
In development builds Stencil exposes data about the vdom of an element with the window.stencil.inspect method. But the data doesn't include all metadata (state variables, watchers, listeners etc.).
Expected behavior:
The full metadata of Stencil components is exposed.
It looks like the getHostRef function used in the inspect method includes this metadata (in the $cmpMeta$ property) and could be added to the global stencil object.
Steps to reproduce:
n/a
Related code:
stencil.getHostRef = getHostRef;
Other information:
There might already be a way to access this information (preferably without having to run the dev server) in which case this issue can be closed.
There is a similar issue (#1542) which would only expose the data in a separate file.
My goal is to update the Stencil Inspector Chrome Extension since it uses window.devInspector which is no longer available.
- 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 ·