Implement URL Accessors (host, hostname, username, password) for the URL class

packages/react-native/Libraries/Blob/URL.js

@@ -8,8 +8,7 @@
  * @flow
  */
 
 import type Blob from './Blob';
-
 import NativeBlobModule from './NativeBlobModule';
 
 let BLOB_URL_PREFIX = null;
@@ -19,8 +18,6 @@
   typeof NativeBlobModule.getConstants().BLOB_URI_SCHEME === 'string'
 ) {
   const constants = NativeBlobModule.getConstants();
-  // $FlowFixMe[incompatible-type] asserted above
-  // $FlowFixMe[unsafe-addition]
   BLOB_URL_PREFIX = constants.BLOB_URI_SCHEME + ':';
   if (typeof constants.BLOB_URI_HOST === 'string') {
     BLOB_URL_PREFIX += `//${constants.BLOB_URI_HOST}/`;
@@ -51,19 +48,16 @@
  * </resources>
  * ```
  */
-
-export {URLSearchParams} from './URLSearchParams';
+export { URLSearchParams } from './URLSearchParams';
 
 function validateBaseUrl(url: string) {
-  // from this MIT-licensed gist: https://gist.github.com/dperini/729294
-  return /^(?:(?:(?:https?|ftp):)?\/\/)(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)*(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/.test(
-    url,
-  );
+  return /^(?:(?:(?:https?|ftp):)?\/\/)(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)*(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/.test(url);
 }
 
 export class URL {
   _url: string;
   _searchParamsInstance: ?URLSearchParams = null;
+  _parsedUrl: URL;
 
   static createObjectURL(blob: Blob): string {
     if (BLOB_URL_PREFIX === null) {
@@ -76,7 +70,6 @@
     // Do nothing.
   }
 
-  // $FlowFixMe[missing-local-annot]
   constructor(url: string, base: string | URL) {
     let baseUrl = null;
     if (!base || validateBaseUrl(url)) {
@@ -104,51 +97,54 @@
       }
       this._url = `${baseUrl}${url}`;
     }
+
+    // Parsing the URL to use for accessors
+    this._parsedUrl = new globalThis.URL(this._url);
   }
 
   get hash(): string {
-    throw new Error('URL.hash is not implemented');
+    return this._parsedUrl.hash;
   }
 
   get host(): string {
-    throw new Error('URL.host is not implemented');
+    return this._parsedUrl.host;
   }
 
   get hostname(): string {
-    throw new Error('URL.hostname is not implemented');
+    return this._parsedUrl.hostname;
   }
 
   get href(): string {
     return this.toString();
   }
 
   get origin(): string {
-    throw new Error('URL.origin is not implemented');
+    return this._parsedUrl.origin;
   }
 
   get password(): string {
-    throw new Error('URL.password is not implemented');
+    return this._parsedUrl.password;
   }
 
   get pathname(): string {
-    throw new Error('URL.pathname not implemented');
+    return this._parsedUrl.pathname;
   }
 
   get port(): string {
-    throw new Error('URL.port is not implemented');
+    return this._parsedUrl.port;
   }
 
   get protocol(): string {
-    throw new Error('URL.protocol is not implemented');
+    return this._parsedUrl.protocol;
   }
 
   get search(): string {
-    throw new Error('URL.search is not implemented');
+    return this._parsedUrl.search;
   }
 
   get searchParams(): URLSearchParams {
     if (this._searchParamsInstance == null) {
-      this._searchParamsInstance = new URLSearchParams();
+      this._searchParamsInstance = new URLSearchParams(this._parsedUrl.search);
     }
     return this._searchParamsInstance;
   }
@@ -158,16 +154,12 @@
   }
 
   toString(): string {
-    if (this._searchParamsInstance === null) {
-      return this._url;
-    }
-    // $FlowFixMe[incompatible-use]
-    const instanceString = this._searchParamsInstance.toString();
+    const instanceString = this._searchParamsInstance ? this._searchParamsInstance.toString() : '';
     const separator = this._url.indexOf('?') > -1 ? '&' : '?';
-    return this._url + separator + instanceString;
+    return this._url + (instanceString ? separator + instanceString : '');
   }
 
   get username(): string {
-    throw new Error('URL.username is not implemented');
+    return this._parsedUrl.username;
   }
 }

packages/react-native/Libraries/Blob/__tests__/URL-test.js

@@ -41,4 +41,20 @@ describe('URL', function () {
     const k = new URL('en-US/docs', 'https://developer.mozilla.org');
     expect(k.href).toBe('https://developer.mozilla.org/en-US/docs');
   });
+
+  it('should implement host, hostname, username, and password accessors correctly', () => {
+    const url = new URL('https://username:[email protected]:8080/en-US/docs?query=test#fragment');
+
+    // Test host
+    expect(url.host).toBe('developer.mozilla.org:8080');
+
+    // Test hostname
+    expect(url.hostname).toBe('developer.mozilla.org');
+
+    // Test username
+    expect(url.username).toBe('username');
+
+    // Test password
+    expect(url.password).toBe('password');
+  });
 });