diff --git a/client-sdk-references/javascript-web/usage-examples.mdx b/client-sdk-references/javascript-web/usage-examples.mdx index e1254e0e..1d5c0b7f 100644 --- a/client-sdk-references/javascript-web/usage-examples.mdx +++ b/client-sdk-references/javascript-web/usage-examples.mdx @@ -268,3 +268,129 @@ The [WASQLiteDBAdapter](https://powersync-ja.github.io/powersync-js/web-sdk/clas ``` chrome://inspect/#workers ``` + +## Using PowerSyncDatabase Flags + +This guide provides an overview of the customizable flags available for the `PowerSyncDatabase` in the JavaScript Web SDK. These flags allow you to enable or disable specific features to suit your application's requirements. + +### Configuring Flags + +You can configure flags during the initialization of the `PowerSyncDatabase`. Flags can be set using the `flags` property, which allows you to enable or disable specific functionalities. + +```javascript +import { PowerSyncDatabase, resolveWebPowerSyncFlags, WebPowerSyncFlags } from '@powersync/web'; +import { AppSchema } from '@/library/powersync/AppSchema'; + +// Define custom flags +const customFlags: WebPowerSyncFlags = resolveWebPowerSyncFlags({ + enableMultiTabs: true, + broadcastLogs: true, + disableSSRWarning: false, + ssrMode: false, + useWebWorker: true, +}); + +// Create the PowerSync database instance +export const db = new PowerSyncDatabase({ + schema: AppSchema, + database: { + dbFilename: 'example.db', + }, + flags: customFlags, +}); +``` + +#### Available Flags + + default: `true` + + Enables support for multiple tabs using shared web workers. When enabled, multiple tabs can interact with the same database and sync data seamlessly. + + + + default: `false` + + Enables the broadcasting of logs for debugging purposes. This flag helps monitor shared worker logs in a multi-tab environment. + + + + default: `false` + + Disables warnings when running in SSR (Server-Side Rendering) mode. + + + + default: `false` + + Enables SSR mode. In this mode, only empty query results will be returned, and syncing with the backend is disabled. + + + + default: `true` + + Enables the use of web workers for database operations. Disabling this flag also disables multi-tab support. + + + +### Flag Behavior + +#### Example 1: Multi-Tab Support + +By default, multi-tab support is enabled if supported by the browser. To explicitly disable this feature: + +```javascript +export const db = new PowerSyncDatabase({ + schema: AppSchema, + database: { + dbFilename: 'my_app_db.sqlite', + }, + flags: { + enableMultiTabs: false, + }, +}); +``` + +When disabled, each tab will use independent workers, and changes in one tab will not automatically propagate to others. + +#### Example 2: SSR Mode + +To enable SSR mode and suppress warnings: + +```javascript +export const db = new PowerSyncDatabase({ + schema: AppSchema, + database: { + dbFilename: 'my_app_db.sqlite', + }, + flags: { + ssrMode: true, + disableSSRWarning: true, + }, +}); +``` + +#### Example 3: Verbose Debugging with Broadcast Logs + +To enable detailed logging for debugging: + +```javascript +export const db = new PowerSyncDatabase({ + schema: AppSchema, + database: { + dbFilename: 'my_app_db.sqlite', + }, + flags: { + broadcastLogs: true, + }, +}); +``` + +Logs will include detailed insights into database operations and synchronization. + +### Recommendations + +1. **Set `enableMultiTabs`** to `true` if your application requires seamless data sharing across multiple tabs. +2. **Set `useWebWorker`** to `true` for efficient database operations using web workers. +3. **Set `broadcastLogs`** to `true` during development to troubleshoot and monitor database and sync operations. +4. **Set `disableSSRWarning`** to `true` when running in SSR mode to avoid unnecessary console warnings. +5. **Test combinations** of flags to validate their behavior in your application's specific use case. \ No newline at end of file