switch from require to import of modules and update webdav

config/webpack.base.js

@@ -1,8 +1,12 @@
-const webpack = require("webpack");
+import webpack from "webpack";
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+import { CleanWebpackPlugin } from "clean-webpack-plugin";
-const CopyPlugin = require("copy-webpack-plugin");
+import CopyPlugin from "copy-webpack-plugin";
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+import HtmlWebpackPlugin from "html-webpack-plugin";
-const path = require("path");
+import path from "path";
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const config = {
     entry: {
@@ -57,4 +61,4 @@ const config = {
     ],
 };
 
-module.exports = config;
+export { config as default };

config/webpack.build.js

@@ -1,7 +1,7 @@
-const { merge } = require("webpack-merge");
+import { merge } from "webpack-merge";
-const baseConfig = require("./webpack.base");
+import baseConfig from "./webpack.base.js"
 
-module.exports = merge(baseConfig, {
+export default merge(baseConfig, {
     mode: "production",
     performance: {
         hints: false,

config/webpack.dev.js

@@ -1,6 +1,7 @@
-const { merge } = require("webpack-merge");
+
-const baseConfig = require("./webpack.base");
+import baseConfig from "./webpack.base.js";
-const webpack = require("webpack");
+import { merge } from "webpack-merge";
+import webpack from "webpack";
 
 const devConfig = merge(baseConfig, {
     mode: "development",
@@ -11,4 +12,4 @@ const devConfig = merge(baseConfig, {
     plugins: [new webpack.NoEmitOnErrorsPlugin()].concat(baseConfig.plugins),
 });
 
-module.exports = devConfig;
+export { devConfig as default };

package.json

@@ -4,6 +4,7 @@
   "description": "Collaborative Whiteboard / Sketchboard",
   "main": "server.js",
   "directories": {},
+  "type": "module",
   "scripts": {
     "build": "webpack --config config/webpack.build.js",
     "start:dev": "apidoc -i scripts/ -o ./public/apidoc/ && node scripts/server.js --mode=development",
@@ -44,7 +45,7 @@
     "signature_pad": "^4.0.1",
     "socket.io-client": "^4.4.0",
     "uuid": "^8.1.0",
-    "webdav": "^4.8.0"
+    "webdav": "^5.3.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",

scripts/config/config.js

@@ -1,8 +1,8 @@
-const util = require("util");
+import util  from "util";
 
-const { getDefaultConfig, getConfig, deepMergeConfigs, isConfigValid } = require("./utils");
+import { getDefaultConfig, getConfig, deepMergeConfigs, isConfigValid } from "./utils.js"
 
-const { getArgs } = require("./../utils");
+import { getArgs } from "./../utils.js"
 
 const defaultConfig = getDefaultConfig();
 
@@ -80,4 +80,4 @@ if (!process.env.JEST_WORKER_ID) {
     console.info(util.inspect(config, { showHidden: false, depth: null, colors: true }));
 }
 
-module.exports = config;
+export { config as default };

scripts/config/utils.js

@@ -1,11 +1,16 @@
-const path = require("path");
+import path from "path";
-const fs = require("fs");
+import fs from "fs";
-const yaml = require("js-yaml");
+import yaml from "js-yaml";
 
-const Ajv = require("ajv");
+import Ajv from "ajv";
 const ajv = new Ajv({ allErrors: true });
 
-const configSchema = require("./config-schema.json");
+import configSchema from "./config-schema.json" assert { type: "json" };
+
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 /**
  * Load a yaml config file from a given path.
@@ -13,7 +18,7 @@ const configSchema = require("./config-schema.json");
  * @param path
  * @return {Object}
  */
-function getConfig(path) {
+export function getConfig(path) {
     return yaml.safeLoad(fs.readFileSync(path, "utf8"));
 }
 
@@ -24,7 +29,7 @@ function getConfig(path) {
  * @param {boolean} warn Should we warn in console for errors
  * @return {boolean}
  */
-function isConfigValid(config, warn = true) {
+export function isConfigValid(config, warn = true) {
     const validate = ajv.compile(configSchema);
     const isValidAgainstSchema = validate(config);
 
@@ -54,7 +59,7 @@ function isConfigValid(config, warn = true) {
  * Load the default project config
  * @return {Object}
  */
-function getDefaultConfig() {
+export function getDefaultConfig() {
     const defaultConfigPath = path.join(__dirname, "..", "..", "config.default.yml");
     return getConfig(defaultConfigPath);
 }
@@ -68,7 +73,7 @@ function getDefaultConfig() {
  * @param overrideConfig
  * @return {Object}
  */
-function deepMergeConfigs(baseConfig, overrideConfig) {
+export function deepMergeConfigs(baseConfig, overrideConfig) {
     const out = {};
 
     Object.entries(baseConfig).forEach(([key, val]) => {
@@ -85,8 +90,3 @@ function deepMergeConfigs(baseConfig, overrideConfig) {
 
     return out;
 }
-
-module.exports.getConfig = getConfig;
-module.exports.getDefaultConfig = getDefaultConfig;
-module.exports.deepMergeConfigs = deepMergeConfigs;
-module.exports.isConfigValid = isConfigValid;

scripts/s_whiteboard.js

@@ -1,7 +1,7 @@
 //This file is only for saving the whiteboard.
-const fs = require("fs");
+import fs from "fs";
-const config = require("./config/config");
+import config from "./config/config.js";
-const { getSafeFilePath } = require("./utils");
+import { getSafeFilePath } from "./utils.js";
 const FILE_DATABASE_FOLDER = "savedBoards";
 
 var savedBoards = {};
@@ -26,7 +26,7 @@ function fileDatabasePath(wid) {
     return getSafeFilePath(FILE_DATABASE_FOLDER, wid + ".json");
 }
 
-module.exports = {
+const s_whiteboard = {
     handleEventsAndData: function (content) {
         var tool = content["t"]; //Tool witch is used
         var wid = content["wid"]; //whiteboard ID
@@ -184,3 +184,6 @@ module.exports = {
         this.saveToDB(wid);
     },
 };
+
+export { s_whiteboard as default };
+

scripts/server-backend.js

@@ -1,29 +1,41 @@
-const path = require("path");
+import path from "path";
 
-const config = require("./config/config");
+import config from "./config/config.js";
-const ReadOnlyBackendService = require("./services/ReadOnlyBackendService");
+import ROBackendService from "./services/ReadOnlyBackendService.js";
-const WhiteboardInfoBackendService = require("./services/WhiteboardInfoBackendService");
+const ReadOnlyBackendService = new ROBackendService();
-const { getSafeFilePath } = require("./utils");
+import WBInfoBackendService from "./services/WhiteboardInfoBackendService.js";
+const WhiteboardInfoBackendService = new WBInfoBackendService();
 
-function startBackendServer(port) {
+import { getSafeFilePath } from "./utils.js";
-    var fs = require("fs-extra");
+
-    var express = require("express");
+import fs from "fs-extra";
-    var formidable = require("formidable"); //form upload processing
+import express from "express";
+import formidable from "formidable"; //form upload processing
+
+import createDOMPurify from "dompurify"; //Prevent xss
+import { JSDOM } from "jsdom";
+
+import { createClient } from "webdav";
+import s_whiteboard from "./s_whiteboard.js";
+
+import http from "http";
+import { Server } from "socket.io";
+
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default function startBackendServer(port) {
 
-    const createDOMPurify = require("dompurify"); //Prevent xss
-    const { JSDOM } = require("jsdom");
     const window = new JSDOM("").window;
     const DOMPurify = createDOMPurify(window);
 
-    const { createClient } = require("webdav");
-
-    var s_whiteboard = require("./s_whiteboard.js");
-
     var app = express();
 
-    var server = require("http").Server(app);
+    var server = http.Server(app);
     server.listen(port);
-    var io = require("socket.io")(server, { path: "/ws-api" });
+    var io = new Server(server, { path: "/ws-api" });
     WhiteboardInfoBackendService.start(io);
 
     console.log("socketserver running on port:" + port);
@@ -442,5 +454,3 @@ function startBackendServer(port) {
         console.log("unhandledRejection", error.message);
     });
 }
-
-module.exports = startBackendServer;

scripts/server-frontend-dev.js

@@ -1,3 +1,7 @@
+import webpack from "webpack";
+import WebpackDevServer from "webpack-dev-server";
+import config from "../config/webpack.dev.js";
+
 const devServerConfig = {
     hot: true,
     proxy: {
@@ -11,12 +15,7 @@ const devServerConfig = {
     },
 };
 
-function startFrontendDevServer(port) {
+export default function startFrontendDevServer(port) {
-    // require here to prevent prod dependency to webpack
-    const webpack = require("webpack");
-    const WebpackDevServer = require("webpack-dev-server");
-    const config = require("../config/webpack.dev");
-
     new WebpackDevServer(webpack(config), devServerConfig).start(port, (err) => {
         if (err) {
             console.log(err);
@@ -25,5 +24,3 @@ function startFrontendDevServer(port) {
         console.log("Listening on port " + port);
     });
 }
-
-module.exports = startFrontendDevServer;

scripts/server.js

@@ -1,6 +1,7 @@
-const { getArgs } = require("./utils");
+
-const startFrontendDevServer = require("./server-frontend-dev");
+import { getArgs } from "./utils.js";
-const startBackendServer = require("./server-backend");
+import startFrontendDevServer from "./server-frontend-dev.js";
+import startBackendServer from "./server-backend.js";
 
 const SERVER_MODES = {
     PRODUCTION: 1,

scripts/services/ReadOnlyBackendService.js

@@ -1,6 +1,6 @@
-const { v4: uuidv4 } = require("uuid");
+import { v4 as uuidv4 } from "uuid";
 
-class ReadOnlyBackendService {
+export default class ReadOnlyBackendService {
     /**
      * Mapping from an editable whiteboard id to the matching read-only whiteboard id
      * @type {Map<string, string>}
@@ -69,5 +69,3 @@ class ReadOnlyBackendService {
         return this._readOnlyIdToId.has(whiteboardId);
     }
 }
-
-module.exports = new ReadOnlyBackendService();

scripts/services/WhiteboardInfoBackendService.js

@@ -1,10 +1,11 @@
-const config = require("../config/config");
+import config from "../config/config.js";
-const ReadOnlyBackendService = require("./ReadOnlyBackendService");
+import ROnlyBackendService from "./ReadOnlyBackendService.js";
+const ReadOnlyBackendService = new ROnlyBackendService()
 
 /**
  * Class to hold information related to a whiteboard
  */
-class WhiteboardInfo {
+export class WhiteboardInfo {
     static defaultScreenResolution = { w: 1000, h: 1000 };
 
     /**
@@ -107,7 +108,7 @@ class WhiteboardInfo {
 /**
  * Wrapper class around map to treat both the editable whiteboard and its read-only version the same
  */
-class InfoByWhiteBoardMap extends Map {
+export class InfoByWhiteBoardMap extends Map {
     get(wid) {
         const readOnlyId = ReadOnlyBackendService.getReadOnlyId(wid);
         return super.get(readOnlyId);
@@ -129,7 +130,7 @@ class InfoByWhiteBoardMap extends Map {
     }
 }
 
-class WhiteboardInfoBackendService {
+export default class WhiteboardInfoBackendService {
     /**
      * @type {Map<string, WhiteboardInfo>}
      */
@@ -239,5 +240,3 @@ class WhiteboardInfoBackendService {
         else return null;
     }
 }
-
-module.exports = new WhiteboardInfoBackendService();

scripts/utils.js

@@ -1,6 +1,6 @@
-const path = require("path");
+import path from "path";
 
-const getArgs = function () {
+export function getArgs  () {
     const args = {};
     process.argv.slice(2, process.argv.length).forEach((arg) => {
         // long arg
@@ -28,7 +28,7 @@ const getArgs = function () {
  * @return {string} A safe to use path combined of rootPath and singleFileSegment
  * @throws {Error} If singleFileSegment contains potentially unsafe directory characters or path information
  */
-const getSafeFilePath = function (rootPath, singleFileSegment) {
+export function getSafeFilePath (rootPath, singleFileSegment) {
     var filePath = path.join(rootPath, singleFileSegment);
     if (
         (path.dirname(filePath) !== rootPath &&
@@ -45,8 +45,3 @@ const getSafeFilePath = function (rootPath, singleFileSegment) {
     }
     return filePath;
 };
-
-module.exports = {
-    getArgs,
-    getSafeFilePath,
-};

src/js/classes/Point.js

@@ -1,4 +1,4 @@
-import { computeDist } from "../utils";
+import { computeDist } from "../utils.js";
 
 class Point {
     /**

src/js/index.js

@@ -1,21 +1,17 @@
-import "jquery-ui/ui/core";
+import "jquery-ui/ui/core.js";
-import "jquery-ui/ui/widgets/draggable";
+import "jquery-ui/ui/widgets/draggable.js";
-import "jquery-ui/ui/widgets/resizable";
+import "jquery-ui/ui/widgets/resizable.js";
-import "jquery-ui-rotatable/jquery.ui.rotatable";
+import "jquery-ui-rotatable/jquery.ui.rotatable.js";
 import "jquery-ui/themes/base/resizable.css";
 import "../css/main.css";
 
-import "./icons";
+import "./icons.js";
-import main from "./main";
+import main from "./main.js";
 
-$(document).ready(function () {
+$(function () {
     $("head").append(
         '<meta name="viewport" content="width=device-width, initial-scale=0.52, maximum-scale=1" />'
     );
 
     main();
 });
-
-if (module.hot) {
-    module.hot.accept();
-}

src/js/main.js

@@ -1,17 +1,17 @@
 import keymage from "keymage";
 import { io } from "socket.io-client";
-import whiteboard from "./whiteboard";
+import whiteboard from "./whiteboard.js";
-import keybinds from "./keybinds";
+import keybinds from "./keybinds.js";
 import Picker from "vanilla-picker";
 import { dom } from "@fortawesome/fontawesome-svg-core";
-import shortcutFunctions from "./shortcutFunctions";
+import shortcutFunctions from "./shortcutFunctions.js";
-import ReadOnlyService from "./services/ReadOnlyService";
+import ReadOnlyService from "./services/ReadOnlyService.js";
-import InfoService from "./services/InfoService";
+import InfoService from "./services/InfoService.js";
-import { getSubDir } from "./utils";
+import { getSubDir } from "./utils.js";
-import ConfigService from "./services/ConfigService";
+import ConfigService from "./services/ConfigService.js";
 import { v4 as uuidv4 } from "uuid";
 
-const pdfjsLib = require("pdfjs-dist");
+import pdfjsLib from "pdfjs-dist"
 
 const urlParams = new URLSearchParams(window.location.search);
 let whiteboardId = urlParams.get("whiteboardid");
@@ -171,7 +171,7 @@ function initWhiteboard() {
         // request whiteboard from server
         $.get(subdir + "/api/loadwhiteboard", { wid: whiteboardId, at: accessToken }).done(
             function (data) {
-                console.log(data);
+                //console.log(data);
                 whiteboard.loadData(data);
                 if (copyfromwid && data.length == 0) {
                     //Copy from witheboard if current is empty and get parameter is given

src/js/services/ConfigService.js

@@ -1,4 +1,4 @@
-import { getThrottling } from "./ConfigService.utils";
+import { getThrottling } from "./ConfigService.utils.js";
 
 /**
  * Class to hold the configuration sent by the backend

src/js/services/InfoService.js

@@ -1,4 +1,4 @@
-import ConfigService from "./ConfigService";
+import ConfigService from "./ConfigService.js";
 
 /**
  * Class the handle the information about the whiteboard

src/js/services/ReadOnlyService.js

@@ -1,4 +1,4 @@
-import ConfigService from "./ConfigService";
+import ConfigService from "./ConfigService.js";
 
 /**
  * Class the handle the read-only logic

src/js/services/ThrottlingService.js

@@ -1,6 +1,6 @@
-import Point from "../classes/Point";
+import Point from "../classes/Point.js";
-import { getCurrentTimeMs } from "../utils";
+import { getCurrentTimeMs } from "../utils.js";
-import ConfigService from "./ConfigService";
+import ConfigService from "./ConfigService.js";
 
 /**
  * Class to handle all the throttling logic

src/js/shortcutFunctions.js

@@ -1,5 +1,5 @@
-import whiteboard from "./whiteboard";
+import whiteboard from "./whiteboard.js";
-import ReadOnlyService from "./services/ReadOnlyService";
+import ReadOnlyService from "./services/ReadOnlyService.js";
 
 /**
  * @param {function} callback

src/js/whiteboard.js

@@ -1,9 +1,9 @@
 import { dom } from "@fortawesome/fontawesome-svg-core";
-import Point from "./classes/Point";
+import Point from "./classes/Point.js";
-import ReadOnlyService from "./services/ReadOnlyService";
+import ReadOnlyService from "./services/ReadOnlyService.js";
-import InfoService from "./services/InfoService";
+import InfoService from "./services/InfoService.js";
-import ThrottlingService from "./services/ThrottlingService";
+import ThrottlingService from "./services/ThrottlingService.js";
-import ConfigService from "./services/ConfigService";
+import ConfigService from "./services/ConfigService.js";
 import html2canvas from "html2canvas";
 import DOMPurify from "dompurify";