chore: upgrade to webpack@5

package.json

@@ -4,8 +4,8 @@
   "description": "Web client for scrcpy and more",
   "scripts": {
     "clean": "npx rimraf dist",
-    "dist:dev": "webpack --config webpack/ws-scrcpy.dev.ts --env.config_override='./build.config.override.json'",
-    "dist:prod": "webpack --config webpack/ws-scrcpy.prod.ts --env.config_override='./build.config.override.json'",
+    "dist:dev": "webpack --config webpack/ws-scrcpy.dev.ts --stats-error-details",
+    "dist:prod": "webpack --config webpack/ws-scrcpy.prod.ts --stats-error-details",
     "dist": "npm run dist:prod",
     "start": "npm run dist && cd dist && npm start",
     "script:dist:start": "node ./index.js",
@@ -30,11 +30,9 @@
     "@types/bluebird": "^3.5.36",
     "@types/dom-webcodecs": "^0.1.3",
     "@types/express": "^4.17.13",
-    "@types/mini-css-extract-plugin": "^0.9.1",
     "@types/node": "^12.20.47",
     "@types/node-forge": "^0.10.0",
     "@types/npmlog": "^4.1.4",
-    "@types/webpack": "^4.41.32",
     "@types/webpack-node-externals": "^2.5.3",
     "@types/ws": "^7.4.7",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
@@ -49,21 +47,22 @@
     "file-loader": "^6.2.0",
     "generate-package-json-webpack-plugin": "^2.6.0",
     "h264-converter": "^0.1.4",
-    "html-webpack-plugin": "^4.5.2",
+    "html-webpack-plugin": "^5.5.0",
     "ifdef-loader": "^2.3.2",
-    "mini-css-extract-plugin": "^0.11.2",
+    "mini-css-extract-plugin": "^2.6.1",
     "mkdirp": "^1.0.4",
+    "path-browserify": "^1.0.1",
     "prettier": "^2.6.2",
     "recursive-copy": "^2.0.14",
     "rimraf": "^3.0.0",
     "svg-inline-loader": "^0.8.2",
     "sylvester.js": "^0.1.1",
     "tinyh264": "^0.0.7",
-    "ts-loader": "^8.3.0",
-    "ts-node": "^9.1.1",
-    "typescript": "^3.9.10",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
+    "ts-loader": "^9.3.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.7.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
     "webpack-node-externals": "^2.5.2",
     "worker-loader": "^3.0.8",
     "xterm": "^4.5.0",

src/app/Util.ts

@@ -29,11 +29,44 @@ export default class Util {
         return 'udid_' + udid.replace(/[. :]/g, '_');
     }
 
-    public static parseBooleanEnv(input: string | string[] | boolean | undefined): boolean | undefined {
+    public static parse(params: URLSearchParams, name: string, required?: boolean): string | null {
+        const value = params.get(name);
+        if (required && value === null) {
+            throw TypeError(`Missing required parameter "${name}"`);
+        }
+        return value;
+    }
+
+    public static parseString(params: URLSearchParams, name: string, required?: boolean): string {
+        const value = params.get(name);
+        if (required && value === null) {
+            throw TypeError(`Missing required parameter "${name}"`);
+        }
+        return value || '';
+    }
+
+    public static parseBoolean(params: URLSearchParams, name: string, required?: boolean): boolean {
+        const value = this.parse(params, name, required);
+        return value === '1' || (!!value && value.toString() === 'true');
+    }
+
+    public  static parseInt(params: URLSearchParams, name: string, required?: boolean): number {
+        const value = this.parse(params, name, required);
+        if (value === null) {
+            return 0;
+        }
+        const int = parseInt(value, 10);
+        if (isNaN(int)) {
+            return 0;
+        }
+        return int;
+    }
+
+    public static parseBooleanEnv(input: string | string[] | boolean | undefined | null): boolean | undefined {
         if (typeof input === 'boolean') {
             return input;
         }
-        if (typeof input === 'undefined') {
+        if (typeof input === 'undefined' || input === null) {
             return undefined;
         }
         if (Array.isArray(input)) {
@@ -42,20 +75,20 @@ export default class Util {
         return input === '1' || input.toLowerCase() === 'true';
     }
 
-    public static parseStringEnv(input: string | string[] | undefined): string {
-        if (typeof input === 'undefined') {
-            return '';
+    public static parseStringEnv(input: string | string[] | undefined | null): string | undefined {
+        if (typeof input === 'undefined' || input === null) {
+            return undefined;
         }
         if (Array.isArray(input)) {
             input = input[input.length - 1];
         }
         return input;
     }
-    public static parseIntEnv(input: string | string[] | number | undefined): number | undefined {
+    public static parseIntEnv(input: string | string[] | number | undefined | null): number | undefined {
         if (typeof input === 'number') {
             return input;
         }
-        if (typeof input === 'undefined') {
+        if (typeof input === 'undefined' || input === null) {
             return undefined;
         }
         if (Array.isArray(input)) {
@@ -172,11 +205,15 @@ export default class Util {
             window.addEventListener('testPassive', null, opts);
             // @ts-ignore
             window.removeEventListener('testPassive', null, opts);
-        } catch (e) {}
+        } catch (error: any) {}
 
         return Util.supportsPassiveValue = supportsPassive;
 
         // Use our detect's results. passive applied if supported, capture will be false either way.
         // elem.addEventListener('touchstart', fn, supportsPassive ? { passive: true } : false);
     }
+
+    static setImmediate(fn: () => any): void {
+        Promise.resolve().then(fn);
+    }
 }

src/app/applDevice/client/StreamClient.ts

@@ -4,7 +4,6 @@ import { SimpleInteractionHandler } from '../../interactionHandler/SimpleInterac
 import { BasePlayer, PlayerClass } from '../../player/BasePlayer';
 import ScreenInfo from '../../ScreenInfo';
 import { WdaProxyClient } from './WdaProxyClient';
-import { ParsedUrlQuery, ParsedUrlQueryInput } from 'querystring';
 import { ACTION } from '../../../common/Action';
 import { ApplMoreBox } from '../toolbox/ApplMoreBox';
 import { ApplToolBox } from '../toolbox/ApplToolBox';
@@ -71,7 +70,7 @@ export abstract class StreamClient<T extends ParamsStream> extends BaseClient<T,
             playerTd.classList.add(blockClass);
             playerTd.setAttribute(DeviceTracker.AttributePlayerFullName, encodeURIComponent(playerFullName));
             playerTd.setAttribute(DeviceTracker.AttributePlayerCodeName, encodeURIComponent(playerCodeName));
-            const q: ParsedUrlQueryInput = {
+            const q: any = {
                 action: this.ACTION,
                 player: playerCodeName,
                 udid: descriptor.udid,
@@ -104,7 +103,7 @@ export abstract class StreamClient<T extends ParamsStream> extends BaseClient<T,
     protected moreBox?: HTMLElement;
     protected player?: BasePlayer;
 
-    protected constructor(params: ParsedUrlQuery | T) {
+    protected constructor(params: T) {
         super(params);
         this.udid = this.params.udid;
         this.wdaProxy = new WdaProxyClient({ ...this.params, action: ACTION.PROXY_WDA });
@@ -114,11 +113,11 @@ export abstract class StreamClient<T extends ParamsStream> extends BaseClient<T,
         this.setWdaStatusNotification(WdaStatus.STARTING);
     }
 
-    public get action(): string {
+    public static get action(): string {
         return StreamClient.ACTION;
     }
 
-    public parseParameters(params: ParsedUrlQuery): ParamsStream {
+    public static parseParameters(params: URLSearchParams): ParamsStream {
         const typedParams = super.parseParameters(params);
         const { action } = typedParams;
         if (action !== this.action) {
@@ -127,8 +126,8 @@ export abstract class StreamClient<T extends ParamsStream> extends BaseClient<T,
         return {
             ...typedParams,
             action,
-            udid: Util.parseStringEnv(params.udid),
-            player: Util.parseStringEnv(params.player),
+            udid: Util.parseString(params, 'udid', true),
+            player: Util.parseString(params, 'player', true),
         };
     }
 

src/app/applDevice/client/StreamClientMJPEG.ts

@@ -1,6 +1,5 @@
 import { ParamsStream } from '../../../types/ParamsStream';
 import { ACTION } from '../../../common/Action';
-import { ParsedUrlQuery } from 'querystring';
 import { StreamClient } from './StreamClient';
 import { BasePlayer, PlayerClass } from '../../player/BasePlayer';
 import { WdaStatus } from '../../../common/WdaStatus';
@@ -12,11 +11,11 @@ export class StreamClientMJPEG extends StreamClient<ParamsStream> {
     public static ACTION = ACTION.STREAM_MJPEG;
     protected static players: Map<string, PlayerClass> = new Map<string, PlayerClass>();
 
-    public static start(params: ParsedUrlQuery | ParamsStream): StreamClientMJPEG {
+    public static start(params: ParamsStream): StreamClientMJPEG {
         return new StreamClientMJPEG(params);
     }
 
-    constructor(params: ParsedUrlQuery | ParamsStream) {
+    constructor(params: ParamsStream) {
         super(params);
         this.name = `[${TAG}:${this.udid}]`;
         this.udid = this.params.udid;
@@ -33,7 +32,7 @@ export class StreamClientMJPEG extends StreamClient<ParamsStream> {
         });
     }
 
-    public get action(): string {
+    public static get action(): string {
         return StreamClientMJPEG.ACTION;
     }
 

src/app/applDevice/client/StreamClientQVHack.ts

@@ -1,7 +1,6 @@
 import { StreamReceiver } from '../../client/StreamReceiver';
 import { BasePlayer, PlayerClass } from '../../player/BasePlayer';
 import { ACTION } from '../../../common/Action';
-import { ParsedUrlQuery } from 'querystring';
 import { StreamReceiverQVHack } from './StreamReceiverQVHack';
 import { StreamClient } from './StreamClient';
 import { ParamsStream } from '../../../types/ParamsStream';
@@ -12,13 +11,13 @@ export class StreamClientQVHack extends StreamClient<ParamsStream> {
     public static ACTION = ACTION.STREAM_WS_QVH;
     protected static players: Map<string, PlayerClass> = new Map<string, PlayerClass>();
 
-    public static start(params: ParsedUrlQuery | ParamsStream): StreamClientQVHack {
+    public static start(params: ParamsStream): StreamClientQVHack {
         return new StreamClientQVHack(params);
     }
 
     private readonly streamReceiver: StreamReceiver<ParamsStream>;
 
-    constructor(params: ParsedUrlQuery | ParamsStream) {
+    constructor(params: ParamsStream) {
         super(params);
 
         this.name = `[${TAG}:${this.udid}]`;
@@ -35,7 +34,7 @@ export class StreamClientQVHack extends StreamClient<ParamsStream> {
         this.setBodyClass('stream');
     }
 
-    public get action(): string {
+    public static get action(): string {
         return StreamClientQVHack.ACTION;
     }
 

src/app/applDevice/client/StreamReceiverQVHack.ts

@@ -1,12 +1,11 @@
 import { StreamReceiver } from '../../client/StreamReceiver';
-import { ParsedUrlQuery } from 'querystring';
 import { ACTION } from '../../../common/Action';
 import Util from '../../Util';
 import { ParamsStream } from '../../../types/ParamsStream';
 import { ChannelCode } from '../../../common/ChannelCode';
 
 export class StreamReceiverQVHack extends StreamReceiver<ParamsStream> {
-    public parseParameters(params: ParsedUrlQuery): ParamsStream {
+    public static parseParameters(params: URLSearchParams): ParamsStream {
         const typedParams = super.parseParameters(params);
         const { action } = typedParams;
         if (action !== ACTION.STREAM_WS_QVH) {
@@ -15,8 +14,8 @@ export class StreamReceiverQVHack extends StreamReceiver<ParamsStream> {
         return {
             ...typedParams,
             action,
-            player: Util.parseStringEnv(params.player),
-            udid: Util.parseStringEnv(params.udid),
+            player: Util.parseString(params, 'player', true),
+            udid: Util.parseString(params, 'udid', true),
         };
     }
 

src/app/applDevice/client/WdaProxyClient.ts

@@ -3,7 +3,6 @@ import { MessageRunWdaResponse } from '../../../types/MessageRunWdaResponse';
 import { Message } from '../../../types/Message';
 import { ControlCenterCommand } from '../../../common/ControlCenterCommand';
 import { ParamsWdaProxy } from '../../../types/ParamsWdaProxy';
-import { ParsedUrlQuery } from 'querystring';
 import { ACTION } from '../../../common/Action';
 import Util from '../../Util';
 import { ChannelCode } from '../../../common/ChannelCode';
@@ -43,7 +42,8 @@ const TAG = '[WdaProxyClient]';
 
 export class WdaProxyClient
     extends ManagerClient<ParamsWdaProxy, WdaProxyClientEvents>
-    implements TouchHandlerListener {
+    implements TouchHandlerListener
+{
     public static calculatePhysicalPoint(
         screenInfo: ScreenInfo,
         screenWidth: number,
@@ -93,27 +93,27 @@ export class WdaProxyClient
         this.udid = params.udid;
     }
 
-    public parseParameters(params: ParsedUrlQuery): ParamsWdaProxy {
+    public static parseParameters(params: URLSearchParams): ParamsWdaProxy {
         const typedParams = super.parseParameters(params);
         const { action } = typedParams;
         if (action !== ACTION.PROXY_WDA) {
             throw Error('Incorrect action');
         }
-        return { ...typedParams, action, udid: Util.parseStringEnv(params.udid) };
+        return { ...typedParams, action, udid: Util.parseString(params, 'udid', true) };
     }
 
-    protected onSocketClose(e: CloseEvent): void {
+    protected onSocketClose(event: CloseEvent): void {
         this.emit('connected', false);
-        console.log(TAG, `Connection closed: ${e.reason}`);
+        console.log(TAG, `Connection closed: ${event.reason}`);
         if (!this.stopped) {
             setTimeout(() => {
                 this.openNewConnection();
             }, 2000);
         }
     }
 
-    protected onSocketMessage(e: MessageEvent): void {
-        new Response(e.data)
+    protected onSocketMessage(event: MessageEvent): void {
+        new Response(event.data)
             .text()
             .then((text: string) => {
                 const json = JSON.parse(text) as Message;
@@ -134,7 +134,7 @@ export class WdaProxyClient
             })
             .catch((error: Error) => {
                 console.error(TAG, error.message);
-                console.log(TAG, e.data);
+                console.log(TAG, event.data);
             });
     }
 

src/app/client/BaseClient.ts

@@ -1,24 +1,27 @@
 import { TypedEmitter } from '../../common/TypedEmitter';
 import { ParamsBase } from '../../types/ParamsBase';
-import { ParsedUrlQuery } from 'querystring';
 import Util from '../Util';
 
 export class BaseClient<P extends ParamsBase, TE> extends TypedEmitter<TE> {
     protected title = 'BaseClient';
     protected params: P;
 
-    protected constructor(query: ParsedUrlQuery | P) {
+    protected constructor(params: P) {
         super();
-        this.params = this.parseParameters(query) as P;
+        this.params = params;
     }
 
-    protected parseParameters(query: ParsedUrlQuery | P): ParamsBase {
+    public static parseParameters(query: URLSearchParams): ParamsBase {
+        const action = Util.parseStringEnv(query.get('action'));
+        if (!action) {
+            throw TypeError('Invalid action');
+        }
         return {
-            action: Util.parseStringEnv(query.action),
-            useProxy: Util.parseBooleanEnv(query.useProxy),
-            secure: Util.parseBooleanEnv(query.secure),
-            hostname: Util.parseStringEnv(query.hostname),
-            port: Util.parseIntEnv(query.port),
+            action: action,
+            useProxy: Util.parseBooleanEnv(query.get('useProxy')),
+            secure: Util.parseBooleanEnv(query.get('secure')),
+            hostname: Util.parseStringEnv(query.get('hostname')),
+            port: Util.parseIntEnv(query.get('port')),
         };
     }