@zohodesk/react-cli 1.1.1 → 1.1.2-9.exp.3

package/lib/schemas/index.js

@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // TODO move deprecated options to separate file and manage seperately
 var _default = {
-  cliRootPath: null,
+  alias: null,
   unstableDepsInverse: {
     value: false,
     cli: 'unstable_deps_inverse'
@@ -36,6 +36,9 @@ var _default = {
       cli: 'stop_nodemon'
     }
   },
+  resourceHints: {
+    allowPrefetchingMultipleChunks: false
+  },
   i18n: {
     chunkSplitEnable: {
       value: false,
@@ -49,6 +52,10 @@ var _default = {
     propertiesFolder: null
   },
   css: {
+    cssOrderControler: {
+      enable: false,
+      className: 'customCss'
+    },
     enableRTLSplit: false,
     valueReplacer: null,
     //valueReplacer: [
@@ -68,17 +75,9 @@ var _default = {
       before: [],
       after: []
     },
-    plugins: {
-      valueReplacer: false,
-      selectorReplace: false,
-      hasRTL: false,
-      hoverActive: false,
-      combinerMediaQuery: false,
-      cssVariableReplacement: false,
-      selectorWeight: false,
-      minifier: false,
-      composeMinification: false
-    },
+    plugins: null,
+    // @type  {Boolean | Array}
+    postCssPluginOrder: null,
     patterns: {
       valueReplacer: [],
       selectorReplace: [],
@@ -95,7 +94,8 @@ var _default = {
       hoverActive: [],
       combinerMediaQuery: [],
       cssVariableReplacement: [],
-      selectorWeight: []
+      selectorWeight: [],
+      hasRTL: []
     },
     cssVariableReplacementConfig: '',
     selectorWeightConfig: {
@@ -130,10 +130,23 @@ var _default = {
     cssDirStatement: null
   },
   app: {
+    generateHtml: {
+      value: true,
+      cli: 'generate_html'
+    },
+    displayClassName: {
+      value: false,
+      cli: 'display_class_name'
+    },
     moduleResolvePath: {
       value: '@zohodesk/client_packages_group',
       cli: 'module_resolve_path'
     },
+    enableMjsLoader: {
+      value: false,
+      cli: 'enableMjsLoader'
+    },
+    customClassNamePrefix: [],
     // this option only for impact testing
     devCssFileBountry: {
       value: '',
@@ -219,6 +232,7 @@ var _default = {
       none: '(hover: none)'
     },
     disableES5Transpile: false,
+    disableES5Import: false,
     isReactMig: false,
     hasWidget: false,
     hasEFC: {
@@ -267,17 +281,8 @@ var _default = {
       value: true,
       cli: 'enable_smaphook'
     },
-    plugins: {
-      valueReplacer: false,
-      selectorReplace: false,
-      hasRTL: false,
-      hoverActive: false,
-      combinerMediaQuery: false,
-      cssVariableReplacement: false,
-      selectorWeight: false,
-      minifier: false,
-      composeMinification: false
-    },
+    plugins: null,
+    postCssPluginOrder: null,
     patterns: {
       valueReplacer: [],
       selectorReplace: [],
@@ -294,7 +299,8 @@ var _default = {
       hoverActive: [],
       combinerMediaQuery: [],
       cssVariableReplacement: [],
-      selectorWeight: []
+      selectorWeight: [],
+      hasRTL: []
     },
     cssVariableReplacementConfig: '',
     selectorWeightConfig: {
@@ -330,9 +336,14 @@ var _default = {
     },
     htmlTemplate: {
       minify: null,
-      inject: true
+      inject: true,
+      customScriptLoadingStrategey: {
+        enable: false,
+        options: null
+      }
     },
     removePropTypes: false,
+    customChunksBaseConfig: null,
     customChunks: [{
       name: 'styles',
       pattern: '\\.css$'
@@ -348,9 +359,11 @@ var _default = {
     sourcemap: {
       cli: 'source_map',
       value: 'cheap-eval-source-map'
-    }
+    },
+    externals: null
   },
   docs: {
+    externals: null,
     server: {
       iphost: (0, _getIp.default)(),
       host: (0, _os.hostname)(),
@@ -368,6 +381,7 @@ var _default = {
       hover: 'all and (min--moz-device-pixel-ratio:0) and (hover: hover), (hover: hover)',
       none: '(hover: none)'
     },
+    customClassNamePrefix: [],
     componentFolder: 'src',
     cssUniqueness: {
       value: true,
@@ -382,18 +396,14 @@ var _default = {
       value: true,
       cli: 'react_live'
     },
+    enableMDParser: {
+      value: true,
+      cli: 'markdown_parser'
+    },
     rtlExclude: [],
     selectorReplace: null,
-    plugins: {
-      rtl: false,
-      hoverActive: false,
-      combinerMediaQuery: false,
-      cssVariableReplacement: false,
-      selectorWeight: false,
-      minifier: false,
-      composeMinification: false,
-      selectorReplace: false
-    },
+    plugins: null,
+    postCssPluginOrder: null,
     patterns: {
       valueReplacer: [],
       selectorReplace: [],
@@ -401,14 +411,16 @@ var _default = {
       combinerMediaQuery: [],
       hasRTL: [],
       cssVariableReplacement: [],
-      selectorWeight: []
+      selectorWeight: [],
+      cssUniqueness: []
     },
     exclude: {
       rtl: [],
       hoverActive: [],
       combinerMediaQuery: [],
       cssVariableReplacement: [],
-      selectorWeight: []
+      selectorWeight: [],
+      hasRTL: []
     },
     cssVariableReplacementConfig: '',
     selectorWeightConfig: {
@@ -735,6 +747,22 @@ var _default = {
       cli: 'module_mode'
     },
     disableES5Transpile: true
+  },
+  stats: {
+    enable: {
+      value: false,
+      cli: 'enable_stats'
+    },
+    fileName: null,
+    options: null,
+    excludeKeys: null
+  },
+  babelCustomizationForLibrary: {
+    babelPlugins: []
+  },
+  enableTypeScript: {
+    value: false,
+    cli: 'enable_typescript'
   }
 };
 exports.default = _default;

package/lib/servers/getCliPath.js

@@ -5,19 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getCliPath = getCliPath;
 
-var _path = _interopRequireDefault(require("path"));
+var _path = require("path");
 
 var _os = require("os");
 
 var _fs = require("fs");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _constants = require("../constants");
 
-const appPath = process.cwd();
-const isNodeModuleUnderAppFolder = __dirname.indexOf(appPath) !== -1;
 const isWindows = (0, _os.platform)().toLowerCase() === 'win32';
 
-const _getCliPath = !isNodeModuleUnderAppFolder ? libName => _path.default.join(__dirname, '..', '..', 'node_modules', '.bin', libName) : libName => libName;
+const _getCliPath = libName => (0, _path.join)(_constants.cliNodeModulesPath, '.bin', libName);
 
 const suffixExt = isWindows ? '.cmd' : '';
 

package/lib/servers/requireLocalOrGlobal.js

@@ -25,7 +25,7 @@ function requireLocalOrGlobal(moduleName, opts = {}) {
   const {
     local = true
   } = opts;
-  const isRelativePath = moduleName === '.'; // NOTE: if starts with . then it only mean local
+  const isRelativePath = moduleName[0] === '.'; // NOTE: if starts with . then it only mean local
 
   if (isRelativePath) {
     global = false;

package/lib/utils/cssClassNameGenerate.js

@@ -38,14 +38,35 @@ const isSelectorPackage = (resourcePath, packages) => {
   return isValid;
 };
 
+function patternBasedClass({
+  customClassNamePrefix,
+  context,
+  relativePath,
+  localName
+}) {
+  let newName = null;
+  customClassNamePrefix.forEach(obj => {
+    if (obj.enable) {
+      if (obj.patterns && obj.prefix && (0, _fileHandling.isFileNameMatchingPluginPattern)({
+        filename: context.resourcePath,
+        filterArr: obj.patterns
+      })) {
+        const h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
+        newName = `${obj.prefix}${h}`;
+      }
+    }
+  });
+  return newName;
+}
+
 var _default = (unique = true, {
   filenames,
   packages
-}, classNamePrefix, patterns) => (context, localIdentName, localName) => {
+}, classNamePrefix, customClassNamePrefix, patterns, displayClassName) => (context, localIdentName, localName) => {
   // console.log(patterns, context.resourcePath);
-  // NOTE:  in build macine we use date as folder path.
+  // NOTE:  in build machine 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;
+  // in order to minimize that problem we try in relative path;
   // console.log('context.resourcePath', context.resourcePath, context);
   // let contextResourcePath = context.resourcePath;
   const filePaths = context.resourcePath.split(_path.default.sep);
@@ -53,7 +74,8 @@ var _default = (unique = true, {
   const [fileNameWithoutExt] = fileName.split('.');
   const cleanFileName = fileNameWithoutExt.replace(/-/g, '_').toLowerCase();
 
-  const relativePath = _path.default.relative(context.rootContext, context.resourcePath);
+  const relativePath = _path.default.relative(context.rootContext, context.resourcePath); // console.log('customClassNamePrefix', customClassNamePrefix);
+
   /*
     input : 
     context.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
@@ -70,6 +92,11 @@ var _default = (unique = true, {
   */
 
 
+  if (displayClassName) {
+    return `${fileNameWithoutExt}__${localName}`;
+  } //  return cleanFileName
+
+
   if (context.resourcePath.endsWith('.plain.css')) {
     return localName;
   }
@@ -86,7 +113,18 @@ var _default = (unique = true, {
   if (unique) {
     const h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
     return `${classNamePrefix}${h}`;
-  } //css file has casesensitive selector issue so can't toLowerCase
+  }
+
+  const patternClass = patternBasedClass({
+    customClassNamePrefix,
+    context,
+    relativePath,
+    localName
+  });
+
+  if (patternClass) {
+    return patternClass;
+  } //css file has case sensitive selector issue so can't toLowerCase
   //let local = localName.toLowerCase()
 
 

package/lib/utils/deprecationSupport.js

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deprecationSupport = deprecationSupport;
+
+var _path = _interopRequireDefault(require("path"));
+
+var deprecationHandlers = _interopRequireWildcard(require("../deprecationLogger"));
+
+var _windowsModification = require("../loaderUtils/windowsModification");
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+let {
+  deprecateMessage,
+  deprecateOption,
+  deprecationLoggerEnd
+} = deprecationHandlers;
+
+function modifyCssArr(arr) {
+  return arr.map(x => {
+    const includeCss = !x.startsWith('!');
+    const modifier = includeCss ? '/*.css' : '';
+    const filePath = x.replace(/^!/, ''); // Remove the "!" symbol if present
+
+    return (0, _windowsModification.windowsModificationFile)(_path.default.join(includeCss ? '**' : '!**', filePath, '**', modifier));
+  });
+}
+
+const defaultPostCssPluginOptions = {
+  valueReplacer: null,
+  hasRTL: false,
+  selectorReplace: null,
+  hoverActive: false,
+  combinerMediaQuery: false,
+  cssVariableReplacement: false,
+  selectorWeight: false,
+  minifier: false,
+  composeMinification: false
+};
+
+function deprecationSupport(options, disableDeprecationWarning) {
+  if (disableDeprecationWarning) {
+    /* eslint-disable no-empty-function */
+    deprecateMessage = () => {};
+
+    deprecateOption = () => {};
+
+    deprecationLoggerEnd = () => {};
+    /* eslint-enable no-empty-function */
+
+  }
+
+  options.app.plugins = options.app.plugins || defaultPostCssPluginOptions;
+  options.docs.plugins = options.docs.plugins || defaultPostCssPluginOptions;
+  options.css.plugins = options.css.plugins || defaultPostCssPluginOptions; // if (selectn(options, ".app.hasRTL") === true) {
+
+  if (options.app.hasRTL === true) {
+    deprecateOption('app.hasRTL', 'app.plugins.hasRTL');
+    options.app.plugins.hasRTL = true;
+  }
+
+  if (options.docs.hasRTL === true) {
+    deprecateOption('docs.hasRTL', 'docs.plugins.hasRTL');
+    options.docs.plugins.hasRTL = true;
+  }
+
+  if (options.app.selectorReplace !== null && options.app.plugins && (options.app.plugins.selectorReplace === null || options.app.plugins.selectorReplace === undefined)) {
+    deprecateMessage('when you use app.selectorReplace mention enable or disable app.plugins.selectorReplace by setting value to true or false');
+    options.app.plugins.selectorReplace = true;
+  }
+
+  if (options.docs.selectorReplace !== null && options.docs.plugins && (options.docs.plugins.selectorReplace === null || options.docs.plugins.selectorReplace === undefined)) {
+    deprecateMessage('when you use docs.selectorReplace mention enable or disable docs.plugins.selectorReplace by setting value to true or false');
+    options.docs.plugins.selectorReplace = true;
+  }
+
+  if (options.css.valueReplacer !== null && options.css.plugins && (options.app.plugins.valueReplacer === null || options.app.plugins.valueReplacer === undefined)) {
+    deprecateMessage('when you use app.valueReplacer mention enable or disable app.plugins.valueReplacer by setting value to true or false');
+    options.app.plugins.valueReplacer = true;
+  }
+
+  if (!options.app.patterns) {
+    options.app.patterns = {};
+  }
+
+  function handleRTL(rtlExclude, rtl, hasRTL, type) {
+    if (rtlExclude && rtlExclude.length > 0) {
+      options[type].patterns.hasRTL = modifyCssArr(rtlExclude);
+      deprecateOption(`${type}.rtlExclude`, `${type}.patterns.hasRTL`);
+    }
+
+    if (rtl && rtl.length > 0) {
+      options[type].patterns.hasRTL = modifyCssArr(rtl);
+      deprecateOption(`${type}.exclude.rtl`, `${type}.patterns.hasRTL`);
+    }
+
+    if (hasRTL && hasRTL.length > 0) {
+      options[type].patterns.hasRTL = modifyCssArr(hasRTL);
+      deprecateOption(`${type}.exclude.hasRTL`, `${type}.patterns.hasRTL`);
+    }
+  }
+
+  function addExcludesToPattern(patterns, exclude, type) {
+    Object.keys(defaultPostCssPluginOptions).forEach(key => {
+      if (!exclude[key] || exclude[key].length === 0) {
+        return;
+      }
+
+      if (patterns[key].length === 0) {
+        deprecateOption(`${type}.exclude.${key}`, `${type}.patterns.${key}`);
+        let tempArr = exclude[key];
+        tempArr = tempArr.map(x => _path.default.join('!**', x, '**')); // Since patterns[key] is empty we need to wildcard for allow all others.
+
+        tempArr.unshift('*');
+        patterns[key] = tempArr;
+      } else if (exclude[key].length > 0 && patterns[key].length > 0) {
+        deprecateOption(`${type}.exclude.${key}`, `${type}.patterns.${key}`, ` And Since you have used ${type}.patterns.${key} we won't use ${type}.exclude.${key}. So please make appropriate changes`);
+      }
+    });
+  }
+
+  handleRTL(options.app.rtlExclude, options.app.exclude.rtl, options.app.exclude.hasRTL, 'app');
+  handleRTL(options.docs.rtlExclude, options.docs.exclude.rtl, options.docs.exclude.hasRTL, 'docs');
+  addExcludesToPattern(options.app.patterns, options.app.exclude, 'app');
+  addExcludesToPattern(options.docs.patterns, options.docs.exclude, 'docs');
+  deprecationLoggerEnd();
+}

package/lib/utils/getFileType.js

@@ -45,5 +45,5 @@ function isVideoFileExt(ext) {
 }
 
 function isAudioFileExt(ext) {
-  return ext === '.ogg';
+  return ext === '.ogg' || ext === '.mp3';
 }

package/lib/utils/getOptions.js

@@ -3,18 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.defaulter = exports.default = void 0;
 
 var _child_process = require("child_process");
 
-var _fs = _interopRequireDefault(require("fs"));
+var _fs = _interopRequireWildcard(require("fs"));
 
 var _path = _interopRequireDefault(require("path"));
 
 var _schemas = _interopRequireDefault(require("../schemas"));
 
+var _deprecationSupport = require("./deprecationSupport");
+
+var _deprecationLogger = require("../deprecationLogger");
+
+var _logger = require("../logger");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 // import { argv } from 'process';
 const args = process.argv.slice(2); // console.log('argv', argv);
 
@@ -122,99 +132,51 @@ const defaulter = (target, source) => {
   return defaultObject;
 };
 
-global.reactCLIOptions = null; // function selectn(obj, key) {
-//   let temp = obj;
-//   let keys = key.split('.');
-//   for (let i = 0; i < keys.length; i++) {
-//     const element = keys[i];
-//     temp = temp && temp[element];
-//   }
-//   return temp;
-// }
-
-function deprecationSupport(options) {
-  // if (selectn(options, ".app.hasRTL") === true) {
-  if (options.app.hasRTL === true) {
-    options.app.plugins.hasRTL = true;
-  }
-
-  if (options.docs.hasRTL === true) {
-    options.docs.plugins.hasRTL = true;
-  }
-
-  if (options.app.rtlExclude.length > 0) {
-    options.app.exclude.rtl = options.app.rtlExclude;
-  }
-
-  if (options.docs.rtlExclude.length > 0) {
-    options.docs.exclude.rtl = options.docs.rtlExclude;
-  }
-
-  if (options.app.selectorReplace !== null) {
-    options.app.plugins.selectorReplace = true;
-  }
+exports.defaulter = defaulter;
+global.reactCLIOptions = null;
 
-  if (options.docs.selectorReplace !== null) {
-    options.docs.plugins.selectorReplace = true;
-  }
+const getOptionsFromConfigFile = (appPath, configFileName) => {
+  const fileName = configFileName || 'react-cli.config.js';
 
-  if (options.css.valueReplacer !== null) {
-    options.app.plugins.valueReplacer = true;
+  if (!configFileName) {
+    (0, _logger.verboseLogger)('we have used default react-cli.config.js');
   }
 
-  options.app.exclude.hasRTL = options.app.exclude.rtl;
+  const packagePath = _path.default.join(appPath, fileName);
 
-  if (!options.app.patterns) {
-    options.app.patterns = {};
+  if ((0, _fs.existsSync)(packagePath)) {
+    return require(packagePath).config;
   }
 
-  if (options.app.patterns.valueReplacer.length === 0) {
-    options.app.patterns.valueReplacer = ['*'];
-  }
-
-  if (options.app.patterns.selectorReplace.length === 0) {
-    options.app.patterns.selectorReplace = ['*'];
-  }
+  const oldDeprecatedConfigFilePath = _path.default.join(appPath, 'build.config.js');
 
-  if (options.docs.patterns.selectorReplace.length === 0) {
-    options.docs.patterns.selectorReplace = ['*'];
+  if ((0, _fs.existsSync)(oldDeprecatedConfigFilePath)) {
+    (0, _deprecationLogger.deprecateMessage)('"build.config.js" file was deprecated. So Kindly rename it as "react-cli.config.js"');
+    return require(oldDeprecatedConfigFilePath).config;
   }
 
-  Object.keys(options.app.patterns).forEach(key => {
-    if (options.app.exclude[key] && options.app.patterns[key].length === 0) {
-      let tempArr = options.app.exclude[key];
-      tempArr = tempArr.map(x => `!${x}`);
-      options.app.patterns[key] = tempArr;
-    }
-  });
-  Object.keys(options.docs.patterns).forEach(key => {
-    if (options.docs.exclude[key] && options.docs.patterns[key].length === 0) {
-      let tempArr = options.docs.exclude[key];
-      tempArr = tempArr.map(x => `!${x}`);
-      options.docs.patterns[key] = tempArr;
-    }
-  });
-}
+  return null;
+};
 
-const getOptions = () => {
+const getOptions = fromRoot => {
   if (global.reactCLIOptions) {
     return global.reactCLIOptions;
   }
 
   const appPath = process.cwd();
-  let userSchemas;
+  let userSchemas = getOptionsFromConfigFile(appPath, processEnv.config_file);
 
   const packagePath = _path.default.join(appPath, 'package.json');
 
   if (_fs.default.existsSync(packagePath)) {
-    userSchemas = require(packagePath)['react-cli'] || {};
+    userSchemas = userSchemas || require(packagePath)['react-cli'] || {};
   }
 
   const options = defaulter(_schemas.default, userSchemas || {}); // for future may be for npm 8 edge cases
 
   options.npmVersion = getNpmVersion();
   options.cwd = getCWD();
-  deprecationSupport(options);
+  (0, _deprecationSupport.deprecationSupport)(options, options.disableDeprecationWarning || !fromRoot);
   options.packageVersion = process.env.npm_package_version;
   global.reactCLIOptions = options;
   return options;

package/lib/utils/getServerURL.js

@@ -5,13 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-let getServerURL = (serverInfo, protocol) => {
+const getServerURL = (serverInfo, protocol) => {
+  // eslint-disable-next-line prefer-const
   let {
     host,
     domain,
     port
   } = serverInfo;
 
+  if (domain === 'kubernetes') {
+    return `${protocol ? `${protocol}:` : ''}//${host}`;
+  }
+
   if (protocol) {
     if (protocol === 'ht' + 'tp') {
       port = Number(port) + 1;
@@ -20,7 +25,7 @@ let getServerURL = (serverInfo, protocol) => {
         return `${protocol ? `${protocol}:` : ''}//${host}.${domain}.zohocorpin.com:${Number(port) + 1}`;
       }
 
-      return `${protocol ? `${protocol}:` : ''}//${host}:${port}`;
+      return `${protocol ? `${protocol}:` : ''}//${host}:${Number(port) + 1}`;
     }
   }