@zohodesk/client_build_tool 0.0.6-exp.9 → 0.0.7-exp.1

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'
@@ -323,6 +330,20 @@ var _default = {
     cssAttributes: null,
     i18nAttributes: null
   },
-  externals: 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/index.js

@@ -39,7 +39,7 @@ 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';
@@ -77,8 +77,12 @@ class CdnChangePlugin {
         data.assets = { ...data.assets,
           css: data.assets.css.map(css => `${this.cssTemplate}${css}`),
           js: data.assets.js.map(js => {
-            if (((0, _modeUtils.isProductionMode)(mode) || 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}`;
@@ -88,8 +92,12 @@ class CdnChangePlugin {
       });
 
       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));
+        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

@@ -5,258 +5,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _webpack = require("webpack");
-
-const first = set => {
-  const entry = set.values().next();
-  return entry.done ? undefined : entry.value;
-};
-
-class CustomizedGetChunkFilenameRuntimeModule extends _webpack.RuntimeModule {
+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 contentType to use the content hash for
+   * @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) {
-    super(`get ${name} chunk filename`);
+  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 {
-      global,
-      chunk,
-      chunkGraph,
-      contentType,
-      getFilenameForChunk,
-      allChunks,
-      compilation
-    } = this;
-    const {
-      runtimeTemplate
-    } = compilation;
-    /** @type {Map<string | FilenameFunction, Set<Chunk>>} */
-
-    const chunkFilenames = new Map();
-    let maxChunks = 0;
-    /** @type {string} */
-
-    let dynamicFilename;
-    /**
-     * @param {Chunk} c the chunk
-     * @returns {void}
-     */
-
-    const addChunk = c => {
-      const chunkFilename = getFilenameForChunk(c);
-
-      if (chunkFilename) {
-        let set = chunkFilenames.get(chunkFilename);
-
-        if (set === undefined) {
-          chunkFilenames.set(chunkFilename, set = new Set());
-        }
-
-        set.add(c);
-
-        if (typeof chunkFilename === 'string') {
-          if (set.size < maxChunks) return;
-
-          if (set.size === maxChunks) {
-            if (chunkFilename.length < dynamicFilename.length) return;
-
-            if (chunkFilename.length === dynamicFilename.length) {
-              if (chunkFilename < dynamicFilename) return;
-            }
-          }
-
-          maxChunks = set.size;
-          dynamicFilename = chunkFilename;
-        }
-      }
-    };
-    /** @type {string[]} */
-
-
-    const includedChunksMessages = [];
-
-    if (allChunks) {
-      includedChunksMessages.push('all chunks');
-
-      for (const c of chunk.getAllReferencedChunks()) {
-        addChunk(c);
-      }
-    } else {
-      includedChunksMessages.push('async chunks');
-
-      for (const c of chunk.getAllAsyncChunks()) {
-        addChunk(c);
-      }
-
-      const includeEntries = chunkGraph.getTreeRuntimeRequirements(chunk).has(_webpack.RuntimeGlobals.ensureChunkIncludeEntries);
-
-      if (includeEntries) {
-        includedChunksMessages.push('sibling chunks for the entrypoint');
-
-        for (const c of chunkGraph.getChunkEntryDependentChunksIterable(chunk)) {
-          addChunk(c);
-        }
-      }
-    }
-
-    for (const entrypoint of chunk.getAllReferencedAsyncEntrypoints()) {
-      addChunk(entrypoint.chunks[entrypoint.chunks.length - 1]);
-    }
-    /** @type {Map<string, Set<string | number>>} */
-
-
-    const staticUrls = new Map();
-    /** @type {Set<Chunk>} */
-
-    const dynamicUrlChunks = new Set();
-    /**
-     * @param {Chunk} c the chunk
-     * @param {string | FilenameFunction} chunkFilename the filename template for the chunk
-     * @returns {void}
-     */
-
-    const addStaticUrl = (c, chunkFilename) => {
-      /**
-       * @param {string | number} value a value
-       * @returns {string} string to put in quotes
-       */
-      const unquotedStringify = value => {
-        const str = `${value}`;
-
-        if (str.length >= 5 && str === `${c.id}`) {
-          // This is shorter and generates the same result
-          return '" + chunkId + "';
-        }
-
-        const s = JSON.stringify(str);
-        return s.slice(1, s.length - 1);
-      };
-
-      const unquotedStringifyWithLength = value => length => unquotedStringify(`${value}`.slice(0, length));
-
-      const chunkFilenameValue = typeof chunkFilename === 'function' ? JSON.stringify(chunkFilename({
-        chunk: c,
-        contentHashType: contentType
-      })) : JSON.stringify(chunkFilename);
-      const staticChunkFilename = compilation.getPath(chunkFilenameValue, {
-        hash: `" + ${_webpack.RuntimeGlobals.getFullHash}() + "`,
-        hashWithLength: length => `" + ${_webpack.RuntimeGlobals.getFullHash}().slice(0, ${length}) + "`,
-        chunk: {
-          id: unquotedStringify(c.id),
-          hash: unquotedStringify(c.renderedHash),
-          hashWithLength: unquotedStringifyWithLength(c.renderedHash),
-          name: unquotedStringify(c.name || c.id),
-          contentHash: {
-            [contentType]: unquotedStringify(c.contentHash[contentType])
-          },
-          contentHashWithLength: {
-            [contentType]: unquotedStringifyWithLength(c.contentHash[contentType])
-          }
-        },
-        contentHashType: contentType
-      });
-      let set = staticUrls.get(staticChunkFilename);
-
-      if (set === undefined) {
-        staticUrls.set(staticChunkFilename, set = new Set());
-      }
-
-      set.add(c.id);
-    };
-
-    for (const [filename, chunks] of chunkFilenames) {
-      if (filename !== dynamicFilename) {
-        for (const c of chunks) addStaticUrl(c, filename);
-      } else {
-        for (const c of chunks) dynamicUrlChunks.add(c);
-      }
-    }
-    /**
-     * @param {function(Chunk): string | number} fn function from chunk to value
-     * @returns {string} code with static mapping of results of fn
-     */
-
-
-    const createMap = fn => {
-      const obj = {};
-      let useId = false;
-      let lastKey;
-      let entries = 0; // eslint-disable-next-line no-restricted-syntax
-
-      for (const c of dynamicUrlChunks) {
-        const value = fn(c);
-
-        if (value === c.id) {
-          useId = true;
-        } else {
-          obj[c.id] = value;
-          lastKey = c.id;
-          entries++;
-        }
-      }
-
-      if (entries === 0) return 'chunkId';
-
-      if (entries === 1) {
-        return useId ? `(chunkId === ${JSON.stringify(lastKey)} ? ${JSON.stringify(obj[lastKey])} : chunkId)` : JSON.stringify(obj[lastKey]);
-      }
-
-      return useId ? `(${JSON.stringify(obj)}[chunkId] || chunkId)` : `${JSON.stringify(obj)}[chunkId]`;
-    };
-    /**
-     * @param {function(Chunk): string | number} fn function from chunk to value
-     * @returns {string} code with static mapping of results of fn for including in quoted string
-     */
-
-
-    const mapExpr = fn => {
-      return `" + ${createMap(fn)} + "`;
-    };
-    /**
-     * @param {function(Chunk): string | number} fn function from chunk to value
-     * @returns {function(number): string} function which generates code with static mapping of results of fn for including in quoted string for specific length
-     */
-
-
-    const mapExprWithLength = fn => length => {
-      return `" + ${createMap(c => `${fn(c)}`.slice(0, length))} + "`;
-    };
-
-    const url = dynamicFilename && compilation.getPath(JSON.stringify(dynamicFilename), {
-      hash: `" + ${_webpack.RuntimeGlobals.getFullHash}() + "`,
-      hashWithLength: length => `" + ${_webpack.RuntimeGlobals.getFullHash}().slice(0, ${length}) + "`,
-      chunk: {
-        id: `" + chunkId + "`,
-        hash: mapExpr(c => c.renderedHash),
-        hashWithLength: mapExprWithLength(c => c.renderedHash),
-        name: mapExpr(c => c.name || c.id),
-        contentHash: {
-          [contentType]: mapExpr(c => c.contentHash[contentType])
-        },
-        contentHashWithLength: {
-          [contentType]: mapExprWithLength(c => c.contentHash[contentType])
-        }
-      },
-      contentHashType: contentType
-    });
-    const cdn = `__CSS_CDN__`;
-    return _webpack.Template.asString([`// This function allow to reference ${includedChunksMessages.join(' and ')}`, `${global} = ${runtimeTemplate.basicFunction('chunkId', staticUrls.size > 0 ? ['// return url for filenames not based on template', // it minimizes to `x===1?"...":x===2?"...":"..."`
-    _webpack.Template.asString(Array.from(staticUrls, ([url, ids]) => {
-      const condition = ids.size === 1 ? `chunkId === ${JSON.stringify(first(ids))}` : `{${Array.from(ids, id => `${JSON.stringify(id)}:1`).join(',')}}[chunkId]`;
-      return `if (${condition}) return window.${cdn}+${url};`;
-    })), '// return url for filenames based on template', `return window.${cdn}+${url};`] : ['// return url for filenames based on template', `return window.${cdn}+${url};`])};`]);
+    const sourceCode = super.generate().toString();
+    const replaceCode = sourceCode.replaceAll('"js-chunks/', `${this.variableName} + "js-chunks/`);
+    return replaceCode;
   }
 
 }

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 {