Update build chain

package.json

@@ -19,28 +19,28 @@
   ],
   "author": "Oliver Tacke, Lumenia AS",
   "license": "MIT",
+  "type": "module",
   "devDependencies": {
-    "@babel/cli": "^7.22.5",
-    "@babel/core": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
-    "babel-loader": "^9.1.2",
+    "@babel/cli": "^7.22.10",
+    "@babel/core": "^7.22.10",
+    "@babel/preset-env": "^7.22.10",
+    "babel-loader": "^9.1.3",
     "css-loader": "^6.8.1",
-    "eslint": "^8.43.0",
-    "eslint-plugin-jsdoc": "^46.2.6",
+    "eslint": "^8.47.0",
+    "eslint-plugin-jsdoc": "^46.4.6",
     "mini-css-extract-plugin": "^2.7.6",
-    "regenerator-runtime": "^0.13.11",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.63.5",
+    "sass": "^1.65.1",
     "sass-loader": "^13.3.2",
-    "stylelint": "^15.8.0",
-    "stylelint-config-recommended": "^12.0.0",
+    "stylelint": "^15.10.2",
+    "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-recommended-scss": "^12.0.0",
-    "webpack": "^5.87.0",
+    "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
     "color": "^4.2.3",
     "he": "^1.2.0"
   },
-  "browserslist": "> 0.5%, last 2 versions, Firefox ESR, not dead"
+  "browserslist": "> 0.5%, last 3 versions, Firefox ESR, not dead"
 }

src/entries/dist.js

@@ -1,4 +1,4 @@
-import PersonalityQuiz from '@scripts/h5p-personality-quiz';
+import PersonalityQuiz from '@scripts/h5p-personality-quiz.js';
 
 // Load library
 H5P.PersonalityQuiz = PersonalityQuiz;

src/scripts/components/content.js

@@ -1,9 +1,9 @@
-import Util from '@services/util';
-import MediaScreen from '@components/media-screen/media-screen';
-import MessageBoxHint from '@components/message-box/message-box-hint';
-import QuestionScreen from '@components/question-screen/question-screen';
-import ResultScreen from '@components/result-screen/result-screen';
-import WheelOfFortune from '@components/wheel-of-fortune/wheel-of-fortune';
+import Util from '@services/util.js';
+import MediaScreen from '@components/media-screen/media-screen.js';
+import MessageBoxHint from '@components/message-box/message-box-hint.js';
+import QuestionScreen from '@components/question-screen/question-screen.js';
+import ResultScreen from '@components/result-screen/result-screen.js';
+import WheelOfFortune from '@components/wheel-of-fortune/wheel-of-fortune.js';
 
 export default class Content {
 

src/scripts/components/media-screen/media-screen.js

@@ -1,4 +1,4 @@
-import Util from '@services/util';
+import Util from '@services/util.js';
 import './media-screen.scss';
 
 /** Class representing a media screen */

src/scripts/components/message-box/message-box-hint.js

@@ -1,4 +1,4 @@
-import MessageBox from './message-box';
+import MessageBox from './message-box.js';
 import './message-box-hint.scss';
 
 export default class MessageBoxHint extends MessageBox {

src/scripts/components/question-screen/panel/option.js

@@ -1,4 +1,4 @@
-import Util from '@services/util';
+import Util from '@services/util.js';
 import './option.scss';
 
 export default class Option {

src/scripts/components/question-screen/panel/panel.js

@@ -1,4 +1,4 @@
-import Util from '@services/util';
+import Util from '@services/util.js';
 import Option from './option.js';
 import './panel.scss';
 

src/scripts/components/question-screen/progress-bar/progress-bar.js

@@ -1,4 +1,4 @@
-import Util from '@services/util';
+import Util from '@services/util.js';
 import Color from 'color';
 import './progress-bar.scss';
 

src/scripts/components/question-screen/question-screen.js

@@ -1,6 +1,6 @@
-import Util from '@services/util';
-import Panel from './panel/panel';
-import ProgressBar from './progress-bar/progress-bar';
+import Util from '@services/util.js';
+import Panel from './panel/panel.js';
+import ProgressBar from './progress-bar/progress-bar.js';
 import './question-screen.scss';
 
 export default class QuestionScreen {

src/scripts/components/result-screen/result-screen.js

@@ -1,4 +1,4 @@
-import Util from '@services/util';
+import Util from '@services/util.js';
 import './result-screen.scss';
 
 export default class ResultScreen {

src/scripts/components/wheel-of-fortune/wheel-of-fortune.js

@@ -1,4 +1,4 @@
-import Util from '@services/util';
+import Util from '@services/util.js';
 import Color from 'color';
 import './wheel-of-fortune.scss';
 

src/scripts/h5p-personality-quiz.js

@@ -1,11 +1,11 @@
-import Util from '@services/util';
-import Dictionary from '@services/dictionary';
-import Globals from '@services/globals';
-import Screenreader from '@services/screenreader';
-import Content from '@components/content';
-import QuestionTypeContract from '@mixins/question-type-contract';
-import Sanitization from '@mixins/sanitization';
-import XAPI from '@mixins/xapi';
+import Util from '@services/util.js';
+import Dictionary from '@services/dictionary.js';
+import Globals from '@services/globals.js';
+import Screenreader from '@services/screenreader.js';
+import Content from '@components/content.js';
+import QuestionTypeContract from '@mixins/question-type-contract.js';
+import Sanitization from '@mixins/sanitization.js';
+import XAPI from '@mixins/xapi.js';
 import Color from 'color';
 import '@styles/h5p-personality-quiz.scss';
 

webpack.config.js

@@ -1,21 +1,25 @@
-const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
+import { dirname, resolve as _resolve, join } from 'path';
+import { fileURLToPath } from 'url';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import TerserPlugin from 'terser-webpack-plugin'; // Provided by webpack
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 const mode = process.argv.includes('--mode=production') ?
   'production' :
   'development';
 const libraryName = process.env.npm_package_name;
 
-module.exports = {
+export default {
   mode: mode,
   resolve: {
     alias: {
-      '@components': path.resolve(__dirname, 'src/scripts/components'),
-      '@mixins': path.resolve(__dirname, 'src/scripts/mixins'),
-      '@scripts': path.resolve(__dirname, 'src/scripts'),
-      '@services': path.resolve(__dirname, 'src/scripts/services'),
-      '@styles': path.resolve(__dirname, 'src/styles')
+      '@components': _resolve(__dirname, 'src/scripts/components'),
+      '@mixins': _resolve(__dirname, 'src/scripts/mixins'),
+      '@scripts': _resolve(__dirname, 'src/scripts'),
+      '@services': _resolve(__dirname, 'src/scripts/services'),
+      '@styles': _resolve(__dirname, 'src/styles')
     }
   },
   optimization: {
@@ -40,7 +44,7 @@ module.exports = {
   },
   output: {
     filename: `${libraryName}.js`,
-    path: path.resolve(__dirname, 'dist'),
+    path: _resolve(__dirname, 'dist'),
     clean: true
   },
   target: ['browserslist'],
@@ -70,12 +74,12 @@ module.exports = {
       },
       {
         test: /\.svg|\.jpg|\.png$/,
-        include: path.join(__dirname, 'src/images'),
+        include: join(__dirname, 'src/images'),
         type: 'asset/resource'
       },
       {
         test: /\.woff$/,
-        include: path.join(__dirname, 'src/fonts'),
+        include: join(__dirname, 'src/fonts'),
         type: 'asset/resource'
       }
     ]