index.ts

import fs from 'node:fs';
import { Worker } from 'node:worker_threads';

import {
  createBaseLogger,
  createLogger,
  LogLevel,
  PowerSyncDatabase,
  SyncStreamConnectionMethod
} from '@powersync/node';
import { app, BrowserWindow, ipcMain, MessagePortMain } from 'electron';
import { AppSchema, BackendConnector } from './powersync';

const baseLogger = createBaseLogger();
baseLogger.useDefaults({ defaultLevel: LogLevel.WARN });

const logger = createLogger('PowerSyncDemo');

// This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Webpack
// plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
// whether you're running in development or production).
declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) {
  app.quit();
}

const userDataDirectory = app.getPath('userData');
try {
  if (!fs.existsSync(userDataDirectory)) {
    fs.mkdirSync(userDataDirectory);
  }
} catch (e) {
  console.error('Could not create database directory', e);
}

console.log('Storing data in ', userDataDirectory);

const database = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'test.db',
    dbLocation: userDataDirectory,
    openWorker(_, options) {
      return new Worker(new URL('./worker.ts', import.meta.url), options);
    }
  },
  logger
});

const createWindow = (): void => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY
    }
  });

  // and load the index.html of the app.
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  database.connect(new BackendConnector(), { connectionMethod: SyncStreamConnectionMethod.HTTP });

  const forwardSyncStatus = (port: MessagePortMain) => {
    port.postMessage(database.currentStatus.toJSON());
    const unregister = database.registerListener({
      statusChanged(status) {
        port.postMessage(status.toJSON());
      }
    });
    port.once('close', unregister);
  };

  const forwardWatchResults = (sql: string, args: any[], port: MessagePortMain) => {
    const abort = new AbortController();
    port.once('close', () => abort.abort());

    database.watchWithCallback(
      sql,
      args,
      {
        onResult(results) {
          port.postMessage(results.rows._array);
        },
        onError(error) {
          console.error(`Watch ${sql} with ${args} failed`, error);
        }
      },
      { signal: abort.signal }
    );
  };

  ipcMain.on('port', (portEvent) => {
    const [port] = portEvent.ports;
    port.start();

    port.on('message', (event) => {
      const { method, payload } = event.data;
      switch (method) {
        case 'syncStatus':
          forwardSyncStatus(port);
          break;
        case 'watch':
          const { sql, args } = payload;
          forwardWatchResults(sql, args, port);
          break;
      }
    });
  });

  ipcMain.handle('get', async (_, sql: string, args: any[]) => {
    return await database.get(sql, args);
  });
  ipcMain.handle('getAll', async (_, sql: string, args: any[]) => {
    return await database.getAll(sql, args);
  });
  createWindow();
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.