Merge remote-tracking branch 'origin/main' into node-commonjs

Author: simolus3

.changeset/slimy-glasses-jog.md

@@ -0,0 +1,6 @@
+---
+'@powersync/react': patch
+'@powersync/react-native': patch
+---
+
+Fixed an issue with `useQuery` where initial query/parameter changes could cause a race condition if the first query took long.

.changeset/yellow-countries-warn.md

@@ -0,0 +1,5 @@
+---
+'@powersync/node': patch
+---
+
+Update readme to refer to Node.js docs

demos/angular-supabase-todolist/src/app/supabase.service.ts

@@ -8,7 +8,7 @@ import {
   type User
 } from '@supabase/supabase-js';
 import { environment } from '../environment';
-import { type AbstractPowerSyncDatabase, type CrudEntry, UpdateType, PowerSyncBackendConnector } from '@powersync/web';
+import { type AbstractPowerSyncDatabase, type CrudEntry, UpdateType, PowerSyncBackendConnector, type PowerSyncCredentials } from '@powersync/web';
 
 /// Postgres Response codes that we cannot recover from by retrying.
 const FATAL_RESPONSE_CODES = [
@@ -67,7 +67,7 @@ export class SupabaseService implements PowerSyncBackendConnector {
     return {
       endpoint: environment.powersyncUrl,
       token: session.access_token ?? ''
-    };
+    } satisfies PowerSyncCredentials;
   }
 
   authChanges(callback: (event: AuthChangeEvent, session: Session | null) => void) {

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

@@ -0,0 +1,74 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+**/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+**/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

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

@@ -0,0 +1 @@
+{}

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

@@ -0,0 +1,170 @@
+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 {
+  Colors,
+  DebugInstructions,
+  Header,
+  LearnMoreLinks,
+  ReloadInstructions,
+} from 'react-native/Libraries/NewAppScreen';
+import { OPSqliteOpenFactory } from '@powersync/op-sqlite';
+import { column, Schema, Table, PowerSyncDatabase } from '@powersync/react-native';
+
+/**
+ * A placeholder connector which doesn't do anything but used to confirm connect can run.
+ */
+class DummyConnector {
+  async fetchCredentials() {
+    return {
+      endpoint: '',
+      token: '',
+    };
+  }
+
+  async uploadData() {}
+}
+
+const customers = new Table({ name: column.text });
+
+const schema = new Schema({ customers });
+
+let powerSync: PowerSyncDatabase | null = null;
+
+const setupDatabase = async () => {
+  if (powerSync) return powerSync;
+
+  const factory = new OPSqliteOpenFactory({
+    dbFilename: 'powersync.db',
+  });
+
+  powerSync = new PowerSyncDatabase({
+    schema,
+    database: factory,
+  });
+
+  await powerSync.init();
+  return powerSync;
+};
+
+type SectionProps = PropsWithChildren<{
+  title: string;
+}>;
+
+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,
+          },
+        ]}>
+        {title}
+      </Text>
+      <Text
+        style={[
+          styles.sectionDescription,
+          {
+            color: isDarkMode ? Colors.light : Colors.dark,
+          },
+        ]}>
+        {children}
+      </Text>
+    </View>
+  );
+}
+
+function App(): React.JSX.Element {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  useEffect(() => {
+    const initDB = async () => {
+      try {
+        const db = await setupDatabase();
+
+        // Test database operations
+        await db.execute('INSERT INTO customers(id, name) VALUES(uuid(), ?)', ['Fred']);
+        const result = await db.getAll('SELECT * FROM customers');
+        console.log('Customers:', result);
+
+        // Connect with dummy connector
+        await db.connect(new DummyConnector());
+      } catch (error) {
+        console.error('Database initialization error:', error);
+      }
+    };
+
+    initDB();
+  }, []);
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar
+        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+        backgroundColor={backgroundStyle.backgroundColor}
+      />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={backgroundStyle}>
+        <Header />
+        <View
+          style={{
+            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.
+          </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>
+          <LearnMoreLinks />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  sectionContainer: {
+    marginTop: 32,
+    paddingHorizontal: 24,
+  },
+  sectionTitle: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  sectionDescription: {
+    marginTop: 8,
+    fontSize: 18,
+    fontWeight: '400',
+  },
+  highlight: {
+    fontWeight: '700',
+  },
+});
+
+export default App;

demos/react-native-barebones-opsqlite/Gemfile

@@ -0,0 +1,10 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'
+gem 'concurrent-ruby', '< 1.3.4'