@zohodesk/react-cli 1.1.17 → 1.1.18-exp.1

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/utils/collectI18nKeys.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectI18nKeysfromAST = collectI18nKeysfromAST;
+exports.collectI18nKeysfromComments = collectI18nKeysfromComments;
+
+var _estreeWalker = require("estree-walker");
+
+// const { walk } = require('estree-walker');
+function collectI18nKeysfromAST(ast, allI18n) {
+  let i18nKeys = {};
+  (0, _estreeWalker.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/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/utils/hashUtils.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.REGEXP_CONTENTHASH = void 0;
+exports.hasContentHash = hasContentHash;
+// 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) {
+  REGEXP_CONTENTHASH.lastIndex = 0;
+  return REGEXP_CONTENTHASH.test(filenameTemplate);
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_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/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/utils/propertiesUtils.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAllI18n = getAllI18n;
+exports.getPropertiesAsJSON = getPropertiesAsJSON;
+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);
+    const 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 {};
+  }
+} // TODO: need to make it as custom option and  dynamic
+
+
+function getLang(file) {
+  const 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)) {
+        return;
+      }
+
+      const i18n = getPropertiesAsJSON(filePath);
+      allLangI18n[getLang(file)] = disableDefault ? i18n : { ...jsResourceI18nKeys,
+        ...i18n
+      };
+    });
+    return allLangI18n;
+  } catch (err) {
+    console.log(err);
+    return {};
+  }
+}
+
+function jsonToString(json, keySeperator) {
+  let str = '{';
+  const keys = Object.keys(json);
+  keys.forEach((key, i) => {
+    const value = json[key];
+
+    if (!value) {
+      return;
+    }
+
+    str += `"${keySeperator ? key.replace(/(\.|\\(\s+))/g, keySeperator) : key}":"${value.replace(/.?"/g, match => {
+      if (match[0] === '\\') {
+        return match;
+      }
+
+      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;
+}
+/**
+ * not useable due to special charector
+ * 
+      return `{${Object.keys(data).map(key =>  `"${key}": "${data[key]}"`).join(",")}}`
+      // return JSON.stringify(data);
+      let str = "{";
+      for (const key of Object.keys(data)) {
+        str+= `"${key}": "${data[key]}",`
+      }
+      str+="}";
+      return str;
+ */

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/RTLSplitPlugin.js

@@ -0,0 +1 @@
+"use strict";

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/RtlSplitPlugin/OverwriteCssPathForRTL.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+
+var _JavascriptModulesPlugin = _interopRequireDefault(require("webpack/lib/javascript/JavascriptModulesPlugin"));
+
+var _replaceCssDirTemplate = require("./replaceCssDirTemplate");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// const HtmlWebpackPlugin = require('html-webpack-plugin');
+// import { JavascriptModulesPlugin } from 'webpack';
+const pluginName = 'OverwriteCssPathForRTL';
+
+class OverwriteCssPathForRTL {
+  constructor(options = {
+    dirVarName: 'document.dir'
+  }) {
+    this.dirVarName = options.dirVarName || 'document.dir';
+    this.templateLabel = options.templateLabel || '{{--dir}}';
+  }
+
+  overwriteCssPathinHTML(compilation) {
+    // NOTE: need to reconsider It is not working as expected
+    _htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tapAsync(pluginName, (data, cb) => {
+      const {
+        assets
+      } = data;
+      cb(null, { ...data,
+        assets: { ...assets,
+          css: assets.css && (0, _replaceCssDirTemplate.replaceCssDirTemplateMapper)(assets.css, this.templateLabel)
+        }
+      });
+    });
+  }
+
+  overwriteCssPathinRequireEnsure(compilation, compiler) {
+    const {
+      RawSource
+    } = compiler.webpack.sources;
+
+    _JavascriptModulesPlugin.default.getCompilationHooks(compilation).renderMain.tap(pluginName, source => {
+      const templateText = `"+(${this.dirVarName} === "rtl" ? ".rtl": ".ltr")+"`;
+      const replacedStr = source.source().replace(/\[dir\]/g, templateText);
+      return new RawSource(replacedStr);
+    });
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      this.overwriteCssPathinHTML(compilation);
+      this.overwriteCssPathinRequireEnsure(compilation, compiler);
+    });
+  }
+
+}
+
+exports.default = OverwriteCssPathForRTL;

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/RtlSplitPlugin/RtlCssPlugin.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RtlCssPlugin = void 0;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _webpack = require("webpack");
+
+var _OverwriteCssPathForRTL = _interopRequireDefault(require("./OverwriteCssPathForRTL"));
+
+var _RTLSplitPlugin = require("../../custom_postcss_loaders/RTLSplitPlugin");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import HtmlWebpackPlugin from 'html-webpack-plugin';
+// import rtlcss from 'rtlcss';
+const pluginName = 'RtlCssPlugin';
+
+const isCss = filename => _path.default.extname(filename) === '.css';
+
+const isDirRelatedCss = filename => filename.includes('[dir]');
+
+class RtlCssPlugin {
+  constructor(options = {}) {
+    /**
+     * @typedef {Object} Options
+     * @property  {String} dirVarName
+     * @property  {Boolean} sourcemap
+     * @property  {Object} config
+     */
+    this.options = {
+      // dirVarName: options.dirVarName || 'document.dir',
+      sourcemap: options.sourcemap,
+      config: options.config
+    };
+    this.templateLabel = options.templateLabel || '{{--dir}}';
+    this.dirVarName = options.dirVarName || 'document.dir';
+    this.rtlSplitOptions = {
+      disableMinifySelector: options.disableMinifySelector
+    };
+  }
+
+  apply(compiler) {
+    const {
+      RawSource
+    } = compiler.webpack.sources;
+    new _OverwriteCssPathForRTL.default({
+      templateLabel: this.templateLabel,
+      dirVarName: this.dirVarName
+    }).apply(compiler); // const { filename, sourcemap, config } = this.options;
+    // const { devtool } = compiler.options;
+    // const postcssOptions = {
+    //   map: (sourcemap === undefined && !!devtool) || !!sourcemap
+    // };
+
+    compiler.hooks.compilation.tap(pluginName, compilation => {
+      // compilation.hooks.shouldGenerateChunkAssets.tap(pluginName, (...args) => {
+      //   console.log('shouldGenerateChunkAssets', args);
+      // });
+      compilation.hooks.processAssets.tap({
+        name: pluginName,
+        stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
+        additionalAssets: true
+      }, assets => {
+        Object.keys(assets).filter(isCss).filter(isDirRelatedCss).forEach(chunkFilename => {
+          const {
+            source: asset
+          } = compilation.getAsset(chunkFilename);
+          const sourceStr = asset.source();
+          const {
+            ltr,
+            rtl
+          } = (0, _RTLSplitPlugin.separateRtlAndLtr)(sourceStr, this.rtlSplitOptions);
+          const ltrFilename = chunkFilename.replace('[dir]', 'ltr');
+          const rtlFilename = chunkFilename.replace('[dir]', 'rtl');
+          compilation.deleteAsset(chunkFilename);
+          compilation.emitAsset(ltrFilename, new RawSource(ltr));
+          compilation.emitAsset(rtlFilename, new RawSource(rtl));
+        });
+      });
+    });
+  }
+
+}
+
+exports.RtlCssPlugin = RtlCssPlugin;

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/RtlSplitPlugin/RtrSplit.md

@@ -0,0 +1,34 @@
+# RTL Split
+
+we are doing in build time generating rtl related css code by using @zohodesk/postcss-rt npm.
+It was automated, That postcss plugin create rtl reacted css and put them into same file, with css selector [dir=rtl] and ltr realted css with [dir=ltr].
+Here is problem mostly no one need rtl and ltr related css at the same time in browser,
+we are try to split them by [dir] and load which type of css is needed.
+For this purpose we created RTL Split Plugin
+
+# To Try it out rtl-ltr split
+
+### how to use this feature?
+
+to use this feature use have give the below oprtions
+`package.json`
+
+```json
+{
+  /// ...some things
+  "react-cli": {
+    //  ...some things
+    "css": {
+      "plugins": {
+        "rtlSplit": {
+          "enableRTLSplit": true,
+          "templateLabel": "{{--dir}}", // this is for html template css file path dir template
+          "disableMinifySelector": false,
+          "dirVarName": "document.dir" // this will be used for download css based on dir
+        }
+      }
+    }
+    //  ...some things
+  }
+}
+```

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/RtlSplitPlugin/replaceCssDirTemplate.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.replaceCssDirTemplate = replaceCssDirTemplate;
+exports.replaceCssDirTemplateMapper = replaceCssDirTemplateMapper;
+
+function replaceCssDirTemplate(filePath, cssDirTemplate) {
+  return filePath.replace('[dir]', cssDirTemplate);
+}
+
+function replaceCssDirTemplateMapper(assets, cssDirTemplate) {
+  return assets.map(filePath => replaceCssDirTemplate(filePath, cssDirTemplate));
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/ServiceWorkerPlugin.js

@@ -0,0 +1,155 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _path = _interopRequireDefault(require("path"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//import { getI18nFileUrlPathTemplate } from './I18nSplitPlugin/utils/getI18nFileUrlPathTemplate';
+//import { getOptions } from '../utils';
+//import I18nKeysIdentifer from './I18nSplitPlugin/I18nKeysIdentifer';
+//import { replaceCssDirTemplateMapper } from './RtlSplitPlugin/replaceCssDirTemplate';
+// const {
+//   css: { enableRTLSplit },
+//   i18n: { chunkSplitEnable }
+// } = getOptions();
+class ServiceWorkerPlugin {
+  constructor(options) {
+    this.i18nFileNameTemplate = options.i18nFileNameTemplate;
+    this.fileName = options.fileName;
+    this.serviceWorkerPath = options.filePath;
+    this.writePath = options.exitPath;
+    this.replaceText = options.replaceText; // this.publicPaths = options.publicPaths;
+  }
+
+  isInitialChunk(chunk) {
+    if ('canBeInitial' in chunk) {
+      return chunk.canBeInitial();
+    }
+
+    return chunk.isInitial();
+  }
+
+  apply(compiler) {
+    compiler.hooks.emit.tap('ServiceWorkerPlugin', compilation => {
+      _fs.default.readFile(this.serviceWorkerPath, 'utf-8', (err, data) => {
+        if (err) {
+          throw new Error(err);
+        } else {
+          /* const extractedChunks = compilation.chunks.filter(chunk => {
+            if ('canBeInitial' in chunk) {
+              return chunk.canBeInitial();
+            }
+            return chunk.isInitial();
+          }); */
+          // let [js, css, , , i18nPublicPath] = this.publicPaths;
+          // let initialChunkUrls = [];
+          let allChunkUrls = [];
+          let allI18nAssets = [];
+          let entrypoint = compilation.entrypoints.get('main');
+          let initialChunkUrls = entrypoint.getFiles();
+          const cssDirTemplate = '@dir@';
+          /**
+           * NOTE:
+           *  if chunkSplitEnable is false means,
+           *    serviceWorker will get i18n files path for html
+           */
+          // let initalI18nAssets = chunkSplitEnable
+          //   ? entrypoint.chunks
+          //     //.filter(chunk => I18nKeysIdentifer.isChunkHasI18n(chunk))
+          //     .map(chunk =>
+          //       getI18nFileUrlPathTemplate(
+          //         compilation,
+          //         chunk,
+          //         this.i18nFileNameTemplate,
+          //         '@locale@'
+          //       )
+          //     )
+          //   : [];
+
+          let initalI18nAssets = []; //chunkSplitEnable &&
+
+          compilation.chunks.filter(c => !this.isInitialChunk(c)) //.filter(chunk => I18nKeysIdentifer.isChunkHasI18n(chunk))
+          .forEach(chunk => {
+            // let isInitial = this.isInitialChunk(chunk);
+            allChunkUrls = allChunkUrls.concat(chunk.files); // allI18nAssets.push(
+            //   getI18nFileUrlPathTemplate(
+            //     compilation,
+            //     chunk,
+            //     this.i18nFileNameTemplate,
+            //     '@locale@'
+            //   )
+            // );
+          });
+          /** Removing source map files from getting added */
+
+          initialChunkUrls = initialChunkUrls.filter(fileName => !fileName.endsWith('.map'));
+          allChunkUrls = allChunkUrls.filter(fileName => !fileName.endsWith('.map')); // if (enableRTLSplit) {
+          //   initialChunkUrls = replaceCssDirTemplateMapper(
+          //     initialChunkUrls,
+          //     cssDirTemplate
+          //   );
+          //   allChunkUrls = replaceCssDirTemplateMapper(
+          //     allChunkUrls,
+          //     cssDirTemplate
+          //   );
+          // }
+
+          let mod = data.replace(this.replaceText, `self.assets = ${JSON.stringify(initialChunkUrls.concat(initalI18nAssets))};self.allChunks = ${JSON.stringify(allChunkUrls.concat(allI18nAssets))};`);
+
+          if (!_fs.default.existsSync(this.writePath)) {
+            _fs.default.mkdirSync(this.writePath, {
+              recursive: true
+            });
+          }
+
+          _fs.default.writeFileSync(_path.default.join(this.writePath, `${this.fileName}`), mod);
+        }
+      });
+    });
+  }
+
+} // compiler.hooks.thisCompilation.tap('AddAssetPlugin', compilation => {
+//   compilation.hooks.processAssets.tapPromise(tapOptions, async () => {
+//     let source;
+//     if (typeof this.source === 'string') {
+//       if (compilation.getAsset(this.filePath)) {
+//         // Skip emitting the asset again because it's immutable
+//         return;
+//       }
+//       source = this.source;
+//     } else {
+//       source = await this.source(compilation);
+//     }
+//     compilation.emitAsset(this.filePath, new RawSource(source));
+//   });
+// });
+//  getContentHash(compiler, compilation, source) {
+//   const { outputOptions } = compilation;
+//   const { hashDigest, hashDigestLength, hashFunction, hashSalt } =
+//     outputOptions;
+//   const hash = compiler.webpack.util.createHash(
+//     /** @type {string} */ (hashFunction)
+//   );
+//   if (hashSalt) {
+//     hash.update(hashSalt);
+//   }
+//   hash.update(source);
+//   const fullContentHash = hash.digest(hashDigest);
+//   return fullContentHash.toString().slice(0, hashDigestLength);
+// }
+// const contentHash = CopyPlugin.getContentHash(
+//   compiler,
+//   compilation,
+//   source.buffer()
+// );
+//hash same as index.html file ??
+
+
+exports.default = ServiceWorkerPlugin;

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/UglifyCSSPlugin.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _uglifycss = _interopRequireDefault(require("uglifycss"));
+
+var _webpack = require("webpack");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable class-methods-use-this */
+// import { RawSource } from 'webpack-sources';
+const pluginName = 'UglifyCSSPlugin'; // TODO: Check for css minimizer plugin
+
+class UglifyCSSPlugin {
+  apply(compiler) {
+    const {
+      RawSource
+    } = compiler.webpack.sources;
+    compiler.hooks.emit.tap(pluginName, compilation => {
+      compilation.hooks.processAssets.tapAsync({
+        name: pluginName,
+        stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE
+      }, assets => {
+        Object.keys(assets).filter(filename => /\.css$/.test(filename)).forEach(filename => {
+          try {
+            let asset = compilation.assets[filename].source();
+
+            if (typeof asset !== 'string') {
+              asset = asset.toString();
+            }
+
+            const result = _uglifycss.default.processString(asset);
+
+            compilation.updateAsset(filename, new RawSource(result));
+          } catch (e) {
+            compilation.errors.push(e);
+          }
+        });
+      });
+    });
+  }
+
+}
+
+exports.default = UglifyCSSPlugin;