Add expo driver

Author: ai

.gitignore

@@ -1,2 +1,5 @@
 node_modules/
-test/demo/dist/
+test/demo-vite/dist/
+test/demo-metro/.expo/
+test/demo-metro/dist/
+test/demo-metro/node_modules/

expo/index.js

@@ -1 +1,61 @@
-export function expoDriver() {}
+import { addDatabaseChangeListener, openDatabaseAsync } from 'expo-sqlite'
+
+export function expoDriver(filename) {
+  let dbReady = openDatabaseAsync(filename, { enableChangeListener: true })
+  let subscribers = new Map()
+  let nextId = 0
+
+  async function notifySubscribers() {
+    let db = await dbReady
+    await Promise.all(
+      Array.from(subscribers.values()).map(async sub => {
+        let rows = await db.getAllAsync(sub.query, sub.params)
+        sub.cb(rows)
+      })
+    )
+  }
+
+  let subscription = addDatabaseChangeListener(() => {
+    void notifySubscribers()
+  })
+
+  let driver = {
+    subscribe(query, params, cb) {
+      let id = nextId++
+      subscribers.set(id, { query, params, cb })
+      void dbReady.then(db => {
+        void db.getAllAsync(query, params).then(rows => {
+          if (subscribers.has(id)) cb(rows)
+        })
+      })
+      return () => {
+        subscribers.delete(id)
+      }
+    },
+
+    async exec(query, params) {
+      let db = await dbReady
+      await db.runAsync(query, params)
+    },
+
+    async transaction(callback) {
+      let db = await dbReady
+      await db.withTransactionAsync(async () => {
+        await callback({
+          subscribe: driver.subscribe,
+          async exec(query, params) {
+            await db.runAsync(query, params)
+          }
+        })
+      })
+    },
+
+    async close() {
+      subscription.remove()
+      subscribers.clear()
+      let db = await dbReady
+      await db.closeAsync()
+    }
+  }
+  return driver
+}

oxlint.config.ts

@@ -15,7 +15,7 @@ export default defineConfig({
       }
     },
     {
-      files: ['test/demo/*.ts'],
+      files: ['test/demo-vite/*.ts'],
       rules: {
         'no-console': 'off',
         'typescript/no-unsafe-assignment': 'off',

package.json

@@ -37,9 +37,12 @@
     "test:coverage": "pnpm bnt --coverage 100 --coverage-exclude 'test/*'",
     "test:types": "check-dts",
     "test:size": "size-limit",
-    "test:build": "vite build ./test/demo",
+    "test:build:rest": "vite build ./test/demo-vite",
+    "test:build:metro": "cd test/demo-metro && pnpm expo export --platform web",
     "test": "pnpm run /^test:/",
-    "start": "vite ./test/demo --host 0.0.0.0"
+    "start:vite": "vite ./test/demo-vite --host 0.0.0.0",
+    "start:metro": "cd test/demo-metro && pnpm expo start --web --port 5174",
+    "start": "pnpm run /^start:/"
   },
   "devDependencies": {
     "@electric-sql/pglite": "^0.4.3",

test/demo-metro/.npmrc

@@ -0,0 +1 @@
+node-linker=hoisted

test/demo-metro/App.jsx

@@ -0,0 +1,99 @@
+import { useStore } from '@nanostores/react'
+import { Button, StyleSheet, Text, View } from 'react-native'
+
+import { expoDriver } from '../../expo/index.js'
+import { migrateIfNeeded, openDb } from '../../index.js'
+
+let db = openDb(expoDriver('expo-demo.sqlite'))
+
+let $migration = migrateIfNeeded(db, 1, async prevVersion => {
+  if (prevVersion < 1) {
+    await db.exec`CREATE TABLE counters
+      (id INTEGER PRIMARY KEY AUTOINCREMENT, value INTEGER NOT NULL DEFAULT 0)`
+  }
+})
+
+function CounterList() {
+  let $counters = db.store`SELECT * FROM counters ORDER BY id`
+  let state = useStore($counters)
+
+  if (state.isLoading) {
+    return <Text>Loading…</Text>
+  }
+
+  let counters = state.value ?? []
+
+  return (
+    <View>
+      {counters.map(({ id, value }) => (
+        <View key={id} style={styles.counter}>
+          <Text style={styles.id}>#{id}</Text>
+          <Button
+            title="−"
+            onPress={() =>
+              db.exec`UPDATE counters SET value = value - 1 WHERE id = ${id}`
+            }
+          />
+          <Text style={styles.value}>{value}</Text>
+          <Button
+            title="+"
+            onPress={() =>
+              db.exec`UPDATE counters SET value = value + 1 WHERE id = ${id}`
+            }
+          />
+          <Button
+            title="Delete"
+            onPress={() => db.exec`DELETE FROM counters WHERE id = ${id}`}
+          />
+        </View>
+      ))}
+      <Button
+        title="Add counter"
+        onPress={() => db.exec`INSERT INTO counters (value) VALUES (0)`}
+      />
+    </View>
+  )
+}
+
+function renderContent(migration) {
+  if ('applying' in migration) return <Text>Running migrations…</Text>
+  if ('outdated' in migration) return <Text>Page outdated, please reload.</Text>
+  return <CounterList />
+}
+
+export default function App() {
+  let migration = useStore($migration)
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Nano Stores SQL Demo (Expo)</Text>
+      {renderContent(migration)}
+    </View>
+  )
+}
+
+let styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 40,
+    maxWidth: 480
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 20
+  },
+  counter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginVertical: 4
+  },
+  id: {
+    minWidth: 40
+  },
+  value: {
+    minWidth: 40,
+    textAlign: 'center'
+  }
+})

test/demo-metro/app.json

@@ -0,0 +1,11 @@
+{
+  "expo": {
+    "name": "Nano Stores SQL Demo",
+    "slug": "demo-rn",
+    "version": "0.0.0",
+    "platforms": ["web"],
+    "web": {
+      "bundler": "metro"
+    }
+  }
+}

test/demo-metro/index.js

@@ -0,0 +1,4 @@
+import { registerRootComponent } from 'expo'
+import App from './App'
+
+registerRootComponent(App)

test/demo-metro/metro.config.js

@@ -0,0 +1,28 @@
+let { getDefaultConfig } = require('expo/metro-config')
+let path = require('path')
+
+let projectRoot = __dirname
+let monorepoRoot = path.resolve(projectRoot, '../..')
+
+let config = getDefaultConfig(projectRoot)
+
+config.watchFolders = [monorepoRoot]
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(monorepoRoot, 'node_modules')
+]
+config.resolver.disableHierarchicalLookup = true
+
+// Add wasm asset support
+config.resolver.assetExts.push('wasm')
+
+// Add COEP and COOP headers to support SharedArrayBuffer
+config.server.enhanceMiddleware = middleware => {
+  return (req, res, next) => {
+    res.setHeader('Cross-Origin-Embedder-Policy', 'credentialless')
+    res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
+    middleware(req, res, next)
+  }
+}
+
+module.exports = config

test/demo-metro/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "demo-rn",
+  "version": "0.0.0",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start --web"
+  },
+  "dependencies": {
+    "@nanostores/react": "^1.1.0",
+    "expo": "~55.0.11",
+    "expo-sqlite": "~55.0.13",
+    "nanostores": "^1.2.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-native": "^0.84.1",
+    "react-native-web": "^0.21.2"
+  }
+}