@studyportals/webpack-helper 6.0.5-3 → 6.0.7-0

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@studyportals/webpack-helper",
-  "version": "6.0.5-3",
+  "version": "6.0.7-0",
   "description": "A collection of standard configurations and helpers for webpack.",
   "main": "src/main.js",
   "scripts": {
     "test": "vitest --watch=false --coverage",
     "build": "tsc",
     "prepublish": "npm run build",
-    "postinstall": "cp ./assets/.browserslistrc ../../../",
-    "deploy-beta": "npm version prerelease && npm run build && npm publish --tag beta --access=public  &&  rm -rf node_modules"
+    "postinstall": "sudo cp ./assets/.browserslistrc ../../../",
+    "deploy-beta": "npm version prerelease && npm run build && npm publish --tag beta --access=public  --auth-type=legacy &&  rm -rf node_modules"
   },
   "files": [
     "src/**/*.js",
@@ -39,7 +39,8 @@
     "vue-loader": "^17.4.2",
     "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
-    "webpack-merge": "^5.10.0"
+    "webpack-merge": "^5.10.0",
+    "webpack-retry-chunk-load-plugin": "^3.1.1"
   },
   "devDependencies": {
     "@types/node": "^20.11.20",

package/src/enums/preset.js

@@ -6,5 +6,4 @@ var Preset;
     Preset["VUE_TYPESCRIPT"] = "vue-typescript";
     Preset["TYPESCRIPT"] = "typescript";
     Preset["JAVASCRIPT"] = "javascript";
-    Preset["VUE_TYPESCRIPT_NO_CODE_SPLITTING"] = "vue-typescript-no-code-splitting";
 })(Preset || (exports.Preset = Preset = {}));

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const mode_1 = require("../enums/mode");
+const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin');
+class ChunksRetryPluginFactory {
+    static InjectPlugin(preset) {
+        if (!preset.retryChunksConfig) {
+            return preset;
+        }
+        if (preset.mode === mode_1.Mode.DEVELOPMENT) {
+            return preset;
+        }
+        if (!preset.retryChunksConfig.inject) {
+            return preset;
+        }
+        preset.getPlugins = (filename) => {
+            const plugins = preset.getPlugins(filename);
+            plugins.push(ChunksRetryPluginFactory.CustomRetryChunksPlugin(preset));
+            return plugins;
+        };
+        return preset;
+    }
+    static CustomRetryChunksPlugin(preset) {
+        const { retryChunksConfig } = preset;
+        return new RetryChunkLoadPlugin({
+            cacheBust: `function() {
+				return Date.now();
+			}`,
+            retryDelay: `function(retryAttempt) {
+				return Math.min(2000, Math.pow(2, retryAttempt) * 100);
+			}
+			`,
+            maxRetries: retryChunksConfig.threshold,
+            lastResortScript: ChunksRetryPluginFactory.CreateLastResortScript(preset)
+        });
+    }
+    static CreateLastResortScript(preset) {
+        const { retryChunksConfig } = preset;
+        let lastResortScript = ``;
+        if (retryChunksConfig.thresholdReachedCallBack) {
+            lastResortScript = `
+				${retryChunksConfig.thresholdReachedCallBack.toString()}
+			`;
+        }
+        if (!retryChunksConfig.disableDefaultRollbarError) {
+            lastResortScript = `
+				if (!window || !window['rollbar_PQ'] || !window['rollbar_PQ'].error) {
+					return;
+				}
+
+				window['rollbar_PQ'].error(new Error('Failed to load chunk for after retries'));
+			`;
+        }
+        return lastResortScript;
+    }
+}
+exports.default = ChunksRetryPluginFactory;

package/src/interfaces/chunks-retry.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/model/configuration.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Configuration = void 0;
 const entry_1 = require("./entry");
@@ -9,13 +12,14 @@ const preset_1 = require("../enums/preset");
 const vue_typescript_preset_1 = require("../presets/vue-typescript.preset");
 const typescript_preset_1 = require("../presets/typescript.preset");
 const javascript_preset_1 = require("../presets/javascript.preset");
-const vue_typescript_no_code_splitting_preset_1 = require("../presets/vue-typescript-no-code-splitting.preset");
 const mode_1 = require("../enums/mode");
 const production_config_1 = require("../defaults/production.config");
 const development_config_1 = require("../defaults/development.config");
+const chunks_retry_plugin_factory_1 = __importDefault(require("../factories/chunks-retry-plugin-factory"));
 const ManifestGenerator = require("@studyportals/bob-manifest-generator").ManifestGenerator;
 const DllReferencePlugin = require("@studyportals/bob-manifest-generator").DllReferencePlugin;
 const { merge } = require('webpack-merge');
+const DEFAULT_CHUNKS_RETRY_CONFIG_THRESHOLD = 6;
 class Configuration {
     constructor(options) {
         this.customElementTags = options.customElementTags || [];
@@ -35,6 +39,10 @@ class Configuration {
             [mode_1.Mode.PRODUCTION]: merge([configPrd, (0, production_config_1.ProductionConfig)(this.bob)]) || (0, production_config_1.ProductionConfig)(this.bob)
         };
         this.fileName = options.output.fileName || "[name]";
+        this.chunksRetryConfig = options.chunksRetryConfig || {
+            threshold: DEFAULT_CHUNKS_RETRY_CONFIG_THRESHOLD,
+            inject: this.preset === preset_1.Preset.VUE_TYPESCRIPT
+        };
     }
     get(mode) {
         this.detectPresets(mode);
@@ -58,16 +66,13 @@ class Configuration {
     detectPresets(mode) {
         switch (this.preset) {
             case preset_1.Preset.VUE_TYPESCRIPT:
-                this.injectPreset(new vue_typescript_preset_1.VueTypeScriptPreset(mode, this.customElementTags));
+                this.injectPreset(new vue_typescript_preset_1.VueTypeScriptPreset(mode, this.chunksRetryConfig, this.customElementTags));
                 break;
             case preset_1.Preset.TYPESCRIPT:
-                this.injectPreset(new typescript_preset_1.TypeScriptPreset());
+                this.injectPreset(new typescript_preset_1.TypeScriptPreset(mode, this.chunksRetryConfig));
                 break;
             case preset_1.Preset.JAVASCRIPT:
-                this.injectPreset(new javascript_preset_1.JavascriptPreset());
-                break;
-            case preset_1.Preset.VUE_TYPESCRIPT_NO_CODE_SPLITTING:
-                this.injectPreset(new vue_typescript_no_code_splitting_preset_1.VueTypescriptNoCodeSplittingPreset(mode, this.customElementTags));
+                this.injectPreset(new javascript_preset_1.JavascriptPreset(mode, this.chunksRetryConfig));
                 break;
             default:
                 break;
@@ -81,6 +86,7 @@ class Configuration {
         });
         this.extensions = this.extensions.concat(preset.getExtensions());
         this.module.setModule(module);
+        chunks_retry_plugin_factory_1.default.InjectPlugin(preset);
     }
     getEnvironmentSpecificConfig(mode) {
         return this.environmentSpecificConfig[mode];

package/src/presets/chunk-retry.preset.js

@@ -0,0 +1 @@
+"use strict";

package/src/presets/javascript.preset.js

@@ -4,6 +4,10 @@ exports.JavascriptPreset = void 0;
 const browser_list_to_esbuild_target_factory_1 = require("../factories/browser-list-to-esbuild-target-factory");
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 class JavascriptPreset {
+    constructor(mode, retryChunksConfig) {
+        this.mode = mode;
+        this.retryChunksConfig = retryChunksConfig;
+    }
     getPlugins(filename) {
         return [
             new MiniCssExtractPlugin({
@@ -26,7 +30,12 @@ class JavascriptPreset {
                     use: [
                         MiniCssExtractPlugin.loader,
                         'css-loader',
-                        'sass-loader'
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                api: 'modern-compiler'
+                            }
+                        }
                     ],
                 },
                 {

package/src/presets/typescript.preset.js

@@ -4,6 +4,10 @@ exports.TypeScriptPreset = void 0;
 const browser_list_to_esbuild_target_factory_1 = require("../factories/browser-list-to-esbuild-target-factory");
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 class TypeScriptPreset {
+    constructor(mode, retryChunksConfig) {
+        this.mode = mode;
+        this.retryChunksConfig = retryChunksConfig;
+    }
     getPlugins(filename) {
         return [
             new MiniCssExtractPlugin({
@@ -26,7 +30,12 @@ class TypeScriptPreset {
                     use: [
                         MiniCssExtractPlugin.loader,
                         'css-loader',
-                        'sass-loader'
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                api: 'modern-compiler'
+                            }
+                        }
                     ],
                 },
                 {

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

@@ -8,8 +8,9 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin;
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 class VueTypeScriptPreset {
-    constructor(mode, customElementTags) {
+    constructor(mode, retryChunksConfig, customElementTags) {
         this.mode = mode;
+        this.retryChunksConfig = retryChunksConfig;
         this.customElementTags = customElementTags;
     }
     getPlugins(filename) {
@@ -40,7 +41,12 @@ class VueTypeScriptPreset {
                     use: [
                         MiniCssExtractPlugin.loader,
                         'css-loader',
-                        'sass-loader'
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                api: 'modern-compiler'
+                            }
+                        }
                     ],
                 },
                 {

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

@@ -1,20 +0,0 @@
-"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, customElementTags) {
-        super(mode, customElementTags);
-    }
-    getPlugins(filename) {
-        return [
-            new MiniCssExtractPlugin({
-                filename
-            }),
-            new VueLoaderPlugin()
-        ];
-    }
-}
-exports.VueTypescriptNoCodeSplittingPreset = VueTypescriptNoCodeSplittingPreset;