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

package/lib/postcss-plugins/hoverActivePlugin.js

@@ -0,0 +1,264 @@
+"use strict";
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = _postcss.default.plugin("postcss-mobile-hover", () => {
+  return root => {
+    function checkHoverIgnore(rule, index) {
+      return rule.nodes !== undefined && rule.nodes[index - 1] !== undefined && rule.nodes[index - 1].type == "comment" && rule.nodes[index - 1].text.includes("hover:ignore");
+    }
+
+    function checkPositionNodeHov(parent) {
+      let clone = parent.clone();
+      clone.params = clone.params + " and (hover: hover)";
+      var posn = -1;
+      root.nodes.map((node, index) => {
+        if (node.params == clone.params) {
+          posn = index;
+        }
+      });
+      return posn;
+    }
+
+    function checkPositionNodeAct(parent) {
+      let clone = parent.clone();
+      clone.params = clone.params + " and (hover: none)";
+      var posn = -1;
+      root.nodes.map((node, index) => {
+        if (clone.params == node.params) {
+          posn = index;
+        }
+      });
+      return posn;
+    }
+
+    function checkPositionNodeFireFox(parent) {
+      var posn = -1;
+      root.nodes.map((nodes, index) => {
+        if (nodes.params == "all and (min--moz-device-pixel-ratio:0)") {
+          posn = index;
+        }
+      });
+      return posn;
+    }
+
+    const hoverRules = []; // Start by identifying all :hover rules
+
+    root.walkAtRules((atrule, index) => {
+      let hoverPresent = false;
+      atrule.walkRules((rule, index) => {
+        if (rule.selector.includes("hover")) {
+          hoverPresent = true;
+        }
+      });
+
+      if (hoverPresent) {
+        root.append({
+          name: "media",
+          params: atrule.params + " and (hover: hover)"
+        });
+        root.append({
+          name: "media",
+          params: atrule.params + " and (hover: none)"
+        });
+        root.append({
+          name: "media",
+          params: "all and (min--moz-device-pixel-ratio:0)"
+        });
+      }
+    });
+    root.walkRules(/:hover/i, (rule, index) => {
+      if (!checkHoverIgnore(rule, index)) {
+        // media hover query with ',' ' ' '+'
+        if (rule.parent.name != undefined && rule.parent.params !== undefined) {
+          //console.log(rule.parent.params)
+          // console.log("media query" , rule.selector)
+          if (rule.selector.includes(" ") && rule.selector.includes(",") || !rule.selector.includes(" ") && rule.selector.includes(",")) {
+            //console.log("media comma", rule.selector)
+            if (rule.parent.params != undefined && !rule.parent.params.includes("hover")) {
+              //console.log("not hovered")
+              var posHov = checkPositionNodeHov(rule.parent);
+              var actHov = checkPositionNodeAct(rule.parent);
+              var firHov = checkPositionNodeFireFox(rule.parent);
+              var hovMed = root.nodes[posHov];
+              var actMed = root.nodes[actHov];
+              var firMed = root.nodes[firHov]; //console.log(hovMed, actMed);
+
+              var str = ",";
+
+              if (rule.selector.includes(",\n")) {
+                str = ",\n";
+              }
+
+              rule.selector.split(str).map(subrule => {
+                subrule = subrule.trim();
+                let clone = rule.clone();
+
+                if (subrule.includes("hover")) {
+                  clone.selector = subrule;
+                  hovMed.append(clone);
+                  firMed.append(clone);
+                  actMed.append(clone.clone({
+                    selector: clone.selector.replace(/:hover/gi, ":active")
+                  }));
+                } else {
+                  clone.selector = subrule;
+                  root.append(clone);
+                }
+              });
+              rule.remove();
+            }
+          } else if (rule.selector.includes(" ") && rule.selector.includes("+") || !rule.selector.includes(" ") && rule.selector.includes("+")) {
+            //console.log("media plus", rule.selector)
+            if (rule.parent.params != undefined && !rule.parent.params.includes("hover")) {
+              //console.log("not hovered")
+              var posHov = checkPositionNodeHov(rule.parent);
+              var actHov = checkPositionNodeAct(rule.parent);
+              var firHov = checkPositionNodeFireFox(rule.parent);
+              var hovMed = root.nodes[posHov];
+              var actMed = root.nodes[actHov];
+              var firMed = root.nodes[firHov]; // console.log(hovMed, actMed);
+
+              if (rule.selector.includes("hover")) {
+                console.log(rule.selector);
+                firMed.append(rule);
+                hovMed.append(rule);
+                actMed.append(rule.clone({
+                  selector: rule.selector.replace(/:hover/gi, ":active")
+                }));
+              } else {
+                root.append(rule);
+              }
+            } else {// console.log(rule.selector)
+            }
+          } else if (rule.selector.includes(" ")) {
+            //console.log("media space", rule.selector)
+            if (rule.parent.params != undefined && !rule.parent.params.includes("hover")) {
+              //console.log("not hovered")
+              var posHov = checkPositionNodeHov(rule.parent);
+              var actHov = checkPositionNodeAct(rule.parent);
+              var firHov = checkPositionNodeFireFox(rule.parent);
+              var hovMed = root.nodes[posHov];
+              var actMed = root.nodes[actHov];
+              var firMed = root.nodes[firMed]; //console.log(hovMed, actMed);
+
+              if (rule.selector.includes("hover")) {
+                hovMed.append(rule);
+                actMed.append(rule.clone({
+                  selector: rule.selector.replace(/:hover/gi, ":active")
+                }));
+              } else {
+                root.append(rule);
+              }
+            }
+          }
+        } //usual hover query with ',' ' ' '+'
+        else if ((rule.selector.includes(",") || rule.selector.includes(" ") || rule.selector.includes("+")) && rule.parent.name == undefined) {
+          if (rule.selector.includes(" ") && rule.selector.includes(",") || !rule.selector.includes(" ") && rule.selector.includes(",")) {
+            //console.log("comma" , rule.selector.split('\n'));
+            rule.selector.split(",\n").map(subrule => {
+              subrule = subrule.trim();
+              let clone = rule.clone();
+
+              if (subrule.includes("hover")) {
+                clone.selector = subrule;
+                hoverRules.push(clone);
+              } else {
+                clone.selector = subrule;
+                root.append(clone);
+              }
+            });
+            rule.remove();
+          } else if (rule.selector.includes(" ") && rule.selector.includes("+") || !rule.selector.includes(" ") && rule.selector.includes("+")) {
+            //console.log("plus" , rule.selector);
+            if (rule.selector.includes("hover")) {
+              //console.log("plus:", rule.selector);
+              hoverRules.push(rule);
+              rule.remove();
+            }
+          } else if (rule.selector.includes(" ")) {
+            //console.log("space", rule.selector);
+            hoverRules.push(rule);
+            rule.remove();
+          }
+        } // usual hover query
+        else {
+          //console.log(rule);
+          if (rule.selector.includes("hover")) {
+            hoverRules.push(rule);
+          }
+        }
+      }
+    }); // If there are any :hover rules in the input, then create media queries
+    // to automatically translate it into :active on touch-based devices
+
+    if (hoverRules.length > 0) {
+      //console.log(hoverRules)
+      // Create a media query targetting ie10 + 11, as these browsers
+      // wont support @media (hover: hover) - but we know that this
+      // browser never runs on mobile devices, so we'll just push the
+      // hover rules there
+      // const ieQuery = root.append({
+      //     name: 'media',
+      //     params:
+      //         'all and ' +
+      //         '(-ms-high-contrast: none), ' +
+      //         '(-ms-high-contrast: active)'
+      // }).last;
+      // Create a media query targetting firefox, as this browser doesn't
+      // support @media (hover: hover)... Technically this browser could
+      // run on both desktop and mobile devices, but we're going to be
+      // applying :hover and hope for the best
+      const firefoxQuery = root.append({
+        name: "media",
+        params: "all and (min--moz-device-pixel-ratio:0)"
+      }).last; // Create a media query targetting devices that actually support
+      // hover
+
+      const hoverQuery = root.append({
+        name: "media",
+        params: "(hover: hover)"
+      }).last; // Create a media query targetting devices that don't support hover
+      // (ie. devices where we should fall back to :active instead)
+
+      const activeQuery = root.append({
+        name: "media",
+        params: "(hover: none)"
+      }).last; // Loop through the hover rules and apply them to each of the media
+      // queries
+      // eslint-disable-next-line no-labels
+
+      outerLoop: for (const hoverRule of hoverRules) {
+        // determine if the rule has been nested inside another media
+        // query; in that case bail out as we have no way of reliably
+        // nesting these queries
+        let parentRule = hoverRule.parent;
+
+        while (parentRule) {
+          if (parentRule.type === "atrule" && parentRule.name === "media") {
+            // eslint-disable-next-line no-labels
+            continue outerLoop;
+          }
+
+          parentRule = parentRule.parent;
+        } // Push a clone of the :hover rule 'as is' to queries where we
+        // expect the user's device to support hover
+        // ieQuery.append(hoverRule.clone());
+
+
+        firefoxQuery.append(hoverRule.clone());
+        hoverQuery.append(hoverRule.clone()); // Push a clone of the :hover rule, where we transform the
+        // selector to :active to the query targetting devices that
+        // don't support hover
+
+        activeQuery.append(hoverRule.clone({
+          selector: hoverRule.selector.replace(/:hover/gi, ":active")
+        })); // remove legacy rule from output
+
+        hoverRule.remove();
+      }
+    }
+  };
+});

package/lib/postcss-plugins/keyframesPlugin.js

@@ -0,0 +1,126 @@
+"use strict";
+
+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; }
+
+module.exports = _postcss.default.plugin("postcss-reduced-motion", () => {
+  function animDeclPosn(rule) {
+    let posn = -1;
+    rule.walkDecls((decl, index) => {
+      //console.log(decl.prop, " " , decl.value);
+      if (decl.prop.includes("animation")) {
+        //console.log(decl.prop," selected")
+        posn = index;
+      }
+    });
+    return posn;
+  }
+
+  return root => {
+    let redRules = [];
+    root.walkAtRules((atrule, index) => {
+      if (index != 0) {
+        //ignore case
+        let ignore = false;
+
+        if (root.nodes[index - 1].type == "comment") {
+          ignore = root.nodes[index - 1].text.includes("reduced-motion:ignore");
+        } //animation none push to reduced motion
+
+
+        if (!ignore) {
+          //console.log(atrule)
+          atrule.walkRules(rule => {
+            let pos = animDeclPosn(rule);
+
+            if (pos != -1) {
+              let ruleNew = rule.clone();
+              let decl = ruleNew.nodes[pos];
+              let declClone = decl.clone();
+              declClone.value = "none";
+              ruleNew.walkDecls(declVal => declVal.remove());
+              ruleNew.append(declClone);
+              let atRuleNew = atrule.clone();
+              atRuleNew.nodes = [];
+              atRuleNew.push(ruleNew);
+              redRules.push(atRuleNew);
+            }
+          });
+        }
+      } else {
+        //animation none push to reduced motion
+        //console.log(atrule)
+        atrule.walkRules(rule => {
+          let pos = animDeclPosn(rule);
+
+          if (pos != -1) {
+            let ruleNew = rule.clone();
+            let decl = ruleNew.nodes[pos];
+            let declClone = decl.clone();
+            declClone.value = "none";
+            ruleNew.walkDecls(declVal => declVal.remove());
+            ruleNew.append(declClone);
+            let atRuleNew = atrule.clone();
+            atRuleNew.nodes = [];
+            atRuleNew.push(ruleNew);
+            redRules.push(atRuleNew);
+          }
+        });
+      }
+    });
+    root.walkRules((rule, index) => {
+      if (rule.type === "rule" && rule.parent.name == undefined) {
+        if (index != 0) {
+          //ignore case
+          let ignore = false;
+
+          if (root.nodes[index - 1].type == "comment") {
+            ignore = root.nodes[index - 1].text.includes("reduced-motion:ignore");
+          } //animation none push to reduced motion
+
+
+          if (!ignore) {
+            //console.log(atrule)
+            rule.walkDecls(decl => {
+              if (decl != undefined && decl.prop.includes("animation")) {
+                let declClone = decl.clone();
+                let newRule = rule.clone();
+                declClone.value = "none";
+                newRule.walkDecls(declVal => declVal.remove());
+                newRule.append(declClone);
+                redRules.push(newRule);
+              }
+            });
+          }
+        } else {
+          //animation none push to reduced motion
+          //console.log(atrule)
+          rule.walkDecls(decl => {
+            if (decl != undefined && decl.prop.includes("animation")) {
+              let declClone = decl.clone();
+              let newRule = rule.clone();
+              declClone.value = "none";
+              newRule.walkDecls(declVal => declVal.remove());
+              newRule.append(declClone);
+              redRules.push(newRule);
+            }
+          });
+        }
+      }
+    });
+
+    if (redRules.length > 0) {
+      let redMtnQuery = (0, _postcss.atRule)({
+        name: "media",
+        params: "(prefers-reduced-motion)"
+      });
+      root.append(redMtnQuery).last;
+      redRules.map(rule => {
+        redMtnQuery.append(rule);
+      });
+    }
+  };
+});

package/lib/schemas/index.js

@@ -14,6 +14,11 @@ var _getCurrentBranch = _interopRequireDefault(require("../utils/getCurrentBranc
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = {
+  cliRootPath: null,
+  unstableDepsInverse: {
+    value: false,
+    cli: 'unstable_deps_inverse'
+  },
   sslCertURL: {
     value: null,
     cli: 'ssl_cert_url'
@@ -60,7 +65,10 @@ var _default = {
     dirVarName: 'document.dir'
   },
   efc: {
-    hasEFC: false,
+    hasEFC: {
+      value: false,
+      cli: 'enable_efc'
+    },
     createSDkFile: false,
     nameScope: 'ZOHODESK',
     version: 'default',
@@ -148,7 +156,10 @@ var _default = {
     disableES5Transpile: false,
     isReactMig: false,
     hasWidget: false,
-    hasEFC: false,
+    hasEFC: {
+      value: false,
+      cli: 'enable_efc'
+    },
     enableChunkHash: {
       value: false,
       cli: 'hash_enable'
@@ -204,6 +215,8 @@ var _default = {
       value: 'zd',
       cli: 'class_prefix'
     },
+    combinerMq: false,
+    hoverActive: false,
     selectorReplace: null,
     devConsoleExculde: {
       value: false,
@@ -256,7 +269,12 @@ var _default = {
       value: true,
       cli: 'css_unique'
     },
+    enableChunkHash: false,
+    combinerMq: false,
+    hoverActive: false,
+    keyframesRedMtn: false,
     folder: 'src',
+    disableES5Transpile: false,
     hasRTL: false,
     rtlExclude: [],
     cssHashSelectors: {
@@ -553,6 +571,10 @@ var _default = {
       value: null,
       cli: 'clone_revision'
     },
+    shallowClone: {
+      value: false,
+      cli: 'shallow_clone'
+    },
     projectName: {
       value: null,
       cli: 'clone_proj_name'

package/lib/servers/{devBulid.js → devBuild.js}

@@ -18,6 +18,9 @@ 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);
+// NOTE: need to discuss about in below codes,
+//  when we run webpack the  usable options  that comes  for npm run not  working  as automatical
+//  we are use this option always --disable_watch=true reason for now no need for  
 
 const {
   app: {
@@ -61,8 +64,9 @@ const startTime = Date.now(); // const result = spawnSync(
 //   ),
 //   { stdio: 'inherit' }
 // );
+// --disable_watch=true
 
-const result = execSyncDefalut(`${webpack} --config ${require.resolve('../configs/webpack.dev.config.js')}`);
+const result = execSyncDefalut(`${webpack} --config ${require.resolve('../configs/webpack.dev.config.js')} ${process.argv.slice(2).map(o => o.replace(/(.*?)=(.*)/, '$1="$2"')).join(' ')} `);
 result && console.log(result);
 
 if (result && result.stderr) {
@@ -83,8 +87,8 @@ if (zipname) {
   } 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 
+} // 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`);

package/lib/servers/httpsOptions.js

@@ -12,8 +12,7 @@ var _path = _interopRequireDefault(require("path"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const httpsOptions = {
-  key: _fs.default.readFileSync(_path.default.join(__dirname, '../../cert/key.pem')),
-  cert: _fs.default.readFileSync(_path.default.join(__dirname, '../../cert/cert.pem')),
-  passphrase: _fs.default.readFileSync(_path.default.join(__dirname, '../../cert/passphrase.pem')).toString()
+  key: _fs.default.readFileSync(_path.default.join(__dirname, '../../cert/Tsicsezwild-22-23.key')),
+  cert: _fs.default.readFileSync(_path.default.join(__dirname, '../../cert/Tsicsezwild-22-23.crt'))
 };
 exports.httpsOptions = httpsOptions;

package/lib/servers/nowatchserver.js

@@ -14,7 +14,7 @@ var _utils = require("../utils");
 
 var _httpsOptions = require("./httpsOptions");
 
-var _devBulid = require("./devBulid");
+var _devBuild = require("./devBuild");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -42,7 +42,7 @@ const {
   zipname,
   cssSelectorZipPath,
   outputFolderLocation
-} = (0, _devBulid.getPaths)();
+} = (0, _devBuild.getPaths)();
 const app = (0, _express.default)();
 
 if (hasMock) {

package/lib/servers/server.js

@@ -69,7 +69,8 @@ if (mode === 'prod') {
   config = require('../configs/webpack.dev.config');
 } else {
   throw new Error('You must configure valid option in mode');
-}
+} // console.log({ contextURL });
+
 
 let compiler = (0, _webpack.default)(config);
 let webpackServerOptions = {
@@ -144,15 +145,22 @@ app.post('/wmsmockapi', (req, res) => {
   res.send('success');
 });
 let webpackCompilation;
+let initalHTML;
 compiler.hooks.afterCompile.tap('ReactCLI', compilation => {
   webpackCompilation = compilation;
 });
+compiler.hooks.done.tap('ReactCLI', () => {
+  const indexHtml = webpackCompilation.assets['index.html'];
+
+  if (indexHtml) {
+    initalHTML = indexHtml.source();
+  }
+});
 
 if (contextURL) {
   app.use(contextURL, _express.default.static(context));
   app.use(`${contextURL}/*`, (req, res) => {
-    let indexHtml = webpackCompilation.assets['index.html'];
-    res.send(indexHtml && indexHtml.source());
+    res.send(initalHTML);
   });
 } else {
   app.use(_express.default.static(context));

package/lib/utils/repoClone.js

@@ -28,6 +28,7 @@ let {
     branch,
     revision,
     projectName,
+    shallowClone,
     cacheDir,
     remoteName,
     shouldDelete
@@ -73,9 +74,11 @@ let cloneRepo = () => {
     }
   }
 
-  (0, _index.log)(`Going to clone ${url} repo to ${cacheDir} path`); // this is for some time error will because of hg or git so we addid error log for this 
+  (0, _index.log)(`Going to clone ${url} repo to ${cacheDir} path`); // this is for some time error will because of hg or git so we addid error log for this
 
-  spawnSyncWithErrorLog(type, ['clone', url, revisionOrBranch, projectName], {
+  let oargs = ['clone', url, revisionOrBranch, projectName];
+  type === 'git' && shallowClone && oargs.push('--depth=1');
+  spawnSyncWithErrorLog(type, oargs, {
     cwd: cacheDir,
     stdio: 'inherit'
   });

package/lib/utils/rtl.js

@@ -18,7 +18,10 @@ let src = _path.default.join(cwd, process.argv[2]);
 
 let dist = _path.default.join(cwd, process.argv[3]);
 
-(0, _folderIterator.default)(src, dist, ['.css'], false, (fromPath, toPath) => {
+let canWacth = '-w' === process.argv[4];
+
+// import { useExitCleanup } from './useExitCleanup';
+function watchHandler(fromPath, toPath) {
   let css = _fs.default.readFileSync(fromPath);
 
   (0, _postcss.default)([(0, _postcssRtl.default)({
@@ -39,4 +42,18 @@ let dist = _path.default.join(cwd, process.argv[3]);
       _fs.default.writeFile(`${toPath}.map`, result.map, () => true);
     }
   });
-});
+}
+
+(0, _folderIterator.default)(src, dist, ['.css'], false, (fromPath, toPath) => {
+  if (canWacth && fromPath) {
+    _fs.default.watchFile(fromPath, () => {
+      watchHandler(fromPath, toPath);
+    });
+  }
+
+  watchHandler(fromPath, toPath);
+}); // if (canWacth) {
+//   useExitCleanup(() => {
+//     fs.unwatchFile(src, watchHandler);
+//   });
+// }

package/lib/utils/useExitCleanup.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useExitCleanup = useExitCleanup;
+//so the program will not close instantly
+let listeners = [];
+let hasCalled = false;
+
+function useExitCleanup(listener) {
+  if (!hasCalled) {
+    process.stdin.resume();
+    hasCalled = true;
+  }
+
+  listeners.push(listeners);
+  return () => {
+    listeners = listeners.filter(l => l !== listener);
+  };
+}
+
+function exitHandler(options, exitCode) {
+  if (options.cleanup) {
+    console.log('clean');
+  }
+
+  if (exitCode || exitCode === 0) {
+    console.log(exitCode);
+  }
+
+  if (options.exit) {
+    process.exit();
+  }
+} //do something when app is closing
+
+
+process.on('exit', exitHandler.bind(null, {
+  cleanup: true
+})); //catches ctrl+c event
+
+process.on('SIGINT', exitHandler.bind(null, {
+  exit: true
+})); // catches "kill pid" (for example: nodemon restart)
+
+process.on('SIGUSR1', exitHandler.bind(null, {
+  exit: true
+}));
+process.on('SIGUSR2', exitHandler.bind(null, {
+  exit: true
+})); //catches uncaught exceptions
+
+process.on('uncaughtException', exitHandler.bind(null, {
+  exit: true
+}));