Finish implementing URL accessors like host, hostname, username, password

[kross-italk]

Description

The window.URL object is available in Hermes but is otherwise un-implemented. All of the accessors have todo Errors.

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

Lines 140 to 230 in 43d69ee

	constructor(url: string, base: string | URL) {
	let baseUrl = null;
	if (!base || validateBaseUrl(url)) {
	this._url = url;
	if (!this._url.endsWith('/')) {
	this._url += '/';
	}
	} else {
	if (typeof base === 'string') {
	baseUrl = base;
	if (!validateBaseUrl(baseUrl)) {
	throw new TypeError(`Invalid base URL: ${baseUrl}`);
	}
	} else {
	baseUrl = base.toString();
	}
	if (baseUrl.endsWith('/')) {
	baseUrl = baseUrl.slice(0, baseUrl.length - 1);
	}
	if (!url.startsWith('/')) {
	url = `/${url}`;
	}
	if (baseUrl.endsWith(url)) {
	url = '';
	}
	this._url = `${baseUrl}${url}`;
	}
	}
	get hash(): string {
	throw new Error('URL.hash is not implemented');
	}
	get host(): string {
	throw new Error('URL.host is not implemented');
	}
	get hostname(): string {
	throw new Error('URL.hostname is not implemented');
	}
	get href(): string {
	return this.toString();
	}
	get origin(): string {
	throw new Error('URL.origin is not implemented');
	}
	get password(): string {
	throw new Error('URL.password is not implemented');
	}
	get pathname(): string {
	throw new Error('URL.pathname not implemented');
	}
	get port(): string {
	throw new Error('URL.port is not implemented');
	}
	get protocol(): string {
	throw new Error('URL.protocol is not implemented');
	}
	get search(): string {
	throw new Error('URL.search is not implemented');
	}
	get searchParams(): URLSearchParams {
	if (this._searchParamsInstance == null) {
	this._searchParamsInstance = new URLSearchParams();
	}
	return this._searchParamsInstance;
	}
	toJSON(): string {
	return this.toString();
	}
	toString(): string {
	if (this._searchParamsInstance === null) {
	return this._url;
	}
	// $FlowFixMe[incompatible-use]
	const instanceString = this._searchParamsInstance.toString();
	const separator = this._url.indexOf('?') > -1 ? '&' : '?';
	return this._url + separator + instanceString;
	}
	get username(): string {

Steps to reproduce

const urlObj = new window.URL( validUrlString );
urlObj.hostname
// Error: URL.hostname is not implemented

React Native Version

0.73.6

Affected Platforms

Runtime - Android

Output of npx react-native info

Reproducible on all systems. The code has a baked-in Error and no implementation.

Stacktrace or Logs

This error is located at:
    in SecureContext (created by Connect(SecureContext))
    in Connect(SecureContext) (created by App)
    in RCTView (created by View)
    in View (created by App)
    in App (created by RenderApp)
    in Provider (created by RenderApp)
    in RenderApp
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in app(RootComponent), js engine: hermes

Reproducer

https://snack.expo.dev/O0xP_moxLBNEHK9bXAXKl
It can't be reproduced in a browser folks. It can only be seen on hermes/Android so this is moot.

Screenshots and Videos

No response

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.73.8. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[kross-italk]

⚠️ Newer Version of React Native is Available!
ℹ️ You are on a supported minor version, but it looks like there's a newer patch available - 0.73.8. Please [upgrade]

Here's the latest version of the code showing the features are still un-implemented.

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

Lines 169 to 219 in 4cee0a4

	get hash(): string {
	throw new Error('URL.hash is not implemented');
	}
	get host(): string {
	throw new Error('URL.host is not implemented');
	}
	get hostname(): string {
	throw new Error('URL.hostname is not implemented');
	}
	get href(): string {
	return this.toString();
	}
	get origin(): string {
	throw new Error('URL.origin is not implemented');
	}
	get password(): string {
	throw new Error('URL.password is not implemented');
	}
	get pathname(): string {
	throw new Error('URL.pathname not implemented');
	}
	get port(): string {
	throw new Error('URL.port is not implemented');
	}
	get protocol(): string {
	throw new Error('URL.protocol is not implemented');
	}
	get search(): string {
	throw new Error('URL.search is not implemented');
	}
	get searchParams(): URLSearchParams {
	if (this._searchParamsInstance == null) {
	this._searchParamsInstance = new URLSearchParams();
	}
	return this._searchParamsInstance;
	}
	toJSON(): string {
	return this.toString();
	}

[sossost]

@cortinico
Hi I'm sossost, a new contributor. Can I try to resolve this issue??

[cortinico]

Please do 👍

[Shiva710211]

Hi I'm Shivanand, the new contributor. Can i try to resolve this issue? Please provide me with brief information about this issue

[nirmalkumarnikam]

Hey I learned JS and Version Control few days ago, I am willing to contribute... I don't know how to get started... Can someone help me with it?

[Ghanasree]

Hi, Is this issue still open? If it is I would like to work on it. Thanks

[krishpranav]

@cortinico
Hi I'm krishpranav, a new contributor. Can I try to resolve this issue??

[krishpranav]

I am working on the fix for this issue.

[cortinico]

There is already an open PR to address this:

• react-native\packages\react-native\Libraries\Blob\URL.js Changes #48333

[krishpranav]

can you let me know whether shall I work on this issue or not? I am a first time contributor to this repo.

[krishpranav]

@cortinico I've opened a new pull-request, can you kindly check that and let me know. also is there any untouched or anything which is uncompleted one?