@zohodesk/client_build_tool 0.0.22-exp.5 → 0.0.23

package/es/shared/bundler/webpack/custom_plugins/ResourceHintsPlugin.js

@@ -0,0 +1,185 @@
+import { Template, RuntimeGlobals, RuntimeModule } from 'webpack';
+const pluginName = 'prefetch-preload-chunk-plugin';
+/**
+ * NOTE: below functions are useable in webpack 5.79.0 as per day 28 Apr 2023
+ * Please checkout for future changes
+ * Here List of functions that take chunkId as Argument and return url without publicPath
+ * `__webpack_require__.u(chunkId)`          -  return's JS script urlPath
+ * `__webpack_require__.miniCssF(chunkId)`   -  return's CSS script urlPath
+ * `__webpack_require__.miniI18nF(chunkId)`  -  return's I18N script urlPath
+ *
+ *
+ * if url  has .undefined. then chunk or url not valid or that file nt available
+ */
+
+export default class ResourceHintsPlugin {
+  constructor(_ref) {
+    let {
+      publicPath,
+      resourceHints
+    } = _ref;
+    this.resourceHints = resourceHints;
+    this.allowPrefetchingMultipleChunks = resourceHints.allowPrefetchingMultipleChunks;
+    this.publicPathsTemplateObj = {
+      js: publicPath,
+      css: publicPath,
+      i18n: publicPath
+    };
+  } // eslint-disable-next-line class-methods-use-this
+
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      const enabledChunks = new WeakSet();
+
+      const handler = (entryRuntimeChunk, set) => {
+        if (enabledChunks.has(entryRuntimeChunk)) {
+          return;
+        }
+
+        enabledChunks.add(entryRuntimeChunk);
+        set.add(RuntimeGlobals.getFullHash); // set.add(RuntimeGlobals.getChunkCssFilename);
+
+        const {
+          publicPathsTemplateObj
+        } = this;
+        compilation.addRuntimeModule(entryRuntimeChunk, // eslint-disable-next-line no-use-before-define
+        new ResourceHintsRuntimePlugin(compiler, {
+          chunk: entryRuntimeChunk,
+          allowPrefetchingMultipleChunks: this.allowPrefetchingMultipleChunks,
+          publicPathsTemplateObj
+        }));
+      };
+
+      compilation.hooks.runtimeRequirementInTree.for(RuntimeGlobals.ensureChunkHandlers).tap(pluginName, handler);
+    });
+  }
+
+}
+
+class ResourceHintsRuntimePlugin extends RuntimeModule {
+  constructor(compiler, _ref2) {
+    let {
+      chunk,
+      publicPathsTemplateObj,
+      allowPrefetchingMultipleChunks
+    } = _ref2;
+    super('ResourceHintsRuntimePlugin loading', 10);
+    this.compiler = compiler;
+    this.publicPathsTemplateObj = publicPathsTemplateObj;
+    this.allowPrefetchingMultipleChunks = allowPrefetchingMultipleChunks;
+    this.chunk = chunk;
+  }
+
+  generate() {
+    const {
+      chunk
+    } = this;
+    const idNameMap = chunk.getChunkMaps().name;
+    const nameIdMap = {};
+    let needsMap = this.allowPrefetchingMultipleChunks;
+    Object.keys(idNameMap).forEach(key => {
+      const value = idNameMap[key];
+      nameIdMap[value] = key;
+
+      if (key !== value) {
+        needsMap = true;
+      }
+    });
+    let {
+      js: jsPP,
+      css: cssPP,
+      i18n: i18nPP
+    } = this.publicPathsTemplateObj;
+    jsPP = jsPP || RuntimeGlobals.publicPath;
+    cssPP = cssPP || RuntimeGlobals.publicPath;
+    i18nPP = i18nPP || RuntimeGlobals.publicPath;
+    /**
+     * naming abbr
+     * ntc -> nameToChunkIdMap
+     * cns -> chunkNames
+     * clt -> createLinkTag
+     * lpp -> loadAsPreloadOrPrefetch
+     */
+
+    return Template.asString([`const ntc = ${JSON.stringify(needsMap ? nameIdMap : {})};
+       const cns = Object.keys(ntc);
+
+      function clt(href, rel) {
+        let link = document.createElement("link");
+        link.href = href;
+        link.rel = rel;
+        __webpack_require__.nc && link.setAttribute("nonce", __webpack_require__.nc)
+        if(href.endsWith(".css")) {
+          link.as="style";
+        } else if (href.endsWith(".js")) {
+          link.as="script";
+        }
+        document.head.appendChild(link);
+      }
+      function isValidUrl(url) {
+        //return !url.includes(".undefined.");
+        return url.indexOf(".undefined") === -1;
+      }
+      function lpp(_chunkId, rel) {
+        let chunkId = ${RuntimeGlobals.require}.getChunkId(_chunkId);
+        // ${RuntimeGlobals.require}.e(chunkId);
+        if(__webpack_require__.O.j(chunkId)) {
+          return;
+        }
+        const jsUrl = ${jsPP} + __webpack_require__.u(chunkId);
+        const cssUrl = ${cssPP} + __webpack_require__.miniCssF(chunkId);
+        isValidUrl(jsUrl) && clt(jsUrl, rel);
+        isValidUrl(cssUrl) && clt(cssUrl, rel);
+        if(__webpack_require__.miniI18nF) {
+          const i18nUrl = ${i18nPP} + __webpack_require__.miniI18nF(chunkId);
+          isValidUrl(i18nUrl) && clt(i18nUrl, rel);
+        }
+      }
+
+      ${RuntimeGlobals.require}.getChunkId = function getChunkId(chunkId) {
+        ${needsMap ? 'chunkId = ntc[chunkId]||chunkId;' : ''}
+        return chunkId;
+      }
+      ${RuntimeGlobals.require}.getChunkIds = function getChunkIds(chunkId) {
+        ${// eslint-disable-next-line no-nested-ternary
+    this.allowPrefetchingMultipleChunks ? `
+            const isRegExAsChunkId = chunkId instanceof RegExp;
+            if(isRegExAsChunkId) {
+              return cns.filter(chunkName => chunkId.test(chunkName)).map(chunkName => ntc[chunkName]);
+            }
+            return [${RuntimeGlobals.require}.getChunkId(chunkId)];
+            ` : `return [${RuntimeGlobals.require}.getChunkId(chunkId)];`}
+      }
+      // Prefetch a chunk (${pluginName})
+      ${RuntimeGlobals.require}.pfc = function prefetchChunk(chunkId) {
+        ${`
+            let chunkIds = ${RuntimeGlobals.require}.getChunkIds(chunkId);
+            chunkIds.forEach(idOfAChunk => {
+              ${RuntimeGlobals.require}.e(idOfAChunk);
+            })`}
+      };
+
+      // Preload a chunk (${pluginName})
+      ${RuntimeGlobals.require}.plc = function preloadChunk(chunkId) {
+            let idOfAChunk = ${RuntimeGlobals.require}.getChunkIds(chunkId)[0];
+            lpp(idOfAChunk, "preload");
+        }
+        ` // `// Prefetch a chunk (${pluginName})`,
+    // `${RuntimeGlobals.require}.pfc = function prefetchChunk(chunkId) {`,
+    // Template.indent([
+    //   `chunkId = ${RuntimeGlobals.require}.getChunkId(chunkId)`,
+    //   `${RuntimeGlobals.require}.e(chunkId);`
+    // ]),
+    // '};',
+    // `// Preload a chunk (${pluginName})`,
+    // `${RuntimeGlobals.require}.pfc = function prefetchChunk(chunkId) {`,
+    // Template.indent([
+    //   `chunkId = ${RuntimeGlobals.require}.getChunkId(chunkId)`,
+    //   `${RuntimeGlobals.require}.e(chunkId);`
+    // ]),
+    // '};'
+    ]);
+  }
+
+}

package/es/shared/bundler/webpack/custom_plugins/RtlSplitPlugin/OverwriteCssPathForRTL.js

@@ -0,0 +1,47 @@
+import HtmlWebpackPlugin from 'html-webpack-plugin'; // import { JavascriptModulesPlugin } from 'webpack';
+
+import JavascriptModulesPlugin from 'webpack/lib/javascript/JavascriptModulesPlugin';
+import { replaceCssDirTemplateMapper } from "./replaceCssDirTemplate";
+const pluginName = 'OverwriteCssPathForRTL';
+export default class OverwriteCssPathForRTL {
+  constructor() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      dirVarName: 'document.dir'
+    };
+    this.dirVarName = options.dirVarName || 'document.dir';
+    this.templateLabel = options.templateLabel || '{{--dir}}';
+  }
+
+  overwriteCssPathinHTML(compilation) {
+    // NOTE: need to reconsider It is not working as expected
+    HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tap(pluginName, data => {
+      const {
+        assets
+      } = data;
+      return { ...data,
+        assets: { ...assets,
+          css: assets.css && replaceCssDirTemplateMapper(assets.css, this.templateLabel)
+        }
+      };
+    });
+  }
+
+  overwriteCssPathinRequireEnsure(compilation, compiler) {
+    const {
+      RawSource
+    } = compiler.webpack.sources;
+    JavascriptModulesPlugin.getCompilationHooks(compilation).renderMain.tap(pluginName, source => {
+      const templateText = `"+(${this.dirVarName} === "rtl" ? "rtl": "ltr")+"`;
+      const replacedStr = source.source().replace(/\[dir\]/g, templateText);
+      return new RawSource(replacedStr);
+    });
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      this.overwriteCssPathinHTML(compilation);
+      this.overwriteCssPathinRequireEnsure(compilation, compiler);
+    });
+  }
+
+}

package/es/shared/bundler/webpack/custom_plugins/RtlSplitPlugin/RtlCssPlugin.js

@@ -0,0 +1,70 @@
+// import HtmlWebpackPlugin from 'html-webpack-plugin';
+// import rtlcss from 'rtlcss';
+import { Compilation } from 'webpack';
+import OverwriteCssPathForRTL from "./OverwriteCssPathForRTL";
+import { separateRtlAndLtr } from "../../../../postcss/custom_postcss_plugins/RTLSplitPlugin";
+import { isCss, isDirRelatedCss } from "../../utils";
+const pluginName = 'RtlCssPlugin';
+export class RtlCssPlugin {
+  constructor() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    /**
+     * @typedef {Object} Options
+     * @property  {String} dirVarName
+     * @property  {Boolean} sourcemap
+     * @property  {Object} config
+     */
+    this.options = {
+      // dirVarName: options.dirVarName || 'document.dir',
+      sourcemap: options.sourcemap,
+      config: options.config
+    };
+    this.templateLabel = options.templateLabel || '{{--dir}}';
+    this.dirVarName = options.dirVarName || 'document.dir';
+    this.rtlSplitOptions = {
+      disableMinifySelector: options.disableMinifySelector
+    };
+  }
+
+  apply(compiler) {
+    const {
+      RawSource
+    } = compiler.webpack.sources;
+    new OverwriteCssPathForRTL({
+      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.shouldGenerateChunkAssets.tap(pluginName, (...args) => {
+      //   console.log('shouldGenerateChunkAssets', args);
+      // });
+      compilation.hooks.processAssets.tap({
+        name: pluginName,
+        stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_COMPATIBILITY
+      }, assets => {
+        Object.keys(assets).filter(isCss).filter(isDirRelatedCss).forEach(chunkFilename => {
+          const {
+            source: asset
+          } = compilation.getAsset(chunkFilename);
+          const sourceStr = asset.source();
+          const {
+            ltr,
+            rtl
+          } = separateRtlAndLtr(sourceStr, this.rtlSplitOptions);
+          const ltrFilename = chunkFilename.replace('[dir]', 'ltr');
+          const rtlFilename = chunkFilename.replace('[dir]', 'rtl');
+          compilation.renameAsset(chunkFilename, ltrFilename);
+          compilation.updateAsset(ltrFilename, new RawSource(ltr));
+          compilation.emitAsset(rtlFilename, new RawSource(rtl));
+        });
+      });
+    });
+  }
+
+}

package/es/shared/bundler/webpack/custom_plugins/RtlSplitPlugin/RtrSplit.md

@@ -0,0 +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
+  }
+}
+```

package/es/shared/bundler/webpack/custom_plugins/RtlSplitPlugin/replaceCssDirTemplate.js

@@ -0,0 +1,14 @@
+export function replaceCssDirTemplate(filePath, cssDirTemplate) {
+  return filePath // added for efc and service worker handling
+  .replaceAll('[dir]', cssDirTemplate).replace('.ltr.css', `.${cssDirTemplate}.css`);
+}
+export function replaceCssDirTemplateMapper(assets, cssDirTemplate) {
+  return assets.map(filePath => replaceCssDirTemplate(filePath, cssDirTemplate));
+}
+export function replaceI18nLocalTemplate(filePath, localeTemplate) {
+  return filePath // added for efc and service worker handling
+  .replaceAll('[locale]', localeTemplate);
+}
+export function replaceI18nLocaleTemplateMapper(assets, localeTemplate) {
+  return assets.map(filePath => replaceI18nLocalTemplate(filePath, localeTemplate));
+}

package/es/shared/bundler/webpack/custom_plugins/RuntimeResourceCleanup/index.js

@@ -0,0 +1,63 @@
+import { Compilation } from 'webpack';
+const pluginName = 'RuntimeResourceCleanupPlugin';
+export default class RuntimeResourceCleanup {
+  constructor(_ref) {
+    let {
+      enable: scriptCleanUpEnabled,
+      chunkLoadingGlobal,
+      ...options
+    } = _ref;
+    this.options = options;
+    this.scriptCleanUpEnabled = scriptCleanUpEnabled;
+    this.chunkLoadingGlobal = chunkLoadingGlobal;
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap(pluginName, compilation => {
+      compilation.hooks.processAssets.tap({
+        name: pluginName,
+        stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+      }, assets => {
+        const runtimeFiles = Object.keys(assets).filter(assetName => /.+?runtime.*\.js$/.test(assetName));
+        const searchString = 'chunkLoadingGlobal.forEach';
+
+        function generateScriptCleanUpCode(attributes) {
+          const [[attributeKey, attributeValue]] = Object.entries(attributes);
+          const selectorForGettingResources = `[${attributeKey}="${attributeValue}"]`;
+          return `
+            document.querySelectorAll('${selectorForGettingResources}').forEach(resource => resource.remove());
+            `;
+        }
+
+        function generateRunTimeObjectCleanupCode() {
+          return `
+                    Object.keys(__webpack_modules__).forEach(moduleKey => __webpack_modules__[moduleKey] = null);
+                    Object.keys(__webpack_module_cache__).forEach(moduleCacheKey => __webpack_module_cache__[moduleCacheKey] = null);
+                    __webpack_modules__ = null; 
+                    __webpack_module_cache__ = null;
+                    Object.keys(__webpack_require__).forEach(staticMethodsKey => __webpack_require__[staticMethodsKey] = null);
+                    __webpack_require__ = null;
+                    `;
+        }
+
+        function attachUninstallMethodToChunkGlobal() {
+          const {
+            chunkLoadingGlobal
+          } = this;
+          return `self['${chunkLoadingGlobal}'].unInstall = function() {
+              ${generateRunTimeObjectCleanupCode()};
+              ${this.scriptCleanUpEnabled ? generateScriptCleanUpCode(this.options.attributes) : ''}
+            }`;
+        }
+
+        runtimeFiles.forEach(runtTimeFile => {
+          const runTimeSource = assets[runtTimeFile].source();
+          const newRunTimeCode = runTimeSource.replace(searchString, `${attachUninstallMethodToChunkGlobal.call(this)};${searchString}`);
+          const newRunTimeResource = new compiler.webpack.sources.RawSource(newRunTimeCode);
+          compilation.updateAsset(runtTimeFile, newRunTimeResource);
+        });
+      });
+    });
+  }
+
+}

package/es/shared/bundler/webpack/custom_plugins/SelectorWeightPlugin/classHandling.js

@@ -0,0 +1,9 @@
+export function hasPrevNodeIgnore(index, prevNode, ignoreComment) {
+  return index !== 0 && prevNode && prevNode.type && prevNode.type === 'comment' && prevNode.text.toLowerCase() === ignoreComment;
+}
+export function isAtRule(rule) {
+  return rule.parent && rule.parent.type === 'atrule';
+}
+export function isInsideMediaQuery(rule) {
+  return !!(isAtRule(rule) && rule.parent.name === 'media');
+}

package/es/shared/bundler/webpack/custom_plugins/SelectorWeightPlugin/index.js

@@ -0,0 +1,63 @@
+import postcss from 'postcss';
+import fs from 'fs';
+import { selectorWeightPrefixAdder } from "./selectorWeightPrefixAdder";
+import { checkIsPatternsMatchFilename } from "../../loaderConfigs/checkIsPatternsMatchFilename";
+
+class SelectorWeightPlugin {
+  constructor() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    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.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 (!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.parse(module.content); // eslint-disable-next-line no-param-reassign
+
+          module.content = selectorWeightPrefixAdder(rootOriginal, data[filename] ? data[filename].defaultSelector : defaultSelector, excludeStrings).toString();
+        });
+      });
+    });
+  }
+
+}
+
+export default SelectorWeightPlugin;

package/es/shared/bundler/webpack/custom_plugins/SelectorWeightPlugin/selectorWeightPrefixAdder.js

@@ -0,0 +1,43 @@
+import { hasPrevNodeIgnore, isInsideMediaQuery } from "./classHandling";
+export function selectorWeightPrefixAdder(rootOriginal, selector, excludeStrings) {
+  rootOriginal.walkRules((rule, index) => {
+    const prevNode = rootOriginal.nodes[index - 1];
+
+    if (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/es/shared/bundler/webpack/custom_plugins/SelectorWeightPlugin/windowsModification.js

@@ -0,0 +1,7 @@
+const isWin = process.platform === 'win32';
+export function windowsModification(array) {
+  return isWin ? array && Array.isArray(array) && array.map(r => r.replace(/\//g, '\\')) : array;
+}
+export function windowsModificationFile(filename) {
+  return isWin ? filename.replace(/\//g, '\\') : filename;
+} // module.exports = { windowsModification, windowsModificationFile };

package/es/shared/bundler/webpack/custom_plugins/ServiceWorkerPlugin.js

@@ -0,0 +1,104 @@
+import { readFileSync } from 'fs';
+import { getLocaleChunkAssetsStore } from "./I18nSplitPlugin/LocaleChunkAssetsStore";
+import { emitAsset } from "./emitAsset";
+import { replaceCssDirTemplateMapper } from "./RtlSplitPlugin/replaceCssDirTemplate";
+import { cssDirTemplate, getInitialAssetsFuncTemplate } from "./getInitialAssetsFuncTemplate";
+import { getI18nFileUrlPathTemplate } from "./ServiceWorkerPluginUtils";
+const pluginName = 'ServiceWorkerPlugin';
+export default class ServiceWorkerPlugin {
+  constructor(options) {
+    this.templateFilePath = options.templateFilePath;
+    this.outputFilePath = options.outputFilePath;
+    this.publicPath = options.publicPath;
+    this.i18nFileNameTemplate = options.i18nFileNameTemplate;
+    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) {
+      return chunk.canBeInitial();
+    }
+
+    return chunk.isInitial();
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      // Get store for cache
+      this.store = getLocaleChunkAssetsStore(compilation);
+    });
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      compilation.hooks.processAssets.tap({
+        name: pluginName,
+        stage: compilation.PROCESS_ASSETS_STAGE_DERIVED
+      }, () => {
+        this.createServiceWorkerFile(compilation, compiler);
+      });
+    });
+  }
+
+  createServiceWorkerFile(compilation) {
+    const {
+      templateFilePath,
+      entryPointName,
+      outputFilePath,
+      chunkSplitEnable,
+      enableRTLSplit
+    } = this;
+    const templateContent = readFileSync(templateFilePath, 'utf-8');
+    let allChunkUrls = [];
+    const allI18nAssets = [];
+    const entryPoint = compilation.entrypoints.get(entryPointName);
+    const initialAssetsFuncTemplate = 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]; // allI18nAssets.push(
+      //     getI18nFileUrlPathTemplate(
+      //       compilation,
+      //       chunk,
+      //       this.i18nFileNameTemplate,
+      //       '@locale@'
+      //     )
+      //   );
+    });
+    allChunkUrls = allChunkUrls.filter(fileName => !fileName.endsWith('.map'));
+    allChunkUrls = allChunkUrls.map(fileName => fileName.replace('smap/', ''));
+
+    if (enableRTLSplit) {
+      allChunkUrls = replaceCssDirTemplateMapper(allChunkUrls, cssDirTemplate);
+    }
+
+    const mod = templateContent.replace(this.replaceText, `
+      ${initialAssetsFuncTemplate}
+
+      let initialAssetsObj = getInitialAssets();
+
+      let initialAssets = initialAssetsObj.i18n.concat(
+        initialAssetsObj.css,
+        initialAssetsObj.js
+      );
+      self.assets = initialAssets;
+      
+      self.allChunks = ${JSON.stringify(allChunkUrls.concat(allI18nAssets))};`);
+    emitAsset(compilation, outputFilePath, mod);
+  }
+
+}

package/es/shared/bundler/webpack/custom_plugins/ServiceWorkerPluginUtils.js

@@ -0,0 +1,6 @@
+export function getI18nFileUrlPathTemplate(compilation, chunk, filenameTemplate, localeTemplate) {
+  const urlpath = compilation.getPath(filenameTemplate, {
+    chunk
+  });
+  return urlpath.replace('[locale]', localeTemplate);
+}