@zohodesk/react-cli 1.1.15 → 1.1.16-exp.2

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

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.decidePublicPath = decidePublicPath;
+exports.modifiedServerOptions = modifiedServerOptions;
+
+var _getServerURL = require("../../../server/getServerURL");
+
+var _httpsOptions = require("../../../server/httpsOptions");
+
+function decidePublicPath(serverExtras) {
+  return serverExtras.isHttps ? serverExtras.httpsUrl : serverExtras.httpUrl;
+}
+
+function modifiedServerOptions(options) {
+  const {
+    server
+  } = options;
+  const port = Number(server.port);
+  const httpsOptions = (0, _httpsOptions.httpsOptionsWithUserFriendlyError)(options);
+  const machineDomain = (0, _getServerURL.getServerDomain)(server);
+  const httpPort = port + 1;
+  return {
+    httpsOptions,
+    machineDomain,
+    httpsPort: port,
+    httpPort,
+    httpsUrl: (0, _getServerURL.getServerUrl)({
+      domain: machineDomain,
+      port,
+      protocol: 'https'
+    }),
+    httpUrl: (0, _getServerURL.getServerUrl)({
+      domain: machineDomain,
+      port: httpPort,
+      protocol: 'http'
+    }),
+    isHttps: !!httpsOptions
+  };
+}

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.libAlias = void 0;
+// the reason for alias at the time was code tree shaking
+// tree shaking was most compactable with ES module system
+// FIXME: But there is a posiblity when these  package  does not have lib,
+//  app will work because of alias, But may be jest won't work because of not alais
+//  So need to think about use alais in jest 
+const libAlias = {
+  '@zohodesk/components/lib': '@zohodesk/components/es',
+  // '@zohodesk/zc-custom/lib': '@zohodesk/zc-custom/es',
+  '@zohodesk/dot/lib': '@zohodesk/dot/es',
+  '@zohodesk/i18n/lib': '@zohodesk/i18n/es',
+  '@zohodesk/icons/lib': '@zohodesk/icons/es',
+  '@zohodesk/normalizer/lib': '@zohodesk/normalizer/es',
+  '@zohodesk/perf-components/lib': '@zohodesk/perf-components/es',
+  '@zohodesk/perf-middleware/lib': '@zohodesk/perf-middleware/es',
+  '@zohodesk/permissions/lib': '@zohodesk/permissions/es',
+  '@zohodesk/platform-middleware/lib': '@zohodesk/platform-middleware/es',
+  '@zohodesk/react-dnd/lib': '@zohodesk/react-dnd/es',
+  '@zohodesk/router-middleware/lib': '@zohodesk/router-middleware/es',
+  '@zohodesk/storage/lib': '@zohodesk/storage/es',
+  '@zohodesk/svg/lib': '@zohodesk/svg/es',
+  '@zohodesk/timetracker/lib': '@zohodesk/timetracker/es',
+  '@zohodesk/variables/lib': '@zohodesk/variables/es',
+  '@zohodesk/virtualizer/lib': '@zohodesk/virtualizer/es'
+};
+exports.libAlias = libAlias;

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

@@ -0,0 +1,70 @@
+"use strict";
+
+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 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'],
+  i18nchunkjs: ['i18n-chunks/[locale]/[name].i18n.js', // 'i18n-chunks/[locale]/[name].[chunkhash].i18n.js'
+  'i18n-chunks/[locale]/[name].[contenthash].i18n.js'],
+  i18nmanifest: ['i18n-manifest.json', 'i18n-manifest.json'],
+  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
+   *  */
+  cssdir: ['css/[name].[dir].css', 'css/[name].[contenthash].[dir].css'],
+  image: ['images/[name][ext]', 'images/[name].[contenthash][ext]'],
+  font: ['fonts/[name][ext]', 'fonts/[name].[contenthash][ext]'],
+  svg: ['fonts/[name][ext]', 'fonts/[name].[contenthash][ext]'],
+  audio: ['fonts/[name][ext]', 'fonts/[name].[contenthash][ext]'],
+  video: ['videos/[name][ext]', 'videos/[name].[contenthash][ext]']
+};
+
+function createNameTemplate(name, useHash) {
+  // const ext = `${useHash ? '.[hash:20]' : ''}[ext]`;
+  return useHash ? name[1] : name[0];
+}
+
+function nameTemplates(type, options) {
+  const {
+    enableChunkHash,
+    mode
+  } = options;
+  const tname = templates[type];
+
+  if (!tname) {
+    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, 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/common/resourceBasedPublicPath.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.publicPathAsExpression = publicPathAsExpression;
+exports.resourceBasedPublicPath = resourceBasedPublicPath;
+
+// const  publicPaths = {
+// };
+function resourceBasedPublicPath(resoruceType, options) {
+  return options.publicPath;
+}
+
+function publicPathAsExpression(resoruceType, options) {
+  if (resoruceType === 'i18n') {
+    return options.i18nChunkSplit.localeVarName;
+  }
+
+  return JSON.stringify(options.publicPath);
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/cssLoaders.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cssLoaders = cssLoaders;
+
+var _getCSSLoaders = require("./getCSSLoaders");
+
+function cssLoaders(options) {
+  return [{
+    test: /\.css$/,
+    // exclude: /\.module\.css$/,
+    use: (0, _getCSSLoaders.getCSSLoaders)(options)
+  }];
+}

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