@studyportals/webpack-helper 6.0.7-9 → 6.1.1-1

package/README.md

@@ -6,6 +6,10 @@ WebpackHelper is a utility that makes it easy to set up a webpack configuration
 - [Webpack version](#webpack-version)
   - [Notes on updating Webpack from v4 to v5](#notes-on-updating-webpack-from-v4-to-v5)
 - [Quick Start](#quick-start)
+- [Chunks Retry](#chunks-retry)
+  - [Defaults](#defaults)
+  - [Configuration](#configuration)
+  - [Limitations](#limitations)
 - [Configuration](#configuration)
   - [entry](#entry-required)
   - [output](#output-required)
@@ -123,6 +127,54 @@ When your configuration is created you can get an instance of it for the correct
 ```javascript
 module.exports = (env, details) => configuration.get(details.mode);
 ```
+
+## Chunks Retry
+Webpack Helpers has a default configuration to retry chunks which cannot get loaded on the first try (for whatever reason, network or otherwise).
+
+It has an Exponential Backoff to calculate the delay between retries of a maximum of `2` seconds.
+
+The functionality is implemented thru a plugin called `webpack-retry-chunk-load-plugin` https://www.npmjs.com/package/webpack-retry-chunk-load-plugin.
+
+### Defaults
+
+By default it is enabled if the selected preset is `vue-typescript` and it uses `6` as the number of retries it does and it uses the `rollbar` instance on the `window` object (Portal instance) to log an error when it reaches the threshold of retries without being able to load the chunk (`new Error('Failed to load chunk for after retries')`).
+
+### Configuration
+To configure the functionality you can provide an object following this interface
+```js
+interface IChunksRetryPluginConfig {
+	inject: boolean; //if you want the plugin injected
+
+	threshold: number; //amount of retries
+
+	thresholdReachedCallBack?: string; //a function (body of it as string) to be called when the amount of retries has been exhausted
+
+	rollbarInstanceIdentifier?: string; //a key of a Rollbar instance present on the 'window' object e.g if you want to use window['rollbar_PQ'] to track the error in the Profile Questionnaire project in Rollbar then you send 'rollbar_PQ'
+
+	disableDefaultRollbarError?: boolean; //if you don't want to log by default when the threshold has been reached
+}
+```
+
+and you can provide this thru the `webpack` config of your service like so
+
+```js
+const configuration = WebpackHelper.create({
+	chunksRetryConfig: {
+		threshold: 10,
+		thresholdReachedCallBack: `console.log("hello")`,
+	},
+	...
+```
+
+### Limitations
+We have some limitations in this implementation based on the plugin we used and that the code will be part of the webpack exported code
+
+### Only use ES5
+You can only write ES5 code inside the `thresholdReachedCallBack`
+
+### String as function
+The function `thresholdReachedCallBack` must be a string (aka the body of the function) and we cannot change that to be a function while retaining the simplicity of the code.
+
 ## Configuration
 
 Webpack Helper offers a compact but flexible configuration interface. Below you will find every option available.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studyportals/webpack-helper",
-  "version": "6.0.7-9",
+  "version": "6.1.1-1",
   "description": "A collection of standard configurations and helpers for webpack.",
   "main": "src/main.js",
   "scripts": {
@@ -23,7 +23,7 @@
     "@studyportals/bob-manifest-generator": "^5.0.1",
     "@studyportals/browserslist-config": "^1.2.4",
     "@studyportals/dll-availability-tracker": "^2.0.0",
-    "@studyportals/vue-config": "^5.0.2",
+    "@studyportals/vue-config": "^5.0.3-0",
     "css-loader": "^6.10.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
     "esbuild-loader": "^4.0.3",
@@ -32,6 +32,7 @@
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "mini-css-extract-plugin": "^2.8.0",
     "path": "^0.12.7",
+    "prettier": "^2.8.8",
     "sass": "^1.71.1",
     "sass-loader": "^14.1.1",
     "terser-webpack-plugin": "^5.3.10",
@@ -39,8 +40,7 @@
     "vue-loader": "^17.4.2",
     "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
-    "webpack-merge": "^5.10.0",
-    "webpack-retry-chunk-load-plugin": "^3.1.1"
+    "webpack-merge": "^5.10.0"
   },
   "devDependencies": {
     "@types/node": "^20.11.20",

package/src/factories/chunks-retry-plugin-factory.js

@@ -1,18 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin');
+const mode_1 = require("../enums/mode");
+const path = require('path');
+const process = require('process');
+const { RetryChunkLoadPlugin } = require(path.join(process.cwd(), 'node_modules', '@studyportals/webpack-helper', 'src', 'plugins', 'retry-chunk-load.plugin.js'));
 class ChunksRetryPluginFactory {
-    static InjectPlugin(preset) {
-        if (!preset.retryChunksConfig) {
-            return;
-        }
-        // if (preset.mode === Mode.DEVELOPMENT) {
-        // 	return preset;
-        // }
-        if (!preset.retryChunksConfig.inject) {
-            return;
-        }
-        preset.injectedPlugins.push(ChunksRetryPluginFactory.CustomRetryChunksPlugin(preset));
+    static IsPresetSupported(preset) {
+        if (!preset.retryChunksConfig)
+            return false;
+        if (preset.mode === mode_1.Mode.DEVELOPMENT)
+            return false;
+        if (!preset.retryChunksConfig.inject)
+            return false;
+        return true;
+    }
+    static GetRetryChunksPlugin(preset) {
+        return ChunksRetryPluginFactory.CustomRetryChunksPlugin(preset);
     }
     static CustomRetryChunksPlugin(preset) {
         const { retryChunksConfig } = preset;
@@ -32,17 +35,18 @@ class ChunksRetryPluginFactory {
         const { retryChunksConfig } = preset;
         let lastResortScript = ``;
         if (retryChunksConfig.thresholdReachedCallBack) {
-            lastResortScript = `
-				${retryChunksConfig.thresholdReachedCallBack.toString()}
+            lastResortScript += `
+				${retryChunksConfig.thresholdReachedCallBack}
 			`;
         }
         if (!retryChunksConfig.disableDefaultRollbarError) {
-            lastResortScript = `
-				if (!window || !window['rollbar_PQ'] || !window['rollbar_PQ'].error) {
+            const rollbarInstanceIdentifier = retryChunksConfig.rollbarInstanceIdentifier || 'rollbar';
+            lastResortScript += `
+				if (!window || !window['${rollbarInstanceIdentifier}'] || !window['${rollbarInstanceIdentifier}'].error) {
 					return;
 				}
 
-				window['rollbar_PQ'].error(new Error('Failed to load chunk for after retries'));
+				window['${rollbarInstanceIdentifier}'].error(new Error('Failed to load chunk for after retries'));
 			`;
         }
         return lastResortScript;

package/src/model/configuration.js

@@ -41,6 +41,7 @@ class Configuration {
         this.fileName = options.output.fileName || "[name]";
         this.chunksRetryConfig = options.chunksRetryConfig || {
             threshold: DEFAULT_CHUNKS_RETRY_CONFIG_THRESHOLD,
+            rollbarInstanceIdentifier: 'rollbar',
             inject: this.preset === preset_1.Preset.VUE_TYPESCRIPT
         };
     }
@@ -79,8 +80,11 @@ class Configuration {
         }
     }
     injectPreset(preset) {
-        chunks_retry_plugin_factory_1.default.InjectPlugin(preset);
         const plugins = preset.getPlugins(this.getCSSFileName());
+        if (chunks_retry_plugin_factory_1.default.IsPresetSupported(preset)) {
+            const retryPlugin = chunks_retry_plugin_factory_1.default.GetRetryChunksPlugin(preset);
+            plugins.push(retryPlugin);
+        }
         const module = preset.getModule();
         plugins.forEach(plugin => {
             this.plugins.addPlugin(plugin);

package/src/plugins/retry-chunk-load.plugin.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RetryChunkLoadPlugin = void 0;
+const prettier = require('prettier');
+const { RuntimeGlobals } = require('webpack');
+const pluginName = 'RetryChunkLoadPlugin';
+class RetryChunkLoadPlugin {
+    constructor(options = {}) {
+        this.options = Object.assign({}, options);
+    }
+    apply(compiler) {
+        compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+            const { mainTemplate, runtimeTemplate } = compilation;
+            const maxRetryValueFromOptions = Number(this.options.maxRetries);
+            const maxRetries = Number.isInteger(maxRetryValueFromOptions) &&
+                maxRetryValueFromOptions > 0
+                ? maxRetryValueFromOptions
+                : 1;
+            const getCacheBustString = () => this.options.cacheBust
+                ? `
+				(${this.options.cacheBust})();
+			`
+                : '"cache-bust=true"';
+            mainTemplate.hooks.localVars.tap({ name: pluginName, stage: 1 }, (source, chunk) => {
+                const currentChunkName = chunk.name;
+                const addRetryCode = !this.options.chunks ||
+                    this.options.chunks.some(chunk => chunk === currentChunkName);
+                const getRetryDelay = typeof this.options.retryDelay === 'string'
+                    ? this.options.retryDelay
+                    : `function() { return ${this.options.retryDelay || 0} }`;
+                if (!addRetryCode)
+                    return source;
+                const script = runtimeTemplate.iife('', `
+		if(typeof ${RuntimeGlobals.require} !== "undefined") {
+		var oldGetScript = ${RuntimeGlobals.getChunkScriptFilename};
+		var oldLoadScript = ${RuntimeGlobals.ensureChunk};
+		var queryMap = {};
+		var countMap = {};
+		var getRetryDelay = ${getRetryDelay}
+		${RuntimeGlobals.getChunkScriptFilename} = function(chunkId){
+			var result = oldGetScript(chunkId);
+			return result + (queryMap.hasOwnProperty(chunkId) ? '?' + queryMap[chunkId]  : '');
+		};
+		${RuntimeGlobals.ensureChunk} = function(chunkId){
+			var result = oldLoadScript(chunkId);
+			return result.catch(function(error){
+			var retries = countMap.hasOwnProperty(chunkId) ? countMap[chunkId] : ${maxRetries};
+			if (retries < 1) {
+				var realSrc = oldGetScript(chunkId);
+				error.message = 'Loading chunk ' + chunkId + ' failed after ${maxRetries} retries.\\n(' + realSrc + ')';
+				error.request = realSrc;${this.options.lastResortScript
+                    ? this.options.lastResortScript
+                    : ''}
+				throw error;
+			}
+			return new Promise(function (resolve) {
+				var retryAttempt = ${maxRetries} - retries + 1;
+				setTimeout(function () {
+				var retryAttemptString = '&retry-attempt=' + retryAttempt;
+				var cacheBust = ${getCacheBustString()} + retryAttemptString;
+				queryMap[chunkId] = cacheBust;
+				countMap[chunkId] = retries - 1;
+				resolve(${RuntimeGlobals.ensureChunk}(chunkId));
+				}, getRetryDelay(retryAttempt))
+			})
+			});
+		};
+		}`);
+                return (source +
+                    prettier.format(script, {
+                        singleQuote: true,
+                        parser: 'babel',
+                        bracketSpacing: true,
+                        trailingComma: 'all',
+                        arrowParens: 'avoid',
+                    }));
+            });
+        });
+    }
+}
+exports.RetryChunkLoadPlugin = RetryChunkLoadPlugin;

package/src/presets/javascript.preset.js

@@ -7,14 +7,12 @@ class JavascriptPreset {
     constructor(mode, retryChunksConfig) {
         this.mode = mode;
         this.retryChunksConfig = retryChunksConfig;
-        this.injectedPlugins = [];
     }
     getPlugins(filename) {
         return [
             new MiniCssExtractPlugin({
                 filename
-            }),
-            ...this.injectedPlugins
+            })
         ];
     }
     getModule() {

package/src/presets/typescript.preset.js

@@ -7,14 +7,12 @@ class TypeScriptPreset {
     constructor(mode, retryChunksConfig) {
         this.mode = mode;
         this.retryChunksConfig = retryChunksConfig;
-        this.injectedPlugins = [];
     }
     getPlugins(filename) {
         return [
             new MiniCssExtractPlugin({
                 filename
             }),
-            ...this.injectedPlugins
         ];
     }
     getModule() {

package/src/presets/vue-typescript-no-code-splitting.preset.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VueTypescriptNoCodeSplittingPreset = void 0;
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin;
+const vue_typescript_preset_1 = require("./vue-typescript.preset");
+class VueTypescriptNoCodeSplittingPreset extends vue_typescript_preset_1.VueTypeScriptPreset {
+    constructor(mode) {
+        super(mode);
+    }
+    getPlugins(filename) {
+        return [
+            new MiniCssExtractPlugin({
+                filename
+            }),
+            new VueLoaderPlugin()
+        ];
+    }
+}
+exports.VueTypescriptNoCodeSplittingPreset = VueTypescriptNoCodeSplittingPreset;

package/src/presets/vue-typescript.preset.js

@@ -12,7 +12,6 @@ class VueTypeScriptPreset {
         this.mode = mode;
         this.retryChunksConfig = retryChunksConfig;
         this.customElementTags = customElementTags;
-        this.injectedPlugins = [];
     }
     getPlugins(filename) {
         return [
@@ -24,8 +23,7 @@ class VueTypeScriptPreset {
                 filename,
                 ignoreOrder: true
             }),
-            new VueLoaderPlugin(),
-            ...this.injectedPlugins
+            new VueLoaderPlugin()
         ];
     }
     getModule() {