Skip to content

Commit

Permalink
Framework: Use clearer filenames for saved vendor scripts (#7313)
Browse files Browse the repository at this point in the history 
Today, we save vendor scripts based on the filename contained in the
script's external URL. This is OK but can lead to unclearly named files
in the `./vendor` directory. For example, scripts from the Financial
Times polyfill library have URL filenames of "polyfill.js". If we use
more than one of these polyfills, we will see multiple saved vendor
scripts named "polyfill.<HASH>.js". It would be a bit clearer if we
saved vendor scripts by their script handle, and that's what this update
does. Now, a polyfill script like the one mentioned above will have a
clearer filename like "wp-polyfill-node-contains.<HASH>.js".
  • Loading branch information
@brandonpayton
brandonpayton authored Jul 9, 2018
1 parent fab861a commit e697f72
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 45 deletions.
66 changes: 32 additions & 34 deletions lib/client-assets.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -644,65 +644,63 @@ function gutenberg_register_vendor_scripts() {
);
wp_add_inline_script( 'lodash', 'window.lodash = _.noConflict();' );
gutenberg_register_vendor_script(
'fetch',
'wp-polyfill-fetch',
'https://unpkg.com/whatwg-fetch/fetch.js'
);
gutenberg_register_vendor_script(
'promise',
'wp-polyfill-promise',
'https://unpkg.com/[email protected]/dist/promise' . $suffix . '.js'
);
gutenberg_register_vendor_script(
'formdata',
'wp-polyfill-formdata',
'https://unpkg.com/[email protected]/formdata.min.js'
);
gutenberg_register_vendor_script(
'node-contains',
'wp-polyfill-node-contains',
'https://unpkg.com/[email protected]/polyfills/Node/prototype/contains/polyfill.js'
);
}

/**
* Retrieves a unique and reasonably short and human-friendly filename for a
* vendor script based on a URL.
* vendor script based on a URL and the script handle.
*
* @param string $src Full URL of the external script.
* @param string $handle The name of the script.
* @param string $src Full URL of the external script.
*
* @return string Script filename suitable for local caching.
* @return string Script filename suitable for local caching.
*
* @since 0.1.0
*/
function gutenberg_vendor_script_filename( $src ) {
$filename = basename( $src );
$hash = substr( md5( $src ), 0, 8 );

$match = preg_match(
'/^'
. '(?P<prefix>.*?)'
. '(?P<ignore>\.development|\.production)?'
. '(?P<suffix>\.min)?'
. '(?P<extension>\.js)'
. '(?P<extra>.*)'
. '$/',
$filename,
$filename_pieces
);

if ( ! $match ) {
return "$filename.$hash.js";
}

$match = preg_match(
function gutenberg_vendor_script_filename( $handle, $src ) {
$match_tinymce_plugin = preg_match(
'@tinymce.*/plugins/([^/]+)/plugin(\.min)?\.js$@',
$src,
$tinymce_plugin_pieces
);
if ( $match ) {
$filename_pieces['prefix'] = 'tinymce-plugin-' . $tinymce_plugin_pieces[1];
if ( $match_tinymce_plugin ) {
$prefix = 'tinymce-plugin-' . $tinymce_plugin_pieces[1];
$suffix = isset( $tinymce_plugin_pieces[2] ) ? $tinymce_plugin_pieces[2] : '';
} else {
$filename = basename( $src );
$match = preg_match(
'/^'
. '(?P<ignore>.*?)'
. '(?P<suffix>\.min)?'
. '(?P<extension>\.js)'
. '(?P<extra>.*)'
. '$/',
$filename,
$filename_pieces
);

$prefix = $handle;
$suffix = $match ? $filename_pieces['suffix'] : '';
}

return $filename_pieces['prefix'] . $filename_pieces['suffix']
. '.' . $hash
. $filename_pieces['extension'];
$hash = substr( md5( $src ), 0, 8 );

return "${prefix}${suffix}.${hash}.js";
}

/**
Expand All @@ -722,7 +720,7 @@ function gutenberg_register_vendor_script( $handle, $src, $deps = array() ) {
return;
}

$filename = gutenberg_vendor_script_filename( $src );
$filename = gutenberg_vendor_script_filename( $handle, $src );

if ( defined( 'GUTENBERG_LIST_VENDOR_ASSETS' ) && GUTENBERG_LIST_VENDOR_ASSETS ) {
echo "$src|$filename\n";
Expand Down
33 changes: 22 additions & 11 deletions phpunit/class-vendor-script-filename-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,60 +10,71 @@ function vendor_script_filename_cases() {
return array(
// Development mode scripts.
array(
'react-handle',
'https://unpkg.com/[email protected]/umd/react.development.js',
'react.HASH.js',
'react-handle.HASH.js',
),
array(
'react-dom-handle',
'https://unpkg.com/[email protected]/umd/react-dom.development.js',
'react-dom.HASH.js',
'react-dom-handle.HASH.js',
),
array(
'tinymce-handle',
'https://fiddle.azurewebsites.net/tinymce/nightly/tinymce.js',
'tinymce.HASH.js',
'tinymce-handle.HASH.js',
),
array(
'tinymce-plugin-handle',
'https://fiddle.azurewebsites.net/tinymce/nightly/plugins/lists/plugin.js',
'tinymce-plugin-lists.HASH.js',
),
// Production mode scripts.
array(
'react-handle',
'https://unpkg.com/[email protected]/umd/react.production.min.js',
'react.min.HASH.js',
'react-handle.min.HASH.js',
),
array(
'react-dom-handle',
'https://unpkg.com/[email protected]/umd/react-dom.production.min.js',
'react-dom.min.HASH.js',
'react-dom-handle.min.HASH.js',
),
array(
'tinymce-handle',
'https://fiddle.azurewebsites.net/tinymce/nightly/tinymce.min.js',
'tinymce.min.HASH.js',
'tinymce-handle.min.HASH.js',
),
array(
'tinymce-plugin-handle',
'https://fiddle.azurewebsites.net/tinymce/nightly/plugins/lists/plugin.min.js',
'tinymce-plugin-lists.min.HASH.js',
),
// Other cases.
array(
'something-handle',
'http://localhost/something.js?querystring',
'something.HASH.js',
'something-handle.HASH.js',
),
array(
'something-handle',
'http://localhost/something.min.js?querystring',
'something.min.HASH.js',
'something-handle.min.HASH.js',
),
array(
'idkwhatthisis-handle',
'http://localhost/idkwhatthisis',
'idkwhatthisis.HASH.js',
'idkwhatthisis-handle.HASH.js',
),
);
}

/**
* @dataProvider vendor_script_filename_cases
*/
function test_gutenberg_vendor_script_filename( $url, $expected_filename_pattern ) {
function test_gutenberg_vendor_script_filename( $handle, $url, $expected_filename_pattern ) {
$hash = substr( md5( $url ), 0, 8 );
$actual_filename = gutenberg_vendor_script_filename( $url );
$actual_filename = gutenberg_vendor_script_filename( $handle, $url );
$actual_filename_pattern = str_replace( $hash, 'HASH', $actual_filename );
$this->assertEquals(
$expected_filename_pattern,
Expand Down

0 comments on commit e697f72

Please sign in to comment.