refactor: use bonjour-service (#4310)

* refactor: use `bonjour-service`

* test: refactor

* refactor: code

* test: fix

* fix: improve types

Author: snitin315

lib/Server.js

@@ -29,8 +29,8 @@ const schema = require("./options.json");
 /** @typedef {import("chokidar").WatchOptions} WatchOptions */
 /** @typedef {import("chokidar").FSWatcher} FSWatcher */
 /** @typedef {import("connect-history-api-fallback").Options} ConnectHistoryApiFallbackOptions */
-/** @typedef {import("bonjour").Bonjour} Bonjour */
-/** @typedef {import("bonjour").BonjourOptions} BonjourOptions */
+/** @typedef {import("bonjour-service").Bonjour} Bonjour */
+/** @typedef {import("bonjour-service").Service} BonjourOptions */
 /** @typedef {import("http-proxy-middleware").RequestHandler} RequestHandler */
 /** @typedef {import("http-proxy-middleware").Options} HttpProxyMiddlewareOptions */
 /** @typedef {import("http-proxy-middleware").Filter} HttpProxyMiddlewareOptionsFilter */
@@ -188,7 +188,7 @@ const schema = require("./options.json");
  * @property {"auto" | "all" | string | string[]} [allowedHosts]
  * @property {boolean | ConnectHistoryApiFallbackOptions} [historyApiFallback]
  * @property {boolean} [setupExitSignals]
- * @property {boolean | BonjourOptions} [bonjour]
+ * @property {boolean | Record<string, never> | BonjourOptions} [bonjour]
  * @property {string | string[] | WatchFiles | Array<string | WatchFiles>} [watchFiles]
  * @property {boolean | string | Static | Array<string | Static>} [static]
  * @property {boolean | ServerOptions} [https]
@@ -2594,14 +2594,18 @@ class Server {
    * @returns {void}
    */
   runBonjour() {
+    const { Bonjour } = require("bonjour-service");
     /**
      * @private
-     * @type {import("bonjour").Bonjour | undefined}
+     * @type {Bonjour | undefined}
      */
-    this.bonjour = require("bonjour")();
+    this.bonjour = new Bonjour();
     this.bonjour.publish({
+      // @ts-expect-error
       name: `Webpack Dev Server ${os.hostname()}:${this.options.port}`,
+      // @ts-expect-error
       port: /** @type {number} */ (this.options.port),
+      // @ts-expect-error
       type:
         /** @type {ServerConfiguration} */
         (this.options.server).type === "http" ? "http" : "https",