Remove __non_webpack_require__ workaround and split Node dependencies correctly (#48154)

* Remove __non_webpack_require__ workaround and split Node dependencies correctly

Author: BrennanConroy

src/SignalR/clients/ts/signalr/package.json

@@ -59,5 +59,14 @@
   },
   "resolutions": {
     "ansi-regex": "5.0.1"
+  },
+  "browser": {
+    "./src/DynamicImports.ts": "./src/DynamicImports.browser.ts",
+    "abort-controller": false,
+    "eventsource": false,
+    "fetch-cookie": false,
+    "node-fetch": false,
+    "ws": false,
+    "tough-cookie": false
   }
 }

src/SignalR/clients/ts/signalr/src/DynamicImports.browser.ts

@@ -0,0 +1,22 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+/** @private */
+export function configureFetch(): boolean {
+    return false;
+}
+
+/** @private */
+export function configureAbortController(): boolean {
+    return false;
+}
+
+/** @private */
+export function getWS(): any {
+    throw new Error("Trying to import 'ws' in the browser.");
+}
+
+/** @private */
+export function getEventSource(): any {
+    throw new Error("Trying to import 'eventsource' in the browser.");
+}

src/SignalR/clients/ts/signalr/src/DynamicImports.ts

@@ -0,0 +1,54 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+// @ts-ignore: This will be removed from built files and is here to make the types available during dev work
+import { CookieJar } from "@types/tough-cookie";
+import { Platform } from "./Utils";
+
+/** @private */
+export function configureFetch(obj: { _fetchType?: (input: RequestInfo, init?: RequestInit) => Promise<Response>,
+                               _jar?: CookieJar }): boolean
+{
+    // Node added a fetch implementation to the global scope starting in v18.
+    // We need to add a cookie jar in node to be able to share cookies with WebSocket
+    if (typeof fetch === "undefined" || Platform.isNode) {
+        // Cookies aren't automatically handled in Node so we need to add a CookieJar to preserve cookies across requests
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        obj._jar = new (require("tough-cookie")).CookieJar();
+
+        if (typeof fetch === "undefined") {
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            obj._fetchType = require("node-fetch");
+        } else {
+            // Use fetch from Node if available
+            obj._fetchType = fetch;
+        }
+
+        // node-fetch doesn't have a nice API for getting and setting cookies
+        // fetch-cookie will wrap a fetch implementation with a default CookieJar or a provided one
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        obj._fetchType = require("fetch-cookie")(obj._fetchType, obj._jar);
+        return true;
+    }
+    return false;
+}
+
+/** @private */
+export function configureAbortController(obj: { _abortControllerType: { prototype: AbortController, new(): AbortController } }): boolean {
+    if (typeof AbortController === "undefined") {
+        // Node needs EventListener methods on AbortController which our custom polyfill doesn't provide
+        obj._abortControllerType = require("abort-controller");
+        return true;
+    }
+    return false;
+}
+
+/** @private */
+export function getWS(): any {
+    return require("ws");
+}
+
+/** @private */
+export function getEventSource(): any {
+    return require("eventsource");
+}

src/SignalR/clients/ts/signalr/src/FetchHttpClient.ts

@@ -8,6 +8,7 @@ import { AbortError, HttpError, TimeoutError } from "./Errors";
 import { HttpClient, HttpRequest, HttpResponse } from "./HttpClient";
 import { ILogger, LogLevel } from "./ILogger";
 import { Platform, getGlobalThis, isArrayBuffer } from "./Utils";
+import { configureAbortController, configureFetch } from "./DynamicImports";
 
 export class FetchHttpClient extends HttpClient {
     private readonly _abortControllerType: { prototype: AbortController, new(): AbortController };
@@ -20,38 +21,19 @@ export class FetchHttpClient extends HttpClient {
         super();
         this._logger = logger;
 
-        // Node added a fetch implementation to the global scope starting in v18.
-        // We need to add a cookie jar in node to be able to share cookies with WebSocket
-        if (typeof fetch === "undefined" || Platform.isNode) {
-            // In order to ignore the dynamic require in webpack builds we need to do this magic
-            // @ts-ignore: TS doesn't know about these names
-            const requireFunc = typeof __webpack_require__ === "function" ? __non_webpack_require__ : require;
-
-            // Cookies aren't automatically handled in Node so we need to add a CookieJar to preserve cookies across requests
-            this._jar = new (requireFunc("tough-cookie")).CookieJar();
-
-            if (typeof fetch === "undefined") {
-                this._fetchType = requireFunc("node-fetch");
-            } else {
-                // Use fetch from Node if available
-                this._fetchType = fetch;
-            }
-
-            // node-fetch doesn't have a nice API for getting and setting cookies
-            // fetch-cookie will wrap a fetch implementation with a default CookieJar or a provided one
-            this._fetchType = requireFunc("fetch-cookie")(this._fetchType, this._jar);
+        // This is how you do "reference" arguments
+        const fetchObj = { _fetchType: undefined, _jar: undefined };
+        if (configureFetch(fetchObj)) {
+            this._fetchType = fetchObj._fetchType!;
+            this._jar = fetchObj._jar;
         } else {
             this._fetchType = fetch.bind(getGlobalThis());
         }
-        if (typeof AbortController === "undefined") {
-            // In order to ignore the dynamic require in webpack builds we need to do this magic
-            // @ts-ignore: TS doesn't know about these names
-            const requireFunc = typeof __webpack_require__ === "function" ? __non_webpack_require__ : require;
 
-            // Node needs EventListener methods on AbortController which our custom polyfill doesn't provide
-            this._abortControllerType = requireFunc("abort-controller");
-        } else {
-            this._abortControllerType = AbortController;
+        this._abortControllerType = AbortController;
+        const abortObj = { _abortControllerType: this._abortControllerType };
+        if (configureAbortController(abortObj)) {
+            this._abortControllerType = abortObj._abortControllerType;
         }
     }
 

src/SignalR/clients/ts/signalr/src/HttpConnection.ts

@@ -3,6 +3,7 @@
 
 import { AccessTokenHttpClient } from "./AccessTokenHttpClient";
 import { DefaultHttpClient } from "./DefaultHttpClient";
+import { getEventSource, getWS } from "./DynamicImports";
 import { AggregateErrors, DisabledTransportError, FailedToNegotiateWithServerError, FailedToStartTransportError, HttpError, UnsupportedTransportError, AbortError } from "./Errors";
 import { IConnection } from "./IConnection";
 import { IHttpConnectionOptions } from "./IHttpConnectionOptions";
@@ -86,11 +87,8 @@ export class HttpConnection implements IConnection {
         let eventSourceModule: any = null;
 
         if (Platform.isNode && typeof require !== "undefined") {
-            // In order to ignore the dynamic require in webpack builds we need to do this magic
-            // @ts-ignore: TS doesn't know about these names
-            const requireFunc = typeof __webpack_require__ === "function" ? __non_webpack_require__ : require;
-            webSocketModule = requireFunc("ws");
-            eventSourceModule = requireFunc("eventsource");
+            webSocketModule = getWS();
+            eventSourceModule = getEventSource();
         }
 
         if (!Platform.isNode && typeof WebSocket !== "undefined" && !options.WebSocket) {