refactor: extract types and convert logger modules to TypeScript

client-src/index.ts

@@ -585,13 +585,8 @@ const formatURL = (objURL: {
     hash = `#${hash}`;
   }
 
-  pathname = pathname.replace(
-    /[?#]/g,
-    /**
-     * @param {string} match
-     * @returns {string}
-     */
-    (match) => encodeURIComponent(match),
+  pathname = pathname.replace(/[?#]/g, (match: string): string =>
+    encodeURIComponent(match),
   );
   search = search.replace('#', '%23');
 

client-src/modules/logger/Logger.js → client-src/modules/logger/Logger.ts

@@ -8,93 +8,54 @@
  * https://github.com/webpack/webpack-dev-server/blob/main/LICENSE
  */
 
-// @ts-nocheck
-
-'use strict';
-
-const LogType = Object.freeze({
-  error: /** @type {"error"} */ ('error'), // message, c style arguments
-  warn: /** @type {"warn"} */ ('warn'), // message, c style arguments
-  info: /** @type {"info"} */ ('info'), // message, c style arguments
-  log: /** @type {"log"} */ ('log'), // message, c style arguments
-  debug: /** @type {"debug"} */ ('debug'), // message, c style arguments
-
-  trace: /** @type {"trace"} */ ('trace'), // no arguments
-
-  group: /** @type {"group"} */ ('group'), // [label]
-  groupCollapsed: /** @type {"groupCollapsed"} */ ('groupCollapsed'), // [label]
-  groupEnd: /** @type {"groupEnd"} */ ('groupEnd'), // [label]
-
-  profile: /** @type {"profile"} */ ('profile'), // [profileName]
-  profileEnd: /** @type {"profileEnd"} */ ('profileEnd'), // [profileName]
-
-  time: /** @type {"time"} */ ('time'), // name, time as [seconds, nanoseconds]
-
-  clear: /** @type {"clear"} */ ('clear'), // no arguments
-  status: /** @type {"status"} */ ('status'), // message, arguments
-});
-
-module.exports.LogType = LogType;
-
-/** @typedef {typeof LogType[keyof typeof LogType]} LogTypeEnum */
-/** @typedef {Map<string | undefined, [number, number]>} TimersMap */
+import {
+  LogType,
+  type Args,
+  type EXPECTED_ANY,
+  type LogTypeEnum,
+  type TimersMap,
+} from '../types';
 
 const LOG_SYMBOL = Symbol('webpack logger raw log method');
 const TIMERS_SYMBOL = Symbol('webpack logger times');
 const TIMERS_AGGREGATES_SYMBOL = Symbol('webpack logger aggregated times');
 
-/** @typedef {EXPECTED_ANY[]} Args */
-
 class WebpackLogger {
-  /**
-   * @param {(type: LogTypeEnum, args?: Args) => void} log log function
-   * @param {(name: string | (() => string)) => WebpackLogger} getChildLogger function to create child logger
-   */
-  constructor(log, getChildLogger) {
+  private [LOG_SYMBOL]: (type: LogTypeEnum, args?: Args) => void;
+  private [TIMERS_SYMBOL]: TimersMap = new Map();
+  private [TIMERS_AGGREGATES_SYMBOL]: TimersMap = new Map();
+  // @ts-ignore
+  private getChildLogger: (name: string | (() => string)) => WebpackLogger;
+
+  constructor(
+    log: (type: LogTypeEnum, args?: Args) => void,
+    getChildLogger: (name: string | (() => string)) => WebpackLogger,
+  ) {
     this[LOG_SYMBOL] = log;
     this.getChildLogger = getChildLogger;
   }
 
-  /**
-   * @param {Args} args args
-   */
-  error(...args) {
+  error(...args: Args) {
     this[LOG_SYMBOL](LogType.error, args);
   }
 
-  /**
-   * @param {Args} args args
-   */
-  warn(...args) {
+  warn(...args: Args) {
     this[LOG_SYMBOL](LogType.warn, args);
   }
 
-  /**
-   * @param {Args} args args
-   */
-  info(...args) {
+  info(...args: Args) {
     this[LOG_SYMBOL](LogType.info, args);
   }
 
-  /**
-   * @param {Args} args args
-   */
-  log(...args) {
+  log(...args: Args) {
     this[LOG_SYMBOL](LogType.log, args);
   }
 
-  /**
-   * @param {Args} args args
-   */
-  debug(...args) {
+  debug(...args: Args) {
     this[LOG_SYMBOL](LogType.debug, args);
   }
 
-  /**
-   * @param {EXPECTED_ANY} assertion assertion
-   * @param {Args} args args
-   */
-  assert(assertion, ...args) {
+  assert(assertion: EXPECTED_ANY, ...args: Args) {
     if (!assertion) {
       this[LOG_SYMBOL](LogType.error, args);
     }
@@ -108,58 +69,36 @@ class WebpackLogger {
     this[LOG_SYMBOL](LogType.clear);
   }
 
-  /**
-   * @param {Args} args args
-   */
-  status(...args) {
+  status(...args: Args) {
     this[LOG_SYMBOL](LogType.status, args);
   }
 
-  /**
-   * @param {Args} args args
-   */
-  group(...args) {
+  group(...args: Args) {
     this[LOG_SYMBOL](LogType.group, args);
   }
 
-  /**
-   * @param {Args} args args
-   */
-  groupCollapsed(...args) {
+  groupCollapsed(...args: Args) {
     this[LOG_SYMBOL](LogType.groupCollapsed, args);
   }
 
   groupEnd() {
     this[LOG_SYMBOL](LogType.groupEnd);
   }
 
-  /**
-   * @param {string=} label label
-   */
-  profile(label) {
+  profile(label?: string) {
     this[LOG_SYMBOL](LogType.profile, [label]);
   }
 
-  /**
-   * @param {string=} label label
-   */
-  profileEnd(label) {
+  profileEnd(label?: string) {
     this[LOG_SYMBOL](LogType.profileEnd, [label]);
   }
 
-  /**
-   * @param {string} label label
-   */
-  time(label) {
-    /** @type {TimersMap} */
+  time(label: string) {
     this[TIMERS_SYMBOL] = this[TIMERS_SYMBOL] || new Map();
     this[TIMERS_SYMBOL].set(label, process.hrtime());
   }
 
-  /**
-   * @param {string=} label label
-   */
-  timeLog(label) {
+  timeLog(label?: string) {
     const prev = this[TIMERS_SYMBOL] && this[TIMERS_SYMBOL].get(label);
     if (!prev) {
       throw new Error(`No such label '${label}' for WebpackLogger.timeLog()`);
@@ -168,34 +107,26 @@ class WebpackLogger {
     this[LOG_SYMBOL](LogType.time, [label, ...time]);
   }
 
-  /**
-   * @param {string=} label label
-   */
-  timeEnd(label) {
+  timeEnd(label?: string) {
     const prev = this[TIMERS_SYMBOL] && this[TIMERS_SYMBOL].get(label);
     if (!prev) {
       throw new Error(`No such label '${label}' for WebpackLogger.timeEnd()`);
     }
     const time = process.hrtime(prev);
     /** @type {TimersMap} */
-    (this[TIMERS_SYMBOL]).delete(label);
+    this[TIMERS_SYMBOL].delete(label);
     this[LOG_SYMBOL](LogType.time, [label, ...time]);
   }
 
-  /**
-   * @param {string=} label label
-   */
-  timeAggregate(label) {
+  timeAggregate(label?: string) {
     const prev = this[TIMERS_SYMBOL] && this[TIMERS_SYMBOL].get(label);
     if (!prev) {
       throw new Error(
         `No such label '${label}' for WebpackLogger.timeAggregate()`,
       );
     }
     const time = process.hrtime(prev);
-    /** @type {TimersMap} */
-    (this[TIMERS_SYMBOL]).delete(label);
-    /** @type {TimersMap} */
+    this[TIMERS_SYMBOL].delete(label);
     this[TIMERS_AGGREGATES_SYMBOL] =
       this[TIMERS_AGGREGATES_SYMBOL] || new Map();
     const current = this[TIMERS_AGGREGATES_SYMBOL].get(label);
@@ -211,10 +142,7 @@ class WebpackLogger {
     this[TIMERS_AGGREGATES_SYMBOL].set(label, time);
   }
 
-  /**
-   * @param {string=} label label
-   */
-  timeAggregateEnd(label) {
+  timeAggregateEnd(label?: string) {
     if (this[TIMERS_AGGREGATES_SYMBOL] === undefined) return;
     const time = this[TIMERS_AGGREGATES_SYMBOL].get(label);
     if (time === undefined) return;
@@ -223,4 +151,4 @@ class WebpackLogger {
   }
 }
 
-module.exports.Logger = WebpackLogger;
+export { WebpackLogger as Logger };

client-src/modules/logger/createConsoleLogger.js → client-src/modules/logger/createConsoleLogger.ts

@@ -8,54 +8,19 @@
  * https://github.com/webpack/webpack-dev-server/blob/main/LICENSE
  */
 
-// @ts-nocheck
-/*
-	MIT License http://www.opensource.org/licenses/mit-license.php
-	Author Tobias Koppers @sokra
-*/
+import {
+  LogType,
+  type Args,
+  type FilterFunction,
+  type FilterItemTypes,
+  type LoggerOptions,
+  type LoggingFunction,
+  type LogTypeEnum,
+} from '../types';
 
-'use strict';
-
-const { LogType } = require('./Logger');
-
-/** @typedef {import("../../declarations/WebpackOptions").FilterItemTypes} FilterItemTypes */
-/** @typedef {import("../../declarations/WebpackOptions").FilterTypes} FilterTypes */
-/** @typedef {import("./Logger").LogTypeEnum} LogTypeEnum */
-/** @typedef {import("./Logger").Args} Args */
-
-/** @typedef {(item: string) => boolean} FilterFunction */
-/** @typedef {(value: string, type: LogTypeEnum, args?: Args) => void} LoggingFunction */
-
-/**
- * @typedef {object} LoggerConsole
- * @property {() => void} clear
- * @property {() => void} trace
- * @property {(...args: Args) => void} info
- * @property {(...args: Args) => void} log
- * @property {(...args: Args) => void} warn
- * @property {(...args: Args) => void} error
- * @property {(...args: Args) => void=} debug
- * @property {(...args: Args) => void=} group
- * @property {(...args: Args) => void=} groupCollapsed
- * @property {(...args: Args) => void=} groupEnd
- * @property {(...args: Args) => void=} status
- * @property {(...args: Args) => void=} profile
- * @property {(...args: Args) => void=} profileEnd
- * @property {(...args: Args) => void=} logTime
- */
-
-/**
- * @typedef {object} LoggerOptions
- * @property {false | true | "none" | "error" | "warn" | "info" | "log" | "verbose"} level loglevel
- * @property {FilterTypes | boolean} debug filter for debug logging
- * @property {LoggerConsole} console the console to log to
- */
-
-/**
- * @param {FilterItemTypes} item an input item
- * @returns {FilterFunction | undefined} filter function
- */
-const filterToFunction = (item) => {
+const filterToFunction = (
+  item: FilterItemTypes,
+): FilterFunction | undefined => {
   if (typeof item === 'string') {
     const regExp = new RegExp(
       `[\\\\/]${item.replace(/[-[\]{}()*+?.\\^$|]/g, '\\$&')}([\\\\/]|$|!|\\?)`,
@@ -73,10 +38,7 @@ const filterToFunction = (item) => {
   }
 };
 
-/**
- * @enum {number}
- */
-const LogLevel = {
+const LogLevel: Record<string, number> = {
   none: 6,
   false: 6,
   error: 5,
@@ -87,29 +49,19 @@ const LogLevel = {
   verbose: 1,
 };
 
-/**
- * @param {LoggerOptions} options options object
- * @returns {LoggingFunction} logging function
- */
-module.exports = ({ level = 'info', debug = false, console }) => {
-  const debugFilters =
-    /** @type {FilterFunction[]} */
-    (
-      typeof debug === 'boolean'
-        ? [() => debug]
-        : /** @type {FilterItemTypes[]} */ ([
-            ...(Array.isArray(debug) ? debug : [debug]),
-          ]).map(filterToFunction)
-    );
+export default ({
+  level = 'info',
+  debug = false,
+  console,
+}: LoggerOptions): LoggingFunction => {
+  const debugFilters = (
+    typeof debug === 'boolean'
+      ? [() => debug]
+      : [...(Array.isArray(debug) ? debug : [debug])].map(filterToFunction)
+  ) as FilterFunction[];
   const loglevel = LogLevel[`${level}`] || 0;
 
-  /**
-   * @param {string} name name of the logger
-   * @param {LogTypeEnum} type type of the log entry
-   * @param {Args=} args arguments of the log entry
-   * @returns {void}
-   */
-  const logger = (name, type, args) => {
+  const logger = (name: string, type: LogTypeEnum, args?: Args): void => {
     const labeledArgs = () => {
       if (Array.isArray(args)) {
         if (args.length > 0 && typeof args[0] === 'string') {
@@ -176,9 +128,7 @@ module.exports = ({ level = 'info', debug = false, console }) => {
         break;
       case LogType.time: {
         if (!debug && loglevel > LogLevel.log) return;
-        const [label, start, end] =
-          /** @type {[string, number, number]} */
-          (args);
+        const [label, start, end] = args as [string, number, number];
         const ms = start * 1000 + end / 1000000;
         const msg = `[${name}] ${label}: ${ms} ms`;
         if (typeof console.logTime === 'function') {

client-src/modules/logger/index.js → client-src/modules/logger/index.ts

@@ -8,6 +8,4 @@
  * https://github.com/webpack/webpack-dev-server/blob/main/LICENSE
  */
 
-// @ts-nocheck
-// @ts-expect-error
 export { default } from './runtime';