diff --git a/.eslintrc.json b/.eslintrc.json index 5bd3ed6..6794024 100644 --- 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 index 250f6e8..bec7e27 100644 --- 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 index 8ab2ddc..aef0460 100644 --- 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 index 875bd09..ee61730 100644 --- 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 index ac9952c..15c870d 100644 --- 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 index 54c6f98..64005f0 100644 --- 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 index 87b8499..d6a966a 100644 --- 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(); diff --git a/examples/standalone/src/app/todos/todos.component.html b/examples/standalone/src/app/todos/todos.component.html index 8fa1211..1e038c3 100644 --- a/examples/standalone/src/app/todos/todos.component.html +++ b/examples/standalone/src/app/todos/todos.component.html @@ -8,8 +8,8 @@

todos

placeholder="What needs to be done?" autofocus="" (keyup)="todoStore.newTodoChange(newtodoInput.value)" - (keyup.enter)="addTodo($event)" - (keyup.escape)="resetInput(newtodoInput)" + (keyup.enter)="todoStore.addTodo($event)" + (keyup.escape)="todoStore.resetInput(newtodoInput)" />
@@ -19,10 +19,10 @@

todos

type="checkbox" [hidden]="!todoStore.count()" #toggleall - (click)="toggleAllTodos(!!todoStore.remaining())" + (click)="todoStore.toggleAllTodos(!!todoStore.remaining())" /> -