Migrating from Node's deprecated `url` API to browser's `URL`

Related to https://github.com/vector-im/element-web/pull/16292

Signed-off-by: Bekliev Parviz <nightkon95@gmail.com>

package.json

@@ -66,8 +66,7 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "sanitize-html": "github:apostrophecms/sanitize-html#3c7f93f2058f696f5359e3e58d464161647226db",
-    "ua-parser-js": "^0.7.23",
-    "url": "^0.11.0"
+    "ua-parser-js": "^0.7.23"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

src/vector/app.tsx

@@ -23,7 +23,6 @@ import React from 'react';
 // this incidentally means we can forget our React imports in JSX files without penalty.
 window.React = React;
 
-import url from 'url';
 import * as sdk from 'matrix-react-sdk';
 import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
 import {_td, newTranslatableError} from 'matrix-react-sdk/src/languageHandler';
@@ -120,14 +119,12 @@ function onTokenLoginCompleted() {
     // if we did a token login, we're now left with the token, hs and is
     // url as query params in the url; a little nasty but let's redirect to
     // clear them.
-    const parsedUrl = url.parse(window.location.href, true);
+    const url = new URL(window.location.href);
 
-    parsedUrl.search = null; // to make `url.format` ignores `search` property and uses `query` instead
-    delete parsedUrl.query['loginToken'];
+    url.searchParams.delete('loginToken');
 
-    const formatted = url.format(parsedUrl);
-    console.log(`Redirecting to ${formatted} to drop loginToken from queryparams`);
-    window.history.replaceState(null, "", formatted);
+    console.log(`Redirecting to ${url.href} to drop loginToken from queryparams`);
+    window.history.replaceState(null, "", url.href);
 }
 
 export async function loadApp(fragParams: {}) {

src/vector/platform/WebPlatform.ts

@@ -26,7 +26,6 @@ import {hideToast as hideUpdateToast, showToast as showUpdateToast} from "matrix
 import {Action} from "matrix-react-sdk/src/dispatcher/actions";
 import { CheckUpdatesPayload } from 'matrix-react-sdk/src/dispatcher/payloads/CheckUpdatesPayload';
 
-import url from 'url';
 import UAParser from 'ua-parser-js';
 
 const POKE_RATE_MS = 10 * 60 * 1000; // 10 min
@@ -184,17 +183,13 @@ export default class WebPlatform extends VectorBasePlatform {
 
     getDefaultDeviceDisplayName(): string {
         // strip query-string and fragment from uri
-        const u = url.parse(window.location.href);
-        u.protocol = "";
-        u.search = "";
-        u.hash = "";
-        // Remove trailing slash if present
-        u.pathname = u.pathname.replace(/\/$/, "");
-
-        let appName = u.format();
-        // Remove leading slashes if present
-        appName = appName.replace(/^\/\//, "");
-        // `appName` is now in the format `develop.element.io`.
+        const url = new URL(window.location.href);
+
+        // `appName` in the format `develop.element.io/abc/xyz`
+        const appName = [
+            url.host,
+            url.pathname.replace(/\/$/, ""), // Remove trailing slash if present
+        ].join('');
 
         const ua = new UAParser();
         const browserName = ua.getBrowser().name || "unknown browser";

yarn.lock

@@ -8890,16 +8890,7 @@ postcss-attribute-case-insensitive@^4.0.1:
     postcss "^7.0.2"
     postcss-selector-parser "^6.0.2"
 
-postcss-calc@^7.0.1:
-  version "7.0.5"
-  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.5.tgz#f8a6e99f12e619c2ebc23cf6c486fdc15860933e"
-  integrity sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==
-  dependencies:
-    postcss "^7.0.27"
-    postcss-selector-parser "^6.0.2"
-    postcss-value-parser "^4.0.2"
-
-postcss-calc@^7.0.5:
+postcss-calc@^7.0.1, postcss-calc@^7.0.5:
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.5.tgz#f8a6e99f12e619c2ebc23cf6c486fdc15860933e"
   integrity sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==