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

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;

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_postcss_loaders/ExcludePlugin.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.excludeEmptyCheckPlugin = excludeEmptyCheckPlugin;
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ExcludePlugin = opts => {
+  const {
+    plugins,
+    exclude
+  } = opts;
+  return {
+    postcssPlugin: 'postcss-dark-theme-class',
+
+    Once(root, {
+      result
+    }) {
+      const inputFile = root.source.input.file;
+      const isIgnoredFile = exclude.some(file => inputFile.indexOf(file) !== -1);
+
+      if (!isIgnoredFile) {
+        const handler = response => response.messages.forEach(msg => result.messages.push(msg));
+
+        return (0, _postcss.default)(plugins).process(root, {
+          from: undefined
+        }).then(handler);
+      }
+
+      return root;
+    }
+
+  };
+};
+
+ExcludePlugin.postcss = true;
+var _default = ExcludePlugin;
+exports.default = _default;
+
+function excludeEmptyCheckPlugin({
+  enable,
+  exclude,
+  plugins
+}) {
+  if (!enable) {
+    return [];
+  }
+
+  return exclude.length === 0 ? plugins : [ExcludePlugin({
+    exclude,
+    plugins
+  })];
+}

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

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.separateRtlAndLtr = separateRtlAndLtr;
+exports.separateSingleDir = separateSingleDir;
+
+var postcss = _interopRequireWildcard(require("postcss"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable no-param-reassign */
+const oppositeDir = {
+  ltr: 'rtl',
+  rtl: 'ltr'
+};
+
+function compareSelector(selector1, selector2) {
+  // console.log({ selector1, selector2 }, selector1 === selector2);
+  return selector1 === selector2;
+}
+
+const directionRegexs = {
+  ltr: /\[dir=ltr\]/,
+  rtl: /\[dir=rtl\]/
+};
+
+const getRegex = dir => directionRegexs[dir];
+
+const getOppositeRegex = dir => getRegex(oppositeDir[dir]);
+
+function selectorMinifySameDir(selector, direction) {
+  // NOTE: if this rule is same dir as current need
+  //  then we can just remove that [dir=ltr] or [dir=rtl]
+  //  it just for minimaze selector
+  const regex = getRegex(direction);
+  return selector.replace(regex, '').trim();
+}
+/**
+ * this funtion will remove given rule,
+ *  if given selector and it's previous sibiling rule selector  are same
+ * current rule properties will move to previous sibiling rule.
+ * @param {Rule} rule current rule
+ */
+
+
+function mergeIfSameSelector(rule) {
+  // NOTE: to merge dublicate selector rules
+  const prev = rule.prev();
+
+  if (prev && compareSelector(prev.selector, rule.selector)) {
+    rule.each(decl => {
+      prev.append(decl);
+    });
+    rule.remove();
+  }
+}
+/**
+ * this funtion will remove given rule,
+ *  if given selector and it's previous sibiling rule selector  are same
+ * current rule properties will move to previous sibiling rule.
+ * @param {Rule} rule current rule
+ */
+
+
+function removeIfOppsiteDirRule(rule, direction, rootOptions) {
+  // console.log({ rule, type: rule.type });
+  const selectors = rule.selector.split(/\s*,\s*/); // NOTE: if we use opposite dir selector as custom override reason,
+  //  and compain normal selector with it, In this  case
+  //  we just a have to remove that selector only not full rule
+
+  const oppositeDirRegex = getOppositeRegex(direction);
+  let remainingSelectors = selectors.filter(selector => !oppositeDirRegex.test(selector));
+
+  if (!rootOptions.disableMinifySelector) {
+    remainingSelectors = remainingSelectors.map(selector => selectorMinifySameDir(selector, direction));
+  }
+
+  if (remainingSelectors.length) {
+    rule.selector = remainingSelectors.join(', ');
+  } else {
+    // NOTE: every selector is opposite dir then we have to remove  the rule
+    rule.remove();
+  }
+}
+
+function removeIfOppsiteDirKeyframe(rule, direction) {
+  const name = rule.params;
+  const keyFrameDirName = name.slice(name.lastIndexOf('-') + 1);
+
+  if (keyFrameDirName === oppositeDir[direction]) {
+    // console.log({ m: 'removed', keyFrameName: rule.params });
+    rule.remove();
+  }
+}
+
+function separateSingleDir(root, direction, rootOptions) {
+  root.walkRules(rule => {
+    removeIfOppsiteDirRule(rule, direction, rootOptions);
+    mergeIfSameSelector(rule);
+  });
+  root.walkAtRules(rule => {
+    removeIfOppsiteDirKeyframe(rule, direction);
+  });
+  return root;
+}
+
+function separateRtlAndLtr(css, rootOptions) {
+  // let processor = postcss([]).process(css);
+  const root = postcss.parse(css); // let { root } = processor;
+  // console.log(processor, root);
+  // NOTE: I did first rtl then ltr , Because  for ltr I use original root ref
+
+  const rtlRoot = separateSingleDir(root.clone(), 'rtl', rootOptions); // console.log('############################');
+
+  const ltrRoot = separateSingleDir(root, 'ltr', rootOptions);
+  return {
+    ltrRoot,
+    rtlRoot,
+    ltr: ltrRoot.toString(),
+    rtl: rtlRoot.toString()
+  };
+} // NOTE: to test in https://astexplorer.net/
+// you can test with sample input https://astexplorer.net/#/gist/a892a509eb585099355ef53ef094f836/1ca70d5f7af3b88ca4910296e12f118e9712c874
+// export default postcss.plugin('postcss-rtl-remove', (options = {}) =>
+//   // Work with options here
+//   root => {
+//     const rtlRoot = separateSingleDir(root.clone(), 'rtl');
+//     const ltrRoot = separateSingleDir(root, 'ltr');
+//     // root.append(postcss.comment({ text: 'comment' }));
+//     root.append(postcss.comment({ text: 'this  is  spliting part ' }));
+//     root.append(rtlRoot);
+//     //console.log({root, roots:root+""}, root+"")
+//     // Transform CSS AST here
+//   }
+// );

package/packages/client_build_tool/lib/shared/bundler/webpack/devServerConfig.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.devServerConfig = devServerConfig;
+
+var _path = require("path");
+
+var _constants = require("../../constants");
+
+// import { httpsOptions } from '../../server/httpsOptions';
+function devServerConfig(options) {
+  const {
+    context,
+    server
+  } = options;
+  const {
+    port
+  } = server;
+  return {
+    static: {
+      directory: (0, _path.join)(_constants.appPath, context)
+    },
+    allowedHosts: 'all',
+    // https: httpsOptions(options),
+    client: {
+      logging: 'error',
+      overlay: true
+    },
+    // contentBase: "app"
+    port
+  };
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/getCSSLoaders.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCSSLoaders = getCSSLoaders;
+
+var _miniCssExtractPlugin = _interopRequireDefault(require("mini-css-extract-plugin"));
+
+var _getCssLoaderOptions = require("./loaderConfigs/getCssLoaderOptions");
+
+var _postcssPlugins = require("./postcssPlugins");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function getCSSLoaders(options) {
+  const neededPostCssPlugins = (0, _postcssPlugins.postcssPlugins)(options);
+  const cssLoaderOptions = (0, _getCssLoaderOptions.getCssLoaderOptions)(options);
+  return [_miniCssExtractPlugin.default.loader, {
+    loader: 'css-loader',
+    options: cssLoaderOptions
+  }, neededPostCssPlugins.length && {
+    loader: 'postcss-loader',
+    options: {
+      postcssOptions: {
+        plugins: neededPostCssPlugins
+      }
+    }
+  }].filter(Boolean);
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/jsLoaders.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.jsLoaders = jsLoaders;
+
+var _babelLoaderConfig = require("./loaderConfigs/babelLoaderConfig");
+
+function jsLoaders(options) {
+  return [{
+    test: /\.js$/,
+    exclude: /node_modules/,
+    use: [(0, _babelLoaderConfig.babelLoaderConfig)(options)] // include: path.join(appPath, folder)
+
+  }];
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/loaderConfigs/assetLoaders.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.assetLoaders = assetLoaders;
+
+var _configsAssetsLoaders = require("./configsAssetsLoaders");
+
+function assetLoaders(options) {
+  // const { enableChunkHash } = options;
+  // const nameTemplate = createNameTemplate(enableChunkHash);
+  return [(0, _configsAssetsLoaders.configImageLoader)(options), (0, _configsAssetsLoaders.configFontLoader)(options), (0, _configsAssetsLoaders.configSVGLoader)(options), (0, _configsAssetsLoaders.configAudioLoader)(options), (0, _configsAssetsLoaders.configVideoLoader)(options)];
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/loaderConfigs/babelLoaderConfig.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.babelLoaderConfig = babelLoaderConfig;
+const supportedBrowserVersions = ['last 3 Chrome versions', 'last 3 Firefox versions', 'last 3 Edge versions', 'last 3 Safari versions'];
+
+function babelLoaderConfig(options) {
+  return {
+    loader: 'babel-loader',
+    options: {
+      presets: [[require.resolve('@babel/preset-env'), {
+        modules: false,
+        useBuiltIns: 'usage',
+        corejs: 3,
+        targets: {
+          browsers: supportedBrowserVersions
+        }
+      }], require.resolve('@babel/preset-react')],
+      cacheDirectory: true
+    }
+  };
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/loaderConfigs/configHtmlTemplateLoader.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configHtmlTemplateLoader = configHtmlTemplateLoader;
+
+function configHtmlTemplateLoader(options) {
+  return {
+    test: /\.tmpl$/,
+    use: [{
+      loader: 'html-loader',
+      options: {
+        minimize: true
+      }
+    }]
+  };
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/loaderConfigs/configWebWorkerLoader.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configWebWorkerLoader = configWebWorkerLoader;
+
+var _nameTemplates = require("../common/nameTemplates");
+
+function configWebWorkerLoader(options) {
+  return {
+    test: /\.worker.js$/,
+    use: {
+      loader: require.resolve('../loaders/workerLoader.js'),
+      options: {
+        esModule: true,
+        filename: (0, _nameTemplates.nameTemplates)('workerjs', options)
+      }
+    }
+  };
+}