Merge pull request #1040 from thecodingmachine/webpack5

Upgrading all dependencies in front

.github/workflows/continuous_integration.yml

@@ -49,7 +49,7 @@ jobs:
       - name: "Build"
         run: yarn run build
         env:
-          API_URL: "localhost:8080"
+          PUSHER_URL: "//localhost:8080"
         working-directory: "front"
 
       - name: "Lint"

front/.eslintrc.json

@@ -25,6 +25,15 @@
     ],
     "rules": {
         "no-unused-vars": "off",
-        "@typescript-eslint/no-explicit-any": "error"
+        "@typescript-eslint/no-explicit-any": "error",
+
+        // TODO: remove those ignored rules and write a stronger code!
+        "@typescript-eslint/no-floating-promises": "off",
+        "@typescript-eslint/no-unsafe-call": "off",
+        "@typescript-eslint/restrict-plus-operands": "off",
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/no-unsafe-return": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off",
+        "@typescript-eslint/restrict-template-expressions": "off"
     }
 }

front/package.json

@@ -7,22 +7,21 @@
     "@types/google-protobuf": "^3.7.3",
     "@types/jasmine": "^3.5.10",
     "@types/quill": "^1.3.7",
-    "@typescript-eslint/eslint-plugin": "^2.26.0",
-    "@typescript-eslint/parser": "^2.26.0",
-    "css-loader": "^5.1.3",
-    "eslint": "^6.8.0",
-    "html-webpack-plugin": "^4.3.0",
+    "@typescript-eslint/eslint-plugin": "^4.23.0",
+    "@typescript-eslint/parser": "^4.23.0",
+    "css-loader": "^5.2.4",
+    "eslint": "^7.26.0",
+    "html-webpack-plugin": "^5.3.1",
     "jasmine": "^3.5.0",
-    "mini-css-extract-plugin": "^1.3.9",
-    "sass": "^1.32.8",
-    "sass-loader": "10.1.1",
-    "ts-loader": "^6.2.2",
-    "ts-node": "^8.10.2",
-    "typescript": "^3.8.3",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
-    "webpack-merge": "^4.2.2"
+    "mini-css-extract-plugin": "^1.6.0",
+    "sass": "^1.32.12",
+    "sass-loader": "^11.1.0",
+    "ts-loader": "^9.1.2",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.2.4",
+    "webpack": "^5.37.0",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
     "@types/simple-peer": "^9.6.0",
@@ -36,12 +35,11 @@
     "quill": "1.3.6",
     "rxjs": "^6.6.3",
     "simple-peer": "^9.6.2",
-    "socket.io-client": "^2.3.0",
-    "webpack-require-http": "^0.4.3"
+    "socket.io-client": "^2.3.0"
   },
   "scripts": {
-    "start": "webpack-dev-server --open",
-    "build": "webpack --config webpack.prod.js",
+    "start": "webpack serve --open",
+    "build": "NODE_ENV=production webpack",
     "test": "ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
     "lint": "node_modules/.bin/eslint src/ . --ext .ts",
     "fix": "node_modules/.bin/eslint --fix src/ . --ext .ts"

front/src/Api/IframeListener.ts

@@ -1,6 +1,5 @@
 import { Subject } from "rxjs";
 import { ChatEvent, isChatEvent } from "./Events/ChatEvent";
-import * as crypto from "crypto";
 import { HtmlUtils } from "../WebRtc/HtmlUtils";
 import { EnterLeaveEvent } from "./Events/EnterLeaveEvent";
 import { isOpenPopupEvent, OpenPopupEvent } from "./Events/OpenPopupEvent";
@@ -176,7 +175,7 @@ class IframeListener {
     }
 
     private getIFrameId(scriptUrl: string): string {
-        return 'script' + crypto.createHash('md5').update(scriptUrl).digest("hex");
+        return 'script' + btoa(scriptUrl);
     }
 
     unregisterScript(scriptUrl: string): void {

front/src/Enum/EnvironmentVariable.ts

@@ -1,7 +1,6 @@
 const DEBUG_MODE: boolean = process.env.DEBUG_MODE == "true";
 const START_ROOM_URL : string = process.env.START_ROOM_URL || '/_/global/maps.workadventure.localhost/Floor0/floor0.json';
-// For compatibility reasons with older versions, API_URL is the old host name of PUSHER_URL
-const PUSHER_URL = process.env.PUSHER_URL || (process.env.API_URL ? '//'+process.env.API_URL : "//pusher.workadventure.localhost");
+const PUSHER_URL = process.env.PUSHER_URL || '//pusher.workadventure.localhost';
 const UPLOADER_URL = process.env.UPLOADER_URL || '//uploader.workadventure.localhost';
 const ADMIN_URL = process.env.ADMIN_URL || "//workadventure.localhost";
 const STUN_SERVER: string = process.env.STUN_SERVER || "stun:stun.l.google.com:19302";

front/src/Phaser/Game/GameScene.ts

@@ -151,7 +151,7 @@ export class GameScene extends DirtyScene implements CenterListener {
     private GlobalMessageManager!: GlobalMessageManager;
     public ConsoleGlobalMessageManager!: ConsoleGlobalMessageManager;
     private connectionAnswerPromise: Promise<RoomJoinedMessageInterface>;
-    private connectionAnswerPromiseResolve!: (value?: RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface>) => void;
+    private connectionAnswerPromiseResolve!: (value: RoomJoinedMessageInterface | PromiseLike<RoomJoinedMessageInterface>) => void;
     // A promise that will resolve when the "create" method is called (signaling loading is ended)
     private createPromise: Promise<void>;
     private createPromiseResolve!: (value?: void | PromiseLike<void>) => void;

front/src/WebRtc/CoWebsiteManager.ts

@@ -137,14 +137,14 @@ class CoWebsiteManager {
         if (allowPolicy) {
             iframe.allow = allowPolicy;
         }
-        const onloadPromise = new Promise((resolve) => {
+        const onloadPromise = new Promise<void>((resolve) => {
             iframe.onload = () => resolve();
         });
         if (allowApi) {
             iframeListener.registerIframe(iframe);
         }
         this.cowebsiteMainDom.appendChild(iframe);
-        const onTimeoutPromise = new Promise((resolve) => {
+        const onTimeoutPromise = new Promise<void>((resolve) => {
             setTimeout(() => resolve(), 2000);
         });
         this.currentOperationPromise = this.currentOperationPromise.then(() =>Promise.race([onloadPromise, onTimeoutPromise])).then(() => {

front/tsconfig.json

@@ -4,7 +4,7 @@
     "sourceMap": true,
     "moduleResolution": "node",
     "module": "CommonJS",
-    "target": "ES2015",
+    "target": "ES2017",
     "declaration": false,
     "downlevelIteration": true,
     "jsx": "react",

front/webpack.config.js

@@ -3,12 +3,17 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
+const mode = process.env.NODE_ENV ?? 'development';
+const isProduction = mode === 'production';
+const isDevelopment = !isProduction;
+
 module.exports = {
     entry: {
         'main': './src/index.ts',
         'iframe_api': './src/iframe_api.ts'
     },
-    devtool: 'inline-source-map',
+    mode: mode,
+    devtool: isDevelopment ? 'inline-source-map' : 'source-map',
     devServer: {
         contentBase: './dist',
         host: '0.0.0.0',
@@ -46,9 +51,9 @@ module.exports = {
         path: path.resolve(__dirname, 'dist'),
         publicPath: '/'
     },
-    externals:[
+    /*externals:[
         require('webpack-require-http')
-    ],
+    ],*/
     plugins: [
         new MiniCssExtractPlugin({filename: 'style.[contenthash].css'}),
         new HtmlWebpackPlugin(
@@ -81,7 +86,9 @@ module.exports = {
             'TURN_PASSWORD': null,
             'JITSI_URL': null,
             'JITSI_PRIVATE_MODE': null,
-            'START_ROOM_URL': null
+            'START_ROOM_URL': null,
+            'MAX_USERNAME_LENGTH': 8,
+            'MAX_PER_GROUP': 4
         })
     ],
 

front/webpack.prod.js

@@ -1,7 +0,0 @@
-const merge = require('webpack-merge');
-const common = require('./webpack.config.js');
-
-module.exports = merge(common, {
-  mode: 'production',
-  devtool: 'source-map'
-});