@zohodesk/react-cli 1.1.17 → 1.1.18-exp.2

package/README.md

@@ -44,6 +44,19 @@ Now to run app
 
 # Change Logs
 
+# 1.1.18 (30-01-2024)
+
+**Feature:-**
+
+- MJS loader support added.
+- We can enable/disable this feature by `npm run start --enableMjsLoader=true/false` default value will be `false`.
+ 
+```
+app: {
+  enableMjsLoader : true/false
+}
+```
+
 # 1.1.17 (24.1.2024)
 
 **Feature:-**

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/lib/babel/cmjs-plugins-presets.js

@@ -7,18 +7,23 @@ exports.default = void 0;
 
 var _utils = require("../utils");
 
-let {
+const {
   module: {
     mode
+  },
+  babelCustomizationForLibrary: {
+    babelPlugins
   }
 } = (0, _utils.getOptions)();
-let isProd = mode.toLowerCase() === 'prod';
+const isProd = mode.toLowerCase() === 'prod';
+const defaultPlugins = [[require.resolve('babel-plugin-transform-define'), isProd ? {
+  __DOCS__: false
+} : {}], require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('@babel/plugin-proposal-optional-chaining'), require.resolve('@babel/plugin-proposal-class-properties')];
+const plugins = [...babelPlugins, ...defaultPlugins];
 
 var _default = () => ({
-  presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react')],
-  plugins: [[require.resolve('babel-plugin-transform-define'), isProd ? {
-    __DOCS__: false
-  } : {}]]
+  presets: [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react'), require.resolve('@babel/preset-typescript')],
+  plugins: plugins
 });
 
 exports.default = _default;

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

@@ -7,13 +7,21 @@ exports.default = void 0;
 
 var _utils = require("../utils");
 
-let {
+const {
   module: {
     mode,
     disableES5Transpile
+  },
+  babelCustomizationForLibrary: {
+    babelPlugins
   }
 } = (0, _utils.getOptions)();
-let isProd = mode.toLowerCase() === 'prod';
+const isProd = mode.toLowerCase() === 'prod';
+const defaultPlugins = [[require.resolve('babel-plugin-transform-define'), isProd ? {
+  __DOCS__: false
+} : {}], require.resolve('@babel/plugin-syntax-dynamic-import'), require.resolve('@babel/plugin-proposal-optional-chaining'), require.resolve('@babel/plugin-proposal-class-properties')];
+const plugins = [...babelPlugins, ...defaultPlugins];
+console.log(disableES5Transpile);
 
 var _default = () => ({
   presets: [[require.resolve('@babel/preset-env'), disableES5Transpile ? {
@@ -25,10 +33,8 @@ var _default = () => ({
     }
   } : {
     modules: false
-  }], require.resolve('@babel/preset-react')],
-  plugins: [[require.resolve('babel-plugin-transform-define'), isProd ? {
-    __DOCS__: false
-  } : {}], require.resolve('@babel/plugin-syntax-dynamic-import')]
+  }], require.resolve('@babel/preset-react'), require.resolve('@babel/preset-typescript')],
+  plugins: plugins
 });
 
 exports.default = _default;

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

@@ -42,7 +42,8 @@ const {
     sourcemap,
     crossorigin,
     postCssPluginOrder,
-    externals
+    externals,
+    enableMjsLoader
   }
 } = options;
 const {
@@ -100,7 +101,11 @@ module.exports = {
 
         return false;
       }
-    }, seperateCssModules ? {
+    }, enableMjsLoader ? {
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto'
+    } : null, seperateCssModules ? {
       test: /\.css$/,
       exclude: /\.module\.css$/,
       use: (0, _loaderUtils.getCSSLoaders)({
@@ -141,6 +146,10 @@ module.exports = {
           minimize: true
         }
       }]
+    }, {
+      test: /\.ts$/,
+      use: 'ts-loader',
+      include: _path.default.join(appPath, folder)
     }, {
       test: /\.worker.js$/,
       use: {

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

@@ -127,7 +127,7 @@ module.exports = {
             }
           } : {
             modules: false
-          }], require.resolve('@babel/preset-react')],
+          }], require.resolve('@babel/preset-react'), require.resolve('@babel/preset-typescript')],
           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'), shouldRemovePropTypes ? [require.resolve('babel-plugin-transform-react-remove-prop-types'), removePropTypes] : false, devConsoleExculde ? [require.resolve('babel-plugin-transform-remove-console'), {
             exclude: ['error', 'log']
           }] : null].filter(Boolean) : [removeAttribute ? require.resolve('../utils/removeAttributes') : false, shouldRemovePropTypes ? [require.resolve('babel-plugin-transform-react-remove-prop-types'), removePropTypes] : false, [require.resolve('@babel/plugin-transform-runtime'), {
@@ -230,6 +230,10 @@ module.exports = {
           minimize: false
         }
       }]
+    }, {
+      test: /\.ts$/,
+      use: 'ts-loader',
+      include: _path.default.join(appPath, folder)
     }, {
       test: /\.worker.js$/,
       use: {

package/lib/schemas/index.js

@@ -129,6 +129,10 @@ var _default = {
       value: '@zohodesk/client_packages_group',
       cli: 'module_resolve_path'
     },
+    enableMjsLoader: {
+      value: false,
+      cli: 'enableMjsLoader'
+    },
     customClassNamePrefix: [],
     // this option only for impact testing
     devCssFileBountry: {
@@ -734,6 +738,9 @@ var _default = {
     fileName: null,
     options: null,
     excludeKeys: null
+  },
+  babelCustomizationForLibrary: {
+    babelPlugins: []
   }
 };
 exports.default = _default;