Add expo as a platform (#384)

Author: charpeni

.circleci/config.yml

@@ -6,12 +6,16 @@ aliases:
 
 orbs:
   node: circleci/[email protected]
+  browser-tools: circleci/[email protected]
 
 executors:
   default:
     docker:
       - image: cimg/node:16.13
     working_directory: ~/react-native-url-polyfill
+  node-browsers:
+    docker:
+      - image: cimg/node:16.13-browsers
   xcode-11:
     macos:
       xcode: 11.7.0
@@ -70,6 +74,18 @@ commands:
           name: Restoring Detox App Cache
           keys:
             - detox-app-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock"}}
+  save-cache-expo-app:
+    steps:
+      - save_cache:
+          key: expo-app-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock"}}
+          paths:
+            - node_modules
+  restore-cache-expo-app:
+    steps:
+      - restore_cache:
+          name: Restoring Detox App Cache
+          keys:
+            - expo-app-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock"}}
   save-android-build-cache:
     steps:
       - save_cache:
@@ -231,6 +247,66 @@ jobs:
       - run:
           name: Run Detox on iOS
           command: yarn e2e:ios
+  test-expo-ios:
+    parameters:
+      executor:
+        default: xcode
+        type: executor
+      expo-version:
+        type: string
+    executor: << parameters.executor >>
+    working_directory: ~/react-native-url-polyfill/platforms/expo/<< parameters.expo-version >>
+    steps:
+      - attach-workspace
+      - restore-cache-detox-app
+      - install-node
+      - install-yarn-dependencies
+      - install-detox
+      - run:
+          name: Fetch Pods specs
+          command: curl https://cocoapods-specs.circleci.com/fetch-cocoapods-repo-from-s3.sh | bash -s cf
+      - run:
+          name: Install Pods
+          command: cd ios && pod install --repo-update
+      - run: yarn global add expo-cli
+      - run:
+          name: Build iOS App w/ Expo
+          no_output_timeout: 30m
+          command: npx expo build:ios -t simulator --no-publish --non-interactive
+      - run:
+          name: Make Directory tmp
+          command: mkdir -p tmp
+      - run:
+          name: Downloading .ipa from expo
+          command: curl -o tmp/app.tar.gz "$(npx expo url:ipa --non-interactive)"
+      - run:
+          name: Un-tar app.tar.gz
+          command: tar -xzvf tmp/app.tar.gz -C tmp
+      - run:
+          name: Run Detox on iOS
+          command: yarn test:ios
+      - save-cache-detox-app
+  test-expo-web:
+    parameters:
+      expo-version:
+        type: string
+    executor: node-browsers
+    working_directory: ~/react-native-url-polyfill/platforms/expo/<< parameters.expo-version >>
+    steps:
+      - attach-workspace
+      - browser-tools/install-chrome
+      - run: google-chrome --version
+      - run:
+          name: Install certutil
+          command: |
+            sudo apt update
+            sudo apt install libnss3-tools
+      - restore-cache-expo-app
+      - install-node
+      - install-yarn-dependencies
+      - run: yarn global add expo-cli
+      - run: yarn test:web --runInBand
+      - save-cache-expo-app
 
 workflows:
   tests:
@@ -269,3 +345,17 @@ workflows:
           requires:
             - lint
             - test-js
+      - test-expo-ios:
+          matrix:
+            parameters:
+              expo-version: ['43']
+          requires:
+            - lint
+            - test-js
+      - test-expo-web:
+          matrix:
+            parameters:
+              expo-version: ['43']
+          requires:
+            - lint
+            - test-js

.gitignore

@@ -15,4 +15,6 @@ pids
 
 *.hprof
 
-*.tgz
+*.tgz
+
+tmp

README.md

@@ -36,6 +36,7 @@ react-native-url-polyfill is an implementation of the WHATWG [URL Standard](http
 - **Trustworthy**. Follows closely the URL Standard spec, and relys on unit tests and Detox e2e tests within [React Native](https://github.com/facebook/react-native).
 - **Blob support**. Supports React Native's Blob without additional steps.
 - **Hermes support**. Supports [Hermes](https://github.com/facebook/hermes), a JavaScript engine optimized for running React Native.
+- **Expo support**. Supports [Expo](https://expo.dev/) and tested against.
 
 ## Why do we need this?
 

platforms/detox/TestPolyfill.js

@@ -1,6 +1,24 @@
 import React from 'react';
 import {Text} from 'react-native';
 
+function testCreateObjectURL() {
+  let objectURL;
+
+  try {
+    objectURL = URL.createObjectURL({
+      data: {
+        blobId: 1,
+        offset: 32,
+      },
+      size: 64,
+    });
+  } catch (e) {
+    console.error(e);
+  }
+
+  return objectURL;
+}
+
 const PolyfillTests = () => (
   <>
     <Text testID="url-polyfill-version">
@@ -13,15 +31,7 @@ const PolyfillTests = () => (
           .href
       }
     </Text>
-    <Text testID="url-test-3">
-      {URL.createObjectURL({
-        data: {
-          blobId: 1,
-          offset: 32,
-        },
-        size: 64,
-      })}
-    </Text>
+    <Text testID="url-test-3">{testCreateObjectURL()}</Text>
   </>
 );
 

platforms/expo/43/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

platforms/expo/43/.detoxrc.json

@@ -0,0 +1,25 @@
+{
+  "testRunner": "jest",
+  "runnerConfig": "../../detox/config.json",
+  "skipLegacyWorkersInjection": true,
+  "apps": {
+    "ios": {
+      "type": "ios.app",
+      "binaryPath": "tmp/43.app"
+    }
+  },
+  "devices": {
+    "simulator": {
+      "type": "ios.simulator",
+      "device": {
+        "type": "iPhone 11 Pro"
+      }
+    }
+  },
+  "configurations": {
+    "ios": {
+      "device": "simulator",
+      "app": "ios"
+    }
+  }
+}

platforms/expo/43/.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

platforms/expo/43/.gitignore

@@ -0,0 +1,55 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+!debug.keystore
+
+# Bundle artifacts
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/
+
+# Expo
+.expo/
+web-build/
+dist/

platforms/expo/43/App.js

@@ -0,0 +1,23 @@
+import {StatusBar} from 'expo-status-bar';
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+
+import TestPolyfill from '../../detox/TestPolyfill';
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <TestPolyfill />
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

platforms/expo/43/__tests__/App.js

@@ -0,0 +1,30 @@
+import 'expect-puppeteer';
+
+import config from '../jest-puppeteer.config';
+
+jest.setTimeout(10000);
+
+beforeEach(async () => {
+  await page.goto(config.url);
+  await page.waitForSelector('#root');
+});
+
+it('should have REACT_NATIVE_URL_POLYFILL', async () => {
+  const {name, version} = require('../../../../package.json');
+
+  await expect(page).toMatchElement('div[data-testid="url-polyfill-version"]', {
+    text: `${name}@${version}`,
+  });
+});
+
+it('should handle test 1', async () => {
+  await expect(page).toMatchElement('div[data-testid="url-test-1"]', {
+    text: 'https://google.dev/dev',
+  });
+});
+
+it('should handle test 2', async () => {
+  await expect(page).toMatchElement('div[data-testid="url-test-2"]', {
+    text: 'https://facebook.github.io/react-native/img/header_logo.png',
+  });
+});