Add preact/debug tools to development version of bundle#222
Add preact/debug tools to development version of bundle#222gaambo wants to merge 4 commits intoWordPress:main-wp-directives-pluginfrom gaambo:try/preact-debug-tools
Conversation
gziolo
left a comment
There was a problem hiding this comment.
I don't know how the webpack config works today, but I would imagine that you need to output the development version unminified which probably could be achieved by enforcing the mode field to be development.
|
tests are failing at the moment because e2e scripts are now bundled in a seperate webpack conf and therefore don't correctly share the runtime/vendors. i'm working at figuring out how to make the webpack config do what I want and still keep it readable 😅 |
|
I can't get the e2e tests to pass. I'm pretty sure it has something to do with the e2e scripts now having it's own configuration entry in webpack and therefore not having access to the same chunks (vendor) as in trunk atm. |
|
Thanks a lot for this PR, @gaambo. We're moving everything to Gutenberg, and we'll stop updating this repository at the end of this month (after the 6.3 feature freeze): Tracking Issue. The |
|
I'm going to close this issue as part of the migration to the Gutenberg repository. We will open a new PR for this in Gutenberg once the SCRIPT_DEBUG PR is merged. Please, go to this discussion to continue the conversation. |
See discussion #219
This PR adds the preact debug tools to the runtime. Webpack now creates two versions of the runtime. A
runtime.jsincluding the debugtools and aruntime.min.jswithout them. Bundle size is nearly the same.If
SCRIPT_DEBUGis set to true, the plugin enqueues the version with debug tools. Both versions are minified.To make it work I had to extend the webpack config and return multiple configs - that's why common config is stored in a shared config. Also the
DefinePluginis used to build a constant which can be checked in the runtime on whether to import the debug tools or note.preact/debugcannot be externalized and needs to be the first import, that's why a flag is used.I'm not a webpack expert, so if there's a better way to do it let me know.
How to test:
npm build.wp-env.jsonsetconfig.SCRIPT_DEBUGtotruewp-env start.runtime.jswas loaded. Preact devtools should be enabled (and not show a warning about missing renderings). Preact devtools should show some directives..wp-env.jsonsetconfig.SCRIPT_DEBUGtofalsewp-env start.runtime.min.jswas loaded. Preact devtools should not be enabled/active or show a warning about missing renderings.