Code Monkey home page Code Monkey logo

ngx-odm's Introduction

@ngx-odm/rxdb

Angular 14+ wrapper for RxDB - A realtime Database for the Web

Demo

Example Screencast

demo - based on TodoMVC

Table of contents

General info

If you don't want to setup RxDB manually in your next Angular project - just import NgxRxdbModule or go with provideRxDatabase and provideRxCollection if standalone component is your choice.

Technologies

RxDB Angular 14+
RxDB Angular

Install

npm install @ngx-odm/rxdb

Usage (NgModule)

In your AppModule

import { NgxRxdbModule } from '@ngx-odm/rxdb';
import { getRxDatabaseCreator } from '@ngx-odm/rxdb/config';

@NgModule({
  imports: [
    // ... other imports
    NgxRxdbModule.forRoot(
      getRxDatabaseCreator({
        name: 'demo', // <- name (required, 'ngx')
        storage: getRxStorageDexie(), // <- storage (not required, 'dexie')
        localDocuments: true,
        multiInstance: true, // <- multiInstance (optional, default: true)
        ignoreDuplicate: false,
        options: {
          plugins: [
            // will be loaded by together with core plugins
            RxDBDevModePlugin, // <- add only for development
            RxDBAttachmentsPlugin,
            RxDBLeaderElectionPlugin,
          ],
          storageType: 'dexie|memory', // <- storageType (optional, use if you want defaults provided automatically)
          dumpPath: 'assets/dump.json', // path to datbase dump file (optional)
        },
      })
    ),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
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. https://rxdb.info/rx-schema.html

import type { RxCollectionCreatorExtended } from '@ngx-odm/rxdb/config';
// create or import your schema
const todoSchema: RxSchema = require('../../../assets/data/todo.schema.json');
// create config
const todoCollectionConfig: RxCollectionCreatorExtended = {
  name: 'todo', // <- name (required)
  schema: todoSchema, // <- schema (not required, see below)
  localDocuments: true,
  options: {
    initialDocs: [], // docs to be imported into empty collection (optional)
    schemaUrl: 'assets/data/todo.schema.json', // load schema from remote url (optional)
    replicationStateFactory: collection => {
      // provide replication state (optional)
    },
  },
};

@NgModule({
  imports: [
    // ... other imports
    NgxRxdbModule.forFeature(todoCollectionConfig),
  ],
})
export class TodosModule {
  constructor(
    @Inject(RXDB_COLLECTION) private collectionService: RxDBCollectionService<Todo>
  ) {
    this.collectionService.sync(); // INFO: collection is ready
  }
}

In your FeatureService

import { RXDB_COLLECTION } from '@ngx-odm/rxdb';
import { RxDBCollectionService } from '@ngx-odm/rxdb/collection';

@Injectable()
export class TodosService {
  private collectionService: RxDBCollectionService<Todo> =
    inject<RxDBCollectionService<Todo>>(RXDB_COLLECTION);
  // store & get filter as property of a `local` document
  filter$ = this.collectionService
    .getLocal('local', 'filterValue')
    .pipe(startWith('ALL'), distinctUntilChanged());
  // get count of documents in collection as observable
  count$ = this.collectionService.count();

  // get documents from collection as observable
  // optionally using `RxQuery` mango-queries
  todos$: Observable<Todo[]> = this.collectionService.docs();

  // add new document
  add(name: string): void {
    const payload: Todo = { guid: uuid(), name, done: false, dateCreated: Date.now() };
    this.collectionService.insert(payload);
  }

  // update property of single document
  toggle(guid: string, done: boolean): void {
    this.collectionService.set(guid, { done });
  }

  // update many documents with partial data by query
  toggleAllTodos(completed: boolean) {
    this.collectionService.updateBulk(
      { selector: { completed: { $eq: !completed } } },
      { completed }
    );
  }

  // remove many dcouments by qeury
  removeCompletedTodos(): void {
    this.collectionService.removeBulk({ selector: { completed: true } });
  }
  // ...
}

Usage (Standalone)

In your main.ts

import { provideRxDatabase } from '@ngx-odm/rxdb';
import { getRxDatabaseCreator } from '@ngx-odm/rxdb/config';

export const appConfig: ApplicationConfig = {
  providers: [
    // ... other providers
    provideRxDatabase(
      getRxDatabaseCreator({
        name: 'demo',
        localDocuments: true,
        multiInstance: true,
        ignoreDuplicate: false,
        storage: getRxStorageDexie(),
        plugins: [
          // will be loaded by together with core plugins
          RxDBDevModePlugin, // <- add only for development
          RxDBAttachmentsPlugin,
          RxDBLeaderElectionPlugin,
        ],
      })
    ),
  ],
};

bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));

In your Component

import { provideRxCollection } from '@ngx-odm/rxdb';

@Component({
  standalone: true,
  // ...
  providers: [provideRxCollection(config)],
})
export class StandaloneComponent {
  readonly todoCollection = inject(NgxRxdbCollectionService<Todo>);
}

Using sginals & signalStore from @ngrx/signals

import { signalStore } from '@ngrx/signals';
import { withEntities } from '@ngrx/signals/entities';
import { withCollectionService } from '@ngx-odm/rxdb/signals';
import { withDevtools } from '@angular-architects/ngrx-toolkit';

export const TodoStore = signalStore(
  { providedIn: 'root' },
  withDevtools('todo'),
  withEntities<Todo>(),
  // INFO: an instance of RxCollection will be provided by this
  withCollectionService<Todo, TodosFilter, RxCollectionCreatorExtended>({
    filter: 'ALL' as TodosFilter,
    collectionConfig: TodosCollectionConfig,
  }),
  ...
);

@Component({
  standalone: true,
  // ...
  providers: [TodoStore],
})
export class StandaloneComponent {
  readonly todoStore = inject(TodoStore);

  constructor() {
    effect(() => {
      const { filter, entities } = this.todoStore;
    });
  }
}

Features

By using this module you can simplify your work with RxDB in Angular application:

  • Automatically initialize db with settings
    • optionally provide db dumb to pre-fill collections
    • optionally provide array of initial documents to pre-fill collection
    • optionally provide remote location for schema and fetch it automatically before create collection (e.g. to maintain single source of truth for schema)
    • optionally provide syncronization with remote db (CouchDB, Kinto etc.) as DB options
  • Automatically initialize RxCollection for each lazy-loaded Feature module / standalone component with config
  • Work with documents via NgxRxdbCollectionService with unified methods instead of using RxCollection directly (though you still have access to RxCollection and RxDatabase instance)
    • simple methods to work database & documents (with queries)
    • simple methods to work with local documents
    • simple methods to work with attachments
    • simple replication sync initialization
  • Work with signals and entities with @ngrx/signals and @ngrx/entity (optionally zoneless) (see example)
  • Persist collection query (mango-query-syntax) in URL with new plugin query-params-plugin (in demo, set localStorage _ngx_rxdb_queryparams )
    • provide Observable of current URL (automatically for Angular)
    • simple methods to set or patch filter, sort, limit, skip

Status

Project is: in progress

Inspiration

Project inspired by

Notes

Contact

Created by @voznik - feel free to contact me!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.