@zohodesk/react-cli 1.1.25-exp.6 → 1.1.26-exp.1

package/README.md

@@ -44,6 +44,32 @@ Now to run app
 
 # Change Logs
 
+# 1.1.26 (06-09-2024)
+
+**Features**
+
+  - Add a new className format that mirrors the class names used in the source code.
+   ```
+    app: {
+      displayClassName: true
+    }
+   ```
+
+  - option given to disable the HtmlWebpackPlugin.
+   ```
+    app: {
+      generateHtml: true
+    }
+   ``` 
+  - Control the rendering order of async CSS chunks.
+  ```
+    css: {
+      enable: true,
+      className: <ID of the tag before which all async CSS chunks should be rendered.>
+    }
+    ``` 
+   
+
 # 1.1.25 (12-08-2024) 
 
  - mp3 files support added

package/bin/cli.js

@@ -13,7 +13,6 @@ const [, , option] = process.argv;
 const args = process.argv.slice(3);
 const appPath = process.cwd();
 
-console.log(args, option, 'hello')
 const options = getOptions({ start: true, build: true, docs: true }[option]);
 
 function spawnSync(...args) {

package/lib/configs/resolvers.js

@@ -22,10 +22,14 @@ function moduleResolver(options) {
     disableES5Transpile
   } = options.app;
   const customAlias = options.alias;
+  console.log(moduleResolvePath);
   let required = moduleResolvePath && (0, _requireLocalOrGlobal.requireLocal)(moduleResolvePath);
+  console.log(required, 'requirwe');
 
   if (!required) {
+    console.log('this global');
     required = (0, _requireLocalOrGlobal.requireGlobal)('@zohodesk/client_packages_group');
+    console.log(required, 'what');
 
     if (required) {
       (0, _logger.messageLogger)('global `@zohodesk/client_packages_group` package taken as client_packages_group');

package/lib/pluginUtils/getDevPlugins.js

@@ -19,6 +19,8 @@ var _I18nSplitPlugin = _interopRequireDefault(require("../plugins/I18nSplitPlugi
 
 var _RequireVariablePublicPlugin = _interopRequireDefault(require("../plugins/RequireVariablePublicPlugin"));
 
+var _CssOrderControlPlugin = _interopRequireDefault(require("../plugins/CssOrderControlPlugin"));
+
 var _copyWebpackPlugin = _interopRequireDefault(require("copy-webpack-plugin"));
 
 var _webpack = _interopRequireDefault(require("webpack"));
@@ -33,17 +35,19 @@ var _VariableConversionCollector = _interopRequireDefault(require("../plugins/Va
 
 var _SelectorPlugin = _interopRequireDefault(require("../plugins/SelectorPlugin"));
 
+var _configHtmlWebpackPlugins = require("./configHtmlWebpackPlugins");
+
 var _EfcResourceCleanupPlugin = _interopRequireDefault(require("../plugins/EfcResourceCleanupPlugin"));
 
 var _EventsHandlingPlugin = require("../plugins/EventsHandlingPlugin");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// import { configHtmlWebpackPlugins } from './configHtmlWebpackPlugins';
 // import { windowsModification } from '../loaderUtils/windowsModification';
 const getDevPlugins = (options, publicPath) => {
   const {
     app: {
+      generateHtml,
       tpFolder,
       folder,
       instrumentScript,
@@ -73,7 +77,8 @@ const getDevPlugins = (options, publicPath) => {
       localeAttr: efcLocaleAttr
     },
     css: {
-      enableRTLSplit
+      enableRTLSplit,
+      cssOrderControler
     },
     i18n,
     unusedFiles,
@@ -161,15 +166,16 @@ const getDevPlugins = (options, publicPath) => {
   pluginsArr.push(new _lodashWebpackPlugin.default({
     collections: true,
     shorthands: true
-  })); // configHtmlWebpackPlugins(pluginsArr, {
-  //   enableChunkHash: false,
-  //   folder,
-  //   minify: false,
-  //   inject,
-  //   crossorigin,
-  //   hasEFC,
-  //   customScriptLoadingStrategey,
-  // });
+  }));
+  generateHtml && (0, _configHtmlWebpackPlugins.configHtmlWebpackPlugins)(pluginsArr, {
+    enableChunkHash: false,
+    folder,
+    minify: false,
+    inject,
+    crossorigin,
+    hasEFC,
+    customScriptLoadingStrategey
+  });
 
   if (hasEFC) {
     pluginsArr.push(new _plugins.EFCPlugin({
@@ -194,6 +200,7 @@ const getDevPlugins = (options, publicPath) => {
     mainChunkName: 'main'
   }));
   instrumentScript && pluginsArr.push(new _plugins.ScriptInstrumentPlugin());
+  cssOrderControler.enable && pluginsArr.push(new _CssOrderControlPlugin.default(cssOrderControler));
   customAttributes.enable && pluginsArr.push(new _CustomAttributePlugin.CustomAttributePlugin(customAttributes));
   customAttributes.enable && pluginsArr.push(new _EfcResourceCleanupPlugin.default(Object.assign({}, customAttributes, {
     globalCacheObj: context

package/lib/pluginUtils/getProdPlugins.js

@@ -35,19 +35,23 @@ var _CustomAttributePlugin = require("../plugins/CustomAttributePlugin");
 
 var _RtlCssPlugin = require("../plugins/RtlSplitPlugin/RtlCssPlugin");
 
+var _CssOrderControlPlugin = _interopRequireDefault(require("../plugins/CssOrderControlPlugin"));
+
+var _configHtmlWebpackPlugins = require("./configHtmlWebpackPlugins");
+
 var _StatsPlugin = _interopRequireDefault(require("../plugins/StatsPlugin"));
 
 var _EfcResourceCleanupPlugin = _interopRequireDefault(require("../plugins/EfcResourceCleanupPlugin"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// import { configHtmlWebpackPlugins } from './configHtmlWebpackPlugins';
 // eslint-disable-next-line no-unused-vars
 const getProdPlugins = (options, publicPath = '') => {
   let {
     enableChunkHash
   } = options.app;
   const {
+    generateHtml,
     manifestFileName,
     bundleAnalyze,
     optimize,
@@ -86,7 +90,8 @@ const getProdPlugins = (options, publicPath = '') => {
     i18n
   } = options;
   const {
-    enableRTLSplit
+    enableRTLSplit,
+    cssOrderControler
   } = options.css;
   const {
     hasEFC: newOptionForEnableEFC,
@@ -172,15 +177,16 @@ const getProdPlugins = (options, publicPath = '') => {
     from: `${_path.default.join(process.cwd(), context, tpFolder)}/`,
     to: `./${tpFolder}/`,
     toType: 'dir'
-  }])); // configHtmlWebpackPlugins(pluginsArr, {
-  //   enableChunkHash,
-  //   folder,
-  //   inject,
-  //   minify: minifyHtmlOptions,
-  //   customScriptLoadingStrategey,
-  //   crossorigin,
-  //   hasEFC
-  // });
+  }]));
+  generateHtml && (0, _configHtmlWebpackPlugins.configHtmlWebpackPlugins)(pluginsArr, {
+    enableChunkHash,
+    folder,
+    inject,
+    minify: minifyHtmlOptions,
+    customScriptLoadingStrategey,
+    crossorigin,
+    hasEFC
+  });
 
   if (hasEFC) {
     pluginsArr.push(new _plugins.EFCPlugin({
@@ -299,6 +305,7 @@ const getProdPlugins = (options, publicPath = '') => {
   } // plugins.push(new VariableConversionCollector({}));
 
 
+  cssOrderControler.enable && pluginsArr.push(new _CssOrderControlPlugin.default(cssOrderControler));
   customAttributes.enable && pluginsArr.push(new _CustomAttributePlugin.CustomAttributePlugin(customAttributes));
   customAttributes.enable && pluginsArr.push(new _EfcResourceCleanupPlugin.default(Object.assign({}, customAttributes, {
     globalCacheObj: context

package/lib/plugins/CssOrderControlPlugin.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+class CssOrderControlPlugin {
+  constructor(options) {
+    this.options = {
+      className: options.className
+    };
+  }
+
+  apply(compiler) {
+    // NOTE: we not using this, Reason currently this option is only need for EFC,
+    // So it do not needed.
+    const className = this.options.className;
+    compiler.hooks.thisCompilation.tap({
+      name: 'CssOrderControlPlugin',
+      stage: 1,
+      fn: compilation => {
+        compilation.mainTemplate.hooks.requireEnsure.tap('CssOrderControlPlugin', source => {
+          // const str = attributeSetTemplate(cssAttributes, 'linkTag');
+          const replacedStr = source.replace('head.appendChild(linkTag);', `var referenceTag = document.getElementById('${className}');
+                   head.insertBefore(linkTag, referenceTag);`); //   console.log({ s: source, r: replacedStr });
+
+          return replacedStr;
+        });
+      }
+    });
+  }
+
+}
+
+exports.default = CssOrderControlPlugin;

package/lib/schemas/index.js

@@ -52,6 +52,10 @@ var _default = {
     propertiesFolder: null
   },
   css: {
+    cssOrderControler: {
+      enable: false,
+      className: 'customCss'
+    },
     enableRTLSplit: false,
     valueReplacer: null,
     //valueReplacer: [
@@ -126,6 +130,10 @@ var _default = {
     cssDirStatement: null
   },
   app: {
+    generateHtml: {
+      value: true,
+      cli: 'generate_html'
+    },
     displayClassName: {
       value: false,
       cli: 'display_class_name'

package/lib/servers/requireLocalOrGlobal.js

@@ -25,19 +25,22 @@ function requireLocalOrGlobal(moduleName, opts = {}) {
   const {
     local = true
   } = opts;
-  const isRelativePath = moduleName[0] === '.'; // NOTE: if starts with . then it only mean local
+  const isRelativePath = moduleName[0] === '.';
+  console.log(moduleName, 'module name'); // NOTE: if starts with . then it only mean local
 
   if (isRelativePath) {
     global = false;
   }
 
   try {
-    const paths = [local && process.cwd(), global && globalNodeModules].filter(Boolean); // x({ paths, globalNodeModules, global, local, opts });
+    const paths = [local && process.cwd(), global && globalNodeModules].filter(Boolean);
+    console.log('path', process.cwd(), local, global); // x({ paths, globalNodeModules, global, local, opts });
 
     const moduleResolvePath = require.resolve(moduleName, {
       paths
     });
 
+    console.log(moduleResolvePath, 'moduleResolvePath');
     return require(moduleResolvePath);
   } catch (error) {
     // NOTE: since we return null we can check out side

package/lib/utils/getOptions.js

@@ -51,7 +51,6 @@ keysWithColon.forEach(key => {
 
   processEnv[nkey] = processEnv[key];
 });
-console.log(processEnv.enable_stats, 'what is this');
 
 function getNpmVersion() {
   // require("child_process").

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.1.25-exp.6",
+  "version": "1.1.26-exp.1",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",
@@ -41,7 +41,7 @@
     "@babel/preset-env": "7.11.0",
     "@babel/preset-react": "7.10.4",
     "@babel/runtime": "7.11.2",
-    "@zohodesk/client_packages_group": "1.0.2",
+    "@zohodesk/client_packages_group": "1.0.2-exp.4-redux",
     "@zohodesk/eslint-plugin-react-performance": "1.0.3",
     "@zohodesk/eslint-plugin-zsecurity": "0.0.1-beta.4",
     "@zohodesk/postcss-rtl": "1.5.2",