@zohodesk/react-cli 0.0.1-beta.16 → 0.0.1-beta.160

package/lib/plugins/I18nSplitPlugin/index.js

@@ -0,0 +1,185 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("./utils");
+
+var _webpack = require("webpack");
+
+var _I18nKeysIdentifer = _interopRequireDefault(require("./I18nKeysIdentifer"));
+
+var _I18nFilesEmitter = _interopRequireDefault(require("./I18nFilesEmitter"));
+
+var _I18nDownlodLogic = _interopRequireDefault(require("./I18nDownlodLogic"));
+
+var _getI18nKeysFormModules = _interopRequireDefault(require("./utils/getI18nKeysFormModules"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// #region initial
+
+/**
+ * @TODO:
+ *  [?] add comment line options for properties file and get all keys form property file do right way to genarate them
+ *  [?] need to discuss with collectI18n Keys with js comment need to conform "what is the comment? "
+ */
+
+/**
+ * Notes: this plugin has done below works
+ *  1. collect I18n Keys from js files and make it as Depenencies
+ *  2. we create file(asset) for chunk specific i18nChunk Files
+ *  3. create hash for the specific i18nChunk Files
+ *  4. write logic to requireEnsure method for dowlod I18n chunk download dynamicaly
+ *  5. create manifest.json file which has the mapping of  chunk-locales-i18nChunkFile
+ *       for the external referrece.
+ * Hints :-
+ *   - file  means your machine files
+ *   - asset means that also  file but that will create by webpack after build
+ */
+// const getI18nLocales = require('./utils/getI18nLocales');
+// const { ConcatSource, SourceMapSource, OriginalSource } = sources;
+const {
+  createHash
+} = _webpack.util;
+const MODULE_TYPE = 'json/i18n';
+
+const i18ntype = locale => `${MODULE_TYPE}/${locale}`;
+
+const pluginName = 'i18n-plugin';
+/**
+ * @typedef I18nPluginOptions
+ * @property {String} filenameTemplate this was template for i18n chunk
+ * @property {String} jsResource this was path for jsResource i18n file
+ * @property {String} propertiesFolder this was path for propertiesFolder i18n file
+ * @property {Boolean} disableDefault this option for disable defulat value  for i18n keys, means if the language file does not have some key we don't give jsResource value
+ * @property {String} i18nManifestFileName this was ouput path for i18n manifest.
+ * @property {String} jsonpFunc this was function name, we will  call  that function everytime i18n chunk download.
+ * @property {String} localeVarName this was variable name, we will call that function everytime i18n chunk download.
+ * 
+ */
+
+class I18nPlugin {
+  constructor(options = {}) {
+    // initialize options
+    this.options = Object.assign({
+      filenameTemplate: 'i18n/[locale]/[name].i18n.js'
+    }, options);
+    const {
+      filenameTemplate,
+      publicPath,
+      localeVarName,
+      i18nManifestFileName,
+      disableDefault,
+      jsResource,
+      propertiesFolder,
+      jsonpFunc
+    } = this.options;
+    this.publicPath = publicPath; // gethere i18n keys and values
+
+    this.jsResourceI18nKeys = jsResource ? (0, _utils.getPropertiesAsJSON)(jsResource) : {};
+    this.allI18nObject = (0, _utils.getAllI18n)({
+      folderPath: propertiesFolder,
+      disableDefault,
+      jsResourceI18nKeys: this.jsResourceI18nKeys
+    }); // initialize base data's and plugis
+
+    this.locales = Object.keys(this.allI18nObject);
+    this.i18nKeysIdentifer = new _I18nKeysIdentifer.default(this.jsResourceI18nKeys);
+    this.i18nFilesEmitter = new _I18nFilesEmitter.default({
+      allI18nObject: this.allI18nObject,
+      locales: this.locales,
+      i18nManifestFileName,
+      filenameTemplate,
+      jsonpFunc
+    });
+    this.i18nDownlodLogic = new _I18nDownlodLogic.default({
+      filenameTemplate,
+      publicPath,
+      locales: this.locales,
+      localeVarName
+    });
+  }
+
+  maintainHashForAllI18nAssets(compilation) {
+    /**
+     * we write chunkHash logic inside of our plugin Because we only add Dependency not Module.
+     *  So we need to update chunkHash for our assets
+     *  and we not able tell with just Modules.
+     *  Because, if we add Module for the Depenentcy then that module must has some hash.
+     *  But our I18n Hash is no module specific it was chunk specific,
+     *  that's why we do the stuf in the chunkHash hook.
+     */
+    compilation.hooks.chunkHash.tap(pluginName, (chunk, chunkHash) => {
+      const {
+        outputOptions
+      } = compilation;
+      const {
+        hashFunction,
+        hashDigest,
+        hashDigestLength
+      } = outputOptions;
+      const i18nKeys = (0, _getI18nKeysFormModules.default)(chunk.modulesIterable);
+
+      if (!i18nKeys.length) {
+        return;
+      }
+
+      const {
+        contentHash
+      } = chunk; // contentHash = {
+      //   javascript: 'abcd2938',
+      //   'css/mini-extract': 'askdijasod'
+      // };
+
+      this.locales.forEach(locale => {
+        const contentHashStr = createHash(hashFunction).update(this.i18nFilesEmitter.getTemplateString(i18nKeys, locale)).digest(hashDigest);
+        contentHash[i18ntype(locale)] = contentHashStr.substring(0, hashDigestLength);
+        chunkHash.update(contentHashStr);
+      });
+    });
+  }
+
+  apply(compiler) {
+    this.i18nKeysIdentifer.apply(compiler);
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      // this below  hook was tapped for hash for the specific i18nChunk Files and write logic to requireEnsure
+      this.maintainHashForAllI18nAssets(compilation); // const { mainTemplate } = compilation;
+      // this.addDownloadLogicOfI18nInMainTemplate(mainTemplate);
+    });
+    this.i18nFilesEmitter.apply(compiler);
+    this.i18nDownlodLogic.apply(compiler);
+  }
+
+}
+/*
+        // TODO:  need to reimplement this logic
+        // NOTE:  this logic for split all content hash per mani chunk
+        // like add chunk content hash to  main locale i18n file
+
+        // let isEntry = chunk.name === this.options.mainChunkName;
+        // if (chunk.name === 'main' && chunk.hasEntryModule()) {
+        if (isEntry) {
+          const hashSource = new ConcatSource();
+        const dummyChunk = new chunk.constructor();
+          hashSource.add('// it wil be I18N file hash');
+          const templateHooks = compilation.chunkTemplate.hooks;
+          let c = templateHooks.render.call(
+            templateHooks.module.call(
+              hashSource,
+              dummyChunk,
+              compilation.moduleTemplate.javascript,
+              compilation.dependencyTemplates
+            ),
+            dummyChunk,
+            compilation.moduleTemplate.javascript,
+            compilation.dependencyTemplates
+          );
+          console.log('entry, ', c, hashSource.toString());
+        }
+        */
+
+
+exports.default = I18nPlugin;

package/lib/plugins/I18nSplitPlugin/utils/collectI18nKeys.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectI18nKeysfromAST = collectI18nKeysfromAST;
+exports.collectI18nKeysfromComments = collectI18nKeysfromComments;
+
+const {
+  walk
+} = require('estree-walker');
+
+function collectI18nKeysfromAST(ast, allI18n) {
+  let i18nKeys = {};
+  walk(ast, {
+    enter: function (node) {
+      if (node.type === 'Literal') {
+        if ((node.raw[0] === '\'' || node.raw[0] === '"') && Object.hasOwnProperty.call(allI18n, node.value)) {
+          i18nKeys[node.value] = allI18n[node.value];
+        }
+      }
+    }
+  });
+  return Object.keys(i18nKeys);
+}
+
+const prefixI18nComment = 'I18N';
+const prefixI18nComment1 = 'dynamic-i18n-key';
+
+function getI18nKeysFromComment(comment) {
+  let commentString = comment.value.trim();
+  let i18nKeyStr;
+
+  if (commentString.startsWith(prefixI18nComment)) {
+    i18nKeyStr = commentString.slice(prefixI18nComment.length).trim();
+  } else if (commentString.startsWith(prefixI18nComment1)) {
+    i18nKeyStr = commentString.slice(prefixI18nComment1.length).trim();
+  }
+
+  if (!i18nKeyStr) {
+    return [];
+  }
+
+  const i18nKeys = i18nKeyStr.split(',');
+  return i18nKeys;
+} // export function fromComments(comments, allI18n) {
+
+
+function collectI18nKeysfromComments(comments, allI18n) {
+  // TODO: need to implement
+  let i18nKeys = {};
+
+  for (let comment of comments) {
+    let keys = getI18nKeysFromComment(comment);
+
+    for (let key of keys) {
+      if (key && allI18n[key]) {
+        i18nKeys[key] = allI18n[key];
+      }
+    }
+  }
+
+  return Object.keys(i18nKeys);
+}

package/lib/plugins/I18nSplitPlugin/utils/getI18nFileUrlPathTemplate.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getI18nFileUrlPathTemplate = getI18nFileUrlPathTemplate;
+
+function getI18nFileUrlPathTemplate(compilation, chunk, filenameTemplate, localeTemplate) {
+  let urlpath = compilation.getPath(filenameTemplate, {
+    chunk
+  });
+  return urlpath.replace('[locale]', localeTemplate);
+}

package/lib/plugins/I18nSplitPlugin/utils/getI18nKeysFormModules.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getI18nKeysFormModules;
+
+var _I18nDependency = require("../I18nDependency");
+
+function getI18nKeysFormModules(modules) {
+  const i18nTemObj = {};
+
+  for (let m of modules) {
+    for (let dep of m.dependencies) {
+      if (!(dep instanceof _I18nDependency.I18nDependency)) {
+        continue;
+      }
+
+      for (const key of dep.i18nKeys) {
+        i18nTemObj[key] = 1;
+      }
+    }
+  }
+
+  return Object.keys(i18nTemObj);
+}

package/lib/plugins/I18nSplitPlugin/utils/hashUtils.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasContentHash = hasContentHash;
+exports.getShortI18nAssets = getShortI18nAssets;
+exports.REGEXP_CONTENTHASH = void 0;
+
+var _urlConcat = require("../../../utils/urlConcat");
+
+// export const REGEXP_CHUNKHASH = /\[chunkhash(?::(\d+))?\]/gi;
+// export const REGEXP_HASH = /\[hash(?::(\d+))?\]/gi;
+// export const REGEXP_NAME = /\[name\]/gi;
+// export const REGEXP_PLACEHOLDERS = /\[(name|id|chunkhash)\]/gi;
+// TODO: want to choose file type for i18n load
+const REGEXP_CONTENTHASH = /\[contenthash(?::(\d+))?\]/gi;
+exports.REGEXP_CONTENTHASH = REGEXP_CONTENTHASH;
+
+function hasContentHash(filenameTemplate) {
+  return REGEXP_CONTENTHASH.test(filenameTemplate);
+}
+
+function getShortI18nAssets(chunks, i18nManifest, publicPathPrefix) {
+  const i18nAssets = {};
+  chunks.forEach(chunk => {
+    const i18nFiles = i18nManifest[chunk.id];
+
+    if (i18nFiles) {
+      Object.keys(i18nFiles).forEach(locale => {
+        if (!i18nAssets[locale]) {
+          i18nAssets[locale] = [];
+        }
+
+        i18nAssets[locale].push((0, _urlConcat.urlConcat)(publicPathPrefix, i18nFiles[locale]));
+      });
+    }
+  });
+  return i18nAssets;
+}

package/lib/plugins/I18nSplitPlugin/utils/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _collectI18nKeys = require("./collectI18nKeys");
+
+Object.keys(_collectI18nKeys).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _collectI18nKeys[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _collectI18nKeys[key];
+    }
+  });
+});
+
+var _propertiesUtils = require("./propertiesUtils");
+
+Object.keys(_propertiesUtils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _propertiesUtils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _propertiesUtils[key];
+    }
+  });
+});

package/lib/plugins/I18nSplitPlugin/utils/propertiesUtils.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPropertiesAsJSON = getPropertiesAsJSON;
+exports.getAllI18n = getAllI18n;
+exports.jsonToString = jsonToString;
+
+var _fs = require("fs");
+
+var _path = require("path");
+
+function isComment(line) {
+  return line[0] === '#';
+}
+
+function getPropertiesAsJSON(filePath) {
+  try {
+    const data = (0, _fs.readFileSync)(filePath);
+    let source = data.toString();
+    const i18nObj = {};
+    source.split(/\r?\n\r?/).forEach(fline => {
+      const line = fline.trim();
+
+      if (!line || isComment(line)) {
+        return;
+      }
+
+      const ind = line.indexOf('=');
+      const key = line.slice(0, ind).replace(/\\ /g, ' ');
+      const value = line.slice(ind + 1);
+
+      if (key && value) {
+        i18nObj[key] = value;
+      }
+    }, {});
+    return i18nObj;
+  } catch (err) {
+    return {};
+  }
+}
+
+function getLang(file) {
+  let underScoreIndex = file.indexOf('_');
+  let language = 'en_US';
+
+  if (underScoreIndex !== -1) {
+    language = file.substring(underScoreIndex + 1);
+    language = language.slice(0, language.indexOf('.'));
+  }
+
+  return language;
+}
+
+function getAllI18n({
+  folderPath,
+  disableDefault,
+  jsResourceI18nKeys,
+  exclude = /^[^_]+$/,
+  include = /\.properties$/
+}) {
+  try {
+    const files = (0, _fs.readdirSync)(folderPath, 'utf8');
+    const allLangI18n = {};
+    const context = (0, _path.join)(process.cwd(), folderPath);
+    files.forEach(file => {
+      const filePath = (0, _path.join)(context, file);
+
+      if (exclude.test(filePath) || !include.test(filePath)) {
+        // console.log('exclude', filePath);
+        return;
+      } // console.log('include', filePath);
+
+
+      const i18n = getPropertiesAsJSON(filePath);
+      allLangI18n[getLang(file)] = disableDefault ? i18n : Object.assign({}, jsResourceI18nKeys, i18n);
+    });
+    return allLangI18n;
+  } catch (err) {
+    // console.log(err);
+    return {};
+  }
+}
+
+function jsonToString(json, keySeperator) {
+  let str = '{';
+  let keys = Object.keys(json);
+  keys.forEach((key, i) => {
+    let value = json[key];
+
+    if (!value) {
+      return;
+    }
+
+    str += `"${keySeperator ? key.replace(/(\.|\\(\s+))/g, keySeperator) : key}":"${value.replace(/.?"/g, match => {
+      if (match[0] === '\\') {
+        return match;
+      } else if (match.length === 2) {
+        return `${match[0]}\\${match[1]}`;
+      }
+
+      return `\\${match}`;
+    }).replace(/(\r\n|\n|\r)/g, '')}"`;
+
+    if (i !== keys.length - 1) {
+      str += ',';
+    }
+  });
+  str += '}';
+  return str;
+}

package/lib/plugins/ManifestPlugin.js

@@ -1,89 +1,78 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _path = _interopRequireDefault(require("path"));
 
-var _path = require('path');
-
-var _path2 = _interopRequireDefault(_path);
-
-var _webpackSources = require('webpack-sources');
+var _webpackSources = require("webpack-sources");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+let filenameParser = filename => {
+  let filepaths = filename.split('/');
+  let hashedName = filepaths[filepaths.length - 1];
 
-var filenameParser = function filenameParser(filename) {
-  var filepaths = filename.split('/');
-  var hashedName = filepaths[filepaths.length - 1];
+  let {
+    name,
+    ext
+  } = _path.default.parse(hashedName);
 
-  var _path$parse = _path2.default.parse(hashedName),
-      name = _path$parse.name,
-      ext = _path$parse.ext;
-
-  var nameparts = name.split('.');
+  let nameparts = name.split('.');
   return {
     name: nameparts.slice(0, nameparts.length - 1).join('.') + ext,
-    hashedName: hashedName
+    hashedName
   };
 };
 
-var ManifestPlugin = function () {
-  function ManifestPlugin(options) {
-    _classCallCheck(this, ManifestPlugin);
-
+class ManifestPlugin {
+  constructor(options) {
     this.options = options;
   }
 
-  _createClass(ManifestPlugin, [{
-    key: 'apply',
-    value: function apply(compiler) {
-      var _this = this;
-
-      compiler.hooks.emit.tap('PublicPathChangePlugin', function (compilation) {
-        var stats = compilation.getStats().toJson();
-
-        var manifest = compilation.chunks.reduce(function (files, chunk) {
-          return chunk.files.reduce(function (files, name) {
-            var _filenameParser = filenameParser(name),
-                filename = _filenameParser.name,
-                hashedName = _filenameParser.hashedName;
-
-            if (chunk.canBeInitial()) {
-              if (!files.entryFiles) {
-                files.entryFiles = {};
-              }
-              files.entryFiles[filename] = hashedName;
-            }
-            files[filename] = hashedName;
-            return files;
-          }, files);
-        }, {});
-
-        manifest = stats.assets.reduce(function (files, asset) {
-          var isEntryAsset = asset.chunks.length > 0;
-          if (isEntryAsset) {
-            return files;
+  apply(compiler) {
+    compiler.hooks.emit.tap('PublicPathChangePlugin', compilation => {
+      let stats = compilation.getStats().toJson();
+      let manifest = compilation.chunks.reduce((files, chunk) => chunk.files.reduce((files, name) => {
+        let {
+          name: filename,
+          hashedName
+        } = filenameParser(name);
+
+        if (chunk.canBeInitial()) {
+          if (!files.entryFiles) {
+            files.entryFiles = {};
           }
-          var filename = asset.name;
 
-          var _filenameParser2 = filenameParser(filename),
-              name = _filenameParser2.name,
-              hashedName = _filenameParser2.hashedName;
+          files.entryFiles[filename] = hashedName;
+        }
 
-          files[name] = hashedName;
-          return files;
-        }, manifest);
+        files[filename] = hashedName;
+        return files;
+      }, files), {});
+      manifest = stats.assets.reduce((files, asset) => {
+        let isEntryAsset = asset.chunks.length > 0;
 
-        compilation.assets[_this.options.fileName] = new _webpackSources.RawSource(JSON.stringify(manifest));
-      });
-    }
-  }]);
+        if (isEntryAsset) {
+          return files;
+        }
+
+        let {
+          name: filename
+        } = asset;
+        let {
+          name,
+          hashedName
+        } = filenameParser(filename);
+        files[name] = hashedName;
+        return files;
+      }, manifest);
+      compilation.assets[this.options.fileName] = new _webpackSources.RawSource(JSON.stringify(manifest));
+    });
+  }
 
-  return ManifestPlugin;
-}();
+}
 
 exports.default = ManifestPlugin;