[wp-trac] [WordPress Trac] #63887: Add sourceURL to inline scripts and styles

[WordPress Trac]

#63887: Add sourceURL to inline scripts and styles
--------------------------------------+------------------------------
 Reporter:  jonsurrell                |       Owner:  jonsurrell
     Type:  enhancement               |      Status:  reopened
 Priority:  normal                    |   Milestone:  6.9
Component:  Script Loader             |     Version:
 Severity:  normal                    |  Resolution:
 Keywords:  has-patch has-unit-tests  |     Focuses:  javascript, css
--------------------------------------+------------------------------
Changes (by jonsurrell):

 * status:  closed => reopened
 * resolution:  fixed =>


Comment:

 Interesting, thanks for the report @ralucastn.

 We should certainly address this, I'm not sure what the best path is.

 We could add a trailing newline. That should fix the problem here and
 otherwise does not change things [https://github.com/WordPress/wordpress-
 develop/blob/81e3dbeba63838a13b137c6308548e35a616f3b6/src/wp-includes
 /script-loader.php#L3015 because script tag contents are trimmed and get
 newlines when printed.] However, in this case it doesn't make sense to
 include to `sourceURL` over and over.

 Instead, I think we should only add the `sourceURL` when `$display` is
 `true` so we know we're printing a script tag. **I'll prepare this
 change.**

 -----

 A detailed description of the issue:

 [https://github.com/woocommerce/woocommerce/blob/1ddb72608c97473ed3baa8b44124e3594e203869/plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php#L900-L918
 WooCommerce is calling] `wp_scripts->print_translations( $handle, false
 )`, getting the contents of the scripts and concatenating them into a
 single script like this:

 {{{#!php
 <?php
 $wp_scripts   = wp_scripts();
 $translations = array();

 $chunks        = $this->get_chunks_paths( $this->chunks_folder );
 $vendor_chunks = $this->get_chunks_paths( 'vendors--mini-cart-contents-
 block' );
 $shared_chunks = array( 'cart-blocks/cart-line-items--mini-cart-contents-
 block/products-table-frontend' );

 foreach ( array_merge( $chunks, $vendor_chunks, $shared_chunks ) as $chunk
 ) {
     $handle = 'wc-blocks-' . $chunk . '-chunk';
     $this->asset_api->register_script( $handle,
 $this->asset_api->get_block_asset_build_path( $chunk ), array(), true );
     $translations[] = $wp_scripts->print_translations( $handle, false );
     wp_deregister_script( $handle );
 }

 $translations = array_filter( $translations );

 return implode( '', $translations );
 }}}

 [https://github.com/WordPress/wordpress-
 develop/blob/ca613af5d2f348c37a01752e86e30e4812151c4e/src/wp-includes
 /class-wp-scripts.php#L733 WordPress Core is including] the `sourceURL`
 comment in translations in those cases like this:

 {{{#!php
 <?php
 $source_url = rawurlencode( "{$handle}-js-translations" );

 $output = <<<JS
 ( function( domain, translations ) {
 var localeData = translations.locale_data[ domain ] ||
 translations.locale_data.messages;
 localeData[""].domain = domain;
 wp.i18n.setLocaleData( localeData, domain );
 } )( "{$domain}", {$json_translations} );
 //# sourceURL={$source_url}
 JS;

 // $display is false in this case
 if ( $display ) {
     wp_print_inline_script_tag( $output, array( 'id' => "{$handle}-js-
 translations" ) );
 }

 return $output;
 }}}

 The contents generated in `print_translations()` does not include a
 trailing newline. That causes it to break when concatenated like in the
 example with WooCommerce.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63887#comment:58>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform