@zohodesk/react-cli 1.1.11-exp.4 → 1.1.11-exp.6

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

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RtlCssPlugin = void 0;
 
+var _path = _interopRequireDefault(require("path"));
+
 var _webpack = require("webpack");
 
 var _OverwriteCssPathForRTL = _interopRequireDefault(require("./OverwriteCssPathForRTL"));
 
-var _RTLSplitPlugin = require("../../../../postcss/custom_postcss_plugins/RTLSplitPlugin");
-
-var _utils = require("../../utils");
+var _RTLSplitPlugin = require("../../custom_postcss_loaders/RTLSplitPlugin");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -19,13 +19,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 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
+    /**
+     * @typedef {Object} Options
+     * @property  {String} dirVarName
+     * @property  {Boolean} sourcemap
+     * @property  {Object} config
      */
     this.options = {
       // dirVarName: options.dirVarName || 'document.dir',
@@ -58,9 +62,10 @@ class RtlCssPlugin {
       // });
       compilation.hooks.processAssets.tap({
         name: pluginName,
-        stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_COMPATIBILITY
+        stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
+        additionalAssets: true
       }, assets => {
-        Object.keys(assets).filter(_utils.isCss).filter(_utils.isDirRelatedCss).forEach(chunkFilename => {
+        Object.keys(assets).filter(isCss).filter(isDirRelatedCss).forEach(chunkFilename => {
           const {
             source: asset
           } = compilation.getAsset(chunkFilename);
@@ -71,8 +76,8 @@ class RtlCssPlugin {
           } = (0, _RTLSplitPlugin.separateRtlAndLtr)(sourceStr, this.rtlSplitOptions);
           const ltrFilename = chunkFilename.replace('[dir]', 'ltr');
           const rtlFilename = chunkFilename.replace('[dir]', 'rtl');
-          compilation.renameAsset(chunkFilename, ltrFilename);
-          compilation.updateAsset(ltrFilename, new RawSource(ltr));
+          compilation.deleteAsset(chunkFilename);
+          compilation.emitAsset(ltrFilename, new RawSource(ltr));
           compilation.emitAsset(rtlFilename, new RawSource(rtl));
         });
       });

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

@@ -1,34 +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
-  }
-}
-```
+# 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

@@ -5,23 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.replaceCssDirTemplate = replaceCssDirTemplate;
 exports.replaceCssDirTemplateMapper = replaceCssDirTemplateMapper;
-exports.replaceI18nLocalTemplate = replaceI18nLocalTemplate;
-exports.replaceI18nLocaleTemplateMapper = replaceI18nLocaleTemplateMapper;
 
 function replaceCssDirTemplate(filePath, cssDirTemplate) {
-  return filePath // added for efc and service worker handling
-  .replaceAll('[dir]', cssDirTemplate).replace('.ltr.css', `.${cssDirTemplate}.css`);
+  return filePath.replace('[dir]', cssDirTemplate);
 }
 
 function replaceCssDirTemplateMapper(assets, cssDirTemplate) {
   return assets.map(filePath => replaceCssDirTemplate(filePath, cssDirTemplate));
-}
-
-function replaceI18nLocalTemplate(filePath, localeTemplate) {
-  return filePath // added for efc and service worker handling
-  .replaceAll('[locale]', localeTemplate);
-}
-
-function replaceI18nLocaleTemplateMapper(assets, localeTemplate) {
-  return assets.map(filePath => replaceI18nLocalTemplate(filePath, localeTemplate));
 }

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

@@ -5,30 +5,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _fs = require("fs");
+var _fs = _interopRequireDefault(require("fs"));
 
-var _LocaleChunkAssetsStore = require("./I18nSplitPlugin/LocaleChunkAssetsStore");
+var _path = _interopRequireDefault(require("path"));
 
-var _emitAsset = require("./emitAsset");
-
-var _replaceCssDirTemplate = require("./RtlSplitPlugin/replaceCssDirTemplate");
-
-var _getInitialAssetsFuncTemplate = require("./getInitialAssetsFuncTemplate");
-
-const pluginName = 'ServiceWorkerPlugin';
+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.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.fileName = options.fileName;
+    this.serviceWorkerPath = options.filePath;
+    this.writePath = options.exitPath;
     this.replaceText = options.replaceText; // this.publicPaths = options.publicPaths;
-  } // eslint-disable-next-line class-methods-use-this
-
+  }
 
   isInitialChunk(chunk) {
     if ('canBeInitial' in chunk) {
@@ -39,72 +37,119 @@ class ServiceWorkerPlugin {
   }
 
   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);
+    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);
+        }
       });
     });
   }
 
-  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];
-    });
-    allChunkUrls = allChunkUrls.filter(fileName => !fileName.endsWith('.map'));
-
-    if (enableRTLSplit) {
-      allChunkUrls = (0, _replaceCssDirTemplate.replaceCssDirTemplateMapper)(allChunkUrls, _getInitialAssetsFuncTemplate.cssDirTemplate);
-    }
-
-    const mod = templateContent.replace(this.replaceText, `
-      ${initialAssetsFuncTemplate}
-
-      let initialAssetsObj = getInitialAssets({ lang: langLocale, dir: cssDir });
-
-      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);
-  }
+} // 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/index.js.js → UglifyCSSPlugin.js}

@@ -20,14 +20,14 @@ class UglifyCSSPlugin {
     const {
       RawSource
     } = compiler.webpack.sources;
-    compiler.hooks.compilation.tap(pluginName, compilation => {
+    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 = assets[filename].source();
+            let asset = compilation.assets[filename].source();
 
             if (typeof asset !== 'string') {
               asset = asset.toString();

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/{postcss/custom_postcss_plugins → bundler/webpack/custom_postcss_loaders}/RTLSplitPlugin.js

@@ -39,11 +39,11 @@ function selectorMinifySameDir(selector, direction) {
   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
+/**
+ * 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
  */
 
 
@@ -58,11 +58,11 @@ function mergeIfSameSelector(rule) {
     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
+/**
+ * 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
  */
 
 

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

@@ -7,21 +7,24 @@ exports.getCSSLoaders = getCSSLoaders;
 
 var _miniCssExtractPlugin = _interopRequireDefault(require("mini-css-extract-plugin"));
 
-var _configPostCssLoader = require("./loaderConfigs/configPostCssLoader");
-
 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 [{
-    loader: _miniCssExtractPlugin.default.loader,
-    options: {
-      publicPath: '../'
-    }
-  }, {
+  return [_miniCssExtractPlugin.default.loader, {
     loader: 'css-loader',
     options: cssLoaderOptions
-  }, (0, _configPostCssLoader.configPostCssLoader)(options)].filter(Boolean);
+  }, neededPostCssPlugins.length && {
+    loader: 'postcss-loader',
+    options: {
+      postcssOptions: {
+        plugins: neededPostCssPlugins
+      }
+    }
+  }].filter(Boolean);
 }

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

@@ -8,5 +8,7 @@ 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

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