dump-example-scripts-en_US-blocking-head-script-with-translations-script.json

{"foo": "bar"}

dump-example-scripts.php

<?php
/**
 * Plugin Name: Dump Example Scripts
 * Author: Weston Ruter
 */

namespace DumpExampleScripts;

function get_script() {
	return plugin_dir_url( __FILE__ ) . 'script.js';
}

add_action( 'wp_enqueue_scripts', function () {

	wp_enqueue_script( 'blocking-head-script', get_script() );
	wp_enqueue_script( 'blocking-footer-script', get_script(), array(), false, array( 'in_footer' => true ) );

	wp_enqueue_script( 'blocking-head-script-with-extra-script', get_script() );
	wp_localize_script( 'blocking-head-script-with-extra-script', 'BlockingHeadScriptWithExtraScript', array( 'foo' => 'bar' ) );

	wp_enqueue_script( 'blocking-head-script-with-inline-before-script', get_script() );
	wp_add_inline_script( 'blocking-head-script-with-inline-before-script',  '/*before*/', 'before');

	wp_enqueue_script( 'blocking-head-script-with-inline-after-script', get_script() );
	wp_add_inline_script( 'blocking-head-script-with-inline-after-script',  '/*after*/', 'after');

	wp_enqueue_script( 'blocking-head-script-with-translations-script', get_script() );
	wp_set_script_translations( 'blocking-head-script-with-translations-script',  'dump-example-scripts', __DIR__ );

	wp_enqueue_script( 'defer-footer-script', get_script(), array(), false, array( 'in_footer' => true, 'strategy' => 'defer' ) );
	wp_enqueue_script( 'async-footer-script', get_script(), array(), false, array( 'in_footer' => true, 'strategy' => 'async' ) );

	wp_enqueue_script( 'async-footer-script-with-defer-dependent', get_script(), array(), false, array( 'in_footer' => true, 'strategy' => 'async' ) );
	wp_enqueue_script( 'defer-footer-script-with-async-dependency', get_script(), array( 'async-footer-script-with-defer-dependent' ), false, array( 'in_footer' => true, 'strategy' => 'defer' ) );

	wp_enqueue_script( 'defer-footer-script-with-blocking-dependent', get_script(), array(), false, array( 'in_footer' => true, 'strategy' => 'defer' ) );
	wp_enqueue_script( 'blocking-footer-script-with-defer-dependency', get_script(), array( 'defer-footer-script-with-blocking-dependent' ), false, array( 'in_footer' => true ) );

	wp_enqueue_script( 'defer-footer-script-with-after-inline-script', get_script(), array(), false, array( 'in_footer' => true, 'strategy' => 'defer' ) );
	wp_add_inline_script( 'defer-footer-script-with-after-inline-script', '/*after*/', 'after' );
} );


add_action( 'wp_footer', function () {
	?>
	<script>
		console.table(
			(
				/************* Start custom-metric code **************/
				function getWordPressScripts() {
					const entries = [];

					/**
					 * Checks whether the provided element is an inline script.
					 *
					 * @param {?Element} element Element to examine. May be null.
					 * @return {?number} Size of the inline script or null if the element isn't an inline script.
					 */
					const getInlineScriptSize = (element) => {
						if (element instanceof HTMLScriptElement && !element.src) {
							return element.textContent.length;
						}
						return null;
					};

					const scripts = document.querySelectorAll('script[src][id$="-js"]');
					for (const script of scripts) {
						/** @var HTMLScriptElement script */
						const handle = script.id.replace(/-js$/, '');
						entries.push({
							handle,
							src: script.src,
							in_footer: script.parentNode !== document.head,
							async: script.async,
							defer: script.defer,
							intended_strategy: script.dataset.wpStrategy || null,
							after_script_size: getInlineScriptSize(document.getElementById(`${handle}-js-after`)),
							before_script_size: getInlineScriptSize(document.getElementById(`${handle}-js-before`)),
							extra_script_size: getInlineScriptSize(document.getElementById(`${handle}-js-extra`)),
							translations_script_size: getInlineScriptSize(document.getElementById(`${handle}-js-translations`)),
						});
					}
					return entries;
				}
				/************* End custom-metric code **************/
			)()

		);
	</script>
	<?php
}, 10000 );

// Append the handle to the script src just to make them all unique.
add_filter( 'script_loader_src', function ( $src, $handle ) {
	if ( strtok( $src, '?' ) === get_script() ) {
		$src = add_query_arg( 'handle', $handle, $src );
	}
	return $src;
}, 10, 2 );

script.js

translations.json

{"foo": "bar"}