refactor(snack-runtime): upgrade snack-runtime to sdk 52

packages/snack-runtime/babel.config.js

@@ -2,6 +2,6 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
-    // plugins: ['@babel/plugin-proposal-export-namespace-from', 'react-native-reanimated/plugin'],
+    plugins: ['react-native-reanimated/plugin'],
   };
 };

packages/snack-runtime/package.json

@@ -43,46 +43,46 @@
     "source-map": "0.6.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.0",
+    "@babel/core": "^7.25.2",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^12.2.2",
-    "babel-preset-expo": "^11.0.0",
+    "babel-preset-expo": "~12.0.0",
     "eslint": "^8.56.0",
-    "eslint-config-universe": "^13.0.0",
-    "expo": "^51.0.31",
-    "expo-asset": "~10.0.10",
-    "expo-barcode-scanner": "~13.0.1",
-    "expo-constants": "~16.0.2",
-    "expo-file-system": "~17.0.1",
-    "expo-keep-awake": "~13.0.2",
-    "expo-random": "~14.0.1",
-    "expo-splash-screen": "~0.27.5",
-    "expo-status-bar": "~1.12.1",
+    "eslint-config-universe": "^14.0.0",
+    "expo": "~52.0.2",
+    "expo-asset": "~11.0.1",
+    "expo-camera": "~16.0.3",
+    "expo-constants": "~17.0.2",
+    "expo-crypto": "~14.0.1",
+    "expo-file-system": "~18.0.2",
+    "expo-keep-awake": "~14.0.1",
+    "expo-splash-screen": "~0.29.6",
+    "expo-status-bar": "~2.0.0",
     "jest": "^29.2.1",
-    "jest-expo": "~51.0.4",
+    "jest-expo": "~52.0.0",
     "prettier": "^3.2.4",
-    "react": "18.2.0",
-    "react-native": "0.74.5",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-view-shot": "3.8.0",
-    "react-test-renderer": "18.2.0",
+    "react": "18.3.1",
+    "react-native": "0.76.1",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-view-shot": "~4.0.0",
+    "react-test-renderer": "18.3.1",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "assert": "^2.1.0",
-    "expo": "^51.0.0",
-    "expo-asset": "~10.0.0",
-    "expo-barcode-scanner": "~13.0.0",
-    "expo-constants": "~16.0.0",
-    "expo-file-system": "~17.0.0",
-    "expo-keep-awake": "~13.0.0",
-    "expo-random": "~14.0.0",
-    "expo-splash-screen": "~0.27.0",
-    "expo-status-bar": "~1.12.0",
-    "react": "~18.2.0",
-    "react-native": "~0.74.5",
-    "react-native-gesture-handler": "~2.16.0",
-    "react-native-view-shot": "~3.8.0"
+    "expo": "^52.0.0",
+    "expo-asset": "~11.0.0",
+    "expo-camera": "~16.0.0",
+    "expo-constants": "~17.0.0",
+    "expo-crypto": "~14.0.0",
+    "expo-file-system": "~18.0.0",
+    "expo-keep-awake": "~14.0.0",
+    "expo-splash-screen": "~0.29.0",
+    "expo-status-bar": "~2.0.0",
+    "react": "~18.3.1",
+    "react-native": "~0.76.1",
+    "react-native-gesture-handler": "~2.20.0",
+    "react-native-view-shot": "~4.0.0"
   },
   "eslintConfig": {
     "extends": "universe/native",

packages/snack-runtime/src/App.tsx

@@ -12,7 +12,7 @@ import {
   EmitterSubscription,
   NativeEventSubscription,
 } from 'react-native';
-import { parseRuntimeUrl } from 'snack-content';
+import { parseRuntimeUrl } from 'snack-content/build/urls'; // NOTE(cedric): this is a workaround as 'snack-content/build/sdk' causes Hermes syntax crashes
 import { createVirtualModulePath } from 'snack-require-context';
 
 import { AppLoading } from './AppLoading';

packages/snack-runtime/src/BarCodeScannerView.native.tsx

@@ -1,12 +1,12 @@
-import { BarCodeScanner, BarCodeScannedCallback } from 'expo-barcode-scanner';
+import { Camera, CameraView, type CameraViewProps } from 'expo-camera';
 import Constants from 'expo-constants';
 import * as React from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 
 import LoadingView from './LoadingView';
 
 type Props = {
-  onBarCodeScanned: BarCodeScannedCallback;
+  onBarCodeScanned: CameraViewProps['onBarcodeScanned'];
   initialURL: string;
 };
 
@@ -26,7 +26,7 @@ export default class BarCodeScannerView extends React.Component<Props, State> {
   }
 
   _openCameraAsync = async () => {
-    const { status } = await BarCodeScanner.requestPermissionsAsync();
+    const { status } = await Camera.requestCameraPermissionsAsync();
 
     this.setState({
       waitingForPermission: false,
@@ -53,7 +53,7 @@ export default class BarCodeScannerView extends React.Component<Props, State> {
             Make sure to leave the web page open while you are running the project.
           </Text>
           {/* @ts-ignore Property 'style' does not exist on type */}
-          <BarCodeScanner style={styles.camera} onBarCodeScanned={onBarCodeScanned} />
+          <CameraView style={styles.camera} onBarCodeScanned={onBarCodeScanned} />
         </View>
       );
     }

packages/snack-runtime/src/BarCodeScannerView.tsx

@@ -1,10 +1,10 @@
-import type { BarCodeEvent } from 'expo-barcode-scanner';
+import type { BarcodeScanningResult } from 'expo-camera';
 import Constants from 'expo-constants';
 import * as React from 'react';
 import { View, TextInput, StyleSheet } from 'react-native';
 
 type Props = {
-  onBarCodeScanned: (event: Pick<BarCodeEvent, 'type' | 'data'>) => any;
+  onBarCodeScanned: (event: Pick<BarcodeScanningResult, 'type' | 'data'>) => any;
   initialURL: string;
 };
 

packages/snack-runtime/src/Modules.tsx

@@ -24,7 +24,7 @@ import { SourceMapConsumer, RawSourceMap } from 'source-map';
 import { SNACKAGER_API_URLS } from './Constants';
 import * as Files from './Files';
 import * as Logger from './Logger';
-import AssetRegistry from './NativeModules/AssetRegistry';
+import * as AssetRegistry from './NativeModules/AssetRegistry';
 import FileSystem from './NativeModules/FileSystem';
 import * as Profiling from './Profiling';
 import { SnackConfig } from './config/SnackConfig';
@@ -59,18 +59,21 @@ const cacheBuster = '2';
 
 // We access this for its side effects because it is lazily loaded.
 // See https://github.com/expo/expo-asset/blob/6698f2a6dc657a0b12bf29a22e62c83c9fd8ed3a/src/Asset.js#L186-L190
-Asset; // eslint-disable-line no-unused-expressions,@typescript-eslint/no-unused-vars
+Asset; // eslint-disable-line no-unused-expressions,@typescript-eslint/no-unused-vars, @typescript-eslint/no-unused-expressions
 
 // Load react-native-gesture-handler, so RCTView's directEventTypes are set before bridge is fully initialized.
 // See https://github.com/kmagiera/react-native-gesture-handler/blob/master/GestureHandler.js#L46
-GestureHandler; // eslint-disable-line no-unused-expressions,@typescript-eslint/no-unused-vars
+GestureHandler; // eslint-disable-line no-unused-expressions,@typescript-eslint/no-unused-vars, @typescript-eslint/no-unused-expressions
 
 // Set the `__DEV__` variable to `false` because we are running a context without Metro.
 // Unfortunately, this is handled by the bundler such as Metro or Webpack.
 // That's not available inside the Snack Runtime itself.
 // see: https://twitter.com/jamonholmgren/status/1561798978269618177
 // @ts-expect-error
-global['__DEV__'] = false;
+if (typeof global['__DEV__'] !== 'boolean') {
+  // @ts-expect-error
+  global['__DEV__'] = false;
+}
 
 // Maintain project-level dependency state in the `ExpoDependencyV2` format.
 // See https://github.com/expo/universe/blob/64a2eab474d11614c5b403f09747fdb112769a39/libraries/snack-sdk/src/types.js#L114-L126.

packages/snack-runtime/src/NativeModules/AssetRegistry.tsx

@@ -1,19 +1,6 @@
-// @ts-ignore
-import * as AssetRegistry from 'react-native-web/dist/modules/AssetRegistry';
-
-export type PackagerAsset = {
-  hash: string;
-  name: string;
-  scales: number[];
-  fileHashes: string[];
-  httpServerLocation: string;
-  uri: string;
-  width?: number;
-  height?: number;
-  type?: string;
-};
-
-export default AssetRegistry as {
-  registerAsset(asset: PackagerAsset): number;
-  getAssetByID(assetID: number): PackagerAsset | undefined;
-};
+export {
+  type AssetDestPathResolver,
+  type PackagerAsset,
+  registerAsset,
+  getAssetByID,
+} from '@react-native/assets-registry/registry';

packages/snack-runtime/src/NativeModules/getDeviceIdAsync.tsx

@@ -1,10 +1,10 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import * as Random from 'expo-random';
+import { getRandomBytesAsync } from 'expo-crypto';
 
 export default async function getDeviceIdAsync() {
   const value = await AsyncStorage.getItem('SnackDeviceId');
   if (value) return value;
-  const byteArray = await Random.getRandomBytesAsync(16);
+  const byteArray = await getRandomBytesAsync(16);
   const hexString = [...new Uint8Array(byteArray.buffer)]
     .map((x) => x.toString(16).padStart(2, '0'))
     .join('');

packages/snack-runtime/src/NativeModules/getDeviceIdAsync.web.tsx

@@ -1,4 +1,4 @@
-import * as Random from 'expo-random';
+import { getRandomBytesAsync } from 'expo-crypto';
 
 let fallbackStore: string | null = null;
 
@@ -26,7 +26,7 @@ export default async function getDeviceIdAsync() {
     return value;
   }
 
-  const byteArray = await Random.getRandomBytesAsync(16);
+  const byteArray = await getRandomBytesAsync(16);
   const hexString = [...new Uint8Array(byteArray.buffer)]
     .map((x) => x.toString(16).padStart(2, '0'))
     .join('');

packages/snack-runtime/src/aliases/common.tsx

@@ -1,4 +1,4 @@
-import AssetRegistry from '../NativeModules/AssetRegistry';
+import * as AssetRegistry from '../NativeModules/AssetRegistry';
 import * as SkiaWeb from '../NativeModules/ReactNativeSkia';
 
 const aliases: { [key: string]: any } = {
@@ -8,6 +8,7 @@ const aliases: { [key: string]: any } = {
 
   // Needed for loading assets from packages bundled by snackager
   AssetRegistry,
+  '@react-native/assets-registry/registry': AssetRegistry,
 
   // Packages that require special initialisation (see Modules.tsx)
   'expo-asset': require('expo-asset'),

packages/snack-runtime/src/aliases/index.tsx

@@ -1,5 +1,5 @@
 import common from './common';
-import AssetRegistry from '../NativeModules/AssetRegistry';
+import * as AssetRegistry from '../NativeModules/AssetRegistry';
 
 const aliases: { [key: string]: any } = {
   ...common,

packages/snack-runtime/src/aliases/index.web.tsx

@@ -1,5 +1,5 @@
 import common from './common';
-import AssetRegistry from '../NativeModules/AssetRegistry';
+import * as AssetRegistry from '../NativeModules/AssetRegistry';
 
 const aliases: { [key: string]: any } = {
   ...common,

packages/snack-runtime/types/AssetRegistry.d.ts

@@ -1,19 +1,20 @@
-declare module 'react-native/Libraries/Image/AssetRegistry' {
+declare module '@react-native/assets-registry/registry' {
+  export type AssetDestPathResolver = 'android' | 'generic';
+
   export type PackagerAsset = {
     __packager_asset: boolean;
     fileSystemLocation: string;
     httpServerLocation: string;
     width?: number;
     height?: number;
     scales: number[];
-    fileHashes?: string[];
-    uri?: string;
     hash: string;
     name: string;
     type: string;
+    resolver: AssetDestPathResolver;
+    fileHashes?: string[];
+    uri?: string;
   };
 
   export function registerAsset(asset: Partial<PackagerAsset>): number;
-
-  export function getAssetByID(assetId: number): PackagerAsset;
 }