@zohodesk/react-cli 0.0.1-beta.16 → 0.0.1-beta.162

package/lib/plugins/ResourceHintsPlugin.js

@@ -1,49 +1,67 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+const {
+  Template
+} = require('webpack');
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+const pluginName = 'prefetch-preload-chunk-plugin';
 
-var _require = require('webpack'),
-    Template = _require.Template;
+class ResourceHintsPlugin {
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, ({
+      mainTemplate
+    }) => {
+      mainTemplate.hooks.requireExtensions.tap(pluginName, (source, chunk, hash) => {
+        const idNameMap = chunk.getChunkMaps().name;
+        const nameIdMap = {};
+        let needsMap = false;
 
-var pluginName = 'prefetch-preload-chunk-plugin';
+        for (const key in idNameMap) {
+          if (Object.prototype.hasOwnProperty.call(idNameMap, key)) {
+            const value = idNameMap[key];
+            nameIdMap[value] = key;
 
-var ResourceHintsPlugin = function () {
-  function ResourceHintsPlugin() {
-    _classCallCheck(this, ResourceHintsPlugin);
-  }
-
-  _createClass(ResourceHintsPlugin, [{
-    key: 'apply',
-    value: function apply(compiler) {
-      compiler.hooks.thisCompilation.tap(pluginName, function (_ref) {
-        var mainTemplate = _ref.mainTemplate;
-
-        mainTemplate.hooks.requireExtensions.tap(pluginName, function (source, chunk, hash) {
-          var idNameMap = chunk.getChunkMaps().name;
-          var nameIdMap = {};
-          var needsMap = false;
-          for (var key in idNameMap) {
-            if (Object.prototype.hasOwnProperty.call(idNameMap, key)) {
-              var value = idNameMap[key];
-              nameIdMap[value] = key;
-              if (key !== value) {
-                needsMap = true;
-              }
+            if (key !== value) {
+              needsMap = true;
             }
           }
-          return Template.asString([source, '', '// Prefetch a chunk (' + pluginName + ')', mainTemplate.requireFn + '.pfc = function prefetchChunk(chunkId) {', Template.indent((needsMap ? ['chunkId = ' + JSON.stringify(nameIdMap) + '[chunkId]||chunkId;'] : []).concat(['var promises = [];', 'if(installedChunks[chunkId] === undefined) {', Template.indent(['installedChunks[chunkId] = null;', mainTemplate.hooks.linkPrefetch.call('', chunk, hash), 'document.head.appendChild(link);', mainTemplate.hooks.requireEnsure.call('', chunk, hash)]), '}'])), '};', '// Preload a chunk (' + pluginName + ')', mainTemplate.requireFn + '.plc = function preloadChunk(chunkId) {', Template.indent((needsMap ? ['chunkId = ' + JSON.stringify(nameIdMap) + '[chunkId]||chunkId;'] : []).concat(['if(installedChunks[chunkId] === undefined) {', Template.indent(['installedChunks[chunkId] = null;', mainTemplate.hooks.linkPreload.call('', chunk, hash), 'document.head.appendChild(link);', 'var head = document.getElementsByTagName(\'head\')[0];', mainTemplate.hooks.jsonpScript.call('', chunk, hash), 'head.appendChild(script);']), '}'])), '};']);
-        });
+        }
+
+        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;`]
+            : []
+          ).concat([
+            'var promises = [];',
+            'if(installedChunks[chunkId] === undefined) {',
+            Template.indent([
+              'installedChunks[chunkId] = null;',
+              /* mainTemplate.hooks.linkPrefetch.call('', chunk, hash),
+              'document.head.appendChild(link);', */
+
+        /*
+              mainTemplate.hooks.requireEnsure.call('', chunk, hash)
+            ]),
+            '}'
+          ])
+        ),
+        '}',
+        */
+        `// 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);'
+        ]), '}']), '};']);
       });
-    }
-  }]);
+    });
+  }
 
-  return ResourceHintsPlugin;
-}();
+}
 
-exports.default = ResourceHintsPlugin;
+var _default = ResourceHintsPlugin;
+exports.default = _default;

package/lib/plugins/RtlSplitPlugin/OverwriteCssPathForRTL.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+
+var _replaceCssDirTemplate = require("./replaceCssDirTemplate");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// const HtmlWebpackPlugin = require('html-webpack-plugin');
+const pluginName = 'OverwriteCssPathForRTL'; // const pluginName = 'rtl-css-transform-webpack-plugin';
+// if we choose file name as style.ltr.css and style.rtl.css it  will be easy for html template
+// this  plugin code copy from https://github.com/nicolashemonic/rtl-css-transform-webpack-plugin
+
+class OverwriteCssPathForRTL {
+  constructor(options = {
+    dirVarName: 'document.dir'
+  }) {
+    this.dirVarName = options.dirVarName || 'document.dir';
+    this.templateLabel = options.templateLabel || '{{--dir}}';
+  }
+
+  overwriteCssPathinHTML(compilation) {
+    _htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tapAsync(pluginName, (data, cb) => {
+      let {
+        assets
+      } = data;
+      cb(null, Object.assign({}, data, {
+        assets: Object.assign({}, assets, {
+          css: assets.css && (0, _replaceCssDirTemplate.replaceCssDirTemplateMapper)(assets.css, this.templateLabel)
+        })
+      }));
+    });
+  }
+
+  overwriteCssPathinRequireEnsure(compilation) {
+    // NOTE: if you goig to change an thing here you may check  with EFCPlugin, ServiceWorkerPlugin
+    const {
+      mainTemplate
+    } = compilation; // TODO: must verify when we move to webpack5 ay be  we need to change this
+    // TODO it's may not be perfect solution, but it will work
+    // mainTemplate.hooks.assetPath.tap(pluginName, (path, data) => {
+
+    mainTemplate.hooks.assetPath.tap(pluginName, filePath => {
+      if (!filePath.endsWith('.css"')) {
+        return filePath;
+      }
+
+      const ENDS = '.ltr.css"'; // if  we need total differend temlate for  file name  it will be too hard
+
+      const templateText = `"+(${this.dirVarName} === "rtl" ? ".rtl": ".ltr")+".css"`; // const templateText = `"+(${this.dirVarName} === "rtl" ? ".rtl": "")+".css"`;
+      // NOTE:
+      // we don't use rtlFilename as full replace because it may increace runtime chunk file size
+      //  they replace [chunkhash] with object full chunk hash so it may dub
+      // const templateText = `(${this.dirVarName} === "rtl" ? ${JSON.stringify(this.rtlFilename)}: ${filePath})`;
+      // const templateText = '."+(document.dir === "rtl" ? ".rtl": "")+".css"';
+      // File  path going to  be like  below
+      //  '"style.css"' ==>> `"style."+document.dir+".css"`
+      //  '"style.css"' ==>> `"style."+(document.dir === "rtl" ? ".rtl": "")+".css"`
+      // replace like this
+      //  '.ltr.css"' ==>> `."+(document.dir === "rtl" ? ".rtl": ".ltr")+".css"`
+
+      return filePath.replace(ENDS, templateText);
+    });
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      this.overwriteCssPathinHTML(compilation);
+      this.overwriteCssPathinRequireEnsure(compilation);
+    });
+  }
+
+}
+
+exports.default = OverwriteCssPathForRTL;

package/lib/plugins/RtlSplitPlugin/RtlCssPlugin.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RtlCssPlugin = void 0;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _webpackSources = require("webpack-sources");
+
+var _OverwriteCssPathForRTL = _interopRequireDefault(require("./OverwriteCssPathForRTL"));
+
+var _RTLSplitPlugin = require("../../postcss-plugins/RTLSplitPlugin");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import HtmlWebpackPlugin from 'html-webpack-plugin';
+// import rtlcss from 'rtlcss';
+const pluginName = 'RtlCssPlugin'; // const pluginName = 'rtl-css-transform-webpack-plugin';
+
+const isCss = filename => _path.default.extname(filename) === '.css'; // this  plugin code copy from https://github.com/nicolashemonic/rtl-css-transform-webpack-plugin
+
+
+class RtlCssPlugin {
+  constructor(options = {}) {
+    /**
+     * @typedef {Object} Options
+     * @property  {String} filename [not used]
+     * @property  {String} dirVarName
+     * @property  {Boolean} sourcemap
+     * @property  {Object} config
+     */
+    this.options = {
+      filename: options.filename || '[name].rtl.css',
+      // dirVarName: options.dirVarName || 'document.dir',
+      sourcemap: options.sourcemap,
+      config: options.config
+    };
+    this.templateLabel = options.templateLabel || '{{--dir}}';
+    this.dirVarName = options.dirVarName || 'document.dir';
+    this.rtlSplitOptions = {
+      disableMiniFiySelector: options.disableMiniFiySelector
+    };
+  }
+
+  apply(compiler) {
+    new _OverwriteCssPathForRTL.default({
+      templateLabel: this.templateLabel,
+      dirVarName: this.dirVarName
+    }).apply(compiler); // const { filename, sourcemap, config } = this.options;
+    // const { devtool } = compiler.options;
+    // const postcssOptions = {
+    //   map: (sourcemap === undefined && !!devtool) || !!sourcemap
+    // };
+
+    compiler.hooks.compilation.tap(pluginName, compilation => {
+      compilation.hooks.optimizeChunkAssets.tapAsync(pluginName, (chunks, callback) => {
+        chunks.forEach(chunk => {
+          chunk.files.filter(isCss).forEach(chunkFilename => {
+            const asset = compilation.assets[chunkFilename];
+            const sourceStr = asset.source();
+            const {
+              ltr,
+              rtl
+            } = (0, _RTLSplitPlugin.separateRtlAndLtr)(sourceStr, this.rtlSplitOptions); // const result = rtlcss
+            //   .configure(config)
+            //   .process(asset.source(), postcssOptions);
+
+            const assetFilename = chunkFilename.replace('.ltr.', '.rtl.');
+            compilation.assets[chunkFilename] = new _webpackSources.RawSource(ltr);
+            compilation.assets[assetFilename] = new _webpackSources.RawSource(rtl);
+          });
+        });
+        callback();
+      });
+    });
+  }
+
+}
+
+exports.RtlCssPlugin = RtlCssPlugin;

package/lib/plugins/RtlSplitPlugin/RtrSplit.md

@@ -0,0 +1,30 @@
+# RTL Split 
+
+we are doing in build time generating  rtl related css code  by using @zohodesk/postcss-rt npm.
+It was automated, That postcss plugin create rtl reacted css and put them into same file, with css selector [dir=rtl] and ltr realted css with [dir=ltr].
+Here is problem mostly no one need rtl and ltr related css at the same time in browser, 
+we are try to split them  by [dir] and load which type of css is needed.
+For this purpose  we created RTL Split Plugin 
+
+
+# To Try it  out  rtl-ltr split
+### how to use this feature?
+
+  to use this feature use have give the below oprtions
+  `package.json`
+  ```json
+  {
+    /// ...some things
+    "react-cli": {
+      //  ...some things
+      "css": {
+        "enableRTLSplit": true,
+        "templateLabel": "{{--dir}}",// this is for html template css file path dir template
+        "disableMiniFiySelector": false,
+        "dirVarName": "document.dir" // this will be used for download css based on dir  
+      },
+      //  ...some things
+    }
+  }
+  ```
+

package/lib/plugins/RtlSplitPlugin/replaceCssDirTemplate.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.replaceCssDirTemplate = replaceCssDirTemplate;
+exports.replaceCssDirTemplateMapper = replaceCssDirTemplateMapper;
+exports.strFunctionTempalteToReplaceCssDir = void 0;
+
+function replaceCssDirTemplate(filePath, cssDirTemplate) {
+  return filePath.endsWith('.ltr.css') ? // ? cssPath.replace('.ltr.css', '.{{--dir}}.css')
+  filePath.replace('.ltr.css', `.${cssDirTemplate}.css`) : filePath;
+}
+
+function replaceCssDirTemplateMapper(assets, cssDirTemplate) {
+  return assets.map(filePath => replaceCssDirTemplate(filePath, cssDirTemplate));
+}
+
+const strFunctionTempalteToReplaceCssDir = cssDirTemplate => `function replaceCssDirTemplate(filePath, cssDirTemplate) {
+  return filePath.endsWith(".ltr.css")
+    ? // ? cssPath.replace('.ltr.css', '.{{--dir}}.css')
+      filePath.replace(".ltr.css", ".${cssDirTemplate}.css")
+    : filePath;
+}`;
+
+exports.strFunctionTempalteToReplaceCssDir = strFunctionTempalteToReplaceCssDir;

package/lib/plugins/ScriptInstrumentPlugin.js

@@ -1,51 +1,36 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _fs = _interopRequireDefault(require("fs"));
 
-var _fs = require('fs');
-
-var _fs2 = _interopRequireDefault(_fs);
-
-var _path = require('path');
-
-var _path2 = _interopRequireDefault(_path);
+var _path = _interopRequireDefault(require("path"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var coverageScript = _fs2.default.readFileSync(_path2.default.resolve(__dirname, '..', 'templates', 'CoverageScriptTemplate.js')).toString();
-
-var ScriptInstrumentPlugin = function () {
-  function ScriptInstrumentPlugin() {
-    _classCallCheck(this, ScriptInstrumentPlugin);
-  }
-
-  _createClass(ScriptInstrumentPlugin, [{
-    key: 'apply',
-    value: function apply(compiler) {
-      compiler.hooks.emit.tapAsync('ScriptInstrumentPlugin', function (compilation, callback) {
-        compilation.chunks.forEach(function (chunk) {
-          chunk.files.forEach(function (filename) {
-            if (filename === 'vendor.js') {
-              compilation.assets[filename].children.forEach(function (child) {
-                if (child._value) {
-                  child._value = coverageScript + child._value;
-                }
-              });
-            }
-          });
+let coverageScript = _fs.default.readFileSync(_path.default.resolve(__dirname, '..', 'templates', 'CoverageScriptTemplate.js')).toString();
+
+class ScriptInstrumentPlugin {
+  apply(compiler) {
+    compiler.hooks.emit.tapAsync('ScriptInstrumentPlugin', (compilation, callback) => {
+      compilation.chunks.forEach(chunk => {
+        chunk.files.forEach(filename => {
+          if (filename === 'vendor.js') {
+            compilation.assets[filename].children.forEach(child => {
+              if (child._value) {
+                child._value = coverageScript + child._value;
+              }
+            });
+          }
         });
-        callback();
       });
-    }
-  }]);
+      callback();
+    });
+  }
 
-  return ScriptInstrumentPlugin;
-}();
+}
 
 exports.default = ScriptInstrumentPlugin;

package/lib/plugins/ServiceWorkerPlugin.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _path = _interopRequireDefault(require("path"));
+
+var _getI18nFileUrlPathTemplate = require("./I18nSplitPlugin/utils/getI18nFileUrlPathTemplate");
+
+var _utils = require("../utils");
+
+var _I18nKeysIdentifer = _interopRequireDefault(require("./I18nSplitPlugin/I18nKeysIdentifer"));
+
+var _replaceCssDirTemplate = require("./RtlSplitPlugin/replaceCssDirTemplate");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const {
+  css: {
+    enableRTLSplit
+  },
+  i18n: {
+    chunkSplitEnable
+  }
+} = (0, _utils.getOptions)();
+
+class ServiceWorkerPlugin {
+  constructor(options) {
+    this.i18nFileNameTemplate = options.i18nFileNameTemplate;
+    this.fileName = options.fileName;
+    this.serviceWorkerPath = options.filePath;
+    this.writePath = options.exitPath;
+    this.replaceText = options.replaceText; // this.publicPaths = options.publicPaths;
+  }
+
+  isInitialChunk(chunk) {
+    if ('canBeInitial' in chunk) {
+      return chunk.canBeInitial();
+    }
+
+    return chunk.isInitial();
+  }
+
+  apply(compiler) {
+    compiler.hooks.emit.tap('ServiceWorkerPlugin', compilation => {
+      _fs.default.readFile(this.serviceWorkerPath, 'utf-8', (err, data) => {
+        if (err) {
+          throw new Error(err);
+        } else {
+          /* const extractedChunks = compilation.chunks.filter(chunk => {
+            if ('canBeInitial' in chunk) {
+              return chunk.canBeInitial();
+            }
+            return chunk.isInitial();
+          }); */
+          // let [js, css, , , i18nPublicPath] = this.publicPaths;
+          // let initialChunkUrls = [];
+          let allChunkUrls = [];
+          let allI18nAssets = [];
+          let entrypoint = compilation.entrypoints.get('main');
+          let initialChunkUrls = entrypoint.getFiles();
+          const cssDirTemplate = '@dir@';
+          /**
+           * NOTE:
+           *  if chunkSplitEnable is false means,
+           *    serviceWorker will get i18n files path for html
+           */
+
+          let initalI18nAssets = chunkSplitEnable ? entrypoint.chunks.filter(chunk => _I18nKeysIdentifer.default.isChunkHasI18n(chunk)).map(chunk => (0, _getI18nFileUrlPathTemplate.getI18nFileUrlPathTemplate)(compilation, chunk, this.i18nFileNameTemplate, '@locale@')) : [];
+          chunkSplitEnable && compilation.chunks.filter(c => !this.isInitialChunk(c)).filter(chunk => _I18nKeysIdentifer.default.isChunkHasI18n(chunk)).forEach(chunk => {
+            // let isInitial = this.isInitialChunk(chunk);
+            allChunkUrls = allChunkUrls.concat(chunk.files);
+            allI18nAssets.push((0, _getI18nFileUrlPathTemplate.getI18nFileUrlPathTemplate)(compilation, chunk, this.i18nFileNameTemplate, '@locale@'));
+          });
+          /** Removing source map files from getting added */
+
+          initialChunkUrls = initialChunkUrls.filter(fileName => !fileName.endsWith('.map'));
+          allChunkUrls = allChunkUrls.filter(fileName => !fileName.endsWith('.map'));
+
+          if (enableRTLSplit) {
+            initialChunkUrls = (0, _replaceCssDirTemplate.replaceCssDirTemplateMapper)(initialChunkUrls, cssDirTemplate);
+            allChunkUrls = (0, _replaceCssDirTemplate.replaceCssDirTemplateMapper)(allChunkUrls, cssDirTemplate);
+          }
+
+          let mod = data.replace(this.replaceText, `
+self.assets = ${JSON.stringify(initialChunkUrls.concat(initalI18nAssets))};
+self.allChunks = ${JSON.stringify(allChunkUrls.concat(allI18nAssets))};`);
+
+          if (!_fs.default.existsSync(this.writePath)) {
+            _fs.default.mkdirSync(this.writePath, {
+              recursive: true
+            });
+          }
+
+          _fs.default.writeFileSync(_path.default.join(this.writePath, this.fileName), mod);
+        }
+      });
+    });
+  }
+
+}
+
+exports.default = ServiceWorkerPlugin;