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

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)
+      }
+    }
+  };
+}

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

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configAudioLoader = configAudioLoader;
+exports.configFontLoader = configFontLoader;
+exports.configImageLoader = configImageLoader;
+exports.configSVGLoader = configSVGLoader;
+exports.configVideoLoader = configVideoLoader;
+
+var _nameTemplates = require("../common/nameTemplates");
+
+// function getLoaderOptionQueryString(params) {
+const ImageExtRegex = /\.jpe?g$|\.gif$|\.png|\.webp$/;
+const FontExtRegex = /\.woff2|\.woff$|\.ttf$|\.eot$/;
+const SVGExtRegex = /\.svg$/;
+const AudioExtRegex = /\.ogg$/;
+const VideoExtRegex = /\.mp4|\.webm$/;
+
+function createAssetLoader({
+  test,
+  nameTemplate,
+  limit
+}) {
+  const conf = {
+    test,
+    type: 'asset'
+  };
+
+  if (limit) {
+    conf.parser = {
+      dataUrlCondition: {
+        maxSize: limit // 4 * 1024 // 4kb
+
+      }
+    };
+  } else {
+    conf.type = 'asset/resource';
+  }
+
+  if (nameTemplate) {
+    conf.generator = {
+      filename: nameTemplate
+    };
+  }
+
+  return conf;
+}
+/**
+ * @typedef {Object} LoaderConfig
+ * @property {Number} enableChunkHash
+ */
+
+/**
+ * @param {LoaderConfig} options
+ * @returns
+ */
+
+
+function configImageLoader(options) {
+  return createAssetLoader({
+    test: ImageExtRegex,
+    nameTemplate: (0, _nameTemplates.nameTemplates)('image', options),
+    limit: 1000
+  });
+}
+
+function configFontLoader(options) {
+  return createAssetLoader({
+    test: FontExtRegex,
+    nameTemplate: (0, _nameTemplates.nameTemplates)('font', options),
+    limit: 1000
+  });
+}
+
+function configSVGLoader(options) {
+  return createAssetLoader({
+    test: SVGExtRegex,
+    nameTemplate: (0, _nameTemplates.nameTemplates)('svg', options),
+    limit: 1000
+  });
+}
+
+function configAudioLoader(options) {
+  return createAssetLoader({
+    test: AudioExtRegex,
+    nameTemplate: (0, _nameTemplates.nameTemplates)('audio', options)
+  });
+}
+
+function configVideoLoader(options) {
+  return createAssetLoader({
+    test: VideoExtRegex,
+    nameTemplate: (0, _nameTemplates.nameTemplates)('video', options)
+  });
+}
+/*
+export function createNameTemplate(enableChunkHash) {
+  const ext = `${enableChunkHash ? ".[hash:20]" : ""}.[ext]`;
+  return `[name]${ext}`;
+}
+
+export function createImageAndFontsAndSVGLoaders(enableChunkHash) {
+  const nameTemplate = createNameTemplate(enableChunkHash);
+  return [
+    configImageLoader(nameTemplate),
+    configFontLoader(nameTemplate),
+    configSVGLoader(nameTemplate),
+    configAudioLoader(nameTemplate)
+  ];
+}
+*/
+
+/*
+export function createLoaderOptionObject(
+  loaderName,
+  nameTemplate,
+  fallback,
+  limit = 1000
+) {
+  return {
+    loader: loaderName,
+    options: {
+      limit,
+      name: nameTemplate,
+      fallback
+    }
+  };
+}
+
+function configLoaderObject(filter, loaderAndOptions) {
+  return {
+    test: filter,
+    use: loaderAndOptions
+  };
+}
+*/

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

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _crypto = require("crypto");
+
+var _os = _interopRequireDefault(require("os"));
+
+var _path = _interopRequireDefault(require("path"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function getHash(str) {
+  return (0, _crypto.createHash)('md5').update(str).digest();
+}
+
+const isWindows = _os.default.platform().toLowerCase() === 'win32';
+
+const isFileEligibleToHashClass = (resourcePath, machineBasedPatterns) => {
+  if (!resourcePath.includes('node_modules')) {
+    return false;
+  }
+
+  return machineBasedPatterns.some(p => resourcePath.includes(p));
+};
+
+var _default = options => {
+  const {
+    classNameOptions
+  } = options.css;
+  const {
+    cssHashSelectors,
+    classNamePrefix
+  } = classNameOptions;
+  let canApplyHashClassName = null;
+
+  if (cssHashSelectors) {
+    const {
+      filenames,
+      packages
+    } = cssHashSelectors;
+    const machineBasedPatterns = isWindows ? packages.map(e => e.replace(/\//g, '\\')) : packages;
+
+    canApplyHashClassName = function canApplyHashClassName(resourcePath, cleanFileName) {
+      return isFileEligibleToHashClass(resourcePath, machineBasedPatterns) || filenames.indexOf(cleanFileName);
+    };
+  }
+
+  return (context, localIdentName, localName) => {
+    // NOTE:  in build macine we use date as folder path.
+    // So every time we create new build there is path will alway different
+    // in order to minmaze that problem we try in relative path;
+    // console.log('context.resourcePath', context.resourcePath, context);
+    // let contextResourcePath = context.resourcePath;
+    const {
+      rootContext,
+      resourcePath
+    } = context;
+
+    const relativePath = _path.default.relative(rootContext, resourcePath);
+
+    if (resourcePath.endsWith('.plain.css')) {
+      return localName;
+    }
+
+    const fileNameWithoutExt = _path.default.parse(relativePath).name;
+
+    const cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase(); // css file has casesensitive selector issue so can't toLowerCase
+    // let local = localName.toLowerCase()
+
+    if (canApplyHashClassName && canApplyHashClassName(resourcePath, cleanFileName)) {
+      const h = getHash(`${relativePath}-${localName}`, 10);
+      return `${classNamePrefix}${h}`;
+    }
+
+    return `${classNamePrefix}-${cleanFileName}-${localName}`;
+  };
+};
+
+exports.default = _default;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCssLoaderOptions = getCssLoaderOptions;
+
+var _cssClassNameGenerate = _interopRequireDefault(require("./cssClassNameGenerate"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function getCssLoaderOptions(options) {
+  // const { classNameOptions } = options.css;
+  const cssLoaderOptions = {
+    importLoaders: 1,
+    modules: {
+      // localIdentName: classNameOptions.classNameBlob,
+      getLocalIdent: (0, _cssClassNameGenerate.default)(options)
+    },
+    sourceMap: true
+  };
+  return cssLoaderOptions;
+}