@zohodesk/react-cli 1.1.28 → 1.1.29-exp.2

package/lib/plugins/newi18nsplitplugin/18nPlugin_working.js

@@ -0,0 +1,542 @@
+"use strict";
+
+//working size based approch
+const path = require('path');
+const fs = require('fs');
+const {
+  getAllI18nGroupedBySection,
+  getPropertiesAsJSON
+} = require('../I18nSplitPlugin/utils/propertiesUtils');
+const {
+  collectI18nKeysfromAST,
+  collectI18nKeysfromComments
+} = require('../I18nSplitPlugin/utils/collectI18nKeys');
+const NullFactory = require('webpack/lib/NullFactory');
+const {
+  I18nDependency,
+  I18nDependencyTemplate
+} = require('../I18nSplitPlugin/I18nDependency');
+const {
+  RawSource
+} = require('webpack-sources');
+const pluginName = 'I18nPlugin';
+class I18nPlugin {
+  constructor(options = {}) {
+    const {
+      jsResourcePath,
+      mainChunkName,
+      propertiesFolder,
+      disableDefault,
+      jsResource
+    } = options;
+    if (!jsResourcePath) {
+      throw new Error('I18nPlugin: "jsResourcePath" option is required.');
+    }
+    if (!mainChunkName) {
+      throw new Error('I18nPlugin: "mainChunkName" option is required.');
+    }
+    this.jsResourcePath = jsResourcePath;
+    this.entryPointName = mainChunkName;
+    this.jsResourceI18nKeys = jsResource ? getPropertiesAsJSON(jsResource) : {}; // Use getAllI18nGroupedBySection to group keys by sections
+
+    this.allI18nKeys = getAllI18nGroupedBySection({
+      folderPath: propertiesFolder,
+      disableDefault,
+      jsResourceI18nKeys: this.jsResourceI18nKeys
+    });
+    console.log('Locales found:', Object.keys(this.allI18nKeys)); // Build keyToSectionMap
+
+    this.keyToSectionMap = {};
+    const locales = Object.keys(this.allI18nKeys);
+    if (locales.length > 0) {
+      // Use the first locale to build keyToSectionMap
+      const firstLocale = locales[0];
+      const sections = this.allI18nKeys[firstLocale];
+      console.log(`Sections found in properties files: ${Object.keys(sections).join(', ')}`);
+      for (const sectionName of Object.keys(sections)) {
+        const keysInSection = sections[sectionName];
+        for (const key of Object.keys(keysInSection)) {
+          this.keyToSectionMap[key] = sectionName;
+        }
+      }
+    }
+    this.moduleToKeysMap = new Map();
+    this.keyToModulesMap = new Map();
+    this.keyToI18nChunkIdMap = {};
+  }
+  defineI18nDependency(compilation) {
+    compilation.dependencyFactories.set(I18nDependency, new NullFactory());
+    compilation.dependencyTemplates.set(I18nDependency, new I18nDependencyTemplate());
+  }
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, (compilation, params) => {
+      this.defineI18nDependency(compilation); // Handler for parser
+
+      const handler = parser => {
+        parser.hooks.program.tap(pluginName, (ast, comments) => {
+          const {
+            module
+          } = parser.state;
+          if (!(module && /\.jsx?$/.test(module.resource))) {
+            return;
+          } // Collect i18n keys
+
+          let i18nKeys = collectI18nKeysfromAST(ast, this.jsResourceI18nKeys);
+          let commentKeys = collectI18nKeysfromComments(comments, this.jsResourceI18nKeys);
+          i18nKeys = i18nKeys.concat(commentKeys);
+          if (i18nKeys.length) {
+            // Store the keys for this module
+            this.moduleToKeysMap.set(module.resource, i18nKeys); // Map keys to modules
+
+            for (const key of i18nKeys) {
+              if (!this.keyToModulesMap.has(key)) {
+                this.keyToModulesMap.set(key, new Set());
+              }
+              this.keyToModulesMap.get(key).add(module.resource);
+            }
+          }
+        });
+      };
+      const factory = params.normalModuleFactory;
+      factory.hooks.parser.for('javascript/auto').tap(pluginName, handler);
+      factory.hooks.parser.for('javascript/dynamic').tap(pluginName, handler);
+      compilation.hooks.afterOptimizeChunks.tap(pluginName, () => {
+        this.processCollectedKeys(compilation);
+      });
+    });
+  }
+  processCollectedKeys(compilation) {
+    // Map to store chunkId to required sections
+    this.chunkIdToSectionsMap = {};
+    this.moduleChunkIdToModulesMap = {}; // Map module resource to chunk IDs
+
+    this.moduleResourceToChunkIds = new Map(); // Collect modules for the entry point
+
+    const entryPointChunk = compilation.namedChunks.get(this.entryPointName);
+    const entryPointModules = new Set();
+    if (entryPointChunk) {
+      for (const module of entryPointChunk.getModules()) {
+        if (module.resource) {
+          entryPointModules.add(module.resource);
+        }
+      }
+    } // Iterate over all chunks in the compilation
+
+    for (const chunk of compilation.chunks) {
+      const chunkId = chunk.name || chunk.id;
+      const chunkIdString = String(chunkId); // Collect all modules in the chunk
+
+      const modules = chunk.getModules();
+      let requiredSections = new Set();
+      let moduleResources = [];
+      for (const module of modules) {
+        const moduleResource = module.resource;
+        if (moduleResource) {
+          moduleResources.push(moduleResource);
+          const keys = this.moduleToKeysMap.get(moduleResource);
+          if (keys) {
+            for (const key of keys) {
+              const section = this.keyToSectionMap[key];
+              if (section) {
+                requiredSections.add(section);
+              }
+            }
+          } // Map module resource to chunk IDs
+
+          if (!this.moduleResourceToChunkIds.has(moduleResource)) {
+            this.moduleResourceToChunkIds.set(moduleResource, new Set());
+          }
+          this.moduleResourceToChunkIds.get(moduleResource).add(chunkIdString);
+        }
+      } // Store in the map if there are required sections
+
+      if (requiredSections.size > 0) {
+        this.chunkIdToSectionsMap[chunkIdString] = Array.from(requiredSections);
+      } // Map chunkId to module resources
+
+      if (moduleResources.length > 0) {
+        this.moduleChunkIdToModulesMap[chunkIdString] = moduleResources;
+      }
+    } // Collect all used keys
+
+    this.allUsedKeys = new Set();
+    for (const keys of this.moduleToKeysMap.values()) {
+      for (const key of keys) {
+        this.allUsedKeys.add(key);
+      }
+    } // Collect entry point keys
+
+    this.entryPointKeys = new Set();
+    for (const moduleResource of entryPointModules) {
+      const keys = this.moduleToKeysMap.get(moduleResource);
+      if (keys) {
+        for (const key of keys) {
+          this.entryPointKeys.add(key);
+        }
+      }
+    } // Collect unused keys
+
+    this.allKeysInProperties = new Set();
+    const firstLocale = Object.keys(this.allI18nKeys)[0];
+    const sections = this.allI18nKeys[firstLocale];
+    for (const section of Object.values(sections)) {
+      for (const key of Object.keys(section)) {
+        this.allKeysInProperties.add(key);
+      }
+    }
+    this.unusedKeys = new Set([...this.allKeysInProperties].filter(key => !this.allUsedKeys.has(key))); // Remove entry point keys from allUsedKeys
+
+    this.remainingKeys = new Set([...this.allUsedKeys].filter(key => !this.entryPointKeys.has(key))); // Emit the i18n chunks
+
+    this.emitI18nChunks(compilation);
+  }
+  getValueForKeyInLocale(key, locale) {
+    const sections = this.allI18nKeys[locale];
+    for (const sectionName in sections) {
+      const section = sections[sectionName];
+      if (key in section) {
+        return section[key];
+      }
+    }
+    return undefined;
+  }
+  emitI18nChunks(compilation) {
+    const manifest = {
+      moduleToI18nChunkMap: {},
+      locales: {}
+    }; // Get the list of locales
+
+    const locales = Object.keys(this.allI18nKeys);
+    const firstLocale = locales[0]; // Map from i18nChunkId to keys
+
+    const i18nChunkIdToKeysMap = {};
+    let i18nChunkIdCounter = 0; // **Chunk 0**: Entry Point Keys
+
+    const entryPointChunkId = i18nChunkIdCounter++;
+    i18nChunkIdToKeysMap[entryPointChunkId] = Array.from(this.entryPointKeys);
+    for (const key of this.entryPointKeys) {
+      this.keyToI18nChunkIdMap[key] = entryPointChunkId;
+    } // **Last Chunk**: Unused Keys
+
+    const unusedKeysChunkId = 'unused'; // Using a string to make it distinct
+
+    i18nChunkIdToKeysMap[unusedKeysChunkId] = Array.from(this.unusedKeys); // Remaining Keys: Group into chunks of ~30KB
+
+    let currentChunkKeys = [];
+    let currentChunkSize = 0;
+    const desiredChunkSize = 1 * 1024; // 30KB
+
+    for (const key of this.remainingKeys) {
+      const value = this.getValueForKeyInLocale(key, firstLocale);
+      const keySize = Buffer.byteLength(key, 'utf8') + Buffer.byteLength(value || '', 'utf8');
+      if (currentChunkSize + keySize > desiredChunkSize) {
+        // Assign current chunk
+        const i18nChunkId = i18nChunkIdCounter++;
+        i18nChunkIdToKeysMap[i18nChunkId] = currentChunkKeys; // Map keys to i18nChunkId
+
+        for (const chunkKey of currentChunkKeys) {
+          this.keyToI18nChunkIdMap[chunkKey] = i18nChunkId;
+        } // Start a new chunk
+
+        currentChunkKeys = [];
+        currentChunkSize = 0;
+      }
+      currentChunkKeys.push(key);
+      currentChunkSize += keySize;
+    } // Assign the remaining keys
+
+    if (currentChunkKeys.length > 0) {
+      const i18nChunkId = i18nChunkIdCounter++;
+      i18nChunkIdToKeysMap[i18nChunkId] = currentChunkKeys; // Map keys to i18nChunkId
+
+      for (const chunkKey of currentChunkKeys) {
+        this.keyToI18nChunkIdMap[chunkKey] = i18nChunkId;
+      }
+    } // Now, generate the i18n chunks for each locale
+
+    for (const locale of locales) {
+      manifest.locales[locale] = manifest.locales[locale] || {};
+      for (const [i18nChunkId, keys] of Object.entries(i18nChunkIdToKeysMap)) {
+        const i18nData = {};
+        for (const key of keys) {
+          const value = this.getValueForKeyInLocale(key, locale);
+          if (value !== undefined) {
+            i18nData[key] = value;
+          }
+        }
+        if (Object.keys(i18nData).length > 0) {
+          const moduleSource = `window.loadI18nChunk(${JSON.stringify(i18nData, null, 2)});`;
+          const filename = `i18n-chunks/${locale}/chunk-${i18nChunkId}.js`;
+          compilation.emitAsset(filename, new RawSource(moduleSource));
+          manifest.locales[locale][i18nChunkId] = filename;
+          console.log(`Emitted i18n chunk: ${filename}`);
+        }
+      }
+    } // Now, create moduleToI18nChunkMap
+
+    for (const [moduleChunkId, moduleResources] of Object.entries(this.moduleChunkIdToModulesMap)) {
+      const requiredI18nChunkIds = new Set();
+      for (const moduleResource of moduleResources) {
+        const keys = this.moduleToKeysMap.get(moduleResource);
+        if (keys) {
+          for (const key of keys) {
+            const i18nChunkId = this.keyToI18nChunkIdMap[key];
+            if (i18nChunkId !== undefined) {
+              requiredI18nChunkIds.add(i18nChunkId);
+            }
+          }
+        }
+      }
+      if (requiredI18nChunkIds.size > 0) {
+        manifest.moduleToI18nChunkMap[moduleChunkId] = Array.from(requiredI18nChunkIds);
+      } else {
+        console.log(`No required i18n chunks for module chunk ID ${moduleChunkId}`);
+      }
+    } // Ensure that the main chunk always requires chunk zero
+
+    manifest.moduleToI18nChunkMap[this.entryPointName] = manifest.moduleToI18nChunkMap[this.entryPointName] || [];
+    if (!manifest.moduleToI18nChunkMap[this.entryPointName].includes(entryPointChunkId)) {
+      manifest.moduleToI18nChunkMap[this.entryPointName].unshift(entryPointChunkId);
+    } // Emit the manifest file
+
+    const manifestSource = new RawSource(`window.i18n = window.i18n || {}; window.i18n.manifest = ${JSON.stringify(manifest, null, 2)};`);
+    const manifestFilename = 'i18n-chunks/manifest.js';
+    compilation.emitAsset(manifestFilename, manifestSource);
+    console.log(`Emitted i18n manifest: ${manifestFilename}`);
+  }
+}
+module.exports = I18nPlugin; //section based approch 
+// const path = require('path');
+// const fs = require('fs');
+// const {
+//   getAllI18nGroupedBySection,
+//   getPropertiesAsJSON,
+// } = require('../I18nSplitPlugin/utils/propertiesUtils');
+// const {
+//   collectI18nKeysfromAST,
+//   collectI18nKeysfromComments,
+// } = require('../I18nSplitPlugin/utils/collectI18nKeys');
+// const NullFactory = require('webpack/lib/NullFactory');
+// const {
+//   I18nDependency,
+//   I18nDependencyTemplate,
+// } = require('../I18nSplitPlugin/I18nDependency');
+// const webpack = require('webpack');
+// const { RawSource } = require('webpack-sources'); // Import RawSource from webpack-sources
+// const pluginName = 'I18nPlugin';
+// class I18nPlugin {
+//   constructor(options = {}) {
+//     const {
+//       jsResourcePath,
+//       mainChunkName,
+//       propertiesFolder,
+//       disableDefault,
+//       jsResource,
+//     } = options;
+//     if (!jsResourcePath) {
+//       throw new Error('I18nPlugin: "jsResourcePath" option is required.');
+//     }
+//     if (!mainChunkName) {
+//       throw new Error('I18nPlugin: "mainChunkName" option is required.');
+//     }
+//     this.jsResourcePath = jsResourcePath;
+//     this.entryPointName = mainChunkName;
+//     this.jsResourceI18nKeys = jsResource
+//       ? getPropertiesAsJSON(jsResource)
+//       : {};
+//     // Get all i18n keys grouped by sections
+//     this.allI18nKeys = getAllI18nGroupedBySection({
+//       folderPath: propertiesFolder,
+//       disableDefault,
+//       jsResourceI18nKeys: this.jsResourceI18nKeys,
+//     });
+//     console.log('All locales:', Object.keys(this.allI18nKeys));
+//     this.moduleToKeysMap = new Map();
+//     this.keyToModulesMap = new Map();
+//     this.keyToI18nChunkIdMap = {};
+//   }
+//   defineI18nDependency(compilation) {
+//     compilation.dependencyFactories.set(I18nDependency, new NullFactory());
+//     compilation.dependencyTemplates.set(
+//       I18nDependency,
+//       new I18nDependencyTemplate()
+//     );
+//   }
+//   addI18nDependency(module, i18nKeys) {
+//     const identifier = `i18n ${module.resource}`;
+//     const dep = new I18nDependency({ identifier, i18nKeys }, module.context, 0);
+//     module.addDependency(dep);
+//   }
+//   apply(compiler) {
+//     compiler.hooks.thisCompilation.tap(pluginName, (compilation, params) => {
+//       this.defineI18nDependency(compilation);
+//       // Handler for parser
+//       const handler = (parser) => {
+//         parser.hooks.program.tap(pluginName, (ast, comments) => {
+//           const { module } = parser.state;
+//           if (!(module && /\.jsx?$/.test(module.resource))) {
+//             return;
+//           }
+//           // Collect i18n keys
+//           let i18nKeys = collectI18nKeysfromAST(ast, this.jsResourceI18nKeys);
+//           let commentKeys = collectI18nKeysfromComments(
+//             comments,
+//             this.jsResourceI18nKeys
+//           );
+//           i18nKeys = i18nKeys.concat(commentKeys);
+//           if (i18nKeys.length) {
+//             // Store the keys for this module
+//             this.moduleToKeysMap.set(module.resource, i18nKeys);
+//             // Map keys to modules
+//             for (const key of i18nKeys) {
+//               if (!this.keyToModulesMap.has(key)) {
+//                 this.keyToModulesMap.set(key, new Set());
+//               }
+//               this.keyToModulesMap.get(key).add(module.resource);
+//             }
+//             // Add I18nDependency to the module (optional, if needed)
+//             // this.addI18nDependency(module, i18nKeys);
+//           }
+//         });
+//       };
+//       // Tap into parser hooks
+//       const factory = params.normalModuleFactory;
+//       factory.hooks.parser.for('javascript/auto').tap(pluginName, handler);
+//       factory.hooks.parser.for('javascript/dynamic').tap(pluginName, handler);
+//       // After optimizing chunks, process collected keys
+//       compilation.hooks.afterOptimizeChunks.tap(pluginName, () => {
+//         this.processCollectedKeys(compilation);
+//       });
+//     });
+//   }
+//   processCollectedKeys(compilation) {
+//     console.log('Starting processCollectedKeys...');
+//     // Initialize mappings
+//     this.chunkIdToKeysMap = {};
+//     this.moduleChunkIdToModulesMap = {};
+//     // Iterate over all chunks in the compilation
+//     for (const chunk of compilation.chunks) {
+//       const chunkId = chunk.name || chunk.id;
+//       const chunkIdString = String(chunkId);
+//       console.log(`Processing chunk with ID: ${chunkIdString}`);
+//       // Collect all modules in the chunk
+//       const modules = chunk.getModules();
+//       let chunkKeys = new Set();
+//       let moduleResources = [];
+//       for (const module of modules) {
+//         const moduleResource = module.resource;
+//         if (moduleResource) {
+//           moduleResources.push(moduleResource);
+//           const keys = this.moduleToKeysMap.get(moduleResource);
+//           if (keys) {
+//             for (const key of keys) {
+//               chunkKeys.add(key);
+//             }
+//           }
+//         }
+//       }
+//       // Store in the map if there are keys
+//       chunkKeys = Array.from(chunkKeys);
+//       if (chunkKeys.length > 0) {
+//         this.chunkIdToKeysMap[chunkIdString] = chunkKeys;
+//       }
+//       // Map chunkId to module resources
+//       if (moduleResources.length > 0) {
+//         this.moduleChunkIdToModulesMap[chunkIdString] = moduleResources;
+//       }
+//     }
+//     // Emit the i18n chunks
+//     this.emitI18nChunks(compilation);
+//   }
+//   emitI18nChunks(compilation) {
+//     const manifest = {
+//       moduleToI18nChunkMap: {},
+//       locales: {},
+//     };
+//     // Get the list of locales
+//     const locales = Object.keys(this.allI18nKeys);
+//     // Initialize i18nChunkId counter
+//     let i18nChunkIdCounter = 0;
+//     const sectionToI18nChunkIdMap = {};
+//     // Assign each section to an i18n chunk
+//     // Assuming all locales have the same sections as the first locale
+//     const firstLocale = locales[0];
+//     const sections = Object.keys(this.allI18nKeys[firstLocale]);
+//     for (const sectionName of sections) {
+//       const i18nChunkId = i18nChunkIdCounter++;
+//       sectionToI18nChunkIdMap[sectionName] = i18nChunkId;
+//       // Collect keys for this section from the first locale
+//       const keys = Object.keys(this.allI18nKeys[firstLocale][sectionName] || {});
+//       // Map keys to i18nChunkId
+//       for (const key of keys) {
+//         this.keyToI18nChunkIdMap[key] = i18nChunkId;
+//       }
+//       // Generate the i18n chunk for each locale
+//       for (const locale of locales) {
+//         manifest.locales[locale] = manifest.locales[locale] || {};
+//         const i18nData = {};
+//         const localeSectionKeys = this.allI18nKeys[locale][sectionName] || {};
+//         for (const key of keys) {
+//           const value = localeSectionKeys[key];
+//           if (value !== undefined) {
+//             i18nData[key] = value;
+//           }
+//         }
+//         if (Object.keys(i18nData).length > 0) {
+//             const moduleSource = `window.loadI18nChunk(${JSON.stringify(i18nData, null, 2)});`;
+//             const filename = `i18n-chunks${locale}/${sectionName}chunk-${i18nChunkId}.js`;
+//           compilation.emitAsset(filename, new RawSource(moduleSource));
+//           manifest.locales[locale][i18nChunkId] = filename;
+//         }
+//       }
+//     }
+//     // Now, create moduleToI18nChunkMap
+//     for (const [moduleChunkId, moduleResources] of Object.entries(
+//       this.moduleChunkIdToModulesMap
+//     )) {
+//       const requiredI18nChunkIds = new Set();
+//       for (const moduleResource of moduleResources) {
+//         const keys = this.moduleToKeysMap.get(moduleResource);
+//         if (keys) {
+//           for (const key of keys) {
+//             const i18nChunkId = this.keyToI18nChunkIdMap[key];
+//             if (i18nChunkId !== undefined) {
+//               requiredI18nChunkIds.add(i18nChunkId);
+//             }
+//           }
+//         }
+//       }
+//       if (requiredI18nChunkIds.size > 0) {
+//         manifest.moduleToI18nChunkMap[moduleChunkId] = Array.from(
+//           requiredI18nChunkIds
+//         );
+//       } else {
+//         console.log(
+//           `No required i18n chunks for module chunk ID ${moduleChunkId}`
+//         );
+//       }
+//     }
+//     // Emit the manifest file
+//     const manifestSource = new RawSource(
+//       `window.i18n = window.i18n || {}; window.i18n.manifest = ${JSON.stringify(
+//         manifest,
+//         null,
+//         2
+//       )};`
+//     );
+//     const manifestFilename = 'i18n-chunks/manifest.js';
+//     compilation.emitAsset(manifestFilename, manifestSource);
+//     console.log(`Emitted i18n manifest: ${manifestFilename}`);
+//   }
+// }
+// I18nPlugin.isChunkHasI18n = function (chunk) {
+//   for (const module of chunk.modulesIterable) {
+//     for (const dep of module.dependencies) {
+//       if (dep instanceof I18nDependency) {
+//         return true;
+//       }
+//     }
+//   }
+//   return false;
+// };
+// module.exports = I18nPlugin;