Devtools Kit

[Akryum]

✏️ This is a draft note about a unified set of standard APIs to create devtools. I discussed about this a bit with @antfu too and trying to write down some ideas about it.

The idea is to standardize things to be able to :

• One one side create shells to host dev tools

  • Various types of shell:
    • browser extension
    • embedded pane
    • standalone app
    • multi-devtools app
  • Implementation is not standardized, but following the standard would make any shell compatible with the applets

• On the other side create devtools applets/plugins to implement various tooling and development features

  • We would have standard APIs to write logic that could be executed in various contexts:
    • Devtools UI
    • In the page
    • Vite plugin
    • Node process
    • ...
  • Provide standard APIs to communicate seamlessly no matter which context we are in
  • Standard manifest and APIs to expose functionality to the shell, for example:
    • Tabs/Launchers: title, icon, notification...
    • Settings
    • Search results/Command palette
    • Keyboard shortcuts
    • ...

Use cases

Then creating the equivalent of the current Nuxt devtools would be to pick a "embedded pane" shell and add various applets like "pages", "routing", "auto-imports"... For Vue devtools, it would be different set of applets.

Then we could put all of those applets into a "standalone app" shell and it would still work because communication between "Devtools UI" and "In the page" contexts are abstracted away.

A multi-devtools app like guijs could also implement this standard and have working vue components tree directly inside it. New applets ideas coming from it could be installing packages, killing ports, etc.

[Akryum]

Maybe a first step would be to publish a package containing some TS types that describe all the expected APIs?