feat: Logging cleanup demos (#577)

Author: Chriztiaan

demos/angular-supabase-todolist/angular.json

@@ -20,7 +20,7 @@
             "customWebpackConfig": {
               "path": "./extra-webpack.config.js"
             },
-            "allowedCommonJsDependencies": ["js-logger", "ws"],
+            "allowedCommonJsDependencies": ["ws"],
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",

demos/django-react-native-todolist/app/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ActivityIndicator, View } from 'react-native';
 import { router } from 'expo-router';
-import Logger from 'js-logger';
+import { createBaseLogger, LogLevel } from '@powersync/react-native';
 /**
  * This is the entry point when the app loads.
  * Checks for a Supabase session.
@@ -10,8 +10,9 @@ import Logger from 'js-logger';
  */
 const App = () => {
   React.useEffect(() => {
-    Logger.useDefaults();
-    Logger.setLevel(Logger.DEBUG);
+    const logger = createBaseLogger();
+    logger.useDefaults();
+    logger.setLevel(LogLevel.DEBUG);
 
     setImmediate(() => router.replace('signin'));
   }, []);

demos/django-react-native-todolist/package.json

@@ -28,7 +28,6 @@
     "expo-router": "4.0.20",
     "expo-splash-screen": "~0.29.22",
     "expo-status-bar": "~2.0.1",
-    "js-logger": "^1.6.1",
     "lodash": "^4.17.21",
     "react": "18.3.1",
     "react-native": "0.76.9",

demos/example-capacitor/package.json

@@ -26,7 +26,6 @@
     "@journeyapps/wa-sqlite": "^1.2.0",
     "@powersync/react": "workspace:*",
     "@powersync/web": "workspace:*",
-    "js-logger": "^1.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.0"

demos/example-capacitor/src/components/providers/SystemProvider.tsx

@@ -1,14 +1,14 @@
 import { PowerSyncContext } from '@powersync/react';
-import { PowerSyncDatabase } from '@powersync/web';
+import { PowerSyncDatabase, createBaseLogger, LogLevel } from '@powersync/web';
 import { CircularProgress } from '@mui/material';
-import Logger from 'js-logger';
 import React, { Suspense } from 'react';
 import { AppSchema } from '../../library/powersync/AppSchema.js';
 import { BackendConnector } from '../../library/powersync/BackendConnector.js';
 import { Capacitor } from '@capacitor/core';
 
-Logger.useDefaults();
-Logger.setLevel(Logger.DEBUG);
+const logger = createBaseLogger();
+logger.useDefaults();
+logger.setLevel(LogLevel.DEBUG);
 
 const platform = Capacitor.getPlatform();
 const isIOs = platform === 'ios';

demos/example-capacitor/vite.config.ts

@@ -19,7 +19,6 @@ export default defineConfig({
     // https://github.com/vitejs/vite/issues/11672#issuecomment-1415820673
     exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
     include: []
-    // include: ['@powersync/web > js-logger'], // <-- Include `js-logger` when it isn't installed and imported.
   },
   plugins: [wasm(), topLevelAwait()],
   worker: {

demos/example-electron-node/src/main/index.ts

@@ -1,13 +1,20 @@
 import fs from 'node:fs';
 import { Worker } from 'node:worker_threads';
 
-import { PowerSyncDatabase, SyncStreamConnectionMethod } from '@powersync/node';
+import {
+  createBaseLogger,
+  createLogger,
+  LogLevel,
+  PowerSyncDatabase,
+  SyncStreamConnectionMethod
+} from '@powersync/node';
 import { app, BrowserWindow, ipcMain, MessagePortMain } from 'electron';
 import { AppSchema, BackendConnector } from './powersync';
-import { default as Logger } from 'js-logger';
 
-const logger = Logger.get('PowerSyncDemo');
-Logger.useDefaults({ defaultLevel: logger.WARN });
+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
@@ -71,7 +78,7 @@ app.whenReady().then(() => {
     const unregister = database.registerListener({
       statusChanged(status) {
         port.postMessage(status.toJSON());
-      },
+      }
     });
     port.once('close', unregister);
   };
@@ -80,31 +87,36 @@ app.whenReady().then(() => {
     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);
+    database.watchWithCallback(
+      sql,
+      args,
+      {
+        onResult(results) {
+          port.postMessage(results.rows._array);
+        },
+        onError(error) {
+          console.error(`Watch ${sql} with ${args} failed`, error);
+        }
       },
-    }, {signal: abort.signal});
+      { signal: abort.signal }
+    );
   };
 
   ipcMain.on('port', (portEvent) => {
     const [port] = portEvent.ports;
     port.start();
 
     port.on('message', (event) => {
-      const {method, payload} = event.data;
+      const { method, payload } = event.data;
       switch (method) {
         case 'syncStatus':
           forwardSyncStatus(port);
           break;
         case 'watch':
-          const {sql, args} = payload;
+          const { sql, args } = payload;
           forwardWatchResults(sql, args, port);
           break;
-      };
+      }
     });
   });
 

demos/example-electron/package.json

@@ -29,7 +29,6 @@
     "@powersync/react": "workspace:*",
     "@powersync/web": "workspace:*",
     "electron-squirrel-startup": "^1.0.0",
-    "js-logger": "^1.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.0"

demos/example-electron/src/components/providers/SystemProvider.tsx

@@ -1,13 +1,13 @@
 import { PowerSyncContext } from '@powersync/react';
-import { PowerSyncDatabase } from '@powersync/web';
+import { createBaseLogger, LogLevel, PowerSyncDatabase } from '@powersync/web';
 import { CircularProgress } from '@mui/material';
-import Logger from 'js-logger';
 import React, { Suspense } from 'react';
 import { AppSchema } from '../../library/powersync/AppSchema.js';
 import { BackendConnector } from '../../library/powersync/BackendConnector.js';
 
-Logger.useDefaults();
-Logger.setLevel(Logger.DEBUG);
+const logger = createBaseLogger();
+logger.useDefaults();
+logger.setLevel(LogLevel.DEBUG);
 
 const powerSync = new PowerSyncDatabase({
   database: { dbFilename: 'powersync2.db' },

demos/example-electron/vite.renderer.config.ts

@@ -25,8 +25,7 @@ export default defineConfig((env) => {
       // Don't optimize these packages as they contain web workers and WASM files.
       // https://github.com/vitejs/vite/issues/11672#issuecomment-1415820673
       exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
-      include: [],
-      // include: ['@powersync/web > js-logger'], // <-- Include `js-logger` when it isn't installed and imported.
+      include: []
     },
     plugins: [
       // @ts-expect-error there is TS issue that doesn't actually affect the runtime