@zohodesk/react-cli 0.0.1-beta.98 → 0.0.1-betaa.138.1

package/lib/plugins/I18nSplitPlugin/I18nDownlodLogic.js

@@ -0,0 +1,266 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _webpack = require("webpack");
+
+var _I18nKeysIdentifer = _interopRequireDefault(require("./I18nKeysIdentifer"));
+
+var _hashUtils = require("./utils/hashUtils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * this plugin for the download i18n files
+ * So, if need to downoad i18n in browser this plugin handle that
+ *
+ *
+ * this plugin works
+ * how it works?
+ *  this plugin hook the requireEnsure method and we write logic for current compiled file download logic
+ *
+ * hinds:-
+ *  requireEnsure method was loader for all js chunk's ,
+ *  which means if we use dynamic import then this function will create script tag for that dynamic resource
+ *  so every dynamic js chunk will load by this function,
+ *  So we update this function with when  dynamic jschunk call the nour code also execute
+ *
+ * some thing  missing  in this definetion
+ *
+ */
+// import { REGEXP_HASH, REGEXP_CHUNKHASH } from './utils/hashUtils';
+const pluginName = 'DownloadLogicOfI18n'; // const pluginName = 'i18n-plugin';
+
+const MODULE_TYPE = 'json/i18n';
+
+const ltype = locale => `${MODULE_TYPE}/${locale}`;
+
+function hashesWithLength(hashes, length) {
+  const shortChunkHashMap = {};
+
+  for (let key of Object.keys(hashes)) {
+    if (typeof hashes[key] === 'string') {
+      shortChunkHashMap[key] = hashes.slice(0, length);
+    }
+  }
+
+  return shortChunkHashMap;
+}
+
+function getContentHashMaxLength(filenameTemplate) {
+  let length = 0;
+  let matches = filenameTemplate.match(_hashUtils.REGEXP_CONTENTHASH);
+
+  for (let match of matches) {
+    let tem = match.match(/\d+/);
+
+    if (tem) {
+      length = Math.max(parseInt(tem[0]), length);
+    } else {
+      length = 0;
+      break;
+    }
+  }
+
+  return length;
+}
+
+class I18nDownlodLogic {
+  constructor({
+    filenameTemplate,
+    publicPath,
+    localeVarName = 'document.documentElement.lang',
+    locales
+  }) {
+    this.locales = locales;
+    this.publicPath = publicPath;
+    this.options = {
+      filenameTemplate,
+      localeVarName
+    };
+  }
+
+  getShortContentHashes(chunk, hashLength) {
+    let allContenHashes = {};
+    const chunkMaps = chunk.getChunkMaps();
+    this.locales.forEach(locale => {
+      allContenHashes[locale] = chunkMaps.contentHash[ltype(locale)];
+    });
+
+    if (!length) {
+      return allContenHashes;
+    }
+
+    let shortContentHashMap = {};
+
+    for (const locale of this.locales) {
+      shortContentHashMap[locale] = hashesWithLength(allContenHashes[locale], hashLength);
+    }
+
+    return shortContentHashMap;
+  }
+
+  getI18nChunkObject(mainChunk) {
+    const obj = {};
+
+    for (const chunk of mainChunk.getAllAsyncChunks()) {
+      if (_I18nKeysIdentifer.default.isChunkHasI18n(chunk)) {
+        obj[chunk.id] = 1;
+      }
+    }
+
+    return obj;
+  }
+
+  addDownloadLogicOfI18nInMainTemplate(mainTemplate) {
+    mainTemplate.hooks.localVars.tap(pluginName, (source, mainChunk) => {
+      const chunkMap = this.getI18nChunkObject(mainChunk);
+
+      if (!Object.keys(chunkMap).length) {
+        return source;
+      }
+
+      return _webpack.Template.asString([source, '', '// object to store loaded I18N chunks', 'var installedI18nChunks = {', _webpack.Template.indent(mainChunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(',\n')), '};']);
+    });
+    mainTemplate.hooks.requireEnsure.tap(pluginName, (source, mainChunk, hash) => {
+      /**
+       * for Information this is tapped in mainTemplate ,
+       * So this hooks argument chunk is main chunk means entry chunk mostly.
+       * if any chunk has i18n then we must write our download  i18n logic,
+       */
+      const chunkMap = this.getI18nChunkObject(mainChunk);
+
+      if (!Object.keys(chunkMap).length) {
+        return source;
+      }
+      /**
+       *   chunkMaps has
+       *  @property  {Object} hash  [it has key  as chunk id and value as chunkHash ]
+       *  @property  {Object} name  [it has key  as chunk id and value as chunk name ]
+       */
+
+
+      const chunkMaps = mainChunk.getChunkMaps();
+      const {
+        crossOriginLoading
+      } = mainTemplate.outputOptions;
+      const {
+        filenameTemplate,
+        localeVarName = 'document.documentElement.lang'
+      } = this.options;
+      const i18nSrcPath = mainTemplate.getAssetPath(JSON.stringify(filenameTemplate).replace(/\[locale\]/gi, '"+ locale +"'), // "i18n-chunk/[locale]/[name].[chunkhash].js"
+      {
+        hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
+        hashWithLength: length => `" + ${mainTemplate.renderCurrentHashCode(hash, length)} + "`,
+        chunk: {
+          id: '" + chunkId + "',
+          hash: `" + ${JSON.stringify(chunkMaps.hash)}[chunkId] + "`,
+
+          hashWithLength(length) {
+            const shortChunkHashMap = hashesWithLength(chunkMaps.hash, length);
+            return `" + ${JSON.stringify(shortChunkHashMap)}[chunkId] + "`;
+          },
+
+          // contentHash: contentHashMap,
+          // contentHashWithLength: contentHashLengthMap,
+          contentHash: {
+            [MODULE_TYPE]: '" + contentHash + "'
+          },
+          contentHashWithLength: {
+            [MODULE_TYPE]: length => `" + contentHash.slice(0,${length}) + "`
+          },
+          name: `" + (${JSON.stringify(chunkMaps.name)}[chunkId]||chunkId) + "`
+        },
+        contentHashType: MODULE_TYPE
+      });
+      /** IDEA:
+       *      as my suggestion ignore this `jsop` approch,
+       *      Because json parse is faster then js parse.
+       *      my suggestion  is make ajax or fetch request
+       */
+
+      const buf = [];
+      /*
+        if (REGEXP_HASH.test(filenameTemplate)) {
+          buf.push(
+            `var hash = ${mainTemplate.renderCurrentHashCode(hash)};`
+          );
+        }
+        if (REGEXP_CHUNKHASH.test(filenameTemplate)) {
+          buf.push(`var chunkHashes = ${JSON.stringify(chunkMaps.hash)};`);
+        }
+        */
+
+      if ((0, _hashUtils.hasContentHash)(filenameTemplate)) {
+        const hashLength = getContentHashMaxLength(filenameTemplate);
+        const contentHashes = this.getShortContentHashes(mainChunk, hashLength);
+        buf.push(_webpack.Template.asString(['// all i18n files contentHash ', `var i18nContentHashes = ${JSON.stringify(contentHashes)};`, '', 'if (!i18nContentHashes[locale]) {', '  console.warn("this locale is "+locale + " not has support")', '  return;', '}', 'if (!i18nContentHashes[locale][chunkId]) {', '  console.warn("this chunkId is " + chunkId + " does not have \'"+locale+"\' locale chunk")', '  return;', '}']));
+        buf.push('var contentHash = i18nContentHashes[locale][chunkId]');
+      }
+
+      const hashUtils = _webpack.Template.asString(buf);
+
+      const publicPath = this.publicPath ? JSON.stringify(this.publicPath) : `${mainTemplate.requireFn}.p`;
+      return _webpack.Template.asString([source, `
+(function() {
+  // ${pluginName} I18N loading
+  var i18nChunks = ${JSON.stringify(chunkMap)};
+  var locale = ${localeVarName};
+  // ${pluginName} I18N hasehes
+  ${hashUtils}
+  if(installedI18nChunks[chunkId]) {
+    promises.push(installedI18nChunks[chunkId]);
+  } else if(installedI18nChunks[chunkId] !== 0 && i18nChunks[chunkId]) {
+    promises.push(installedI18nChunks[chunkId] = new Promise(function(resolve, reject) {
+      var srcPath = (${i18nSrcPath});
+      ${'' // TODO: I think this is the area for download chunk of i18n we can
+      //  change mainTemplate.requireFn as our cdn server urls !!!
+      //  and we can change the i18n download logic here
+      }
+      var fullsrcPath = ${publicPath} + srcPath;
+      var existingLinkTags = document.getElementsByTagName("script");
+      for(var i = 0; i < existingLinkTags.length; i++) {
+        var tag = existingLinkTags[i];
+        var dataSrc = tag.getAttribute("data-src") || tag.getAttribute("src");
+        if(dataSrc === srcPath || dataSrc === fullsrcPath){ return resolve();}
+      }
+      var scriptTag = document.createElement("script");
+      scriptTag.onload = resolve;
+      scriptTag.onerror = function(event) {
+        var request = event && event.target && event.target.src || fullsrcPath;
+        var err = new Error("Loading I18N chunk " + chunkId + " failed.\\n(" + request + ")");
+        err.code = "I18N_CHUNK_LOAD_FAILED";
+        err.request = request;
+        delete installedI18nChunks[chunkId];
+        scriptTag.parentNode.removeChild(scriptTag);
+        reject(err);
+      };
+      ${mainTemplate.requireFn}.nc && scriptTag.setAttribute("nonce", ${mainTemplate.requireFn}.nc);
+      scriptTag.src = fullsrcPath;
+      ${crossOriginLoading ? `if (scriptTag.src.indexOf(window.location.origin + '/') !== 0) {
+          scriptTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};
+        }` : ''}
+      document.body.appendChild(scriptTag);
+    }).then(function() {
+      installedI18nChunks[chunkId] = 0;
+    }));
+  }
+})()`]);
+    });
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      const {
+        mainTemplate
+      } = compilation;
+      this.addDownloadLogicOfI18nInMainTemplate(mainTemplate);
+    });
+  }
+
+}
+
+exports.default = I18nDownlodLogic;

package/lib/plugins/I18nSplitPlugin/I18nFilesEmitter.js

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _webpackSources = require("webpack-sources");
+
+var _utils = require("./utils");
+
+var _getI18nKeysFormModules = _interopRequireDefault(require("./utils/getI18nKeysFormModules"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * this plugin was creating the chunk specific i18n chunk's.
+ */
+// this plugin's kick  starter is apply method
+const pluginName = 'I18nFilesEmitter';
+const MODULE_TYPE = 'json/i18n';
+
+const i18ntype = locale => `${MODULE_TYPE}/${locale}`;
+
+class I18nFilesEmitter {
+  constructor({
+    allI18nObject,
+    i18nManifestFileName,
+    filenameTemplate,
+    locales,
+    jsonpFunc
+  }) {
+    this.locales = locales;
+    this.allI18nObject = allI18nObject;
+    this.filenameTemplate = filenameTemplate; // this.filenameTemplate =  "i18n-chunk/[locale]/[name].js"
+
+    this.jsonpFunc = jsonpFunc;
+    this.prevHashes = {};
+    this.i18nManifestFileName = i18nManifestFileName;
+  }
+
+  emitAsset(compilation, filename, source, info) {
+    // NOTE: info support  available since webpack v4.40.0 https://webpack.js.org/api/stats/#asset-objects
+    if (!compilation.emitAsset) {
+      compilation.assets[filename] = source;
+    } else {
+      compilation.emitAsset(filename, source, info);
+    }
+  } // this method for create object and assign value for i18nkeys
+
+
+  getI18nObjectByLocale(i18nKeys, locale) {
+    const data = {};
+    i18nKeys.forEach(key => {
+      data[key] = this.allI18nObject[locale][key];
+    });
+    return data;
+  }
+
+  getTemplateString(i18nKeys, locale) {
+    let i18nObject = this.getI18nObjectByLocale(i18nKeys, locale);
+    return `${this.jsonpFunc}(${(0, _utils.jsonToString)(i18nObject)});`; // return `${this.jsonpFunc}(JSON.parse(${JSON.stringify(jsonToString(i18nObject))}));`;
+  }
+
+  renderI18nLocaleChunk(chunk, locale, i18nKeys) {
+    // renderI18nLocaleChunk(chunk, locale, i18nKeys, compilation) {
+    const filenameTemplate = this.filenameTemplate.replace(/\[locale\]/g, locale);
+    const pathOptions = {
+      chunk,
+      contentHashType: i18ntype(locale)
+    };
+    return {
+      render: () => new _webpackSources.RawSource(this.getTemplateString(i18nKeys, locale)),
+      filenameTemplate,
+      pathOptions,
+      identifier: `${pluginName}.${chunk.id}.${locale}`,
+      hash: chunk.contentHash[i18ntype(locale)]
+    };
+  }
+
+  emitI18nFilesForChunk(chunk, compilation) {
+    const i18nKeys = (0, _getI18nKeysFormModules.default)(chunk.modulesIterable);
+    const manifestForChunk = {
+      assets: {},
+      hasI18n: false,
+      hasChanges: false
+    };
+
+    if (!i18nKeys.length) {
+      // why  it is not checked as 0
+      return manifestForChunk;
+    }
+
+    manifestForChunk.hasI18n = true; // const locales  = ['en_US'];
+
+    this.locales.forEach(locale => {
+      const result = this.renderI18nLocaleChunk(chunk, locale, i18nKeys, compilation);
+      const {
+        filenameTemplate,
+        pathOptions,
+        render,
+        identifier,
+        hash
+      } = result;
+      const filePath = compilation.getPath(filenameTemplate, pathOptions);
+      manifestForChunk.assets[locale] = filePath;
+
+      if (this.prevHashes[identifier] === hash) {
+        return;
+      }
+
+      manifestForChunk.hasChanges = true;
+      this.prevHashes[identifier] = hash;
+      this.emitAsset(compilation, filePath, render(), {
+        locale,
+        chunkId: chunk.id,
+        chunkName: chunk.name
+      }); // compilation.assets[filePath] = render();
+    });
+    return manifestForChunk;
+  }
+
+  emitI18nAssert(compilation) {
+    let manifest = {};
+    let needEmitManifest = false;
+    compilation.chunks.forEach(chunk => {
+      const manifestForChunk = this.emitI18nFilesForChunk(chunk, compilation);
+
+      if (manifestForChunk.hasI18n) {
+        manifest[chunk.id] = manifestForChunk.assets;
+        needEmitManifest = needEmitManifest || manifestForChunk.hasChanges;
+      }
+    });
+
+    if (needEmitManifest) {
+      const manifestSource = new _webpackSources.RawSource(JSON.stringify(manifest));
+      this.emitAsset(compilation, this.i18nManifestFileName, manifestSource, {
+        desc: 'this file is has chunks-locales-assets mapping'
+      });
+    }
+  }
+
+  apply(compiler) {
+    /*
+      compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+        compilation.mainTemplate.hooks.renderManifest.tap(
+          pluginName,
+          (result, { chunk }) => {
+            this.renderChunk(result, compilation, chunk);
+          }
+        );
+           compilation.chunkTemplate.hooks.renderManifest.tap(
+          pluginName,
+          (result, { chunk }) => {
+            this.renderChunk(result, compilation, chunk);
+          }
+        );
+      });
+      */
+    // this below hook was tapped for create asssets(file) for chunk specific i18nChunk Files
+    compiler.hooks.emit.tap(pluginName, compilation => {
+      this.emitI18nAssert(compilation);
+    });
+  }
+  /*
+    renderChunk(result, compilation, chunk) {
+      const i18nKeys = getI18nKeysFormModules(chunk.modulesIterable);
+      // TODO: need to discuss with vimal ji can we chose this place for add i18n locale files ????
+      // IDEA:  we chose this place for add i18n locale files ????
+      if (i18nKeys.length > 0) {
+        Object.keys(this.allI18nObject).forEach(locale => {
+          result.push(
+            this.renderI18nLocaleChunk(chunk, locale, i18nKeys, compilation)
+          );
+        });
+      }
+    }
+    */
+
+
+}
+
+exports.default = I18nFilesEmitter;

package/lib/plugins/I18nSplitPlugin/I18nKeysIdentifer.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("./utils");
+
+var _I18nDependency = require("./I18nDependency");
+
+var _NullFactory = _interopRequireDefault(require("webpack/lib/NullFactory"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const pluginName = 'I18nKeysIdentifer';
+/**
+ * this plugin search the i18 keys and make it as I18nDependency.
+ * how it works?
+ *  this plugin get jsResourceI18nKeys in constructor.
+ *  we walk throught the js files AST
+ *      if any string literal in that AST is in jsResourceI18nKeys then  we consider that string as I18n key
+ *  after the walk of AST we get some I18n keys
+ *  then we make it as I18nDependency.
+ */
+
+class I18nKeysIdentifer {
+  constructor(jsResourceI18nKeys) {
+    this.jsResourceI18nKeys = jsResourceI18nKeys;
+  }
+
+  defineConfigarationForI18nDependency(compilation) {
+    compilation.dependencyFactories.set(_I18nDependency.I18nDependency, new _NullFactory.default());
+    compilation.dependencyTemplates.set(_I18nDependency.I18nDependency, new _I18nDependency.I18nDependencyTemplate());
+  }
+
+  addI18nDependency(module, i18nKeys) {
+    const identifier = `i18n ${module.resource}`;
+    const dep = new _I18nDependency.I18nDependency({
+      identifier,
+      i18nKeys
+    }, module.context, 0);
+    module.addDependency(dep); // console.log('module', i18nKeys, identifier);
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, (compilation, params) => {
+      // this below  hook was tapped for  we use I18nDependency
+      // so we must define module factory for I18nDependency
+      // and we must define how  it  import statement look like I18nDependencyTemplate
+      this.defineConfigarationForI18nDependency(compilation); // handler for parser
+
+      let handler = parser => {
+        parser.hooks.program.tap(pluginName, (ast, commmets) => {
+          const {
+            module
+          } = parser.state; //
+
+          if (!(module && /\.jsx?$/.test(module.resource))) {
+            return;
+          } // i18n grep proper contract regex
+
+
+          let i18nKeys = (0, _utils.collectI18nKeysfromAST)(ast, this.jsResourceI18nKeys);
+          i18nKeys = i18nKeys.concat( // i18n grep proper contract regex
+          (0, _utils.collectI18nKeysfromComments)(commmets, this.jsResourceI18nKeys));
+
+          if (i18nKeys.length) {
+            // console.log(
+            //   'i18nKeys.length',
+            //   module.resource,
+            //   i18nKeys.length < 5 ? i18nKeys : i18nKeys.length
+            // );
+            this.addI18nDependency(module, i18nKeys);
+          }
+        });
+      }; // this below  hook was tapped for collect I18n Key from files and add as Deppenensy
+
+
+      const factory = params.normalModuleFactory;
+      factory.hooks.parser.for('javascript/auto').tap(pluginName, handler);
+      factory.hooks.parser.for('javascript/dynamic').tap(pluginName, handler);
+    });
+  }
+
+}
+
+exports.default = I18nKeysIdentifer;
+
+I18nKeysIdentifer.isChunkHasI18n = function (chunk) {
+  for (const module of chunk.modulesIterable) {
+    for (const dep of module.dependencies) {
+      if (dep instanceof _I18nDependency.I18nDependency) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};

package/lib/plugins/I18nSplitPlugin/I18nSplit.md

@@ -0,0 +1,86 @@
+# I18n Split As Chunks Plugin
+
+generaly we have manage our all I18n keys and values as language specific i18n files and then we download all i18n in initial page load.
+
+### what is the problem with this?.
+the problem is i18n file keep get's grown it will affect the the inital page load and critial rendering path.
+So, We have decide to create a plugin for split i18n per chunk's of js vise.
+
+### what is i18n split?
+  it is like code split for i18n.
+  we will collect i18n from js chunk and we will create separate i18n chunk per js chunk,
+   with this we already load Js chunks are on demand and now we also download i18n also ondemand with this the initial and forthere actions.
+  when js download's we will download i18n with it.  
+
+###  How to we going to i18n split?
+  we will read the js chunk and collect I18n keys form it,
+  then we will create i18n chunk files with these used keys.
+
+### how do you collect i18n keys from js files?
+  we will traverse the js file's AST (static analysis) and find i18 keys,
+  we will concider all string which is in jsResource file as i18n keys.
+  and you can tell dynamic i18n key by js comments,
+  Like Below:- 
+  ```js
+  fetch("tickets?view=view1").then(data => {
+    // I18n support.ticketsEmpty
+    // I18n support.viewNotFount
+    // I18n support.permissionDenied
+    let text = getI18nValue(data.i18nkey);
+  })
+  ```
+
+### is there any posiblity for unwanted keys in some chunk?
+  Yes, there is two posiblity
+  1. js comment , if you write js comment but it is  not needed then it will be add into i18n chunk
+    `To Resolve` we currently do not have perfect idea for this, But we can check this  by chunk size limit.
+    `idea's will be welcome`
+  2. like we said "we will concider all string which is in jsResource file as i18n keys",
+     So if you use string not for i18n but it was in jsResource then it will be add into i18n chunk.
+     `To Resolve` this  problem we can use some  kinda prefix or something. 
+
+### how do we downlowd and give to app?
+  we have over write defualt webpack requireEnsure (every dynamic chunk requests are done by that function) function.
+  and we parlarly dowload i18n files. and we ask jsonFunction, to our plugin.
+So we send i18nkeys , when it was download,
+you must store all i18n keys, we give asycrnsly by that function download in that patticular.
+so you must store and update (like append or assign) everytime that function call.
+
+### how to use this feature?
+  to use this feature use have give the below oprtions
+  `package.json`
+  ```json
+  {
+    /// ...some things
+    "react-cli": {
+      //  ...some things
+      "i18n": {   
+        "chunkSplitEnable": true,
+        "jsResource": "./deskapp/properties/JSResources.properties",
+        "localeVarName": "window.userInfo.langCode",
+        "jsonpFunc": "window.loadI18nChunk",
+        "templateLabel": "{{--user-locale}}",// this is  for html template i18n file path locate template
+        "propertiesFolder": "./deskapp/properties"
+      },
+      //  ...some things
+    }
+  }
+  ```
+
+
+<!-- not need below -->
+<!-- 
+
+### is there any problems with static analysis?
+  Yes, 
+
+### how do we use dynamic i18n key?
+
+  and we will download i18n file with 
+
+  and when js chunk download's then we will download i18n as need.
+  we all know in our app we loading i18n as one single big file for each locale(language).
+  we are going to split i18n as per js chunk, and when js chunk download's then we will download i18n as need. 
+  
+  
+  -->

package/lib/plugins/I18nSplitPlugin/README.md

@@ -0,0 +1,25 @@
+# I18n Split As Chunks Plugin
+
+generaly we have manage our all I18n keys and values as language specific i18n files and then we download all i18n in initial page load.
+
+Ok, what is the problem with this?.
+the problem is i18n file keep get's grown it will affect the the inital page load and critial rendering path.
+So, We have decide to create a plugin for split i18n per chunk's of js vise, Which mean we diside to create for each js chunk has its own i18n chunks, with this we already load Js chunks are on demand and now we also download i18n also ondemand with this the initial and forthere actions.
+
+Ok, How to you do this thing?
+we have read the js chunk and collect I18n keys what are used in that chunk and we will create i18n chunk files with only used key.
+
+Ok, How do you collect that keys?
+we now have two expremental statrge to collect I18n keys.
+
+1. we read jsResource.properties (or all keys I18n file) then we walk this AST of js and we collect all string which is jsResource.properties.
+2. for dynamic we discide to use comment some thing like
+   `// I18n support.tickekt.email.notvalid`
+
+ok, how do you downlowd and give to app?
+we have over write defualt webpack require ensure function.
+So every dynamic chunk requset are done by that function.
+So we parlarly dowload i18n files. and we ask jsonFunction, to our plugin.
+So we send i18nkeys , when it was download,
+you must store all i18n keys, we give asycrnsly by that function download in that patticular.
+so you must store and update (like append or assign) everytime that function call.