@zohodesk/react-cli 1.1.27 → 1.1.28-exp.1

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/SelectorWeightPlugin/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _selectorWeightPrefixAdder = require("./selectorWeightPrefixAdder");
+
+var _checkIsPatternsMatchFilename = require("../../loaderConfigs/checkIsPatternsMatchFilename");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class SelectorWeightPlugin {
+  constructor(options = {}) {
+    this.options = {
+      selectorWeightConfig: options.configFile,
+      defaultSelector: options.defaultSelector,
+      customFileDetails: options.customFileDetails,
+      excludeStrings: options.excludeStrings,
+      patterns: options.patterns
+    };
+  }
+
+  apply(compiler) {
+    const {
+      defaultSelector,
+      customFileDetails,
+      excludeStrings,
+      patterns
+    } = this.options;
+
+    const rawdata = _fs.default.readFileSync(customFileDetails);
+
+    const data = JSON.parse(rawdata);
+    compiler.hooks.compilation.tap('selector-weight-rewrite', compilation => {
+      compilation.hooks.optimizeModules.tap('selector-weight-rewrite', modules => {
+        const mods = Array.from(modules).filter(x => x.type.includes('css'));
+        mods.forEach(module => {
+          const filename = module.issuer.resource;
+
+          if (!(0, _checkIsPatternsMatchFilename.checkIsPatternsMatchFilename)(patterns, filename)) {
+            return;
+          }
+          /*
+           
+          filename : Deskapp.module.css ?
+           data : 
+          {
+              "DeskApp.module.css": {"defaultSelector" : ".desk_app_ui "}
+          }
+             selectorWeightConfig : 
+           defaultSelector : .zoho_desk_ui
+          
+          case filename = 'DeskApp.module.css' ? 
+          data[filename].defaultSelector = '.desk_app_ui' 
+           case filename is different ?
+          defaultSelector = '.zoho_desk_ui'
+           */
+
+
+          const rootOriginal = _postcss.default.parse(module.content); // eslint-disable-next-line no-param-reassign
+
+
+          module.content = (0, _selectorWeightPrefixAdder.selectorWeightPrefixAdder)(rootOriginal, data[filename] ? data[filename].defaultSelector : defaultSelector, excludeStrings).toString();
+        });
+      });
+    });
+  }
+
+}
+
+var _default = SelectorWeightPlugin;
+exports.default = _default;

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/SelectorWeightPlugin/selectorWeightPrefixAdder.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorWeightPrefixAdder = selectorWeightPrefixAdder;
+
+var _classHandling = require("./classHandling");
+
+function selectorWeightPrefixAdder(rootOriginal, selector, excludeStrings) {
+  rootOriginal.walkRules((rule, index) => {
+    const prevNode = rootOriginal.nodes[index - 1];
+
+    if ((0, _classHandling.hasPrevNodeIgnore)(index, prevNode, 'updateselector:ignore')) {
+      return;
+    } // TODO: need to verify  cases
+    // if (!isInsideMediaQuery(rule)) {
+    //   return;
+    // }
+
+
+    const selectorArr = rule.selector.split(',');
+    selectorArr.forEach((singleSelectorStr, index) => {
+      if (excludeStrings.includes(singleSelectorStr.trim())) {
+        return;
+      }
+
+      if (singleSelectorStr.includes(']')) {
+        if (singleSelectorStr.slice(singleSelectorStr.lastIndexOf(']') + 2).trim() === '') {
+          return;
+        }
+
+        selectorArr[index] = `${singleSelectorStr.slice(0, singleSelectorStr.lastIndexOf(']') + 1).trim()} ${selector}${singleSelectorStr.slice(singleSelectorStr.lastIndexOf(']') + 2).trim()}`;
+        return;
+      }
+
+      selectorArr[index] = `${selector}${singleSelectorStr}`;
+    }); // eslint-disable-next-line no-param-reassign
+
+    rule.selector = selectorArr.join(',\n');
+  });
+  return rootOriginal;
+} // function convertSelectorWithoutAttribute (selector, conjunction) {
+//   const front  = selector
+//   .slice(0, selector.lastIndexOf(']') + 1)
+//   .trim();
+//   const back = selector
+//   .slice(selector.lastIndexOf(']') + 2)
+//   .trim();
+// return `${front} ${conjunction}${back}`;
+// }

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/SelectorWeightPlugin/windowsModification.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.windowsModification = windowsModification;
+exports.windowsModificationFile = windowsModificationFile;
+const isWin = process.platform === 'win32';
+
+function windowsModification(array) {
+  return isWin ? array && Array.isArray(array) && array.map(r => r.replace(/\//g, '\\')) : array;
+}
+
+function windowsModificationFile(filename) {
+  return isWin ? filename.replace(/\//g, '\\') : filename;
+} // module.exports = { windowsModification, windowsModificationFile };

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

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _fs = require("fs");
+
+var _LocaleChunkAssetsStore = require("./I18nSplitPlugin/LocaleChunkAssetsStore");
+
+var _emitAsset = require("./emitAsset");
+
+var _replaceCssDirTemplate = require("./RtlSplitPlugin/replaceCssDirTemplate");
+
+var _getInitialAssetsFuncTemplate = require("./getInitialAssetsFuncTemplate");
+
+var _ServiceWorkerPluginUtils = require("./ServiceWorkerPluginUtils");
+
+const pluginName = 'ServiceWorkerPlugin';
+
+class ServiceWorkerPlugin {
+  constructor(options) {
+    this.templateFilePath = options.templateFilePath;
+    this.outputFilePath = options.outputFilePath;
+    this.publicPath = options.publicPath;
+    this.i18nFileNameTemplate = options.i18nFileNameTemplate;
+    this.chunkSplitEnable = options.chunkSplitEnable;
+    this.enableRTLSplit = options.enableRTLSplit;
+    this.entryPointName = options.entryPointName;
+    this.replaceText = options.replaceText; // this.publicPaths = options.publicPaths;
+  } // eslint-disable-next-line class-methods-use-this
+
+
+  isInitialChunk(chunk) {
+    if ('canBeInitial' in chunk) {
+      return chunk.canBeInitial();
+    }
+
+    return chunk.isInitial();
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      // Get store for cache
+      this.store = (0, _LocaleChunkAssetsStore.getLocaleChunkAssetsStore)(compilation);
+    });
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      compilation.hooks.processAssets.tap({
+        name: pluginName,
+        stage: compilation.PROCESS_ASSETS_STAGE_DERIVED
+      }, () => {
+        this.createServiceWorkerFile(compilation, compiler);
+      });
+    });
+  }
+
+  createServiceWorkerFile(compilation) {
+    const {
+      templateFilePath,
+      entryPointName,
+      outputFilePath,
+      chunkSplitEnable,
+      enableRTLSplit
+    } = this;
+    const templateContent = (0, _fs.readFileSync)(templateFilePath, 'utf-8');
+    let allChunkUrls = [];
+    const allI18nAssets = [];
+    const entryPoint = compilation.entrypoints.get(entryPointName);
+    const initialAssetsFuncTemplate = (0, _getInitialAssetsFuncTemplate.getInitialAssetsFuncTemplate)({
+      entryPoint,
+      compilation,
+      enableRTLSplit,
+      i18nStore: this.store,
+      chunkSplitEnable,
+      i18nFileNameTemplate: this.i18nFileNameTemplate,
+      functionName: 'getInitialAssets'
+    });
+    /**
+     * NOTE:
+     *  if chunkSplitEnable is false means,
+     *    serviceWorker will get i18n files path for html
+     */
+    // chunkSplitEnable &&
+
+    [...compilation.chunks].filter(c => !this.isInitialChunk(c)).forEach(chunk => {
+      allChunkUrls = [...allChunkUrls, ...chunk.files];
+      allI18nAssets.push((0, _ServiceWorkerPluginUtils.getI18nFileUrlPathTemplate)(compilation, chunk, this.i18nFileNameTemplate, '@locale@'));
+    });
+    allChunkUrls = allChunkUrls.filter(fileName => !fileName.endsWith('.map'));
+    allChunkUrls = allChunkUrls.map(fileName => fileName.replace('smap/', ''));
+
+    if (enableRTLSplit) {
+      allChunkUrls = (0, _replaceCssDirTemplate.replaceCssDirTemplateMapper)(allChunkUrls, _getInitialAssetsFuncTemplate.cssDirTemplate);
+    }
+
+    const mod = templateContent.replace(this.replaceText, `
+      ${initialAssetsFuncTemplate}
+
+      let initialAssetsObj = getInitialAssets();
+
+      let initialAssets = initialAssetsObj.i18n.concat(
+        initialAssetsObj.css,
+        initialAssetsObj.js
+      );
+      self.assets = initialAssets;
+      
+      self.allChunks = ${JSON.stringify(allChunkUrls.concat(allI18nAssets))};`);
+    (0, _emitAsset.emitAsset)(compilation, outputFilePath, mod);
+  }
+
+}
+
+exports.default = ServiceWorkerPlugin;

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

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

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/SourceMapPlugin/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SourceMapPlugin = void 0;
+
+var _webpack = require("webpack");
+
+/* eslint-disable class-methods-use-this */
+function checkSmapFilePattern(assetName) {
+  return /\.js$/.test(assetName) && !/\.i18n\.js$/.test(assetName) || /\.js\.map$/.test(assetName) && !/\.i18n\.js\.map$/.test(assetName);
+}
+
+function skipRuntimeFiles(assetName) {
+  return !assetName.includes('[locale]');
+}
+
+const pluginName = 'SplitSourceMapPlugin'; // Purpose:
+
+/**
+ * we want build that can load files source map and without sourcemap at the same time,
+ * or can be mentioned as so single build need to support two different clients that one for fast load and one for debugging.
+ */
+
+class SourceMapPlugin {
+  apply(compiler) {
+    const {
+      RawSource
+    } = compiler.webpack.sources;
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      compilation.hooks.processAssets.tap({
+        name: pluginName,
+        stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
+      }, assets => {
+        Object.keys(assets).forEach(assetName => {
+          const assetCode = assets[assetName].source();
+
+          if (checkSmapFilePattern(assetName) && skipRuntimeFiles(assetName)) {
+            compilation.renameAsset(assetName, `smap/${assetName}`);
+
+            if (!/\.map$/.test(assetName)) {
+              compilation.emitAsset(assetName, new RawSource(assetCode));
+            }
+          }
+        });
+      });
+      compilation.hooks.processAssets.tap({
+        name: pluginName,
+        stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_DERIVED // additionalAssets: true
+
+      }, assets => {
+        Object.keys(assets).forEach(assetName => {
+          if (assetName.includes('runtime') && skipRuntimeFiles(assetName)) {
+            const runtimeAssetCode = assets[assetName].source();
+            const newAssetName = `smap/${assetName}`;
+            compilation.emitAsset(newAssetName, new RawSource(runtimeAssetCode));
+          }
+
+          ;
+        });
+      });
+    });
+  }
+
+}
+
+exports.SourceMapPlugin = SourceMapPlugin;

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/TPHashMappingPlugin/addHashToFilePath.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addHashToFilePath = addHashToFilePath;
+
+var _path = _interopRequireDefault(require("path"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function addHashToFilePath(filePath, hash) {
+  const pathObj = _path.default.parse(filePath);
+
+  const updatedFilePath = _path.default.format({
+    dir: pathObj.dir,
+    name: `${pathObj.name}.${hash}`,
+    ext: pathObj.ext
+  });
+
+  return updatedFilePath;
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/TPHashMappingPlugin/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TPHashMappingPlugin = void 0;
+
+var _webpack = require("webpack");
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _path = _interopRequireDefault(require("path"));
+
+var _addHashToFilePath = require("./addHashToFilePath");
+
+var _cssClassNameGenerate = require("../../loaderConfigs/cssClassNameGenerate");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class TPHashMappingPlugin {
+  constructor(options) {
+    this.fileMappings = options.fileMappings;
+    this.tpFolder = options.tpFolder;
+  }
+
+  apply(compiler) {
+    new _webpack.DefinePlugin(this.getFiles()).apply(compiler);
+  }
+
+  getFiles() {
+    const hashMapping = {};
+    this.fileMappings.forEach(fileInfo => {
+      const filePath = _path.default.join(this.tpFolder, fileInfo.filePath);
+
+      if (_fs.default.existsSync(filePath)) {
+        const fileContent = _fs.default.readFileSync(filePath, {
+          encoding: 'utf-8'
+        });
+
+        const generatedHash = (0, _cssClassNameGenerate.getHash)(fileContent, fileInfo.hashLength || 10);
+        const outputFilePath = (0, _addHashToFilePath.addHashToFilePath)(filePath, generatedHash);
+
+        _fs.default.writeFileSync(outputFilePath, fileContent);
+
+        hashMapping[fileInfo.key] = JSON.stringify(generatedHash);
+      } else {
+        throw new Error(`Third party file ${fileInfo.fileName} does not exist`);
+      }
+    });
+    return hashMapping;
+  }
+
+}
+
+exports.TPHashMappingPlugin = TPHashMappingPlugin;

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _utilities = require("./utilities");
+
+describe('not remove default syntax space', () => {
+  it('original syntax', () => {
+    const inputvalues = `
+        p {
+            border: 1px solid green;
+        }`;
+    const expectedOutput = 'p{border:1px solid green}';
+    (0, _utilities.checkTestCases)((0, _utilities.minifyCss)(inputvalues), expectedOutput);
+  });
+  it('syntax with some extra spaces', () => {
+    const inputvalues = `
+        p {
+             border:   1px      solid    green;
+        }`;
+    const expectedOutput = 'p{border:1px solid green}';
+    (0, _utilities.checkTestCases)((0, _utilities.minifyCss)(inputvalues), expectedOutput);
+  });
+});
+test('gives margin to all sides', () => {
+  const inputvalues = `
+    p{
+       margin-top: 1px;
+       margin-left: 2px;
+       margin-bottom: 2px;
+       margin-right: 2px;
+    }`;
+  const expectedOutput = 'p{margin-top:1px;margin-left:2px;margin-bottom:2px;margin-right:2px}';
+  (0, _utilities.checkTestCases)((0, _utilities.minifyCss)(inputvalues), expectedOutput);
+});
+test('gives padding to all sides', () => {
+  const inputvalues = `
+    p{
+       padding-top: 1px;
+       padding-left: 2px;
+       padding-bottom: 2px;
+       padding-right: 2px;
+    }`;
+  const expectedOutput = 'p{padding-top:1px;padding-left:2px;padding-bottom:2px;padding-right:2px}';
+  (0, _utilities.checkTestCases)((0, _utilities.minifyCss)(inputvalues), expectedOutput);
+});
+test('removes 0 when decimal value is less than 1', () => {
+  const inputvalues = `
+    .foo {
+       padding: 10px;
+       border: 0.5px solid black;
+    }`;
+  const expectedOutput = '.foo{padding:10px;border:.5px solid black}';
+  (0, _utilities.checkTestCases)((0, _utilities.minifyCss)(inputvalues), expectedOutput);
+});
+test('minify the color values', () => {
+  const inputvalues = `
+    .foo {
+       background-color: rgb(255, 0, 0);
+       border: 2px solid rgb(0, 255, 0);
+    }`;
+  const expectedOutput = '.foo{background-color:red;border:2px solid #0f0}';
+  (0, _utilities.checkTestCases)((0, _utilities.minifyCss)(inputvalues), expectedOutput);
+});
+test('remove the comments', () => {
+  const inputvalues = `
+    /* to give margin */
+    .foo {
+        margin-top: 0px;
+        margin-right: 10px;
+        margin-bottom: 0px;
+        margin-left: 10px;
+    }`;
+  const expectedOutput = '.foo{margin-top:0;margin-right:10px;margin-bottom:0;margin-left:10px}';
+  (0, _utilities.checkTestCases)((0, _utilities.minifyCss)(inputvalues), expectedOutput);
+});

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

@@ -0,0 +1,64 @@
+"use strict";
+
+var _utilities = require("./utilities");
+
+test('remove white spaces', () => {
+  const inputvalues = `
+    .body{
+        color:'white'
+    }`;
+  const expectedOutput = '.body{color:\'white\'}';
+  (0, _utilities.checkTestCases)((0, _utilities.minifyCss)(inputvalues), expectedOutput);
+});
+test('remove extra line', () => {
+  const inputvalues = `
+.whole{
+    width: 100%;
+    height: 94%;
+    background-color: white;
+}
+
+.category{
+    color: #666970;
+    font-weight: bolder;
+    font-size: 2vh;
+    padding: 2%;
+    box-sizing: border-box;
+    border-bottom: 1px solid rgba(128, 128, 128, 0.223);
+}`;
+  const expectedOutput = '.whole{width:100%;height:94%;background-color:white}.category{color:#666970;font-weight:bolder;font-size:2vh;padding:2%;box-sizing:border-box;border-bottom:1px solid rgba(128,128,128,0.223)}';
+  (0, _utilities.checkTestCases)((0, _utilities.minifyCss)(inputvalues), expectedOutput);
+});
+test('different classes have same property', () => {
+  const inputvalues = `
+.firstElement{
+    color:red;
+}
+
+.secondElement {
+    color: red;
+}
+
+.ThirdElement {
+    color: red;
+}`;
+  const expectedOutput = '.firstElement{color:red}.secondElement{color:red}.ThirdElement{color:red}';
+  (0, _utilities.checkTestCases)((0, _utilities.minifyCss)(inputvalues), expectedOutput);
+});
+describe('checking properties with value 0', () => {
+  it('margin', () => {
+    (0, _utilities.checkZeroForUnits)('margin');
+  });
+  it('width', () => {
+    (0, _utilities.checkZeroForUnits)('width');
+  });
+  it('height', () => {
+    (0, _utilities.checkZeroForUnits)('height');
+  });
+  it('padding', () => {
+    (0, _utilities.checkZeroForUnits)('padding');
+  });
+  it('border', () => {
+    (0, _utilities.checkZeroForUnits)('border');
+  });
+});

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkTestCases = checkTestCases;
+exports.checkZeroForUnits = checkZeroForUnits;
+exports.minifyCss = minifyCss;
+
+const uglifycss = require('uglifycss');
+
+function minifyCss(inputCss) {
+  const minifiedCSS = uglifycss.processString(inputCss);
+  return minifiedCSS;
+}
+
+function checkTestCases(inputvalues, expectedOutput) {
+  expect(inputvalues).toBe(expectedOutput);
+}
+
+function checkZeroForUnits(name) {
+  const inputvalues = `
+.firstElement{
+    ${name} :0vh;
+}`;
+  const expectedOutput = `.firstElement{${name}:0}`;
+  checkTestCases(minifyCss(inputvalues), expectedOutput);
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/UglifyCSSPlugin/index.js.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.compilation.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 = 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;