feat: store complete. standalone component uses store only

voznik · Dec 28, 2023 · 7326b6b · 7326b6b
1 parent e7a7a4e
commit 7326b6b
Show file tree

Hide file tree

Showing 15 changed files with 215 additions and 260 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -16,19 +16,10 @@
     "project": "tsconfig.base.json",
     "sourceType": "module"
   },
-  "plugins": [
-    "@nx",
-    "jsdoc",
-    "prettier",
-    "@typescript-eslint",
-    "import"
-  ],
+  "plugins": ["@nx", "jsdoc", "prettier", "@typescript-eslint", "import"],
   "overrides": [
     {
-      "files": [
-        "*.ts",
-        "*.js"
-      ],
+      "files": ["*.ts", "*.js"],
       "excludedFiles": [],
       "extends": [
         "plugin:import/recommended",
@@ -37,10 +28,7 @@
       ],
       "rules": {
         "no-prototype-builtins": 0,
-        "curly": [
-          "error",
-          "all"
-        ],
+        "curly": ["error", "all"],
         "jsdoc/newline-after-description": 0,
         "jsdoc/require-returns-type": 0,
         "jsdoc/require-returns-description": 0,
@@ -111,45 +99,23 @@
               "caseInsensitive": true
             },
             "newlines-between": "never",
-            "groups": [
-              "builtin",
-              "external",
-              "internal",
-              "parent",
-              "sibling",
-              "index"
-            ]
+            "groups": ["builtin", "external", "internal", "parent", "sibling", "index"]
           }
         ]
       }
     },
     {
-      "files": [
-        "*.ts",
-        "*.tsx"
-      ],
-      "extends": [
-        "plugin:@nx/typescript"
-      ],
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
       "rules": {}
     },
     {
-      "files": [
-        "*.js",
-        "*.jsx"
-      ],
-      "extends": [
-        "plugin:@nx/javascript"
-      ],
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
       "rules": {}
     },
     {
-      "files": [
-        "*.spec.ts",
-        "*.spec.tsx",
-        "*.spec.js",
-        "*.spec.jsx"
-      ],
+      "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
       "env": {
         "jest": true
       },

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
@@ -20,8 +20,8 @@ jobs:
     runs-on: ubuntu-latest
     # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
     permissions:
-      pages: write      # to deploy to Pages
-      id-token: write   # to verify the deployment originates from an appropriate source
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
     # strategy:
     #   matrix:
     #     node-version: [12.x, 14.x]
@@ -67,8 +67,8 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
         # env:
-          # COVERALLS_SERVICE_NAME: '@ngx-odm'
-          # COVERALLS_PARALLEL: true
+        # COVERALLS_SERVICE_NAME: '@ngx-odm'
+        # COVERALLS_PARALLEL: true
       # Build if release published
       - name: Build
         # if: github.event.release.published

diff --git a/.lintstagedrc.json b/.lintstagedrc.json
@@ -1,10 +1,4 @@
 {
-    "*.{ts,js}": [
-        "eslint --fix",
-        "git add"
-    ],
-    "*.{html,css,scss,md,yml}": [
-        "prettier --write",
-        "git add"
-    ]
+  "*.{ts,js}": ["eslint --fix", "git add"],
+  "*.{html,css,scss,md,yml}": ["prettier --write", "git add"]
 }
diff --git a/README.md b/README.md
@@ -24,6 +24,7 @@
   - [Diagrams](#diagrams)
   - [Status](#status)
   - [Inspiration](#inspiration)
+  - [Notes](#notes)
   - [Contact](#contact)
 
 ## General info
@@ -32,9 +33,9 @@ If you don't want to setup RxDB manually in your next Angular project - just imp
 
 ## Technologies
 
-| RxDB |Angular 10+|
-|------|------|
-|[![RxDB](https://cdn.rawgit.com/pubkey/rxdb/ba7c9b80/docs/files/logo/logo_text.svg)](https://rxdb.info/)|[![Angular](https://angular.io/assets/images/logos/angular/angular.svg )](https://angular.io/)|
+| RxDB                                                                                                     | Angular 10+                                                                                   |
+| -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| [![RxDB](https://cdn.rawgit.com/pubkey/rxdb/ba7c9b80/docs/files/logo/logo_text.svg)](https://rxdb.info/) | [![Angular](https://angular.io/assets/images/logos/angular/angular.svg)](https://angular.io/) |
 
 ## Install
 
@@ -51,26 +52,27 @@ If you don't want to setup RxDB manually in your next Angular project - just imp
     // ...
     NgxRxdbModule.forRoot({
       // optional, NgxRxdbConfig extends RxDatabaseCreator, will be merged with default config
-      name: 'ngx',                        // <- name (required, 'ngx')
-      adapter: 'idb',                     // <- storage-adapter (required, default: 'idb')
-      password: '123456789',              // <- password (optional)
-      multiInstance: true,                // <- multiInstance (optional, default: true)
-      queryChangeDetection: false,        // <- queryChangeDetection (optional, default: false)
-      options: {                          // NgxRxdb options (optional)
-        schemas: [ ...CollectionConfigs], // array of NgxRxdbCollectionConfig (optional)
-        dumpPath: 'assets/dump.json'      // path to datbase dump file (optional)
-      }
+      name: 'ngx', // <- name (required, 'ngx')
+      adapter: 'idb', // <- storage-adapter (required, default: 'idb')
+      password: '123456789', // <- password (optional)
+      multiInstance: true, // <- multiInstance (optional, default: true)
+      queryChangeDetection: false, // <- queryChangeDetection (optional, default: false)
+      options: {
+        // NgxRxdb options (optional)
+        schemas: [...CollectionConfigs], // array of NgxRxdbCollectionConfig (optional)
+        dumpPath: 'assets/dump.json', // path to datbase dump file (optional)
+      },
     }),
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
 ### In your `FeatureModule`
 
->Schemas define how your data looks. Which field should be used as primary, which fields should be used as indexes and what should be encrypted. The schema also validates that every inserted document of your collections conforms to the schema. Every collection has its own schema. With RxDB, schemas are defined with the jsonschema-standard which you might know from other projects.
+> Schemas define how your data looks. Which field should be used as primary, which fields should be used as indexes and what should be encrypted. The schema also validates that every inserted document of your collections conforms to the schema. Every collection has its own schema. With RxDB, schemas are defined with the jsonschema-standard which you might know from other projects.
 > https://rxdb.info/rx-schema.html
 
 ```typescript
@@ -79,13 +81,13 @@ const todoSchema: RxSchema = require('../../../assets/data/todo.schema.json');
 // create config
 // NgxRxdbCollectionConfig extends RxCollectionCreator
 const todoCollectionConfig: NgxRxdbCollectionConfig = {
-  name: 'todo',                           // <- name (required)
-  schema: todoSchema,                     // <- name (required)
-  statics: {},                            // <- collection methods (optional)
-  methods: {},                            // <- instance-methods methods (optional)
+  name: 'todo', // <- name (required)
+  schema: todoSchema, // <- name (required)
+  statics: {}, // <- collection methods (optional)
+  methods: {}, // <- instance-methods methods (optional)
   options: {
-    initialDocs: [] // docs to be imported into empty collection (optional)
-  }
+    initialDocs: [], // docs to be imported into empty collection (optional)
+  },
 };
 
 @NgModule({
@@ -154,14 +156,14 @@ export class TodosService {
 
 By using this module you can
 
-* Automatically initialize db with settings, optionally provide db dumb to pre-fill with collections & documents
-* Automatically initialize RxCollection for each _lazy-loaded Feature module_ with config
-* Work straight with `db.collection` or via _NgxRxdbCollectionService_ wrapper with some helper methods
+- Automatically initialize db with settings, optionally provide db dumb to pre-fill with collections & documents
+- Automatically initialize RxCollection for each _lazy-loaded Feature module_ with config
+- Work straight with `db.collection` or via _NgxRxdbCollectionService_ wrapper with some helper methods
 
 To-do list:
 
-* Enable sync
-* ...
+- Enable sync
+- ...
 
 ## Diagrams
 
@@ -179,9 +181,29 @@ Project is: _in progress_
 
 Project inspired by
 
-* [rxdb-angular2-example](https://github.com/pubkey/rxdb/blob/master/examples/angular2/README.md#rxdb-angular2-example)
-* [Angular NgRx Material Starter](https://tomastrajan.github.io/angular-ngrx-material-starter#/examples/todos)
-* _The Angular Library Series_ from [Angular In Depth](https://blog.angularindepth.com/)
+- [rxdb-angular2-example](https://github.com/pubkey/rxdb/blob/master/examples/angular2/README.md#rxdb-angular2-example)
+- [Angular NgRx Material Starter](https://tomastrajan.github.io/angular-ngrx-material-starter#/examples/todos)
+- _The Angular Library Series_ from [Angular In Depth](https://blog.angularindepth.com/)
+
+## Notes
+
+- example on how to trigger a query on signal change. e.g. filter todos using DB query and not in memory
+  so `fetch` then must be triggered every time
+
+```
+toObservable(filter)
+  .pipe(
+    switchMap(filterValue => {
+      if (filterValue === 'COMPLETED') {
+        query.selector = { completed: { $eq: true } };
+      } else if (filterValue === 'ACTIVE') {
+        query.selector = { completed: { $eq: false } };
+      }
+      return find(query);
+    }),
+    takeUntilDestroyed(this)
+  ).subscribe();
+```
 
 ## Contact
 

diff --git a/examples/standalone/.eslintrc.json b/examples/standalone/.eslintrc.json
@@ -1,15 +1,9 @@
 {
-  "extends": [
-    "../../.eslintrc.json"
-  ],
-  "ignorePatterns": [
-    "!**/*"
-  ],
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
   "overrides": [
     {
-      "files": [
-        "*.ts"
-      ],
+      "files": ["*.ts"],
       "extends": [
         "plugin:@nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates"
@@ -21,12 +15,8 @@
       }
     },
     {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@nx/angular-template"
-      ],
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
       "rules": {}
     }
   ]

diff --git a/examples/standalone/project.json b/examples/standalone/project.json
@@ -36,9 +36,12 @@
               "maximumError": "4kb"
             }
           ],
-          "outputHashing": "all"
+          "outputHashing": "all",
+          "extractLicenses": false
         },
         "development": {
+          "outputHashing": "none",
+          "optimization": false,
           "extractLicenses": false,
           "sourceMap": true,
           "namedChunks": true

diff --git a/examples/standalone/src/app/app.component.ts b/examples/standalone/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import { ApplicationRef, Component, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { filter } from 'rxjs';
 
@@ -11,8 +12,8 @@ import { filter } from 'rxjs';
   `,
 })
 export class AppComponent {
-  private router = inject(Router)
-  private appRef = inject(ApplicationRef)
+  private router = inject(Router);
+  private appRef = inject(ApplicationRef);
   constructor() {
     this.zonelessRouterStarter();
   }
@@ -21,7 +22,7 @@ export class AppComponent {
     this.router.events
       .pipe(
         filter(event => event instanceof NavigationEnd),
-        // takeUntilDestroyed()
+        takeUntilDestroyed()
       )
       .subscribe(() => {
         this.appRef.tick();