From dc4e8f7e6b515b6993a6f11406784edf3d92f736 Mon Sep 17 00:00:00 2001 From: Christiaan Landman Date: Thu, 12 Dec 2024 10:58:41 +0200 Subject: [PATCH 1/5] Fixed angular demo app issues related to newer versions of web SDK and wa-sqlite. --- demos/angular-supabase-todolist/.gitignore | 2 ++ demos/angular-supabase-todolist/README.md | 16 ++++++++++------ .../src/app/powersync.service.ts | 19 +++++++++++++++---- 3 files changed, 27 insertions(+), 10 deletions(-) diff --git a/demos/angular-supabase-todolist/.gitignore b/demos/angular-supabase-todolist/.gitignore index b22f52276..34ef67141 100644 --- a/demos/angular-supabase-todolist/.gitignore +++ b/demos/angular-supabase-todolist/.gitignore @@ -166,3 +166,5 @@ testem.log # System files .DS_Store Thumbs.db + +src/assets/@powersync \ No newline at end of file diff --git a/demos/angular-supabase-todolist/README.md b/demos/angular-supabase-todolist/README.md index bdd2b2e5c..e01d731bb 100644 --- a/demos/angular-supabase-todolist/README.md +++ b/demos/angular-supabase-todolist/README.md @@ -13,13 +13,17 @@ A step-by-step guide on Supabase<>PowerSync integration is available [here](http ## Quick Start 1. Run `pnpm install` -2. Create a `.env` file by copying the template `cp .env.template .env` -3. Populate the `.env` file with PowerSync and Supabase details -4. Run `pnpm watch` to build application and check for code changes -5. In a new terminal run `pnpm start` to start the server -6. Go to +2. Run `pnpm powersync-web copy-assets -o src/assets` to copy the worker assets into the project. +3. Create a `.env` file by copying the template `cp .env.template .env` +4. Populate the `.env` file with PowerSync and Supabase details +5. Run `pnpm watch` to build application and check for code changes +6. In a new terminal run `pnpm start` to start the server +7. Go to -**Note:** The Angular development server (`pnpm serve`) doesn't support service worker applications +### Notes + +- The Angular development server (`pnpm serve`) doesn't support service worker applications +- For Angular, workers need to be configured when instantiating `PowerSyncDatabase`. To do this, copy the worker assets (`step 2`) and ensure the worker paths are specified ([example here](./src/app/powersync.service.ts)). ## Development Server diff --git a/demos/angular-supabase-todolist/src/app/powersync.service.ts b/demos/angular-supabase-todolist/src/app/powersync.service.ts index 55f9ca256..f5fb2bc08 100644 --- a/demos/angular-supabase-todolist/src/app/powersync.service.ts +++ b/demos/angular-supabase-todolist/src/app/powersync.service.ts @@ -6,9 +6,10 @@ import { Index, IndexedColumn, PowerSyncBackendConnector, + PowerSyncDatabase, Schema, Table, - WASQLitePowerSyncDatabaseOpenFactory + WASQLiteOpenFactory } from '@powersync/web'; export interface ListRecord { @@ -63,11 +64,21 @@ export class PowerSyncService { db: AbstractPowerSyncDatabase; constructor() { - const PowerSyncFactory = new WASQLitePowerSyncDatabaseOpenFactory({ + const factory = new WASQLiteOpenFactory({ + dbFilename: 'test.db', + + // Specify the path to the worker script + worker: 'assets/@powersync/worker/WASQLiteDB.umd.js' + }); + + this.db = new PowerSyncDatabase({ schema: AppSchema, - dbFilename: 'test.db' + database: factory, + sync: { + // Specify the path to the worker script + worker: 'assets/@powersync/worker/SharedSyncImplementation.umd.js' + } }); - this.db = PowerSyncFactory.getInstance(); } setupPowerSync = async (connector: PowerSyncBackendConnector) => { From 82d565f2d29dd320028c7455229bb474111b24a5 Mon Sep 17 00:00:00 2001 From: Christiaan Landman Date: Thu, 12 Dec 2024 12:41:12 +0200 Subject: [PATCH 2/5] Added copy-assets to postinstall. Updated readme. --- demos/angular-supabase-todolist/README.md | 13 ++++++------- demos/angular-supabase-todolist/package.json | 3 ++- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/demos/angular-supabase-todolist/README.md b/demos/angular-supabase-todolist/README.md index 784e87a09..9bb394a01 100644 --- a/demos/angular-supabase-todolist/README.md +++ b/demos/angular-supabase-todolist/README.md @@ -13,17 +13,16 @@ A step-by-step guide on Supabase<>PowerSync integration is available [here](http ## Quick Start 1. Run `pnpm install` -2. Run `pnpm powersync-web copy-assets -o src/assets` to copy the worker assets into the project. -3. Create a `.env` file by copying the template `cp .env.template .env` -4. Populate the `.env` file with PowerSync and Supabase details -5. Run `pnpm watch` to build application and check for code changes -6. In a new terminal run `pnpm start` to start the server -7. Go to +2. Create a `.env` file by copying the template `cp .env.template .env` +3. Populate the `.env` file with PowerSync and Supabase details +4. Run `pnpm watch` to build application and check for code changes +5. In a new terminal run `pnpm start` to start the server +6. Go to ### Notes - The Angular development server (`pnpm serve`) doesn't support service worker applications -- For Angular, workers need to be configured when instantiating `PowerSyncDatabase`. To do this, copy the worker assets (`step 2`) and ensure the worker paths are specified ([example here](./src/app/powersync.service.ts)). +- For Angular, workers need to be configured when instantiating `PowerSyncDatabase`. To do this, copy the worker assets (`pnpm powersync-web copy-assets -o src/assets` - done automatically as a `postinstall` step in this demo) and ensure the worker paths are specified ([example here](./src/app/powersync.service.ts)). ## Development Server diff --git a/demos/angular-supabase-todolist/package.json b/demos/angular-supabase-todolist/package.json index 2ec415e1e..fcc8af148 100644 --- a/demos/angular-supabase-todolist/package.json +++ b/demos/angular-supabase-todolist/package.json @@ -8,7 +8,8 @@ "build": "ng build", "format": "prettier --write .", "test:build": "pnpm build", - "watch": "ng build --watch --configuration development" + "watch": "ng build --watch --configuration development", + "postinstall": "pnpm powersync-web copy-assets -o src/assets" }, "private": true, "dependencies": { From f7587bf6adff4b080fe42fa0c5b3e40d07735cc1 Mon Sep 17 00:00:00 2001 From: Christiaan Landman Date: Thu, 12 Dec 2024 12:53:54 +0200 Subject: [PATCH 3/5] Skip post install step if in github action. --- demos/angular-supabase-todolist/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/angular-supabase-todolist/package.json b/demos/angular-supabase-todolist/package.json index fcc8af148..395ffcb70 100644 --- a/demos/angular-supabase-todolist/package.json +++ b/demos/angular-supabase-todolist/package.json @@ -9,7 +9,7 @@ "format": "prettier --write .", "test:build": "pnpm build", "watch": "ng build --watch --configuration development", - "postinstall": "pnpm powersync-web copy-assets -o src/assets" + "postinstall": "[ \"$GITHUB_ACTIONS\" = \"true\" ] || pnpm powersync-web copy-assets -o src/assets" }, "private": true, "dependencies": { From cfddbcc70a3abeaebfdd10162c320f75c5042865 Mon Sep 17 00:00:00 2001 From: Christiaan Landman Date: Thu, 12 Dec 2024 13:26:01 +0200 Subject: [PATCH 4/5] Calling `copy-assets` as `pre` step for serving and building instead of as a post install. --- demos/angular-supabase-todolist/README.md | 2 +- demos/angular-supabase-todolist/package.json | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/demos/angular-supabase-todolist/README.md b/demos/angular-supabase-todolist/README.md index 9bb394a01..6b32f90c6 100644 --- a/demos/angular-supabase-todolist/README.md +++ b/demos/angular-supabase-todolist/README.md @@ -22,7 +22,7 @@ A step-by-step guide on Supabase<>PowerSync integration is available [here](http ### Notes - The Angular development server (`pnpm serve`) doesn't support service worker applications -- For Angular, workers need to be configured when instantiating `PowerSyncDatabase`. To do this, copy the worker assets (`pnpm powersync-web copy-assets -o src/assets` - done automatically as a `postinstall` step in this demo) and ensure the worker paths are specified ([example here](./src/app/powersync.service.ts)). +- For Angular, workers need to be configured when instantiating `PowerSyncDatabase`. To do this, copy the worker assets (`pnpm powersync-web copy-assets -o src/assets` - done automatically as `pre-` steps in this demo for serving and building) and ensure the worker paths are specified ([example here](./src/app/powersync.service.ts)). ## Development Server diff --git a/demos/angular-supabase-todolist/package.json b/demos/angular-supabase-todolist/package.json index 395ffcb70..584e6ba21 100644 --- a/demos/angular-supabase-todolist/package.json +++ b/demos/angular-supabase-todolist/package.json @@ -2,14 +2,17 @@ "name": "angular-supabase-todolist", "version": "0.0.25", "scripts": { + "copy-assets": "pnpm powersync-web copy-assets -o src/assets", "ng": "ng", + "preserve": "pnpm copy-assets", "serve": "ng serve", "start": "http-server -p 8080 -c-1 dist/", + "prebuild": "pnpm copy-assets", "build": "ng build", "format": "prettier --write .", "test:build": "pnpm build", - "watch": "ng build --watch --configuration development", - "postinstall": "[ \"$GITHUB_ACTIONS\" = \"true\" ] || pnpm powersync-web copy-assets -o src/assets" + "prewatch": "pnpm copy-assets", + "watch": "ng build --watch --configuration development" }, "private": true, "dependencies": { From 75863c1ea53bb1522dcd33febbb07b55b194abf3 Mon Sep 17 00:00:00 2001 From: Christiaan Landman Date: Thu, 12 Dec 2024 14:00:02 +0200 Subject: [PATCH 5/5] Removed 2 of the pre- commands. --- demos/angular-supabase-todolist/README.md | 2 +- demos/angular-supabase-todolist/package.json | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/demos/angular-supabase-todolist/README.md b/demos/angular-supabase-todolist/README.md index 6b32f90c6..34dd08e6e 100644 --- a/demos/angular-supabase-todolist/README.md +++ b/demos/angular-supabase-todolist/README.md @@ -22,7 +22,7 @@ A step-by-step guide on Supabase<>PowerSync integration is available [here](http ### Notes - The Angular development server (`pnpm serve`) doesn't support service worker applications -- For Angular, workers need to be configured when instantiating `PowerSyncDatabase`. To do this, copy the worker assets (`pnpm powersync-web copy-assets -o src/assets` - done automatically as `pre-` steps in this demo for serving and building) and ensure the worker paths are specified ([example here](./src/app/powersync.service.ts)). +- For Angular, workers need to be configured when instantiating `PowerSyncDatabase`. To do this, copy the worker assets (`pnpm powersync-web copy-assets -o src/assets` - done automatically in this demo for serving and building) and ensure the worker paths are specified ([example here](./src/app/powersync.service.ts)). ## Development Server diff --git a/demos/angular-supabase-todolist/package.json b/demos/angular-supabase-todolist/package.json index 584e6ba21..7a1e29de2 100644 --- a/demos/angular-supabase-todolist/package.json +++ b/demos/angular-supabase-todolist/package.json @@ -4,11 +4,9 @@ "scripts": { "copy-assets": "pnpm powersync-web copy-assets -o src/assets", "ng": "ng", - "preserve": "pnpm copy-assets", - "serve": "ng serve", + "serve": "pnpm copy-assets && ng serve", "start": "http-server -p 8080 -c-1 dist/", - "prebuild": "pnpm copy-assets", - "build": "ng build", + "build": "pnpm copy-assets && ng build", "format": "prettier --write .", "test:build": "pnpm build", "prewatch": "pnpm copy-assets",