solidjs / solidjs/solid-playground
Devtools (reactive graph visualization) in the playground
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 244
- Forks
- 69
- PR merge metrics
- No merged PRs in 30d
Description
I don't have anything prepared—this is just theoretical, but would it be possible to include a reactive graph debugger in the playground in the future?
One thing for certain—it would require the playground to work in a dev mode. And from what I know, it works in prod mode currently. This alone might just prevent this from happening. But would there be any other blockers?
This idea just popped into my head, and I wanted to ask if it would make sense and what should I take into consideration when architecting the devtools if it does.
Besides the solid operating in dev mode requirement, there are three parts of the devtools that I would need to think, about how'd they fit in:
- the debugger - the debugger would need to be attached to the application in the background, for the devtools to be able to get and track the state of the graph
- babel transforms - this one is not necessary, but useful, it'll allow for things like tracking stores, automatically naming signals/memos/stores, and tracking component props.
- the devtools/graph panel - part of the UI would need to be reserved for the devtools - for displaying the graph, toggling is on and off, configuring, etc.
I'm currently writing the devtools in a way that theoretically should allow it to be used in various places—not limited to the chrome extension. But some changes might be necessary. It's definitely not ready now. Not even close.
Still, I think it would be great to see the graph right in the playground eventually. So I just wanted to know what you think.
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.
Research direction
Start by reviewing how the playground currently runs in production mode and how its UI is structured. Then examine the linked debugger and Babel transform packages to identify the integration points and blockers for graph tracking. Done would require a decided architecture and implementation plan for dev mode, debugger attachment, optional transforms, and the graph panel.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- babel, typescript
- Domain
- developer-experience, frontend, tooling
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100