@studyportals/webpack-helper 6.0.7-17 → 6.0.7-18

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-17",
+  "version": "6.0.7-18",
   "description": "A collection of standard configurations and helpers for webpack.",
   "main": "src/main.js",
   "scripts": {
@@ -32,6 +32,7 @@
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "mini-css-extract-plugin": "^2.8.0",
     "path": "^0.12.7",
+    "prettier": "^3.4.2",
     "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,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin');
+const mode_1 = require("../enums/mode");
+const retry_chunk_load_plugin_1 = require("../plugins/retry-chunk-load.plugin");
 class ChunksRetryPluginFactory {
     static IsPresetSupported(preset) {
         if (!preset.retryChunksConfig)
             return false;
-        // if (preset.mode === Mode.DEVELOPMENT) return false;
+        if (preset.mode === mode_1.Mode.DEVELOPMENT)
+            return false;
         if (!preset.retryChunksConfig.inject)
             return false;
         return true;
@@ -15,7 +17,7 @@ class ChunksRetryPluginFactory {
     }
     static CustomRetryChunksPlugin(preset) {
         const { retryChunksConfig } = preset;
-        return new RetryChunkLoadPlugin({
+        return new retry_chunk_load_plugin_1.RetryChunkLoadPlugin({
             cacheBust: `function() {
 				return Date.now();
 			}`,

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

@@ -0,0 +1,112 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RetryChunkLoadPlugin = void 0;
+const prettier = __importStar(require("prettier"));
+const webpack_1 = 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 ${webpack_1.RuntimeGlobals.require} !== "undefined") {
+		var oldGetScript = ${webpack_1.RuntimeGlobals.getChunkScriptFilename};
+		var oldLoadScript = ${webpack_1.RuntimeGlobals.ensureChunk};
+		var queryMap = {};
+		var countMap = {};
+		var getRetryDelay = ${getRetryDelay}
+		${webpack_1.RuntimeGlobals.getChunkScriptFilename} = function(chunkId){
+			var result = oldGetScript(chunkId);
+			return result + (queryMap.hasOwnProperty(chunkId) ? '?' + queryMap[chunkId]  : '');
+		};
+		${webpack_1.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(${webpack_1.RuntimeGlobals.ensureChunk}(chunkId));
+				}, getRetryDelay(retryAttempt))
+			})
+			});
+		};
+		}`);
+                return (source +
+                    prettier.format(script, {
+                        trailingComma: 'es5',
+                        singleQuote: true,
+                        parser: 'babel',
+                    }));
+            });
+        });
+    }
+}
+exports.RetryChunkLoadPlugin = RetryChunkLoadPlugin;