Feat: introduce streamlit integration

.eslintignore

@@ -1,3 +1,4 @@
 node_modules
 !.commitlintrc.json
 **/package.json
+tools/scripts

.vscode/launch.json

@@ -71,24 +71,66 @@
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "node",
- "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
- "args": ["${relativeFile}"],
+ "runtimeArgs": [
+ "--nolazy",
+ "-r",
+ "ts-node/register"
+ ],
+ "args": [
+ "${relativeFile}"
+ ],
  "sourceMaps": true,
  "cwd": "${workspaceRoot}",
  "protocol": "inspector",
- "skipFiles": ["<node_internals>/**", "node_modules/**"],
+ "skipFiles": [
+ "<node_internals>/**",
+ "node_modules/**"
+ ],
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "env": {
  "TS_NODE_PROJECT": "${workspaceFolder}/tools/tsconfig.tools.json",
  "TS_NODE_TRANSPILE_ONLY": "true"
  },
  "disableOptimisticBPs": true
+ },
+ //
+ {
+ "name": "Python: Debug Test",
+ "type": "debugpy",
+ "request": "launch",
+ "module": "pytest",
+ "args": [
+ "${file}"
+ ],
+ "env": {
+ "PYTHONPATH": "${workspaceFolder}"
+ },
+ "console": "integratedTerminal"
+ },
+ {
+ "name": "Python: Debug Streamlit",
+ "type": "debugpy",
+ "request": "launch",
+ "module": "streamlit",
+ "args": [
+ "run",
+ "${file}",
+ "--server.headless=true",
+ "--browser.gatherUsageStats=false"
+ ],
+ "env": {
+ "PYTHONPATH": "${workspaceFolder}"
+ },
+ "console": "integratedTerminal"
  }
  ],
  "inputs": [
  {
- "options": ["rxdb", "kinto"],
+ "options": [
+ "rxdb",
+ "kinto"
+ ],
  "id": "libName",
  "type": "pickString",
  "default": "rxdb",

.vscode/settings.json

@@ -9,5 +9,9 @@
  "statusBarItem.remoteBackground": "#8d2089",
  "statusBarItem.remoteForeground": "#e7e7e7"
  },
- "peacock.color": "#8d2089"
+ "peacock.color": "#8d2089",
+ "python.defaultInterpreterPath": "/home/voznik/.cache/pypoetry/virtualenvs/streamlit-rxdb-dataframe-zuiqvGqO-py3.10",
+ "flake8.args": ["--max-line-length=100"],
+ "flake8.importStrategy": "fromEnvironment",
+ "black-formatter.args": ["--line-length=100"]
 }

README.md

@@ -63,6 +63,12 @@ import { getRxDatabaseCreator } from '@ngx-odm/rxdb/config';
  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)
  },
@@ -106,7 +112,7 @@ const todoCollectionConfig: RxCollectionCreatorExtended = {
 })
 export class TodosModule {
  constructor(
- @Inject(NgxRxdbCollectionService) private collectionService: NgxRxdbCollection<Todo>
+ @Inject(RXDB_COLLECTION) private collectionService: RxDBCollectionService<Todo>
  ) {
  this.collectionService.sync(); // INFO: collection is ready
  }
@@ -116,11 +122,13 @@ export class TodosModule {
 ### In your `FeatureService`
 
 ```typescript
+import { RXDB_COLLECTION } from '@ngx-odm/rxdb';
+import { RxDBCollectionService } from '@ngx-odm/rxdb/collection';
+
 @Injectable()
 export class TodosService {
- private collectionService: NgxRxdbCollection<Todo> = inject<NgxRxdbCollection<Todo>>(
- NgxRxdbCollectionService
- );
+ private collectionService: RxDBCollectionService<Todo> =
+ inject<RxDBCollectionService<Todo>>(RXDB_COLLECTION);
  // store & get filter as property of a `local` document
  filter$ = this.collectionService
  .getLocal('local', 'filterValue')
@@ -177,6 +185,12 @@ export const appConfig: ApplicationConfig = {
  multiInstance: true,
  ignoreDuplicate: false,
  storage: getRxStorageDexie(),
+ plugins: [
+ // will be loaded by together with core plugins
+ RxDBDevModePlugin, // <- add only for development
+ RxDBAttachmentsPlugin,
+ RxDBLeaderElectionPlugin,
+ ],
  })
  ),
  ],

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

@@ -5,6 +5,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { NgxRxdbModule } from '@ngx-odm/rxdb';
 import { getRxDatabaseCreator } from '@ngx-odm/rxdb/config';
 import { RxDBAttachmentsPlugin } from 'rxdb/plugins/attachments';
+import { RxDBDevModePlugin } from 'rxdb/plugins/dev-mode';
 import { RxDBLeaderElectionPlugin } from 'rxdb/plugins/leader-election';
 import { AppComponent } from './app.component';
 
@@ -35,6 +36,7 @@ const routes: Routes = [
  options: {
  plugins: [
  // will be loaded by together with core plugins
+ RxDBDevModePlugin,
  RxDBAttachmentsPlugin,
  RxDBLeaderElectionPlugin,
  ],

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

@@ -3,8 +3,8 @@ import { Inject, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { LetDirective, PushPipe } from '@ngrx/component';
-import { NgxRxdbModule } from '@ngx-odm/rxdb';
-import { NgxRxdbCollection, NgxRxdbCollectionService } from '@ngx-odm/rxdb/collection';
+import { NgxRxdbModule, RXDB_COLLECTION } from '@ngx-odm/rxdb';
+import { RxDBCollectionService } from '@ngx-odm/rxdb/collection';
 import { TODOS_COLLECTION_CONFIG, Todo } from '@shared';
 import { TodosComponent } from './todos.component';
 import { TodosPipe } from './todos.pipe';
@@ -24,7 +24,7 @@ import { TodosService } from './todos.service';
 })
 export class TodosModule {
  constructor(
- @Inject(NgxRxdbCollectionService) private collectionService: NgxRxdbCollection<Todo>
+ @Inject(RXDB_COLLECTION) private collectionService: RxDBCollectionService<Todo>
  ) {
  this.collectionService.sync();
  }

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

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform, inject } from '@angular/core';
-import { RXDB_CONFIG_COLLECTION } from '@ngx-odm/rxdb/config';
+import { RXDB_CONFIG_COLLECTION } from '@ngx-odm/rxdb';
 import { Todo, TodosFilter } from '@shared';
 
 @Pipe({ name: 'byStatus' })

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

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { Injectable, inject } from '@angular/core';
-import { NgxRxdbCollection, NgxRxdbCollectionService } from '@ngx-odm/rxdb/collection';
+import { RXDB_COLLECTION } from '@ngx-odm/rxdb';
+import { RxDBCollectionService } from '@ngx-odm/rxdb/collection';
 import { DEFAULT_LOCAL_DOCUMENT_ID } from '@ngx-odm/rxdb/config';
 import { Todo, TodosFilter, TodosLocalState } from '@shared';
 import { Observable, distinctUntilChanged, startWith } from 'rxjs';
@@ -10,9 +11,8 @@ const withAttachments = true;
 
 @Injectable()
 export class TodosService {
- private collectionService: NgxRxdbCollection<Todo> = inject<NgxRxdbCollection<Todo>>(
- NgxRxdbCollectionService
- );
+ private collectionService: RxDBCollectionService<Todo> =
+ inject<RxDBCollectionService<Todo>>(RXDB_COLLECTION);
  newTodo = '';
  current: Todo = undefined;
 

examples/shared/index.ts

@@ -2,8 +2,8 @@
 export * from './todos.animation';
 export * from './todos.config';
 export * from './todos.model';
+export * from './todos.schema';
 export * from './todos.replication';
 export * from './todos.migration';
 export * from './environment';
 // end:ng42.barrel
-

examples/shared/todos.schema.ts

@@ -0,0 +1,41 @@
+export const TODO_SCHEMA = {
+ definitions: {},
+ type: 'object',
+ title: 'Todo',
+ description: 'Todo Schema',
+ required: ['id', 'title', 'createdAt'],
+ version: 3,
+ properties: {
+ id: {
+ type: 'string',
+ title: 'Id',
+ pattern: '^(.*)$',
+ maxLength: 36,
+ readOnly: true,
+ },
+ title: {
+ type: 'string',
+ title: 'Title',
+ },
+ completed: {
+ type: 'boolean',
+ title: 'Done',
+ },
+ createdAt: {
+ type: 'string',
+ title: 'Created Date',
+ format: 'date-time',
+ readOnly: true,
+ },
+ last_modified: {
+ type: 'number',
+ title: 'Last Modified Date',
+ multipleOf: 1,
+ },
+ },
+ __indexes: ['createdAt'],
+ primaryKey: 'id',
+ attachments: {
+ encrypted: false,
+ },
+};

examples/standalone/src/app/app.config.ts

@@ -6,6 +6,7 @@ import { provideRouter, withRouterConfig } from '@angular/router';
 import { provideRxDatabase } from '@ngx-odm/rxdb';
 import { getRxDatabaseCreator } from '@ngx-odm/rxdb/config';
 import { RxDBAttachmentsPlugin } from 'rxdb/plugins/attachments';
+import { RxDBDevModePlugin } from 'rxdb/plugins/dev-mode';
 import { RxDBLeaderElectionPlugin } from 'rxdb/plugins/leader-election';
 import { appRoutes } from './app.routes';
 
@@ -26,6 +27,7 @@ export const appConfig: ApplicationConfig = {
  options: {
  plugins: [
  // will be loaded by together with core plugins
+ RxDBDevModePlugin,
  RxDBAttachmentsPlugin,
  RxDBLeaderElectionPlugin,
  ],

nx.json

@@ -9,9 +9,7 @@
  "defaultBase": "origin/master"
  },
  "release": {
- "projects": [
- "packages/*"
- ],
+ "projects": ["packages/*"],
  "projectChangelogs": {
  "createRelease": "github"
  },
@@ -23,13 +21,8 @@
  },
  "targetDefaults": {
  "build": {
- "dependsOn": [
- "^build"
- ],
- "inputs": [
- "production",
- "^production"
- ],
+ "dependsOn": ["^build"],
+ "inputs": ["production", "^production"],
  "cache": true
  },
  "lint": {
@@ -42,11 +35,7 @@
  "cache": true
  },
  "@nx/jest:jest": {
- "inputs": [
- "default",
- "^production",
- "{workspaceRoot}/jest.preset.js"
- ],
+ "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"],
  "cache": true,
  "options": {
  "passWithNoTests": true
@@ -60,10 +49,7 @@
  }
  },
  "namedInputs": {
- "default": [
- "{projectRoot}/**/*",
- "sharedGlobals"
- ],
+ "default": ["{projectRoot}/**/*", "sharedGlobals"],
  "production": [
  "default",
  "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
@@ -89,6 +75,40 @@
  },
  "@nx/angular:component": {
  "style": "css"
+ },
+ "@nx/react": {
+ "library": {
+ "style": "css",
+ "linter": "eslint",
+ "unitTestRunner": "jest"
+ },
+ "application": {
+ "babel": true,
+ "style": "css",
+ "linter": "eslint",
+ "bundler": "vite"
+ },
+ "component": {
+ "style": "css"
+ }
+ }
+ },
+ "plugins": [
+ {
+ "plugin": "@nx/eslint/plugin",
+ "options": {
+ "targetName": "lint"
+ }
+ },
+ {
+ "plugin": "@nx/vite/plugin",
+ "options": {
+ "buildTargetName": "build",
+ "previewTargetName": "preview",
+ "testTargetName": "test",
+ "serveTargetName": "serve",
+ "serveStaticTargetName": "serve-static"
+ }
  }
- }
+ ]
 }