⚠️ If you would like to see the current progress of this project, please view the dev
branch.
A framework-agnostic devtools extension made for SolidHack.
- Fast rendering of large datasets.
- Live updating.
- Per-page functionality.
- Readable and collapsible node tree view.
- Readable and collapsible state tree view.
- Extensible and fast serializing of any type with flexible display options.
- Globally tracked history.
- State-scoped tracked history.
- State stacktrace viewer.
- State diff viewer.
- State-scoped code executor.
The following is an old video of the UI since the UI is still being built.
trB4Y367wB.mp4
The state tree displayed in the video now looks like this:
In the next video, the Solid connector is being used on a basic page to observe changes in the components and signals and send them to the currently unfinished devtools panel.
wGKfh4fLqD.mp4
First of all, it's of course not possible for Compendium DevTools to work with every framework. It's designed to be as flexible as possible, but some frameworks might simply be impossible to connect to because of how they work.
"Nodes" are the term for any piece of data that can be tracked by the devtools. This could be UI components, stores (like useState
from React or createSignal
from Solid), or any other data you wish. As long as you connect them to the devtools, they will appear in the devtools and be tracked like anything else.
Because such a wide range of data is possible, the devtools is designed to be extensible and flexible in how the data can be displayed. You can set custom names and colors for everything to make it easier to find what you're looking for.
Nodes are displayed in the devtools as a tree. Each node has static options (such as the ID, and tracking options) and dynamic data (such as the state, name, and children).
Whenever a node is updated, the devtools will save the current dynamic data of all nodes into a global history which can be seeked through, as well as the individual history of each node, and update the node tree accordingly. You will be able to see exactly how many times your nodes are updating, when, why, and what the current state is.
Currently there are only instrcutions to run the dev environment from source.
pnpm i
pnpm run dev
cd ./src/ui
pnpm i
cd ../..
pnpm run dev-ui
# Copy the manifest.json into the ./dist directory.
Next you can either run a blank test environment with web-ext
or import the extension to your browser.
If you want to do the former, just run this command:
pnpm run dev-start
If you do the latter, you need to enable developer mode in the browser's extension page before you can import it.