@studyportals/webpack-helper 7.0.0-2 → 7.0.0-3

package/README.md

@@ -3,12 +3,13 @@
 WebpackHelper is a utility that makes it easy to set up a webpack configuration for Studyportals' projects that adhere to our [Webpack quality criteria](https://knowledge-vault.studyportals.xyz/quality-standards/front-end/webpack-quality-criteria.html).
 
 ## Table of Contents
+
 - [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)
+  - [Setup](#setup)
   - [Limitations](#limitations)
 - [Configuration](#configuration)
   - [entry](#entry-required)
@@ -16,57 +17,33 @@ WebpackHelper is a utility that makes it easy to set up a webpack configuration
   - [preset](#preset)
   - [bob](#bob)
   - [common](#common)
+  - [staticPath](#staticpath-required)
   - [development](#development)
   - [production](#production)
 - [Presets](#presets)
   - [javascript](#javascript)
   - [typescript](#typescript)
   - [vue-typescript](#vue-typescript)
-- [DoD compliance with Babel and Browserslist](#dod-compliance-with-babel-and-browserslist) 
+- [DoD compliance with Babel and Browserslist](#dod-compliance-with-babel-and-browserslist)
 
 ## Webpack version
+
 This version of WebpackHelper is based on webpack 5. Some earlier WebpackHelper versions used earlier versions of Webpack. If you get syntax errors when updating to the latest version of WebpackHelper, please check out the [Webpack documentation](https://webpack.js.org/configuration/).
 
 ### Notes on updating Webpack from v4 to v5
-Below are some notes that might be helpful when you're upgrading a microservice from webpack-helper v2 (based on Webpack v4) to v3 (based on Webpack v5).
 
-#### Dev server
-Webpack-helper **v2 and below**: Your `development.devServer` file might include these parts:
-```javascript
-{
-    development: {
-        devServer: {
-            open: true,
-            overlay: true,
-            writeToDisk: true
-        }
-    }
-}
-```
-Webpack-helper **v3 and beyond**: Your `webpack.config.js` file should configure those parts like this:
-```javascript
-{
-    development: {
-        devServer: {
-            client: {
-                overlay: true
-            },
-            devMiddleware: {
-                writeToDisk: true
-            },
-            open: true,
-            static: path.join(__dirname, '.') // Related to writeToDisk.
-        }
-    }
-}
-```
+Below are some notes that might be helpful when you're upgrading a microservice from webpack-helper v2 (based on Webpack v4) to v3 (based on Webpack v5).
 
 #### Exporting
+
 Webpack-helper **v2 and below**: Your `webpack.config.js` file ended with the following:
+
 ```javascript
 module.exports = mode => configuration.get(mode);
 ```
+
 Webpack-helper **v3 and beyond**: Your `webpack.config.js` file should end with the following (as is also mentioned further below):
+
 ```javascript
 module.exports = (env, details) => configuration.get(details.mode);
 ```
@@ -84,41 +61,40 @@ const path = require('path');
 const WebpackHelper = require("@studyportals/webpack-helper");
 
 const configuration = WebpackHelper.create({
-	entry: [
-		"./src/main.ts"
-	],
-	output: {
-		path: path.resolve(__dirname, './dist'),
-		fileName: 'bundle',
-		hash: true,
-		// Use this if you want to control hashing for js and css separately
-		hash: {
-			js: true,
-			css: false
-		}
-	},
-	preset: "vue-typescript",
-	bob: {
-		name: 'MicroService',
-		html: '<div id=\"MicroServicePlaceholder\"></div>',
-		baseURL: '/dist',
-		defer: ['style'],
-		dllPackages: [
-			{
-				name: "package-dll",
-				manifest: require("@studyportals/package-dll/dist/manifest.json")
-			}
-		]
-	},
-	common: {
-		//any config
-	},
-	development: {
-		//any config
-	},
-	production: {
-		//any config
-	}
+ entry: [
+  "./src/main.ts"
+ ],
+ output: {
+  path: path.resolve(__dirname, './dist'),
+  fileName: 'bundle',
+  hash: true,
+  // Use this if you want to control hashing for js and css separately
+  hash: {
+   js: true,
+   css: false
+  }
+ },
+ preset: "vue-typescript",
+ bob: {
+  name: 'MicroService',
+  html: '<div id=\"MicroServicePlaceholder\"></div>',
+  baseURL: '/dist',
+  defer: ['style'],
+  dllPackages: [
+   {
+    name: "package-dll",
+    manifest: require("@studyportals/package-dll/dist/manifest.json")
+   }
+  ]
+ },
+ common: {
+  //any config
+ },
+ //needed for webpack-dev-server configuration
+ staticPath: path.join(__dirname, "."),
+ production: {
+  //any config
+ }
 });
 ```
 
@@ -129,29 +105,32 @@ 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.
+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
+### Setup
+
 To configure the functionality you can provide an object following this interface
+
 ```js
 interface IChunksRetryPluginConfig {
-	inject: boolean; //if you want the plugin injected
+ inject: boolean; //if you want the plugin injected
 
-	threshold: number; //amount of retries
+ 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
+ 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'
+ 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
+ disableDefaultRollbarError?: boolean; //if you don't want to log by default when the threshold has been reached
 }
 ```
 
@@ -159,20 +138,23 @@ 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")`,
-	},
-	...
+ 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
@@ -185,41 +167,43 @@ The entrypoint for your webpack bundle. This can either be configured as an obje
 
 ```javascript
 entry: [
-	"./src/main.ts"
+ "./src/main.ts"
 ]
 
 //or
 
 entry: {
-	bundle: "./src/main.ts"
+ bundle: "./src/main.ts"
 }
 ```
 
-### Working with packaged components & libraries 
+### Working with packaged components & libraries
 
 When working with packaged components and libraries it is required to keep the bundle name in line with the major version of the package. This helps to prevent reference issues when multiple versions of a package load on a single page.
 
 ```javascript
 // version 1
 entry: {
-	multiselect_v1: "./src/main.ts"
+ multiselect_v1: "./src/main.ts"
 }
 
 // version 2
 entry: {
-	multiselect_v2: "./src/main.ts"
+ multiselect_v2: "./src/main.ts"
 }
 ```
+
 #### DLL
 
 When working with a packaged component as a DLL, both the JS bundle and CSS bundle from the core package must be referenced, as below:
+
 ```javascript
 
 entry: {
-	multiselect_v2: [
-		'@studyportals/multiselect/dist/multiselect.js',
-		'@studyportals/multiselect/dist/multiselect.css'
-	]
+ multiselect_v2: [
+  '@studyportals/multiselect/dist/multiselect.js',
+  '@studyportals/multiselect/dist/multiselect.css'
+ ]
 }
 
 ```
@@ -237,17 +221,17 @@ The output object has some options that define how your bundle will be output. I
 
 ```javascript
 output: {
-	path: path.resolve(__dirname, './dist'),
-	library: 'test-microservice',
-	publicPath: '/assets/',
-	fileName: 'application',
-	crossOriginLoading: 'anonymous',
-	hash: false,
-	//or
-	hash: {
-		js: true,
-		css: false
-	}
+ path: path.resolve(__dirname, './dist'),
+ library: 'test-microservice',
+ publicPath: '/assets/',
+ fileName: 'application',
+ crossOriginLoading: 'anonymous',
+ hash: false,
+ //or
+ hash: {
+  js: true,
+  css: false
+ }
 }
 ```
 
@@ -273,17 +257,17 @@ The bob object adds all necessary configuration to have your project generate a
 
 ```javascript
 bob: {
-	name: 'MicroService',
-	html: '<div id=\"MicroServicePlaceholder\"></div>',
-	baseURL: '/dist',
-	defer: ['style'],
-	exclude: ['demo-assets'],
-	dllPackages: [
-		{
-			name: "package-dll",
-			manifest: require("@studyportals/package-dll/dist/manifest.json")
-		}
-	]
+ name: 'MicroService',
+ html: '<div id=\"MicroServicePlaceholder\"></div>',
+ baseURL: '/dist',
+ defer: ['style'],
+ exclude: ['demo-assets'],
+ dllPackages: [
+  {
+   name: "package-dll",
+   manifest: require("@studyportals/package-dll/dist/manifest.json")
+  }
+ ]
 }
 ```
 
@@ -293,6 +277,16 @@ WebpackHelper uses [BobManifestGenerator](https://github.com/studyportals/BobMan
 
 Extra Webpack configuration to be used for all environments can be passed in the `common` object. This configuration needs to adhere to Webpack's configuration interface and will be merged in with the other configuration through [webpack-merge](https://github.com/survivejs/webpack-merge).
 
+### staticPath **(required)**
+
+Your configuration must include the following
+
+```javascript
+ staticPath: path.join(__dirname, "."),
+```
+
+No Extra configuration is needed for the webpack-dev-server
+
 ### development
 
 Extra Webpack configuration to be used for all development builds can be passed in the `development` object. This configuration needs to adhere to Webpack's configuration interface and will be merged in with the other configuration through [webpack-merge](https://github.com/survivejs/webpack-merge).

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@studyportals/webpack-helper",
-  "version": "7.0.0-2",
+  "version": "7.0.0-3",
   "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": "sudo cp ./assets/.browserslistrc ../../../",
+    "postinstall": "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": [

package/src/defaults/development.config.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DevelopmentConfig = void 0;
-const DevelopmentConfig = (staticPath) => ({
+const path = require('path');
+const process = require('process');
+exports.DevelopmentConfig = {
     optimization: {
         minimize: false
     },
@@ -19,7 +21,6 @@ const DevelopmentConfig = (staticPath) => ({
             "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
             "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
         },
-        static: staticPath
+        static: path.join(process.cwd(), "."),
     }
-});
-exports.DevelopmentConfig = DevelopmentConfig;
+};

package/src/model/configuration.js

@@ -35,7 +35,7 @@ class Configuration {
         const configDev = options[mode_1.Mode.DEVELOPMENT] ? options[mode_1.Mode.DEVELOPMENT] : {};
         const configPrd = options[mode_1.Mode.PRODUCTION] ? options[mode_1.Mode.PRODUCTION] : {};
         this.environmentSpecificConfig = {
-            [mode_1.Mode.DEVELOPMENT]: merge([configDev, (0, development_config_1.DevelopmentConfig)(options.staticPath)]) || (0, development_config_1.DevelopmentConfig)(options.staticPath),
+            [mode_1.Mode.DEVELOPMENT]: merge([configDev, development_config_1.DevelopmentConfig]) || development_config_1.DevelopmentConfig,
             [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]";