JavaScript Web SDK

// AppSchema.ts
import { column, Schema, Table } from '@powersync/web';

const lists = new Table({
  created_at: column.text,
  name: column.text,
  owner_id: column.text
});

const todos = new Table(
  {
    list_id: column.text,
    created_at: column.text,
    completed_at: column.text,
    description: column.text,
    created_by: column.text,
    completed_by: column.text,
    completed: column.integer
  },
  { indexes: { list: ['list_id'] } }
);

export const AppSchema = new Schema({
  todos,
  lists
});

// For types
export type Database = (typeof AppSchema)['types'];
export type TodoRecord = Database['todos'];
// OR:
// export type Todo = RowType<typeof todos>;
export type ListRecord = Database['lists'];

import { PowerSyncDatabase } from '@powersync/web';
import { Connector } from './Connector';
import { AppSchema } from './AppSchema';

export const db = new PowerSyncDatabase({
  // The schema you defined in the previous step
  schema: AppSchema,
  database: {
    // Filename for the SQLite database — it's important to only instantiate one instance per file.
    dbFilename: 'powersync.db'
    // Optional. Directory where the database file is located.'
    // dbLocation: 'path/to/directory'
  }
});

export const setupPowerSync = async () => {
  // Uses the backend connector that will be created in the next section
  const connector = new Connector();
  db.connect(connector);
};

import { UpdateType } from '@powersync/web';

export class Connector {
  async fetchCredentials() {
    // Implement fetchCredentials to obtain a JWT from your authentication service. 
    // See https://docs.powersync.com/configuration/auth/overview
    return {
        endpoint: '[Your PowerSync instance URL or self-hosted endpoint]',
        // Use a development token (see Authentication Setup https://docs.powersync.com/configuration/auth/development-tokens) to get up and running quickly
        token: 'An authentication token'
    };
  }

  async uploadData(database) {
    // Implement uploadData to send local changes to your backend service.
    // You can omit this method if you only want to sync data from the database to the client

    // See example implementation here: https://docs.powersync.com/client-sdks/reference/javascript-web#3-integrate-with-your-backend
  }
}

// Find a list item by ID
export const findList = async (id) => {
  const result = await db.get('SELECT * FROM lists WHERE id = ?', [id]);
  return result;
}

// Get all list IDs
export const getLists = async () => {
  const results = await db.getAll('SELECT * FROM lists');
  return results;
}

// Delete a list item by ID
export const deleteList = async (id) => {
  const result = await db.execute('DELETE FROM lists WHERE id = ?', [id]);
  return TodoList.fromRow(results);
}

// OR: using a transaction
const deleteList = async (id) => {
  await db.writeTransaction(async (tx) => {
    // Delete associated todos
    await tx.execute(`DELETE FROM ${TODOS_TABLE} WHERE list_id = ?`, [id]);
    // Delete list record
    await tx.execute(`DELETE FROM ${LISTS_TABLE} WHERE id = ?`, [id]);
  });
};

import { createBaseLogger, LogLevel } from '@powersync/web';

const logger = createBaseLogger();

// Configure the logger to use the default console output
logger.useDefaults();

// Set the minimum log level to DEBUG to see all log messages
// Available levels: DEBUG, INFO, WARN, ERROR, TRACE, OFF
logger.setLevel(LogLevel.DEBUG);

chrome://inspect/#workers

// WebSocket (default)
powerSync.connect(connector);

// HTTP Streaming
powerSync.connect(connector, { connectionMethod: SyncStreamConnectionMethod.HTTP });

import { PowerSyncDatabase, WASQLiteOpenFactory, WASQLiteVFS } from '@powersync/web';

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: new WASQLiteOpenFactory({
    dbFilename: 'exampleVFS.db',
    vfs: WASQLiteVFS.OPFSCoopSyncVFS,
    flags: {
      enableMultiTabs: typeof SharedWorker !== 'undefined'
    }
  }),
  flags: {
    enableMultiTabs: typeof SharedWorker !== 'undefined'
  }
});

// Clear all OPFS storage
async function purgeVFS() {
  await powerSync.disconnect();
  await powerSync.close();

  const root = await navigator.storage.getDirectory();
  await new Promise(resolve => setTimeout(resolve, 1)); // Allow .db-wal to become deletable

  for await (const [name, entry] of root.entries!()) {
    try {
      if (entry.kind === 'file') {
        await root.removeEntry(name);
      } else if (entry.kind === 'directory') {
        await root.removeEntry(name, { recursive: true });
      }
    } catch (err) {
      console.error(`Failed to delete ${entry.kind}: ${name}`, err);
    }
  }
}

// List OPFS entries
async function listVfsEntries() {
  const root = await navigator.storage.getDirectory();
  for await (const [name, entry] of root.entries()) {
    console.log(`${entry.kind}: ${name}`);
  }
}

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'my_app_db.sqlite'
  },
  flags: {
    /**
     * Multiple tab support is enabled by default if available.
     * This can be disabled by setting this flag to false.
     */
    enableMultiTabs: false
  }
});

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,
});

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'my_app_db.sqlite',
  },
  flags: {
    enableMultiTabs: false,
  },
});

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'my_app_db.sqlite',
  },
  flags: {
    ssrMode: true,
    disableSSRWarning: true,
  },
});

export const db = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'my_app_db.sqlite',
  },
  flags: {
    broadcastLogs: true,
  },
});