feat: add PGlite as a client-side database implementation

.github/workflows/main.yml

@@ -128,3 +128,8 @@ jobs:
         uses: GabrielBB/xvfb-action@v1
         with:
           run: npm run test:watermelondb
+
+      - name: test:pglite
+        uses: GabrielBB/xvfb-action@v1
+        with:
+          run: npm run test:pglite

angular.json

@@ -688,6 +688,115 @@
           }
         }
       }
+    },
+    "pglite": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "less"
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "projects/pglite",
+      "sourceRoot": "projects/pglite/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/pglite",
+            "index": "projects/pglite/src/index.html",
+            "main": "projects/pglite/src/main.ts",
+            "polyfills": "projects/pglite/src/polyfills.ts",
+            "tsConfig": "projects/pglite/tsconfig.app.json",
+            "inlineStyleLanguage": "less",
+            "assets": [
+              "projects/pglite/src/favicon.ico",
+              "projects/pglite/src/assets",
+              {
+                "glob": "*.wasm",
+                "input": "node_modules/@electric-sql/pglite/dist/",
+                "output": "./"
+              },
+              {
+                "glob": "pglite.data",
+                "input": "node_modules/@electric-sql/pglite/dist/",
+                "output": "./"
+              }
+            ],
+            "styles": [
+              "projects/pglite/src/styles.less"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "150kb",
+                  "maximumError": "150kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "projects/pglite/src/environments/environment.ts",
+                  "with": "projects/pglite/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "pglite:build:production"
+            },
+            "development": {
+              "buildTarget": "pglite:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "pglite:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/pglite/**/*.ts",
+              "projects/pglite/**/*.html"
+            ]
+          }
+        }
+      }
     }
   },
   "cli": {
@@ -699,4 +808,4 @@
       "enabled": false
     }
   }
-}
+}

measure-metrics.sh

@@ -10,5 +10,6 @@ npm run test:pouchdb
 npm run test:rxdb-lokijs
 npm run test:rxdb-dexie
 npm run test:watermelondb
+npm run test:pglite
 
 npm run aggregate-metrics

package.json

@@ -12,13 +12,15 @@
     "analyze:watermelondb": "webpack-bundle-analyzer ./dist/watermelondb/stats.json",
     "analyze:rxdb-lokijs": "webpack-bundle-analyzer ./dist/rxdb-lokijs/stats.json",
     "analyze:rxdb-dexie": "webpack-bundle-analyzer ./dist/rxdb-dexie/stats.json",
+    "analyze:pglite": "webpack-bundle-analyzer ./dist/pglite/stats.json",
     "build": "rimraf ./dist && npm-run-all build:*",
     "build:aws": "ng build --configuration production --aot --no-progress --project aws --stats-json",
     "build:firebase": "ng build --configuration production --aot --no-progress --project firebase --stats-json",
     "build:pouchdb": "ng build --configuration production --aot --no-progress --project pouchdb --stats-json",
     "build:rxdb-lokijs": "ng build --configuration production --aot --no-progress --project rxdb-lokijs --stats-json",
     "build:rxdb-dexie": "ng build --configuration production --aot --no-progress --project rxdb-dexie --stats-json",
     "build:watermelondb": "ng build --configuration production --aot --no-progress --project watermelondb --stats-json",
+    "build:pglite": "ng build --configuration production --aot --no-progress --project pglite --stats-json",
     "build:template": "ng build --configuration production --aot --no-progress --stats-json",
     "lint": "ng lint",
     "lint:fix": "ng lint --fix",
@@ -33,12 +35,14 @@
     "dev:rxdb-lokijs": "concurrently \"npm run server:rxdb\" \"npm run client:rxdb-lokijs\"",
     "dev:rxdb-dexie": "concurrently \"npm run server:rxdb\" \"npm run client:rxdb-dexie\"",
     "dev:watermelondb": "concurrently \"npm run server:rxdb\" \"npm run client:watermelondb\"",
+    "dev:pglite": "npm run client:pglite",
     "start:aws": "http-server ./dist/aws -p 3000 -c 2592000",
     "start:firebase": "concurrently \"npm run server:firebase\" \"sleep 10 && http-server ./dist/firebase -p 3000 -c 2592000\"",
     "start:pouchdb": "concurrently \"npm run server:pouchdb\" \"http-server ./dist/pouchdb -p 3000 -c 2592000\"  --kill-others --success first",
     "start:rxdb-lokijs": "concurrently \"npm run server:rxdb\" \"http-server ./dist/rxdb-lokijs -p 3000 -c 2592000\"",
     "start:rxdb-dexie": "concurrently \"npm run server:rxdb\" \"http-server ./dist/rxdb-dexie -p 3000 -c 2592000\"",
     "start:watermelondb": "http-server ./dist/watermelondb -p 3000 -c 2592000",
+    "start:pglite": "http-server ./dist/pglite -p 3000 -c 2592000",
     "server:firebase": "concurrently \"firebase emulators:start --only firestore\" \"npm run server:firebase:import\"",
     "server:firebase:setup": "firebase setup:emulators:firestore",
     "server:firebase:import": "ts-node --skip-project ./projects/firebase/src/import-example-data.ts",
@@ -54,14 +58,16 @@
     "client:rxdb-lokijs": "ng serve --project rxdb-lokijs --port 3000",
     "client:rxdb-dexie": "ng serve --project rxdb-dexie --port 3000",
     "client:watermelondb": "ng serve --project watermelondb --port 3000",
+    "client:pglite": "ng serve --project pglite --port 3000",
     "test:wait-for-frontend": "ts-node --skip-project ./scripts/wait-for-frontend.ts",
     "test": "testcafe chrome:headless --hostname localhost -e test/e2e.test.ts",
     "test:aws": "PROJECT_KEY=aws NODE_OPTIONS=--max_old_space_size=4096 concurrently \"npm run start:aws\" \"npm run test:wait-for-frontend && npm run test\" --kill-others --success first",
     "test:firebase": "PROJECT_KEY=firebase NODE_OPTIONS=--max_old_space_size=4096 concurrently \"npm run start:firebase\" \"npm run test:wait-for-frontend && npm run test\" --kill-others --success first",
     "test:pouchdb": "PROJECT_KEY=pouchdb NODE_OPTIONS=--max_old_space_size=4096 concurrently \"npm run start:pouchdb\" \"npm run test:wait-for-frontend && npm run test\" --kill-others --success first",
     "test:rxdb-lokijs": "PROJECT_KEY=rxdb-lokijs NODE_OPTIONS=--max_old_space_size=4096 concurrently \"npm run start:rxdb-lokijs\" \"npm run test:wait-for-frontend && npm run test\" --kill-others --success first",
     "test:rxdb-dexie": "PROJECT_KEY=rxdb-dexie NODE_OPTIONS=--max_old_space_size=4096 concurrently \"npm run start:rxdb-dexie\" \"npm run test:wait-for-frontend && npm run test\" --kill-others --success first",
-    "test:watermelondb": "PROJECT_KEY=watermelondb NODE_OPTIONS=--max_old_space_size=4096 concurrently \"npm run start:watermelondb\" \"npm run test:wait-for-frontend && npm run test\" --kill-others --success first"
+    "test:watermelondb": "PROJECT_KEY=watermelondb NODE_OPTIONS=--max_old_space_size=4096 concurrently \"npm run start:watermelondb\" \"npm run test:wait-for-frontend && npm run test\" --kill-others --success first",
+    "test:pglite": "PROJECT_KEY=pglite NODE_OPTIONS=--max_old_space_size=4096 concurrently \"npm run start:pglite\" \"npm run test:wait-for-frontend && npm run test\" --kill-others --success first"
   },
   "private": true,
   "dependencies": {
@@ -79,6 +85,7 @@
     "@aws-amplify/datastore": "3.12.12",
     "@aws-amplify/ui-angular": "5.3.2",
     "@babel/runtime": "7.29.2",
+    "@electric-sql/pglite": "^0.4.3",
     "@nozbe/watermelondb": "0.24.0",
     "@types/express": "4.17.25",
     "@types/express-serve-static-core": "4.19.8",
@@ -127,15 +134,15 @@
     "@angular/language-service": "17.3.12",
     "@types/faker": "5.5.9",
     "@types/jsonwebtoken": "9.0.10",
+    "@types/lokijs": "1.5.14",
     "@types/node": "20.19.39",
+    "@types/pouchdb": "6.4.2",
+    "@types/pouchdb-find": "7.3.3",
+    "@types/ws": "8.18.1",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/eslint-plugin-tslint": "7.0.2",
     "@typescript-eslint/parser": "7.18.0",
     "async-test-util": "2.5.0",
-    "@types/lokijs": "1.5.14",
-    "@types/pouchdb": "6.4.2",
-    "@types/pouchdb-find": "7.3.3",
-    "@types/ws": "8.18.1",
     "concurrently": "8.2.2",
     "eslint": "8.57.1",
     "eslint-plugin-import": "2.32.0",

projects/pglite/.eslintrc.json

@@ -0,0 +1,43 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "projects/pglite/tsconfig.app.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

projects/pglite/src/app/app.component.html

@@ -0,0 +1 @@
+<app-chat [logic]="logic"></app-chat>

projects/pglite/src/app/app.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  LogicInterface
+} from '../../../../src/app/logic-interface.interface';
+
+import {
+  Logic
+} from './app.logic';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AppComponent {
+  title = 'pglite';
+
+  public logic: LogicInterface = new Logic();
+}