refactor: upgrade to Expo SDK 51 (#577)

* refactor(runtime): upgrade to Expo SDK `51.0.0-preview.4` * refactor(runtime): drop root `expo` prefix in `app.json` * refactor(runtime): update `react-native` patch * refactor(snack-content): add Expo SDK 51 * refactor(snack-sdk): add Expo SDK 51 * refactor(website): configure new Appetize apps * refactor(website): configure new Expo SDK * fix(snack-content): use the proper `expo` version for 51 * refactor(runtime): use `experiments.baseUrl` for web exports instead of workaround * refactor(runtime): use `appVersion` with major Expo SDK version instead of `sdkVersion` * feature(snack-content): add support for `appVersion` urls starting from SDK 51 * chore(website): enable SDK 51 in dropdown * refactor: revert `appVersion` changes to rely on `sdkVersion` for now * refactor(runtime): upgrade to Expo SDK `51.0.0` * refactor(snack-content): upgrade to Expo SDK `51.0.0` * refactor(snack-sdk): upgrade to Expo SDK `51.0.0` * test(snack-sdk): update snapshot test
expo · May 7, 2024 · d73e748 · d73e748
1 parent 4dede9b
commit d73e748
Show file tree

Hide file tree

Showing 19 changed files with 1,200 additions and 1,265 deletions.
diff --git a/.github/workflows/runtime.yml b/.github/workflows/runtime.yml
@@ -70,7 +70,9 @@ jobs:
       name: runtime-staging
       url: https://staging.expo.dev/@exponent/snack
     env:
-      EXPO_PUBLIC_SNACK_ENV: staging
+      EXPO_PROJECT_ID: 2dce2748-c51f-4865-bae0-392af794d60a # Configure the EAS Update project
+      EXPO_PUBLIC_SNACK_ENV: staging # Configure Snack to use staging endpoints
+      EXPO_STAGING: 'true' # Configure Expo tooling to use staging endpoints
     steps:
       - name: 🏗 Setup repository
         uses: actions/checkout@v3
@@ -85,15 +87,6 @@ jobs:
           AWS_ACCESS_KEY_ID: ${{ secrets.SNACK_RUNTIME_AWS_STAGING_KEY }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.SNACK_RUNTIME_AWS_STAGING_SECRET }}
 
-      - name: 👷 Configure EAS Update for staging
-        if: ${{ contains('all native', github.event.inputs.platform) }}
-        run: |
-          eas init --id 2dce2748-c51f-4865-bae0-392af794d60a --force
-          eas update:configure
-        env:
-          EXPO_TOKEN: ${{ secrets.SNACK_RUNTIME_EXPO_STAGING }}
-          EXPO_STAGING: 'true'
-
       - name: 📱 Deploy native runtime
         if: ${{ contains('all native', github.event.inputs.platform) }}
         run: yarn deploy:staging
@@ -121,7 +114,8 @@ jobs:
       name: runtime-production
       url: https://expo.dev/@exponent/snack
     env:
-      EXPO_PUBLIC_SNACK_ENV: production
+      EXPO_PROJECT_ID: 933fd9c0-1666-11e7-afca-d980795c5824 # Configure the EAS Update project
+      EXPO_PUBLIC_SNACK_ENV: production # Configure Snack to use production endpoints
     steps:
       - name: 🏗 Setup repository
         uses: actions/checkout@v3
@@ -136,14 +130,6 @@ jobs:
           AWS_ACCESS_KEY_ID: ${{ secrets.SNACK_RUNTIME_AWS_PRODUCTION_KEY }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.SNACK_RUNTIME_AWS_PRODUCTION_SECRET }}
 
-      - name: 👷 Configure EAS Update for production
-        if: ${{ contains('all native', github.event.inputs.platform) }}
-        run: |
-          eas init --id 933fd9c0-1666-11e7-afca-d980795c5824 --force
-          eas update:configure
-        env:
-          EXPO_TOKEN: ${{ secrets.SNACK_RUNTIME_EXPO_PRODUCTION }}
-
       - name: 📱 Deploy native runtime
         if: ${{ contains('all native', github.event.inputs.platform) }}
         run: yarn deploy:prod

diff --git a/packages/snack-content/src/__tests__/urls-test.ts b/packages/snack-content/src/__tests__/urls-test.ts
@@ -5,34 +5,34 @@ const channel = 'AsZ12sasd11G';
 
 describe(createRuntimeUrl, () => {
   it('returns url with only "sdkVersion"', () => {
-    expect(createRuntimeUrl({ sdkVersion: '69.0.0' })).toMatchInlineSnapshot(
-      `"exp://u.expo.dev/933fd9c0-1666-11e7-afca-d980795c5824?runtime-version=exposdk%3A69.0.0&channel-name=production"`,
+    expect(createRuntimeUrl({ sdkVersion: '50.0.0' })).toMatchInlineSnapshot(
+      `"exp://u.expo.dev/933fd9c0-1666-11e7-afca-d980795c5824?runtime-version=exposdk%3A50.0.0&channel-name=production"`,
     );
   });
 
   it(`returns url with "sdkVersion" and "snack"`, () => {
-    expect(createRuntimeUrl({ sdkVersion: '69.0.0', snack })).toMatchInlineSnapshot(
-      `"exp://u.expo.dev/933fd9c0-1666-11e7-afca-d980795c5824?runtime-version=exposdk%3A69.0.0&channel-name=production&snack=xxxxxx"`,
+    expect(createRuntimeUrl({ sdkVersion: '49.0.0', snack })).toMatchInlineSnapshot(
+      `"exp://u.expo.dev/933fd9c0-1666-11e7-afca-d980795c5824?runtime-version=exposdk%3A49.0.0&channel-name=production&snack=xxxxxx"`,
     );
   });
 
   it(`returns url with "sdkVersion" and "channel"`, () => {
-    expect(createRuntimeUrl({ sdkVersion: '69.0.0', channel })).toMatchInlineSnapshot(
-      `"exp://u.expo.dev/933fd9c0-1666-11e7-afca-d980795c5824?runtime-version=exposdk%3A69.0.0&channel-name=production&snack-channel=AsZ12sasd11G"`,
+    expect(createRuntimeUrl({ sdkVersion: '48.0.0', channel })).toMatchInlineSnapshot(
+      `"exp://u.expo.dev/933fd9c0-1666-11e7-afca-d980795c5824?runtime-version=exposdk%3A48.0.0&channel-name=production&snack-channel=AsZ12sasd11G"`,
     );
   });
 
   it(`returns url with "sdkVersion", "snack", and "channel"`, () => {
-    expect(createRuntimeUrl({ sdkVersion: '69.0.0', snack, channel })).toMatchInlineSnapshot(
-      `"exp://u.expo.dev/933fd9c0-1666-11e7-afca-d980795c5824?runtime-version=exposdk%3A69.0.0&channel-name=production&snack=xxxxxx&snack-channel=AsZ12sasd11G"`,
+    expect(createRuntimeUrl({ sdkVersion: '50.0.0', snack, channel })).toMatchInlineSnapshot(
+      `"exp://u.expo.dev/933fd9c0-1666-11e7-afca-d980795c5824?runtime-version=exposdk%3A50.0.0&channel-name=production&snack=xxxxxx&snack-channel=AsZ12sasd11G"`,
     );
   });
 
   it(`returns url with "sdkVersion", "snack", and "channel" using custom "endpoint"`, () => {
     expect(
-      createRuntimeUrl({ sdkVersion: '69.0.0', snack, channel, endpoint: 'u-dev.expo.test/xxx' }),
+      createRuntimeUrl({ sdkVersion: '49.0.0', snack, channel, endpoint: 'u-dev.expo.test/xxx' }),
     ).toMatchInlineSnapshot(
-      `"exp://u-dev.expo.test/xxx?runtime-version=exposdk%3A69.0.0&channel-name=production&snack=xxxxxx&snack-channel=AsZ12sasd11G"`,
+      `"exp://u-dev.expo.test/xxx?runtime-version=exposdk%3A49.0.0&channel-name=production&snack=xxxxxx&snack-channel=AsZ12sasd11G"`,
     );
   });
 });

diff --git a/packages/snack-content/src/sdks/index.ts b/packages/snack-content/src/sdks/index.ts
@@ -113,6 +113,41 @@ const sdks: { [version: string]: SDKSpec } = {
     },
     deprecatedModules: {},
   },
+  '51.0.0': {
+    version: '^51.0.0',
+    coreModules: {
+      ...assets,
+      expo: '~51.0.0',
+      react: '18.2.0',
+      'react-dom': '*',
+      'react-native': '0.74.1',
+      'react-native-web': '*',
+      // Used by @shopify/react-native-skia, on web only
+      // See runtime/src/NativeModules/ReactNativeSkia.tsx for more info
+      '@shopify/react-native-skia/lib/module/web': '*',
+    },
+    bundledModules: {
+      'expo-asset': '*',
+      'expo-font': '*',
+      'react-native-gesture-handler': '*',
+      'react-native-safe-area-context': '*',
+      '@expo/vector-icons': '*',
+      'expo-constants': '*',
+      'expo-file-system': '*',
+      'expo-updates': '*',
+      '@react-native-async-storage/async-storage': '*',
+      'react-native-reanimated': '*',
+      'expo-router': '*',
+      'expo-router/stack': '*',
+      'expo-router/tabs': '*',
+      'expo-router/drawer': '*',
+      'expo-router/html': '*',
+      'expo-router/head': '*',
+      'expo-router/entry': '*',
+      'react-native-pager-view': '*',
+    },
+    deprecatedModules: {},
+  },
 };
 
 export default sdks;
diff --git a/packages/snack-content/src/sdks/types.ts b/packages/snack-content/src/sdks/types.ts
@@ -1,7 +1,7 @@
 /**
  * Version of the Expo SDK to use (e.g. "48.0.0").
  */
-export type SDKVersion = '48.0.0' | '49.0.0' | '50.0.0';
+export type SDKVersion = '48.0.0' | '49.0.0' | '50.0.0' | '51.0.0';
 
 /** @internal */
 export type SDKSpec = {

diff --git a/packages/snack-content/src/urls.ts b/packages/snack-content/src/urls.ts
@@ -38,7 +38,7 @@ export function createRuntimeUrl(options: RuntimeUrlInfo & RuntimeUrlOptions): s
   parameters.set('runtime-version', `exposdk:${options.sdkVersion}`);
   parameters.set('channel-name', 'production');
 
-  // Add the Snack reference
+  // Add the Snack references
   if (options.snack) parameters.set('snack', options.snack);
   if (options.channel) parameters.set('snack-channel', options.channel);
 
@@ -59,7 +59,7 @@ export function parseRuntimeUrl(uri: string | URL): RuntimeUrlInfo | null {
   const snack = url.searchParams.get('snack') ?? undefined;
   const channel = url.searchParams.get('snack-channel') ?? undefined;
   const runtimeVersion = url.searchParams.get('runtime-version');
-  const [, sdkVersion] = runtimeVersion?.match(/exposdk:([0-9]+\.[0-9]+\.[0-9]+)/) ?? [];
+  const [, sdkVersion] = runtimeVersion?.match(/(?:exposdk:)?([0-9]+\.[0-9]+\.[0-9]+)/) ?? [];
 
   if (!sdkVersion) {
     return null;

diff --git a/packages/snack-sdk/src/__fixtures__/bundledNativeModules.json b/packages/snack-sdk/src/__fixtures__/bundledNativeModules.json
@@ -422,5 +422,110 @@
     "@shopify/react-native-skia": "0.1.221",
     "@shopify/flash-list": "1.6.3",
     "@sentry/react-native": "5.19.1"
+  },
+  "^51.0.0": {
+    "@expo/vector-icons": "^14.0.0",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-community/datetimepicker": "7.7.0",
+    "@react-native-masked-view/masked-view": "0.3.1",
+    "@react-native-community/netinfo": "11.3.1",
+    "@react-native-community/slider": "4.5.2",
+    "@react-native-community/viewpager": "5.0.11",
+    "@react-native-picker/picker": "2.7.5",
+    "@react-native-segmented-control/segmented-control": "2.5.2",
+    "@stripe/stripe-react-native": "0.37.2",
+    "expo-analytics-amplitude": "~11.3.0",
+    "expo-app-auth": "~11.1.0",
+    "expo-app-loader-provider": "~8.0.0",
+    "expo-apple-authentication": "~6.4.1",
+    "expo-application": "~5.9.1",
+    "expo-asset": "~10.0.6",
+    "expo-auth-session": "~5.5.2",
+    "expo-av": "~14.0.3",
+    "expo-background-fetch": "~12.0.1",
+    "expo-barcode-scanner": "~13.0.1",
+    "expo-battery": "~8.0.1",
+    "expo-blur": "~13.0.2",
+    "expo-brightness": "~12.0.1",
+    "expo-build-properties": "~0.12.1",
+    "expo-calendar": "~13.0.3",
+    "expo-camera": "~15.0.3",
+    "expo-cellular": "~6.0.2",
+    "expo-checkbox": "~3.0.0",
+    "expo-clipboard": "~6.0.3",
+    "expo-constants": "~16.0.1",
+    "expo-contacts": "~13.0.3",
+    "expo-crypto": "~13.0.2",
+    "expo-dev-client": "~4.0.10",
+    "expo-device": "~6.0.2",
+    "expo-document-picker": "~12.0.1",
+    "expo-face-detector": "~12.7.1",
+    "expo-file-system": "~17.0.1",
+    "expo-font": "~12.0.4",
+    "expo-gl": "~14.0.2",
+    "expo-google-app-auth": "~8.3.0",
+    "expo-haptics": "~13.0.1",
+    "expo-image": "~1.12.8",
+    "expo-image-loader": "~4.7.0",
+    "expo-image-manipulator": "~12.0.3",
+    "expo-image-picker": "~15.0.4",
+    "expo-intent-launcher": "~11.0.1",
+    "expo-insights": "~0.7.0",
+    "expo-keep-awake": "~13.0.1",
+    "expo-linear-gradient": "~13.0.2",
+    "expo-linking": "~6.3.1",
+    "expo-local-authentication": "~14.0.1",
+    "expo-localization": "~15.0.3",
+    "expo-location": "~17.0.1",
+    "expo-mail-composer": "~13.0.1",
+    "expo-media-library": "~16.0.3",
+    "expo-module-template": "~10.14.6",
+    "expo-modules-core": "~1.12.9",
+    "expo-navigation-bar": "~3.0.4",
+    "expo-network": "~6.0.1",
+    "expo-notifications": "~0.28.1",
+    "expo-print": "~13.0.1",
+    "expo-random": "~14.0.1",
+    "expo-router": "~3.5.9",
+    "expo-screen-capture": "~6.0.1",
+    "expo-screen-orientation": "~7.0.3",
+    "expo-secure-store": "~13.0.1",
+    "expo-sensors": "~13.0.5",
+    "expo-sharing": "~12.0.1",
+    "expo-sms": "~12.0.1",
+    "expo-speech": "~12.0.1",
+    "expo-splash-screen": "~0.27.4",
+    "expo-sqlite": "~14.0.3",
+    "expo-status-bar": "~1.12.1",
+    "expo-store-review": "~7.0.2",
+    "expo-symbols": "~0.1.4",
+    "expo-system-ui": "~3.0.4",
+    "expo-task-manager": "~11.8.1",
+    "expo-tracking-transparency": "~4.0.2",
+    "expo-updates": "~0.25.8",
+    "expo-video-thumbnails": "~8.0.0",
+    "expo-web-browser": "~13.0.3",
+    "jest-expo": "~51.0.1",
+    "lottie-react-native": "6.7.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.74.1",
+    "react-native-web": "~0.19.10",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-get-random-values": "~1.11.0",
+    "react-native-maps": "1.14.0",
+    "react-native-pager-view": "6.3.0",
+    "react-native-reanimated": "3.10.0",
+    "react-native-screens": "3.31.1",
+    "react-native-safe-area-context": "4.10.1",
+    "react-native-svg": "15.2.0-rc.0",
+    "react-native-view-shot": "3.8.0",
+    "react-native-webview": "13.8.6",
+    "sentry-expo": "~7.0.0",
+    "unimodules-app-loader": "~4.6.0",
+    "unimodules-image-loader-interface": "~6.1.0",
+    "@shopify/react-native-skia": "1.2.3",
+    "@shopify/flash-list": "1.6.4",
+    "@sentry/react-native": "~5.22.0"
   }
 }
diff --git a/packages/snack-sdk/src/__fixtures__/snackager.ts b/packages/snack-sdk/src/__fixtures__/snackager.ts
@@ -69,6 +69,10 @@ const config: SnackagerConfig = {
       version: '13.10.5',
       peerDependencies,
     },
+    'expo-av@~14.0.2': {
+      version: '14.0.2',
+      peerDependencies,
+    },
     '@react-navigation/native@5.1.1': {
       peerDependencies,
     },

diff --git a/packages/snack-sdk/src/__tests__/__snapshots__/dependencies-test.ts.snap b/packages/snack-sdk/src/__tests__/__snapshots__/dependencies-test.ts.snap
@@ -12,7 +12,7 @@ Object {
   },
   "expo-font": Object {
     "version": "8.1.0",
-    "wantedVersion": "~11.4.0",
+    "wantedVersion": "~11.10.3",
   },
   "react-native-paper": Object {
     "handle": "snackager-1/react-native-paper@3.10.1",
@@ -108,45 +108,45 @@ Object {
       "@react-navigation/stack",
       "@react-navigation/drawer",
     ],
-    "wantedVersion": "~2.12.0",
+    "wantedVersion": "~2.14.0",
   },
   "react-native-reanimated": Object {
     "dependents": Array [
       "@react-navigation/drawer",
     ],
-    "wantedVersion": "~3.3.0",
+    "wantedVersion": "~3.6.2",
   },
   "react-native-safe-area-context": Object {
     "dependents": Array [
       "@react-navigation/stack",
       "@react-navigation/drawer",
     ],
-    "wantedVersion": "4.6.3",
+    "wantedVersion": "4.8.2",
   },
   "react-native-screens": Object {
     "dependents": Array [
       "@react-navigation/stack",
       "@react-navigation/drawer",
     ],
-    "wantedVersion": "~3.22.0",
+    "wantedVersion": "~3.29.0",
   },
 }
 `;
 
 exports[`dependencies resolves * after enabling 1`] = `
 Object {
   "expo-constants": Object {
-    "version": "~14.4.2",
-    "wantedVersion": "~14.4.2",
+    "version": "~15.4.6",
+    "wantedVersion": "~15.4.6",
   },
 }
 `;
 
 exports[`dependencies resolves * to wanted version 1`] = `
 Object {
   "expo-constants": Object {
-    "version": "~14.4.2",
-    "wantedVersion": "~14.4.2",
+    "version": "~15.4.6",
+    "wantedVersion": "~15.4.6",
   },
 }
 `;
@@ -176,7 +176,7 @@ Object {
   },
   "expo-font": Object {
     "version": "~10.0.4",
-    "wantedVersion": "~11.4.0",
+    "wantedVersion": "~11.10.3",
   },
   "react-native-paper": Object {
     "handle": "snackager-1/react-native-paper@3.10.1",
@@ -206,27 +206,27 @@ Object {
 exports[`dependencies updates preloaded module version when changing SDK version 1`] = `
 Object {
   "expo-av": Object {
-    "handle": "snackager-1/expo-av@13.4.1",
+    "handle": "snackager-1/expo-av@13.10.5",
     "peerDependencies": Object {
       "react": "*",
       "react-native": "*",
     },
-    "version": "~13.4.1",
-    "wantedVersion": "~13.4.1",
+    "version": "~13.10.5",
+    "wantedVersion": "~13.10.5",
   },
 }
 `;
 
 exports[`dependencies updates preloaded module version when changing SDK version 2`] = `
 Object {
   "expo-av": Object {
-    "handle": "snackager-1/expo-av@13.10.5",
+    "error": [Error: Failed to resolve dependency 'expo-av@~14.0.3' (Package 'expo-av@~14.0.3' not found in the registry)],
     "peerDependencies": Object {
       "react": "*",
       "react-native": "*",
     },
-    "version": "~13.10.5",
-    "wantedVersion": "~13.10.5",
+    "version": "~14.0.3",
+    "wantedVersion": "~14.0.3",
   },
 }
 `;