refactor(snack-runtime): split runtime app into reusable package and app

.github/workflows/packages.yml

@@ -26,20 +26,24 @@ jobs:
   review:
     runs-on: ubuntu-latest
     strategy:
+      fail-fast: false
       matrix:
         package:
           - snack-babel-standalone
           - snack-content
           - snack-eslint-standalone
           - snack-proxies
           - snack-require-context
+          - snack-runtime
           - snack-sdk
           - snack-term
         include:
           - package: snack-babel-standalone
             local-install: true
           - package: snack-eslint-standalone
             local-install: true
+          - package: snack-runtime
+            local-install: true
     steps:
       - name: 🏗 Setup repository
         uses: actions/checkout@v3

packages/snack-runtime/.eslintignore

@@ -0,0 +1,4 @@
+build/
+example/
+node_modules/
+vendor/

packages/snack-runtime/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['universe/native'],
+};

packages/snack-runtime/.gitignore

@@ -0,0 +1,2 @@
+.expo/
+web-build/

packages/snack-runtime/README.md

@@ -0,0 +1,74 @@
+# snack-runtime
+
+The core system to load and open Snacks within React Native apps.
+
+> ⚠️ **Warning**:
+> This package consumes Snack infrastructure and **requires** a license from Expo. If you are interested, [contact us](https://expo.dev/contact) and ask about the Snack custom runtime.
+
+## Installation
+
+```bash
+$ yarn add snack-runtime
+```
+
+## Usage
+
+```js
+import * as Updates from 'expo-updates';
+import {
+  type SnackConfig,
+  type SnackState,
+  defaultSnackModules,
+  SnackRuntimeProvider,
+  SnackRuntime,
+} from 'snack-runtime';
+
+const config: SnackConfig = {
+  modules: {
+    // Inherit the default set of modules from Snack
+    ...defaultSnackModules,
+    // Add modules that are available through imports within Snacks
+    'react-native-blurhash': require('react-native-blurhash'),
+  }
+};
+
+export function Snack() {
+  return (
+    <SnackRuntimeProvider config={config}>
+      <SnackRuntime
+        onSnackState={onStateChange}
+        onSnackReload={onReloadRequested}
+        snackUrl="<snackUrl>"
+      />
+    </SnackRuntimeProvider>
+  );
+}
+
+// Requested through the Snack website
+function onReloadRequested() {
+  return Updates.reloadAsync();
+}
+
+// When the lifecycle of a Snack changes
+function onStateChange(state: SnackState) {
+  if (state === 'loading') console.log('Snack is initializing the code...');
+  if (state === 'finished') console.log('Snack is ready and rendered!');
+  if (state === 'error') console.error('Snack failed to initialize, check the logs for more info.');
+
+  throw new Error(`Unexpected Snack state received "${state}"`);
+}
+```
+
+## Patches required
+
+Snack virtualizes the whole bundling and module systems, and because of that, requires a few patches to some libraries:
+
+- [`react-native`](../../runtime-shell/patches/react-native+0.71.8.patch) → To avoid "ViewManager is already loaded" errors
+- [`react-native-web`](../../runtime-shell/patches/react-native+0.71.8.patch) → To make sure the assets from Snack are loaded properly
+
+## Contributing
+
+This package has a few commands to help contributing to this package.
+
+- `yarn lint` → Ensures a unified code styling across the code base.
+- `yarn test` → Runs all unit tests to ensure functionality remains as-expected.

packages/snack-runtime/babel.config.js

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

packages/snack-runtime/index.ts

@@ -0,0 +1,7 @@
+export * from './src/utils/ExpoApi';
+export * from './src/utils/SnackAssets';
+export * from './src/utils/SnackUrls';
+
+export { default as SnackRuntime, type SnackState } from './src/App';
+export { SnackRuntimeProvider, type SnackConfig } from './src/config/SnackConfig';
+export { modules as defaultSnackModules } from './src/config/modules';

packages/snack-runtime/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "snack-runtime",
+  "version": "0.3.0-rc.3",
+  "description": "Load and run Expo Snacks in any React Native app",
+  "main": "index.ts",
+  "files": [
+    "assets",
+    "src",
+    "types",
+    "vendor"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/expo/snack.git",
+    "directory": "packages/snack-runtime"
+  },
+  "bugs": {
+    "url": "https://github.com/expo/snack/issues"
+  },
+  "author": "Expo <support@expo.dev>",
+  "license": "MIT",
+  "volta": {
+    "node": "16.14.2"
+  },
+  "scripts": {
+    "test": "jest",
+    "lint": "eslint . --ext js,jsx,ts,tsx",
+    "build": "echo 'This package ships TypeScript for Metro to compile.'"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.8.3",
+    "@react-native-async-storage/async-storage": "1.17.11",
+    "await-lock": "^2.2.2",
+    "canvaskit-wasm": "0.38.0",
+    "diff": "^5.0.0",
+    "escape-string-regexp": "^5.0.0",
+    "path": "^0.12.7",
+    "pubnub": "^7.2.0",
+    "snack-babel-standalone": "^2.2.2",
+    "snack-require-context": "^0.1.0",
+    "socket.io-client": "~4.5.4",
+    "source-map": "0.6.1"
+  },
+  "devDependencies": {
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react-native": "^12.2.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
+    "babel-preset-expo": "^9.3.0",
+    "eslint": "^8.20.0",
+    "eslint-config-universe": "^11.2.0",
+    "expo": "^48.0.19",
+    "expo-asset": "~8.9.0",
+    "expo-barcode-scanner": "~12.3.0",
+    "expo-constants": "~14.2.0",
+    "expo-file-system": "~15.2.0",
+    "expo-keep-awake": "~12.0.0",
+    "expo-random": "~13.1.0",
+    "expo-splash-screen": "~0.18.0",
+    "expo-status-bar": "~1.4.0",
+    "jest": "^29.2.1",
+    "jest-expo": "^48.0.0",
+    "react": "18.2.0",
+    "react-native": "0.71.8",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-view-shot": "3.5.0",
+    "react-test-renderer": "18.2.0"
+  },
+  "peerDependencies": {
+    "expo": "^48.0.0",
+    "expo-asset": "~8.9.0",
+    "expo-barcode-scanner": "~12.3.0",
+    "expo-constants": "~14.2.0",
+    "expo-file-system": "~15.2.0",
+    "expo-keep-awake": "~12.0.0",
+    "expo-random": "~13.1.0",
+    "expo-splash-screen": "~0.18.0",
+    "expo-status-bar": "~1.4.0",
+    "react": "~18.2.0",
+    "react-native": "~0.71.8",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-view-shot": "~3.5.0"
+  },
+  "jest": {
+    "preset": "jest-expo",
+    "clearMocks": true
+  }
+}