Update opsqlite demo proj to work better w/ monorepos

Author: LucDeCaf

demos/react-native-barebones-opsqlite/.npmrc

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

demos/react-native-barebones-opsqlite/App.tsx

@@ -1,34 +1,26 @@
 import '@azure/core-asynciterator-polyfill';
 import React, { useEffect } from 'react';
-import type {PropsWithChildren} from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
+import type { PropsWithChildren } from 'react';
+import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, useColorScheme, View } from 'react-native';
 
 import {
   Colors,
   DebugInstructions,
   Header,
   LearnMoreLinks,
-  ReloadInstructions,
+  ReloadInstructions
 } from 'react-native/Libraries/NewAppScreen';
 import { OPSqliteOpenFactory } from '@powersync/op-sqlite';
-import { column, Schema, Table, PowerSyncDatabase } from '@powersync/react-native';
+import { column, Table, Schema, type PowerSyncBackendConnector, PowerSyncDatabase } from '@powersync/react-native';
 
 /**
  * A placeholder connector which doesn't do anything but used to confirm connect can run.
  */
-class DummyConnector {
+class DummyConnector implements PowerSyncBackendConnector {
   async fetchCredentials() {
     return {
       endpoint: '',
-      token: '',
+      token: ''
     };
   }
 
@@ -45,12 +37,12 @@ const setupDatabase = async () => {
   if (powerSync) return powerSync;
 
   const factory = new OPSqliteOpenFactory({
-    dbFilename: 'powersync.db',
+    dbFilename: 'powersync.db'
   });
 
   powerSync = new PowerSyncDatabase({
     schema,
-    database: factory,
+    database: factory
   });
 
   await powerSync.init();
@@ -61,26 +53,28 @@ type SectionProps = PropsWithChildren<{
   title: string;
 }>;
 
-function Section({children, title}: SectionProps): React.JSX.Element {
+function Section({ children, title }: SectionProps): React.JSX.Element {
   const isDarkMode = useColorScheme() === 'dark';
   return (
     <View style={styles.sectionContainer}>
       <Text
         style={[
           styles.sectionTitle,
           {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
+            color: isDarkMode ? Colors.white : Colors.black
+          }
+        ]}
+      >
         {title}
       </Text>
       <Text
         style={[
           styles.sectionDescription,
           {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
+            color: isDarkMode ? Colors.light : Colors.dark
+          }
+        ]}
+      >
         {children}
       </Text>
     </View>
@@ -91,7 +85,7 @@ function App(): React.JSX.Element {
   const isDarkMode = useColorScheme() === 'dark';
 
   const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter
   };
 
   useEffect(() => {
@@ -120,27 +114,24 @@ function App(): React.JSX.Element {
         barStyle={isDarkMode ? 'light-content' : 'dark-content'}
         backgroundColor={backgroundStyle.backgroundColor}
       />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
+      <ScrollView contentInsetAdjustmentBehavior="automatic" style={backgroundStyle}>
         <Header />
         <View
           style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
+            backgroundColor: isDarkMode ? Colors.black : Colors.white
+          }}
+        >
           <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
+            Edit <Text style={styles.highlight}>App.tsx</Text> to change this screen and then come back to see your
+            edits.
           </Section>
           <Section title="See Your Changes">
             <ReloadInstructions />
           </Section>
           <Section title="Debug">
             <DebugInstructions />
           </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
+          <Section title="Learn More">Read the docs to discover what to do next:</Section>
           <LearnMoreLinks />
         </View>
       </ScrollView>
@@ -151,20 +142,20 @@ function App(): React.JSX.Element {
 const styles = StyleSheet.create({
   sectionContainer: {
     marginTop: 32,
-    paddingHorizontal: 24,
+    paddingHorizontal: 24
   },
   sectionTitle: {
     fontSize: 24,
-    fontWeight: '600',
+    fontWeight: '600'
   },
   sectionDescription: {
     marginTop: 8,
     fontSize: 18,
-    fontWeight: '400',
+    fontWeight: '400'
   },
   highlight: {
-    fontWeight: '700',
-  },
+    fontWeight: '700'
+  }
 });
 
 export default App;