Add translation key instrumentation for dynamic imports

build/compiler.js

@@ -153,7 +153,8 @@ function Compiler(
     clientChunkMetadata,
     legacyClientChunkMetadata,
     mergedClientChunkMetadata,
-    i18nManifest: new DeferredState(),
+    i18nManifest: new Map(),
+    i18nDeferredManifest: new DeferredState(),
     legacyBuildEnabled,
   };
   const root = path.resolve(dir);

build/get-webpack-config.js

@@ -65,6 +65,7 @@ const JS_EXT_PATTERN = /\.jsx?$/;
 /*::
 import type {
   ClientChunkMetadataState,
+  TranslationsManifest,
   TranslationsManifestState,
   LegacyBuildEnabledState,
 } from "./types.js";
@@ -86,7 +87,8 @@ export type WebpackConfigOpts = {|
     clientChunkMetadata: ClientChunkMetadataState,
     legacyClientChunkMetadata: ClientChunkMetadataState,
     mergedClientChunkMetadata: ClientChunkMetadataState,
-    i18nManifest: TranslationsManifestState,
+    i18nManifest: TranslationsManifest,
+    i18nDeferredManifest: TranslationsManifestState,
     legacyBuildEnabled: LegacyBuildEnabledState,
   },
   fusionConfig: FusionRC,
@@ -451,10 +453,13 @@ function getWebpackConfig(opts /*: WebpackConfigOpts */) {
           state.mergedClientChunkMetadata
         ),
       runtime === 'client'
-        ? new I18nDiscoveryPlugin(state.i18nManifest)
+        ? new I18nDiscoveryPlugin(
+            state.i18nDeferredManifest,
+            state.i18nManifest
+          )
         : new LoaderContextProviderPlugin(
             translationsManifestContextKey,
-            state.i18nManifest
+            state.i18nDeferredManifest
           ),
       !dev && zopfli && zopfliWebpackPlugin,
       !dev && brotliWebpackPlugin,
@@ -465,17 +470,20 @@ function getWebpackConfig(opts /*: WebpackConfigOpts */) {
       // in dev because the CLI will not exit with an error code if the option is enabled,
       // so failed builds would look like successful ones.
       watch && new webpack.NoEmitOnErrorsPlugin(),
-      new InstrumentedImportDependencyTemplatePlugin(
-        runtime !== 'client'
-          ? // Server
+      runtime === 'server'
+        ? // Server
+          new InstrumentedImportDependencyTemplatePlugin(
             state.mergedClientChunkMetadata
-          : /**
-             * Client
-             * Don't wait for the client manifest on the client.
-             * The underlying plugin handles client instrumentation on its own.
-             */
-            void 0
-      ),
+          )
+        : /**
+           * Client
+           * Don't wait for the client manifest on the client.
+           * The underlying plugin handles client instrumentation on its own.
+           */
+          new InstrumentedImportDependencyTemplatePlugin(
+            void 0,
+            state.i18nManifest
+          ),
       dev && hmr && watch && new webpack.HotModuleReplacementPlugin(),
       !dev && runtime === 'client' && new webpack.HashedModuleIdsPlugin(),
       runtime === 'client' &&
@@ -527,7 +535,10 @@ function getWebpackConfig(opts /*: WebpackConfigOpts */) {
               options.optimization.splitChunks
             ),
             // need to re-apply template
-            new InstrumentedImportDependencyTemplatePlugin(void 0),
+            new InstrumentedImportDependencyTemplatePlugin(
+              void 0,
+              state.i18nManifest
+            ),
             new ClientChunkMetadataStateHydratorPlugin(
               state.legacyClientChunkMetadata
             ),

build/plugins/i18n-discovery-plugin.js

@@ -16,27 +16,30 @@ import type {TranslationsManifestState, TranslationsManifest} from "../types.js"
 
 class I18nDiscoveryPlugin {
   /*::
-  manifest: TranslationsManifestState;
-  discoveryState: TranslationsManifest;
+  manifestState: TranslationsManifestState;
+  manifest: TranslationsManifest;
   */
-  constructor(manifest /*: TranslationsManifestState*/) {
+  constructor(
+    manifestState /*: TranslationsManifestState*/,
+    manifest /*: TranslationsManifest*/
+  ) {
+    this.manifestState = manifestState;
     this.manifest = manifest;
-    this.discoveryState = new Map();
   }
   apply(compiler /*: any */) {
     const name = this.constructor.name;
     // "thisCompilation" is not run in child compilations
     compiler.hooks.thisCompilation.tap(name, compilation => {
       compilation.hooks.normalModuleLoader.tap(name, (context, module) => {
-        context[translationsDiscoveryKey] = this.discoveryState;
+        context[translationsDiscoveryKey] = this.manifest;
       });
     });
     compiler.hooks.done.tap(name, () => {
-      this.manifest.resolve(this.discoveryState);
+      this.manifestState.resolve(this.manifest);
     });
     compiler.hooks.invalid.tap(name, filename => {
-      this.manifest.reset();
-      this.discoveryState.delete(filename);
+      this.manifestState.reset();
+      this.manifest.delete(filename);
     });
   }
 }

build/plugins/instrumented-import-dependency-template-plugin.js

@@ -9,7 +9,11 @@
 /* eslint-env node */
 
 /*::
-import type {ClientChunkMetadataState, ClientChunkMetadata} from "../types.js";
+import type {
+  ClientChunkMetadataState,
+  ClientChunkMetadata,
+  TranslationsManifest,
+} from "../types.js";
 */
 
 const ImportDependency = require('webpack/lib/dependencies/ImportDependency');
@@ -34,9 +38,14 @@ const ImportDependencyTemplate = require('webpack/lib/dependencies/ImportDepende
 
 class InstrumentedImportDependencyTemplate extends ImportDependencyTemplate {
   /*:: clientChunkIndex: ?$PropertyType<ClientChunkMetadata, "fileManifest">; */
+  /*:: manifest: ?TranslationsManifest; */
 
-  constructor(clientChunkMetadata /*: ?ClientChunkMetadata */) {
+  constructor(
+    clientChunkMetadata /*: ?ClientChunkMetadata */,
+    translationsManifest /*: ?TranslationsManifest*/
+  ) {
     super();
+    this.translationsManifest = translationsManifest;
     if (clientChunkMetadata) {
       this.clientChunkIndex = clientChunkMetadata.fileManifest;
     }
@@ -69,13 +78,45 @@ class InstrumentedImportDependencyTemplate extends ImportDependencyTemplate {
       chunkIds = getChunkGroupIds(depBlock.chunkGroup);
     }
 
+    let translationKeys = [];
+    if (this.translationsManifest) {
+      const modulesSet = new Set();
+
+      // Module dependencies
+      if (dep.module && dep.module.dependencies) {
+        dep.module.dependencies.map(d => {
+          if (d.originModule) {
+            modulesSet.add(d.originModule.userRequest);
+          }
+        });
+      }
+
+      // Chunks
+      depBlock.chunkGroup.chunks.forEach(chunk => {
+        const modules = Array.from(chunk._modules.keys());
+        modules.forEach(m => modulesSet.add(m.resource));
+      });
+
+      const modules = Array.from(modulesSet.keys());
+      translationKeys = modules.reduce((acc, module) => {
+        if (this.translationsManifest.has(module)) {
+          const keys = Array.from(this.translationsManifest.get(module).keys());
+          return acc.concat(keys);
+        } else {
+          return acc;
+        }
+      }, []);
+    }
+
     // Add the following properties to the promise returned by import()
     // - `__CHUNK_IDS`: the webpack chunk ids for the dynamic import
     // - `__MODULE_ID`: the webpack module id of the dynamically imported module. Equivalent to require.resolveWeak(path)
+    // - `__I18N_KEYS`: the translation keys that are used in this bundle
     const customContent = chunkIds
       ? `Object.defineProperties(${content}, {
         "__CHUNK_IDS": {value:${JSON.stringify(chunkIds)}},
-        "__MODULE_ID": {value:${JSON.stringify(dep.module.id)}}
+        "__MODULE_ID": {value:${JSON.stringify(dep.module.id)}},
+        "__I18N_KEYS": {value:${JSON.stringify(translationKeys)}}
         })`
       : content;
 
@@ -91,9 +132,14 @@ class InstrumentedImportDependencyTemplate extends ImportDependencyTemplate {
 
 class InstrumentedImportDependencyTemplatePlugin {
   /*:: clientChunkIndexState: ?ClientChunkMetadataState; */
+  /*:: translationsManifest: ?TranslationsManifest; */
 
-  constructor(clientChunkIndexState /*: ?ClientChunkMetadataState*/) {
+  constructor(
+    clientChunkIndexState /*: ?ClientChunkMetadataState*/,
+    translationsManifest /*: ?TranslationsManifest*/
+  ) {
     this.clientChunkIndexState = clientChunkIndexState;
+    this.translationsManifest = translationsManifest;
   }
 
   apply(compiler /*: any */) {
@@ -113,13 +159,20 @@ class InstrumentedImportDependencyTemplatePlugin {
           );
           done();
         });
-      } else {
+      } else if (this.translationsManifest) {
         // client
         compilation.dependencyTemplates.set(
           ImportDependency,
-          new InstrumentedImportDependencyTemplate()
+          new InstrumentedImportDependencyTemplate(
+            void 0,
+            this.translationsManifest
+          )
         );
         done();
+      } else {
+        throw new Error(
+          'InstrumentationImportDependencyPlugin called without clientChunkIndexState or translationsManifest'
+        );
       }
     });
   }

test/e2e/assets/test.js

@@ -68,7 +68,7 @@ test('`fusion dev` works with assets', async () => {
     const clientMain = await request(`${url}/_static/client-main.js`);
     t.ok(clientMain, 'serves client-main from memory correctly');
     t.ok(
-      clientMain.includes('"src", "src/main.js")'),
+      clientMain.includes('"src","src/main.js")'),
       'transpiles __dirname and __filename'
     );
     t.ok(

test/e2e/dynamic-import-translations/fixture/src/main.js

@@ -0,0 +1,24 @@
+// @noflow
+
+import React from 'react';
+import App from 'fusion-react';
+
+function Root () {
+  const split = import('./split.js');
+  const splitWithChild = import('./split-with-child.js');
+  return (
+    <div>
+      <div data-testid="split">
+        {JSON.stringify(split.__I18N_KEYS)}
+      </div>
+      <div data-testid="split-with-child">
+        {JSON.stringify(splitWithChild.__I18N_KEYS)}
+      </div>
+    </div>
+  );
+}
+
+export default async function start() {
+  const app = new App(<Root />);
+  return app;
+}

test/e2e/dynamic-import-translations/fixture/src/split-child.js

@@ -0,0 +1,10 @@
+// @noflow
+
+import React from 'react';
+import {Translate} from 'fusion-plugin-i18n-react';
+
+export default function SplitRouteChild() {
+  return (
+    <Translate id="__SPLIT_CHILD__"/>
+  );
+}

test/e2e/dynamic-import-translations/fixture/src/split-with-child.js

@@ -0,0 +1,12 @@
+// @noflow
+
+import React, {Component} from 'react';
+import {withTranslations} from 'fusion-plugin-i18n-react';
+
+import SplitRouteChild from './split-child.js';
+
+function SplitRouteWithChild () {
+  return <SplitRouteChild />;
+}
+
+export default withTranslations(['__SPLIT_WITH_CHILD__'])(SplitRouteWithChild);

test/e2e/dynamic-import-translations/fixture/src/split.js

@@ -0,0 +1,10 @@
+// @noflow
+
+import React, {Component} from 'react';
+import {withTranslations} from 'fusion-plugin-i18n-react';
+
+function SplitRoute () {
+  return <div />
+}
+
+export default withTranslations(['__SPLIT__'])(SplitRoute);

test/e2e/dynamic-import-translations/fixture/translations/en-US.json

@@ -0,0 +1,5 @@
+{
+  "__SPLIT__": "",
+  "__SPLIT_WITH_CHILD__": "",
+  "__SPLIT_CHILD__": ""
+}

test/e2e/dynamic-import-translations/test.js

@@ -0,0 +1,40 @@
+// @flow
+/* eslint-env node */
+
+const t = require('assert');
+const path = require('path');
+const puppeteer = require('puppeteer');
+
+const {cmd, start} = require('../utils.js');
+
+const dir = path.resolve(__dirname, './fixture');
+
+test('`fusion build` app with split translations integration', async () => {
+  var env = Object.create(process.env);
+  env.NODE_ENV = 'production';
+
+  await cmd(`build --dir=${dir} --production`, {env});
+
+  const {proc, port} = await start(`--dir=${dir}`, {env, cwd: dir});
+  const browser = await puppeteer.launch({
+    args: ['--no-sandbox', '--disable-setuid-sandbox'],
+  });
+  const page = await browser.newPage();
+  await page.goto(`http://localhost:${port}/`, {waitUntil: 'load'});
+  const content = await page.content();
+  t.ok(
+    content.includes('<div data-testid="split">["__SPLIT__"]</div>'),
+    'translation keys are added to promise instrumentation'
+  );
+  t.ok(
+    content.includes(
+      '<div data-testid="split-with-child">' +
+        '["__SPLIT_CHILD__","__SPLIT_WITH_CHILD__"]' +
+        '</div>'
+    ),
+    'translation keys contain keys from child imports'
+  );
+
+  browser.close();
+  proc.kill();
+}, 100000);

test/e2e/empty/test.js

@@ -26,7 +26,7 @@ test('generates error if missing default export', async () => {
     // $FlowFixMe
     t.fail('did not error');
   } catch (e) {
-    t.ok(e.stderr.includes('initialize is not a function'));
+    t.ok(e.stderr.includes(' is not a function'));
   } finally {
     proc.kill();
   }

test/e2e/noop-test/test.js

@@ -31,11 +31,11 @@ test('development env globals', async () => {
   const clientContent = await readFile(clientEntryPath, 'utf8');
 
   t.ok(
-    clientContent.includes(`'main __BROWSER__ is', true`),
+    clientContent.includes(`"main __BROWSER__ is",!0`),
     `__BROWSER__ is transpiled to be true in development`
   );
   t.ok(
-    clientContent.includes(`'main __NODE__ is', false`),
+    clientContent.includes(`"main __NODE__ is",!1`),
     '__NODE__ is transpiled to be false'
   );
 

test/e2e/transpile-node-modules/test.js

@@ -55,5 +55,5 @@ test('transpiles node_modules', async () => {
     ],
   });
 
-  t.ok(clientVendor.includes(`'fixturepkg_string'`));
+  t.ok(clientVendor.includes(`"fixturepkg_string"`));
 }, 100000);