Modernize build chain

package.json

@@ -19,6 +19,7 @@
   ],
   "author": "Oliver Tacke",
   "license": "MIT",
+  "type": "module",
   "devDependencies": {
     "@babel/cli": "^7.23.0",
     "@babel/core": "^7.23.0",

src/entries/dist.js

@@ -1,4 +1,4 @@
-import GameMap from '../scripts/h5p-game-map';
+import GameMap from '@scripts/h5p-game-map.js';
 
 // Load library
 H5P.GameMap = GameMap;

src/scripts/components/confirmation-dialog/confirmation-dialog.js

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

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

@@ -1,6 +1,6 @@
-import FocusTrap from '@services/focus-trap';
-import Util from '@services/util';
-import TimerDisplay from './timer-display';
+import FocusTrap from '@services/focus-trap.js';
+import Util from '@services/util.js';
+import TimerDisplay from './timer-display.js';
 import './exercise-screen.scss';
 
 /** Class representing an exercise screen */

src/scripts/components/main.js

@@ -1,12 +1,12 @@
-import CallbackQueue from '@services/callback-queue';
-import Util from '@services/util';
-import MainAudio from './mixins/main-audio';
-import MainInitialization from './mixins/main-initialization';
-import MainHandlersStage from './mixins/main-handlers-stage';
-import MainHandlersExercise from './mixins/main-handlers-exercise';
-import MainHandlersExerciseScreen from './mixins/main-handlers-exercise-screen';
-import MainQuestionTypeContract from './mixins/main-question-type-contract';
-import MainUserConfirmation from './mixins/main-user-confirmation';
+import CallbackQueue from '@services/callback-queue.js';
+import Util from '@services/util.js';
+import MainAudio from './mixins/main-audio.js';
+import MainInitialization from './mixins/main-initialization.js';
+import MainHandlersStage from './mixins/main-handlers-stage.js';
+import MainHandlersExercise from './mixins/main-handlers-exercise.js';
+import MainHandlersExerciseScreen from './mixins/main-handlers-exercise-screen.js';
+import MainQuestionTypeContract from './mixins/main-question-type-contract.js';
+import MainUserConfirmation from './mixins/main-user-confirmation.js';
 import './main.scss';
 
 /**

src/scripts/components/map/map.js

@@ -1,5 +1,5 @@
-import Util from '@services/util';
-import Path from './path';
+import Util from '@services/util.js';
+import Path from './path.js';
 import './map.scss';
 
 export default class Map {

src/scripts/components/map/path.js

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

src/scripts/components/map/stage/label.js

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

src/scripts/components/map/stage/stage.js

@@ -1,6 +1,6 @@
 import Color from 'color';
-import Util from '@services/util';
-import Label from './label';
+import Util from '@services/util.js';
+import Label from './label.js';
 import './stage.scss';
 
 export default class Stage {

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

@@ -1,4 +1,4 @@
-import MediaScreen from './media-screen';
+import MediaScreen from './media-screen.js';
 import './end-screen.scss';
 
 /** Class representing the end screen */

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/media-screen/start-screen.js

@@ -1,4 +1,4 @@
-import MediaScreen from './media-screen';
+import MediaScreen from './media-screen.js';
 import './start-screen.scss';
 
 /** Class representing the start screen */

src/scripts/components/mixins/main-initialization.js

@@ -1,12 +1,12 @@
-import Paths from '@models/paths';
-import Stages from '@models/stages';
-import StartScreen from '@components/media-screen/start-screen';
-import EndScreen from '@components/media-screen/end-screen';
-import Map from '@components/map/map';
-import Toolbar from '@components/toolbar/toolbar';
-import Exercises from '@models/exercises';
-import ExerciseScreen from '@components/exercise-screen/exercise-screen';
-import ConfirmationDialog from '@components/confirmation-dialog/confirmation-dialog';
+import Paths from '@models/paths.js';
+import Stages from '@models/stages.js';
+import StartScreen from '@components/media-screen/start-screen.js';
+import EndScreen from '@components/media-screen/end-screen.js';
+import Map from '@components/map/map.js';
+import Toolbar from '@components/toolbar/toolbar.js';
+import Exercises from '@models/exercises.js';
+import ExerciseScreen from '@components/exercise-screen/exercise-screen.js';
+import ConfirmationDialog from '@components/confirmation-dialog/confirmation-dialog.js';
 
 /**
  * Mixin containing main init stuff.

src/scripts/components/toolbar/status-containers/status-container.js

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

src/scripts/components/toolbar/status-containers/status-containers.js

@@ -1,5 +1,5 @@
-import Util from '@services/util';
-import StatusContainer from './status-container';
+import Util from '@services/util.js';
+import StatusContainer from './status-container.js';
 import './status-containers.scss';
 
 export default class StatusContainers {

src/scripts/components/toolbar/toolbar-button.js

@@ -1,5 +1,5 @@
+import Util from '@services/util.js';
 import './toolbar-button.scss';
-import Util from '@services/util';
 
 export default class ToolbarButton {
   /**

src/scripts/components/toolbar/toolbar.js

@@ -1,6 +1,6 @@
-import StatusContainers from './status-containers/status-containers';
-import ToolbarButton from './toolbar-button';
-import Util from '@services/util';
+import StatusContainers from './status-containers/status-containers.js';
+import ToolbarButton from './toolbar-button.js';
+import Util from '@services/util.js';
 import './toolbar.scss';
 
 /** Class representing the button bar */

src/scripts/h5p-game-map.js

@@ -1,13 +1,13 @@
-import H5PUtil from '@services/h5p-util';
-import Util from '@services/util';
-import Dictionary from '@services/dictionary';
-import Globals from '@services/globals';
-import Jukebox from '@services/jukebox';
-import Main from '@components/main';
+import H5PUtil from '@services/h5p-util.js';
+import Util from '@services/util.js';
+import Dictionary from '@services/dictionary.js';
+import Globals from '@services/globals.js';
+import Jukebox from '@services/jukebox.js';
+import Main from '@components/main.js';
+import MessageBox from '@components/messageBox/message-box.js';
+import QuestionTypeContract from '@mixins/question-type-contract.js';
+import XAPI from '@mixins/xapi.js';
 import '@styles/h5p-game-map.scss';
-import MessageBox from '@components/messageBox/message-box';
-import QuestionTypeContract from '@mixins/question-type-contract';
-import XAPI from '@mixins/xapi';
 
 export default class GameMap extends H5P.Question {
   /**

src/scripts/mixins/xapi.js

@@ -1,4 +1,4 @@
-import Util from '@services/util';
+import Util from '@services/util.js';
 
 /**
  * Mixin containing methods for xapi stuff.

src/scripts/models/exercise.js

@@ -1,6 +1,6 @@
-import Timer from '@services/timer';
-import H5PUtil from '@services/h5p-util';
-import Util from '@services/util';
+import Timer from '@services/timer.js';
+import H5PUtil from '@services/h5p-util.js';
+import Util from '@services/util.js';
 
 export default class Exercise {
 

src/scripts/models/exercises.js

@@ -1,5 +1,5 @@
-import Util from '@services/util';
-import Exercise from '@models/exercise';
+import Util from '@services/util.js';
+import Exercise from '@models/exercise.js';
 
 export default class Exercises {
 

src/scripts/models/paths.js

@@ -1,5 +1,5 @@
-import Util from '@services/util';
-import Path from '@components/map/path';
+import Util from '@services/util.js';
+import Path from '@components/map/path.js';
 
 export default class Paths {
 

src/scripts/models/stages.js

@@ -1,5 +1,5 @@
-import Util from '@services/util';
-import Stage from '@components/map/stage/stage';
+import Util from '@services/util.js';
+import Stage from '@components/map/stage/stage.js';
 
 export default class Stages {
 

src/scripts/services/timer.js

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

webpack.config.js

@@ -1,22 +1,28 @@
-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';
+  'production' :
+  'development';
 const libraryName = process.env.npm_package_name;
 
-module.exports = {
+export default {
   mode: mode,
   resolve: {
     alias: {
-      '@assets': path.resolve(__dirname, 'src/assets'),
-      '@components': path.resolve(__dirname, 'src/scripts/components'),
-      '@mixins': path.resolve(__dirname, 'src/scripts/mixins'),
-      '@models': path.resolve(__dirname, 'src/scripts/models'),
-      '@root': path.resolve(__dirname, './'),
-      '@services': path.resolve(__dirname, 'src/scripts/services'),
-      '@styles': path.resolve(__dirname, 'src/styles')
+      '@assets': _resolve(__dirname, 'src/assets'),
+      '@components': _resolve(__dirname, 'src/scripts/components'),
+      '@mixins': _resolve(__dirname, 'src/scripts/mixins'),
+      '@models': _resolve(__dirname, 'src/scripts/models'),
+      '@root': _resolve(__dirname, './'),
+      '@scripts': _resolve(__dirname, 'src/scripts'),
+      '@services': _resolve(__dirname, 'src/scripts/services'),
+      '@styles': _resolve(__dirname, 'src/styles')
     }
   },
   optimization: {
@@ -41,7 +47,7 @@ module.exports = {
   },
   output: {
     filename: `${libraryName}.js`,
-    path: path.resolve(__dirname, 'dist'),
+    path: _resolve(__dirname, 'dist'),
     clean: true
   },
   target: ['browserslist'],
@@ -71,12 +77,12 @@ module.exports = {
       },
       {
         test: /\.svg|\.jpg|\.png$/,
-        include: path.join(__dirname, 'src/assets/images'),
+        include: join(__dirname, 'src/images'),
         type: 'asset/resource'
       },
       {
         test: /\.woff$/,
-        include: path.join(__dirname, 'src/assetsfonts'),
+        include: join(__dirname, 'src/fonts'),
         type: 'asset/resource'
       }
     ]