Ship refactor of XHR, FileReader and WebSocket to use the built-in EventTarget implementation (#50485)

Summary:
Pull Request resolved: #50485

Changelog: [internal]

This cleans up the experiment to test the new implementations of `XMLHttpRequest`, `FileReader` and `WebSocket` using the built-in `EventTarget` definition.

This effectively replaces the legacy implementations with the ones using the built-in `EventTarget` class in stable.

Reviewed By: yungsters

Differential Revision: D68625225

fbshipit-source-id: 7ccefe5d8612baca283146cdbca7f7f1d51b4ffa

Author: rubennorte

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

@@ -8,13 +8,224 @@
  * @format
  */
 
-import typeof FileReader from './FileReader_old';
+import type {EventCallback} from '../../src/private/webapis/dom/events/EventTarget';
+import type Blob from './Blob';
 
-// Use a global instead of a flag from ReactNativeFeatureFlags because this will
-// be read before apps have a chance to set overrides.
-const useBuiltInEventTarget = global.RN$useBuiltInEventTarget?.();
+import Event from '../../src/private/webapis/dom/events/Event';
+import {
+  getEventHandlerAttribute,
+  setEventHandlerAttribute,
+} from '../../src/private/webapis/dom/events/EventHandlerAttributes';
+import EventTarget from '../../src/private/webapis/dom/events/EventTarget';
+import NativeFileReaderModule from './NativeFileReaderModule';
+import {toByteArray} from 'base64-js';
 
-export default (useBuiltInEventTarget
-  ? // $FlowExpectedError[incompatible-cast]
-    require('./FileReader_new').default
-  : require('./FileReader_old').default) as FileReader;
+type ReadyState =
+  | 0 // EMPTY
+  | 1 // LOADING
+  | 2; // DONE
+
+type ReaderResult = string | ArrayBuffer;
+
+const EMPTY = 0;
+const LOADING = 1;
+const DONE = 2;
+
+class FileReader extends EventTarget {
+  static EMPTY: number = EMPTY;
+  static LOADING: number = LOADING;
+  static DONE: number = DONE;
+
+  EMPTY: number = EMPTY;
+  LOADING: number = LOADING;
+  DONE: number = DONE;
+
+  _readyState: ReadyState;
+  _error: ?Error;
+  _result: ?ReaderResult;
+  _aborted: boolean = false;
+
+  constructor() {
+    super();
+    this._reset();
+  }
+
+  _reset(): void {
+    this._readyState = EMPTY;
+    this._error = null;
+    this._result = null;
+  }
+
+  _setReadyState(newState: ReadyState) {
+    this._readyState = newState;
+    this.dispatchEvent(new Event('readystatechange'));
+    if (newState === DONE) {
+      if (this._aborted) {
+        this.dispatchEvent(new Event('abort'));
+      } else if (this._error) {
+        this.dispatchEvent(new Event('error'));
+      } else {
+        this.dispatchEvent(new Event('load'));
+      }
+      this.dispatchEvent(new Event('loadend'));
+    }
+  }
+
+  readAsArrayBuffer(blob: ?Blob): void {
+    this._aborted = false;
+
+    if (blob == null) {
+      throw new TypeError(
+        "Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'",
+      );
+    }
+
+    NativeFileReaderModule.readAsDataURL(blob.data).then(
+      (text: string) => {
+        if (this._aborted) {
+          return;
+        }
+
+        const base64 = text.split(',')[1];
+        const typedArray = toByteArray(base64);
+
+        this._result = typedArray.buffer;
+        this._setReadyState(DONE);
+      },
+      error => {
+        if (this._aborted) {
+          return;
+        }
+        this._error = error;
+        this._setReadyState(DONE);
+      },
+    );
+  }
+
+  readAsDataURL(blob: ?Blob): void {
+    this._aborted = false;
+
+    if (blob == null) {
+      throw new TypeError(
+        "Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'",
+      );
+    }
+
+    NativeFileReaderModule.readAsDataURL(blob.data).then(
+      (text: string) => {
+        if (this._aborted) {
+          return;
+        }
+        this._result = text;
+        this._setReadyState(DONE);
+      },
+      error => {
+        if (this._aborted) {
+          return;
+        }
+        this._error = error;
+        this._setReadyState(DONE);
+      },
+    );
+  }
+
+  readAsText(blob: ?Blob, encoding: string = 'UTF-8'): void {
+    this._aborted = false;
+
+    if (blob == null) {
+      throw new TypeError(
+        "Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'",
+      );
+    }
+
+    NativeFileReaderModule.readAsText(blob.data, encoding).then(
+      (text: string) => {
+        if (this._aborted) {
+          return;
+        }
+        this._result = text;
+        this._setReadyState(DONE);
+      },
+      error => {
+        if (this._aborted) {
+          return;
+        }
+        this._error = error;
+        this._setReadyState(DONE);
+      },
+    );
+  }
+
+  abort() {
+    this._aborted = true;
+    // only call onreadystatechange if there is something to abort, as per spec
+    if (this._readyState !== EMPTY && this._readyState !== DONE) {
+      this._reset();
+      this._setReadyState(DONE);
+    }
+    // Reset again after, in case modified in handler
+    this._reset();
+  }
+
+  get readyState(): ReadyState {
+    return this._readyState;
+  }
+
+  get error(): ?Error {
+    return this._error;
+  }
+
+  get result(): ?ReaderResult {
+    return this._result;
+  }
+
+  get onabort(): EventCallback | null {
+    return getEventHandlerAttribute(this, 'abort');
+  }
+
+  set onabort(listener: ?EventCallback) {
+    setEventHandlerAttribute(this, 'abort', listener);
+  }
+
+  get onerror(): EventCallback | null {
+    return getEventHandlerAttribute(this, 'error');
+  }
+
+  set onerror(listener: ?EventCallback) {
+    setEventHandlerAttribute(this, 'error', listener);
+  }
+
+  get onload(): EventCallback | null {
+    return getEventHandlerAttribute(this, 'load');
+  }
+
+  set onload(listener: ?EventCallback) {
+    setEventHandlerAttribute(this, 'load', listener);
+  }
+
+  get onloadstart(): EventCallback | null {
+    return getEventHandlerAttribute(this, 'loadstart');
+  }
+
+  set onloadstart(listener: ?EventCallback) {
+    setEventHandlerAttribute(this, 'loadstart', listener);
+  }
+
+  get onloadend(): EventCallback | null {
+    return getEventHandlerAttribute(this, 'loadend');
+  }
+
+  set onloadend(listener: ?EventCallback) {
+    setEventHandlerAttribute(this, 'loadend', listener);
+  }
+
+  get onprogress(): EventCallback | null {
+    return getEventHandlerAttribute(this, 'progress');
+  }
+
+  set onprogress(listener: ?EventCallback) {
+    setEventHandlerAttribute(this, 'progress', listener);
+  }
+}
+
+export default FileReader;