refactor: upgrade rxdb (#47)

- move dump functionality to custom plugin to utilize rxdb hooks
- remove decorator and use plain async on all collection methods, wait with `lastValueFrom`
- remove config object, introduce function to create full config
- remove custom pipe, use `ngrxLet` in demo application
- remove pouchdb dependencies, fix tests, add plugin tests
- add more tests, fix coverage exclude
- update rxdb to v15 beta
- add info, count, missing bulk methods
- add clear method
- remove separate interface for service, add doc strings
- provide utils with namespace, simplify logger utility
- allow logs to be enabled on prod
- handle storage "migration" problem

Author: voznik

.eslintrc.json

@@ -13,7 +13,7 @@
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "project": "tsconfig.json",
+    "project": "tsconfig.base.json",
     "sourceType": "module"
   },
   "plugins": [
@@ -45,7 +45,7 @@
         "jsdoc/require-returns-type": 0,
         "jsdoc/require-returns-description": 0,
         "jsdoc/require-jsdoc": [
-          1,
+          0,
           {
             "contexts": [
               "TSEnumDeclaration",

.github/workflows/main.yaml

@@ -57,7 +57,7 @@ jobs:
       - name: Install
         run: npm ci
       - name: Lint & Test
-        run: npm run packages:lint && npm run packages:test
+        run: npm run lint && npm run test
         env:
           CI: true
       # Save coverage report in Coveralls
@@ -72,7 +72,7 @@ jobs:
       # Build if release published
       - name: Build
         # if: github.event.release.published
-        run: npm run packages:build
+        run: npm run build
       - name: Archive production artifacts
         uses: actions/upload-artifact@v2
         with:

examples/demo/project.json

@@ -36,7 +36,8 @@
               "maximumError": "4kb"
             }
           ],
-          "outputHashing": "all"
+          "outputHashing": "all",
+          "vendorChunk": true
         },
         "development": {
           "buildOptimizer": false,

examples/demo/src/app/app.module.ts

@@ -1,20 +1,11 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
-import { NgxRxdbConfig } from '@ngx-odm/rxdb/config';
 import { NgxRxdbModule } from '@ngx-odm/rxdb';
+import { getRxDatabaseCreator } from '@ngx-odm/rxdb/config';
 import { AppComponent } from './app.component';
 
-/** NgxRxdbConfig extends RxDatabaseCreator, will be merged with default config */
-const APP_RXDB_CONFIG: NgxRxdbConfig = {
-  name: 'demo', // <- name (required, 'ngx')
-  adapter: 'idb', // <- storage-adapter (required, default: 'idb')
-  multiInstance: true,
-  options: {
-    // dumpPath: 'assets/data/db.dump.json', // <- remote url (optional)
-  },
-};
-
 const routes: Routes = [
   {
     path: 'todos',
@@ -31,8 +22,20 @@ const routes: Routes = [
   declarations: [AppComponent],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     RouterModule.forRoot(routes),
-    NgxRxdbModule.forRoot(APP_RXDB_CONFIG),
+    NgxRxdbModule.forRoot(
+      getRxDatabaseCreator({
+        name: 'demo',
+        localDocuments: true,
+        multiInstance: true,
+        ignoreDuplicate: false,
+        options: {
+          storageType: localStorage['_ngx_rxdb_storage'] ?? 'dexie',
+          dumpPath: 'assets/data/db.dump.json',
+        },
+      })
+    ),
   ],
   providers: [],
   bootstrap: [AppComponent],

examples/demo/src/app/todos/components/todos/todos.component.html

@@ -1,11 +1,10 @@
 <!-- https://angular.io/guide/template-typecheck#disabling-type-checking-using-any -->
 <section
   class="todoapp"
-  *ngxLet="{
-    todos: todos$ | asyncNoZone,
-    count: count$ | async,
-    remainig: remainig$ | async,
-    filter: filter$ | async
+  *ngrxLet="{
+    todos: todos$,
+    count: count$,
+    filter: filter$
   } as $"
 >
   <header class="header">
@@ -15,7 +14,7 @@ <h1>todos</h1>
       placeholder="What needs to be done?"
       autofocus=""
       [(ngModel)]="newTodo"
-      (keyup)="newTodoChange($event.target.value)"
+      (keyup)="newTodoChange($any($event.target).value)"
       (keyup.enter)="!isAddTodoDisabled && addTodo()"
       (keyup.escape)="newTodoClear()"
     />
@@ -30,9 +29,9 @@ <h1>todos</h1>
       [checked]="(filter$ | async) === 'ALL'"
       (click)="filterTodos('')"
     /> -->
-    <ul class="todo-list">
+    <ul [@listAnimation]="$.todos?.length" class="todo-list">
       <li
-        *ngFor="let todo of $.todos"
+        *ngFor="let todo of $.todos | byStatus: $.filter; trackBy: trackByFn"
         [class.completed]="todo.completed"
         [class.editing]="isEditing === todo.id"
       >
@@ -59,10 +58,14 @@ <h1>todos</h1>
       </li>
     </ul>
   </main>
-  <footer class="footer" [hidden]="$.count === 0">
-    <ng-container *ngIf="showRemainig($.remainig)">
-      <span class="todo-count" [ngPlural]="$.remainig">
-        <ng-template ngPluralCase="other">{{ $.remainig }} items left</ng-template>
+  <footer
+    class="footer"
+    [hidden]="$.count === 0"
+    *ngrxLet="($.todos | byStatus: 'ACTIVE')?.length; let remainig"
+  >
+    <ng-container *ngIf="showRemainig(remainig)">
+      <span class="todo-count" [ngPlural]="remainig">
+        <ng-template ngPluralCase="other">{{ remainig }} items left</ng-template>
         <ng-template ngPluralCase="=1">one item left</ng-template>
         <ng-template ngPluralCase="=0">no items left</ng-template>
       </span>
@@ -98,11 +101,11 @@ <h1>todos</h1>
     </ul>
     <button
       class="clear-completed"
-      [disabled]="$.todos?.length - $.remainig < $.todos?.length"
+      [disabled]="$.todos?.length - remainig < $.todos?.length"
       (click)="removeCompletedTodos()"
       style="z-index: 3"
     >
-      Clear completed ({{ $.todos?.length - $.remainig }})
+      Clear completed ({{ $.todos?.length - remainig }})
     </button>
   </footer>
 </section>

examples/demo/src/app/todos/components/todos/todos.component.ts

@@ -1,28 +1,46 @@
+import { trigger, transition, query, style, stagger, animate } from '@angular/animations';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ElementRef,
   OnInit,
 } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Todo, TodosFilter } from '../../models';
 import { TodosService } from '../../services';
 
+const listAnimation = trigger('listAnimation', [
+  transition('* <=> *', [
+    query(
+      ':enter',
+      [
+        style({ opacity: 0 }),
+        stagger('100ms', animate('250ms ease-out', style({ opacity: 1 }))),
+      ],
+      { optional: true }
+    ),
+    query(':leave', animate('250ms', style({ opacity: 0 })), { optional: true }),
+  ]),
+]);
+
 @Component({
   selector: 'demo-todos',
   templateUrl: './todos.component.html',
   styleUrls: ['./todos.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [listAnimation],
 })
 export class TodosComponent implements OnInit {
   filter$ = this.todosService.filter$;
-  todos$: Observable<Todo[]> = this.todosService.select();
+  todos$: Observable<Todo[]> = this.todosService.todos$;
   count$ = this.todosService.count$;
-  remainig$: Observable<number> = this.todosService.remaining$;
   newTodo = '';
   isEditing = '';
 
+  trackByFn(index: number, item: Todo) {
+    return item.id;
+  }
+
   constructor(
     private todosService: TodosService,
     private cdRef: ChangeDetectorRef

examples/demo/src/app/todos/components/todos/todos.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Todo, TodosFilter, TodosState } from '../../models';
+
+@Pipe({ name: 'byStatus' })
+export class TodosPipe implements PipeTransform {
+  transform(value: Todo[], status: TodosFilter): Todo[] {
+    if (!value) {
+      return value;
+    }
+    if (status === 'ALL') {
+      return value;
+    }
+    return value.filter(todo => todo.completed === (status === 'COMPLETED'));
+  }
+}

examples/demo/src/app/todos/models/todos.model.ts

@@ -12,7 +12,7 @@ export interface TodosState {
   filter: TodosFilter;
 }
 
-export const initialState: TodosState = {
+export const TODOS_INITIAL_STATE: TodosState = {
   items: [
     {
       id: 'ac3ef2c6-c98b-43e1-9047-71d68b1f92f4',

examples/demo/src/app/todos/models/todos.schema.ts

@@ -1,6 +1,6 @@
-import { NgxRxdbCollectionConfig } from '@ngx-odm/rxdb/config';
-import { RxCollection } from 'rxdb';
-import { initialState } from './todos.model';
+import type { RxCollectionCreatorExtended } from '@ngx-odm/rxdb/config';
+import type { RxCollection } from 'rxdb';
+import { TODOS_INITIAL_STATE } from './todos.model';
 
 export async function percentageCompletedFn() {
   const allDocs = await (this as RxCollection).find().exec();
@@ -10,12 +10,13 @@ const collectionMethods = {
   percentageCompleted: percentageCompletedFn,
 };
 
-export const TODOS_COLLECTION_CONFIG: NgxRxdbCollectionConfig = {
+export const TODOS_COLLECTION_CONFIG: RxCollectionCreatorExtended = {
   name: 'todo',
-  // schema: todoSchema,
+  localDocuments: true,
   statics: collectionMethods,
+  schema: null,
   options: {
     schemaUrl: 'assets/data/todo.schema.json',
-    initialDocs: initialState.items,
+    initialDocs: TODOS_INITIAL_STATE.items,
   },
 };

examples/demo/src/app/todos/services/todos.service.ts

@@ -5,26 +5,23 @@ import { Title } from '@angular/platform-browser';
 import { NgxRxdbCollection, NgxRxdbCollectionService } from '@ngx-odm/rxdb/collection';
 import { MangoQuery } from 'rxdb/dist/types/types';
 import { Observable } from 'rxjs';
-import { distinctUntilChanged, startWith, switchMap, map, tap } from 'rxjs/operators';
+import { distinctUntilChanged, startWith, switchMap, tap } from 'rxjs/operators';
 import { v4 as uuid } from 'uuid';
 import { Todo, TodosFilter } from '../models';
 
 @Injectable()
 export class TodosService {
-  filter$ = this.collectionService
+  filter$: Observable<TodosFilter> = this.collectionService
     .getLocal('local', 'filterValue')
-    .pipe(startWith('ALL'), distinctUntilChanged());
+    .pipe(startWith('ALL'), distinctUntilChanged()) as Observable<TodosFilter>;
 
   count$ = this.collectionService.count();
 
-  remaining$: Observable<number> = this.collectionService.docs().pipe(
-    map(docs => {
+  todos$: Observable<Todo[]> = this.collectionService.docs().pipe(
+    tap(docs => {
       const total = docs.length;
       const remaining = docs.filter(doc => !doc.completed).length;
-
       this.title.setTitle(`(${total - remaining}/${total}) Todos done`);
-
-      return remaining;
     })
   );
 
@@ -34,11 +31,6 @@ export class TodosService {
     private title: Title
   ) {}
 
-  async getCount() {
-    const count = await this.collectionService.collection?.['countAllDocuments']?.();
-    return count;
-  }
-
   select(completedOnly = false): Observable<Todo[]> {
     const queryObj = this.buildQueryObject(completedOnly);
     return this.filter$.pipe(
@@ -100,12 +92,8 @@ export class TodosService {
 
   private buildQueryObject(completedOnly: boolean): MangoQuery<Todo> {
     const queryObj: MangoQuery<Todo> = {
-      selector: {
-        createdAt: {
-          $gt: null,
-        },
-      },
-      sort: [{ createdAt: 'desc' } as any],
+      selector: {},
+      sort: [{ createdAt: 'desc' }],
     };
     if (completedOnly) {
       Object.assign(queryObj.selector, {