Monorepo [3/?] - redo WebExample

apps/common-app/package.json

@@ -1,5 +1,6 @@
 {
   "name": "common-app",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
     "build": "yarn patch-package",
@@ -45,14 +46,14 @@
     "eslint": "^8.0.0-0",
     "patch-package": "^7.0.0",
     "prettier": "^2.8.7",
-    "react-dom": "18.0.0",
+    "react": "18.2.0",
+    "react-native": "0.74.0",
     "react-native-gesture-handler": "^2.16.0",
     "react-native-pager-view": "^6.2.3",
     "react-native-reanimated": "workspace:*",
     "react-native-safe-area-context": "4.10.0-rc.1",
     "react-native-screens": "3.31.0-rc.1",
     "react-native-svg": "^15.2.0-rc.0",
-    "react-native-web": "~0.18.12",
     "typescript": "^5.0.2"
   }
 }

packages/react-native-reanimated/WebExample/.gitignore → apps/web-example/.gitignore

@@ -12,3 +12,4 @@ web-build/
 
 # macOS
 .DS_Store
+

apps/web-example/App.tsx

@@ -0,0 +1,5 @@
+import Apps from "common-app";
+
+export default function App() {
+  return <Apps />;
+}

apps/web-example/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+    npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

apps/web-example/app.json

@@ -0,0 +1,10 @@
+{
+  "expo": {
+    "name": "reanimated-web-example",
+    "slug": "reanimated-web-example",
+    "version": "0.0.1",
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

apps/web-example/babel.config.js

@@ -0,0 +1,12 @@
+module.exports = function (api) {
+  const disableBabelPlugin = process.env.DISABLE_BABEL_PLUGIN === "1";
+  // https://babeljs.io/docs/en/config-files#apicache
+  api.cache.invalidate(() => disableBabelPlugin);
+  if (disableBabelPlugin) {
+    console.log("Starting Web example without Babel plugin.");
+  }
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: disableBabelPlugin ? [] : ["react-native-reanimated/plugin"],
+  };
+};

apps/web-example/index.js

@@ -0,0 +1,8 @@
+import { registerRootComponent } from "expo";
+
+import App from "./App";
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

apps/web-example/metro.config.js

@@ -0,0 +1,18 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const path = require("path");
+
+// Find the project and workspace directories
+const projectRoot = __dirname;
+// This can be replaced with `find-yarn-workspace-root`
+const monorepoRoot = path.resolve(projectRoot, "../..");
+
+const config = getDefaultConfig(projectRoot);
+// 1. Watch all files within the monorepo
+config.watchFolders = [monorepoRoot];
+// 2. Let Metro know where to resolve packages and in what order
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, "node_modules"),
+  path.resolve(monorepoRoot, "node_modules"),
+];
+
+module.exports = config;

apps/web-example/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "web-example",
+  "main": "index.js",
+  "version": "0.0.1",
+  "scripts": {
+    "start": "expo start --web",
+    "start:noplugin": "DISABLE_BABEL_PLUGIN=1 yarn start",
+    "lint": "eslint --max-warnings=0 .",
+    "production": "yarn expo export -p web && yarn serve dist --single",
+    "build": ""
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^14.0.0",
+    "@react-navigation/native": "^6.0.2",
+    "common-app": "workspace:*",
+    "expo": "~51.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.74.0",
+    "react-native-reanimated": "workspace:*",
+    "react-native-web": "0.19.11"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@expo/metro-runtime": "^3.2.1",
+    "serve": "^14.2.3",
+    "typescript": "~5.3.3"
+  },
+  "private": true
+}

packages/react-native-reanimated/WebExample/tsconfig.json → apps/web-example/tsconfig.json

@@ -2,9 +2,14 @@
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "strict": true,
-    "rootDir": "..",
     "paths": {
-      "react-native-reanimated": ["./src"]
+      "@/*": [
+        "./*"
+      ]
     }
-  }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ]
 }