Interactivity API: Include preact/debug when SCRIPT_DEBUG is enabled#60514
Merged
cbravobernal merged 4 commits intotrunkfrom Apr 9, 2024
Merged
Interactivity API: Include preact/debug when SCRIPT_DEBUG is enabled#60514cbravobernal merged 4 commits intotrunkfrom
preact/debug when SCRIPT_DEBUG is enabled#60514cbravobernal merged 4 commits intotrunkfrom
Conversation
DAreRodz
added
[Type] Enhancement
DAreRodz
commented
Apr 5, 2024
lib/interactivity-api.php
Outdated
| wp_register_script_module( | ||
| '@wordpress/interactivity', | ||
| gutenberg_url( '/build/interactivity/index.min.js' ), | ||
| gutenberg_url( '/build/interactivity/' . ( wp_is_development_mode( 'plugin' ) ? 'debug.min.js' : 'index.min.js' ) ), |
Contributor
Author
There was a problem hiding this comment.
Probably we want to include here other development modes (theme, core). Or simply run:
isset( WP_DEVELOPMENT_MODE ) ? 'debug.min.js' : 'index.min.js'There's also WP_DEBUG to indicate that WordPress should run in debug mode. Would it make sense to use that constant instead? 🤔
cc: @gziolo
Member
There was a problem hiding this comment.
It seems like any development mode could potentially benefit from this. Certainly core and plugin at this time.
Member
There was a problem hiding this comment.
wp_is_development_mode is used mostly to disable caching in PHP. More details in https://make.wordpress.org/core/2023/07/14/configuring-development-mode-in-6-3/.
Here is the list of constants you can use with assets:
define('SCRIPT_DEBUG', true); loads the development (non-minified) versions of all scripts and CSS, and disables compression and concatenation,
By the way, Interactivity API scripts in the Gutenberg plugin are incorrectly always registered using the production version at the moment. It was fixed in WP core:
The version in WP core uses the helper function wp_scripts_get_suffix that sets the .js or .min.js using a few conditions where check for SCRIPT_DEBUG is one of them.
The same constant is being injected to JS using webpack, so you can also used it to enforce dead code elimination on production when using debug tools:
gutenberg/tools/webpack/shared.js
Lines 72 to 73 in 94eaca9
Contributor
Author
There was a problem hiding this comment.
OK, let's use SCRIPT_DEBUG then.
Contributor
Author
There was a problem hiding this comment.
@gziolo, regarding what you mentioned about Gutenberg always registering the production version of the Interactivity API scripts, is that something we can fix in this PR?
Contributor
There was a problem hiding this comment.
I think we can add the suffix variable, similar to what is done in Core.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +347 B (0%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
sirreal
approved these changes
Apr 8, 2024
Member
sirreal
left a comment
sirreal
left a comment
There was a problem hiding this comment.
This works well 👍
We'll need to modify core as well when this lands.
Let's make sure to use the best development mode before landing this, my recommendation would be any development mode.
lib/interactivity-api.php
Outdated
| wp_register_script_module( | ||
| '@wordpress/interactivity', | ||
| gutenberg_url( '/build/interactivity/index.min.js' ), | ||
| gutenberg_url( '/build/interactivity/' . ( wp_is_development_mode( 'plugin' ) ? 'debug.min.js' : 'index.min.js' ) ), |
Member
There was a problem hiding this comment.
It seems like any development mode could potentially benefit from this. Certainly core and plugin at this time.
DAreRodz
changed the title
preact/debug on development modepreact/debug when SCRIPT_DEBUG is enabled
Contributor
|
The suffix issue can be done in a follow-up PR. |
cbravobernal
added a commit
to garridinsi/gutenberg
that referenced
this pull request
Apr 9, 2024
…led (WordPress#60514) * Create `debug` bundle * Enqueue debug bundle for 'plugin' development mode * Include the debug version for plugin and core modes * Use SCRIPT_DEBUG instead of development mode Co-authored-by: DAreRodz <darerodz@git.wordpress.org> Co-authored-by: sirreal <jonsurrell@git.wordpress.org> Co-authored-by: gziolo <gziolo@git.wordpress.org> Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
May 24, 2024
Syncs the changes from Gutenberg: WordPress/gutenberg#60514. Enqueues a different Interactivity API runtime version with preact/debug when SCRIPT_DEBUG is enabled. Props darerodz, jonsurrell, gziolo. Fixes #61171. git-svn-id: https://develop.svn.wordpress.org/trunk@58195 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
May 24, 2024
Syncs the changes from Gutenberg: WordPress/gutenberg#60514. Enqueues a different Interactivity API runtime version with preact/debug when SCRIPT_DEBUG is enabled. Props darerodz, jonsurrell, gziolo. Fixes #61171. Built from https://develop.svn.wordpress.org/trunk@58195 git-svn-id: http://core.svn.wordpress.org/trunk@57658 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to platformsh/wordpress-performance
that referenced
this pull request
May 24, 2024
Syncs the changes from Gutenberg: WordPress/gutenberg#60514. Enqueues a different Interactivity API runtime version with preact/debug when SCRIPT_DEBUG is enabled. Props darerodz, jonsurrell, gziolo. Fixes #61171. Built from https://develop.svn.wordpress.org/trunk@58195 git-svn-id: https://core.svn.wordpress.org/trunk@57658 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Closes #59829.
This PR introduces
preact/debugin the Interactivity API runtime whenSCRIPT_DEBUGis enabled.Why?
To integrate the Interactivity API runtime with the Preact Devtools, helping developers debug their interactive blocks.
How?
Creating another bundle with the Interactivity API runtime with
preact/debugat the top.As
preact/debugimportspreactinternally, both libraries need to be included in the same bundle. That's why I haven't created a separate bundle with onlypreact/debug.In addition, we may want to include more stuff in the debug version of the Interactivity API.
Testing Instructions
ℹ️ Note that your browser needs the Peact Devtools installed.
ℹ️
SCRIPT_DEBUGis enabled by default in@wordpress/env(see this).build/interactivity/debug.min.jsappears there.SCRIPT_DEBUGto false in your development site config. If you are usingwp-env, you can add this to your.wp-ev.override.jsonfile:build/interactivity/index.min.js.