Feat: introduce streamlit integration (#68)

* Streamlit Integration: Introduces RxDB integration within Streamlit environments, e.g. managing RxDB collection as dataframe in Streamlit
* Project Structure Refactoring: Refactors tokens names, import statements and project structure to conform to framework-agnostic approach (import & compile service(s) under non-Angular environment)

.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"
+      }
     }
-  }
+  ]
 }