@localazy/strapi-plugin 0.1.18 → 0.2.0

package/README.md

@@ -1,57 +1,38 @@
+## Quick Installation
+
+```
+npx @localazy/strapi-plugin
+```
+
 ## The Official Strapi Localization Plugin by Localazy
 
 Strapi localization doesn't have to be a headache! Install the Strapi localization plugin and seamlessly translate your content into multiple languages with [Localazy](https://localazy.com).
 
 ### Manage your multilingual content with ease
+
 1. [Sign up](https://localazy.com/register) & Upload your content to Localazy.
 2. Translate your content with machine translation assistance, or let the Localazy [Continuous Localization Team](https://localazy.com/blog/guide-localazy-translation-services) translate your content for you. You can also quickly pre-translate everything in bulk or invite your translators.
 3. Download translated content back to Strapi and feel the seamless experience of multilingual content management.
 
 📰 Learn more in the [Strapi + Localazy tutorial](https://localazy.com/blog/how-to-strapi-localization-with-localazy#getting-started-with-strapi-localization).
 
-## Setup
-
-### Install the plugin via NPM
+## Installation & Setup
 
 The plugin is available on [NPM](https://www.npmjs.com/package/@localazy/strapi-plugin).
-You can also follow the installation commands located in your Strapi project Marketplace. This is the recommended approach.
-
-```
-npm install @localazy/strapi-plugin
-```
-
-### Use the plugin in a clean project locally
-
-Besides installing the plugin via `npm`, you can also use it in a project locally. Assuming you have a (clean) Strapi project set up, do:
-
-1. Copy the whole contents.
-2. Paste it into `./src/plugin/localazy` folder of your project (path from project root).
-3. Create `./config/plugins.js` file (path from project root).
-4. Add the following contents to `./config/plugins.js` file:
+You can also follow the installation commands located in your Strapi project Marketplace or [Strapi Marketplace > Localazy](https://market.strapi.io/plugins/@localazy-strapi-plugin) itself. This is the recommended approach.
 
 ```
-module.exports = {
-  localazy: {
-    enabled: true,
-    resolve: "./src/plugins/localazy",
-    config: {
-      default: () => {},
-      validator: () => {},
-    },
-  },
-};
+npx @localazy/strapi-plugin
 ```
 
-5. Run the project. The plugin will be available in the admin.
-
-### Tests
-
-To run tests, run the `npm run test` command. To watch tests, run the `npm run test:watch` command.
+Note: Localazy plugin requires an updated Webpack configuration of your Strapi project. Follow the instructions in the console output during the installation process. Steps are also available in the [Install plugin via NPM](https://localazy.com/docs/strapi/strapi-plugin-introduction-installation#install-plugin-via-npm) section of the Localazy Docs.
 
 ## Additional Resources
+
 - Localazy Docs: [Introduction to Strapi](https://localazy.com/docs/strapi/strapi-plugin-introduction-installation)
 - Localazy Blog: [Articles about the Strapi plugin](https://localazy.com/tags/strapi)
 
 ## Support
+
 - If you encounter any issues or have questions, please contact us at [team@localazy.com](mailto:team@localazy.com).
 - Join the [Localazy Discussion Forum](https://discuss.localazy.com/) to discuss all things localization.

package/admin/src/modules/alerts/constants/channels.js

@@ -0,0 +1 @@
+export const LOCALAZY_PLUGIN_CHANNEL = "localazy-plugin";

package/admin/src/modules/alerts/constants/events.js

@@ -0,0 +1,4 @@
+export const UPLOAD_EVENT = "upload";
+export const UPLOAD_FINISHED_EVENT = "upload:finished";
+export const DOWNLOAD_EVENT = "download";
+export const DOWNLOAD_FINISHED_EVENT = "download:finished";

package/admin/src/modules/alerts/services/alerts-service.js

@@ -0,0 +1,25 @@
+import SocketIoClient from "socket.io-client";
+import { LOCALAZY_PLUGIN_CHANNEL } from "../constants/channels";
+
+
+export default class AlertsService {
+  _client;
+
+  _streamIdentifier;
+
+  constructor() {
+    this._client = SocketIoClient.connect(process.env.STRAPI_ADMIN_BACKEND_URL);
+  }
+
+  setStreamIdentifier(streamIdentifier) {
+    this._streamIdentifier = streamIdentifier;
+  }
+
+  subscribe(channel = null) {
+    this._client.emit("subscribe", channel || LOCALAZY_PLUGIN_CHANNEL);
+  }
+
+  on(event, callback) {
+    this._client.on(`${event}:${this._streamIdentifier}`, callback);
+  }
+}

package/admin/src/modules/localazy-download/locale/en.js

@@ -20,4 +20,6 @@ export default {
   ui_languages: "Select languages to download",
   ui_languages_info: "Select translations of which languages wil be downloaded from Localazy",
   ui_languages_placeholder: "Download all languages",
+  download_in_progress: "Download in progress...",
+  to_see_to_progress: "To see the progress information, do not leave this page.",
 };

package/admin/src/modules/localazy-download/services/download-alerts-service.js

@@ -0,0 +1,12 @@
+import AlertsService from "../../alerts/services/alerts-service";
+import { DOWNLOAD_EVENT, DOWNLOAD_FINISHED_EVENT } from "../../alerts/constants/events";
+
+export default class DownloadAlertsService extends AlertsService {
+  onDownload(callback) {
+    this.on(DOWNLOAD_EVENT, callback);
+  }
+
+  onDownloadFinished(callback) {
+    this.on(DOWNLOAD_FINISHED_EVENT, callback);
+  }
+}

package/admin/src/modules/localazy-upload/locale/en.js

@@ -15,4 +15,6 @@ export default {
   upload_success: "Content successfully imported to the Localazy project.",
   upload_failed:
     "Upload partially failed, please check the report for details...",
+  upload_in_progress: "Upload in progress...",
+  to_see_to_progress: "To see the progress information, do not leave this page.",
 };

package/admin/src/modules/localazy-upload/services/upload-alerts-service.js

@@ -0,0 +1,12 @@
+import AlertsService from "../../alerts/services/alerts-service";
+import { UPLOAD_EVENT, UPLOAD_FINISHED_EVENT } from "../../alerts/constants/events";
+
+export default class UploadAlertsService extends AlertsService {
+  onUpload(callback) {
+    this.on(UPLOAD_EVENT, callback);
+  }
+
+  onUploadFinished(callback) {
+    this.on(UPLOAD_FINISHED_EVENT, callback);
+  }
+}

package/admin/src/pages/Download/index.js

@@ -24,6 +24,10 @@ import PluginSettingsService from "../../modules/plugin-settings/services/plugin
 import { PLUGIN_ROUTES } from "../../modules/@common/utils/redirect-to-plugin-route";
 import LanguagesSelector from "../../modules/@common/components/LanguagesSelector";
 import ProjectService from "../../modules/@common/services/project-service";
+import DownloadAlertsService from "../../modules/localazy-download/services/download-alerts-service";
+
+const downloadAlertsService = new DownloadAlertsService();
+downloadAlertsService.subscribe();
 
 function Download(props) {
   const { t } = useTranslation();
@@ -36,7 +40,10 @@ function Download(props) {
   const [localesIncompatible, setLocalesIncompatible] = useState(false);
   const [showDownloadFinishedModal, setshowDownloadFinishedModal] =
     useState(false);
-  const [downloadResult, setDownloadResult] = useState({});
+  const [downloadResult, setDownloadResult] = useState({
+    success: false,
+    report: [],
+  });
   const [isDownloading, setIsDownloading] = useState(false);
 
   /**
@@ -72,8 +79,34 @@ function Download(props) {
 
   const onDownloadClick = async () => {
     setIsDownloading(true);
+    setshowDownloadFinishedModal(false);
+    setDownloadResult({
+      success: false,
+      report: [],
+    });
     const result = await LocalazyDownloadService.download();
-    setDownloadResult(result);
+    const { streamIdentifier } = result;
+    downloadAlertsService.setStreamIdentifier(streamIdentifier);
+    downloadAlertsService.onDownload((data) => {
+      setDownloadResult((old) => ({
+        success: data.success,
+        report: [
+          ...old.report || [],
+          data.message,
+        ],
+      }));
+    });
+    downloadAlertsService.onDownloadFinished((data) => {
+      setDownloadResult((old) => ({
+        success: data.success,
+        report: [
+          ...old.report || [],
+          data.message,
+        ],
+      }));
+      setIsDownloading(false);
+      setshowDownloadFinishedModal(true);
+    });
 
     // track download
     ProductAnalyticsService.trackDownloadToStrapi(
@@ -83,9 +116,6 @@ function Download(props) {
         "Target Languages Codes": "all",
       }
     );
-
-    setIsDownloading(false);
-    setshowDownloadFinishedModal(true);
   };
 
   useEffect(() => {
@@ -200,6 +230,16 @@ function Download(props) {
               </Alert>
             </Box>
           )}
+          {isDownloading && (
+            <Box marginTop={4} marginBottom={4}>
+              <Alert
+                title={t("download.download_in_progress")}
+                variant="warning"
+              >
+                {t("download.to_see_to_progress")}
+              </Alert>
+            </Box>
+          )}
           {localesIncompatible && (
             <Box marginTop={4} marginBottom={4}>
               <Alert

package/admin/src/pages/Upload/index.js

@@ -24,9 +24,13 @@ import redirectToPluginRoute, {
 import { getLocalazyIdentity } from "../../state/localazy-identity";
 import ProductAnalyticsService from "../../modules/@common/services/product-analytics-service";
 import PluginSettingsService from "../../modules/plugin-settings/services/plugin-settings-service";
+import UploadAlertsService from "../../modules/localazy-upload/services/upload-alerts-service";
 
 import "../../i18n";
 
+const uploadAlertsService = new UploadAlertsService();
+uploadAlertsService.subscribe();
+
 function Upload(props) {
   const { t } = useTranslation();
 
@@ -37,7 +41,10 @@ function Upload(props) {
   const [modelChanged, setModelChanged] = useState(false);
   const [localesIncompatible, setLocalesIncompatible] = useState(false);
   const [showUploadFinishedModal, setShowUploadFinishedModal] = useState(false);
-  const [uploadResult, setUploadResult] = useState({});
+  const [uploadResult, setUploadResult] = useState({
+    success: false,
+    report: [],
+  });
   const [isUploading, setIsUploading] = useState(false);
   const [strapiDefaultLocale, setStrapiDefaultLocale] = useState(null);
   const [localazySourceLanguage, setLocalazySourceLanguage] = useState(null);
@@ -51,8 +58,34 @@ function Upload(props) {
 
   const onUploadClick = async () => {
     setIsUploading(true);
+    setShowUploadFinishedModal(false);
+    setUploadResult({
+      success: false,
+      report: [],
+    });
     const result = await LocalazyUploadService.upload();
-    setUploadResult(result);
+    const { streamIdentifier } = result;
+    uploadAlertsService.setStreamIdentifier(streamIdentifier);
+    uploadAlertsService.onUpload((data) => {
+      setUploadResult((old) => ({
+        success: data.success,
+        report: [
+          ...old.report || [],
+          data.message,
+        ],
+      }));
+    });
+    uploadAlertsService.onUploadFinished((data) => {
+      setUploadResult((old) => ({
+        success: data.success,
+        report: [
+          ...old.report || [],
+          data.message,
+        ],
+      }));
+      setIsUploading(false);
+      setShowUploadFinishedModal(true);
+    });
 
     // track upload
     ProductAnalyticsService.trackUploadToLocalazy(
@@ -62,9 +95,6 @@ function Upload(props) {
         "Source Language Code": localazySourceLanguage.code,
       }
     );
-
-    setIsUploading(false);
-    setShowUploadFinishedModal(true);
   };
 
   useEffect(() => {
@@ -162,6 +192,16 @@ function Upload(props) {
               </Alert>
             </Box>
           )}
+          {isUploading && (
+            <Box marginTop={4} marginBottom={4}>
+              <Alert
+                title={t("upload.upload_in_progress")}
+                variant="warning"
+              >
+                {t("upload.to_see_to_progress")}
+              </Alert>
+            </Box>
+          )}
           {localesIncompatible && (
             <Box marginTop={4} marginBottom={4}>
               <Alert

package/install/index.mjs

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+
+import path from 'node:path';
+import { fileURLToPath } from 'url';
+import fs from 'fs-extra';
+import chalk from 'chalk';
+import ora from 'ora';
+import shell from 'shelljs';
+import { createRequire } from 'module';
+
+// To prevent node experimental features warning after `import(package.json)` require is used instead.
+const require = createRequire(import.meta.url);
+const pkg = require('../package.json');
+
+// https://patorjk.com/software/taag/#p=display&h=1&v=1&f=Sub-Zero&t=Localazy
+const banner = chalk.blue(`
+ __       ______   ______   ______   __       ______   ______   __  __
+/\\ \\     /\\  __ \\ /\\  ___\\ /\\  __ \\ /\\ \\     /\\  __ \\ /\\___  \\ /\\ \\_\\ \\
+\\ \\ \\____\\ \\ \\/\\ \\\\ \\ \\____\\ \\  __ \\\\ \\ \\____\\ \\  __ \\\\/_/  /__\\ \\____ \\
+ \\ \\_____\\\\ \\_____\\\\ \\_____\\\\ \\_\\ \\_\\\\ \\_____\\\\ \\_\\ \\_\\ /\\_____\\\\/\\_____\\
+  \\/_____/ \\/_____/ \\/_____/ \\/_/\\/_/ \\/_____/ \\/_/\\/_/ \\/_____/ \\/_____/
+`);
+const name = `${chalk.bold.green(pkg.name)}`;
+const version = `${chalk.grey(`@${pkg.version}`)}`;
+const exampleFileName = 'webpack.config.localazy-strapi-plugin.example.js';
+const file = `${chalk.bold.green(exampleFileName)}`;
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const template = (await fs.readFile(path.join(__dirname, 'webpack.example.js'))).toString();
+const installSpinner = ora();
+
+const install = () => new Promise((resolve, reject) => {
+  try {
+    shell.exec(`npm install ${pkg.name}`, { silent: true }, () => {
+      resolve();
+    });
+  } catch (err) {
+    reject(err);
+  }
+});
+
+const updateConfig = () => new Promise((resolve, reject) => {
+  try {
+    shell.exec(`echo "${template}" > src/admin/${exampleFileName}`, { silent: true }, () => {
+      resolve();
+    });
+  } catch (err) {
+    reject(err);
+  }
+});
+
+console.log(banner);
+
+installSpinner.start(`Installing ${name}${version}`);
+await install();
+installSpinner.succeed();
+
+installSpinner.start(`Creating example ${file} file in ${chalk.bold.green("src/admin")} folder`);
+await updateConfig();
+installSpinner.succeed();
+installSpinner.succeed(`To run the plugin, you need to update your webpack config in ${chalk.bold.green("src/admin/webpack.config.js")} file`);
+installSpinner.succeed(`Don't forget to build the admin panel with ${chalk.bold.green("npm run build")} command`);

package/install/webpack.example.js

@@ -0,0 +1,28 @@
+module.exports = (config, webpack) => {
+  /**
+   * This is an example of how to extend webpack config in order to use Localazy Strapi Plugin.
+   * Because Strapi is using Webpack 5, it is necessary to disable some Node.js polyfills in the Strapi monorepo.
+   *
+   * If your webpack config does not exist, create one.
+   */
+
+  return {
+    ...config,
+    resolve: {
+      ...config.resolve,
+      fallback: {
+        ...config.resolve.fallback,
+        crypto: false,
+        http: false,
+        fs: false,
+        zlib: false,
+        https: false,
+        stream: false,
+        path: false,
+        timers: false,
+        tls: false,
+        net: false,
+      },
+    }
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@localazy/strapi-plugin",
-  "version": "0.1.18",
+  "version": "0.2.0",
   "description": "The official Strapi Plugin by Localazy.",
   "strapi": {
     "name": "localazy",
@@ -24,6 +24,7 @@
     "email": "team@localazy.com",
     "url": "https://localazy.com"
   },
+  "bin": "./install/index.mjs",
   "repository": {
     "type": "git",
     "url": "git@github.com:localazy/strapi-plugin.git"
@@ -40,13 +41,19 @@
   "dependencies": {
     "@david-vaclavek/deep-keys": "^0.5.0",
     "@localazy/ts-api": "^1.0.13",
+    "chalk": "^5.3.0",
+    "fs-extra": "^11.1.1",
     "i18next": "^22.4.9",
     "isomorphic-fetch": "^3.0.0",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
     "module-alias": "^2.2.2",
+    "ora": "^7.0.1",
     "react-hooks-global-state": "^2.1.0",
     "react-i18next": "^12.1.4",
+    "shelljs": "^0.8.5",
+    "socket.io-client": "^4.7.2",
+    "strapio": "^3.0.2",
     "styled-components": "^5.3.6"
   },
   "devDependencies": {

package/server/bootstrap.js

@@ -57,4 +57,7 @@ module.exports = ({ strapi }) => {
         break;
     }
   });
+  process.nextTick(() => {
+    strapi.StrapIO = (require('strapio'))(strapi);
+  });
 };

package/server/constants/channels.js

@@ -0,0 +1,3 @@
+module.exports = {
+  LOCALAZY_PLUGIN_CHANNEL: "localazy-plugin",
+};

package/server/constants/events.js

@@ -0,0 +1,6 @@
+module.exports = {
+  UPLOAD_EVENT: "upload",
+  UPLOAD_FINISHED_EVENT: "upload:finished",
+  DOWNLOAD_EVENT: "download",
+  DOWNLOAD_FINISHED_EVENT: "download:finished",
+};