@zohodesk/react-cli 0.0.1-exp.160.3 → 0.0.1-exp.161.1

package/README.md

@@ -1,39 +1,68 @@
 # React CLI
 
 A CLI tool for build modern web application and libraries
+
+# 0.0.1-exp.161.1
+
+- Features
+  - feature added for efc cdnStatement
+- Issue fixes:-
+  - css classname hash change issue fix
+  - debug package conflit issue fix in nock in (react-cli test)
+  - manifest.json css file name correction issue for rtl and ltr
+
 # 0.0.1-beta.160
+
 - @zohodesk/normalizer package version updated to 1.0.2
+
 # 0.0.1-beta.159
+
 - @zohodesk/datetimejs package updated to beta.7
+
+# 0.0.1-exp.159
+
+- isse fix:-
+  - when rtl ltr css split enable manifest json css filename keys comes with hash .
+
 # 0.0.1-beta.158
-  - Removing source map files from service worker caching.
+
+- Removing source map files from service worker caching.
+
 # 0.0.1-beta.157
-  - Experimental version issue fix(Dummy version removed)
+
+- Experimental version issue fix(Dummy version removed)
+
 # 0.0.1-beta.156
-  - ReportPublish issue fix
+
+- ReportPublish issue fix
 
 # 0.0.1-beta.155
-  - get impacted library source files option added
+
+- get impacted library source files option added
 
 # 0.0.1-beta.154
-  - mockPrefix option for mock url prefix change
-  - Issue fix:-
-    - un wanted {{--js-smap}} in inital html without enable smap in build
+
+- mockPrefix option for mock url prefix change
+- Issue fix:-
+  - un wanted {{--js-smap}} in inital html without enable smap in build
 
 # 0.0.1-beta.153
+
 - Vendor include array added
   - If you need to include any thrid party js in vendor we can use this array
 
 # 0.0.1-beta.152
+
 impact servise related changes:-
+
 - nowatchstart option added. will be used like `react-cli nowatchstart <...options>` this will be used for src file changes no need to reflect (or no need to rebulid on file changes)
 - cssselector_zip option added. will be used like `--cssselector-zip=selectormapping.zip`
   only work in two ways
   1. `react-cli start --disable-watch --cssselector-zip=selectormapping.zip` app start command with `--disable-watch` flag and your usaul options
   2. `react-cli nowatchstart --cssselector-zip=selectormapping.zip` app start command's usaul options
   #### Urls are:-
-  Below express path are added, For download zip files and  
-  - `/zips/${zipname}.zip`  for  css selector maps zip file (contains css_map filies  and original css files)
+  Below express path are added, For download zip files and
+  - `/zips/${zipname}.zip` for css selector maps zip file (contains css_map filies and original css files)
   - `/zips/build.zip` build zip file (contains bundled all files)
 
 # 0.0.1-beta.151

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

@@ -12,9 +12,6 @@ var _loaderUtils = require("../loaderUtils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
-
-const smp = new SpeedMeasurePlugin();
 let options = (0, _utils.getOptions)();
 let {
   app: {
@@ -67,7 +64,7 @@ if (isDevelopment) {
 }
 
 let shouldRemovePropTypes = !isDevelopment && removePropTypes;
-module.exports = smp.wrap({
+module.exports = {
   entry: (0, _common.getEntries)(options, 'production'),
   devtool: isDevelopment ? 'cheap-module-source-map' : enableSMap ? 'hidden-source-map' : 'none',
   mode: 'production',
@@ -84,7 +81,7 @@ module.exports = smp.wrap({
   stats: {
     children: false,
     colors: true,
-    excludeAssets: /i18n|\.map$/,
+    // excludeAssets: /i18n/,
     warningsFilter: /\[mini-css-extract-plugin\]/
   },
   plugins: (0, _pluginUtils.getProdPlugins)(options, output.publicPath),
@@ -220,4 +217,4 @@ module.exports = smp.wrap({
   resolveLoader: {
     modules: [_path.default.resolve(__dirname, '..', '..', 'node_modules'), 'node_modules']
   }
-});
+};

package/lib/pluginUtils/getProdPlugins.js

@@ -11,6 +11,8 @@ var _fs = _interopRequireDefault(require("fs"));
 
 var _webpack = _interopRequireDefault(require("webpack"));
 
+var _caseSensitivePathsWebpackPlugin = _interopRequireDefault(require("case-sensitive-paths-webpack-plugin"));
+
 var _webpackBundleAnalyzer = require("webpack-bundle-analyzer");
 
 var _lodashWebpackPlugin = _interopRequireDefault(require("lodash-webpack-plugin"));
@@ -33,7 +35,6 @@ var _RtlCssPlugin = require("../plugins/RtlSplitPlugin/RtlCssPlugin");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 // eslint-disable-next-line no-unused-vars
 let getProdPlugins = (options, publicPath = '') => {
   let {
@@ -79,8 +80,7 @@ let getProdPlugins = (options, publicPath = '') => {
   const cssRTLFileNameTempalte = `css/[name]${hashTempalate}.rtl.css`;
   let isDevelopment = mode === 'prod' || mode === 'dev' || mode === 'dev-no-warn';
   enableChunkHash = !isDevelopment && enableChunkHash;
-  let plugins = [// new CaseSensitivePathsPlugin(),
-  new _webpack.default.IgnorePlugin(/^\.\/locale$/, /moment$/), new _webpack.default.DefinePlugin({
+  let plugins = [new _caseSensitivePathsWebpackPlugin.default(), new _webpack.default.IgnorePlugin(/^\.\/locale$/, /moment$/), new _webpack.default.DefinePlugin({
     __TEST__: false,
     __DEVELOPMENT__: false,
     __LOCAL_PRODUCTION__: isDevelopment,

package/lib/plugins/EFCPlugin.js

@@ -34,7 +34,8 @@ const {
   efc: efcOptios
 } = cliOptions;
 const {
-  createSDkFile
+  createSDkFile,
+  cdnStatement
 } = efcOptios;
 
 class EFCPlugin {
@@ -44,7 +45,7 @@ class EFCPlugin {
     this.i18nFileNameTemplate = options.i18nFileNameTemplate; // NOTE: this logic may be needed for i18n splited file name with contenthash cases
     // this.i18nManifestFileName = options.i18nManifestFileName;
     // IMPORTANT: here we mergeing optionds  from  pacakge.json  and options via constructor
-    // So when debugging consider this as well 
+    // So when debugging consider this as well
 
     this.options = Object.assign({}, efcOptios, options);
     this.options.entryPointName = options.entryPointName || 'efc';
@@ -125,17 +126,32 @@ class EFCPlugin {
   ${enableRTLSplit ? `const cssDir = ${cssDirStatement};` : ''}
   const prod = !${this.isDevelopment};
   let cdnVariableName = "${cdnVariableName}";
-  let assetURLs = {
-    //hook
-    js: ${JSON.stringify(jsPath || serverUrl)},
-    css: ${JSON.stringify(cssPath || serverUrl)},
-    i18n: ${JSON.stringify(i18nJsPath || serverUrl)}
-  };
+
+  function getAssetUrl(ext) {
+    ${cdnStatement ? `
+    return (() => {
+      let fu = (${cdnStatement});
+      return typeof fu === "function" ? fu(ext) : fu;
+    })();` : ''}
+
+    ${publicPaths.callback ? `return (${publicPaths.callback})(ext)` : ''}
+    
+    let assetURLs = {
+      //hook
+      js: ${JSON.stringify(jsPath || serverUrl)},
+      css: ${JSON.stringify(cssPath || serverUrl)},
+      i18n: ${JSON.stringify(i18nJsPath || serverUrl)}
+    };
+
+    return assetURLs[ext];
+
+  }
+  
 
   window.desk_urls={}
-  window.desk_urls.staticDomain = 'https:' + assetURLs.js + '/';
+  window.desk_urls.staticDomain = 'https:' + getAssetUrl('js') + '/';
   if (prod && cdnVariableName) {
-    window["${cdnVariableName}"] = 'https:' + assetURLs.css + '/';
+    window["${cdnVariableName}"] = 'https:' + getAssetUrl('css') + '/';
   }
 
   let initalI18nAssets = ${initalI18nAssets}.map(urlpath => "${i18nJsPath}/"+ urlpath);
@@ -150,12 +166,12 @@ class EFCPlugin {
       switch(type) {
         case 'script':
         case 'i18n':
-          el.src = (type === 'i18n'? assetURLs.i18n : assetURLs.js)+'/'+url
+          el.src = (type === 'i18n'? getAssetUrl('i18n') : getAssetUrl('js'))+'/'+url
           el.defer = 'defer';
           document.body.appendChild(el);
           break;
         case 'link':
-          el.href = assetURLs.css+'/'+url${enableRTLSplit ? `.replace(${JSON.stringify(cssDirTemplate)}, cssDir)` : ''}
+          el.href = getAssetUrl('css')+'/'+url${enableRTLSplit ? `.replace(${JSON.stringify(cssDirTemplate)}, cssDir)` : ''}
           el.rel = 'stylesheet';
           document.head.appendChild(el);
           break;

package/lib/plugins/ManifestPlugin.js

@@ -21,6 +21,14 @@ let filenameParser = filename => {
   } = _path.default.parse(hashedName);
 
   let nameparts = name.split('.');
+
+  if (ext === '.css' && /^(rtl|ltr)$/.test(nameparts[nameparts.length - 1])) {
+    return {
+      name: nameparts.slice(0, nameparts.length - 2).join('.') + ext,
+      hashedName
+    };
+  }
+
   return {
     name: nameparts.slice(0, nameparts.length - 1).join('.') + ext,
     hashedName

package/lib/schemas/index.js

@@ -47,6 +47,8 @@ var _default = {
     localeStatement: null,
     cssDirAttr: 'data-efc-dir',
     cssDirDefaultValue: 'ltr',
+    cdnStatement: '',
+    // cdnStatement: 'new URL(document.querySelector("script[src*=\'zohodesk-efc-sdk\']").src).origin',
     cssDirStatement: null
   },
   app: {

package/lib/utils/cssClassNameGenerate.js

@@ -40,6 +40,13 @@ var _default = (unique = true, {
   filenames,
   packages
 }, classNamePrefix) => (context, localIdentName, localName) => {
+  // NOTE:  in build macine we use date as folder path.
+  // So every time we create new build there is path will alway different
+  // in order to minmaze that problem we try in relative path;
+  // console.log('context.resourcePath', context.resourcePath, context);
+  // let contextResourcePath = context.resourcePath;
+  let relativePath = _path.default.relative(context.rootContext, context.resourcePath);
+
   if (context.resourcePath.endsWith('.plain.css')) {
     return localName;
   }
@@ -47,7 +54,7 @@ var _default = (unique = true, {
 
 
   if (unique) {
-    let h = (0, _getHash.default)(context.resourcePath + localName, 10);
+    let h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
     return `${classNamePrefix}${h}`;
   }
   /* old production mode end*/
@@ -60,7 +67,7 @@ var _default = (unique = true, {
   //let local = localName.toLowerCase()
 
   if (isSelectorPackage(context.resourcePath, packages) || filenames.indexOf(cleanFileName) !== -1) {
-    let h = (0, _getHash.default)(context.resourcePath + localName, 10);
+    let h = (0, _getHash.default)(`${relativePath}-${localName}`, 10);
     return `${classNamePrefix}${h}`;
   }
 

package/lib/utils/jsonHelper.js

@@ -39,15 +39,14 @@ let fileHandler = {
     }
   },
   writeFile: (path, data) => {
-    let jsonStr = JSON.stringify(data);
-    fs.writeFileSync(path, jsonStr);
-    return jsonStr;
+    fs.writeFileSync(path, JSON.stringify(data));
+    return JSON.stringify(data);
   }
 };
 exports.fileHandler = fileHandler;
 
 let jsonConcate = (receiverObj, senterObj) => {
-  Object.keys(senterObj).forEach(key => {
+  Object.keys(senterObj).map(key => {
     if (Object.prototype.hasOwnProperty.call(receiverObj, key)) {
       if (receiverObj[key].constructor === {}.constructor && senterObj[key].constructor === {}.constructor) {
         jsonConcate(receiverObj[key], senterObj[key]);
@@ -59,6 +58,8 @@ let jsonConcate = (receiverObj, senterObj) => {
     } else {
       receiverObj[key] = senterObj[key];
     }
+
+    return key;
   });
   return receiverObj;
 };
@@ -72,10 +73,12 @@ let jsonHelper = (path, pathArray, value) => {
     pathArray = pathArray.split('.'); //eslint-disable-line no-param-reassign
   }
 
-  pathArray.slice(0).reverse().forEach(key => {
+  pathArray.slice(0).reverse().map(key => {
     tempObj = {};
     tempObj[key] = value;
     value = tempObj; // eslint-disable-line no-param-reassign
+
+    return key;
   });
   let overAllObj = jsonConcate(JSON.parse(fileHandler.readFile(path)), tempObj);
   fileHandler.writeFile(path, overAllObj);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "0.0.1-exp.160.3",
+  "version": "0.0.1-exp.161.1",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",
@@ -55,6 +55,7 @@
     "copy-webpack-plugin": "5.1.2",
     "core-js": "3.6.5",
     "css-loader": "4.2.1",
+    "debug": "4.3.3",
     "escodegen": "2.0.0",
     "eslint": "7.6.0",
     "eslint-html-reporter": "0.7.4",
@@ -93,9 +94,9 @@
     "postcss-loader": "3.0.0",
     "postcss-selector-replace": "1.0.2",
     "prop-types": "15.7.2",
-    "react": "16.13.1",
+    "react": "^16.8.6",
     "react-dev-utils": "10.2.1",
-    "react-dom": "16.13.1",
+    "react-dom": "^16.8.6",
     "react-error-overlay": "6.0.7",
     "react-redux": "7.2.1",
     "react-router": "5.2.0",
@@ -113,7 +114,6 @@
     "script-loader": "0.7.2",
     "selectn": "1.1.2",
     "simple-normalizr": "1.2.5",
-    "speed-measure-webpack-plugin": "1.5.0",
     "uglifycss": "0.0.29",
     "url-loader": "4.1.0",
     "velocity-react": "1.4.3",
@@ -141,8 +141,5 @@
       ],
       "@babel/react"
     ]
-  },
-  "devDependencies": {
-    "speed-measure-webpack-plugin": "1.5.0"
   }
 }