Load strapi plugins translations

Signed-off-by: soupette <cyril.lpz@gmail.com>

examples/getstarted/admin/admin.config.js

@@ -0,0 +1,13 @@
+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 => {
+    console.log(config);
+
+    return config;
+  },
+};

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,52 @@ 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(err => {
+          // TODO
+          console.log(err);
+        });
+    });
+    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 +154,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 +229,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 => {
+    console.log(config);
+
+    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/content-manager/admin/src/index.js

@@ -9,7 +9,7 @@ import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 import pluginLogo from './assets/images/logo.svg';
 import reducers from './reducers';
-import trads from './translations';
+// import trads from './translations';
 
 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 const icon = pluginPkg.strapi.icon;
@@ -31,8 +31,35 @@ export default {
       isRequired: pluginPkg.strapi.required || false,
       name,
       pluginLogo,
-      trads,
+      // 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: Object.keys(data).reduce((acc, current) => {
+                acc[`${pluginId}.${current}`] = data[current];
+
+                return acc;
+              }, {}),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

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

@@ -7,7 +7,7 @@
 
 import pluginPkg from '../../package.json';
 import pluginLogo from './assets/images/logo.svg';
-import trads from './translations';
+// import trads from './translations';
 import pluginPermissions from './permissions';
 import pluginId from './pluginId';
 import reducers from './reducers';
@@ -28,7 +28,7 @@ export default {
       isReady: true,
       name,
       pluginLogo,
-      trads,
+      // trads,
       menu: {
         pluginsSectionLinks: [
           {
@@ -50,4 +50,31 @@ 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: Object.keys(data).reduce((acc, current) => {
+                acc[`${pluginId}.${current}`] = data[current];
+
+                return acc;
+              }, {}),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

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

@@ -11,7 +11,7 @@ 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 trads from './translations';
 import getTrad from './utils/getTrad';
 import SettingsPage from './pages/Settings';
 
@@ -29,7 +29,7 @@ export default {
       isRequired: pluginPkg.strapi.required || false,
       name,
       pluginLogo,
-      trads,
+      // trads,
       settings: {
         menuSection: {
           id: pluginId,
@@ -55,4 +55,31 @@ 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: Object.keys(data).reduce((acc, current) => {
+                acc[`${pluginId}.${current}`] = data[current];
+
+                return acc;
+              }, {}),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

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

@@ -14,7 +14,7 @@ import InputMedia from './components/InputMedia';
 import InputModalStepper from './components/InputModalStepper';
 import SettingsPage from './pages/SettingsPage';
 import reducers from './reducers';
-import trads from './translations';
+// import trads from './translations';
 import pluginId from './pluginId';
 import { getTrad } from './utils';
 
@@ -62,7 +62,7 @@ export default {
           ],
         },
       },
-      trads,
+      // trads,
       menu: {
         pluginsSectionLinks: [
           {
@@ -80,4 +80,31 @@ 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: Object.keys(data).reduce((acc, current) => {
+                acc[`${pluginId}.${current}`] = data[current];
+
+                return acc;
+              }, {}),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

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

@@ -9,7 +9,7 @@ import pluginPermissions from './permissions';
 import pluginId from './pluginId';
 import pluginLogo from './assets/images/logo.svg';
 import App from './pages/App';
-import trads from './translations';
+// import trads from './translations';
 
 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 const icon = pluginPkg.strapi.icon;
@@ -28,7 +28,7 @@ export default {
       name,
       pluginLogo,
       // TODO
-      trads,
+      // trads,
       // TODO
       menu: {
         pluginsSectionLinks: [
@@ -47,4 +47,31 @@ 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: Object.keys(data).reduce((acc, current) => {
+                acc[`${pluginId}.${current}`] = data[current];
+
+                return acc;
+              }, {}),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

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

@@ -21,4 +21,31 @@ export default {
     });
   },
   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: Object.keys(data).reduce((acc, current) => {
+                acc[`${pluginId}.${current}`] = data[current];
+
+                return acc;
+              }, {}),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

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

@@ -11,7 +11,7 @@ import LocalePicker from './components/LocalePicker';
 import middlewares from './middlewares';
 import pluginPermissions from './permissions';
 import pluginId from './pluginId';
-import trads from './translations';
+// import trads from './translations';
 import { getTrad } from './utils';
 import mutateCTBContentTypeSchema from './utils/mutateCTBContentTypeSchema';
 import LOCALIZED_FIELDS from './utils/localizedFields';
@@ -54,7 +54,7 @@ export default {
           ],
         },
       },
-      trads,
+      // trads,
     });
   },
   boot(app) {
@@ -166,4 +166,31 @@ 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: Object.keys(data).reduce((acc, current) => {
+                acc[`${pluginId}.${current}`] = data[current];
+
+                return acc;
+              }, {}),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

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

@@ -1,7 +1,7 @@
 import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 import pluginLogo from './assets/images/logo.svg';
-import trads from './translations';
+// import trads from './translations';
 
 const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
 const icon = pluginPkg.strapi.icon;
@@ -17,8 +17,35 @@ export default {
       isRequired: pluginPkg.strapi.required || false,
       name,
       pluginLogo,
-      trads,
+      // 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: Object.keys(data).reduce((acc, current) => {
+                acc[`${pluginId}.${current}`] = data[current];
+
+                return acc;
+              }, {}),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };

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

@@ -10,7 +10,7 @@ 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 trads from './translations';
 import RolesPage from './pages/Roles';
 import ProvidersPage from './pages/Providers';
 import EmailTemplatesPage from './pages/EmailTemplates';
@@ -31,7 +31,7 @@ export default {
       isRequired: pluginPkg.strapi.required || false,
       name,
       pluginLogo,
-      trads,
+      // trads,
       // TODO
       settings: {
         menuSection: {
@@ -100,4 +100,31 @@ 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: Object.keys(data).reduce((acc, current) => {
+                acc[`${pluginId}.${current}`] = data[current];
+
+                return acc;
+              }, {}),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return Promise.resolve(importedTrads);
+  },
 };