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

package/README.md

@@ -44,13 +44,9 @@ Now to run app
 
 # Change Logs
 
-# 1.1.19 (27-5-2024)
+# exp.12 for stats disable
 
-**Feature**
-
-- enhancedReactLiveConverter.js added and imported in  docLoader file
-
-- stats.json file creation deleted, if `enable_stats` option is false.
+# exp.11 exp.10 exp.9 exp.8 for typescript
 
 # 1.1.19 (5-2-2024)
 

package/bin/cli.js

@@ -300,6 +300,8 @@ switch (option) {
         'src',
         '-d',
         'lib',
+        '--extensions',
+        '.js,.ts,.tsx',
         `--presets=${require.resolve('../lib/babel/cmjs-plugins-presets.js')}`,
         '--copy-files'
       ].concat(args),
@@ -316,6 +318,8 @@ switch (option) {
         'src',
         '--out-dir',
         'es',
+        '--extensions',
+        '.js,.ts,.tsx',
         `--presets=${require.resolve('../lib/babel/es-plugins-presets.js')}`,
         '--copy-files'
       ].concat(args),

package/docs/ReactLive.md

@@ -11,8 +11,4 @@
 
 # v1.1.2 update:
 
-* ReactLiveConverter filepath changed to 'reactLiveConverter.js' in docLoader file
-
-# v1.1.20 update:
-
-* enhancedReactLiveConverter.js added and imported in  docLoader file
+* ReactLiveConverter filepath changed to 'reactLiveConverter.js' in docLoader file

package/lib/babel/cmjs-plugins-presets.js

@@ -11,20 +11,40 @@ var _babelPresetReactOption = _interopRequireDefault(require("./babel-option-uti
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let {
+const {
   module: {
     mode
+  },
+  app: {
+    babelCustomizationForLibrary,
+    enableTypeScript
   }
 } = (0, _utils.getOptions)();
-let isProd = mode.toLowerCase() === 'prod';
+const {
+  babelPlugins
+} = babelCustomizationForLibrary;
+const isProd = mode.toLowerCase() === 'prod';
+const defaultPlugins = [[require.resolve('babel-plugin-transform-define'), isProd ? {
+  __DOCS__: false
+} : {}], require.resolve('@babel/plugin-syntax-dynamic-import')];
+const resolvedPlugins = [];
+babelPlugins.forEach(plugin => {
+  resolvedPlugins.push(require.resolve(plugin));
+});
+const plugins = [...defaultPlugins, ...resolvedPlugins];
+const presets = [require.resolve('@babel/preset-env'), (0, _babelPresetReactOption.default)({
+  disableES5Transpile: false
+})];
+
+if (enableTypeScript) {
+  presets.push(require.resolve('@babel/preset-typescript'));
+}
+
+console.log(presets, plugins);
 
 var _default = () => ({
-  presets: [require.resolve('@babel/preset-env'), (0, _babelPresetReactOption.default)({
-    disableES5Transpile: false
-  })],
-  plugins: [[require.resolve('babel-plugin-transform-define'), isProd ? {
-    __DOCS__: false
-  } : {}]]
+  presets: presets,
+  plugins: plugins
 });
 
 exports.default = _default;

package/lib/babel/es-plugins-presets.js

@@ -11,30 +11,50 @@ var _babelPresetReactOption = _interopRequireDefault(require("./babel-option-uti
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let {
+const {
   module: {
     mode,
     disableES5Transpile
+  },
+  app: {
+    babelCustomizationForLibrary,
+    enableTypeScript
   }
 } = (0, _utils.getOptions)();
-let isProd = mode.toLowerCase() === 'prod';
+const {
+  babelPlugins
+} = babelCustomizationForLibrary;
+const isProd = mode.toLowerCase() === 'prod';
+const defaultPlugins = [[require.resolve('babel-plugin-transform-define'), isProd ? {
+  __DOCS__: false
+} : {}], require.resolve('@babel/plugin-syntax-dynamic-import')];
+const resolvedPlugins = [];
+babelPlugins.forEach(plugin => {
+  resolvedPlugins.push(require.resolve(plugin));
+});
+const plugins = [...defaultPlugins, ...resolvedPlugins];
+const presets = [[require.resolve('@babel/preset-env'), disableES5Transpile ? {
+  modules: false,
+  useBuiltIns: 'usage',
+  corejs: 3,
+  targets: {
+    browsers: ['last 3 Chrome versions', 'last 3 Firefox versions', 'last 3 Edge versions', 'last 3 Safari versions']
+  }
+} : {
+  modules: false
+}], (0, _babelPresetReactOption.default)({
+  disableES5Transpile
+})];
+
+if (enableTypeScript) {
+  presets.push(require.resolve('@babel/preset-typescript'));
+}
+
+console.log(presets, plugins);
 
 var _default = () => ({
-  presets: [[require.resolve('@babel/preset-env'), disableES5Transpile ? {
-    modules: false,
-    useBuiltIns: 'usage',
-    corejs: 3,
-    targets: {
-      browsers: ['last 3 Chrome versions', 'last 3 Firefox versions', 'last 3 Edge versions', 'last 3 Safari versions']
-    }
-  } : {
-    modules: false
-  }], (0, _babelPresetReactOption.default)({
-    disableES5Transpile
-  })],
-  plugins: [[require.resolve('babel-plugin-transform-define'), isProd ? {
-    __DOCS__: false
-  } : {}], require.resolve('@babel/plugin-syntax-dynamic-import')]
+  presets: presets,
+  plugins: plugins
 });
 
 exports.default = _default;

package/lib/common/getEntries.js

@@ -26,29 +26,16 @@ let getEntries = (appSchemas, mode) => {
     hasEFC: newOptionForEnableEFC
   } = appSchemas.efc;
   const hasEFC = newOptionForEnableEFC || prevOptionForEnableEFC;
-  const {
-    multiEntry
-  } = appSchemas.app;
-  let mainJs = []; // let payloadJs = [];
-
-  let entryObj = {};
-  console.log(multiEntry);
-
-  if (multiEntry.enable) {
-    entryObj = (0, _utils.createObjectFromArrayPairs)(multiEntry.chunkName, multiEntry.entryFileName, appPath, folder);
-  }
-
-  let entry = Object.assign({
+  let mainJs = [];
+  let entry = {
     main: mainJs
-  }, entryObj);
+  };
 
   if (mode === 'dev' || mode === 'dev-no-warn') {
     mainJs.push(`${_path.default.join(__dirname, '..', 'templates', 'WMSTemplate')}?wmsPath=wss:${(0, _utils.getServerURL)(server)}`);
   }
 
-  mainJs.push(_path.default.join(appPath, folder, isReactMig ? 'migration.js' : 'index.js')); // payloadJs.push(
-  //   path.join(appPath, folder, '_utils', 'payloadEncryption.js')
-  // );
+  mainJs.push(_path.default.join(appPath, folder, isReactMig ? 'migration.js' : 'index.js'));
 
   if (hasWidget) {
     entry.widget = [_path.default.join(appPath, folder, 'widget.js')];

package/lib/configs/jest.config.js

@@ -17,7 +17,7 @@ const commonConfig = {
   collectCoverage: true,
   moduleDirectories: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules'],
   transform: {
-    '^.+\\.(js|jsx)$': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'jsPreprocessor.js'),
+    '^.+\\.(js|jsx|ts|tsx)$': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'jsPreprocessor.js'),
     '^.+\\.css$': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'cssPreprocessor.js'),
     '^(?!.*\\.(js|jsx|css|json)$)': _path.default.resolve(__dirname, '..', 'jest', 'preProcessors', 'otherFilesPreprocessor.js')
   },
@@ -28,7 +28,7 @@ const commonConfig = {
   // },
   transformIgnorePatterns: ['/node_modules/(?!(@zohodesk)/)'],
   // transformIgnorePatterns: ['/node_modules.*?.js$'],
-  moduleFileExtensions: ['js'],
+  moduleFileExtensions: ['js', 'ts', 'tsx'],
   setupFiles: [(0, _fs.existsSync)(appGlobals) && appGlobals, _path.default.resolve(__dirname, '..', 'jest', 'setup.js')].filter(Boolean),
   globals: {
     __DEVELOPMENT__: true,
@@ -52,7 +52,7 @@ module.exports = (...args) => {
     testPathIgnorePatterns: ['/node_modules/', 'docs'],
     unmockedModulePathPatterns: ['__tests__', 'node_modules', '.*'],
     roots: [`<rootDir>/${appFolder}/`],
-    testRegex: '(/__tests__/.*|\\.(test|spec))\\.(jsx|js|json|node)$',
+    testRegex: '(/__tests__/.*|\\.(test|spec))\\.(jsx|js|json|node|ts|tsx)$',
     testResultsProcessor: _path.default.resolve(__dirname, '..', 'jest', 'result.js')
   });
 };

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

@@ -43,6 +43,7 @@ const {
     crossorigin,
     postCssPluginOrder,
     externals,
+    enableTypeScript,
     enableMjsLoader
   }
 } = options;
@@ -146,7 +147,11 @@ module.exports = {
           minimize: true
         }
       }]
-    }, {
+    }, enableTypeScript ? {
+      test: /\.ts$/,
+      use: 'ts-loader',
+      include: _path.default.join(appPath, folder)
+    } : null, {
       test: /\.worker.js$/,
       use: {
         loader: require.resolve('../loaders/workerLoader.js'),

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

@@ -49,7 +49,8 @@ const {
     devConsoleExculde,
     crossorigin,
     postCssPluginOrder,
-    externals
+    externals,
+    enableTypeScript
   }
 } = options;
 let {
@@ -131,7 +132,7 @@ module.exports = {
             modules: false
           }], (0, _babelPresetReactOption.default)({
             disableES5Transpile
-          })],
+          }), enableTypeScript ? require.resolve('@babel/preset-typescript') : null].filename(Boolean),
           plugins: disableES5Transpile ? [removeAttribute ? require.resolve('../utils/removeAttributes') : false, require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), // require.resolve(
           //   '@babel/plugin-proposal-object-rest-spread'
           // ), REMOVING IT, BECAUSE WE ALREADY SUPPORT SPREAD SYNTAX FROM LIBRARIES.
@@ -237,7 +238,11 @@ module.exports = {
           minimize: false
         }
       }]
-    }, {
+    }, enableTypeScript ? {
+      test: /\.ts$/,
+      use: 'ts-loader',
+      include: _path.default.join(appPath, folder)
+    } : null, {
       test: /\.worker.js$/,
       use: {
         loader: require.resolve('../loaders/workerLoader.js'),

package/lib/jest/preProcessors/jsPreprocessor.js

@@ -5,6 +5,6 @@ var _babelJest = _interopRequireDefault(require("babel-jest"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 module.exports = _babelJest.default.createTransformer({
-  presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react')],
-  plugins: [require.resolve('babel-plugin-transform-dynamic-import')]
+  presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react'), require.resolve('@babel/preset-typescript')],
+  plugins: [require.resolve('babel-plugin-transform-dynamic-import'), require.resolve('@babel/plugin-proposal-class-properties'), require.resolve('@babel/plugin-proposal-optional-chaining')]
 });

package/lib/loaderUtils/getDevJsLoaders.js

@@ -16,7 +16,8 @@ let getDevJsLoaders = options => {
     app: {
       disableES5Transpile,
       instrumentScript,
-      devConsoleExculde
+      devConsoleExculde,
+      enableTypeScript
     },
     esLint: {
       enable: enableEslint
@@ -44,7 +45,7 @@ let getDevJsLoaders = options => {
         modules: false
       }], (0, _babelPresetReactOption.default)({
         disableES5Transpile
-      })],
+      }), enableTypeScript ? require.resolve('@babel/preset-typescript') : null].filter(Boolean),
       plugins: disableES5Transpile ? [require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('babel-plugin-lodash'), // require.resolve('@babel/plugin-proposal-object-rest-spread'),
       devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
         exclude: ['error', 'log']

package/lib/loaders/docsLoader.js

@@ -6,7 +6,7 @@ var _getOptions = _interopRequireDefault(require("../utils/getOptions.js"));
 
 var _path = _interopRequireDefault(require("path"));
 
-var _enhancedReactLiveConverter = require("./enhancedReactLiveConverter.js");
+var _reactLiveConvertor = require("./reactLiveConvertor");
 
 var _markdownLoader = require("./markdownLoader.js");
 
@@ -27,7 +27,7 @@ module.exports = function (source) {
   const src = _fs.default.readFileSync(originalFilePath).toString();
 
   options.docs.enableMDParser && (source = (0, _markdownLoader.markdownParser)(source));
-  options.docs.enableReactLive && (source = (0, _enhancedReactLiveConverter.enhancedReactLiveConverter)(source, originalFilePath)); //to Enable the ReactLive Converter
+  options.docs.enableReactLive && (source = (0, _reactLiveConvertor.reactLiveConvertor)(source, originalFilePath)); //to Enable the ReactLive Converter
 
   return `${source};${name}.source=${JSON.stringify(src)};${name}.filePath=${JSON.stringify(filePath)}`;
 };

package/lib/pluginUtils/getProdPlugins.js

@@ -237,7 +237,7 @@ const getProdPlugins = (options, publicPath = '') => {
     if (bundleAnalyze) {
       pluginsArr.push(new _webpackBundleAnalyzer.BundleAnalyzerPlugin({
         analyzerMode: 'static',
-        generateStatsFile: false,
+        generateStatsFile: !enableStats,
         openAnalyzer: false,
         statsOptions: enableStats ? null : {
           source: false,

package/lib/schemas/index.js

@@ -125,10 +125,12 @@ var _default = {
     cssDirStatement: null
   },
   app: {
-    multiEntry: {
-      enable: true,
-      chunkName: [],
-      entryFileName: []
+    babelCustomizationForLibrary: {
+      babelPlugins: []
+    },
+    enableTypeScript: {
+      value: false,
+      cli: 'enable_typescript'
     },
     moduleResolvePath: {
       value: '@zohodesk/client_packages_group',

package/lib/utils/index.js

@@ -7,7 +7,6 @@ var _exportNames = {
   writeFile: true,
   makeDir: true,
   getInfoFromPublicPaths: true,
-  createObjectFromArrayPairs: true,
   getLibraryConflict: true,
   log: true,
   getOptions: true,
@@ -28,7 +27,6 @@ Object.defineProperty(exports, "createEventStream", {
     return _createEventStream.default;
   }
 });
-exports.createObjectFromArrayPairs = void 0;
 Object.defineProperty(exports, "getComponents", {
   enumerable: true,
   get: function () {
@@ -105,8 +103,6 @@ var _fs = _interopRequireDefault(require("fs"));
 
 var _log = require("./log");
 
-var _path = _interopRequireDefault(require("path"));
-
 var _getOptions = _interopRequireDefault(require("./getOptions"));
 
 var _createEventStream = _interopRequireDefault(require("./createEventStream"));
@@ -243,22 +239,6 @@ let getInfoFromPublicPaths = publicPaths => {
 
 exports.getInfoFromPublicPaths = getInfoFromPublicPaths;
 
-let createObjectFromArrayPairs = (arr1, arr2, appPath, folder) => {
-  if (arr1.length !== arr2.length) {
-    throw new Error('multiple chunk entry wrongly configured check the getEntries.js and react-cli.config.js file ');
-  }
-
-  const obj = {};
-
-  for (let i = 0; i < arr1.length; i++) {
-    obj[arr1[i]] = [_path.default.join(appPath, folder, arr2[i])];
-  }
-
-  return obj;
-};
-
-exports.createObjectFromArrayPairs = createObjectFromArrayPairs;
-
 let getLibraryConflict = (moduleObject, impactObj, changesOnly) => {
   let srcChanges = [];
   let libraryChanges = [];