Merge pull request #10457 from strapi/core/app-translations-customisations

Load only the needed translations for the admin panel

examples/getstarted/admin/admin.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  webpack: (config, webpack) => {
+    // Note: we provide webpack above so you should not `require` it
+    // Perform customizations to webpack config
+    // Important: return the modified config
+    return config;
+  },
+  app: config => {
+    return config;
+  },
+};

examples/getstarted/plugins/myplugin/admin/src/index.js

@@ -1,3 +1,4 @@
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 
@@ -15,8 +16,6 @@ export default {
       isRequired: pluginPkg.strapi.required || false,
       mainComponent: () => 'My plugin',
       name,
-      settings: null,
-      trads: {},
       menu: {
         pluginsSectionLinks: [
           {
@@ -34,4 +33,27 @@ export default {
     });
   },
   boot() {},
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map(locale => {
+        return import(
+          /* webpackChunkName: "[pluginId]-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

examples/getstarted/plugins/myplugin/admin/src/pages/App/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import getTrad from '../../utils/getTrad';
+
+const App = () => {
+  return <FormattedMessage id={getTrad('plugin.name')} defaultMessage="My plugin" />;
+};
+
+export default App;

examples/getstarted/plugins/myplugin/admin/src/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "plugin.name": "My plugin"
+}

examples/getstarted/plugins/myplugin/admin/src/utils/getTrad.js

@@ -0,0 +1,5 @@
+import pluginId from '../pluginId';
+
+const getTrad = id => `${pluginId}.${id}`;
+
+export default getTrad;

packages/core/admin/admin/src/StrapiApp.js

@@ -17,9 +17,6 @@ import GlobalStyle from './components/GlobalStyle';
 import Notifications from './components/Notifications';
 import themes from './themes';
 
-// TODO
-import translations from './translations';
-
 window.strapi = {
   backendURL: process.env.STRAPI_ADMIN_BACKEND_URL,
 };
@@ -32,16 +29,15 @@ const queryClient = new QueryClient({
   },
 });
 
-const appLocales = Object.keys(translations);
-
 class StrapiApp {
-  constructor({ appPlugins, library, middlewares, reducers }) {
+  constructor({ appPlugins, library, locales, middlewares, reducers }) {
+    this.appLocales = ['en', ...locales.filter(loc => loc !== 'en')];
     this.appPlugins = appPlugins || {};
     this.library = library;
     this.middlewares = middlewares;
     this.plugins = {};
     this.reducers = reducers;
-    this.translations = translations;
+    this.translations = {};
     this.hooksDict = {};
   }
 
@@ -105,20 +101,51 @@ class StrapiApp {
     return this.plugins[pluginId];
   };
 
-  // FIXME
-  registerPluginTranslations(pluginId, trads) {
-    const pluginTranslations = appLocales.reduce((acc, currentLanguage) => {
-      const currentLocale = trads[currentLanguage];
+  async loadAdminTrads() {
+    const arrayOfPromises = this.appLocales.map(locale => {
+      return import(/* webpackChunkName: "[request]" */ `./translations/${locale}.json`)
+        .then(({ default: data }) => {
+          return { data, locale };
+        })
+        .catch(() => {
+          return { data: {}, locale };
+        });
+    });
+    const adminLocales = await Promise.all(arrayOfPromises);
 
-      if (currentLocale) {
-        const localeprefixedWithPluginId = Object.keys(currentLocale).reduce((acc2, current) => {
-          acc2[`${pluginId}.${current}`] = currentLocale[current];
+    this.translations = adminLocales.reduce((acc, current) => {
+      acc[current.locale] = current.data;
 
-          return acc2;
-        }, {});
+      return acc;
+    }, {});
 
-        acc[currentLanguage] = localeprefixedWithPluginId;
-      }
+    return Promise.resolve();
+  }
+
+  async loadTrads() {
+    const arrayOfPromises = Object.keys(this.appPlugins)
+      .map(plugin => {
+        const registerTrads = this.appPlugins[plugin].registerTrads;
+
+        if (registerTrads) {
+          return registerTrads({ locales: this.appLocales });
+        }
+
+        return null;
+      })
+      .filter(a => a);
+
+    const pluginsTrads = await Promise.all(arrayOfPromises);
+    const mergedTrads = pluginsTrads.reduce((acc, currentPluginTrads) => {
+      const pluginTrads = currentPluginTrads.reduce((acc1, current) => {
+        acc1[current.locale] = current.data;
+
+        return acc1;
+      }, {});
+
+      Object.keys(pluginTrads).forEach(locale => {
+        acc[locale] = { ...acc[locale], ...pluginTrads[locale] };
+      });
 
       return acc;
     }, {});
@@ -126,19 +153,16 @@ class StrapiApp {
     this.translations = Object.keys(this.translations).reduce((acc, current) => {
       acc[current] = {
         ...this.translations[current],
-        ...(pluginTranslations[current] || {}),
+        ...(mergedTrads[current] || {}),
       };
 
       return acc;
     }, {});
+
+    return Promise.resolve();
   }
 
   registerPlugin = pluginConf => {
-    // FIXME
-    // Translations should be loaded differently
-    // This is a temporary fix
-    this.registerPluginTranslations(pluginConf.id, pluginConf.trads);
-
     const plugin = Plugin(pluginConf);
 
     this.plugins[plugin.pluginId] = plugin;
@@ -204,5 +228,5 @@ class StrapiApp {
   }
 }
 
-export default ({ appPlugins, library, middlewares, reducers }) =>
-  new StrapiApp({ appPlugins, library, middlewares, reducers });
+export default ({ appPlugins, library, locales, middlewares, reducers }) =>
+  new StrapiApp({ appPlugins, library, locales, middlewares, reducers });

packages/core/admin/admin/src/admin.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  app: config => {
+    config.locales = ['fr'];
+
+    return config;
+  },
+};

packages/core/admin/admin/src/index.js

@@ -1,22 +1,37 @@
 import ReactDOM from 'react-dom';
 import StrapiApp from './StrapiApp';
 import { Components, Fields, Middlewares, Reducers } from './core/apis';
+import appCustomisations from './admin.config';
 import plugins from './plugins';
 import appReducers from './reducers';
 
+const appConfig = {
+  locales: [],
+};
+
+const customConfig = appCustomisations.app(appConfig);
+
 const library = {
   components: Components(),
   fields: Fields(),
 };
 const middlewares = Middlewares();
 const reducers = Reducers({ appReducers });
-const app = StrapiApp({ appPlugins: plugins, library, middlewares, reducers });
+const app = StrapiApp({
+  appPlugins: plugins,
+  library,
+  locales: customConfig.locales,
+  middlewares,
+  reducers,
+});
 
 const MOUNT_NODE = document.getElementById('app');
 
 const run = async () => {
+  await app.loadAdminTrads();
   await app.initialize();
   await app.boot();
+  await app.loadTrads();
 
   ReactDOM.render(app.render(), MOUNT_NODE);
 };

packages/core/admin/admin/src/tests/StrapiApp.test.js

@@ -6,10 +6,11 @@ import appReducers from '../reducers';
 const library = { fields: {}, components: {} };
 const middlewares = { middlewares: [] };
 const reducers = { reducers: appReducers };
+const locales = [];
 
 describe('ADMIN | StrapiApp', () => {
   it('should render the app without plugins', () => {
-    const app = StrapiApp({ middlewares, reducers, library });
+    const app = StrapiApp({ middlewares, reducers, library, locales });
     const { container } = render(app.render());
 
     expect(container.firstChild).toMatchInlineSnapshot(`
@@ -43,7 +44,7 @@ describe('ADMIN | StrapiApp', () => {
   });
 
   it('should create a valid store', () => {
-    const app = StrapiApp({ middlewares, reducers, library });
+    const app = StrapiApp({ middlewares, reducers, library, locales });
 
     const store = app.createStore();
 
@@ -52,7 +53,7 @@ describe('ADMIN | StrapiApp', () => {
 
   describe('Hook api', () => {
     it('runs the "moto" hooks in series', () => {
-      const app = StrapiApp({ middlewares, reducers, library });
+      const app = StrapiApp({ middlewares, reducers, library, locales });
 
       app.createHook('hello');
       app.createHook('moto');
@@ -70,7 +71,7 @@ describe('ADMIN | StrapiApp', () => {
     });
 
     it('runs the "moto" hooks in series asynchronously', async () => {
-      const app = StrapiApp({ middlewares, reducers, library });
+      const app = StrapiApp({ middlewares, reducers, library, locales });
 
       app.createHook('hello');
       app.createHook('moto');
@@ -88,7 +89,7 @@ describe('ADMIN | StrapiApp', () => {
     });
 
     it('runs the "moto" hooks in waterfall', () => {
-      const app = StrapiApp({ middlewares, reducers, library });
+      const app = StrapiApp({ middlewares, reducers, library, locales });
 
       app.createHook('hello');
       app.createHook('moto');
@@ -104,7 +105,7 @@ describe('ADMIN | StrapiApp', () => {
     });
 
     it('runs the "moto" hooks in waterfall asynchronously', async () => {
-      const app = StrapiApp({ middlewares, reducers, library });
+      const app = StrapiApp({ middlewares, reducers, library, locales });
 
       app.createHook('hello');
       app.createHook('moto');
@@ -120,7 +121,7 @@ describe('ADMIN | StrapiApp', () => {
     });
 
     it('runs the "moto" hooks in parallel', async () => {
-      const app = StrapiApp({ middlewares, reducers, library });
+      const app = StrapiApp({ middlewares, reducers, library, locales });
 
       app.createHook('hello');
       app.createHook('moto');

packages/core/admin/index.js

@@ -199,6 +199,16 @@ async function createCacheDir(dir) {
     await copyCustomAdmin(path.join(dir, 'admin'), cacheDir);
   }
 
+  // Copy admin.config.js
+  const customAdminConfigFilePath = path.join(dir, 'admin', 'admin.config.js');
+
+  if (fs.existsSync(customAdminConfigFilePath)) {
+    await fs.copy(
+      customAdminConfigFilePath,
+      path.resolve(cacheDir, 'admin', 'src', 'admin.config.js')
+    );
+  }
+
   // create plugins.js with plugins requires
   await createPluginsJs(pluginsToCopy, localPluginsToCopy, cacheDir);
 

packages/core/content-manager/admin/src/index.js

@@ -4,12 +4,11 @@
 // Here's the file: strapi/docs/3.0.0-beta.x/guides/registering-a-field-in-admin.md
 // Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated
 // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
-
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 import pluginLogo from './assets/images/logo.svg';
 import reducers from './reducers';
-import trads from './translations';
 
 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 const icon = pluginPkg.strapi.icon;
@@ -31,8 +30,30 @@ export default {
       isRequired: pluginPkg.strapi.required || false,
       name,
       pluginLogo,
-      trads,
     });
   },
   boot() {},
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map(locale => {
+        return import(
+          /* webpackChunkName: "content-manager-translation-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

packages/core/content-manager/admin/src/translations/index.js

@@ -1,53 +0,0 @@
-// import ar from './ar.json';
-// import cs from './cs.json';
-// import de from './de.json';
-// import dk from './dk.json';
-import en from './en.json';
-// import es from './es.json';
-import fr from './fr.json';
-// import id from './id.json';
-// import it from './it.json';
-// import ja from './ja.json';
-// import ko from './ko.json';
-// import ms from './ms.json';
-// import nl from './nl.json';
-// import pl from './pl.json';
-// import ptBR from './pt-BR.json';
-// import pt from './pt.json';
-// import ru from './ru.json';
-// import th from './th.json';
-// import tr from './tr.json';
-// import uk from './uk.json';
-// import vi from './vi.json';
-// import zhHans from './zh-Hans.json';
-// import zh from './zh.json';
-// import sk from './sk.json';
-
-const trads = {
-  // ar,
-  // cs,
-  // de,
-  // dk,
-  en,
-  // es,
-  fr,
-  // id,
-  // it,
-  // ja,
-  // ko,
-  // ms,
-  // nl,
-  // pl,
-  // 'pt-BR': ptBR,
-  // pt,
-  // ru,
-  // th,
-  // tr,
-  // uk,
-  // vi,
-  // 'zh-Hans': zhHans,
-  // zh,
-  // sk,
-};
-
-export default trads;

packages/core/content-type-builder/admin/src/index.js

@@ -4,10 +4,9 @@
 // Here's the file: strapi/docs/3.0.0-beta.x/guides/registering-a-field-in-admin.md
 // Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated
 // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
-
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginLogo from './assets/images/logo.svg';
-import trads from './translations';
 import pluginPermissions from './permissions';
 import pluginId from './pluginId';
 import reducers from './reducers';
@@ -28,7 +27,6 @@ export default {
       isReady: true,
       name,
       pluginLogo,
-      trads,
       menu: {
         pluginsSectionLinks: [
           {
@@ -50,4 +48,27 @@ export default {
     });
   },
   boot() {},
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map(locale => {
+        return import(
+          /* webpackChunkName: "content-type-builder-translation-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

packages/core/content-type-builder/admin/src/translations/index.js

@@ -1,51 +0,0 @@
-// import ar from './ar.json';
-// import cs from './cs.json';
-// import de from './de.json';
-// import dk from './dk.json';
-import en from './en.json';
-// import es from './es.json';
-import fr from './fr.json';
-// import id from './id.json';
-// import it from './it.json';
-// import ja from './ja.json';
-// import ko from './ko.json';
-// import ms from './ms.json';
-// import nl from './nl.json';
-// import pl from './pl.json';
-// import ptBR from './pt-BR.json';
-// import pt from './pt.json';
-// import ru from './ru.json';
-// import th from './th.json';
-// import tr from './tr.json';
-// import uk from './uk.json';
-// import zhHans from './zh-Hans.json';
-// import zh from './zh.json';
-// import sk from './sk.json';
-
-const trads = {
-  // ar,
-  // cs,
-  // de,
-  // dk,
-  en,
-  // es,
-  fr,
-  // id,
-  // it,
-  // ja,
-  // ko,
-  // ms,
-  // nl,
-  // pl,
-  // 'pt-BR': ptBR,
-  // pt,
-  // ru,
-  // th,
-  // tr,
-  // uk,
-  // 'zh-Hans': zhHans,
-  // zh,
-  // sk,
-};
-
-export default trads;

packages/core/email/admin/src/index.js

@@ -6,12 +6,11 @@
 // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
 
 import React from 'react';
-import { CheckPagePermissions } from '@strapi/helper-plugin';
+import { CheckPagePermissions, prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 import pluginLogo from './assets/images/logo.svg';
 import pluginPermissions from './permissions';
-import trads from './translations';
 import getTrad from './utils/getTrad';
 import SettingsPage from './pages/Settings';
 
@@ -29,7 +28,7 @@ export default {
       isRequired: pluginPkg.strapi.required || false,
       name,
       pluginLogo,
-      trads,
+      // trads,
       settings: {
         menuSection: {
           id: pluginId,
@@ -55,4 +54,27 @@ export default {
     });
   },
   boot() {},
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map(locale => {
+        return import(
+          /* webpackChunkName: "email-translation-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

packages/core/email/admin/src/translations/index.js

@@ -1,53 +0,0 @@
-// import ar from './ar.json';
-// import cs from './cs.json';
-// import de from './de.json';
-// import dk from './dk.json';
-import en from './en.json';
-// import es from './es.json';
-import fr from './fr.json';
-// import id from './id.json';
-// import it from './it.json';
-// import ja from './ja.json';
-// import ko from './ko.json';
-// import ms from './ms.json';
-// import nl from './nl.json';
-// import pl from './pl.json';
-// import ptBR from './pt-BR.json';
-// import pt from './pt.json';
-// import ru from './ru.json';
-// import th from './th.json';
-// import tr from './tr.json';
-// import uk from './uk.json';
-// import vi from './vi.json';
-// import zhHans from './zh-Hans.json';
-// import zh from './zh.json';
-// import sk from './sk.json';
-
-const trads = {
-  // ar,
-  // cs,
-  // de,
-  // dk,
-  en,
-  // es,
-  fr,
-  // id,
-  // it,
-  // ja,
-  // ko,
-  // ms,
-  // nl,
-  // pl,
-  // 'pt-BR': ptBR,
-  // pt,
-  // ru,
-  // th,
-  // tr,
-  // uk,
-  // vi,
-  // 'zh-Hans': zhHans,
-  // zh,
-  // sk,
-};
-
-export default trads;

packages/core/helper-plugin/lib/src/index.js

@@ -164,6 +164,7 @@ export { default as generateFiltersFromSearch } from './utils/generateFiltersFro
 export { default as generateSearchFromFilters } from './utils/generateSearchFromFilters';
 export { default as generateSearchFromObject } from './utils/generateSearchFromObject';
 export { default as prefixFileUrlWithBackendUrl } from './utils/prefixFileUrlWithBackendUrl';
+export { default as prefixPluginTranslations } from './utils/prefixPluginTranslations';
 
 // SVGS
 export { default as LayoutIcon } from './svgs/Layout';

packages/core/helper-plugin/lib/src/utils/prefixPluginTranslations.js

@@ -0,0 +1,9 @@
+const prefixPluginTranslations = (trad, pluginId) => {
+  return Object.keys(trad).reduce((acc, current) => {
+    acc[`${pluginId}.${current}`] = trad[current];
+
+    return acc;
+  }, {});
+};
+
+export default prefixPluginTranslations;

packages/core/upload/admin/src/index.js

@@ -5,7 +5,7 @@
 // Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated
 // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
 import React from 'react';
-import { CheckPagePermissions } from '@strapi/helper-plugin';
+import { CheckPagePermissions, prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginLogo from './assets/images/logo.svg';
 import pluginPermissions from './permissions';
@@ -14,7 +14,6 @@ import InputMedia from './components/InputMedia';
 import InputModalStepper from './components/InputModalStepper';
 import SettingsPage from './pages/SettingsPage';
 import reducers from './reducers';
-import trads from './translations';
 import pluginId from './pluginId';
 import { getTrad } from './utils';
 
@@ -62,7 +61,6 @@ export default {
           ],
         },
       },
-      trads,
       menu: {
         pluginsSectionLinks: [
           {
@@ -80,4 +78,27 @@ export default {
     });
   },
   boot() {},
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map(locale => {
+        return import(
+          /* webpackChunkName: "upload-translation-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

packages/core/upload/admin/src/translations/index.js

@@ -1,37 +0,0 @@
-// import de from './de.json';
-// import dk from './dk.json';
-import en from './en.json';
-// import es from './es.json';
-import fr from './fr.json';
-// import he from './he.json';
-// import it from './it.json';
-// import ja from './ja.json';
-// import ms from './ms.json';
-// import ru from './ru.json';
-// import th from './th.json';
-// import uk from './uk.json';
-// import ptBR from './pt-BR.json';
-// import sk from './sk.json';
-// import zh from './zh.json';
-// import pl from './pl.json';
-
-const trads = {
-  // de,
-  // dk,
-  en,
-  // es,
-  fr,
-  // he,
-  // it,
-  // ja,
-  // ms,
-  // ru,
-  // th,
-  // uk,
-  // 'pt-BR': ptBR,
-  // sk,
-  // zh,
-  // pl,
-};
-
-export default trads;

packages/plugins/documentation/admin/src/index.js

@@ -4,12 +4,12 @@
 // Here's the file: strapi/docs/3.0.0-beta.x/guides/registering-a-field-in-admin.md
 // Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated
 // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginPermissions from './permissions';
 import pluginId from './pluginId';
 import pluginLogo from './assets/images/logo.svg';
 import App from './pages/App';
-import trads from './translations';
 
 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 const icon = pluginPkg.strapi.icon;
@@ -28,8 +28,6 @@ export default {
       name,
       pluginLogo,
       // TODO
-      trads,
-      // TODO
       menu: {
         pluginsSectionLinks: [
           {
@@ -47,4 +45,27 @@ export default {
     });
   },
   boot() {},
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map(locale => {
+        return import(
+          /* webpackChunkName: "documentation-translation-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

packages/plugins/documentation/admin/src/translations/index.js

@@ -1,50 +0,0 @@
-// TODO
-// import ar from './ar.json';
-// import cs from './cs.json';
-// import de from './de.json';
-import en from './en.json';
-// import es from './es.json';
-import fr from './fr.json';
-// import id from './id.json';
-// import it from './it.json';
-// import ko from './ko.json';
-// import ms from './ms.json';
-// import nl from './nl.json';
-// import pl from './pl.json';
-// import ptBR from './pt-BR.json';
-// import pt from './pt.json';
-// import ru from './ru.json';
-// import th from './th.json';
-// import tr from './tr.json';
-// import uk from './uk.json';
-// import vi from './vi.json';
-// import zhHans from './zh-Hans.json';
-// import zh from './zh.json';
-// import sk from './sk.json';
-
-const trads = {
-  // ar,
-  // cs,
-  // de,
-  en,
-  // es,
-  fr,
-  // id,
-  // it,
-  // ko,
-  // ms,
-  // nl,
-  // pl,
-  // 'pt-BR': ptBR,
-  // pt,
-  // ru,
-  // th,
-  // tr,
-  // uk,
-  // vi,
-  // 'zh-Hans': zhHans,
-  // zh,
-  // sk,
-};
-
-export default trads;

packages/plugins/graphql/admin/src/index.js

@@ -1,7 +1,7 @@
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 import pluginLogo from './assets/images/logo.svg';
-import trads from './translations';
 
 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 const icon = pluginPkg.strapi.icon;
@@ -17,8 +17,30 @@ export default {
       isRequired: pluginPkg.strapi.required || false,
       name,
       pluginLogo,
-      trads,
     });
   },
   boot() {},
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map(locale => {
+        return import(
+          /* webpackChunkName: "graphql-translation-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

packages/plugins/graphql/admin/src/translations/index.js

@@ -1,9 +0,0 @@
-import en from './en.json';
-import fr from './fr.json';
-
-const trads = {
-  en,
-  fr,
-};
-
-export default trads;

packages/plugins/i18n/admin/src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import get from 'lodash/get';
 import * as yup from 'yup';
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginLogo from './assets/images/logo.svg';
 import CheckboxConfirmation from './components/CheckboxConfirmation';
@@ -11,7 +12,6 @@ import LocalePicker from './components/LocalePicker';
 import middlewares from './middlewares';
 import pluginPermissions from './permissions';
 import pluginId from './pluginId';
-import trads from './translations';
 import { getTrad } from './utils';
 import mutateCTBContentTypeSchema from './utils/mutateCTBContentTypeSchema';
 import LOCALIZED_FIELDS from './utils/localizedFields';
@@ -54,7 +54,6 @@ export default {
           ],
         },
       },
-      trads,
     });
   },
   boot(app) {
@@ -166,4 +165,27 @@ export default {
       });
     }
   },
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map(locale => {
+        return import(
+          /* webpackChunkName: "i18n-translation-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

packages/plugins/i18n/admin/src/translations/index.js

@@ -1,9 +0,0 @@
-import en from './en.json';
-import fr from './fr.json';
-
-const trads = {
-  en,
-  fr,
-};
-
-export default trads;

packages/plugins/sentry/admin/src/index.js

@@ -1,7 +1,7 @@
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 import pluginLogo from './assets/images/logo.svg';
-import trads from './translations';
 
 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 const icon = pluginPkg.strapi.icon;
@@ -17,8 +17,30 @@ export default {
       isRequired: pluginPkg.strapi.required || false,
       name,
       pluginLogo,
-      trads,
     });
   },
   boot() {},
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map(locale => {
+        return import(
+          /* webpackChunkName: "sentry-translation-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

packages/plugins/sentry/admin/src/translations/index.js

@@ -1,49 +0,0 @@
-// import ar from './ar.json';
-// import cs from './cs.json';
-// import de from './de.json';
-import en from './en.json';
-// import es from './es.json';
-import fr from './fr.json';
-// import id from './id.json';
-// import it from './it.json';
-// import ko from './ko.json';
-// import ms from './ms.json';
-// import nl from './nl.json';
-// import pl from './pl.json';
-// import ptBR from './pt-BR.json';
-// import pt from './pt.json';
-// import ru from './ru.json';
-// import th from './th.json';
-// import tr from './tr.json';
-// import uk from './uk.json';
-// import vi from './vi.json';
-// import zhHans from './zh-Hans.json';
-// import zh from './zh.json';
-// import sk from './sk.json';
-
-const trads = {
-  // ar,
-  // cs,
-  // de,
-  en,
-  // es,
-  fr,
-  // id,
-  // it,
-  // ko,
-  // ms,
-  // nl,
-  // pl,
-  // 'pt-BR': ptBR,
-  // pt,
-  // ru,
-  // th,
-  // tr,
-  // uk,
-  // vi,
-  // 'zh-Hans': zhHans,
-  // zh,
-  // sk,
-};
-
-export default trads;

packages/plugins/users-permissions/admin/src/index.js

@@ -5,12 +5,11 @@
 // Also the strapi-generate-plugins/files/admin/src/index.js needs to be updated
 // IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
 import React from 'react';
-import { CheckPagePermissions } from '@strapi/helper-plugin';
+import { CheckPagePermissions, prefixPluginTranslations } from '@strapi/helper-plugin';
 import pluginPkg from '../../package.json';
 import pluginLogo from './assets/images/logo.svg';
 import pluginPermissions from './permissions';
 import pluginId from './pluginId';
-import trads from './translations';
 import RolesPage from './pages/Roles';
 import ProvidersPage from './pages/Providers';
 import EmailTemplatesPage from './pages/EmailTemplates';
@@ -31,7 +30,7 @@ export default {
       isRequired: pluginPkg.strapi.required || false,
       name,
       pluginLogo,
-      trads,
+      // trads,
       // TODO
       settings: {
         menuSection: {
@@ -100,4 +99,27 @@ export default {
     });
   },
   boot() {},
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map(locale => {
+        return import(
+          /* webpackChunkName: "users-permissions-translation-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

packages/plugins/users-permissions/admin/src/translations/index.js

@@ -1,55 +0,0 @@
-// import ar from './ar.json';
-// import cs from './cs.json';
-// import de from './de.json';
-// import dk from './dk.json';
-import en from './en.json';
-// import es from './es.json';
-import fr from './fr.json';
-// import id from './id.json';
-// import it from './it.json';
-// import ja from './ja.json';
-// import ko from './ko.json';
-// import ms from './ms.json';
-// import nl from './nl.json';
-// import pl from './pl.json';
-// import ptBR from './pt-BR.json';
-// import pt from './pt.json';
-// import ru from './ru.json';
-// import th from './th.json';
-// import tr from './tr.json';
-// import uk from './uk.json';
-// import vi from './vi.json';
-// import zhHans from './zh-Hans.json';
-// import zh from './zh.json';
-// import sk from './sk.json';
-// import sv from './sv.json';
-
-const trads = {
-  // ar,
-  // cs,
-  // de,
-  // dk,
-  en,
-  // es,
-  fr,
-  // id,
-  // it,
-  // ja,
-  // ko,
-  // ms,
-  // nl,
-  // pl,
-  // 'pt-BR': ptBR,
-  // pt,
-  // ru,
-  // th,
-  // tr,
-  // uk,
-  // vi,
-  // 'zh-Hans': zhHans,
-  // zh,
-  // sk,
-  // sv,
-};
-
-export default trads;