@zohodesk/react-cli 1.1.6-exp.2 → 1.1.7

package/README.md

@@ -44,19 +44,13 @@ Now to run app
 
 # Change Logs
 
-# 1.1.6-exp.2
-- fixed file path separator issue with split chunks config for vendor exclude list.
-- added support for not doing enforce true for chunks on splitchunks config.
+# 1.1.7
 
-# 1.1.5-exp.5
-- fixed the issues regarding custom chunks base config schema.
+**Feature**
+- Markdown parser feature added in docs
+For more info please refer to :
+[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/MarkdownParser.md)
 
-# 1.1.5-exp.4
-- added support for using regex expression to get group of chunks chunkId via Resource Hint plugin prefetch/preload hook.
-
-# 1.1.5-exp.3
-- added options to split chunks base config
-- added support for passing custom chunks split logic as function.
 # 1.1.6
 
 **Issue Fix**

package/docs/CustomChunks.md

@@ -4,17 +4,17 @@ In react-cli we provide options to create custom chunks.
 This Custom Chunk Option is array of Object
 that Object keys are
 
-- `pattern` **{ String | Function }** regex pattern as string and custom logic to split chunks can be defined using function
-- `name` **{ String }** chunk name
-- `size` **{ Number }** is count which is minimum chunk duplicated or need in chunks
+- `pattern` regex pattern as string
+- `name` chunk name
+- `size` is count which is minmum chunk dublicated or need in chunks
 
 > Since 0.0.1-exp.164.1
 
 extra features in custom chunks :-
 for more details [SplitChunkPlugin](https://webpack.js.org/plugins/split-chunks-plugin/) webpack
 
-- `minChunks`: `minChunks` is alias of `size` default value is `2`,
-- `rules`: `rules` is same as `pattern` with some easy hooks **(removed after v1.1.5)**
+- `minChunks`: `minChunks` is alies of `size` default value is `2`,
+- `rules`: `rules` is same as `pattern` with some easy hooks
   - use `/` for both windows and linux we will replace internally
   - for `.*` we need to use `*`
   - we can consider rules as regex when the `rules-string` has any of these `*`, `^`, `$`. So if you want regex then kindly use `*` in your `rules-string` for force regex
@@ -23,4 +23,4 @@ for more details [SplitChunkPlugin](https://webpack.js.org/plugins/split-chunks-
 - `enforce`: enforce default value is true,
 - `maxSize`: maxSize, default value is 0,
 - `minSize`: minSize, default value is 20000,
-  includeDependency: includeDependency default value is false
+  includeDepenency: includeDepenency default value is false

package/docs/MarkdownParser.md

@@ -0,0 +1,18 @@
+
+----> markdownParser <----
+
+1. Markdown parser allows us to write Documentation using Markdown language inside the Javascript file
+2. This will converts the snippets to HTML tag.
+3. We can implement this only inside the particular syntax which is metioned below.
+4. We can enable/disable this feature by `npm run docs --markdown_parser=true/false` default value will be `true`.
+5. Also we can enable/disable this feature by adding `enableMDParser` key inside the package.json under the `docs`.
+
+### syntax
+``` 
+/* MD:START 
+    # Hello World
+MD:END */
+```
+
+# v1.1.7 update: 
+* Markdown Parser feature implemented. 

package/lib/common/splitChunks.js

@@ -15,52 +15,35 @@ var _testPattern = require("./testPattern");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const isWindows = _os.default.platform().toLowerCase() === 'win32';
-const ps = _path.default.sep;
-const options = (0, _utils.getOptions)();
-const {
+let isWindows = _os.default.platform().toLowerCase() === 'win32';
+let ps = _path.default.sep;
+let options = (0, _utils.getOptions)();
+let {
   app: {
     vendorExclude,
     customChunks,
-    vendorInclude,
-    customChunksBaseConfig
+    vendorInclude
   }
 } = options;
-const reactBundleIncludeList = ['react', 'react-dom', 'react-redux', 'react-transition-group', 'scheduler', 'prop-types'];
-const vendorExcludelist = ['script-loader', 'raw-loader', ...reactBundleIncludeList, ...vendorExclude.map(vendorPath => vendorPath.replace(/[/\\]/g, _path.default.sep))];
 
-const isVendor = function isVendor(module) {
-  const {
+let isVendor = function isVendor(module) {
+  let {
     userRequest
   } = module;
-  return userRequest && (vendorInclude.some(item => userRequest.indexOf(item) !== -1) || userRequest.indexOf('node_modules') >= 0 && userRequest.endsWith('.css') === false && userRequest.endsWith('publicPathConfig.js') === false && vendorExcludelist.every(item => userRequest.indexOf(`node_modules${ps}${item}${ps}`) === -1));
+  let excludeList = ['script-loader', 'raw-loader', 'react', 'react-dom'];
+  excludeList = [...excludeList, ...vendorExclude];
+  return userRequest && (vendorInclude.some(item => userRequest.indexOf(item) !== -1) || userRequest.indexOf('node_modules') >= 0 && userRequest.endsWith('.css') === false && userRequest.endsWith('publicPathConfig.js') === false && excludeList.every(item => userRequest.indexOf(`node_modules${ps}${item}${ps}`) === -1));
 };
 
-const isReact = module => {
-  const {
+let isReact = module => {
+  let {
     userRequest
   } = module;
-  return userRequest && reactBundleIncludeList.some(pkg => userRequest.indexOf(`node_modules${ps}${pkg}${ps}`) >= 0);
+  let reactBundle = ['react', 'react-dom'];
+  return userRequest && reactBundle.some(pkg => userRequest.indexOf(`node_modules${ps}${pkg}${ps}`) >= 0);
 };
 
-function rulesMatcher(pattern) {
-  if (typeof pattern === 'function') {
-    return pattern;
-  }
-
-  if (Array.isArray(pattern)) {
-    return ({
-      userRequest
-    }) => (0, _testPattern.testPattern)(userRequest, pattern);
-  }
-
-  return new RegExp(isWindows ? pattern.replace(/\//g, '\\') : pattern);
-}
-
-const baseSplitChunkConfig = Object.assign({
-  minSize: 15000
-}, customChunksBaseConfig);
-const specificCacheGroupConfig = {
+let defaultChunks = {
   'react.vendor': {
     name: 'react.vendor',
     chunks: 'all',
@@ -80,37 +63,45 @@ const specificCacheGroupConfig = {
     priority: -10
   }
 };
-const customChunksConfig = {};
+let customChunksConfig = {};
 customChunks.map((obj, index) => ({
   name: obj.name,
-  chunks: obj.chunks || 'all',
-  minChunks: obj.minChunks || obj.size || 2,
   pattern: obj.pattern,
+  minChunks: obj.minChunks || obj.size || 2,
+  rules: obj.rules,
+  // includeDepenency: obj.includeDepenency || false,
   priority: obj.priority || -10 * (index + 2),
-  enforce: obj.enforce,
-  minSize: obj.minSize,
-  // || 20000,
+  enforce: obj.enforce || true,
   maxSize: obj.maxSize,
   // || 0,
-  reuseExistingChunk: obj.reuseExistingChunk,
-  automaticNamePrefix: obj.automaticNamePrefix || '',
-  cacheGroupName: obj.cacheGroupName || obj.name
-})).forEach(({
+  minSize: obj.minSize,
+  // || 20000,
+  chunks: obj.chunks || 'all'
+})).map(({
   name,
-  chunks = 'all',
-  minChunks,
   pattern,
+  minChunks,
+  rules,
   priority,
+  // includeDepenency,
   enforce,
   minSize,
   maxSize,
-  reuseExistingChunk,
-  automaticNamePrefix,
-  cacheGroupName
+  chunks = 'all'
 }) => {
-  const obj = {
-    test: rulesMatcher(pattern),
+  let obj = {
+    name,
+    test: rules ? m => {
+      const {
+        userRequest
+      } = m;
+      return (0, _testPattern.testPattern)(userRequest, rules); // return (
+      //   pkgs.some(p => isRelated(userRequest, p)) ||
+      //   (includeDepenency && isDependency(m, pkgs))
+      // );
+    } : new RegExp(isWindows ? pattern.replace(/\//g, '\\') : pattern),
     chunks,
+    enforce,
     minChunks,
     priority
   };
@@ -123,30 +114,13 @@ customChunks.map((obj, index) => ({
     obj.maxSize = maxSize;
   }
 
-  if (enforce !== false) {
-    obj.enforce = true;
-  }
-
-  if (name !== undefined) {
-    obj.name = name;
-  }
-
-  if (reuseExistingChunk !== undefined) {
-    obj.reuseExistingChunk = reuseExistingChunk;
-  }
-
-  if (automaticNamePrefix) {
-    obj.automaticNamePrefix = automaticNamePrefix;
-  }
-
-  customChunksConfig[cacheGroupName] = obj;
+  return customChunksConfig[name] = obj;
 });
-const splitChunkConfig = Object.assign({}, baseSplitChunkConfig, {
+var _default = {
+  minSize: 12000,
   cacheGroups: Object.assign({
     default: false,
     vendors: false
-  }, specificCacheGroupConfig, customChunksConfig)
-});
-console.log('split chunks', splitChunkConfig);
-var _default = splitChunkConfig;
+  }, defaultChunks, customChunksConfig)
+};
 exports.default = _default;

package/lib/common/testPattern.js

@@ -13,25 +13,25 @@ var _path = require("path");
 const isWindows = _path.sep !== '/'; // this function  will  return true if pattern matched
 
 function _testPattern(req, pattern) {
-  let modifiedPattern = pattern;
+  let modifyedPattern = pattern;
 
-  if (/[*.$^]/.test(modifiedPattern)) {
+  if (/[*.$^]/.test(modifyedPattern)) {
     if (isWindows) {
-      // modifiedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
-      modifiedPattern = modifiedPattern.replace(/\//g, '\\\\');
+      // modifyedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
+      modifyedPattern = modifyedPattern.replace(/\//g, '\\\\');
     }
 
-    modifiedPattern = modifiedPattern.replace(/\./g, '\\.').replace(/\*/g, '.*');
-    const re = new RegExp(modifiedPattern);
+    modifyedPattern = modifyedPattern.replace(/\./g, '\\.').replace(/\*/g, '.*');
+    const re = new RegExp(modifyedPattern);
     return re.test(req);
   }
 
   if (isWindows) {
-    // modifiedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
-    modifiedPattern = modifiedPattern.replace(/\//g, '\\');
+    // modifyedPattern = pattern.replace(/\//g, ps.replace(/\\/g, '\\\\'));
+    modifyedPattern = modifyedPattern.replace(/\//g, '\\');
   }
 
-  return req.indexOf(modifiedPattern) !== -1;
+  return req.indexOf(modifyedPattern) !== -1;
 }
 
 function testPattern(req, pattern) {

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/plugins/ResourceHintsPlugin.js

@@ -19,7 +19,7 @@ class ResourceHintsPlugin {
       mainTemplate.hooks.requireExtensions.tap(pluginName, (source, chunk, hash) => {
         const idNameMap = chunk.getChunkMaps().name;
         const nameIdMap = {};
-        let needsMap = true;
+        let needsMap = false;
 
         for (const key in idNameMap) {
           if (Object.prototype.hasOwnProperty.call(idNameMap, key)) {
@@ -32,9 +32,7 @@ class ResourceHintsPlugin {
           }
         }
 
-        return Template.asString([source, '', `${mainTemplate.requireFn}.getChunkIds = function getChunkIds(chunkId) {`, Template.indent((needsMap ? [`const nameToChunkIdMap = ${JSON.stringify(nameIdMap)}`, 'const chunkNames = Object.keys(nameToChunkIdMap)'] : []).concat(['return chunkNames.filter(chunkName => chunkId.test(chunkName)).map(chunkName => nameToChunkIdMap[chunkName]);'])), '}', `// Prefetch a chunk (${pluginName})`, `${mainTemplate.requireFn}.pfc = function prefetchChunk(chunkId) {`, Template.indent([`let chunkIds = ${mainTemplate.requireFn}.getChunkIds(new RegExp(chunkId, 'i'))`, `chunkIds.forEach(idOfAChunk => {
-                ${mainTemplate.requireFn}.e(idOfAChunk);
-              })`]), '};',
+        return Template.asString([source, '', `${mainTemplate.requireFn}.getChunkId = function getChunkId(chunkId) {`, Template.indent((needsMap ? [`chunkId = ${JSON.stringify(nameIdMap)}[chunkId]||chunkId;`] : []).concat(['return chunkId;'])), '}', `// Prefetch a chunk (${pluginName})`, `${mainTemplate.requireFn}.pfc = function prefetchChunk(chunkId) {`, Template.indent([`chunkId = ${mainTemplate.requireFn}.getChunkId(chunkId)`, `${mainTemplate.requireFn}.e(chunkId);`]), '};',
         /*
           (needsMap
             ? [`chunkId = ${JSON.stringify(nameIdMap)}[chunkId]||chunkId;`]
@@ -55,7 +53,7 @@ class ResourceHintsPlugin {
         ),
         '}',
         */
-        `// Preload a chunk (${pluginName})`, `${mainTemplate.requireFn}.plc = function preloadChunk(chunkId) {`, Template.indent([`chunkId = ${mainTemplate.requireFn}.getChunkIds(new RegExp('^' + chunkId + '$'))[0]`, 'if(installedChunks[chunkId] === undefined) {', Template.indent(['installedChunks[chunkId] = null;', mainTemplate.hooks.linkPreload.call('', chunk, hash), 'document.head.appendChild(link);', `${mainTemplate.requireFn}.e(chunkId);` // 'var head = document.getElementsByTagName(\'head\')[0];',
+        `// Preload a chunk (${pluginName})`, `${mainTemplate.requireFn}.plc = function preloadChunk(chunkId) {`, Template.indent([`chunkId = ${mainTemplate.requireFn}.getChunkId(chunkId)`, 'if(installedChunks[chunkId] === undefined) {', Template.indent(['installedChunks[chunkId] = null;', mainTemplate.hooks.linkPreload.call('', chunk, hash), 'document.head.appendChild(link);', `${mainTemplate.requireFn}.e(chunkId);` // 'var head = document.getElementsByTagName(\'head\')[0];',
         // mainTemplate.hooks.jsonpScript.call('', chunk, hash),
         // 'head.appendChild(script);'
         ]), '}']), '};']);

package/lib/schemas/index.js

@@ -333,7 +333,6 @@ var _default = {
       inject: true
     },
     removePropTypes: false,
-    customChunksBaseConfig: null,
     customChunks: [{
       name: 'styles',
       pattern: '\\.css$'
@@ -383,6 +382,10 @@ var _default = {
       value: true,
       cli: 'react_live'
     },
+    enableMDParser: {
+      value: true,
+      cli: 'markdown_parser'
+    },
     rtlExclude: [],
     selectorReplace: null,
     plugins: {

package/lib/utils/getOptions.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _child_process = require("child_process");
 
-var _fs = _interopRequireWildcard(require("fs"));
+var _fs = _interopRequireDefault(require("fs"));
 
 var _path = _interopRequireDefault(require("path"));
 
@@ -15,10 +15,6 @@ var _schemas = _interopRequireDefault(require("../schemas"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // import { argv } from 'process';
 const args = process.argv.slice(2); // console.log('argv', argv);
 
@@ -187,9 +183,8 @@ function deprecationSupport(options) {
   Object.keys(options.app.patterns).forEach(key => {
     if (options.app.exclude[key] && options.app.patterns[key].length === 0) {
       let tempArr = options.app.exclude[key];
-      tempArr = tempArr.map(_x => {
-        const x = _x.replace(/\//gi, _path.default.sep);
-
+      tempArr = tempArr.map(x => {
+        x = x.replace(/\//gi, _path.default.sep);
         return `!**${x[0] === _path.default.sep || x[0] === '@' ? '' : _path.default.sep}${x}${x[x.length - 1] === _path.default.sep ? '' : _path.default.sep}**`;
       });
       options.app.patterns[key] = tempArr;
@@ -198,9 +193,8 @@ function deprecationSupport(options) {
   Object.keys(options.docs.patterns).forEach(key => {
     if (options.docs.exclude[key] && options.docs.patterns[key].length === 0) {
       let tempArr = options.docs.exclude[key];
-      tempArr = tempArr.map(_x => {
-        const x = _x.replace(/\//gi, _path.default.sep);
-
+      tempArr = tempArr.map(x => {
+        x = x.replace(/\//gi, _path.default.sep);
         return `!**${x[0] === _path.default.sep || x[0] === '@' ? '' : _path.default.sep}${x}${x[x.length - 1] === _path.default.sep ? '' : _path.default.sep}**`;
       });
       options.docs.patterns[key] = tempArr;
@@ -208,30 +202,18 @@ function deprecationSupport(options) {
   });
 }
 
-const getOptionsFromConfigFile = (appPath, configFileName) => {
-  const fileName = configFileName || 'build.config.js';
-
-  const packagePath = _path.default.join(appPath, fileName);
-
-  if ((0, _fs.existsSync)(packagePath)) {
-    return require(packagePath).config;
-  }
-
-  return null;
-};
-
 const getOptions = () => {
   if (global.reactCLIOptions) {
     return global.reactCLIOptions;
   }
 
   const appPath = process.cwd();
-  let userSchemas = getOptionsFromConfigFile(appPath, processEnv.config_file);
+  let userSchemas;
 
   const packagePath = _path.default.join(appPath, 'package.json');
 
   if (_fs.default.existsSync(packagePath)) {
-    userSchemas = userSchemas || require(packagePath)['react-cli'] || {};
+    userSchemas = require(packagePath)['react-cli'] || {};
   }
 
   const options = defaulter(_schemas.default, userSchemas || {}); // for future may be for npm 8 edge cases

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.1.6-exp.2",
+  "version": "1.1.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@zohodesk/react-cli",
-      "version": "1.1.6-exp.2",
+      "version": "1.1.6",
       "license": "ISC",
       "dependencies": {
         "@babel/cli": "7.10.5",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.1.6-exp.2",
+  "version": "1.1.7",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",
@@ -80,6 +80,7 @@
     "jsdom": "16.4.0",
     "loader-utils": "2.0.0",
     "lodash-webpack-plugin": "0.11.5",
+    "markdown-it": "^13.0.1",
     "mini-css-extract-plugin": "0.10.0",
     "nock": "13.2.9",
     "nodemailer": "6.4.11",

package/templates/docs/all.html

@@ -2,6 +2,7 @@
 <html dir="ltr">
 	<head>
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="./css/markdown.css">
 		<link rel="stylesheet" href="./css/b.min.css">
 		<style>
 		body {

package/templates/docs/component.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./css/component.css" />
     <link rel="stylesheet" href="/docs/css/main.css" />
+    <link rel="stylesheet" href="./css/markdown.css">
   </head>
   <body>
     <div id="react" class="appContainer"></div>

package/templates/docs/components.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="./css/component.css" />
     <link rel="stylesheet" href="./css/componentTest.css" />
     <link rel="stylesheet" href="/docs/css/main.css" />
+    <link rel="stylesheet" href="./css/markdown.css">
   </head>
   <body>
     <div id="react" class="ssTest appContainer"></div>

package/templates/docs/css/markdown.css

@@ -0,0 +1,202 @@
+:root{
+  --cli-md-cli-md-base-font-family: -apple-system,system-ui,"Segoe UI",Regular,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+    --cli-md-cli-md-base-colour: #d9dcde;
+}
+
+.markDown {
+  line-height: 1.6;
+  margin: 20px;
+  color: #333;
+  font-size: 16px;
+}
+.markDown p {
+  margin-bottom: 16px;
+  line-height:2
+}
+
+.markDown h1 {
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: var(--cli-md-base-font-family);
+  font-size: 2em;
+  font-weight: 600;
+  line-height: 1.25;
+  margin: 24px 0 16px;
+  padding-bottom: .3em;
+  word-wrap: break-word;
+  border-bottom: 1px solid #eaecef
+}
+
+.markDown h2 {
+  font-size: 1.5em
+}
+
+.markDown h2,.markDown h3 {
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: var(--cli-md-base-font-family);
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 16px;
+  margin-top: 24px;
+  padding-bottom: .3em;
+  word-wrap: break-word;
+  border-bottom: 1px solid #eaecef
+}
+
+.markDown h3 {
+  font-size: 1.2em
+}
+
+.markDown h4 {
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: var(--cli-md-base-font-family);
+  font-size: 1em;
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 16px;
+  margin-top: 24px;
+  word-wrap: break-word
+}
+
+.markDown td,.markDown th {
+  border-collapse: collapse;
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: var(--cli-md-base-font-family);
+  line-height: 24px;
+  padding: 6px 13px;
+  text-align: -webkit-left;
+  word-wrap: break-word;
+  border: 1px solid #dfe2e5
+}
+
+.markDown th {
+  font-weight: 600
+}
+
+.markDown tr {
+  background-color: #fff;
+  border-collapse: collapse;
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: var(--cli-md-base-font-family);
+  line-height: 24px;
+  overflow-wrap: break-word;
+  word-wrap: break-word
+}
+
+.markDown tr :nth-child(2n) {
+  background-color: #f6f8fa
+}
+
+.markDown thead {
+  font-size: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  border-spacing: 0;
+  border-collapse: collapse;
+  box-sizing: border-box
+}
+
+.markDown table {
+  -webkit-border-horizontal-spacing: 0;
+  -webkit-border-vertical-spacing: 0;
+  border-collapse: collapse;
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  display: block;
+  margin-top: 0;
+  overflow: auto;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content
+}
+
+.markDown image,.markDown table {
+  font-family: var(--cli-md-base-font-family);
+  line-height: 24px;
+  margin-bottom: 16px;
+  max-width: 100%;
+  word-wrap: break-word
+}
+
+.markDown image {
+  background-color: #fff;
+  border-style: none;
+  color: #0366d6;
+  cursor: pointer
+}
+
+.markDown ul {
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: var(--cli-md-base-font-family);
+  line-height: 24px;
+  margin-bottom: 16px;
+  margin-top: 0;
+  padding-left: 2em;
+  word-wrap: break-word
+}
+
+.markDown ul li {
+  list-style: initial
+}
+
+.markDown ol li,.markDown ul li {
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: var(--cli-md-base-font-family);
+  line-height: 24px;
+  margin-top: .25em;
+  text-align: left;
+  word-wrap: break-word
+}
+
+.markDown ol li {
+  list-style: decimal
+}
+
+.markDown pre {
+  background-color: #f6f8fa;
+  line-height: 1.45;
+  margin-bottom: 16px;
+  margin-top: 0;
+  overflow: auto;
+  overflow-wrap: normal;
+  padding: 16px;
+  white-space: pre;
+  word-break: normal
+}
+
+.markDown pre,.markDown code:not(.markDown pre code) {
+  border-radius: 6px;
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  font-size: 85%
+}
+
+.markDown code:not(.markDown pre code) {
+  background-color: rgba(27,31,35,.05);
+  line-height: 20.4px;
+  margin: 0;
+  padding: .2em .4em;
+  word-wrap: break-word
+}
+
+.markDown a {
+  box-sizing: border-box;
+  color: #0366d6;
+  cursor: pointer;
+  font-family: var(--cli-md-base-font-family);
+  line-height: 24px;
+  text-decoration: none;
+  word-wrap: break-word
+}
+
+.markDown a :hover {
+  outline: 0;
+  text-decoration: underline
+}

package/templates/docs/index.html

@@ -14,6 +14,7 @@
 	<script src="./js/active-line.js"></script>
 	<script src="./js/matchbrackets.js"></script>
 	<link rel="stylesheet" type="text/css" href="./css/hopscotch.css">
+	<link rel="stylesheet" href="./css/markdown.css">
 	<title>Zoho Desk - React Components</title>
 	<script>