@zohodesk/react-cli 1.1.11-exp.3 → 1.1.11-exp.4

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/RtlSplitPlugin/OverwriteCssPathForRTL.js

@@ -13,7 +13,6 @@ var _replaceCssDirTemplate = require("./replaceCssDirTemplate");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// const HtmlWebpackPlugin = require('html-webpack-plugin');
 // import { JavascriptModulesPlugin } from 'webpack';
 const pluginName = 'OverwriteCssPathForRTL';
 
@@ -27,15 +26,15 @@ class OverwriteCssPathForRTL {
 
   overwriteCssPathinHTML(compilation) {
     // NOTE: need to reconsider It is not working as expected
-    _htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tapAsync(pluginName, (data, cb) => {
+    _htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tap(pluginName, data => {
       const {
         assets
       } = data;
-      cb(null, { ...data,
+      return { ...data,
         assets: { ...assets,
           css: assets.css && (0, _replaceCssDirTemplate.replaceCssDirTemplateMapper)(assets.css, this.templateLabel)
         }
-      });
+      };
     });
   }
 
@@ -45,7 +44,7 @@ class OverwriteCssPathForRTL {
     } = compiler.webpack.sources;
 
     _JavascriptModulesPlugin.default.getCompilationHooks(compilation).renderMain.tap(pluginName, source => {
-      const templateText = `"+(${this.dirVarName} === "rtl" ? ".rtl": ".ltr")+"`;
+      const templateText = `"+(${this.dirVarName} === "rtl" ? "rtl": "ltr")+"`;
       const replacedStr = source.source().replace(/\[dir\]/g, templateText);
       return new RawSource(replacedStr);
     });

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/RtlSplitPlugin/RtlCssPlugin.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RtlCssPlugin = void 0;
 
-var _path = _interopRequireDefault(require("path"));
-
 var _webpack = require("webpack");
 
 var _OverwriteCssPathForRTL = _interopRequireDefault(require("./OverwriteCssPathForRTL"));
 
-var _RTLSplitPlugin = require("../../custom_postcss_loaders/RTLSplitPlugin");
+var _RTLSplitPlugin = require("../../../../postcss/custom_postcss_plugins/RTLSplitPlugin");
+
+var _utils = require("../../utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -19,17 +19,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // import rtlcss from 'rtlcss';
 const pluginName = 'RtlCssPlugin';
 
-const isCss = filename => _path.default.extname(filename) === '.css';
-
-const isDirRelatedCss = filename => filename.includes('[dir]');
-
 class RtlCssPlugin {
   constructor(options = {}) {
-    /**
-     * @typedef {Object} Options
-     * @property  {String} dirVarName
-     * @property  {Boolean} sourcemap
-     * @property  {Object} config
+    /**
+     * @typedef {Object} Options
+     * @property  {String} dirVarName
+     * @property  {Boolean} sourcemap
+     * @property  {Object} config
      */
     this.options = {
       // dirVarName: options.dirVarName || 'document.dir',
@@ -62,10 +58,9 @@ class RtlCssPlugin {
       // });
       compilation.hooks.processAssets.tap({
         name: pluginName,
-        stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
-        additionalAssets: true
+        stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_COMPATIBILITY
       }, assets => {
-        Object.keys(assets).filter(isCss).filter(isDirRelatedCss).forEach(chunkFilename => {
+        Object.keys(assets).filter(_utils.isCss).filter(_utils.isDirRelatedCss).forEach(chunkFilename => {
           const {
             source: asset
           } = compilation.getAsset(chunkFilename);
@@ -76,8 +71,8 @@ class RtlCssPlugin {
           } = (0, _RTLSplitPlugin.separateRtlAndLtr)(sourceStr, this.rtlSplitOptions);
           const ltrFilename = chunkFilename.replace('[dir]', 'ltr');
           const rtlFilename = chunkFilename.replace('[dir]', 'rtl');
-          compilation.deleteAsset(chunkFilename);
-          compilation.emitAsset(ltrFilename, new RawSource(ltr));
+          compilation.renameAsset(chunkFilename, ltrFilename);
+          compilation.updateAsset(ltrFilename, new RawSource(ltr));
           compilation.emitAsset(rtlFilename, new RawSource(rtl));
         });
       });

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/RtlSplitPlugin/RtrSplit.md

@@ -1,34 +1,34 @@
-# 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": {
-      "plugins": {
-        "rtlSplit": {
-          "enableRTLSplit": true,
-          "templateLabel": "{{--dir}}", // this is for html template css file path dir template
-          "disableMinifySelector": false,
-          "dirVarName": "document.dir" // this will be used for download css based on dir
-        }
-      }
-    }
-    //  ...some things
-  }
-}
-```
+# 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": {
+      "plugins": {
+        "rtlSplit": {
+          "enableRTLSplit": true,
+          "templateLabel": "{{--dir}}", // this is for html template css file path dir template
+          "disableMinifySelector": false,
+          "dirVarName": "document.dir" // this will be used for download css based on dir
+        }
+      }
+    }
+    //  ...some things
+  }
+}
+```

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/RtlSplitPlugin/replaceCssDirTemplate.js

@@ -5,11 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.replaceCssDirTemplate = replaceCssDirTemplate;
 exports.replaceCssDirTemplateMapper = replaceCssDirTemplateMapper;
+exports.replaceI18nLocalTemplate = replaceI18nLocalTemplate;
+exports.replaceI18nLocaleTemplateMapper = replaceI18nLocaleTemplateMapper;
 
 function replaceCssDirTemplate(filePath, cssDirTemplate) {
-  return filePath.replace('[dir]', cssDirTemplate);
+  return filePath // added for efc and service worker handling
+  .replaceAll('[dir]', cssDirTemplate).replace('.ltr.css', `.${cssDirTemplate}.css`);
 }
 
 function replaceCssDirTemplateMapper(assets, cssDirTemplate) {
   return assets.map(filePath => replaceCssDirTemplate(filePath, cssDirTemplate));
+}
+
+function replaceI18nLocalTemplate(filePath, localeTemplate) {
+  return filePath // added for efc and service worker handling
+  .replaceAll('[locale]', localeTemplate);
+}
+
+function replaceI18nLocaleTemplateMapper(assets, localeTemplate) {
+  return assets.map(filePath => replaceI18nLocalTemplate(filePath, localeTemplate));
 }

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/SelectorWeightPlugin/classHandling.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasPrevNodeIgnore = hasPrevNodeIgnore;
+exports.isAtRule = isAtRule;
+exports.isInsideMediaQuery = isInsideMediaQuery;
+
+function hasPrevNodeIgnore(index, prevNode, ignoreComment) {
+  return index !== 0 && prevNode && prevNode.type && prevNode.type === 'comment' && prevNode.text.toLowerCase() === ignoreComment;
+}
+
+function isAtRule(rule) {
+  return rule.parent && rule.parent.type === 'atrule';
+}
+
+function isInsideMediaQuery(rule) {
+  return !!(isAtRule(rule) && rule.parent.name === 'media');
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/SelectorWeightPlugin/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _selectorWeightPrefixAdder = require("./selectorWeightPrefixAdder");
+
+var _checkIsPatternsMatchFilename = require("../../loaderConfigs/checkIsPatternsMatchFilename");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class SelectorWeightPlugin {
+  constructor(options = {}) {
+    this.options = {
+      selectorWeightConfig: options.configFile,
+      defaultSelector: options.defaultSelector,
+      customFileDetails: options.customFileDetails,
+      excludeStrings: options.excludeStrings,
+      patterns: options.patterns
+    };
+  }
+
+  apply(compiler) {
+    const {
+      defaultSelector,
+      customFileDetails,
+      excludeStrings,
+      patterns
+    } = this.options;
+
+    const rawdata = _fs.default.readFileSync(customFileDetails);
+
+    const data = JSON.parse(rawdata);
+    compiler.hooks.compilation.tap('selector-weight-rewrite', compilation => {
+      compilation.hooks.optimizeModules.tap('selector-weight-rewrite', modules => {
+        const mods = Array.from(modules).filter(x => x.type.includes('css'));
+        mods.forEach(module => {
+          const filename = module.issuer.resource;
+
+          if (!(0, _checkIsPatternsMatchFilename.checkIsPatternsMatchFilename)(patterns, filename)) {
+            return;
+          }
+          /*
+           
+          filename : Deskapp.module.css ?
+            data : 
+          {
+              "DeskApp.module.css": {"defaultSelector" : ".desk_app_ui "}
+          }
+              selectorWeightConfig : 
+            defaultSelector : .zoho_desk_ui
+          
+          case filename = 'DeskApp.module.css' ? 
+          data[filename].defaultSelector = '.desk_app_ui' 
+            case filename is different ?
+          defaultSelector = '.zoho_desk_ui'
+            */
+
+
+          const rootOriginal = _postcss.default.parse(module.content); // eslint-disable-next-line no-param-reassign
+
+
+          module.content = (0, _selectorWeightPrefixAdder.selectorWeightPrefixAdder)(rootOriginal, data[filename] ? data[filename].defaultSelector : defaultSelector, excludeStrings).toString();
+        });
+      });
+    });
+  }
+
+}
+
+var _default = SelectorWeightPlugin;
+exports.default = _default;

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/SelectorWeightPlugin/selectorWeightPrefixAdder.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorWeightPrefixAdder = selectorWeightPrefixAdder;
+
+var _classHandling = require("./classHandling");
+
+function selectorWeightPrefixAdder(rootOriginal, selector, excludeStrings) {
+  rootOriginal.walkRules((rule, index) => {
+    const prevNode = rootOriginal.nodes[index - 1];
+
+    if ((0, _classHandling.hasPrevNodeIgnore)(index, prevNode, 'updateselector:ignore')) {
+      return;
+    } // TODO: need to verify  cases
+    // if (!isInsideMediaQuery(rule)) {
+    //   return;
+    // }
+
+
+    const selectorArr = rule.selector.split(',');
+    selectorArr.forEach((singleSelectorStr, index) => {
+      if (excludeStrings.includes(singleSelectorStr.trim())) {
+        return;
+      }
+
+      if (singleSelectorStr.includes(']')) {
+        if (singleSelectorStr.slice(singleSelectorStr.lastIndexOf(']') + 2).trim() === '') {
+          return;
+        }
+
+        selectorArr[index] = `${singleSelectorStr.slice(0, singleSelectorStr.lastIndexOf(']') + 1).trim()} ${selector}${singleSelectorStr.slice(singleSelectorStr.lastIndexOf(']') + 2).trim()}`;
+        return;
+      }
+
+      selectorArr[index] = `${selector}${singleSelectorStr}`;
+    }); // eslint-disable-next-line no-param-reassign
+
+    rule.selector = selectorArr.join(',\n');
+  });
+  return rootOriginal;
+} // function convertSelectorWithoutAttribute (selector, conjunction) {
+//   const front  = selector
+//   .slice(0, selector.lastIndexOf(']') + 1)
+//   .trim();
+//   const back = selector
+//   .slice(selector.lastIndexOf(']') + 2)
+//   .trim();
+// return `${front} ${conjunction}${back}`;
+// }

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/SelectorWeightPlugin/windowsModification.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.windowsModification = windowsModification;
+exports.windowsModificationFile = windowsModificationFile;
+const isWin = process.platform === 'win32';
+
+function windowsModification(array) {
+  return isWin ? array && Array.isArray(array) && array.map(r => r.replace(/\//g, '\\')) : array;
+}
+
+function windowsModificationFile(filename) {
+  return isWin ? filename.replace(/\//g, '\\') : filename;
+} // module.exports = { windowsModification, windowsModificationFile };

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/ServiceWorkerPlugin.js

@@ -5,28 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _fs = _interopRequireDefault(require("fs"));
+var _fs = require("fs");
 
-var _path = _interopRequireDefault(require("path"));
+var _LocaleChunkAssetsStore = require("./I18nSplitPlugin/LocaleChunkAssetsStore");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _emitAsset = require("./emitAsset");
+
+var _replaceCssDirTemplate = require("./RtlSplitPlugin/replaceCssDirTemplate");
+
+var _getInitialAssetsFuncTemplate = require("./getInitialAssetsFuncTemplate");
+
+const pluginName = 'ServiceWorkerPlugin';
 
-//import { getI18nFileUrlPathTemplate } from './I18nSplitPlugin/utils/getI18nFileUrlPathTemplate';
-//import { getOptions } from '../utils';
-//import I18nKeysIdentifer from './I18nSplitPlugin/I18nKeysIdentifer';
-//import { replaceCssDirTemplateMapper } from './RtlSplitPlugin/replaceCssDirTemplate';
-// const {
-//   css: { enableRTLSplit },
-//   i18n: { chunkSplitEnable }
-// } = getOptions();
 class ServiceWorkerPlugin {
   constructor(options) {
+    this.templateFilePath = options.templateFilePath;
+    this.outputFilePath = options.outputFilePath;
+    this.publicPath = options.publicPath;
     this.i18nFileNameTemplate = options.i18nFileNameTemplate;
-    this.fileName = options.fileName;
-    this.serviceWorkerPath = options.filePath;
-    this.writePath = options.exitPath;
+    this.chunkSplitEnable = options.chunkSplitEnable;
+    this.enableRTLSplit = options.enableRTLSplit;
+    this.entryPointName = options.entryPointName;
     this.replaceText = options.replaceText; // this.publicPaths = options.publicPaths;
-  }
+  } // eslint-disable-next-line class-methods-use-this
+
 
   isInitialChunk(chunk) {
     if ('canBeInitial' in chunk) {
@@ -37,119 +39,72 @@ class ServiceWorkerPlugin {
   }
 
   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.isChunkHasI18n(chunk))
-          //     .map(chunk =>
-          //       getI18nFileUrlPathTemplate(
-          //         compilation,
-          //         chunk,
-          //         this.i18nFileNameTemplate,
-          //         '@locale@'
-          //       )
-          //     )
-          //   : [];
-
-          let initalI18nAssets = []; //chunkSplitEnable &&
-
-          compilation.chunks.filter(c => !this.isInitialChunk(c)) //.filter(chunk => I18nKeysIdentifer.isChunkHasI18n(chunk))
-          .forEach(chunk => {
-            // let isInitial = this.isInitialChunk(chunk);
-            allChunkUrls = allChunkUrls.concat(chunk.files); // allI18nAssets.push(
-            //   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 = replaceCssDirTemplateMapper(
-          //     initialChunkUrls,
-          //     cssDirTemplate
-          //   );
-          //   allChunkUrls = 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);
-        }
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      // Get store for cache
+      this.store = (0, _LocaleChunkAssetsStore.getLocaleChunkAssetsStore)(compilation);
+    });
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      compilation.hooks.processAssets.tap({
+        name: pluginName,
+        stage: compilation.PROCESS_ASSETS_STAGE_DERIVED
+      }, () => {
+        this.createServiceWorkerFile(compilation, compiler);
       });
     });
   }
 
-} // compiler.hooks.thisCompilation.tap('AddAssetPlugin', compilation => {
-//   compilation.hooks.processAssets.tapPromise(tapOptions, async () => {
-//     let source;
-//     if (typeof this.source === 'string') {
-//       if (compilation.getAsset(this.filePath)) {
-//         // Skip emitting the asset again because it's immutable
-//         return;
-//       }
-//       source = this.source;
-//     } else {
-//       source = await this.source(compilation);
-//     }
-//     compilation.emitAsset(this.filePath, new RawSource(source));
-//   });
-// });
-//  getContentHash(compiler, compilation, source) {
-//   const { outputOptions } = compilation;
-//   const { hashDigest, hashDigestLength, hashFunction, hashSalt } =
-//     outputOptions;
-//   const hash = compiler.webpack.util.createHash(
-//     /** @type {string} */ (hashFunction)
-//   );
-//   if (hashSalt) {
-//     hash.update(hashSalt);
-//   }
-//   hash.update(source);
-//   const fullContentHash = hash.digest(hashDigest);
-//   return fullContentHash.toString().slice(0, hashDigestLength);
-// }
-// const contentHash = CopyPlugin.getContentHash(
-//   compiler,
-//   compilation,
-//   source.buffer()
-// );
-//hash same as index.html file ??
+  createServiceWorkerFile(compilation) {
+    const {
+      templateFilePath,
+      entryPointName,
+      outputFilePath,
+      chunkSplitEnable,
+      enableRTLSplit
+    } = this;
+    const templateContent = (0, _fs.readFileSync)(templateFilePath, 'utf-8');
+    let allChunkUrls = [];
+    const allI18nAssets = [];
+    const entryPoint = compilation.entrypoints.get(entryPointName);
+    const initialAssetsFuncTemplate = (0, _getInitialAssetsFuncTemplate.getInitialAssetsFuncTemplate)({
+      entryPoint,
+      compilation,
+      enableRTLSplit,
+      i18nStore: this.store,
+      chunkSplitEnable,
+      i18nFileNameTemplate: this.i18nFileNameTemplate,
+      functionName: 'getInitialAssets'
+    });
+    /**
+     * NOTE:
+     *  if chunkSplitEnable is false means,
+     *    serviceWorker will get i18n files path for html
+     */
+    // chunkSplitEnable &&
+
+    [...compilation.chunks].filter(c => !this.isInitialChunk(c)).forEach(chunk => {
+      allChunkUrls = [...allChunkUrls, ...chunk.files];
+    });
+    allChunkUrls = allChunkUrls.filter(fileName => !fileName.endsWith('.map'));
+
+    if (enableRTLSplit) {
+      allChunkUrls = (0, _replaceCssDirTemplate.replaceCssDirTemplateMapper)(allChunkUrls, _getInitialAssetsFuncTemplate.cssDirTemplate);
+    }
+
+    const mod = templateContent.replace(this.replaceText, `
+      ${initialAssetsFuncTemplate}
+
+      let initialAssetsObj = getInitialAssets({ lang: langLocale, dir: cssDir });
+
+      let initialAssets = initialAssetsObj.i18n.concat(
+        initialAssetsObj.css,
+        initialAssetsObj.js
+      );
+      self.assets = initialAssets;
+      
+      self.allChunks = ${JSON.stringify(allChunkUrls.concat(allI18nAssets))};`);
+    (0, _emitAsset.emitAsset)(compilation, outputFilePath, mod);
+  }
 
+}
 
 exports.default = ServiceWorkerPlugin;

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/SourceMapPlugin/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SourceMapPlugin = void 0;
+
+var _webpack = require("webpack");
+
+/* eslint-disable class-methods-use-this */
+class SourceMapPlugin {
+  apply(compiler) {
+    const {
+      RawSource
+    } = compiler.webpack.sources;
+    compiler.hooks.thisCompilation.tap('splitSourceMap', compilation => {
+      compilation.hooks.processAssets.tap({
+        name: 'splitSourceMap',
+        stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
+      }, assets => {
+        Object.keys(assets).forEach(assetName => {
+          const assetCode = assets[assetName].source();
+
+          if (/\.js$/.test(assetName) && !/\.i18n\.js$/.test(assetName) || /\.js\.map$/.test(assetName) && !/\.i18n\.js\.map$/.test(assetName)) {
+            compilation.renameAsset(assetName, `smap/${assetName}`);
+
+            if (!/\.map$/.test(assetName)) {
+              compilation.emitAsset(assetName, new RawSource(assetCode));
+            }
+          }
+        });
+      });
+    });
+  }
+
+}
+
+exports.SourceMapPlugin = SourceMapPlugin;