@zohodesk/react-cli 0.0.1-exp.162.3 → 0.0.1-exp.166.1

package/lib/common/splitChunks.js

@@ -7,9 +7,11 @@ exports.default = void 0;
 
 var _path = _interopRequireDefault(require("path"));
 
+var _os = _interopRequireDefault(require("os"));
+
 var _utils = require("../utils");
 
-var _os = _interopRequireDefault(require("os"));
+var _testPattern = require("./testPattern");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -39,91 +41,83 @@ let isReact = module => {
   } = module;
   let reactBundle = ['react', 'react-dom'];
   return userRequest && reactBundle.some(pkg => userRequest.indexOf(`node_modules${ps}${pkg}${ps}`) >= 0);
-}; // let defaultChunks = {
-//   'react.vendor': {
-//     name: 'react.vendor',
-//     chunks: 'all',
-//     minChunks: 1,
-//     test: isReact,
-//     priority: -10
-//   },
-//   vendor: {
-//     name: 'vendor',
-//     chunks: 'all',
-//     minChunks: 1,
-//     test: isVendor,
-//     priority: -10
-//   },
-//   zohocharts: {
-//     chunks: 'all',
-//     minChunks: 1,
-//     test: /[\\/]node_modules[\\/]((@zohodesk|@zohocharts))[\\/]((zc-custom|d3).*)/,
-//     priority: 30,
-//     enforce: true
-//   }
-// };
-
+};
 
 let defaultChunks = {
-  vendors: {
-    // picks up everything from node_modules as long as the sum of node modules is larger than minSize
-    //test: /[\\/]node_modules[\\/]((?!react).*)[\\/]/,
-    test: isVendor,
-    name: 'vendors',
-    priority: 19,
+  'react.vendor': {
+    name: 'react.vendor',
+    chunks: 'all',
+    minChunks: 1,
+    test: isReact,
     enforce: true,
-    // causes maxInitialRequests to be ignored, minSize still respected if specified in cacheGroup
-    minSize: 30000 // use the default minSize
-
-  },
-  vendorsAsync: {
-    // vendors async chunk, remaining asynchronously used node modules as single chunk file
-    test: /[\\/]node_modules[\\/]((?!react).*)[\\/]/,
-    name: 'vendors.async',
-    chunks: 'async',
-    priority: 9,
-    reuseExistingChunk: true,
-    minSize: 10000 // use smaller minSize to avoid too much potential bundle bloat due to module duplication.
-
-  },
-  react: {
-    automaticNamePrefix: 'react',
-    test: /[\\/]node_modules[\\/]((react).*)[\\/]/,
+    // priority: 10
     priority: -10
   },
-  commonsAsync: {
-    // commons async chunk, remaining asynchronously used modules as single chunk file
-    name: 'commons.async',
-    minChunks: 2,
-    // Minimum number of chunks that must share a module before splitting
-    chunks: 'async',
-    priority: -10,
-    reuseExistingChunk: true,
-    //minSize: 10000  // use smaller minSize to avoid too much potential bundle bloat due to module duplication.
-    minSize: 5000
-  },
-  zohocharts: {
+  vendor: {
+    name: 'vendor',
     chunks: 'all',
+    // chunks: 'initial',
     minChunks: 1,
-    test: /[\\/]node_modules[\\/]((@zohodesk|@zohocharts))[\\/]((zc-custom|d3).*)/,
-    priority: 30,
-    enforce: true
+    test: isVendor,
+    // priority: 19,
+    priority: -10
   }
 };
 let customChunksConfig = {};
-customChunks.map(({
+customChunks.map((obj, index) => ({
+  name: obj.name,
+  pattern: obj.pattern,
+  minChunks: obj.minChunks || obj.size || 2,
+  rules: obj.rules,
+  // includeDepenency: obj.includeDepenency || false,
+  priority: obj.priority || -10 * (index + 2),
+  enforce: obj.enforce || true,
+  maxSize: obj.maxSize,
+  // || 0,
+  minSize: obj.minSize,
+  // || 20000,
+  chunks: obj.chunks || 'all'
+})).map(({
   name,
   pattern,
-  size = 2
-}, index) => customChunksConfig[name] = {
-  name,
-  test: new RegExp(isWindows ? pattern.replace(/\//g, '\\') : pattern),
-  chunks: 'all',
-  enforce: true,
-  minChunks: size,
-  priority: -10 * (index + 2)
+  minChunks,
+  rules,
+  priority,
+  // includeDepenency,
+  enforce,
+  minSize,
+  maxSize,
+  chunks = 'all'
+}) => {
+  let obj = {
+    name,
+    test: rules ? m => {
+      const {
+        userRequest
+      } = m;
+      return (0, _testPattern.testPattern)(userRequest, rules); // return (
+      //   pkgs.some(p => isRelated(userRequest, p)) ||
+      //   (includeDepenency && isDependency(m, pkgs))
+      // );
+    } : new RegExp(isWindows ? pattern.replace(/\//g, '\\') : pattern),
+    chunks,
+    enforce,
+    minChunks,
+    priority
+  };
+
+  if (minSize !== undefined) {
+    obj.minSize = minSize;
+  }
+
+  if (maxSize !== undefined) {
+    obj.maxSize = maxSize;
+  }
+
+  return customChunksConfig[name] = obj;
 });
 var _default = {
+  minSize: 12000,
   cacheGroups: Object.assign({
     default: false,
     vendors: false

package/lib/common/testPattern.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDependency = isDependency;
+exports.isRelatedPackage = exports.isRelated = void 0;
+exports.testPattern = testPattern;
+
+var _path = require("path");
+
+// in our development we only use windows, mac and linux
+const isWindows = _path.sep !== '/'; // this function  will  return true if pattern matched
+
+function _testPattern(req, pattern) {
+  let modifyedPattern = pattern;
+
+  if (/[*.$^]/.test(modifyedPattern)) {
+    if (isWindows) {
+      // modifyedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
+      modifyedPattern = modifyedPattern.replace(/\//g, '\\\\');
+    }
+
+    modifyedPattern = modifyedPattern.replace(/\./g, '\\.').replace(/\*/g, '.*');
+    const re = new RegExp(modifyedPattern);
+    return re.test(req);
+  }
+
+  if (isWindows) {
+    // modifyedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
+    modifyedPattern = modifyedPattern.replace(/\//g, '\\');
+  }
+
+  return req.indexOf(modifyedPattern) !== -1;
+}
+
+function testPattern(req, pattern) {
+  if (!req || !pattern) {
+    return false;
+  }
+
+  if (Array.isArray(pattern)) {
+    // eslint-disable-next-line no-unused-vars
+    return pattern.every(p => testPattern(req, p));
+  }
+
+  if (pattern[0] === '!') {
+    return !_testPattern(req, pattern.slice(1));
+  }
+
+  return _testPattern(req, pattern);
+}
+
+const isRelated = (req, item) => req && req.indexOf(item) !== -1; // export const isRelated = (req, item) => testPattern(req, item);
+
+
+exports.isRelated = isRelated;
+
+const isRelatedPackage = (req, item) => isRelated(req, `node_modules${_path.sep}${item}${_path.sep}`) !== -1; // export const isRelated = (req, item) => testPattern(req, item);
+
+
+exports.isRelatedPackage = isRelatedPackage;
+
+function isDependency(m, excludeList) {
+  // let reasons = m.reasons.map(r => r.module.userRequest);
+  // m.reasons.some(r => !r.module || !r.module.userRequest) && console.log(m.reasons);
+  return m.reasons.some(r => excludeList.some(item => r.module && isRelated(r.module.userRequest, item)));
+} // export function queryHandler(conditions, pattern) {
+// }

package/lib/common/valueReplacer.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _path = _interopRequireDefault(require("path"));
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _folderIterator = _interopRequireDefault(require("../utils/folderIterator"));
+
+var _utils = require("../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const cwd = process.cwd();
+
+const src = _path.default.join(cwd, process.argv[2]);
+
+const dist = _path.default.join(cwd, process.argv[3]);
+
+const docopy = process.argv[4] === 'true';
+const {
+  css: {
+    valueReplacer
+  }
+} = (0, _utils.getOptions)();
+
+if (!_fs.default.existsSync(dist)) {
+  _fs.default.mkdirSync(dist, {
+    recursive: true
+  });
+}
+
+(0, _folderIterator.default)(src, dist, docopy ? false : ['.css'], false, (fromPath, toPath) => {
+  //console.log({ fromPath: fromPath, toPath: toPath });
+  let css = _fs.default.readFileSync(fromPath);
+
+  if (docopy && !fromPath.endsWith('.css')) {
+    //console.log(toPath,'....');
+    _fs.default.writeFileSync(toPath, css);
+
+    return;
+  }
+
+  (0, _postcss.default)([valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer)]).process(css, {
+    from: fromPath,
+    to: toPath
+  }).then(result => {
+    _fs.default.writeFile(toPath, result.css, () => true);
+
+    if (result.map) {
+      _fs.default.writeFile(`${toPath}.map`, result.map, () => true);
+    }
+  });
+});

package/lib/configs/jest.config.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _fs = require("fs");
+
 var _path = _interopRequireDefault(require("path"));
 
 var _libAlias = require("./libAlias");
@@ -13,6 +15,9 @@ let moduleNameMapper = Object.keys(_libAlias.libAlias).reduce((previousValue, ke
   previousValue[`^${key}(.*)$`] = `${_libAlias.libAlias[key]}$1`;
   return previousValue;
 }, {});
+
+const appGlobals = _path.default.resolve(appPath, '__testUtils__', 'globals.js');
+
 let commonConfig = {
   coverageReporters: ['json', 'html', 'json-summary', 'text'],
   collectCoverage: true,
@@ -28,7 +33,7 @@ let commonConfig = {
   transformIgnorePatterns: ['/node_modules/(?!(@zohodesk)/)'],
   // transformIgnorePatterns: ['/node_modules.*?.js$'],
   moduleFileExtensions: ['js'],
-  setupFiles: [_path.default.resolve(appPath, '__testUtils__', 'globals.js'), _path.default.resolve(__dirname, '..', 'jest', 'setup.js')],
+  setupFiles: [(0, _fs.existsSync)(appGlobals) && appGlobals, _path.default.resolve(__dirname, '..', 'jest', 'setup.js')].filter(Boolean),
   globals: {
     __DEVELOPMENT__: true,
     __DOCS__: false,

package/lib/configs/webpack.docs.config.js

@@ -8,6 +8,8 @@ var _pluginUtils = require("../pluginUtils");
 
 var _loaderUtils = require("../loaderUtils");
 
+var _libAlias = require("./libAlias");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 let options = (0, _utils.getOptions)();
@@ -21,46 +23,47 @@ let {
     classNamePrefix
   },
   app: {
-    folder
+    folder,
+    disableES5Transpile
   }
 } = options;
 let appPath = process.cwd();
 
 module.exports = isSSTest => ({
   entry: {
-    main: [_path.default.resolve(__dirname, "..", "hooks", "docsProptypeHook.js"), _path.default.join(appPath, componentFolder, "index.js")],
-    vendor: ["react", "react-dom", "redux", "react-redux"]
+    main: [_path.default.resolve(__dirname, '..', 'hooks', 'docsProptypeHook.js'), _path.default.join(appPath, componentFolder, 'index.js')],
+    vendor: ['react', 'react-dom', 'redux', 'react-redux']
   },
-  devtool: "none",
-  mode: "development",
+  devtool: 'none',
+  mode: 'development',
   output: {
-    path: _path.default.join(appPath, "build"),
-    filename: "js/[name].js",
-    publicPath: "/docs/",
-    library: "Component",
-    libraryTarget: "umd"
+    path: _path.default.join(appPath, 'build'),
+    filename: 'js/[name].js',
+    publicPath: '/docs/',
+    library: 'Component',
+    libraryTarget: 'umd'
   },
   plugins: (0, _pluginUtils.getDocsPlugins)(isSSTest, options),
   module: {
     rules: [{
       test: /\.js$/,
       use: [{
-        loader: "babel-loader",
+        loader: 'babel-loader',
         options: {
-          presets: [[require.resolve("@babel/preset-env"), {
+          presets: [[require.resolve('@babel/preset-env'), {
             modules: false
-          }], require.resolve("@babel/preset-react")],
-          plugins: [[require.resolve("@babel/plugin-transform-runtime"), {
+          }], require.resolve('@babel/preset-react')],
+          plugins: [[require.resolve('@babel/plugin-transform-runtime'), {
             helpers: true,
             regenerator: false
-          }], require.resolve("@babel/plugin-syntax-dynamic-import"), require.resolve("@babel/plugin-syntax-object-rest-spread")],
+          }], require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('@babel/plugin-syntax-object-rest-spread')],
           cacheDirectory: true
         }
       }],
       include: _path.default.join(appPath, folder)
     }, {
       test: /\.docs\.js$/,
-      use: require.resolve("../loaders/docsLoader.js"),
+      use: require.resolve('../loaders/docsLoader.js'),
       include: _path.default.join(appPath, folder),
       exclude: /node_modules/
     }, {
@@ -68,29 +71,29 @@ module.exports = isSSTest => ({
       use: (0, _loaderUtils.getCSSLoaders)(hasRTL, rtlExclude, false, cssUniqueness, null, cssHashSelectors, classNamePrefix)
     }, {
       test: /\.jpe?g$|\.gif$|\.png$/,
-      use: ["url-loader?limit=1000&name=./images/[name].[ext]"]
+      use: ['url-loader?limit=1000&name=./images/[name].[ext]']
     }, {
       test: /\.woff2|\.woff$|\.ttf$|\.eot$/,
-      use: ["url-loader?limit=1000&name=./fonts/[name].[ext]"]
+      use: ['url-loader?limit=1000&name=./fonts/[name].[ext]']
     }, {
       test: /\.svg$/,
-      use: ["url-loader?limit=1&name=./fonts/[name].[ext]"]
+      use: ['url-loader?limit=1&name=./fonts/[name].[ext]']
     }, {
       test: /\.html$/,
       use: {
-        loader: "html-loader",
+        loader: 'html-loader',
         options: {
-          attrs: [":data-src"],
-          interpolate: "require"
+          attrs: [':data-src'],
+          interpolate: 'require'
         }
       }
     }, {
       test: /\.ogg$/,
-      use: ["file-loader?name=./fonts/[name].[ext]"]
+      use: ['file-loader?name=./fonts/[name].[ext]']
     }, {
       test: /\.tmpl$/,
       use: [{
-        loader: "html-loader",
+        loader: 'html-loader',
         options: {
           minimize: {
             removeComments: true,
@@ -104,12 +107,13 @@ module.exports = isSSTest => ({
     }]
   },
   externals: {
-    ZC: "$ZC"
+    ZC: '$ZC'
   },
   resolve: {
-    modules: [_path.default.resolve(__dirname, "..", "..", "node_modules"), "node_modules"]
+    modules: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules'],
+    alias: disableES5Transpile ? _libAlias.libAlias : {}
   },
   resolveLoader: {
-    modules: [_path.default.resolve(__dirname, "..", "..", "node_modules"), "node_modules"]
+    modules: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
   }
 });

package/lib/loaderUtils/getCSSLoaders.js

@@ -20,6 +20,9 @@ let getCSSLoaders = (hasRTL, rtlExclude, classNameBlob, cssUniqueness, selectorR
   const {
     devCssFileBountry
   } = options.app;
+  const {
+    valueReplacer
+  } = options.css;
   const {
     cssSelectorZipPath
   } = options.impactService;
@@ -36,6 +39,18 @@ let getCSSLoaders = (hasRTL, rtlExclude, classNameBlob, cssUniqueness, selectorR
     cssLoaderOptions.modules.getLocalIdent = (0, _cssClassNameGenerate.default)(cssUniqueness, cssHashSelectors, classNamePrefix);
   }
 
+  const postcssPlugins = [valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), selectorReplace && require('postcss-selector-replace')(selectorReplace), hasRTL && require('../postcss-plugins/ExcludeRTLPlugin')({
+    ignore: rtlExcludeLocal,
+    plugins: [require('@zohodesk/postcss-rtl')({
+      addPrefixToSelector: function addPrefixToSelector(selector, prefix) {
+        if (prefix === '[dir]') {
+          return selector;
+        }
+
+        return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
+      }
+    })]
+  })].filter(Boolean);
   return [cssSelectorZipPath && {
     loader: require.resolve('../loaders/selectorMappingLoader')
   }, {
@@ -51,23 +66,12 @@ let getCSSLoaders = (hasRTL, rtlExclude, classNameBlob, cssUniqueness, selectorR
     options: {
       devCssFileBountry
     }
-  }, hasRTL || selectorReplace ? {
+  }, postcssPlugins.length > 0 ? {
     loader: 'postcss-loader',
     options: {
       ident: 'postcss',
       plugins: function () {
-        return [selectorReplace && require('postcss-selector-replace')(selectorReplace), hasRTL && require('../postcss-plugins/ExcludeRTLPlugin')({
-          ignore: rtlExcludeLocal,
-          plugins: [require('@zohodesk/postcss-rtl')({
-            addPrefixToSelector: function addPrefixToSelector(selector, prefix) {
-              if (prefix === '[dir]') {
-                return selector;
-              }
-
-              return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
-            }
-          })]
-        })].filter(Boolean);
+        return postcssPlugins;
       }
     }
   } : null].filter(Boolean);

package/lib/postcss-plugins/ValueReplacer.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// module.exports = postcss.plugin('postcss-value-replacer', opts => {
+//   const { plugins } = opts;
+//   return (root, result) => {
+//     const inputFile = root.source.input.file;
+//     let isIgnoredFile= opts.ignore.some(file => inputFile.indexOf(file)!==-1);
+//     if (!isIgnoredFile) {
+//       const handler = response =>
+//         response.messages.forEach(msg => result.messages.push(msg));
+//       return postcss(plugins)
+//         .process(root, { from: undefined })
+//         .then(handler);
+//     }
+//   };
+// });
+// export default 
+module.exports = _postcss.default.plugin('postcss-value-replacer', (valueReplacer = {}) => // Work with options here
+root => {
+  root.walkDecls(decl => {
+    valueReplacer.forEach(obj => {
+      if (obj.props.indexOf(decl.prop) !== -1) {
+        let ks = Object.keys(obj.values).sort((a, b) => b.length - a.length);
+        ks.forEach(k => {
+          decl.value = decl.value.replace(k, obj.values[k]);
+        }); //decl.value = obj.values[decl.value];
+      }
+    }); //console.log({root, roots:root+""}, root+"")
+    // Transform CSS AST here
+  }); // root.walkDecls(decl => {
+  //   valueReplacer.forEach(obj => {
+  //     if (
+  //       obj.props.indexOf(decl.prop) !== -1 &&
+  //       obj.values[decl.value] !== undefined
+  //     ) {
+  //       decl.value = obj.values[decl.value];
+  //     }
+  //   });
+  //   //console.log({root, roots:root+""}, root+"")
+  //   // Transform CSS AST here
+  // });
+});

package/lib/schemas/index.js

@@ -44,6 +44,17 @@ var _default = {
   },
   css: {
     enableRTLSplit: false,
+    valueReplacer: null,
+    //valueReplacer: [
+    //   {
+    //     props: ['font', 'font-family'],
+    //     values: {
+    //       'zdfonts-rCallBar': 'zdfonts-rCallBar01',
+    //       'zdfonts-rCall': 'zdfonts-rCallBar02'
+    //     }
+    //     // ,suffix: '0'
+    //   }
+    // ],
     templateLabel: '{{--dir}}',
     disableMiniFiySelector: false,
     dirVarName: 'document.dir'

package/lib/servers/devBulid.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPaths = getPaths;
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _path = _interopRequireDefault(require("path"));
+
+var _child_process = require("child_process");
+
+var _utils = require("../utils");
+
+var _getCliPath = require("./getCliPath");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const options = (0, _utils.getOptions)(); // const args = process.argv.slice(3);
+
+const {
+  app: {
+    outputFolder
+  }
+} = options;
+const {
+  cssSelectorZipPath
+} = options.impactService;
+const zipname = cssSelectorZipPath ? _path.default.parse(cssSelectorZipPath).name : null;
+
+const outputFolderLocation = _path.default.join(process.cwd(), outputFolder);
+
+function execSyncDefalut(command) {
+  console.log(' command running ==>', command);
+  return (0, _child_process.execSync)(command, {
+    stdio: 'inherit'
+  });
+}
+
+const isQuiet = 'q';
+const webpack = (0, _getCliPath.getCliPath)('webpack'); // console.log('webpack === > ', webpack, fs.existsSync(webpack));
+
+if (_fs.default.existsSync(outputFolderLocation)) {
+  execSyncDefalut(`rm -rf ${outputFolder}`);
+  console.log(`previous ${outputFolder} removed`);
+}
+
+if (_fs.default.existsSync(_path.default.join(process.cwd(), 'build.zip'))) {
+  execSyncDefalut('rm build.zip');
+  console.log('previous build.zip removed');
+} // execSyncDefalut(`${webpack  } --version`);
+// execSyncDefalut(`${webpack} --config ${require.resolve('../configs/webpack.dev.config.js')}`);
+
+
+console.log('webpack compilation starts...');
+const startTime = Date.now(); // const result = spawnSync(
+//   webpack,
+//   ['--config', require.resolve('../configs/webpack.dev.config.js')].concat(
+//     args
+//   ),
+//   { stdio: 'inherit' }
+// );
+
+const result = execSyncDefalut(`${webpack} --config ${require.resolve('../configs/webpack.dev.config.js')}`);
+result && console.log(result);
+
+if (result && result.stderr) {
+  throw result.stderr;
+}
+
+console.log(`compailation done in ${Date.now() - startTime}ms`);
+
+if (zipname) {
+  execSyncDefalut(`zip -r${isQuiet} build.zip ${outputFolder}/*`);
+  console.log('build.zip file created');
+  const result = execSyncDefalut(`zip -r${isQuiet} ${cssSelectorZipPath} ${zipname}/*`);
+  execSyncDefalut(`rm -rf ${zipname}`);
+
+  if (result && result.stderr) {
+    console.log('zip  file not  created', cssSelectorZipPath);
+    console.error(result.stderr);
+  } else {
+    console.log('zip  file  created', cssSelectorZipPath);
+  }
+} // npm run start --app:domain=tsi --impact:cssbountry="{$@&&@$}" --disable-watch --dev-cache --cssselector_zip=css-source-map.zip 
+// npm run start --app_domain=tsi --impact_cssbountry="{$@&&@$}" --disable-watch --dev-cache --cssselector_zip=css-source-map.zip 
+
+
+console.log(`compailation done in ${Date.now() - startTime}ms`);
+
+function getPaths() {
+  return {
+    zipname,
+    cssSelectorZipPath,
+    outputFolderLocation
+  };
+}