From e697f722ad1b1c5f3bcdf6b55dd0c5c22fbca5e7 Mon Sep 17 00:00:00 2001 From: Brandon Payton Date: Mon, 9 Jul 2018 09:38:52 -0700 Subject: [PATCH] Framework: Use clearer filenames for saved vendor scripts (#7313) 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..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..js". --- lib/client-assets.php | 66 +++++++++---------- phpunit/class-vendor-script-filename-test.php | 33 ++++++---- 2 files changed, 54 insertions(+), 45 deletions(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index aab5d7c65adbea..950f611cfc6fea 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -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/promise-polyfill@7.0.0/dist/promise' . $suffix . '.js' ); gutenberg_register_vendor_script( - 'formdata', + 'wp-polyfill-formdata', 'https://unpkg.com/formdata-polyfill@3.0.9/formdata.min.js' ); gutenberg_register_vendor_script( - 'node-contains', + 'wp-polyfill-node-contains', 'https://unpkg.com/polyfill-library@3.26.0-0/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.*?)' - . '(?P\.development|\.production)?' - . '(?P\.min)?' - . '(?P\.js)' - . '(?P.*)' - . '$/', - $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.*?)' + . '(?P\.min)?' + . '(?P\.js)' + . '(?P.*)' + . '$/', + $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"; } /** @@ -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"; diff --git a/phpunit/class-vendor-script-filename-test.php b/phpunit/class-vendor-script-filename-test.php index 352395e3bf9b17..005e8f17297b40 100644 --- a/phpunit/class-vendor-script-filename-test.php +++ b/phpunit/class-vendor-script-filename-test.php @@ -10,50 +10,61 @@ function vendor_script_filename_cases() { return array( // Development mode scripts. array( + 'react-handle', 'https://unpkg.com/react@16.4.1/umd/react.development.js', - 'react.HASH.js', + 'react-handle.HASH.js', ), array( + 'react-dom-handle', 'https://unpkg.com/react-dom@16.4.1/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/react@16.4.1/umd/react.production.min.js', - 'react.min.HASH.js', + 'react-handle.min.HASH.js', ), array( + 'react-dom-handle', 'https://unpkg.com/react-dom@16.4.1/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', ), ); } @@ -61,9 +72,9 @@ function vendor_script_filename_cases() { /** * @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,