From 0198cfe66422e5313969fb7ca68f5504924a2825 Mon Sep 17 00:00:00 2001 From: Mugi Khan Date: Wed, 18 Dec 2024 14:38:12 +0200 Subject: [PATCH 1/2] Add documentation for FTS on react native --- usage/use-case-examples/full-text-search.mdx | 25 ++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/usage/use-case-examples/full-text-search.mdx b/usage/use-case-examples/full-text-search.mdx index b9d8bf2c..60fc4095 100644 --- a/usage/use-case-examples/full-text-search.mdx +++ b/usage/use-case-examples/full-text-search.mdx @@ -15,6 +15,8 @@ Currently, FTS is supported in: * Relies on the [sqlite\_async](https://pub.dev/documentation/sqlite_async/latest/) package for migrations * **Web:** [powersync-sdk-web](https://github.com/powersync-ja/powersync-js/blob/main/packages/web/README.md) ([JavaScript Web SDK](/client-sdk-references/javascript-web)) * Requires version 0.5.0 or greater of the SDK (incl. version 0.2.0 of the [wa-sqlite](https://github.com/powersync-ja/wa-sqlite) package) +* **React Native:** [powersync-react-native](https://github.com/powersync-ja/powersync-js/blob/main/packages/react-native/README.md) ([React Native SDK](/client-sdk-references/react-native-and-expo)) + * Requires version 1.16.0 or greater of the SDK (incl. version 2.2.1 of the [@powersync/react-native-quick-sqlite](https://github.com/powersync-ja/react-native-quick-sqlite) package) * [Kotlin](/client-sdk-references/kotlin-multiplatform) * [Swift](/client-sdk-references/swift) @@ -47,8 +49,9 @@ Future openDatabase() async { await configureFts(db); } ``` - + Note: The Web implementation does not use migrations. It creates the FTS tables separately in [utils/fts\_setup.ts](https://github.com/powersync-ja/powersync-js/blob/main/demos/react-supabase-todolist/src/app/utils/fts_setup.ts). + **TypeScript example:** @@ -60,7 +63,25 @@ SystemProvider = ({ children }: { children: React.ReactNode }) => { React.useEffect(() => { ... configureFts(); - } + }) +} +``` + + +Note: The react native implementation does not use migrations. It creates the FTS tables separately in [library/fts/fts\_setup.ts](https://github.com/powersync-ja/powersync-js/blob/main/demos/react-native-supabase-todolist/library/fts/fts_setup.ts). + + +```ts +// system.ts + +export class System { +... + powersync: PowerSyncDatabase; + ... + async init() { + ... + await configureFts(this.powersync); + } } ``` From 82327bbae5e1d34d797fa86fecffbaa9b3ef99fe Mon Sep 17 00:00:00 2001 From: benitav Date: Tue, 24 Dec 2024 14:05:17 +0200 Subject: [PATCH 2/2] Improve docs for React Native --- usage/use-case-examples/full-text-search.mdx | 93 +++++++++----------- 1 file changed, 41 insertions(+), 52 deletions(-) diff --git a/usage/use-case-examples/full-text-search.mdx b/usage/use-case-examples/full-text-search.mdx index 60fc4095..4abb4fd8 100644 --- a/usage/use-case-examples/full-text-search.mdx +++ b/usage/use-case-examples/full-text-search.mdx @@ -9,18 +9,11 @@ This requires creating a separate FTS5 table(s) to index the data, and updating Note that the availability of FTS is dependent on the underlying `sqlite` package used, as it is an extension that must first be enabled in the package. -Currently, FTS is supported in: +Full-text search is supported in all PowerSync client SDKs. Some SDKs have additional requirements: -* **Flutter:** [powersync.dart](https://github.com/powersync-ja/powersync.dart) ([PowerSync Flutter SDK](/client-sdk-references/flutter)) - * Relies on the [sqlite\_async](https://pub.dev/documentation/sqlite_async/latest/) package for migrations -* **Web:** [powersync-sdk-web](https://github.com/powersync-ja/powersync-js/blob/main/packages/web/README.md) ([JavaScript Web SDK](/client-sdk-references/javascript-web)) - * Requires version 0.5.0 or greater of the SDK (incl. version 0.2.0 of the [wa-sqlite](https://github.com/powersync-ja/wa-sqlite) package) -* **React Native:** [powersync-react-native](https://github.com/powersync-ja/powersync-js/blob/main/packages/react-native/README.md) ([React Native SDK](/client-sdk-references/react-native-and-expo)) - * Requires version 1.16.0 or greater of the SDK (incl. version 2.2.1 of the [@powersync/react-native-quick-sqlite](https://github.com/powersync-ja/react-native-quick-sqlite) package) -* [Kotlin](/client-sdk-references/kotlin-multiplatform) -* [Swift](/client-sdk-references/swift) - -**React Native:** SQLite recursive triggers are supported in the [React Native SDK](/client-sdk-references/react-native-and-expo), and it should be possible to implement FTS with some additional config. [This issue](https://github.com/ospfranco/react-native-quick-sqlite/issues/37) could be a good starting point. +* [**Flutter SDK**](/client-sdk-references/flutter): Uses the [sqlite_async](https://pub.dev/documentation/sqlite_async/latest/) package for migrations +* [**JavaScript/Web SDK**](/client-sdk-references/javascript-web): Requires version 0.5.0 or greater (including [wa-sqlite](https://github.com/powersync-ja/wa-sqlite) 0.2.0+) +* [**React Native SDK**](/client-sdk-references/react-native-and-expo): Requires version 1.16.0 or greater (including [@powersync/react-native-quick-sqlite](https://github.com/powersync-ja/react-native-quick-sqlite) 2.2.1+) ## Example Implementations @@ -28,8 +21,9 @@ FTS is implemented in the following demo apps: * [Flutter To-Do List App](https://github.com/powersync-ja/powersync.dart/tree/master/demos/supabase-todolist) * [React To-Do List App](https://github.com/powersync-ja/powersync-js/tree/main/demos/react-supabase-todolist) +* [React Native To-Do List App](https://github.com/powersync-ja/powersync-js/tree/main/demos/react-native-supabase-todolist) -We explain these implementations in more detail below. Example code is shown mainly in Dart, but references to the React equivalents are included where relevant, so you should be able to cross-reference. +We explain these implementations in more detail below. Example code is shown mainly in Dart, but references to the React or React Native equivalents are included where relevant, so you should be able to cross-reference. ## Walkthrough: Full-text search in the To-Do List Demo App @@ -37,63 +31,58 @@ We explain these implementations in more detail below. Example code is shown mai FTS tables are created when instantiating the client-side PowerSync database (DB). -This occurs in [powersync.dart](https://github.com/powersync-ja/powersync.dart/blob/master/demos/supabase-todolist/lib/powersync.dart#L186) (Flutter implementation) and [SystemProvider.tsx](https://github.com/powersync-ja/powersync-js/blob/main/demos/react-supabase-todolist/src/components/providers/SystemProvider.tsx#L41) (Web implementation). - -**Dart example:** - -```dart -// powersync.dart + + + ```dart + // https://github.com/powersync-ja/powersync.dart/blob/master/demos/supabase-todolist/lib/powersync.dart#L186 -Future openDatabase() async { -... + Future openDatabase() async { + ... await configureFts(db); -} -``` - -Note: The Web implementation does not use migrations. It creates the FTS tables separately in [utils/fts\_setup.ts](https://github.com/powersync-ja/powersync-js/blob/main/demos/react-supabase-todolist/src/app/utils/fts_setup.ts). - - -**TypeScript example:** - -```ts -// SystemProvider.tsx + } + ``` + + + ```ts + // https://github.com/powersync-ja/powersync-js/blob/main/demos/react-supabase-todolist/src/components/providers/SystemProvider.tsx#L41 -SystemProvider = ({ children }: { children: React.ReactNode }) => { -... + SystemProvider = ({ children }: { children: React.ReactNode }) => { + ... React.useEffect(() => { ... configureFts(); }) -} -``` - - -Note: The react native implementation does not use migrations. It creates the FTS tables separately in [library/fts/fts\_setup.ts](https://github.com/powersync-ja/powersync-js/blob/main/demos/react-native-supabase-todolist/library/fts/fts_setup.ts). - - -```ts -// system.ts + } + ``` + + + ```ts + // https://github.com/powersync-ja/powersync-js/blob/main/demos/react-native-supabase-todolist/library/powersync/system.ts#L75 -export class System { -... - powersync: PowerSyncDatabase; - ... - async init() { + export class System { + ... + powersync: PowerSyncDatabase; ... - await configureFts(this.powersync); + async init() { + ... + await configureFts(this.powersync); + } } -} -``` + ``` + + + First, we need to set up the FTS tables to match the `lists` and `todos` tables already created in this demo app. Don't worry if you already have data in the tables, as it will be copied into the new FTS tables. To simplify implementation these examples make use of SQLite migrations. The migrations are run in [migrations/fts\_setup.dart](https://github.com/powersync-ja/powersync.dart/blob/master/demos/supabase-todolist/lib/migrations/fts_setup.dart) in the Flutter implementation. Here we use the [sqlite\_async](https://pub.dev/documentation/sqlite_async/latest/) Dart package to generate the migrations. -The FTS tables are created in [utils/fts\_setup.ts](https://github.com/powersync-ja/powersync-js/blob/main/demos/react-supabase-todolist/src/app/utils/fts_setup.ts) in the Web implementation. + +Note: The Web and React Native implementations do not use migrations. It creates the FTS tables separately, see for example [utils/fts\_setup.ts](https://github.com/powersync-ja/powersync-js/blob/main/demos/react-supabase-todolist/src/app/utils/fts_setup.ts) (Web) and [library/fts/fts\_setup.ts](https://github.com/powersync-ja/powersync-js/blob/main/demos/react-native-supabase-todolist/library/fts/fts_setup.ts) (React Native). + -**Dart example:** -Copy +**Dart example:** ```dart // migrations/fts_setup.dart