-
-
Notifications
You must be signed in to change notification settings - Fork 113
Chrome extension stuff #727
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
Conversation
🦋 Changeset detectedLatest commit: 22209c7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for preact-signals-demo ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Size Change: +9.83 kB (+11.25%) Total Size: 97.2 kB
ℹ️ View Unchanged
|
de2a6a8
to
58225ae
Compare
58225ae
to
0de9cfa
Compare
], | ||
"devtools_page": "devtools.html", | ||
"background": { | ||
"service_worker": "background.js" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
doesn't make much difference but FYI these can be ES modules now:
"background": {
"service_worker": "background.js",
"type": "module"
},
you don't use anything module-specific but may still be good to know :D
6ce9088
to
94759ea
Compare
94759ea
to
4e88d9a
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
RSLGTM
maybe a follow up, but in the UI is there some way we could collapse massively repeated updates? similar to how the console in dev tools collapses repeated logged values, it would be useful here. e.g. if you have a signal that is being changed a lot, the panel becomes unusable since it'll just be getting spammed with that one signal. but really its the same signal, so maybe we could collapse it and say something like |
This is the start of a chrome extension, currently it contains two views. An updates view where we'll stream in updates happening on the page and a second view which contains the signals graph that we can find on the page.
Features
Updates list
We display a continuous list of updates where each will originate from a signal and then fold out to its computeds, ....
Graph view
We display a graph of each signal, where it's located and how they relate to one another.
When a signal is unsubscribed we should remove it from the graph.
Limitations
Currently we only show things when updates start happening but technically we could be eager about this and when we see a
_subscribe
/_callback
happening we could report it to the devtools.Missing
Detecting components
Components will need to call a method on the DevToolsCommunicator where they convey that they are entering a component, in Preact we can leverage the options hooks and in react we can leverage the Babel plugin to add an argument to
useSignals
where this can be used to perform communication to the devtools extension in development.After a bit of fiddling around, detecting components is proving a bit challenging. It would basically need to be a new Node, we need to detect when we are within a component, when we see
signal._subscribe
being called we need to know that we are in a component. Then we add that component to i.e. a WeakMap of Signal --> Array. When a component unmounts we need to track which signals are unsubscribed and remove those components from the array of strings.A different option for React http://github.com/welldone-software/why-did-you-render/blob/master/src/helpers.js
Adding line-numbers and file-names
Another thing that needs to happen is adding a Babel plugin to automatically add names to every signal/computed/effect in user-code. We could use this to add fileName + lineNumber.
Follow ups
exitComponent
and then re-enter after we're done