[Blazor] Update npm dependencies (#36088)

.azure/pipelines/jobs/default-build.yml

@@ -170,9 +170,9 @@ jobs:
         displayName: Start background dump collection
     - ${{ if eq(parameters.installNodeJs, 'true') }}:
       - task: NodeTool@0
-        displayName: Install Node 10.x
+        displayName: Install Node 14.x
         inputs:
-          versionSpec: 10.x
+          versionSpec: 14.x
     - ${{ if eq(parameters.agentOs, 'Windows') }}:
       - task: NuGetToolInstaller@1
       - task: NuGetCommand@2

eng/targets/Helix.props

@@ -20,7 +20,7 @@
     <IsMacHelixQueue Condition="$(HelixTargetQueue.Contains('OSX')) or $(HelixTargetQueue.Contains('macOs'))">true</IsMacHelixQueue>
     <HelixTestName>$(MSBuildProjectName)--$(TargetFramework)</HelixTestName>
     <LoggingTestingDisableFileLogging Condition="'$(IsHelixJob)' == 'true'">false</LoggingTestingDisableFileLogging>
-    <NodeVersion>10.15.3</NodeVersion>
+    <NodeVersion>14.17.6</NodeVersion>
     <TestDependsOnAspNetPackages>false</TestDependsOnAspNetPackages>
     <TestDependsOnAspNetRuntime>false</TestDependsOnAspNetRuntime>
   </PropertyGroup>

src/Components/Web.JS/package.json

@@ -18,27 +18,27 @@
     "test": "jest"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/preset-env": "^7.13.10",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
     "@microsoft/dotnet-js-interop": "link:../../JSInterop/Microsoft.JSInterop.JS/src",
     "@microsoft/signalr": "link:../../SignalR/clients/ts/signalr",
     "@microsoft/signalr-protocol-msgpack": "link:../../SignalR/clients/ts/signalr-protocol-msgpack",
-    "@types/emscripten": "^1.39.4",
-    "@types/jest": "^26.0.20",
-    "@types/jsdom": "^16.2.7",
-    "@typescript-eslint/eslint-plugin": "^4.17.0",
-    "@typescript-eslint/parser": "^4.17.0",
-    "babel-jest": "^26.6.3",
-    "eslint": "^7.21.0",
-    "inspectpack": "^4.6.1",
-    "jest": "^26.6.3",
+    "@types/emscripten": "^1.39.5",
+    "@types/jest": "^27.0.1",
+    "@types/jsdom": "^16.2.13",
+    "@typescript-eslint/eslint-plugin": "^4.29.3",
+    "@typescript-eslint/parser": "^4.29.3",
+    "babel-jest": "^27.1.0",
+    "eslint": "^7.32.0",
+    "inspectpack": "^4.7.1",
+    "jest": "^27.1.0",
     "rimraf": "^3.0.2",
-    "terser": "^5.6.0",
-    "ts-jest": "^26.5.3",
-    "ts-loader": "^8.0.17",
-    "typescript": "^4.2.3",
-    "webpack": "^5.24.4",
-    "webpack-cli": "^4.5.0"
+    "terser": "^5.7.2",
+    "ts-jest": "^27.0.5",
+    "ts-loader": "^9.2.5",
+    "typescript": "^4.4.2",
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.8.0"
   },
   "resolutions": {
     "**/set-value": "^3.0.2"

src/Components/Web.JS/src/Boot.Server.ts

@@ -139,17 +139,17 @@ async function initializeConnection(options: CircuitStartOptions, logger: Logger
   try {
     await connection.start();
   } catch (ex) {
-    unhandledError(connection, ex, logger);
+    unhandledError(connection, ex as Error, logger);
 
-    if (ex.innerErrors && ex.innerErrors.some(e => e.errorType === 'UnsupportedTransportError' && e.transport === HttpTransportType.WebSockets)) {
+    if (!isNestedError(ex)) {
+      showErrorNotification();
+    } else if (ex.innerErrors && ex.innerErrors.some(e => e.errorType === 'UnsupportedTransportError' && e.transport === HttpTransportType.WebSockets)) {
       showErrorNotification('Unable to connect, please ensure you are using an updated browser that supports WebSockets.');
     } else if (ex.innerErrors && ex.innerErrors.some(e => e.errorType === 'FailedToStartTransportError' && e.transport === HttpTransportType.WebSockets)) {
       showErrorNotification('Unable to connect, please ensure WebSockets are available. A VPN or proxy may be blocking the connection.');
     } else if (ex.innerErrors && ex.innerErrors.some(e => e.errorType === 'DisabledTransportError' && e.transport === HttpTransportType.LongPolling)) {
       logger.log(LogLevel.Error, 'Unable to initiate a SignalR connection to the server. This might be because the server is not configured to support WebSockets. To troubleshoot this, visit https://aka.ms/blazor-server-websockets-error.');
       showErrorNotification();
-    } else {
-      showErrorNotification();
     }
   }
 
@@ -166,8 +166,14 @@ async function initializeConnection(options: CircuitStartOptions, logger: Logger
   });
 
   return connection;
+
+  function isNestedError(error: any): error is AggregateError {
+    return error && ('innerErrors' in error);
+  }
 }
 
+type AggregateError = Error & { innerErrors: { errorType: string, transport: HttpTransportType }[] };
+
 function unhandledError(connection: HubConnection, err: Error, logger: Logger): void {
   logger.log(LogLevel.Error, err);
 

src/Components/Web.JS/src/Platform/Circuits/CircuitStreamingInterop.ts

@@ -47,7 +47,7 @@ export function sendJSDataStream(connection: HubConnection, data: ArrayBufferVie
                 chunkId++;
             }
         } catch (error) {
-            await connection.send('ReceiveJSDataChunk', streamId, -1, null, error.toString());
+            await connection.send('ReceiveJSDataChunk', streamId, -1, null, (error as Error).toString());
         }
     }, 0);
 };

src/Components/Web.JS/src/Platform/Circuits/DefaultReconnectDisplay.ts

@@ -42,7 +42,7 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
     this.button = this.modal.querySelector('button')!;
     this.reloadParagraph = this.modal.querySelector('p')!;
     this.loader = this.getLoader();
-    
+
     this.message.after(this.loader);
 
     this.button.addEventListener('click', async () => {
@@ -59,7 +59,7 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
         }
       } catch (err) {
         // We got an exception, server is currently unavailable
-        this.logger.log(LogLevel.Error, err);
+        this.logger.log(LogLevel.Error, err as Error);
         this.failed();
       }
     });
@@ -126,7 +126,7 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
     loader.animate([
       { transform: 'rotate(0deg)' },
       { transform: 'rotate(360deg)' }
-    ], { 
+    ], {
       duration: 2000,
       iterations: Infinity
     });

src/Components/Web.JS/src/Platform/Circuits/DefaultReconnectionHandler.ts

@@ -82,7 +82,7 @@ class ReconnectionProcess {
         return;
       } catch (err) {
         // We got an exception so will try again momentarily
-        this.logger.log(LogLevel.Error, err);
+        this.logger.log(LogLevel.Error, err as Error);
       }
     }
 

src/Components/Web.JS/src/Platform/Circuits/RenderQueue.ts

@@ -54,11 +54,11 @@ export class RenderQueue {
       renderBatch(this.browserRendererId, new OutOfProcessRenderBatch(batchData));
       await this.completeBatch(connection, receivedBatchId);
     } catch (error) {
-      this.fatalError = error.toString();
+      this.fatalError = (error as Error).toString();
       this.logger.log(LogLevel.Error, `There was an error applying batch ${receivedBatchId}.`);
 
       // If there's a rendering exception, notify server *and* throw on client
-      connection.send('OnRenderCompleted', receivedBatchId, error.toString());
+      connection.send('OnRenderCompleted', receivedBatchId, (error as Error).toString());
       throw error;
     }
   }

src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts

@@ -271,7 +271,7 @@ function createEmscriptenModuleInstance(resourceLoader: WebAssemblyResourceLoade
         const dotnetWasmResource = await wasmBeingLoaded;
         compiledInstance = await compileWasmModule(dotnetWasmResource, imports);
       } catch (ex) {
-        module.printErr(ex);
+        module.printErr((ex as Error).toString());
         throw ex;
       }
       successCallback(compiledInstance);

src/Components/Web.JS/src/Platform/WebView/WebViewIpcReceiver.ts

@@ -20,7 +20,7 @@ export function startIpcReceiver() {
         renderBatch(0, new OutOfProcessRenderBatch(batchData));
         sendRenderCompleted(batchId, null);
       } catch (ex) {
-        sendRenderCompleted(batchId, ex.toString());
+        sendRenderCompleted(batchId, (ex as Error).toString());
       }
     },
 

src/Components/Web.JS/src/Rendering/BrowserRenderer.ts

@@ -288,22 +288,26 @@ export class BrowserRenderer {
   private trySetSelectValueFromOptionElement(optionElement: HTMLOptionElement) {
     const selectElem = this.findClosestAncestorSelectElement(optionElement);
 
-    if (!selectElem || !(deferredValuePropname in selectElem)) {
+    if (!isBlazorSelectElement(selectElem)) {
       return false;
     }
 
     if (isMultipleSelectElement(selectElem)) {
-      optionElement.selected = selectElem[deferredValuePropname].indexOf(optionElement.value) !== -1;
+      optionElement.selected = selectElem._blazorDeferredValue!.indexOf(optionElement.value) !== -1;
     } else {
-      if (selectElem[deferredValuePropname] !== optionElement.value) {
+      if (selectElem._blazorDeferredValue !== optionElement.value) {
         return false;
       }
 
       setSingleSelectElementValue(selectElem, optionElement.value);
-      delete selectElem[deferredValuePropname];
+      delete selectElem._blazorDeferredValue;
     }
 
     return true;
+
+    function isBlazorSelectElement(selectElem: HTMLSelectElement | null) : selectElem is BlazorHtmlSelectElement {
+      return !!selectElem && (deferredValuePropname in selectElem);
+    }
   }
 
   private insertComponent(batch: RenderBatch, parent: LogicalElement, childIndex: number, frame: RenderTreeFrame) {
@@ -560,6 +564,8 @@ function stripOnPrefix(attributeName: string) {
   throw new Error(`Attribute should be an event name, but doesn't start with 'on'. Value: '${attributeName}'`);
 }
 
+type BlazorHtmlSelectElement = HTMLSelectElement & { _blazorDeferredValue?: string };
+
 function isMultipleSelectElement(element: HTMLSelectElement) {
   return element.type === 'select-multiple';
 }

src/Components/Web.JS/src/Rendering/LogicalElements.ts

@@ -173,7 +173,7 @@ export function getLogicalChild(parent: LogicalElement, childIndex: number): Log
 export function isSvgElement(element: LogicalElement) {
   // Note: This check is intentionally case-sensitive since we expect this element
   // to appear as a child of an SVG element and SVGs are case-sensitive.
-  var closestElement = getClosestDomElement(element);
+  var closestElement = getClosestDomElement(element) as any;
   return closestElement.namespaceURI === 'http://www.w3.org/2000/svg' && closestElement['tagName'] !== 'foreignObject';
 }