Developer tooling / browser extensions

[gaambo]

Preact already has browser extensions to help developers get a look at the rendered components and Alpine.js also has a browser extension to see the current state of components.

For development and debugging workflows it would be way easier to have some way to look at the current state of a component in the browsers developer tools (instead of having to add console.log or debugger statements).
I guess that the preact dev tools will work (since under the hood the interactivity API uses preact).
How can we get access to the current state in developer tools? Will it work out of the box since preact signals are used? Do we need to develop custom extensions?

I guess it's kinda related to #53036 in a more general way: React, preact and Alpine.js already have a large community and therefore many tools for developers. To get WordPress developers on board, I think we need to provide some tools which make writing and debugging/testing this code easy/easier as well.

[luisherranz]

This is a great conversation to have. Preact DevTools definitely work and we've used them when debugging the runtime. They need an import of preact/debug to work, but it needs to be the first one, so it's not something that can be done by the user.

@michalczaplinski was also experimenting with Redux DevTools for the store:

• Experiment: Redux Devtools integration block-interactivity-experiments#183

I'm confident we can even make it work with immutable snapshots using a similar algorithm to the one in Valtio, but that code also needs to be injected by the runtime.

---

I guess the question is: what would be the best way to opt into this development mode and inject this code? WordPress doesn't have such mode, does it?

cc: @gziolo

[gaambo]

I think SCRIPT_DEBUG could be used whether the devtools/debug tools should be enabled. But since preact/debug must be imported in the JavaScript while building I think one solution could be to build two files and enqueue a different one in core/the gutenberg plugin depending on SCRIPT_DEBUG. I don't know if core already does something like that, but it's a typical way many plugins/themes handle enqueueing uglified build assets or sourcemaps.

I just tested the wp-movies demo with a local build of the block-interactivity-repo where preact/debug was imported and can confirm, that preact devtools pick up all the components. Also signals are shown in the developer tools sidebar. Allthough naming is not perfect (all componentes are called Directives and signals don't have a name), which makes it hard to differentiate the basic support is here. Which I think is very good and just means we have to build upon it. 👍

[luisherranz]

Yes, I want to explore naming those components soon. It won't be 1:1 unless we create a new component for each directive (which is not really needed), but we can definitely improve it.

I think SCRIPT_DEBUG could be used whether the devtools/debug tools should be enabled.

That's sounds great. We can definitely look into that. Is it available in Webpack then, isn't it?

But since preact/debug must be imported in the JavaScript while building I think one solution could be to build two files and enqueue a different one in core/the gutenberg plugin depending on SCRIPT_DEBUG.

Do you feel confident enough with the codebase to give it a try?

[gziolo]

I only wanted to share now quick examples from WordPress core, but I’m happy to discuss what could be done here later this week.

Here we load in the dev mode (SCRIPT_DEBUG set to true) scripts necessary for React Fast Refresh, which need to be loaded before React:

https://github.com/WordPress/wordpress-develop/blob/19bd759db57b4f1cc72157a446915ffbafdd838e/src/wp-includes/script-loader.php#L219L257

Here are webpack configs that build these scripts:

https://github.com/WordPress/wordpress-develop/blob/19bd759db57b4f1cc72157a446915ffbafdd838e/tools/webpack/development.js

[gziolo]

I see that we still have a similar webpack code in the Gutenberg plugin:

https://github.com/WordPress/gutenberg/blob/39b866e67be40392bd3a420ac034738e29e4512d/tools/webpack/development.js

It's wired here in the code since we recently updated the React version:

https://github.com/WordPress/gutenberg/blob/39b866e67be40392bd3a420ac034738e29e4512d/lib/client-assets.php#L544L563

The script probably gets automatically registered in the plugin based on the files discovered in the build folder.

[gaambo]

@luisherranz I've created a PR: WordPress/block-interactivity-experiments#222
It works similar to what @gziolo linked to from the Gutenberg/WP repository. Except preact/debug cannot be externalized (tried that) and has to be included as the first import in the script - therefore I had to go the way of using a flag in JS whether to include them.

It works correctly, but it's up to you/all to decide whether that's the way to go. Also I'm (still) no webpack expert, so if there's a better way to to that in the config, let me know :)

[luisherranz]

If I'm not mistaken, SCRIPT_DEBUG is finally available in Gutenberg, so we can try to add this again:

• Warning: Introduce SCRIPT_DEBUG to make the package compatible with webpack 5 #50122

[gziolo]

Yes, it’s also integrated with WordPress core and @wordpress/scripts.