@zohodesk/react-cli 1.1.6 → 1.1.8-exp.1

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

@@ -44,7 +44,8 @@ const {
     selectorReplace,
     removePropTypes,
     devConsoleExculde,
-    crossorigin
+    crossorigin,
+    postCssPluginOrder
   }
 } = options;
 let {
@@ -160,7 +161,8 @@ module.exports = {
         mediaQueryHoverActiveString,
         classNameBlob: '[local]',
         cssUniqueness: false,
-        selectorReplace: null
+        selectorReplace: null,
+        postCssPluginOrder
       })
     } : null, {
       test: seperateCssModules ? /\.module\.css$/ : /\.css$/,
@@ -175,7 +177,8 @@ module.exports = {
         cssUniqueness,
         selectorReplace,
         cssHashSelectors,
-        classNamePrefix
+        classNamePrefix,
+        postCssPluginOrder
       })
     }, {
       test: /\.jpe?g$|\.gif$|\.png$/,

package/lib/deprecationLogger.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deprecateMessage = deprecateMessage;
+exports.deprecateOption = deprecateOption;
+exports.deprecationLoggerEnd = deprecationLoggerEnd;
+exports.deprecationLoggerStart = deprecationLoggerStart;
+
+var _logger = require("./logger");
+
+function deprecateMessage(message) {
+  (0, _logger.messageLogger)('\x1b[33m%s\x1b[0m', message);
+}
+
+function printLine() {
+  deprecateMessage('\n!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! \n ');
+}
+
+let isFirstDeprecation = false;
+
+function deprecateOption(previousObjPath = '', newObjPath = '', message = '') {
+  // eslint-disable-next-line no-use-before-define
+  deprecationLoggerStart();
+  deprecateMessage(`Please move "${previousObjPath.split('.').join(' > ')}" to "${newObjPath.split('.').join(' > ')}" following option ${message}`);
+}
+
+function deprecationLoggerStart() {
+  if (!isFirstDeprecation) {
+    isFirstDeprecation = true;
+    printLine();
+  }
+}
+
+function deprecationLoggerEnd() {
+  if (isFirstDeprecation) {
+    isFirstDeprecation = false;
+    printLine();
+  }
+}

package/lib/loaderUtils/configsAssetsLoaders.js

@@ -79,39 +79,39 @@ function createNameTemplate(enableChunkHash) {
   const ext = `${enableChunkHash ? '.[hash:20]' : ''}.[ext]`;
   return `[name]${ext}`;
 }
-/*
-export function createImageAndFontsAndSVGLoaders(enableChunkHash) {
-  const nameTemplate = createNameTemplate(enableChunkHash);
-  return [
-    configImageLoader(nameTemplate),
-    configFontLoader(nameTemplate),
-    configSVGLoader(nameTemplate),
-    configAudioLoader(nameTemplate)
-  ];
-}
+/*
+export function createImageAndFontsAndSVGLoaders(enableChunkHash) {
+  const nameTemplate = createNameTemplate(enableChunkHash);
+  return [
+    configImageLoader(nameTemplate),
+    configFontLoader(nameTemplate),
+    configSVGLoader(nameTemplate),
+    configAudioLoader(nameTemplate)
+  ];
+}
 */
 
-/*
-export function createLoaderOptionObject(
-  loaderName,
-  nameTemplate,
-  fallback,
-  limit = 1000
-) {
-  return {
-    loader: loaderName,
-    options: {
-      limit,
-      name: nameTemplate,
-      fallback
-    }
-  };
-}
-
-function configLoaderObject(filter, loaderAndOptions) {
-  return {
-    test: filter,
-    use: loaderAndOptions
-  };
-}
+/*
+export function createLoaderOptionObject(
+  loaderName,
+  nameTemplate,
+  fallback,
+  limit = 1000
+) {
+  return {
+    loader: loaderName,
+    options: {
+      limit,
+      name: nameTemplate,
+      fallback
+    }
+  };
+}
+
+function configLoaderObject(filter, loaderAndOptions) {
+  return {
+    test: filter,
+    use: loaderAndOptions
+  };
+}
 */

package/lib/loaderUtils/getCSSLoaders.js

@@ -18,6 +18,24 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const fs = require('fs');
 
 const options = (0, _utils.getOptions)();
+const defaultPostCssPluginOrder = ['valueReplacer', 'selectorReplace', 'hasRTL', 'hoverActive', 'combinerMediaQuery', 'cssVariableReplacement', 'selectorWeight', 'minifier', 'composeMinification'];
+
+function calculatePostCssPluginOrder(postCssPluginOrder, pluginOrder) {
+  // if(typeof postCssPluginOrder === Boolean)
+  if (typeof postCssPluginOrder === 'boolean') {
+    if (postCssPluginOrder) {
+      return pluginOrder;
+    }
+
+    return defaultPostCssPluginOrder.filter(value => pluginOrder.includes(value));
+  }
+
+  if (Array.isArray(postCssPluginOrder)) {
+    return postCssPluginOrder;
+  }
+
+  return [];
+}
 
 const getCSSLoaders = optionsObj => {
   const {
@@ -29,7 +47,8 @@ const getCSSLoaders = optionsObj => {
     cssUniqueness,
     selectorReplace,
     cssHashSelectors,
-    classNamePrefix
+    classNamePrefix,
+    postCssPluginOrder
   } = optionsObj;
   const {
     devCssFileBountry
@@ -54,7 +73,7 @@ const getCSSLoaders = optionsObj => {
   } // console.log('selector weight config : ', selectorWeightConfig);
 
 
-  let postcssPlugins = [plugins.valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), plugins.selectorReplace && require('../postcss-plugins/SelectorReplace')(selectorReplace), plugins.hasRTL && require('@zohodesk/postcss-rtl')({
+  const postcssPlugins = [plugins.valueReplacer && require('../postcss-plugins/ValueReplacer')(valueReplacer), plugins.hasRTL && require('@zohodesk/postcss-rtl')({
     addPrefixToSelector: function addPrefixToSelector(selector, prefix) {
       if (prefix === '[dir]') {
         return selector;
@@ -62,7 +81,7 @@ const getCSSLoaders = optionsObj => {
 
       return `${prefix} ${selector}`; // Make selectors like [dir=rtl] > .selector
     }
-  }), plugins.combinerMediaQuery && require('postcss-combine-media-query')(), plugins.hoverActive && require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString), plugins.cssVariableReplacement && fs.existsSync(cssVariableReplacementConfig) && require('../postcss-plugins/variableModificationPlugin/index').plugin(cssVariableReplacementConfig) // ,
+  }), plugins.selectorReplace && require('../postcss-plugins/SelectorReplace')(selectorReplace), plugins.combinerMediaQuery && require('postcss-combine-media-query')(), plugins.hoverActive && require('../postcss-plugins/hoverActivePlugin')(mediaQueryHoverActiveString), plugins.cssVariableReplacement && fs.existsSync(cssVariableReplacementConfig) && require('../postcss-plugins/variableModificationPlugin/index').plugin(cssVariableReplacementConfig) // ,
   // plugins.composeMinification &&
   //   require('../postcss-plugins/composePlugin')()
   ].filter(Boolean);
@@ -89,65 +108,67 @@ const getCSSLoaders = optionsObj => {
         // console.log('check here : ', params.resourcePath);
         // getCSSLoaders for all postcss filtering
 
-        /*
-        input : 
-        params.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
-        patterns : [
-            // include all files
-           "valueReplacer": [ 
-              "*"
-            ],
-            // include all files
-            "selectorReplace": [
-              "*"
-            ],
-            // include src folder, include deskapp folder, exclude node modules
-            "hoverActive": [
-              "src",
-              "deskapp",
-              "!node_modules"
-            ],
-            // include src folder, include deskapp folder, exclude node modules
-            "combinerMediaQuery": [
-              "src",
-              "deskapp",
-              "!node_modules"
-            ],
-            // include src folder, include deskapp folder, exclude node modules
-            "hasRTL": [
-              "src",
-              "deskapp",
-              "!node_modules"
-            ],
-            // include src folder, include deskapp folder, exclude node modules
-            "cssVariableReplacement": [
-              "src",
-              "deskapp",
-              "!node_modules"
-            ],
-            // include src folder, include deskapp folder, exclude node modules
-            "selectorWeight": [
-              "src",
-              "deskapp",
-              "!node_modules"
-            ],
-            // include all files
-            "cssUniqueness": [
-              "*"
-            ]
-        ],
-        
-        [ postcssPlugins that are implemented ]
-          */
+        /*
+        input : 
+        params.resourcePath : 'D:/MyWork/..../desk_client_app/supportapp/src/components/Avatar/Avatar.module.css,
+        patterns : [
+            // include all files
+           "valueReplacer": [ 
+              "*"
+            ],
+            // include all files
+            "selectorReplace": [
+              "*"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "hoverActive": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "combinerMediaQuery": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "hasRTL": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "cssVariableReplacement": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include src folder, include deskapp folder, exclude node modules
+            "selectorWeight": [
+              "src",
+              "deskapp",
+              "!node_modules"
+            ],
+            // include all files
+            "cssUniqueness": [
+              "*"
+            ]
+        ],
+        
+        [ postcssPlugins that are implemented ]
+            */
         //  console.log(params.resourcePath);
         //  console.log(postcssPlugins);
-        const finalpostcssPlugins = (0, _fileHandling.isFileNameMatchingPattern)({
+        const pluginOrder = Object.keys(plugins).filter(x => plugins[x] !== false);
+        const finalPostcssPlugins = (0, _fileHandling.isFileNameMatchingPattern)({
           filename: params.resourcePath,
           filterObject: patterns,
-          plugins: postcssPlugins
+          plugins: postcssPlugins,
+          order: calculatePostCssPluginOrder(postCssPluginOrder, pluginOrder)
         }); // postcssPlugins that are allowed
 
-        return finalpostcssPlugins.length > 0 ? finalpostcssPlugins : [require('../postcss-plugins/EmptyPlugin')()];
+        return finalPostcssPlugins.length > 0 ? finalPostcssPlugins : [require('../postcss-plugins/EmptyPlugin')()];
       }
     }
   } : null, plugins.composeMinification ? {

package/lib/loaders/__test__/markdownLoader.spec.js

@@ -0,0 +1,145 @@
+"use strict";
+
+const {
+  markdownParser
+} = require('../markdownLoader'); // Replace './your-file' with the correct file path
+
+
+describe('markdownParser', () => {
+  test('For {}(braces) case', () => {
+    const source = `
+    /* MD:START
+    # {Hi, This is Test Case :)}
+    MD:END */
+    `;
+    const expectedOutput = `
+    <><div class="markDown"><h1>&#123;Hi, This is Test Case :)&#125;</h1>
+</div></>
+    `;
+    expect(markdownParser(source)).toEqual(expectedOutput);
+  });
+  test('For $ (dollor) case', () => {
+    const source = `
+    /* MD:START
+    # $Hi, This is Test Case :)
+    MD:END */
+    `;
+    const expectedOutput = `
+    <><div class="markDown"><h1>&#36;Hi, This is Test Case :)</h1>
+</div></>
+    `;
+    expect(markdownParser(source)).toEqual(expectedOutput);
+  });
+  test('For All kind of Tag Cases', () => {
+    const source = `
+    /* MD:START
+    # Markdown File with Variety of Data
+
+    ## Text
+    
+    This is a paragraph of text.
+    
+    ## Headings
+    
+    ### Heading 1
+    
+    ### Heading 2
+    
+    #### Heading 2.1
+    
+    #### Heading 2.2
+    
+    ## Lists
+    
+    ### Unordered List
+    
+    - Item 1
+    - Item 2
+    - Item 3
+    
+    ### Ordered List
+    
+    1. First item
+    2. Second item
+    3. Third item
+    
+    ## Links
+    
+    Here's a link to [OpenAI's website](https://openai.com).
+    
+    ## Images
+    
+    ![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)
+    
+    ## Tables
+    
+    | Name  | Age | Gender |
+    |-------|-----|--------|
+    | John  | 25  | Male   |
+    | Sarah | 30  | Female |
+    | Mark  | 35  | Male   |
+    
+    MD:END */
+    `;
+    const expectedOutput = `
+    <><div class="markDown"><h1>Markdown File with Variety of Data</h1>
+<h2>Text</h2>
+<p>This is a paragraph of text.</p>
+<h2>Headings</h2>
+<h3>Heading 1</h3>
+<h3>Heading 2</h3>
+<h4>Heading 2.1</h4>
+<h4>Heading 2.2</h4>
+<h2>Lists</h2>
+<h3>Unordered List</h3>
+<ul>
+<li>Item 1</li>
+<li>Item 2</li>
+<li>Item 3</li>
+</ul>
+<h3>Ordered List</h3>
+<ol>
+<li>First item</li>
+<li>Second item</li>
+<li>Third item</li>
+</ol>
+<h2>Links</h2>
+<p>Here's a link to <a href="https://openai.com">OpenAI's website</a>.</p>
+<h2>Images</h2>
+<p><img src="https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg" alt="Markdown Logo"/></p>
+<h2>Tables</h2>
+<table>
+<thead>
+<tr>
+<th>Name</th>
+<th>Age</th>
+<th>Gender</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>John</td>
+<td>25</td>
+<td>Male</td>
+</tr>
+<tr>
+<td>Sarah</td>
+<td>30</td>
+<td>Female</td>
+</tr>
+<tr>
+<td>Mark</td>
+<td>35</td>
+<td>Male</td>
+</tr>
+</tbody>
+</table>
+</div></>
+    `;
+    expect(markdownParser(source)).toEqual(expectedOutput);
+  });
+  test('For Source null case', () => {
+    expect(markdownParser(null)).toEqual('');
+    expect(markdownParser('')).toEqual('');
+  });
+});

package/lib/loaders/docsLoader.js

@@ -8,6 +8,8 @@ var _path = _interopRequireDefault(require("path"));
 
 var _reactLiveConvertor = require("./reactLiveConvertor");
 
+var _markdownLoader = require("./markdownLoader.js");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 module.exports = function (source) {
@@ -24,6 +26,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, _reactLiveConvertor.reactLiveConvertor)(source, originalFilePath)); //to Enable the ReactLive Converter
 
   return `${source};${name}.source=${JSON.stringify(src)};${name}.filePath=${JSON.stringify(filePath)}`;

package/lib/loaders/markdownLoader.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.markdownParser = markdownParser;
+
+const markdownIt = require('markdown-it'); // const md = new markdownIt({ linkify: true,breaks:true });
+
+
+const md = new markdownIt({
+  html: false,
+  linkify: true,
+  typographer: true,
+  breaks: true,
+  xhtmlOut: true
+}); //const md = new markdownIt();
+
+function markdownParser(source) {
+  if (!source) {
+    return '';
+  }
+
+  const startTag = '/* MD:START';
+  const endTag = 'MD:END */'; // Iterate through all occurrences of the tags
+
+  let startIndex = source.indexOf(startTag);
+
+  while (startIndex !== -1) {
+    const endIndex = source.indexOf(endTag, startIndex);
+
+    if (endIndex !== -1) {
+      const extractedMarkdown = source.slice(startIndex + startTag.length, endIndex);
+      let lines = extractedMarkdown.split('\n');
+      lines = lines.filter(line => line.trim() !== '');
+      const firstLineIndentMatch = lines[0].match(/^\s+/);
+      const firstLineIndent = firstLineIndentMatch ? firstLineIndentMatch[0] : '';
+      const modifiedStr = lines.map(line => line.replace(new RegExp(`^${firstLineIndent}`), '')).join('\n').replace(/(:--)|(--:)/g, '---');
+      let html = md.render(modifiedStr); //html = html.replace(/"|<hr>|<img src=(".*?")>|<br>|:--|--:|{|}|\$/g, match => {
+
+      html = html.replace(/"|{|}|\$/g, match => {
+        // if (match === '<hr>') {
+        //   return '<hr/>';
+        // } else if (match.startsWith('<img src=')) {
+        //   return match.replace('>', '/>');
+        // } else if (match === '<br>') {
+        //   return '<br/>';
+        if (match === '$') {
+          return '&#36;';
+        } else if (match === '{') {
+          return '&#123;';
+        } else if (match === '}') {
+          return '&#125;';
+        } // else if (match === ':--' || match === '--:' ) {
+        //   return '---';
+        // }
+        else if (match === '}') {
+          return '&#125;';
+        }
+
+        return match;
+      }); // console.log(html,"html");
+
+      source = source.replace(source.slice(startIndex, endIndex + endTag.length), '<><div class="markDown">' + html + '</div></>');
+    }
+
+    startIndex = source.indexOf(startTag, startIndex + 1); // console.log(source)
+  }
+
+  return source;
+}

package/lib/loaders/workerLoader.js

@@ -16,7 +16,7 @@ var _SingleEntryPlugin = _interopRequireDefault(require("webpack/lib/SingleEntry
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* import WebWorkerTemplatePlugin from 'webpack/lib/webworker/WebWorkerTemplatePlugin';
+/* import WebWorkerTemplatePlugin from 'webpack/lib/webworker/WebWorkerTemplatePlugin';
 import ExternalsPlugin from 'webpack/lib/ExternalsPlugin'; */
 const schema = {
   'type': 'object',
@@ -80,14 +80,14 @@ function pitch(request) {
     globalObject: 'self'
   };
   workerContext.compiler = this._compilation.createChildCompiler(`worker-loader ${request}`, workerContext.options);
-  /* 
-  new WebWorkerTemplatePlugin().apply(workerContext.compiler);
-  
-  if (compilerOptions.externals) {
-    new ExternalsPlugin(
-      getExternalsType(compilerOptions),
-      compilerOptions.externals
-    ).apply(workerContext.compiler);
+  /* 
+  new WebWorkerTemplatePlugin().apply(workerContext.compiler);
+  
+  if (compilerOptions.externals) {
+    new ExternalsPlugin(
+      getExternalsType(compilerOptions),
+      compilerOptions.externals
+    ).apply(workerContext.compiler);
   } */
 
   new _SingleEntryPlugin.default(this.context, `!!${request}`, _path.default.parse(this.resourcePath).name).apply(workerContext.compiler);

package/lib/pluginUtils/getDevPlugins.js

@@ -72,7 +72,8 @@ const getDevPlugins = (options, publicPath) => {
       enableRTLSplit
     },
     i18n,
-    unusedFiles
+    unusedFiles,
+    resourceHints
   } = options;
   const hasEFC = newOptionForEnableEFC || prevOptionForEnableEFC;
   const cssLTRFileNameTempalte = enableRTLSplit ? 'css/[name].ltr.css' : 'css/[name].css';
@@ -94,7 +95,7 @@ const getDevPlugins = (options, publicPath) => {
     filename: cssLTRFileNameTempalte,
     // ignoreOrder: true,
     chunkFilename: cssLTRFileNameTempalte
-  }), new _plugins.ResourceHintsPlugin()];
+  }), new _plugins.ResourceHintsPlugin(resourceHints)];
 
   if (enableRTLSplit) {
     pluginsArr.push(new _RtlCssPlugin.RtlCssPlugin({
@@ -114,11 +115,11 @@ const getDevPlugins = (options, publicPath) => {
   }
 
   const i18nManifestFileName = 'i18n-manifest.json';
-  /**
-   * NOTE:
-   *  this file name ext .i18n.js added
-   *  Because, in service worker they maintain cache as file name based
-   *  So, to make differce we added .i18n.js ext.
+  /**
+   * NOTE:
+   *  this file name ext .i18n.js added
+   *  Because, in service worker they maintain cache as file name based
+   *  So, to make differce we added .i18n.js ext.
    */
 
   const i18nFileNameTemplate = 'i18n-chunk/[locale]/[name].i18n.js';

package/lib/pluginUtils/getProdPlugins.js

@@ -107,7 +107,7 @@ const getProdPlugins = (options, publicPath = '') => {
     // ignoreOrder: true,
     filename: cssLTRFileNameTempalte,
     chunkFilename: cssLTRFileNameTempalte
-  }), new _plugins.ResourceHintsPlugin(), new _plugins.MinifyPlugin()];
+  }), new _plugins.ResourceHintsPlugin(options.resourceHints), new _plugins.MinifyPlugin()];
 
   if (enableRTLSplit) {
     pluginsArr.push(new _RtlCssPlugin.RtlCssPlugin({
@@ -121,11 +121,11 @@ const getProdPlugins = (options, publicPath = '') => {
   }
 
   const i18nManifestFileName = 'i18n-manifest.json';
-  /**
-   * NOTE:
-   *  this file name ext .i18n.js added
-   *  Because, in service worker they maintain cache as file name based
-   *  So, to make differce we added .i18n.js ext.
+  /**
+   * NOTE:
+   *  this file name ext .i18n.js added
+   *  Because, in service worker they maintain cache as file name based
+   *  So, to make differce we added .i18n.js ext.
    */
 
   const i18nFileNameTemplate = 'i18n-chunk/[locale]/[name].[chunkhash].i18n.js';