set up metro bundler for canvas (#1)

* clean up configs

* fix resolutions, use vendorized metro-resolver that supports imports field in package.json

* add polyfills for canvas

Author: raykyri

apps/expo/metro.config.js

@@ -13,14 +13,19 @@ const config = getDefaultConfig(projectRoot)
 
 // 1. Watch all files within the monorepo
 config.watchFolders = [workspaceRoot]
+
 // 2. Let Metro know where to resolve packages and in what order
 config.resolver.nodeModulesPaths = [
   path.resolve(projectRoot, 'node_modules'),
   path.resolve(workspaceRoot, 'node_modules'),
 ]
-// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
+
+// 3. Force Metro to resolve (sub)dependencies only from `nodeModulesPaths`
 config.resolver.disableHierarchicalLookup = true
 
+// 4. Read the `exports` field, instead of just `main`, in package.json
+config.resolver.unstable_enablePackageExports = true
+
 config.transformer = { ...config.transformer, unstable_allowRequireContext: true }
 config.transformer.minifierPath = require.resolve('metro-minify-terser')
 

apps/expo/package.json

@@ -16,6 +16,7 @@
     "@ipld/dag-cbor": "^9.2.2",
     "@libp2p/interface": "^2.2.0",
     "@my/ui": "0.0.1",
+    "@react-native-masked-view/masked-view": "^0.3.2",
     "app": "0.0.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "burnt": "^0.12.2",
@@ -49,9 +50,5 @@
   },
   "browser": {
     "crypto": false
-  },
-  "resolutions": {
-    "metro": "git+ssh://[email protected]/facebook/metro.git#78db442",
-    "metro-resolver": "git+ssh://[email protected]/facebook/metro.git#78db442"
   }
 }

package.json

@@ -27,7 +27,9 @@
     "react-dom": "^18.3.1",
     "react-refresh": "^0.14.0",
     "react-native-svg": "15.3.0",
-    "react-native-web": "~0.19.12"
+    "react-native-web": "~0.19.12",
+    "metro": "0.81.0",
+    "metro-resolver": "git+ssh://[email protected]/raykyri/metro.git#7a4c6a1854891387c77dbc7cfcb9ac9b4db475b5"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.6",

packages/app/features/home/screen.tsx

@@ -19,47 +19,50 @@ import { ChevronDown, ChevronUp, X } from '@tamagui/lucide-icons'
 import { useState } from 'react'
 import { Platform } from 'react-native'
 import { useLink } from 'solito/navigation'
+
+import 'event-target-polyfill'
+import 'fast-text-encoding'
 import { useCanvas } from '@canvas-js/hooks'
 
 export function HomeScreen({ pagesMode = false }: { pagesMode?: boolean }) {
   const linkTarget = pagesMode ? '/pages-example-user' : '/user'
 
   const [itemHistory, setItemHistory] = useState([
-    { username: "max", user: "Max", item: "The Strokes" },
-    { username: "max", user: "Max", item: "The Inner Game of Tennis" },
-    { username: "raymond", user: "Raymond", item: "Designing Data-Driven Applications" },
-    { username: "raymond", user: "Raymond", item: "Intermezzo" },
+    { username: 'max', user: 'Max', item: 'The Strokes' },
+    { username: 'max', user: 'Max', item: 'The Inner Game of Tennis' },
+    { username: 'raymond', user: 'Raymond', item: 'Designing Data-Driven Applications' },
+    { username: 'raymond', user: 'Raymond', item: 'Intermezzo' },
   ])
 
   const { app } = useCanvas(null, {
     contract: {
       models: {
         profiles: {
-          did: "primary",
-          name: "string",
-          items: "@items[]", // TODO
-          image: "string?", // TODO
+          did: 'primary',
+          name: 'string',
+          items: '@items[]', // TODO
+          image: 'string?', // TODO
         },
         items: {
-          id: "primary",
-          name: "string",
-          image: "string?",
-          children: "@items[]", // TODO
-          parent: "@items", // TODO
-        }
+          id: 'primary',
+          name: 'string',
+          image: 'string?',
+          children: '@items[]', // TODO
+          parent: '@items', // TODO
+        },
       },
       actions: {
         createProfile(db, name) {
           const { did } = this
-          db.create("profiles", { did, name, items: [], image: null })
+          db.create('profiles', { did, name, items: [], image: null })
         },
         updateProfile(db, name) {
           const { did } = this
-          db.update("profiles", { did, name })
-        }
-      }
+          db.update('profiles', { did, name })
+        },
+      },
     },
-    topic: "refs.canvas.xyz"
+    topic: 'refs.canvas.xyz',
   })
 
   return (
@@ -98,26 +101,32 @@ export function HomeScreen({ pagesMode = false }: { pagesMode?: boolean }) {
             const itemLinkProps = useLink({
               href: `${linkTarget}/${item.username}`,
             })
-            
+
             return (
-              <XStack 
-                key={index} 
-                gap="$3" 
-                ai="center" 
-                p="$2" 
-                br="$4" 
-                bw={1} 
+              <XStack
+                key={index}
+                gap="$3"
+                ai="center"
+                p="$2"
+                br="$4"
+                bw={1}
                 borderColor="$gray8"
                 pressStyle={{ opacity: 0.8 }}
                 {...itemLinkProps}
               >
                 <Avatar circular size="$3">
                   <Avatar.Image source={{ uri: `https://i.pravatar.cc/150?u=${item.user}` }} />
-                  <Avatar.Fallback bc="$gray5"><Text>{item.user[0]}</Text></Avatar.Fallback>
+                  <Avatar.Fallback bc="$gray5">
+                    <Text>{item.user[0]}</Text>
+                  </Avatar.Fallback>
                 </Avatar>
                 <YStack>
-                  <Paragraph size="$3" fontWeight="bold">{item.user}</Paragraph>
-                  <Paragraph size="$2" col="$gray11">{item.item}</Paragraph>
+                  <Paragraph size="$3" fontWeight="bold">
+                    {item.user}
+                  </Paragraph>
+                  <Paragraph size="$2" col="$gray11">
+                    {item.item}
+                  </Paragraph>
                 </YStack>
               </XStack>
             )

packages/app/package.json

@@ -20,12 +20,15 @@
     "@tamagui/shorthands": "^1.116.12",
     "@tamagui/themes": "^1.116.12",
     "burnt": "^0.12.2",
+    "event-target-polyfill": "^0.0.4",
     "expo-constants": "~16.0.2",
     "expo-linking": "~6.3.1",
+    "fast-text-encoding": "^1.0.6",
     "react-native-safe-area-context": "4.10.4",
     "solito": "^4.2.2"
   },
   "devDependencies": {
+    "@types/fast-text-encoding": "^1",
     "@types/react": "^18.3.3",
     "@types/react-native": "^0.73.0"
   }