feat: add React Native support

Author: acostalima

.aegir.js

@@ -1,21 +1,23 @@
 'use strict'
 
 const EchoServer = require('aegir/utils/echo-server')
-const { format } =require('iso-url')
+const { format } = require('iso-url')
 
 let echo = new EchoServer()
 
-module.exports = {
-  hooks: {
-    pre: async () => {
-      const server = await echo.start()
-      const { address, port } = server.server.address()
-      return {
-        env: { ECHO_SERVER : format({ protocol: 'http:', hostname: address, port })}
-      }
-    },
-    post: async () => {
-      await echo.stop()
-    }
-  }
-}
+// module.exports = {
+//   hooks: {
+//     pre: async () => {
+//       const server = await echo.start()
+//       const { address, port } = server.server.address()
+//       return {
+//         env: { ECHO_SERVER : format({ protocol: 'http:', hostname: address, port })}
+//       }
+//     },
+//     post: async () => {
+//       await echo.stop()
+//     }
+//   }
+// }
+
+echo.start()

.github/workflows/main.yml

@@ -11,16 +11,16 @@ jobs:
   check:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - run: npm install
-    - run: npx aegir lint
-    - uses: gozala/[email protected]
-    - run: npx aegir build
-    - run: npx aegir dep-check
-    - uses: ipfs/aegir/actions/bundle-size@master
-      name: size
-      with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/checkout@v2
+      - run: npm install
+      - run: npx aegir lint
+      - uses: gozala/[email protected]
+      - run: npx aegir build
+      - run: npx aegir dep-check
+      - uses: ipfs/aegir/actions/bundle-size@master
+        name: size
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
   test-node:
     needs: check
     runs-on: ${{ matrix.os }}
@@ -64,4 +64,33 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - run: npm install
-      - run: npx xvfb-maybe aegir test -t electron-renderer --bail
+      - run: npx xvfb-maybe aegir test -t electron-renderer --bail
+  test-react-native-android:
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: npm install
+      - uses: reactivecircus/android-emulator-runner@v2
+        with:
+          api-level: 28
+          target: default
+          arch: x86_64
+          profile: pixel
+          avd-name: google-pixel
+          script: |
+            npx rn-test --platform android --emulator google-pixel 'test/**/*.spec.js'
+  test-react-native-ios:
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: npm install
+      - name: Create and run iOS simulator
+        run: |
+          SIMULATOR_RUNTIME=$(echo "iOS 14.4" | sed 's/[ \.]/-/g')
+          SIMULATOR_ID=$(xcrun simctl create "iPhone 11" com.apple.CoreSimulator.SimDeviceType.iPhone-11 com.apple.CoreSimulator.SimRuntime.$SIMULATOR_RUNTIME)
+          echo "IOS_SIMULATOR=$SIMULATOR_ID" >> $GITHUB_ENV
+          xcrun simctl boot $SIMULATOR_ID &
+      - run: npx rn-test --platform ios --simulator 'iPhone 11 (14.4)' --rn 0.62.0 'test/**/*.spec.js'
+      - name: Shutdown iOS simulator
+        run: |
+          xcrun simctl shutdown $IOS_SIMULATOR

package.json

@@ -18,6 +18,9 @@
     "./test/files/glob-source.spec.js": false,
     "electron-fetch": false
   },
+  "react-native": {
+    "./src/http/fetch.js": "./src/http/fetch.react-native.js"
+  },
   "types": "dist/src/index.d.ts",
   "typesVersions": {
     "*": {
@@ -34,6 +37,8 @@
     "test:node": "aegir test -t node",
     "test:electron": "aegir test -t electron-main",
     "test:electron-renderer": "aegir test -t electron-renderer",
+    "test:react-native:android": "aegir test -t react-native-android",
+    "test:react-native:ios": "aegir test -t react-native-ios",
     "lint": "aegir lint",
     "release": "aegir release --docs",
     "release-minor": "aegir release --type minor --docs",
@@ -49,16 +54,17 @@
     "err-code": "^2.0.3",
     "fs-extra": "^9.0.1",
     "is-electron": "^2.2.0",
-    "iso-url": "^1.0.0",
+    "iso-url": "^1.1.3",
     "it-glob": "0.0.10",
     "it-to-stream": "^0.1.2",
     "merge-options": "^3.0.4",
     "nanoid": "^3.1.20",
     "native-abort-controller": "^1.0.3",
     "native-fetch": "2.0.1",
     "node-fetch": "^2.6.1",
+    "react-native-fetch-api": "^1.0.2",
     "stream-to-it": "^0.2.2",
-    "web-encoding": "^1.0.6"
+    "web-encoding": "^1.1.0"
   },
   "devDependencies": {
     "@types/err-code": "^2.0.0",
@@ -68,6 +74,8 @@
     "it-all": "^1.0.4",
     "it-drain": "^1.0.3",
     "it-last": "^1.0.4",
+    "react-native-polyfill-globals": "^3.0.0",
+    "react-native-test-runner": "^3.0.2",
     "uint8arrays": "^2.0.5"
   },
   "eslintConfig": {

rn-test.config.js

@@ -0,0 +1,15 @@
+'use strict'
+
+module.exports = {
+  require: require.resolve('./rn-test.require.js'),
+  runner: 'mocha',
+  modules: [
+    'react-native-url-polyfill',
+    'web-streams-polyfill'
+  ],
+  patches: [{
+    path: require.resolve('react-native-polyfill-globals/patches/react-native+0.63.3.patch')
+  }, {
+    path: require.resolve('react-native-polyfill-globals/patches/react-native-url-polyfill+1.2.0.patch')
+  }]
+}

rn-test.require.js

@@ -0,0 +1,7 @@
+'use strict'
+
+const { polyfill: polyfillReadableStream } = require('react-native-polyfill-globals/src/readable-stream')
+const { polyfill: polyfillURL } = require('react-native-polyfill-globals/src/url')
+
+polyfillURL()
+polyfillReadableStream()

src/env.js

@@ -10,6 +10,7 @@ const IS_NODE = typeof require === 'function' && typeof process !== 'undefined'
 // @ts-ignore - we either ignore worker scope or dom scope
 const IS_WEBWORKER = typeof importScripts === 'function' && typeof self !== 'undefined' && typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope
 const IS_TEST = typeof process !== 'undefined' && typeof process.env !== 'undefined' && process.env.NODE_ENV === 'test'
+const IS_REACT_NATIVE = typeof navigator !== 'undefined' && navigator.product === 'ReactNative'
 
 module.exports = {
   isTest: IS_TEST,
@@ -22,5 +23,6 @@ module.exports = {
    */
   isBrowser: IS_BROWSER,
   isWebWorker: IS_WEBWORKER,
-  isEnvWithDom: IS_ENV_WITH_DOM
+  isEnvWithDom: IS_ENV_WITH_DOM,
+  isReactNative: IS_REACT_NATIVE
 }

src/fetch.js

@@ -1,8 +1,10 @@
 'use strict'
 
-const { isElectronMain } = require('./env')
+const { isElectronMain, isReactNative } = require('./env')
 
-if (isElectronMain) {
+if (isReactNative) {
+  module.exports = require('react-native-fetch-api')
+} else if (isElectronMain) {
   module.exports = require('electron-fetch')
 } else {
 // use window.fetch if it is available, fall back to node-fetch if not

src/http/fetch.js

@@ -1,8 +1,12 @@
 'use strict'
 
-// Electron has `XMLHttpRequest` and should get the browser implementation
-// instead of node.
-if (typeof XMLHttpRequest === 'function') {
+const { isReactNative } = require('../env')
+
+if (isReactNative) {
+  module.exports = require('./fetch.react-native')
+} else if (typeof XMLHttpRequest === 'function') {
+  // Electron has `XMLHttpRequest` and should get the browser implementation
+  // instead of node.
   module.exports = require('./fetch.browser')
 } else {
   module.exports = require('./fetch.node')

src/http/fetch.react-native.js

@@ -0,0 +1,136 @@
+'use strict'
+
+const { TimeoutError, AbortError } = require('./error')
+const { Response, Request, Headers, fetch } = require('../fetch')
+
+/**
+ * @typedef {import('../types').FetchOptions} FetchOptions
+ * @typedef {import('../types').ProgressFn} ProgressFn
+ */
+
+/**
+ * Fetch with progress
+ *
+ * @param {string | Request} url
+ * @param {FetchOptions} [options]
+ * @returns {Promise<ResponseWithURL>}
+ */
+const fetchWithProgress = (url, options = {}) => {
+  const request = new XMLHttpRequest()
+  request.open(options.method || 'GET', url.toString(), true)
+
+  const { timeout, headers } = options
+
+  if (timeout && timeout > 0 && timeout < Infinity) {
+    request.timeout = timeout
+  }
+
+  if (options.overrideMimeType != null) {
+    request.overrideMimeType(options.overrideMimeType)
+  }
+
+  if (headers) {
+    for (const [name, value] of new Headers(headers)) {
+      request.setRequestHeader(name, value)
+    }
+  }
+
+  if (options.signal) {
+    options.signal.onabort = () => request.abort()
+  }
+
+  if (options.onUploadProgress) {
+    request.upload.onprogress = options.onUploadProgress
+  }
+
+  request.responseType = 'blob'
+
+  return new Promise((resolve, reject) => {
+    /**
+     * @param {Event} event
+     */
+    const handleEvent = (event) => {
+      switch (event.type) {
+        case 'error': {
+          resolve(Response.error())
+          break
+        }
+        case 'load': {
+          resolve(
+            new ResponseWithURL(request.responseURL, request.response, {
+              status: request.status,
+              statusText: request.statusText,
+              headers: parseHeaders(request.getAllResponseHeaders())
+            })
+          )
+          break
+        }
+        case 'timeout': {
+          reject(new TimeoutError())
+          break
+        }
+        case 'abort': {
+          reject(new AbortError())
+          break
+        }
+        default: {
+          break
+        }
+      }
+    }
+    request.onerror = handleEvent
+    request.onload = handleEvent
+    request.ontimeout = handleEvent
+    request.onabort = handleEvent
+
+    request.send(/** @type {BodyInit} */(options.body))
+  })
+}
+
+const fetchWithStreaming = fetch
+
+/**
+ * @param {string | Request} url
+ * @param {FetchOptions} options
+ */
+const fetchWith = (url, options = {}) =>
+  (options.onUploadProgress != null)
+    ? fetchWithProgress(url, options)
+    : fetchWithStreaming(url, options)
+
+/**
+ * Parse Headers from a XMLHttpRequest
+ *
+ * @param {string} input
+ * @returns {Headers}
+ */
+const parseHeaders = (input) => {
+  const headers = new Headers()
+  for (const line of input.trim().split(/[\r\n]+/)) {
+    const index = line.indexOf(': ')
+    if (index > 0) {
+      headers.set(line.slice(0, index), line.slice(index + 1))
+    }
+  }
+
+  return headers
+}
+
+class ResponseWithURL extends Response {
+  /**
+   * @param {string} url
+   * @param {BodyInit} body
+   * @param {ResponseInit} options
+   */
+  constructor (url, body, options) {
+    super(body, options)
+    Object.defineProperty(this, 'url', { value: url })
+  }
+}
+
+module.exports = {
+  fetch: fetchWith,
+  Request,
+  Headers,
+  ResponseWithURL
+}

src/supports.js

@@ -1,6 +1,7 @@
 'use strict'
 
 module.exports = {
+  // in React Native: global === window === self
   supportsFileReader: typeof self !== 'undefined' && 'FileReader' in self,
   supportsWebRTC: 'RTCPeerConnection' in globalThis &&
   (typeof navigator !== 'undefined' && typeof navigator.mediaDevices !== 'undefined' && 'getUserMedia' in navigator.mediaDevices),

src/text-encoder.js

@@ -1,5 +1,3 @@
 'use strict'
 
-const { TextEncoder } = require('web-encoding')
-
-module.exports = TextEncoder
+module.exports = require('web-encoding').TextEncoder