Skip to content

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

Merged
merged 12 commits into from
Aug 13, 2025
Merged

Chrome extension stuff #727

merged 12 commits into from
Aug 13, 2025

Conversation

JoviDeCroock
Copy link
Member

@JoviDeCroock JoviDeCroock commented Jul 29, 2025

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

  • React
    • Add to the React babel plugin a way to convey the componentName as the second argument to useSignals Add signal names #730
  • Preact
    • Deal with hot-reloading of prefresh, currently this can duplicate componentNames
    • Unmounting components should update the graph
    • Add a babel plugin to give meaningful names to signals/computeds/effects automatically in dev (and add lineNumber + filename to the signal)
    • For Preact surface when a signal leads to a text-node/attribute-node update
      • Currently attribute-nodes count as re-rendering the component, maybe in options._diff when we walk props we do an exitComponent and then re-enter after we're done
  • UI improvements
    • Repeated updates should collapse
    • We should be able to fold an update-group

Copy link

changeset-bot bot commented Jul 29, 2025

🦋 Changeset detected

Latest commit: 22209c7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@preact/signals-debug Minor
@preact/signals Minor
preact-signals-devtools Patch

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

Copy link

netlify bot commented Jul 29, 2025

Deploy Preview for preact-signals-demo ready!

Name Link
🔨 Latest commit 22209c7
🔍 Latest deploy log https://app.netlify.com/projects/preact-signals-demo/deploys/689c4569eac5560008ad699f
😎 Deploy Preview https://deploy-preview-727--preact-signals-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Contributor

github-actions bot commented Jul 29, 2025

Size Change: +9.83 kB (+11.25%) ⚠️

Total Size: 97.2 kB

Filename Size Change
docs/dist/assets/bench.********.js 1.59 kB +3 B (+0.19%)
docs/dist/assets/client.********.js 46.2 kB -1 B (0%)
docs/dist/assets/index.********.js 6.86 kB +6.03 kB (+722.54%) 🆘
docs/dist/assets/jsxRuntime.module.********.js 297 B +2 B (+0.68%)
docs/dist/assets/preact.module.********.js 4.72 kB +6 B (+0.13%)
docs/dist/assets/signals.module.********.js 2.56 kB +112 B (+4.57%) 🔍
docs/dist/basic-********.js 246 B +2 B (+0.82%)
packages/debug/dist/debug.js 3.48 kB +1.74 kB (+99.77%) 🆘
packages/debug/dist/debug.mjs 3.02 kB +1.71 kB (+130.24%) 🆘
packages/preact/dist/signals.js 1.7 kB +119 B (+7.52%) 🔍
packages/preact/dist/signals.mjs 1.66 kB +109 B (+7.05%) 🔍
ℹ️ View Unchanged
Filename Size
docs/dist/assets/signals-core.module.********.js 1.56 kB
docs/dist/assets/style.********.js 21 B
docs/dist/assets/style.********.css 1.24 kB
docs/dist/nesting-********.js 1.13 kB
docs/dist/react-********.js 242 B
packages/core/dist/signals-core.js 1.59 kB
packages/core/dist/signals-core.mjs 1.6 kB
packages/react-transform/dist/signals-*********.js 5.93 kB
packages/react-transform/dist/signals-transform.mjs 5.12 kB
packages/react-transform/dist/signals-transform.umd.js 6.04 kB
packages/react/dist/signals.js 188 B
packages/react/dist/signals.mjs 150 B

compressed-size-action

@JoviDeCroock JoviDeCroock force-pushed the chrome-extension-stuff branch from de2a6a8 to 58225ae Compare July 29, 2025 11:01
@JoviDeCroock JoviDeCroock force-pushed the chrome-extension-stuff branch from 58225ae to 0de9cfa Compare July 29, 2025 12:35
],
"devtools_page": "devtools.html",
"background": {
"service_worker": "background.js"
Copy link

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

@JoviDeCroock JoviDeCroock force-pushed the chrome-extension-stuff branch from 6ce9088 to 94759ea Compare August 2, 2025 06:21
@JoviDeCroock JoviDeCroock force-pushed the chrome-extension-stuff branch from 94759ea to 4e88d9a Compare August 2, 2025 06:25
@JoviDeCroock JoviDeCroock marked this pull request as ready for review August 2, 2025 06:31
Copy link
Member

@marvinhagemeister marvinhagemeister left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

RSLGTM

@JoviDeCroock JoviDeCroock mentioned this pull request Aug 12, 2025
@43081j
Copy link

43081j commented Aug 12, 2025

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 a -> b (100x) (but show the latest change)

@JoviDeCroock JoviDeCroock merged commit 8fe8dec into main Aug 13, 2025
6 checks passed
@JoviDeCroock JoviDeCroock deleted the chrome-extension-stuff branch August 13, 2025 08:00
@github-actions github-actions bot mentioned this pull request Aug 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants