@zohodesk/client_build_tool 0.0.6 → 0.0.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog and Release Notes
 
+
+
+**Feature:-**
+- externals was added to  Prevent bundling of certain imported packages and retrieve these external dependencies at runtime.
+- to use externals, we use the following pattern in `app > externals` :
+
+For example
+```
+   externals: {
+    <key> : <value>
+   }
+```
+
 ## v0.0.6 (4-09-2023)
 
 **Feature:-**

package/README.md

@@ -84,6 +84,19 @@ These commands provide flexibility and control over your client-side build proce
 For more [Details](ConfigurationDocumentation.md)
 # Changelog and Release Notes
 
+
+
+**Feature:-**
+- externals was added to  Prevent bundling of certain imported packages and retrieve these external dependencies at runtime.
+- to use externals, we use the following pattern in `app > externals` :
+
+For example
+```
+   externals: {
+    <key> : <value>
+   }
+```
+
 ## v0.0.6 (4-09-2023)
 
 **Feature:-**

package/lib/schemas/defaultConfigValues.js

@@ -54,6 +54,10 @@ var _default = {
     cli: 'print_progress'
   },
   server: {
+    k8s: {
+      value: false,
+      cli: 'k8s'
+    },
     httpsCerts: {
       value: '',
       cli: 'https_certs'
@@ -277,7 +281,9 @@ var _default = {
     i18nTemplate: ''
   },
   manifestJson: {
-    enable: false
+    enable: false,
+    i18nManifestJson: false,
+    licenseManifest: false
   },
   changeRuntimeChunkChar: '~',
   serviceWorker: {
@@ -291,6 +297,7 @@ var _default = {
     allowPrefetchingMultipleChunks: false
   },
   devModeContentHashAllowedTypes: null,
+  nameTemplateCustomization: null,
   devLikeHash: {
     value: false,
     cli: 'dev_like_hash'
@@ -322,6 +329,21 @@ var _default = {
     jsAttributes: null,
     cssAttributes: null,
     i18nAttributes: null
+  },
+  externals: null,
+  typeScript: {
+    enable: {
+      value: false,
+      cli: 'type_script_enable'
+    }
+  },
+  optimization: {
+    jsExcludePath: '',
+    cssExcludePath: ''
+  },
+  customScriptLoadingStrategey: {
+    enable: false,
+    options: null
   }
 };
 exports.default = _default;

package/lib/schemas/readOptions.js

@@ -25,6 +25,39 @@ const args = process.argv.slice(2);
 exports.args = args;
 const processEnv = (0, _npmConfigToObject.npmConfigToObject)();
 const cliArgsObject = (0, _cliArgsToObject.cliArgsToObject)(args);
+
+if (cliArgsObject.app_domain && cliArgsObject.app_domain == 'kubernetes') {
+  cliArgsObject.k8s = true;
+}
+
+if (cliArgsObject.app_domain) {
+  cliArgsObject.domain = cliArgsObject.app_domain;
+}
+
+if (cliArgsObject.app_port) {
+  cliArgsObject.port = cliArgsObject.app_port;
+}
+
+if (cliArgsObject.app_host) {
+  cliArgsObject.host = cliArgsObject.app_host;
+}
+
+if (processEnv.app_domain && processEnv.app_domain == 'kubernetes') {
+  cliArgsObject.k8s = true;
+}
+
+if (processEnv.app_domain) {
+  cliArgsObject.domain = processEnv.app_domain;
+}
+
+if (processEnv.app_port) {
+  cliArgsObject.port = processEnv.app_port;
+}
+
+if (processEnv.app_host) {
+  cliArgsObject.host = processEnv.app_host;
+}
+
 Object.assign(processEnv, cliArgsObject);
 let reactCLIOptions = null;
 

package/lib/shared/babel/babelWebConfig.js

@@ -25,8 +25,11 @@ function babelWebConfig(options, mode) {
     plugins: babelPlugins,
     browserList
   } = options.babelCustomizations;
+  const {
+    enable: typeScriptEnable
+  } = options.typeScript;
   return {
-    presets: [getBabelPresetEnvConfig(browserList, mode), require.resolve('@babel/preset-react')],
+    presets: typeScriptEnable ? [getBabelPresetEnvConfig(browserList, mode), require.resolve('@babel/preset-react'), require.resolve('@babel/preset-typescript')] : [getBabelPresetEnvConfig(browserList, mode), require.resolve('@babel/preset-react')],
     plugins: customBabelPlugins(babelPlugins).concat((0, _getBabelPlugin.getBabelPlugin)(options)).filter(Boolean)
   };
 }

package/lib/shared/babel/runBabelForTsFile.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.runBabelForTSFile = runBabelForTSFile;
+
+var _core = require("@babel/core");
+
+var _babelWebConfig = require("./babelWebConfig");
+
+var _copyFile = require("../fileUtils/copyFile");
+
+function runBabelForTSFile({
+  filename,
+  outputFile,
+  options,
+  mode = 'es'
+}) {
+  const {
+    enable
+  } = options.typeScript;
+
+  if (enable) {
+    // const jsSourceCode = readFileSync(filename).toString();
+    const babelConfig = (0, _babelWebConfig.babelWebConfig)(options, mode);
+    const result = (0, _core.transformFileSync)(filename, babelConfig);
+    (0, _copyFile.writeFile)(outputFile.replace('.tsx', '.js'), result.code);
+  }
+}

package/lib/shared/bundler/webpack/common/decidePublicPath.js

@@ -24,17 +24,22 @@ function modifiedServerOptions(options) {
   const {
     disableContextURL
   } = server;
+  const {
+    k8s
+  } = server;
   const port = Number(server.port);
   const httpsOptions = (0, _httpsOptions.httpsOptionsWithUserFriendlyError)(options);
   const machineDomain = (0, _getServerURL.getServerDomain)(server);
   const httpPort = port + 1;
   const httpsUrl = (0, _getServerURL.getServerUrl)({
     domain: machineDomain,
+    k8s,
     port,
     protocol: 'https'
   });
   const httpUrl = (0, _getServerURL.getServerUrl)({
     domain: machineDomain,
+    k8s,
     port: httpPort,
     protocol: 'http'
   });

package/lib/shared/bundler/webpack/common/nameTemplates.js

@@ -12,16 +12,16 @@ var _modeUtils = require("./modeUtils");
 // NOTE: these below code can be done in js,
 //   we did copy paste in order to avoid unnecessary confusion
 // NOTE: array[0] is dev mode file templates and array[1] is prod mode file templates
-const templates = {
+const defaultTemplates = {
   html: ['index.html', 'index.[contenthash].html'],
-  js: ['js/[name].js', 'js/[name].[contenthash].js'],
-  chunkjs: ['js-chunks/[name].js', 'js-chunks/[name].[contenthash].js'],
-  i18njs: ['i18n-chunks/[locale]/[name].i18n.js', 'i18n-chunks/[locale]/[name].[chunkhash].i18n.js'],
-  i18nchunkjs: ['i18n-chunks/[locale]/[name].i18n.js', // 'i18n-chunks/[locale]/[name].[chunkhash].i18n.js'
-  'i18n-chunks/[locale]/[name].[contenthash].i18n.js'],
+  js: ['js/[name].js', 'js/[name].[contenthash]_.js'],
+  chunkjs: ['js-chunk/[name].js', 'js-chunks/[name].[contenthash]_.js'],
+  i18njs: ['i18n-chunk/[locale]/[name].i18n.js', 'i18n-chunk/[locale]/[name].[chunkhash:20]_.i18n.js'],
+  i18nchunkjs: ['i18n-chunk/[locale]/[name].i18n.js', // 'i18n-chunk/[locale]/[name].[chunkhash].i18n.js'
+  'i18n-chunk/[locale]/[name].[contenthash]_.i18n.js'],
   i18nmanifest: ['i18n-manifest.json', 'i18n-manifest.json'],
   workerjs: ['js/[name].js', 'js/[name].[contenthash].js'],
-  css: ['css/[name].css', 'css/[name].[contenthash].css'],
+  css: ['css/[name].css', 'css/[name].[contenthash]_.css'],
 
   /**
    * NOTE: when you change (cssdir) this line it  will have affect on Below files will be affected
@@ -29,7 +29,7 @@ const templates = {
    *   pluginConfigs/configMiniCSSExtractPlugin.js
    *   pluginConfigs/configRtlCssPlugin.js
    *  */
-  cssdir: ['css/[name].[dir].css', 'css/[name].[contenthash].[dir].css'],
+  cssdir: ['css/[name].[dir].css', 'css/[name].[contenthash]_.[dir].css'],
   image: ['images/[name][ext]', 'images/[name].[contenthash][ext]'],
   font: ['fonts/[name][ext]', 'fonts/[name].[contenthash][ext]'],
   svg: ['fonts/[name][ext]', 'fonts/[name].[contenthash][ext]'],
@@ -54,12 +54,16 @@ function nameTemplates(type, options) {
   const {
     enableFileNameHashing,
     mode,
-    devLikeHash
+    devLikeHash,
+    nameTemplateCustomization
   } = options;
   let {
     devModeContentHashAllowedTypes
   } = options;
   devModeContentHashAllowedTypes = devModeContentHashAllowedTypes || defaultDevModeContentHashAllowedTypes;
+  const templates = { ...defaultTemplates,
+    ...nameTemplateCustomization
+  };
   const templateName = templates[type];
 
   if (!templateName) {

package/lib/shared/bundler/webpack/custom_plugins/{CdnChangePlugin.js → CdnChangePlugin/index.js}

@@ -7,12 +7,20 @@ exports.default = void 0;
 
 var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
 
-var _nameTemplates = require("../common/nameTemplates");
+var _webpack = require("webpack");
+
+var _nameTemplates = require("../../common/nameTemplates");
+
+var _modeUtils = require("../../common/modeUtils");
+
+var _webpackCustomJsUrlLoader = _interopRequireDefault(require("./webpackCustomJsUrlLoader"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { RuntimeGlobals, RuntimeModule } from 'webpack';
+// eslint-disable-next-line import/extensions
 // import { Template } from 'webpack';
+// eslint-disable-next-line import/extensions
 const pluginName = 'CdnChangePlugin'; // const MODULE_TYPE = 'css/mini-extract';
 // class CdnChangeRuntimePlugin extends RuntimeModule {
 //   constructor(compiler, { variableName }) {
@@ -31,9 +39,10 @@ class CdnChangePlugin {
   constructor(options) {
     this.createSeparateSMap = options.createSeparateSMap;
     this.i18nTemplate = options.i18nTemplate || '{{__I18N_CDN__}}';
-    this.variableName = options.variableName || '__CSS_CDN__';
+    this.variableName = options.variableName || 'window.__SMAP_PATH__';
     this.cssTemplate = options.cssTemplate || '{{__CSS_CDN__}}';
     this.jsTemplate = options.jsTemplate || '{{__JS_CDN__}}';
+    this.mode = options.mode || 'prod';
   }
 
   apply(compiler) {
@@ -61,14 +70,19 @@ class CdnChangePlugin {
     compiler.hooks.compilation.tap(pluginName, compilation => {
       _htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tap(pluginName, (data, cb) => {
         const {
-          createSeparateSMap
+          createSeparateSMap,
+          mode
         } = this; // eslint-disable-next-line no-param-reassign
 
         data.assets = { ...data.assets,
           css: data.assets.css.map(css => `${this.cssTemplate}${css}`),
           js: data.assets.js.map(js => {
-            if (createSeparateSMap && !(0, _nameTemplates.isI18nFile)(js)) {
-              js = js.replace('js/', `{{--js-smap}}js/`); //eslint-disable-line
+            if ((0, _modeUtils.isProductionMode)(mode) && createSeparateSMap && !(0, _nameTemplates.isI18nFile)(js)) {
+              if (js.includes('smap')) {
+                js = js.replace('smap/js/', `{{--js-smap}}js/`); //eslint-disable-line
+              } else {
+                js = js.replace('js/', `{{--js-smap}}js/`); //eslint-disable-line
+              }
             }
 
             return `${(0, _nameTemplates.isI18nFile)(js) ? this.i18nTemplate : this.jsTemplate}${js}`;
@@ -76,6 +90,16 @@ class CdnChangePlugin {
         };
         cb && cb(null, data);
       });
+
+      compilation.hooks.runtimeRequirementInTree.for(_webpack.RuntimeGlobals.getChunkScriptFilename).tap(pluginName, (chunk, set) => {
+        if (typeof compilation.outputOptions.chunkFilename === 'string' && /\[(full)?hash(:\d+)?\]/.test(compilation.outputOptions.chunkFilename)) {
+          set.add(_webpack.RuntimeGlobals.getFullHash);
+        }
+
+        compilation.addRuntimeModule(chunk, // eslint-disable-next-line new-cap
+        new _webpackCustomJsUrlLoader.default('javascript', 'javascript', _webpack.RuntimeGlobals.getChunkScriptFilename, chunk => chunk.filenameTemplate || (chunk.canBeInitial() ? compilation.outputOptions.filename : compilation.outputOptions.chunkFilename), false, this.variableName));
+        return true;
+      });
     });
   }
 

package/lib/shared/bundler/webpack/custom_plugins/CdnChangePlugin/webpackCustomJsUrlLoader.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _GetChunkFilenameRuntimeModule = _interopRequireDefault(require("webpack/lib/runtime/GetChunkFilenameRuntimeModule"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import { RuntimeGlobals, RuntimeModule, Template } from 'webpack';
+// const GetChunkFilenameRuntimeModule = require('webpack/lib/runtime/GetChunkFilenameRuntimeModule');
+// import GetChunkFilenameRuntimeModule from 'webpack/lib/runtime/GetChunkFilenameRuntimeModule';
+// const first = set => {
+//   const entry = set.values().next();
+//   return entry.done ? undefined : entry.value;
+// };
+class CustomizedGetChunkFilenameRuntimeModule extends _GetChunkFilenameRuntimeModule.default {
+  /**
+   * @param {string} contentType the   to use the content hash for
+   * @param {string} name kind of filename
+   * @param {string} global function name to be assigned
+   * @param {function(Chunk): string | FilenameFunction} getFilenameForChunk functor to get the filename or function
+   * @param {boolean} allChunks when false, only async chunks are included
+   */
+  constructor(contentType, name, global, getFilenameForChunk, allChunks, variableName) {
+    super(contentType, name, global, getFilenameForChunk, allChunks);
+    this.contentType = contentType;
+    this.global = global;
+    this.getFilenameForChunk = getFilenameForChunk;
+    this.allChunks = allChunks;
+    this.dependentHash = true;
+    this.variableName = variableName;
+  }
+
+  generate() {
+    const sourceCode = super.generate().toString();
+    const replaceCode = sourceCode.replaceAll('"js-chunks/', `${this.variableName} + "js-chunks/`);
+    return replaceCode;
+  }
+
+}
+
+var _default = CustomizedGetChunkFilenameRuntimeModule;
+exports.default = _default;

package/lib/shared/bundler/webpack/custom_plugins/CustomScriptLoadingPlugin.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomScriptLoadingStrategyPlugin = void 0;
+
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const pluginName = 'CustomScriptLoadingStrategyPlugin';
+
+class CustomScriptLoadingStrategyPlugin {
+  constructor({
+    scriptLoadingStategey
+  } = {}) {
+    this.scriptLoadingStrategy = scriptLoadingStategey;
+    this.tagNamesToMatch = ['script'];
+  }
+
+  getFileNameFromTagSrc(src) {
+    const fileNameArr = src.split('/');
+    return fileNameArr[fileNameArr.length - 1];
+  }
+
+  addAttributestToTag(tag, attributes) {
+    tag.attributes = Object.assign({}, tag.attributes, attributes);
+  }
+
+  matchFileName(tag, fileName) {
+    return fileName.test(this.getFileNameFromTagSrc(tag.attributes.src));
+  }
+
+  blockingStrategy(tag) {
+    delete tag.attributes.defer;
+    delete tag.attributes.async;
+  }
+
+  deferStrategy(tag) {
+    delete tag.attributes.async;
+  }
+
+  asyncStrategy(tag) {
+    delete tag.attributes.defer;
+  }
+
+  moduleStrategy(tag) {
+    this.deferStrategy(tag);
+  }
+
+  matchStrategy(scriptLoadingStrategy, tag) {
+    if (scriptLoadingStrategy === 'blocking') {
+      this.blockingStrategy(tag);
+    }
+
+    if (scriptLoadingStrategy === 'defer') {
+      this.deferStrategy(tag);
+    }
+
+    if (scriptLoadingStrategy === 'async') {
+      this.asyncStrategy(tag);
+    }
+
+    if (scriptLoadingStrategy === 'module') {
+      this.moduleStrategy(tag);
+    }
+  }
+
+  matchAndApplyCustomLoadingStrategyToScripts(tags) {
+    Object.keys(this.scriptLoadingStrategy).forEach(scriptLoadingStrategy => {
+      const filesToMatch = this.scriptLoadingStrategy[scriptLoadingStrategy];
+      tags.forEach(tag => {
+        if (this.tagNamesToMatch.includes(tag.tagName) && tag.attributes.src) {
+          const isFileMatch = filesToMatch.some(fileName => this.matchFileName(tag, fileName));
+
+          if (isFileMatch) {
+            this.matchStrategy(scriptLoadingStrategy, tag);
+            this.addAttributestToTag(tag, {
+              [scriptLoadingStrategy]: true
+            });
+          }
+        } // filesToMatch.forEach(fileName => {
+        //   if (!this.matchFileName(tag, fileName)) {
+        //     return;
+        //   }
+        //   this.matchStrategy(scriptLoadingStrategy, tag);
+        //   this.addAttributestToTag(tag, fileName, {
+        //     [scriptLoadingStrategy]: true
+        //   });
+        // });
+
+      });
+    });
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap(pluginName, compilation => {
+      _htmlWebpackPlugin.default.getHooks(compilation).alterAssetTagGroups.tapAsync(pluginName, (data, callback) => {
+        const tags = [...data.bodyTags, ...data.headTags];
+        this.matchAndApplyCustomLoadingStrategyToScripts(tags);
+        callback(null, data);
+      });
+    });
+  }
+
+}
+
+exports.CustomScriptLoadingStrategyPlugin = CustomScriptLoadingStrategyPlugin;

package/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/getI18nLoadingRuntimeModule.js

@@ -65,7 +65,7 @@ function getI18nLoadingRuntimeModule({
       return _webpack.Template.asString([`${prefixFunc(i18nChunks)}`, `var createI18nScriptTag = ${runtimeTemplate.basicFunction('chunkId, fullsrc, resolve, reject', ['var scriptTag = document.createElement("script");', attributes ? _webpack.Template.asString(Object.entries(attributes).map(entry => {
         const [key, value] = entry;
         return `scriptTag.setAttribute(${JSON.stringify(key)}, ${JSON.stringify(value)});`;
-      })) : '', scriptType ? `scriptTag.type = ${JSON.stringify(scriptType)};` : '', `var onScriptComplete = ${runtimeTemplate.basicFunction('event', ['// avoid mem leaks.', 'scriptTag.onerror = scriptTag.onload = null;', 'if (event.type === \'load\') {', _webpack.Template.indent(['resolve();']), '} else {', _webpack.Template.indent(['var errorType = event && (event.type === \'load\' ? \'missing\' : event.type);', 'var realSrc = event && event.target && event.target.src || fullsrc;', 'var err = new Error("Loading I18N chunk " + chunkId + " failed.\\n(" + realSrc + ")");', 'err.code = "I18N_CHUNK_LOAD_FAILED";', 'err.type = errorType;', 'err.request = realSrc;', 'scriptTag.parentNode.removeChild(scriptTag)', 'reject(err);']), '}'])}`, 'scriptTag.onerror = scriptTag.onload = onScriptComplete;', 'scriptTag.src = fullsrc;', crossOriginLoading ? _webpack.Template.asString(['if (scriptTag.src.indexOf(window.location.origin + \'/\') !== 0) {', _webpack.Template.indent(`scriptTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};`), '}']) : '', insertRoot && insertPlace || _webpack.Template.asString(['document.head.appendChild(scriptTag);']), 'return scriptTag;'])};`, `var findI18nScriptTag = ${runtimeTemplate.basicFunction('src, fullsrc', ['var existingScriptTags = document.getElementsByTagName("script");', 'for(var i = 0; i < existingScriptTags.length; i++) {', _webpack.Template.indent(['var tag = existingScriptTags[i];', 'var dataSrc = tag.getAttribute("data-src") || tag.getAttribute("src");', 'if((dataSrc === src || dataSrc === fullsrc)) return tag;']), '}', 'var existingStyleTags = document.getElementsByTagName("style");', 'for(var i = 0; i < existingStyleTags.length; i++) {', _webpack.Template.indent(['var tag = existingStyleTags[i];', 'var dataSrc = tag.getAttribute("data-src");', 'if(dataSrc === src || dataSrc === fullsrc) return tag;']), '}'])};`, `var loadI18nScriptTag = ${runtimeTemplate.basicFunction('chunkId', `return new Promise(${runtimeTemplate.basicFunction('resolve, reject', [`var src = ${_webpack.RuntimeGlobals.require}.miniI18nF(chunkId);`, `var fullsrc = ${_webpack.RuntimeGlobals.publicPath} + src;`, 'if(findI18nScriptTag(src, fullsrc)) return resolve();', 'createI18nScriptTag(chunkId, fullsrc, resolve, reject);'])});`)}`, '// object to store loaded I18N chunks', 'var installedI18nChunks = {', _webpack.Template.indent(
+      })) : '', '__webpack_require__.nc && scriptTag.setAttribute("nonce", __webpack_require__.nc)', scriptType ? `scriptTag.type = ${JSON.stringify(scriptType)};` : '', `var onScriptComplete = ${runtimeTemplate.basicFunction('event', ['// avoid mem leaks.', 'scriptTag.onerror = scriptTag.onload = null;', 'if (event.type === \'load\') {', _webpack.Template.indent(['resolve();']), '} else {', _webpack.Template.indent(['var errorType = event && (event.type === \'load\' ? \'missing\' : event.type);', 'var realSrc = event && event.target && event.target.src || fullsrc;', 'var err = new Error("Loading I18N chunk " + chunkId + " failed.\\n(" + realSrc + ")");', 'err.code = "I18N_CHUNK_LOAD_FAILED";', 'err.type = errorType;', 'err.request = realSrc;', 'scriptTag.parentNode.removeChild(scriptTag)', 'reject(err);']), '}'])}`, 'scriptTag.onerror = scriptTag.onload = onScriptComplete;', 'scriptTag.src = fullsrc;', crossOriginLoading ? _webpack.Template.asString(['if (scriptTag.src.indexOf(window.location.origin + \'/\') !== 0) {', _webpack.Template.indent(`scriptTag.crossOrigin = ${JSON.stringify(crossOriginLoading)};`), '}']) : '', insertRoot && insertPlace || _webpack.Template.asString(['document.head.appendChild(scriptTag);']), 'return scriptTag;'])};`, `var findI18nScriptTag = ${runtimeTemplate.basicFunction('src, fullsrc', ['var existingScriptTags = document.getElementsByTagName("script");', 'for(var i = 0; i < existingScriptTags.length; i++) {', _webpack.Template.indent(['var tag = existingScriptTags[i];', 'var dataSrc = tag.getAttribute("data-src") || tag.getAttribute("src");', 'if((dataSrc === src || dataSrc === fullsrc)) return tag;']), '}', 'var existingStyleTags = document.getElementsByTagName("style");', 'for(var i = 0; i < existingStyleTags.length; i++) {', _webpack.Template.indent(['var tag = existingStyleTags[i];', 'var dataSrc = tag.getAttribute("data-src");', 'if(dataSrc === src || dataSrc === fullsrc) return tag;']), '}'])};`, `var loadI18nScriptTag = ${runtimeTemplate.basicFunction('chunkId', `return new Promise(${runtimeTemplate.basicFunction('resolve, reject', [`var src = ${_webpack.RuntimeGlobals.require}.miniI18nF(chunkId);`, `var fullsrc = ${_webpack.RuntimeGlobals.publicPath} + src;`, 'if(findI18nScriptTag(src, fullsrc)) return resolve();', 'createI18nScriptTag(chunkId, fullsrc, resolve, reject);'])});`)}`, '// object to store loaded I18N chunks', 'var installedI18nChunks = {', _webpack.Template.indent(
       /** @type {string[]} */
       chunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(',\n')), '};', '', `${_webpack.RuntimeGlobals.ensureChunkHandlers}.miniI18n = ${runtimeTemplate.basicFunction('chunkId, promises', [`var i18nChunks = ${JSON.stringify(chunkMap)};`, 'if(installedI18nChunks[chunkId]) promises.push(installedI18nChunks[chunkId]);', 'else if(installedI18nChunks[chunkId] !== 0 && i18nChunks[chunkId]) {', _webpack.Template.indent([`promises.push(installedI18nChunks[chunkId] = loadI18nScriptTag(chunkId).then(${runtimeTemplate.basicFunction('', 'installedI18nChunks[chunkId] = 0;')}, ${runtimeTemplate.basicFunction('e', ['delete installedI18nChunks[chunkId];', 'throw e;'])}));`]), '}'])};`, '']);
     }

package/lib/shared/bundler/webpack/custom_plugins/InitialHtmlPlugin.js

@@ -37,6 +37,10 @@ class InitialHtmlPlugin {
         const headTags = [];
         const bodyTags = [];
         data.headTags.forEach(tag => {
+          Object.assign(tag.attributes, {
+            nonce: '{{--CSP-nonce}}'
+          });
+
           if (tag.tagName === 'link') {
             headTags.push(tag);
           } else {

package/lib/shared/bundler/webpack/custom_plugins/ManifestJsonPlugin/addFilesNamesToManifestJson.js

@@ -5,8 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.addFilesNamesToManifestJson = addFilesNamesToManifestJson;
 
+var _path = _interopRequireDefault(require("path"));
+
 var _removeHashFromFileName = require("./removeHashFromFileName");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function addFilesNamesToManifestJson({
   manifestJson,
   option,
@@ -15,9 +19,11 @@ function addFilesNamesToManifestJson({
 }) {
   const json = manifestJson;
   Object.keys(assets).forEach(filename => {
+    const fileName = _path.default.parse(filename).base;
+
     if (option.test(filename)) {
-      const filenameNameWithoutHash = (0, _removeHashFromFileName.removeHashFromFileName)(filename, hashDigestLength);
-      json[filenameNameWithoutHash] = filename;
+      const filenameNameWithoutHash = (0, _removeHashFromFileName.removeHashFromFileName)(fileName, hashDigestLength);
+      json[filenameNameWithoutHash] = fileName;
     }
   });
   return json;

package/lib/shared/bundler/webpack/custom_plugins/ManifestJsonPlugin/createInitialEntries.js

@@ -5,11 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createInitialEntriesForManifestJson = createInitialEntriesForManifestJson;
 
+var _path = _interopRequireDefault(require("path"));
+
 var _removeHashFromFileName = require("./removeHashFromFileName");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function createInitialEntriesForManifestJson(initialFileNames, hashLength) {
   const initialEntries = {};
-  initialFileNames.forEach(fileName => {
+  initialFileNames.forEach(filename => {
+    const fileName = _path.default.parse(filename).base;
+
     const filenameNameWithoutHash = (0, _removeHashFromFileName.removeHashFromFileName)(fileName, hashLength);
     initialEntries[filenameNameWithoutHash] = fileName;
   });

package/lib/shared/bundler/webpack/custom_plugins/ManifestJsonPlugin/createManifestJson.js

@@ -22,7 +22,7 @@ function createManifestJson({
   if (option.needInitialEntries) {
     const initialFileNames = (0, _findInitialFileNames.findInitialFileNames)(compilation);
     const initialEntries = (0, _createInitialEntries.createInitialEntriesForManifestJson)(initialFileNames, hashDigestLength);
-    manifestJson.initialEntries = initialEntries;
+    manifestJson.entryFiles = initialEntries;
   }
 
   const outputJson = (0, _addFilesNamesToManifestJson.addFilesNamesToManifestJson)({

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

@@ -117,6 +117,7 @@ class ResourceHintsRuntimePlugin extends _webpack.RuntimeModule {
         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")) {

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

@@ -15,6 +15,8 @@ var _replaceCssDirTemplate = require("./RtlSplitPlugin/replaceCssDirTemplate");
 
 var _getInitialAssetsFuncTemplate = require("./getInitialAssetsFuncTemplate");
 
+var _ServiceWorkerPluginUtils = require("./ServiceWorkerPluginUtils");
+
 const pluginName = 'ServiceWorkerPlugin';
 
 class ServiceWorkerPlugin {
@@ -83,8 +85,10 @@ class ServiceWorkerPlugin {
 
     [...compilation.chunks].filter(c => !this.isInitialChunk(c)).forEach(chunk => {
       allChunkUrls = [...allChunkUrls, ...chunk.files];
+      allI18nAssets.push((0, _ServiceWorkerPluginUtils.getI18nFileUrlPathTemplate)(compilation, chunk, this.i18nFileNameTemplate, '@locale@'));
     });
     allChunkUrls = allChunkUrls.filter(fileName => !fileName.endsWith('.map'));
+    allChunkUrls = allChunkUrls.map(fileName => fileName.replace('smap/', ''));
 
     if (enableRTLSplit) {
       allChunkUrls = (0, _replaceCssDirTemplate.replaceCssDirTemplateMapper)(allChunkUrls, _getInitialAssetsFuncTemplate.cssDirTemplate);
@@ -93,7 +97,7 @@ class ServiceWorkerPlugin {
     const mod = templateContent.replace(this.replaceText, `
       ${initialAssetsFuncTemplate}
 
-      let initialAssetsObj = getInitialAssets({ lang: langLocale, dir: cssDir });
+      let initialAssetsObj = getInitialAssets();
 
       let initialAssets = initialAssetsObj.i18n.concat(
         initialAssetsObj.css,

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getI18nFileUrlPathTemplate = getI18nFileUrlPathTemplate;
+
+function getI18nFileUrlPathTemplate(compilation, chunk, filenameTemplate, localeTemplate) {
+  const urlpath = compilation.getPath(filenameTemplate, {
+    chunk
+  });
+  return urlpath.replace('[locale]', localeTemplate);
+}

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

@@ -13,7 +13,7 @@ function checkSmapFilePattern(assetName) {
 }
 
 function skipRuntimeFiles(assetName) {
-  return !assetName.includes('runtime') || !assetName.includes('[locale]');
+  return !assetName.includes('[locale]');
 }
 
 const pluginName = 'SplitSourceMapPlugin'; // Purpose:
@@ -44,7 +44,25 @@ class SourceMapPlugin {
             }
           }
         });
-      });
+      }); // if contenthash enabled we need to add this to include the runtime files 
+      //  compilation.hooks.processAssets.tap(
+      //   {
+      //     name: pluginName,
+      //     stage: Compilation.PROCESS_ASSETS_STAGE_DERIVED
+      //     // additionalAssets: true
+      //   }, 
+      //   assets => {
+      //     Object.keys(assets).forEach(assetName => {
+      //      if (assetName.includes('runtime') && skipRuntimeFiles(assetName) ) {
+      //        const runtimeAssetCode = assets[assetName].source();
+      //        const newAssetName = `smap/${assetName}`;
+      //        compilation.emitAsset(
+      //          newAssetName,
+      //          new RawSource(runtimeAssetCode)
+      //        );
+      //      };
+      //     });
+      //   });
     });
   }