Extract map for i18n strings to use for directed load of i18n strings per view.

.gitignore

@@ -13,3 +13,4 @@ languages/gutenberg.pot
 phpcs.xml
 yarn.lock
 docker-compose.override.yml
+translation-map.json

bin/i18n-map-extractor.js

@@ -0,0 +1,130 @@
+const recast = require( 'recast' );
+const { forEach, reduce, includes, has, isEmpty, isFunction } = require( 'lodash' );
+const { writeFileSync } = require( 'fs' );
+const NormalModule = require( 'webpack/lib/NormalModule' );
+
+class wpi18nExtractor {
+	constructor( options ) {
+		const DEFAULT_FUNCTIONS = [
+			'__',
+			'_n',
+			'_x',
+			'_nx',
+			'sprintf',
+		];
+		this.options = options || {};
+		this.options.filename = this.options.filename || 'translation-map.json';
+		this.translationMap = {};
+		this.functionNames = this.options.functionNames || DEFAULT_FUNCTIONS;
+	}
+
+	extractStringFromFunctionCall( args, functionName ) {
+		const strings = [];
+		switch ( functionName ) {
+			case '__':
+			case 'sprintf':
+			case '_n':
+				strings.push( args[ 0 ].value );
+				break;
+			case '_x':
+				strings.push( args[ 1 ].value + '\u0004' + args[ 0 ].value );
+				break;
+			case '_nx':
+				strings.push( args[ 3 ].value + '\u0004' + args[ 0 ].value );
+		}
+		return strings;
+	}
+
+	getStringsFromModule( module, extractor ) {
+		const source = module.originalSource().source();
+		if ( isEmpty( source ) ) {
+			return [];
+		}
+		let strings = [];
+		try {
+			const ast = recast.parse( source );
+			const { types } = recast;
+			types.visit( ast, {
+				visitCallExpression: function( path ) {
+					const node = path.node;
+					if ( includes( extractor.functionNames, node.callee.name ) &&
+						node.arguments
+					) {
+						strings = strings.concat(
+							extractor.extractStringFromFunctionCall(
+								types.getFieldValue( node, 'arguments' ),
+								node.callee.name,
+							)
+						);
+					}
+					this.traverse( path );
+				},
+			} );
+		} catch ( e ) {
+			//we just want to skip parsing errors.
+		}
+		return strings;
+	}
+
+	parseSourcesToMap( modules, chunkName, extractor ) {
+		const { getStringsFromModule } = extractor;
+		reduce(
+			Array.from( modules ),
+			function( mapped, module ) {
+				if ( ! ( module instanceof NormalModule ) ||
+					! isFunction( module.originalSource )
+				) {
+					return mapped;
+				}
+				if ( ! has( mapped, chunkName ) ) {
+					mapped[ chunkName ] = [];
+				}
+				mapped[ chunkName ] = mapped[ chunkName ]
+					.concat( getStringsFromModule( module, extractor ) );
+				return mapped;
+			},
+			extractor.translationMap
+		);
+	}
+
+	apply( compiler ) {
+		const { processChunks } = this;
+		const extractor = this;
+
+		/**
+		 * webpack 4 registration
+		 */
+		if ( has( compiler, 'hooks' ) ) {
+			compiler.hooks.thisCompilation.tap( 'webpack-i18n-map-extractor', compilation => {
+				compilation.hooks.optimizeChunks.tap( 'webpack-i18n-map-extractor', chunks => {
+					processChunks( chunks, extractor );
+				} );
+			} );
+		} else {
+			compiler.plugin( 'this-compilation', ( compilation ) => {
+				compilation.plugin( [ 'optimize-chunks', 'optimize-extracted-chunks' ], ( chunks ) => {
+					processChunks( chunks, extractor );
+				} );
+			} );
+		}
+	}
+
+	processChunks( chunks, extractor ) {
+		const {
+			options,
+			translationMap,
+			parseSourcesToMap,
+		} = extractor;
+		forEach( chunks, function( chunk ) {
+			if ( chunk.name ) {
+				parseSourcesToMap( chunk._modules, chunk.name, extractor );
+			}
+		} );
+		writeFileSync( './' + options.filename,
+			JSON.stringify( translationMap, null, 2 ),
+			'utf-8'
+		);
+	}
+}
+
+module.exports = wpi18nExtractor;

lib/class-gb-scripts.php

@@ -0,0 +1,198 @@
+<?php
+
+if ( ! defined( 'ABSPATH' ) ) {
+	die( 'Silence is golden.' );
+}
+
+/**
+ * This class handles queueing up only the translations for javascript files that have been enqueued for translation.
+ *
+ * @since   1.0.0
+ */
+class GB_Scripts {
+
+	/**
+	 * Will hold all registered i18n scripts.
+	 *
+	 * @var array
+	 */
+	private $registered_i18n = array();
+
+
+	/**
+	 * Used to hold queued translations for the chunks loading in a view.
+	 *
+	 * @var array
+	 */
+	private $queued_chunk_translations = array();
+
+
+	/**
+	 * Obtained from the generated json file from the all javascript using wp.i18n with a map of chunk names to
+	 * translation strings.
+	 *
+	 * @var array
+	 */
+	private $chunk_map;
+
+
+	/**
+	 * GB_Scripts constructor.
+	 *
+	 * @param array() $chunk_map  An array of chunks and the strings translated for those chunks.  If not provided class
+	 *                            will look for map in root of plugin with filename of 'translation-map.json'.
+	 */
+	public function __construct( $chunk_map = array() ) {
+		$this->set_chunk_map( $chunk_map );
+		add_filter( 'print_scripts_array', array( $this, 'queue_i18n' ) );
+	}
+
+
+	/**
+	 * Used to register a script that has i18n strings for its $chunk_name
+	 *
+	 * @param string $handle
+	 * @param string $chunk_name
+	 * @param string $domain
+	 */
+	public function register_script_i18n( $handle, $chunk_name, $domain ) {
+		$this->registered_i18n[ $handle ] = array( $chunk_name, $domain );
+	}
+
+
+	/**
+	 * Callback on print_scripts_array to listen for scripts enqueued and handle seting up the localized data.
+	 *
+	 * @param $handles
+	 *
+	 * @return array
+	 */
+	public function queue_i18n( $handles ) {
+		if ( empty( $this->registered_i18n ) || empty( $this->chunk_map ) ) {
+			return $handles;
+		}
+		foreach ( ( array ) $handles as $handle ) {
+			$this->queue_i18n_chunk_for_handle( $handle );
+		}
+		if ( $this->queued_chunk_translations ) {
+			foreach ( $this->queued_chunk_translations as $handle => $translations_for_domain ) {
+				$this->register_inline_script(
+					$handle,
+					$translations_for_domain[ 'translations' ],
+					$translations_for_domain[ 'domain' ]
+				);
+			}
+		}
+		return $handles;
+	}
+
+
+	/**
+	 * Registers inline script with translations for given handle and domain.
+	 *
+	 * @param string $handle  Handle used to register javascript file containing translations
+	 * @param array  $translations
+	 * @param string $domain    Domain for translations.  If left empty then strings are registered with the default
+	 *                          domain for the javascript.
+	 */
+	private function register_inline_script( $handle, $translations, $domain = '' ) {
+		$script = $domain ?
+			'wp.i18n.setLocaleData( ' . json_encode( $translations ) . ', ' . $domain .  ' );' :
+			'wp.i18n.setLocaleData( ' . json_encode( $translations ) . ' );';
+		wp_add_inline_script(
+			$handle,
+			$script,
+			'before'
+		);
+	}
+
+
+	/**
+	 * Queues up the translation strings for the given handle.
+	 *
+	 * @param string $handle
+	 */
+	private function queue_i18n_chunk_for_handle( $handle ) {
+		if ( isset( $this->registered_i18n[ $handle ] ) ) {
+			list( $chunk, $domain ) = $this->registered_i18n[ $handle ];
+			$translations = $this->get_jed_locale_data_for_domain_and_chunk( $chunk, $domain );
+			if ( count( $translations ) > 1 ) {
+				$this->queued_chunk_translations[ $handle ] = array(
+					'domain'       => $domain,
+					'translations' => $this->get_jed_locale_data_for_domain_and_chunk( $chunk, $domain )
+				);
+			}
+			unset ( $this->registered_i18n[ $handle ] );
+		}
+	}
+
+
+	/**
+	 * Sets the internal chunk_map property.
+	 *
+	 * If $chunk_map is empty or not an array, will attempt to load a chunk map from a default named map.
+	 *
+	 * @param array $chunk_map
+	 */
+	private function set_chunk_map( $chunk_map ) {
+		if ( empty( $chunk_map ) || ! is_array( $chunk_map) ) {
+			$chunk_map = json_decode(
+				file_get_contents( gutenberg_dir_path() . 'translation-map.json' ),
+				true
+			);
+		}
+		$this->chunk_map = $chunk_map;
+	}
+
+
+	/**
+	 * Get the jed locale data for a given chunk and domain
+	 *
+	 * @param string $chunk
+	 * @param string $domain
+	 *
+	 * @return array()
+	 */
+	protected function get_jed_locale_data_for_domain_and_chunk( $chunk, $domain ) {
+		$translations = gutenberg_get_jed_locale_data( $domain );
+		//get index for adding back after extracting strings for this $chunk
+		$index = $translations[ '' ];
+		$translations = $this->get_locale_data_matching_map(
+			$this->get_original_strings_for_chunk_from_map( $chunk ),
+			$translations
+		);
+		$translations[ '' ] = $index;
+		return $translations;
+	}
+
+
+	/**
+	 * Get locale data for given strings from given translations
+	 *
+	 * @param $string_set
+	 * @param $translations
+	 *
+	 * @return array
+	 */
+	protected function get_locale_data_matching_map( $string_set, $translations ) {
+		if ( ! is_array( $string_set ) || ! is_array( $translations ) || empty ( $string_set ) ) {
+			return array();
+		}
+		//some strings with quotes in them will break on the array_flip, so making sure quotes in the string are slashed
+		//also filter falsey values
+		$string_set = array_unique( array_filter( wp_slash( $string_set ) ) );
+		return array_intersect_key( $translations, array_flip( $string_set ) );
+	}
+
+
+	/**
+	 * Get original strings to translate for the given chunk from the map
+	 *
+	 * @param string $chunk_name
+	 *
+	 * @return array
+	 */
+	protected function get_original_strings_for_chunk_from_map( $chunk_name ) {
+		return isset( $this->chunk_map[ $chunk_name ] ) ? $this->chunk_map[ $chunk_name ] : array();
+	}
+}

lib/client-assets.php

@@ -74,6 +74,7 @@ function gutenberg_get_script_polyfill( $tests ) {
  */
 function gutenberg_register_scripts_and_styles() {
 	gutenberg_register_vendor_scripts();
+	gutenberg_register_wpi18n_for_scripts();
 
 	// Editor Scripts.
 	wp_register_script(
@@ -800,6 +801,27 @@ function gutenberg_capture_code_editor_settings( $settings ) {
 	return false;
 }
 
+
+function gutenberg_register_wpi18n_for_scripts() {
+	$handles_and_chunks = array(
+		'wp-data' => 'data',
+		'wp-core-data' => 'coreData',
+		'wp-utils' => 'utils',
+		'wp-hooks' => 'hooks',
+		'wp-date' => 'date',
+		'wp-element' => 'element',
+		'wp-components' => 'components',
+		'wp-blocks' => 'blocks',
+		'wp-viewport' => 'viewport',
+		'wp-editor' => 'editor',
+		'wp-edit-post' => 'editPost',
+		'wp-plugins' => 'plugins'
+	);
+	foreach ( $handles_and_chunks as $handle => $chunk ) {
+		gutenberg_register_script_i18n( $handle, $chunk );
+	}
+}
+
 /**
  * Scripts & Styles.
  *
@@ -882,13 +904,6 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 		);
 	}
 
-	// Prepare Jed locale data.
-	$locale_data = gutenberg_get_jed_locale_data( 'gutenberg' );
-	wp_add_inline_script(
-		'wp-i18n',
-		'wp.i18n.setLocaleData( ' . json_encode( $locale_data ) . ' );'
-	);
-
 	// Preload server-registered block schemas.
 	wp_localize_script( 'wp-blocks', '_wpBlocks', gutenberg_prepare_blocks_for_js() );