Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Register runtime as dependency if found #48

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

mattheu
Copy link
Member

@mattheu mattheu commented Aug 11, 2022

Something we have faced when updating @humanmade/webpack-helpers to Webpack v5 is that hot reloading does not work correctly when you have multiple JS files emitted by a single webpack configuration and loaded on a page at the same time.

The issue is caused by the fact that each file emitted has the webpack runtime included. The fix for this is to split that into a separate file by setting optimization: { runtimeChunk: 'single' } in your webpack dev config. This spits out a new JS file runtime.js that needs to be loaded once per page.

What does this PR do? It detects if runtime.js is present in the manifest, and if so it registers that script and sets it as a dependency of the asset being loaded. This ensures it is always loaded, but only once, on the page

Copy link
Collaborator

@kadamwhite kadamwhite left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One process question and two style nits

inc/namespace.php Outdated Show resolved Hide resolved
inc/namespace.php Outdated Show resolved Hide resolved
// Track registered handles so we can enqueue the correct assets later.
$handles = [];

if ( is_css( $asset_uri ) ) {
// Don't set runtime JS as dependency of a CSS file.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we call is_css( $asset_uri ) again up above, and use that as the condition for looking up the runtime, instead of having to undo it later? Something like,

if ( $runtime && ! is_css( $asset_uri ) ) {

mattheu and others added 3 commits August 15, 2022 16:52
Co-authored-by: K Adam White <kadamwhite@users.noreply.github.com>
Co-authored-by: K Adam White <kadamwhite@users.noreply.github.com>
@mattheu
Copy link
Member Author

mattheu commented Aug 15, 2022

Feedback addressed.

Copy link
Collaborator

@kadamwhite kadamwhite left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @mattheu !

Can we add this to the changelog? We'll need to document this magic somewhere too but the docs generally are a bit bare rn

@@ -106,11 +106,25 @@ function register_asset( string $manifest_path, string $target_asset, array $opt
// Use the requested asset as the asset handle if no handle was provided.
$asset_handle = $options['handle'] ?? $target_asset;
$asset_version = Manifest\get_version( $asset_uri, $manifest_path );
$is_asset_css = is_css( $asset_uri ); // Note returns false for the CSS dev JS fallback.


Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a small thing, but the double-spacing here is breaking linting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants