@automattic/i18n-loader-webpack-plugin 1.0.2 → 2.0.0

package/.eslintignore

@@ -0,0 +1,3 @@
+# Not loaded by default eslint, but we use tools/js-tools/load-eslint-ignore.js in .eslintrc to munge it in.
+
+tests/fixtures/

package/CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.0] - 2022-01-25
+### Changed
+- BREAKING: Remove the downloading logic from the runtime by requiring a "loader" module rather than a "state" module. This gives more flexibility for different implementations in the future.
+- Update documentation for moving of the handling of package→plugin path mapping into jetpack-composer-plugin and jetpack-assets.
+
 ## [1.0.2] - 2022-01-18
 ### Changed
 - General: update required node version to v16.13.2
@@ -20,5 +25,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Initial release.
 
+[2.0.0]: https://github.com/Automattic/i18n-loader-webpack-plugin/compare/v1.0.2...v2.0.0
 [1.0.2]: https://github.com/Automattic/i18n-loader-webpack-plugin/compare/v1.0.1...v1.0.2
 [1.0.1]: https://github.com/Automattic/i18n-loader-webpack-plugin/compare/v1.0.0...v1.0.1

package/README.md

@@ -28,9 +28,10 @@ This goes in the `plugins` section of your Webpack config, e.g.
 Parameters recognized by the plugin are:
 
 - `textdomain`: The text domain used in the JavaScript code. This is required, unless nothing in your JS actually uses [@wordpress/i18n].
-- `stateModule`: The name of a module supplying the i18n state. See [State module](#state-module) below for details.
+- `loaderModule`: The name of a module supplying the i18n loader. See [Loader module](#loader-module) below for details.
+- `loaderMethod`: The name of the function from `loaderModule` to download the i18n. See [Loader module](#loader-module) below for details.
 - `target`: The target of the build: 'plugin' (the default), 'theme', or 'core'. This is used to determine where in WordPress's languages directory to look for the translation files.
-- `path`: See [Webpack context](#webpack-context) and [Use in Composer packages](#use-in-composer-packages) below for details.
+- `path`: See [Webpack context](#webpack-context) below for details.
 - `ignoreModules`: If some bundles in your build depend on [@wordpress/i18n] for purposes other than translating strings, i18n-loader-webpack-plugin will none the less count them as "using @wordpress/i18n" which may result in it trying to load translations for bundles that do not need it. This option may be used to ignore the relevant source files when examining the bundles.
 
   The value may be a function, which will be passed the file path relative to [Webpack's context] and the Webpack Module object and which should return true if the file should be ignored, or a string or RegExp to be compared with the relative file path, or an array of such strings, RegExps, and/or functions.
@@ -50,23 +51,32 @@ But if for some reason you want to do it manually, something like this in your W
 }
 ```
 
-### State module
+### Loader module
 
-In order to load the translations, the generated bundle needs to be provided with some state at runtime. This is handled by loading a module that must be externalized by your Webpack configuration.
+In order to load the translations, the generated bundle needs to call a method to do the actual downloading at runtime. This is handled by loading a module that must be externalized by your Webpack configuration.
 
-The default module name is `@wordpress/jp-i18n-state`, which will automatically be externalized by [@wordpress/dependency-extraction-webpack-plugin], which will also register it as a dependency for "wp-jp-i18n-state" in the generated `.asset.php` file. That, in turn, is provided by the [automattic/jetpack-assets] Composer package (which also provides an `Automattic\Jetpack\Assets::register_script()` function to easily consume the `.asset.php` file).
+The default module name is `@wordpress/jp-i18n-loader`, which will automatically be externalized by [@wordpress/dependency-extraction-webpack-plugin], which will also register it as a dependency for "wp-jp-i18n-loader" in the generated `.asset.php` file. That, in turn, is provided by the [automattic/jetpack-assets] Composer package (which also provides an `Automattic\Jetpack\Assets::register_script()` function to easily consume the `.asset.php` file).
 
-But if for some reason you don't want to use those packages, you can set the plugin's `stateModule` option to point to a different module name, use [Webpack's externals configuration] to externalize it, and appropriate PHP code to provide the corresponding global variable for your externals configuration to retrieve. The state is a JavaScript object with the following properties:
+But if for some reason you don't want to use those packages, you can set the plugin's `loaderModule` and `loaderMethod` options to point to a different module name, use [Webpack's externals configuration] to externalize it, and appropriate PHP code to provide the corresponding global variable for your externals configuration to retrieve.
 
-- `baseUrl`: The base URL from which to fetch the translations, probably something like `https://yoursite.example.com/wp-content/languages/`. The trailing slash is required.
-- `locale`: The locale used on the page.
-- `domainMap`: An object mapping textdomains. See [Use in Composer packages](#use-in-composer-packages) below for details.
+The loader method might be documented like this:
+```js
+/**
+ * Download and register translations for a bundle.
+ *
+ * @param {string} path - Bundle path being fetched. May have a query part.
+ * @param {string} domain - Text domain to register into.
+ * @param {string} location - Location for the translation: 'plugin', 'theme', or 'core'.
+ * @returns {Promise} Resolved when the translations are registered, or rejected with an `Error`.
+ */
+```
+Most likely the method will separate any query part from the path, hash it, build the download url, fetch it, then register it via `@wordpress/i18n`'s `setLocaleData()` method.
 
 ### Webpack context
 
 WordPress's translation infrastructure generates a file for each JS script named like "_textdomain_-_locale_-_hash_.json". The _hash_ is an MD5 hash of the path of the script file relative to the plugin's root.
 
-I18n-loader-webpack-plugin assumes that [Webpack's context] is the base of the WordPress plugin in which the bundles will be included.
+I18n-loader-webpack-plugin assumes that [Webpack's context] is the base of the WordPress package or plugin in which the bundles will be included, and that the [loader module](#loader-module) will handle mapping from package root to plugin root.
 If this is not the case, you'll need to set the plugin's `path` parameter to the relative path from the plugin's root to Webpack's `output.path`.
 
 ### Other useful Webpack configuration
@@ -88,9 +98,8 @@ WordPress's plugin infrastructure doesn't natively support Composer packages, so
 That won't work for packages needing translation, though, as WordPress's translation infrastructure ignores the `vendor/` directory when looking for strings to be translated.
 You'll need to use something like [automattic/jetpack-composer-plugin] so that the composer packages with translated strings are installed to a different path.
 
-Then, for Webpack builds in the Composer package, you'll need to set i18n-loader-webpack-plugin's `path` option to the path relative to the _plugin's_ root directory. For example, if your Composer package is named "automattic/foobar", will be used with [automattic/jetpack-composer-plugin] which will install the package to `jetpack_vendor/` rather than `vendor/`, and Webpack is building to a `build/` directory within the package, you'd need to set `path` to `jetpack_vendor/automattic/foobar/build/` as that's where the built files will end up relative to the plugin.
-
-The consuming plugin will also need to arrange for the [state module](#state-module)'s `domainMap` to include a mapping from your Composer package's textdomain to the plugin's textdomain (prefixed with "plugins/"), as that's where the translations will end up. This may be done using [automattic/jetpack-assets] along with [automattic/jetpack-composer-plugin], as described in the latter's documentation.
+Also, as the translation file will be named using the plugin's textdomain rather than the Composer package's, the consuming plugin will also need to arrange for the [loader module](#loader-module) to fetch the proper file.
+This may be done using [automattic/jetpack-assets] along with [automattic/jetpack-composer-plugin], as described in the latter's documentation.
 
 ## Security
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/i18n-loader-webpack-plugin",
-	"version": "1.0.2",
+	"version": "2.0.0",
 	"description": "A Webpack plugin to load WordPress i18n when Webpack lazy-loads a bundle.",
 	"homepage": "https://jetpack.com",
 	"bugs": {
@@ -17,8 +17,7 @@
 		"test-coverage": "jest tests --coverage --collectCoverageFrom='src/**/*.js' --coverageDirectory=\"$COVERAGE_DIR\" --coverageReporters=clover"
 	},
 	"dependencies": {
-		"debug": "^4.3.2",
-		"md5-es": "^1.8.2"
+		"debug": "^4.3.2"
 	},
 	"devDependencies": {
 		"@wordpress/dependency-extraction-webpack-plugin": "3.2.1",

package/src/I18nLoaderPlugin.js

@@ -31,8 +31,12 @@ const schema = {
 		},
 	},
 	properties: {
-		stateModule: {
-			description: 'Externalized module supplying the i18n state.',
+		loaderModule: {
+			description: 'Externalized module supplying the i18n loader.',
+			type: 'string',
+		},
+		loaderMethod: {
+			description: 'Method on the loader module to call to load the i18n.',
 			type: 'string',
 		},
 		textdomain: {
@@ -44,7 +48,7 @@ const schema = {
 			enum: [ 'plugin', 'theme', 'core' ],
 		},
 		path: {
-			description: 'Path (relative to the plugin) to locate the output assets.',
+			description: 'Path (relative to the package or plugin) to locate the output assets.',
 			type: 'string',
 		},
 		ignoreModules: {
@@ -79,7 +83,8 @@ class I18nLoaderPlugin {
 
 		this.options = {
 			target: 'plugin',
-			stateModule: '@wordpress/jp-i18n-state',
+			loaderModule: '@wordpress/jp-i18n-loader',
+			loaderMethod: 'downloadI18n',
 			...options,
 		};
 
@@ -114,51 +119,30 @@ class I18nLoaderPlugin {
 		} );
 
 		// At the "make" hook, inject Dependency objects into the build so we can get the modules we need.
-		const stateModuleDep = new I18nLoaderModuleDependency( this.options.stateModule );
-		stateModuleDep.optional = true;
-		const i18nModuleDep = new I18nLoaderModuleDependency( '@wordpress/i18n' );
-		i18nModuleDep.optional = true;
+		const loaderModuleDep = new I18nLoaderModuleDependency( this.options.loaderModule );
+		loaderModuleDep.optional = true;
 		compiler.hooks.make.tapPromise( PLUGIN_NAME, compilation => {
-			return Promise.all( [
-				new Promise( ( resolve, reject ) => {
-					compilation.addModuleChain( compiler.context, stateModuleDep, ( err, module ) => {
-						if ( err ) {
-							return reject( err );
-						}
-						// Webpack bug; Until 5.51.0 it didn't pass the module to the callback.
-						if ( ! module && ! compilation.moduleGraph.getModule( stateModuleDep ) ) {
-							// prettier-ignore
-							let msg = `${ PLUGIN_NAME }:\nFailed to add state module ${ this.options.stateModule } to the build.\n`;
-							if ( this.options.stateModule.startsWith( '@wordpress/' ) ) {
-								msg +=
-									"You'll need to add @wordpress/dependency-extraction-webpack-plugin or an appropriate externals directive to your Webpack config.";
-							} else {
-								msg +=
-									"You'll need to add the appropriate externals directive to your Webpack config.";
-							}
-							compilation.errors.push( new webpack.WebpackError( msg ) );
-						}
-						resolve();
-					} );
-				} ),
-				new Promise( ( resolve, reject ) => {
-					compilation.addModuleChain( compiler.context, i18nModuleDep, ( err, module ) => {
-						if ( err ) {
-							return reject( err );
-						}
-						// Webpack bug; Until 5.51.0 it didn't pass the module to the callback.
-						if ( ! module && ! compilation.moduleGraph.getModule( i18nModuleDep ) ) {
-							compilation.errors.push(
-								new webpack.WebpackError(
-									`${ PLUGIN_NAME }:\nFailed to add i18n module @wordpress/i18n to the build.\n` +
-										"You'll need to add @wordpress/dependency-extraction-webpack-plugin or an appropriate externals directive to your Webpack config, or add @wordpress/i18n to your package.json."
-								)
-							);
+			return new Promise( ( resolve, reject ) => {
+				compilation.addModuleChain( compiler.context, loaderModuleDep, ( err, module ) => {
+					if ( err ) {
+						return reject( err );
+					}
+					// Webpack bug; Until 5.51.0 it didn't pass the module to the callback.
+					if ( ! module && ! compilation.moduleGraph.getModule( loaderModuleDep ) ) {
+						// prettier-ignore
+						let msg = `${ PLUGIN_NAME }:\nFailed to add loader module ${ this.options.loaderModule } to the build.\n`;
+						if ( this.options.loaderModule.startsWith( '@wordpress/' ) ) {
+							msg +=
+								"You'll need to add @wordpress/dependency-extraction-webpack-plugin or an appropriate externals directive to your Webpack config.";
+						} else {
+							msg +=
+								"You'll need to add the appropriate externals directive to your Webpack config.";
 						}
-						resolve();
-					} );
-				} ),
-			] );
+						compilation.errors.push( new webpack.WebpackError( msg ) );
+					}
+					resolve();
+				} );
+			} );
 		} );
 
 		compiler.hooks.thisCompilation.tap( PLUGIN_NAME, compilation => {
@@ -168,10 +152,9 @@ class I18nLoaderPlugin {
 			 * @returns {object} Stuff.
 			 */
 			function getStuff() {
-				const stateModule = compilation.moduleGraph.getModule( stateModuleDep );
-				const i18nModule = compilation.moduleGraph.getModule( i18nModuleDep );
+				const loaderModule = compilation.moduleGraph.getModule( loaderModuleDep );
 
-				const i18nModules = new Set( [ i18nModule ] );
+				const i18nModules = new Set();
 				for ( const module of compilation.modules ) {
 					// rawRequest is for a NormalModule. userRequest is for an ExternalModule. Other types we don't really care about.
 					if (
@@ -183,18 +166,18 @@ class I18nLoaderPlugin {
 				}
 				const i18nModulesArr = [ ...i18nModules ];
 
-				return { stateModule, i18nModule, i18nModulesArr, chunkGraph: compilation.chunkGraph };
+				return { loaderModule, i18nModulesArr, chunkGraph: compilation.chunkGraph };
 			}
 
 			// After chunks have been optimized (e.g. chunk splitting happened), determine which chunks need
 			// our deps and inject them.
 			compilation.hooks.afterOptimizeChunks.tap( PLUGIN_NAME, chunks => {
-				const { stateModule, i18nModule, i18nModulesArr, chunkGraph } = getStuff();
-				if ( ! stateModule ) {
-					debug( "State module is missing, can't run." );
+				const { loaderModule, i18nModulesArr, chunkGraph } = getStuff();
+				if ( ! loaderModule ) {
+					debug( "Loader module is missing, can't run." );
 					return;
 				}
-				if ( ! i18nModule || i18nModulesArr.length <= 0 ) {
+				if ( i18nModulesArr.length <= 0 ) {
 					debug( "I18n module is missing, can't run." );
 					return;
 				}
@@ -239,41 +222,28 @@ class I18nLoaderPlugin {
 					}
 
 					// Inject into the chunk!
-					if ( chunkGraph.isModuleInChunk( stateModule, chunk ) ) {
-						debug( `    Already had ${ this.options.stateModule }` );
+					if ( chunkGraph.isModuleInChunk( loaderModule, chunk ) ) {
+						debug( `    Already had ${ this.options.loaderModule }` );
 					} else {
-						chunkGraph.connectChunkAndModule( chunk, stateModule );
+						chunkGraph.connectChunkAndModule( chunk, loaderModule );
 						chunkGraph.addModuleRuntimeRequirements(
-							stateModule,
+							loaderModule,
 							chunk.runtime,
 							new Set( [ RuntimeGlobals.module ] )
 						);
 					}
-					if ( ! i18nModulesArr.some( m => chunkGraph.isModuleInChunk( m, chunk ) ) ) {
-						debug( "    Didn't itself use @wordpress/i18n" );
-						chunkGraph.connectChunkAndModule( chunk, i18nModule );
-					}
 
 					// Any chunk using this as a runtime doesn't itself need the injected modules.
 					for ( const c of chunk.getAllReferencedChunks() ) {
 						if ( c === chunk ) {
 							continue;
 						}
-						if ( chunkGraph.isModuleInChunk( stateModule, c ) ) {
+						if ( chunkGraph.isModuleInChunk( loaderModule, c ) ) {
 							debug(
 								// prettier-ignore
-								`    Removing redundant ${ this.options.stateModule } from chunk ${ c.name || c.id || c.debugId }`
+								`    Removing redundant ${ this.options.loaderModule } from chunk ${ c.name || c.id || c.debugId }`
 							);
-							chunkGraph.disconnectChunkAndModule( c, stateModule );
-						}
-						for ( const m of i18nModulesArr ) {
-							if ( chunkGraph.isModuleInChunk( m, c ) ) {
-								debug(
-									// prettier-ignore
-									`    Removing redundant @wordpress/i18n from chunk ${ c.name || c.id || c.debugId }`
-								);
-								chunkGraph.disconnectChunkAndModule( c, m );
-							}
+							chunkGraph.disconnectChunkAndModule( c, loaderModule );
 						}
 					}
 				}
@@ -281,22 +251,22 @@ class I18nLoaderPlugin {
 
 			// This is just for debugging, to see if later optimizations removed our modules.
 			compilation.hooks.afterOptimizeChunkModules.tap( PLUGIN_NAME, chunks => {
-				const { stateModule, i18nModulesArr, chunkGraph } = getStuff();
-				if ( ! stateModule || i18nModulesArr.length <= 0 ) {
+				const { loaderModule, i18nModulesArr, chunkGraph } = getStuff();
+				if ( ! loaderModule || i18nModulesArr.length <= 0 ) {
 					return;
 				}
 
 				debug( 'After optimizations,' );
 				for ( const chunk of chunks ) {
-					if ( chunkGraph.isModuleInChunk( stateModule, chunk ) ) {
+					if ( chunkGraph.isModuleInChunk( loaderModule, chunk ) ) {
 						debug(
 							// prettier-ignore
-							` ✅ Chunk ${ chunk.name || chunk.id || chunk.debugId } contains ${ this.options.stateModule }`
+							` ✅ Chunk ${ chunk.name || chunk.id || chunk.debugId } contains ${ this.options.loaderModule }`
 						);
 					} else {
 						debug(
 							// prettier-ignore
-							` ❌ Chunk ${ chunk.name || chunk.id || chunk.debugId } does not contain ${ this.options.stateModule }`
+							` ❌ Chunk ${ chunk.name || chunk.id || chunk.debugId } does not contain ${ this.options.loaderModule }`
 						);
 					}
 					if ( i18nModulesArr.some( m => chunkGraph.isModuleInChunk( m, chunk ) ) ) {
@@ -317,18 +287,19 @@ class I18nLoaderPlugin {
 			compilation.hooks.runtimeRequirementInTree
 				.for( webpack.RuntimeGlobals.ensureChunkHandlers )
 				.tap( PLUGIN_NAME, ( chunk, set ) => {
-					const { stateModule, i18nModulesArr } = getStuff();
-					if ( ! stateModule || i18nModulesArr.length <= 0 ) {
+					const { loaderModule, i18nModulesArr } = getStuff();
+					if ( ! loaderModule || i18nModulesArr.length <= 0 ) {
 						return;
 					}
 
 					debug( `Queuing runtime module for ${ chunk.name || chunk.id || chunk.debugId }.` );
+					set.add( webpack.RuntimeGlobals.getChunkScriptFilename );
 					compilation.addRuntimeModule(
 						chunk,
 						new I18nLoaderRuntimeModule( set, {
 							...this.options,
-							stateModuleName: this.options.stateModule,
-							stateModule,
+							loaderModuleName: this.options.loaderModule,
+							loaderModule,
 							i18nModulesArr,
 						} )
 					);

package/src/I18nLoaderRuntimeModule.js

@@ -1,4 +1,3 @@
-const { default: md5 } = require( 'md5-es' );
 const path = require( 'path' );
 const webpack = require( 'webpack' );
 const { Template, RuntimeGlobals } = webpack;
@@ -44,12 +43,12 @@ class I18nLoaderRuntimeModule extends webpack.RuntimeModule {
 	}
 
 	/**
-	 * Get info for chunks we need to care about.
+	 * Get set of chunks we need to care about.
 	 *
-	 * @returns {Map} Map of chunk ID to data.
+	 * @returns {Set} Chunk IDs.
 	 */
-	getChunkInfo() {
-		const ret = new Map();
+	getChunks() {
+		const ret = new Set();
 		const { chunkGraph } = this.compilation;
 
 		for ( const chunk of this.chunk.getAllAsyncChunks() ) {
@@ -61,12 +60,7 @@ class I18nLoaderRuntimeModule extends webpack.RuntimeModule {
 					module.userRequest === '@wordpress/i18n' ||
 					module.dependencies.some( d => d.request === '@wordpress/i18n' )
 				) {
-					const [ chunkPath, query ] = this.getChunkPath( chunk ).split( '?', 2 );
-					ret.set( chunk.id, {
-						chunkPath,
-						query,
-						hash: md5.hash( chunkPath ),
-					} );
+					ret.add( chunk.id );
 					continue;
 				}
 			}
@@ -76,34 +70,24 @@ class I18nLoaderRuntimeModule extends webpack.RuntimeModule {
 
 	generate() {
 		const { chunk, compilation, runtimeOptions, runtimeRequirements } = this;
-		const { stateModule, stateModuleName, i18nModulesArr, textdomain } = runtimeOptions;
+		const { loaderModule, loaderMethod, loaderModuleName, textdomain, target } = runtimeOptions;
 		const { chunkGraph, runtimeTemplate } = compilation;
-		const chunkInfo = this.getChunkInfo();
+		const basepath =
+			this.runtimeOptions.path ||
+			path.relative( compilation.compiler.context, compilation.outputOptions.path );
+		const chunks = this.getChunks();
 
-		if ( ! chunkInfo.size ) {
+		if ( ! chunks.size ) {
 			debug( `No async submodules using @wordpress/i18n in ${ this.getChunkPath( chunk ) }.` );
 			return null;
 		}
 		debug( `Adding i18n-loading runtime for ${ this.getChunkPath( chunk ) }.` );
 
-		// The hooks should have injected the state and i18n modules. Check to make sure they're still there.
-		if ( ! chunkGraph.isModuleInChunk( stateModule, chunk ) ) {
-			throw new webpack.WebpackError(
-				// prettier-ignore
-				`Chunk ${ chunk.name || chunk.id || chunk.debugId } (${ this.getChunkPath( chunk ) }) has submodules using @wordpress/i18n, but is missing the state module ${ stateModuleName }.`
-			);
-		}
-		let i18nModule;
-		for ( const m of i18nModulesArr ) {
-			if ( chunkGraph.isModuleInChunk( m, chunk ) ) {
-				i18nModule = m;
-				break;
-			}
-		}
-		if ( ! i18nModule ) {
+		// The hooks should have injected the loader module. Check to make sure it's still there.
+		if ( ! chunkGraph.isModuleInChunk( loaderModule, chunk ) ) {
 			throw new webpack.WebpackError(
 				// prettier-ignore
-				`Chunk ${ chunk.name || chunk.id || chunk.debugId } (${ this.getChunkPath( chunk ) }) has submodules using @wordpress/i18n, but is itself missing @wordpress/i18n.`
+				`Chunk ${ chunk.name || chunk.id || chunk.debugId } (${ this.getChunkPath( chunk ) }) has submodules using @wordpress/i18n, but is missing the loader module ${ loaderModuleName }.`
 			);
 		}
 
@@ -116,82 +100,46 @@ class I18nLoaderRuntimeModule extends webpack.RuntimeModule {
 		}
 
 		// Determine the WordPress module name that @wordpress/dependency-extraction-webpack-plugin will (by default) use.
-		let depName = stateModuleName;
+		let depName = loaderModuleName;
 		if ( depName.startsWith( '@wordpress/' ) ) {
 			// prettier-ignore
 			depName = 'wp.' + depName.substring( 11 ).replace( /-([a-z])/g, ( _, letter ) => letter.toUpperCase() );
 		}
 
-		const targetcode = {
-			plugin: '"plugins/" + ',
-			theme: '"themes/" + ',
-			core: '',
-		}[ this.runtimeOptions.target ];
-		const domaincode = `state.domainMap[textdomain] || ( ${ targetcode }textdomain )`;
-
 		// Build the runtime code.
 		// prettier-ignore
 		return Template.asString( [
-			`var textdomain = ${ JSON.stringify( textdomain ) };`,
-			'var chunkInfo = {',
-			Template.indent(
-				Array.from( chunkInfo.entries(), ( [ k, v ] ) => {
-					const items = [
-						Template.toNormalComment( v.chunkPath ) + ' ' + JSON.stringify( v.hash ),
-						v.query ? JSON.stringify( '?' + v.query ) : '""',
-					];
-					return `${ JSON.stringify( k ) }: [ ${ items.join( ', ' ) } ]`;
-				} ).join( ',\n' )
-			),
+			'var installedChunks = {',
+			Template.indent( Array.from( chunks.values(), id => `${ JSON.stringify( id ) }: 0` ).join( ',\n' ) ),
 			'};',
 			'',
 			'var loadI18n = ' +
-				runtimeTemplate.basicFunction( 'info', [
-					'var i18n = ' + runtimeTemplate.moduleExports( {
-						module: i18nModule,
-						chunkGraph,
-						request: '@wordpress/i18n',
-						runtimeRequirements,
-					} ) + ';',
-					'var state = ' + runtimeTemplate.moduleExports( {
-						module: stateModule,
+				runtimeTemplate.basicFunction( 'chunkId', [
+					'var loader = ' + runtimeTemplate.moduleExports( {
+						module: loaderModule,
 						chunkGraph,
-						request: stateModuleName,
+						request: loaderModuleName,
 						runtimeRequirements,
 					} ) + ';',
-					`if ( ! state ) return Promise.reject( new Error( ${ JSON.stringify( 'I18n state is not available. Check that WordPress is exporting ' + depName + '.' ) } ) );`,
-					`if ( state.locale === "en_US" ) return Promise.resolve();`,
-					'if ( typeof fetch === "undefined" ) return Promise.reject( new Error( "Fetch API is not available." ) );',
-					'return fetch(',
-					Template.indent( [
-						runtimeTemplate.supportTemplateLiteral()
-							? '`${ state.baseUrl }${ ' + domaincode + ' }-${ state.locale }-${ info[0] }.json${ info[1] }`'
-							: 'state.baseUrl + ( ' + domaincode + ' ) + "-" + state.locale + "-" + info[0] + ".json" + info[1]',
-					] ),
-					').then( ' + runtimeTemplate.basicFunction( 'res', [
-						'if ( ! res.ok ) throw new Error( "HTTP request failed: " + res.status + " " + res.statusText );',
-						'return res.json();',
-					] ) + ' ).then( ' + runtimeTemplate.basicFunction( 'data', [
-						'var data2 = data.locale_data;',
-						'var localeData = data2[ textdomain ] || data2.messages;',
-						'localeData[""].domain = textdomain;',
-						'i18n.setLocaleData( localeData, textdomain );',
-					] ) + ' );',
+					`if ( loader && loader.${ loaderMethod } )`,
+					Template.indent(
+						`return loader.${ loaderMethod }( ${ JSON.stringify( basepath + '/' ) } + ${ RuntimeGlobals.getChunkScriptFilename }( chunkId ), ${ JSON.stringify( textdomain ) }, ${ JSON.stringify( target ) } );`,
+					),
+					`return Promise.reject( new Error( ${ JSON.stringify( 'I18n loader is not available. Check that WordPress is exporting ' + depName + '.' ) } ) );`,
 				] ) + ';',
 			'',
-			'var installedChunks = {};',
 			`${ RuntimeGlobals.ensureChunkHandlers }.wpI18n = ` + runtimeTemplate.basicFunction( 'chunkId, promises', [
 				'if ( installedChunks[chunkId] ) {',
 				Template.indent( 'promises.push( installedChunks[chunkId] );' ),
-				'} else if ( installedChunks[chunkId] !== 0 && chunkInfo[chunkId] ) {',
+				'} else if ( installedChunks[chunkId] === 0 ) {',
 				Template.indent( [
-					'promises.push( installedChunks[chunkId] = loadI18n( chunkInfo[chunkId] ).then( ',
+					'promises.push( installedChunks[chunkId] = loadI18n( chunkId ).then( ',
 					Template.indent( [
-						runtimeTemplate.basicFunction( '', [ 'installedChunks[chunkId] = 0;' ] ) + ',',
+						runtimeTemplate.basicFunction( '', [ 'installedChunks[chunkId] = false;' ] ) + ',',
 						runtimeTemplate.basicFunction( 'e', [
-							'delete installedChunks[chunkId];',
+							'installedChunks[chunkId] = 0;',
 							"// Log only, we don't want i18n failure to break the entire page.",
-							'console.error( "Failed to fetch i18n data:", e );',
+							'console.error( "Failed to fetch i18n data: ", e );',
 						] ),
 					] ),
 					') );',