feat(plugins): i18n support inside plugins (#930)

packages/cli/src/commands/languages.ts

@@ -1,6 +1,12 @@
 import { GluegunToolbox } from "gluegun";
-import { merge } from "lodash";
 
+/**
+ * 1. get theme locales
+ * 2. get plugin locales
+ * 3. get local plugin locales
+ * 4. get local project locales
+ * -> save merged locales
+ */
 module.exports = {
   name: "languages",
   alias: ["lang"],
@@ -19,46 +25,76 @@ module.exports = {
       toolbox.defaultThemeLocation,
       "locales"
     );
-    const projectLocales =
-      (await toolbox.filesystem.listAsync("locales")) || [];
 
-    await toolbox.filesystem.removeAsync(shopwarePwaLocalesPath);
+    /**
+     * -> Create results map
+     */
+    const resultLocalesMap = {};
 
-    if (await toolbox.filesystem.existsAsync(themeLanguagesDir)) {
-      await toolbox.filesystem.copyAsync(
-        themeLanguagesDir,
-        shopwarePwaLocalesPath
-      );
+    /**
+     * 1. get theme locales
+     */
+    const themeLocalesMap = await toolbox.languages.getLocalesMap(
+      themeLanguagesDir
+    );
+    await toolbox.languages.mergeLocalesMap(resultLocalesMap, themeLocalesMap);
+
+    /**
+     * 2. get plugins locales
+     */
+    const pluginsConfig = await toolbox.plugins.getPluginsConfig();
+    const pluginsLocalesPaths = await toolbox.languages.getPluginsLocalesPaths({
+      pluginsConfig: pluginsConfig,
+    });
+    for (let index = 0; index < pluginsLocalesPaths.length; index++) {
+      const localePath = pluginsLocalesPaths[index];
+      const localeMap = await toolbox.languages.getLocalesMap(localePath);
+      await toolbox.languages.mergeLocalesMap(resultLocalesMap, localeMap);
     }
 
-    // Override theme translations by project translations
-    for (let index = 0; index < projectLocales.length; index++) {
-      const localeFileName = projectLocales[index];
-      const pwaLocaleFilePath = path.join(
+    /**
+     * 3. get local plugins locales
+     */
+    const localPluginsConfig = await toolbox.plugins.getPluginsConfig({
+      localPlugins: true,
+    });
+    const localPluginsLocalesPaths = await toolbox.languages.getPluginsLocalesPaths(
+      {
+        pluginsConfig: localPluginsConfig,
+        rootDirectory: "sw-plugins",
+      }
+    );
+    for (let index = 0; index < localPluginsLocalesPaths.length; index++) {
+      const localePath = localPluginsLocalesPaths[index];
+      const localeMap = await toolbox.languages.getLocalesMap(localePath);
+      await toolbox.languages.mergeLocalesMap(resultLocalesMap, localeMap);
+    }
+
+    /**
+     * 4. get local project locales
+     */
+    const localProjectLocalesMap = await toolbox.languages.getLocalesMap(
+      "locales"
+    );
+    await toolbox.languages.mergeLocalesMap(
+      resultLocalesMap,
+      localProjectLocalesMap
+    );
+
+    await toolbox.filesystem.removeAsync(shopwarePwaLocalesPath);
+
+    // -> Save result map
+    const languageFileNames = Object.keys(resultLocalesMap);
+    for (let index = 0; index < languageFileNames.length; index++) {
+      const currentLocaleFileName = languageFileNames[index];
+      const currentLocaleFilePath = path.join(
         shopwarePwaLocalesPath,
-        localeFileName
+        currentLocaleFileName
       );
-      const isOverridingThemeLocale = await toolbox.filesystem.existsAsync(
-        pwaLocaleFilePath
+      await toolbox.filesystem.writeAsync(
+        currentLocaleFilePath,
+        resultLocalesMap[currentLocaleFileName]
       );
-      const projectLocalePath = path.join("locales", localeFileName);
-      if (isOverridingThemeLocale) {
-        const themeLocales = await toolbox.filesystem.readAsync(
-          pwaLocaleFilePath,
-          "json"
-        );
-        const projectLocales = await toolbox.filesystem.readAsync(
-          projectLocalePath,
-          "json"
-        );
-        merge(themeLocales, projectLocales);
-        await toolbox.filesystem.writeAsync(pwaLocaleFilePath, themeLocales);
-      } else {
-        await toolbox.filesystem.copyAsync(
-          projectLocalePath,
-          pwaLocaleFilePath
-        );
-      }
     }
 
     const isLocalReload = !!toolbox.parameters.options.local;

packages/cli/src/commands/plugins.ts

@@ -71,18 +71,14 @@ module.exports = {
       props: {},
     });
 
-    const pluginsConfig = toolbox.filesystem.read(
-      `.shopware-pwa/pwa-bundles.json`,
-      "json"
-    );
+    const pluginsConfig = await toolbox.plugins.getPluginsConfig();
     const shopwarePluginsTrace = await toolbox.buildPluginsTrace({
       pluginsConfig,
     });
     // extend plugins trace from local project
-    const localPluginsConfig = toolbox.filesystem.read(
-      `sw-plugins/local-plugins.json`,
-      "json"
-    );
+    const localPluginsConfig = await toolbox.plugins.getPluginsConfig({
+      localPlugins: true,
+    });
     const pluginsTrace = await toolbox.buildPluginsTrace({
       pluginsConfig: localPluginsConfig,
       pluginsTrace: shopwarePluginsTrace,

packages/cli/src/extensions/languages-extensions.ts

@@ -0,0 +1,61 @@
+import { GluegunToolbox } from "gluegun";
+
+module.exports = (toolbox: GluegunToolbox) => {
+  toolbox.languages = {};
+
+  /**
+   * Returns list of filenames from directory
+   */
+  toolbox.languages.getDirLocalesList = async (directoryPath) => {
+    return (await toolbox.filesystem.listAsync(directoryPath)) || [];
+  };
+
+  /**
+   * Returns locales map for specified directory
+   */
+  toolbox.languages.getLocalesMap = async (directoryPath) => {
+    const path = require("path");
+    const languageKeys = await toolbox.languages.getDirLocalesList(
+      directoryPath
+    );
+    const resultMap = {};
+    languageKeys.forEach((languageKey) => {
+      resultMap[languageKey] = toolbox.filesystem.read(
+        path.join(directoryPath, languageKey),
+        "json"
+      );
+    });
+    return resultMap;
+  };
+
+  toolbox.languages.mergeLocalesMap = async (baseMap, newMap) => {
+    const { merge } = require("lodash");
+    const newMapKeys = Object.keys(newMap);
+    newMapKeys.forEach((newMapKey) => {
+      baseMap[newMapKey] = merge(baseMap[newMapKey], newMap[newMapKey]);
+    });
+  };
+
+  /**
+   * Returns directory paths for installed plugins
+   */
+  toolbox.languages.getPluginsLocalesPaths = async ({
+    pluginsConfig,
+    rootDirectory,
+  }: any) => {
+    const path = require("path");
+    const pluginsRootDirectory =
+      rootDirectory || ".shopware-pwa/pwa-bundles-assets";
+    const localesPaths = [];
+    if (pluginsConfig) {
+      const pluginNames = Object.keys(pluginsConfig);
+      pluginNames.forEach((pluginName) => {
+        if (!pluginsConfig[pluginName]) return;
+        localesPaths.push(
+          path.join(pluginsRootDirectory, pluginName, "locales")
+        );
+      });
+    }
+    return localesPaths;
+  };
+};

packages/cli/src/extensions/plugins-extensions.ts

@@ -3,6 +3,25 @@ import axios from "axios";
 import { join } from "path";
 
 module.exports = (toolbox: GluegunToolbox) => {
+  toolbox.plugins = {};
+
+  toolbox.plugins.getPluginsConfig = async (
+    options: {
+      localPlugins?: boolean;
+    } = {}
+  ) => {
+    if (options.localPlugins) {
+      return toolbox.filesystem.readAsync(
+        `sw-plugins/local-plugins.json`,
+        "json"
+      );
+    }
+    return toolbox.filesystem.readAsync(
+      `.shopware-pwa/pwa-bundles.json`,
+      "json"
+    );
+  };
+
   toolbox.fetchPluginsAuthToken = async (
     { shopwareEndpoint, username, password } = toolbox.inputParameters
   ) => {