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

package/packages/client_build_tool/lib/shared/babel/__test__/es2021/logicalOperatorAssignments.test.js

@@ -0,0 +1,25 @@
+"use strict";
+
+const {
+  convertCode
+} = require('../utilities');
+
+test('nullish operator', () => {
+  const inputCode = `a ??= b;
+obj.a.b ??= c;`;
+  const outputCode = `a ??= b;
+obj.a.b ??= c;`;
+  expect(convertCode(inputCode)).toBe(outputCode);
+});
+test('logical operators', () => {
+  const inputCode = `a ||= b;
+obj.a.b ||= c;
+
+a &&= b;
+obj.a.b &&= c;`;
+  const outputCode = `a ||= b;
+obj.a.b ||= c;
+a &&= b;
+obj.a.b &&= c;`;
+  expect(convertCode(inputCode)).toBe(outputCode);
+});

package/packages/client_build_tool/lib/shared/babel/__test__/es2021/promiseAny.test.js

@@ -0,0 +1,16 @@
+"use strict";
+
+const {
+  convertCode
+} = require('../utilities');
+
+test('promise.any method', () => {
+  const inputCode = `const promise1 = new Promise(resolve => setTimeout(resolve, 100, 'quick'));
+const promise2 = new Promise(resolve => setTimeout(resolve, 500, 'slow'));
+const promises = [promise1, promise2];Promise.any(promises).then(value => console.log(value));`;
+  const outputCode = `const promise1 = new Promise(resolve => setTimeout(resolve, 100, 'quick'));
+const promise2 = new Promise(resolve => setTimeout(resolve, 500, 'slow'));
+const promises = [promise1, promise2];
+Promise.any(promises).then(value => console.log(value));`;
+  expect(convertCode(inputCode)).toBe(outputCode);
+});

package/packages/client_build_tool/lib/shared/babel/__test__/es2021/stringReplaceMethod.test.js

@@ -0,0 +1,16 @@
+"use strict";
+
+const {
+  convertCode
+} = require('../utilities');
+
+test('string.replaceAll method', () => {
+  const inputCode = `let text = "I love cats. Cats are very easy to love. Cats are very popular."
+text = text.replaceAll("Cats","Dogs");
+text = text.replaceAll(/cats/g,"dogs");
+`;
+  const outputCode = `let text = "I love cats. Cats are very easy to love. Cats are very popular.";
+text = text.replaceAll("Cats", "Dogs");
+text = text.replaceAll(/cats/g, "dogs");`;
+  expect(convertCode(inputCode)).toBe(outputCode);
+});

package/packages/client_build_tool/lib/shared/babel/__test__/es2022/Array-atMethod.test.js

@@ -0,0 +1,13 @@
+"use strict";
+
+const {
+  convertCode
+} = require('../utilities');
+
+test('array.at method', () => {
+  const inputCode = `const fruits = ["Banana", "Orange", "Apple", "Mango"];
+let fruit = fruits.at(2);`;
+  const outputCode = `const fruits = ["Banana", "Orange", "Apple", "Mango"];
+let fruit = fruits.at(2);`;
+  expect(convertCode(inputCode)).toBe(outputCode);
+});

package/packages/client_build_tool/lib/shared/babel/__test__/es2022/ObjectKeyCheck.test.js

@@ -0,0 +1,27 @@
+"use strict";
+
+const {
+  convertCode
+} = require('../utilities');
+
+test('check for private fields', () => {
+  const inputCode = `class user{
+  #id ='12567890';
+  static userId(obj) {
+    if(!(#id in obj)) {
+      return 'Empty user';
+    }
+    return 'User ID: $\{ obj.#id}';
+  }
+}`;
+  const outputCode = `class user {
+  #id = '12567890';
+  static userId(obj) {
+    if (!(#id in obj)) {
+      return 'Empty user';
+    }
+    return 'User ID: $\{ obj.#id}';
+  }
+}`;
+  expect(convertCode(inputCode)).toBe(outputCode);
+});

package/packages/client_build_tool/lib/shared/babel/__test__/es2022/ObjecthasOwnMethod.test.js

@@ -0,0 +1,19 @@
+"use strict";
+
+const {
+  convertCode
+} = require('../utilities');
+
+test('Object.hasOwn', () => {
+  const inputCode = `const uesr = {
+    name  :'john',
+    age : 20,
+}
+console.log(Object.hasOwn(uesr,'name'));`;
+  const outputCode = `const uesr = {
+  name: 'john',
+  age: 20
+};
+console.log(Object.hasOwn(uesr, 'name'));`;
+  expect(convertCode(inputCode)).toBe(outputCode);
+});

package/packages/client_build_tool/lib/shared/babel/__test__/es2022/RegexMatchIndices.test.js

@@ -0,0 +1,20 @@
+"use strict";
+
+const {
+  convertCode
+} = require('../utilities');
+
+test('regex match indices', () => {
+  const inputCode = `const regex = RegExp('foo', 'dg');
+const str = 'foobar,foobaz';
+const matches=[...str.matchAll(regex)];
+const firstMatch = match?.[0];
+const indices = firstMatcxh.indices?.[0];
+`;
+  const outputCode = `const regex = RegExp('foo', 'dg');
+const str = 'foobar,foobaz';
+const matches = [...str.matchAll(regex)];
+const firstMatch = match?.[0];
+const indices = firstMatcxh.indices?.[0];`;
+  expect(convertCode(inputCode)).toBe(outputCode);
+});

package/packages/client_build_tool/lib/shared/babel/__test__/es2022/String-atMethod.test.js

@@ -0,0 +1,15 @@
+"use strict";
+
+const {
+  convertCode
+} = require('../utilities');
+
+test('string.at method', () => {
+  const inputCode = `const name = "W3Schools";
+let letter = name.at(2);
+let letter2 = name[1]`;
+  const outputCode = `const name = "W3Schools";
+let letter = name.at(2);
+let letter2 = name[1];`;
+  expect(convertCode(inputCode)).toBe(outputCode);
+});

package/packages/client_build_tool/lib/shared/babel/__test__/es2022/error.Cause.test.js

@@ -0,0 +1,23 @@
+"use strict";
+
+const {
+  convertCode
+} = require('../utilities');
+
+test('error.cause method', () => {
+  const inputCode = `try{
+  await fetch(item);
+}catch (error){
+  throw new Error("An error occured while fetching item",{
+    cause:error,
+  });
+}`;
+  const outputCode = `try {
+  await fetch(item);
+} catch (error) {
+  throw new Error("An error occured while fetching item", {
+    cause: error
+  });
+}`;
+  expect(convertCode(inputCode)).toBe(outputCode);
+});

package/packages/client_build_tool/lib/shared/babel/__test__/es2022/keysCheckinPrivateFields.test.js

@@ -0,0 +1,27 @@
+"use strict";
+
+const {
+  convertCode
+} = require('../utilities');
+
+test('Ergonomic Brand checks for Private Fields', () => {
+  const inputCode = `class User {
+    #id = "123";
+    static userId(obj){
+        if(!(#id in obj)){
+            return 'Empty user';
+        }
+        return obj.#id;
+    }
+}`;
+  const outputCode = `class User {
+  #id = "123";
+  static userId(obj) {
+    if (!(#id in obj)) {
+      return 'Empty user';
+    }
+    return obj.#id;
+  }
+}`;
+  expect(convertCode(inputCode)).toBe(outputCode);
+});

package/packages/client_build_tool/lib/shared/babel/__test__/es2022/privateMethodsAndFields.test.js

@@ -0,0 +1,23 @@
+"use strict";
+
+const {
+  convertCode
+} = require('../utilities');
+
+test('private methods aand fields', () => {
+  const inputCode = `class Student {
+  name="john";
+  #password = "1234567890";
+  set #setPassword(hash){
+    this.#password = hash; 
+  }
+}`;
+  const outputCode = `class Student {
+  name = "john";
+  #password = "1234567890";
+  set #setPassword(hash) {
+    this.#password = hash;
+  }
+}`;
+  expect(convertCode(inputCode)).toBe(outputCode);
+});

package/packages/client_build_tool/lib/shared/babel/__test__/es2022/staticFieldsAndMethod.test.js

@@ -0,0 +1,54 @@
+"use strict";
+
+const {
+  convertCode
+} = require('../utilities');
+
+test('static fields and methods', () => {
+  const inputCode = `class MyMath{
+    static PI = 3.14159;
+    static #E = 2.7899;
+    static #calc(){
+        return 10;
+    }
+}`;
+  const outputCode = `class MyMath {
+  static PI = 3.14159;
+  static #E = 2.7899;
+  static #calc() {
+    return 10;
+  }
+}`;
+  expect(convertCode(inputCode)).toBe(outputCode);
+});
+test('static Block', () => {
+  const inputCode = `class Dictionary {
+    static words = [
+        {
+            type:'animal',
+            value:'cat'
+        }
+    ];
+    static animals = [];
+    static {
+        this.words.forEach(word=>{
+           if(word.type === 'animal'){
+              this.animals.push(word.value)
+           }
+        })
+    }
+}`;
+  const outputCode = `class Dictionary {
+  static words = [{
+    type: 'animal',
+    value: 'cat'
+  }];
+  static animals = [];
+  static #_ = this.words.forEach(word => {
+    if (word.type === 'animal') {
+      this.animals.push(word.value);
+    }
+  });
+}`;
+  expect(convertCode(inputCode)).toBe(outputCode);
+});

package/packages/client_build_tool/lib/shared/babel/__test__/es2022/topLevelAwait.test.js

@@ -0,0 +1,11 @@
+"use strict";
+
+const {
+  convertCode
+} = require('../utilities');
+
+test('Await import', () => {
+  const inputCode = 'const schema = await buildSchema();';
+  const outputCode = 'const schema = await buildSchema();';
+  expect(convertCode(inputCode)).toBe(outputCode);
+});

package/packages/client_build_tool/lib/shared/babel/__test__/es2022/weakRef.test.js

@@ -0,0 +1,17 @@
+"use strict";
+
+const {
+  convertCode
+} = require('../utilities');
+
+test('weak ref', () => {
+  const inputCode = `let obj = { name: "Magiko" }
+const myRef = new WeakRef(obj) 
+myRef.deref()`;
+  const outputCode = `let obj = {
+  name: "Magiko"
+};
+const myRef = new WeakRef(obj);
+myRef.deref();`;
+  expect(convertCode(inputCode)).toBe(outputCode);
+});

package/packages/client_build_tool/lib/shared/babel/__test__/utilities.js

@@ -0,0 +1,28 @@
+"use strict";
+
+const babel = require('@babel/core');
+
+const options = {
+  presets: [[require.resolve('@babel/preset-env'), {
+    modules: false,
+    useBuiltIns: 'usage',
+    corejs: 3,
+    targets: {
+      browsers: [// 'chrome 111',
+      // 'edge 111',
+      // 'firefox 111',
+      // 'safari 16.2',
+      'chrome 104', 'edge 104', 'firefox 104', 'safari 15.5']
+    }
+  }], require.resolve('@babel/preset-react')]
+};
+
+function convertCode(code) {
+  const result = babel.transformSync(code, options);
+  return result.code;
+}
+
+module.exports = {
+  options,
+  convertCode
+};

package/packages/client_build_tool/lib/shared/babel/babelWebConfig.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.babelWebConfig = babelWebConfig;
+
+var _helperCompilationTargets = _interopRequireDefault(require("@babel/helper-compilation-targets"));
+
+var _logger = require("../../logger");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-use-before-define */
+const supportedBrowserVersions = ['last 3 Chrome versions', 'last 3 Firefox versions', 'last 3 Edge versions', 'last 3 Safari versions'];
+
+function customBabelPlugins(babelPlugins) {
+  return babelPlugins.map(p => p).filter(Boolean);
+}
+
+function babelWebConfig(options, mode) {
+  const {
+    plugins: babelPlugins,
+    browserList
+  } = options.babelCustomizations;
+  return {
+    presets: [getBabelPresetEnvConfig(browserList, mode), require.resolve('@babel/preset-react')],
+    plugins: customBabelPlugins(babelPlugins)
+  };
+}
+
+function getBabelPresetEnvConfig(browserList, mode) {
+  if (mode === 'lib') {
+    return require.resolve('@babel/preset-env');
+  }
+
+  const browsers = browserList || supportedBrowserVersions;
+  (0, _logger.verboseLogger)('getTargets', (0, _helperCompilationTargets.default)({
+    browsers
+  }));
+  return [require.resolve('@babel/preset-env'), {
+    modules: false,
+    useBuiltIns: 'usage',
+    corejs: 3,
+    targets: {
+      browsers
+    }
+  }];
+}

package/packages/client_build_tool/lib/shared/babel/runBabelForJSFile.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.runBabelForJSFile = runBabelForJSFile;
+
+var _core = require("@babel/core");
+
+var _babelWebConfig = require("./babelWebConfig");
+
+var _copyFile = require("../fileUtils/copyFile");
+
+function runBabelForJSFile({
+  filename,
+  outputFile,
+  options,
+  mode = 'es'
+}) {
+  // const jsSourceCode = readFileSync(filename).toString();
+  const babelConfig = (0, _babelWebConfig.babelWebConfig)(options, mode);
+  const result = (0, _core.transformFileSync)(filename, babelConfig);
+  (0, _copyFile.writeFile)(outputFile, result.code);
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/common/decidePublicPath.js

@@ -18,9 +18,7 @@ function modifiedServerOptions(options) {
   const {
     server
   } = options;
-  const {
-    port
-  } = server;
+  const port = Number(server.port);
   const httpsOptions = (0, _httpsOptions.httpsOptionsWithUserFriendlyError)(options);
   const machineDomain = (0, _getServerURL.getServerDomain)(server);
   const httpPort = port + 1;

package/packages/client_build_tool/lib/shared/bundler/webpack/common/modeUtils.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getWebpackMode = getWebpackMode;
+exports.isDevelopmentMode = isDevelopmentMode;
+exports.isNotProduction = isNotProduction;
+exports.isProductionMode = isProductionMode;
+
+function isProductionMode(mode) {
+  return mode === 'prod' || mode === 'production';
+}
+
+function isDevelopmentMode(mode) {
+  return mode === 'dev' || mode === 'development';
+}
+
+function getWebpackMode(options) {
+  const {
+    mode
+  } = options;
+  return isProductionMode(mode) ? 'production' : 'development';
+}
+
+function isNotProduction(options) {
+  const {
+    mode
+  } = options;
+  return isProductionMode(mode) === false;
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/common/nameTemplates.js

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.isI18nFile = void 0;
 exports.nameTemplates = nameTemplates;
+
+var _modeUtils = require("./modeUtils");
+
+// nameTemplate.js
 // NOTE: these below code can be done in js,
-//   we did copy paste in order to aviod unnecessary confussion
+//   we did copy paste in order to avoid unnecessary confusion
+// NOTE: array[0] is dev mode file templates and array[1] is prod mode file templates 
 const templates = {
+  html: ['index.html', 'index.[contenthash].html'],
   js: ['js/[name].js', 'js/[name].[contenthash].js'],
   chunkjs: ['js-chunks/[name].js', 'js-chunks/[name].[contenthash].js'],
   i18njs: ['i18n-chunks/[locale]/[name].i18n.js', 'i18n-chunks/[locale]/[name].[chunkhash].i18n.js'],
@@ -16,11 +23,11 @@ const templates = {
   workerjs: ['js/[name].js', 'js/[name].[contenthash].js'],
   css: ['css/[name].css', 'css/[name].[contenthash].css'],
 
-  /**
-   * NOTE: when you change (cssdir) this line it  will have affect on Below files will be affected
-   *   custom_plugins/RtlSplitPlugin/*
-   *   pluginConfigs/configMiniCSSExtractPlugin.js
-   *   pluginConfigs/configRtlCssPlugin.js
+  /**
+   * NOTE: when you change (cssdir) this line it  will have affect on Below files will be affected
+   *   custom_plugins/RtlSplitPlugin/*
+   *   pluginConfigs/configMiniCSSExtractPlugin.js
+   *   pluginConfigs/configRtlCssPlugin.js
    *  */
   cssdir: ['css/[name].[dir].css', 'css/[name].[contenthash].[dir].css'],
   image: ['images/[name][ext]', 'images/[name].[contenthash][ext]'],
@@ -30,22 +37,34 @@ const templates = {
   video: ['videos/[name][ext]', 'videos/[name].[contenthash][ext]']
 };
 
-function createNameTemplate(name, enableChunkHash) {
-  // const ext = `${enableChunkHash ? '.[hash:20]' : ''}[ext]`;
-  return enableChunkHash ? name[1] : name[0];
+function createNameTemplate(name, useHash) {
+  // const ext = `${useHash ? '.[hash:20]' : ''}[ext]`;
+  return useHash ? name[1] : name[0];
 }
 
 function nameTemplates(type, options) {
   const {
-    enableChunkHash
+    enableChunkHash,
+    mode
   } = options;
   const tname = templates[type];
 
   if (!tname) {
-    throw Error(`specifiyed type not valid Type: ${type}`);
+    throw Error(`specified type not valid Type: ${type}`);
+  }
+
+  let useHash = (0, _modeUtils.isProductionMode)(mode) || enableChunkHash;
+
+  if ((0, _modeUtils.isDevelopmentMode)(mode) && type === 'html') {
+    useHash = false;
   }
 
-  return createNameTemplate(tname, enableChunkHash);
+  return createNameTemplate(tname, useHash);
 } // export function cssDirNameTemplate(dir, options) {
 //   return nameTemplates('cssdir', options).replace(/\[dir\]/g, dir);
-// }
+// }
+
+
+const isI18nFile = url => url.endsWith('.i18n.js');
+
+exports.isI18nFile = isI18nFile;

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/AddManifestJson/addFilesToManifestJson.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addFilesToManifestJson = addFilesToManifestJson;
+
+var _utilities = require("./utilities");
+
+function addFilesToManifestJson(manifestJson, option, assets, hashLength) {
+  const json = manifestJson;
+  Object.keys(assets).forEach(filename => {
+    if (option.test(filename)) {
+      const filenameNameWithoutHash = (0, _utilities.removeHashFromFileName)(filename, hashLength);
+      json[filenameNameWithoutHash] = filename;
+    }
+  });
+  return json;
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/AddManifestJson/utilities.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeHashFromFileName = removeHashFromFileName;
+
+function removeHashFromFileName(fileName, hashLength) {
+  let outputFileName = '';
+  fileName.split('.').forEach(iterateValue => {
+    if (outputFileName === '') {
+      outputFileName += iterateValue;
+    } else if (iterateValue.length < hashLength) {
+      outputFileName += `.${iterateValue}`;
+    }
+  });
+  return outputFileName;
+}

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

@@ -9,20 +9,12 @@ var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
 
 var _webpack = require("webpack");
 
-var _readOptions = require("../../../schemas/readOptions");
+var _nameTemplates = require("../common/nameTemplates");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const pluginName = 'CdnChangePlugin';
-const MODULE_TYPE = 'css/mini-extract';
-
-const isI18nFile = url => url.endsWith('.i18n.js');
-
-const {
-  app: {
-    enableSMap
-  }
-} = (0, _readOptions.getOptions)();
+// import { Template } from 'webpack';
+const pluginName = 'CdnChangePlugin'; // const MODULE_TYPE = 'css/mini-extract';
 
 class CdnChangeRuntimePlugin extends _webpack.RuntimeModule {
   constructor(compiler, {
@@ -46,7 +38,7 @@ class CdnChangeRuntimePlugin extends _webpack.RuntimeModule {
 
 class CdnChangePlugin {
   constructor(options) {
-    console.log("Insdie", options);
+    this.enableSMap = options.enableSMap || '{{__I18N_CDN__}}';
     this.i18nTemplate = options.i18nTemplate || '{{__I18N_CDN__}}';
     this.variableName = options.variableName || '__CSS_CDN__';
     this.cssTemplate = options.cssTemplate || '{{__CSS_CDN__}}';
@@ -63,11 +55,7 @@ class CdnChangePlugin {
         }
 
         enabledChunks.add(entryRuntimeChunk);
-
-        if (typeof chunkFilename === 'string' && /\[(full)?hash(:\d+)?\]/.test(chunkFilename)) {
-          set.add(_webpack.RuntimeGlobals.getFullHash);
-        }
-
+        set.add(_webpack.RuntimeGlobals.getFullHash);
         set.add(_webpack.RuntimeGlobals.getChunkCssFilename);
         compilation.addRuntimeModule(entryRuntimeChunk, new CdnChangeRuntimePlugin(set, {
           compiler,
@@ -79,17 +67,20 @@ class CdnChangePlugin {
     });
     compiler.hooks.compilation.tap(pluginName, compilation => {
       _htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tap(pluginName, (data, cb) => {
-        data.assets = Object.assign({}, data.assets, {
+        const {
+          enableSMap
+        } = this;
+        data.assets = { ...data.assets,
           css: data.assets.css.map(css => `${this.cssTemplate}${css}`),
           js: data.assets.js.map(js => {
-            if (enableSMap && !isI18nFile(js)) {
-              console.log("js file ==>", js);
+            if (enableSMap && !(0, _nameTemplates.isI18nFile)(js)) {
+              console.log('js file ==>', js);
               js = js.replace('js/', `{{--js-smap}}js/`); //eslint-disable-line
             }
 
-            return `${isI18nFile(js) ? this.i18nTemplate : this.jsTemplate}${js}`;
+            return `${(0, _nameTemplates.isI18nFile)(js) ? this.i18nTemplate : this.jsTemplate}${js}`;
           })
-        });
+        };
         cb && cb(null, data);
       });
     });
@@ -99,8 +90,8 @@ class CdnChangePlugin {
 
 var _default = CdnChangePlugin; // Cdn Change Plugin for runtime chunks???
 
-/**
- * the filename of the script part of the chunk
+/**
+ * the filename of the script part of the chunk
  */
 // exports.getChunkScriptFilename = "__webpack_require__.u";
 // /**