@aiao/rxdb-angular 0.0.2 → 0.0.7

package/eslint.config.mjs

@@ -0,0 +1,58 @@
+import nx from '@nx/eslint-plugin';
+import jsoncParser from 'jsonc-eslint-parser';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  {
+    files: ['**/*.json'],
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        {
+          ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs,ts,cts,mts}'],
+          ignoredDependencies: [
+            '@analogjs/vite-plugin-angular',
+            '@codecov/vite-plugin',
+            '@angular/common',
+            '@angular/core',
+            '@angular/forms',
+            '@nx/vite',
+            'vite'
+          ]
+        }
+      ]
+    },
+    languageOptions: {
+      parser: jsoncParser
+    }
+  },
+  ...nx.configs['flat/angular'],
+  ...nx.configs['flat/angular-template'],
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'rxdb',
+          style: 'camelCase'
+        }
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'rxdb',
+          style: 'kebab-case'
+        }
+      ]
+    }
+  },
+  {
+    files: ['**/*.html'],
+    // Override or add rules here
+    rules: {}
+  }
+];

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/packages/rxdb-angular",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

package/package.json

@@ -1,27 +1,17 @@
 {
   "name": "@aiao/rxdb-angular",
-  "version": "0.0.2",
+  "version": "0.0.7",
   "peerDependencies": {
-    "@aiao/rxdb": "0.0.2",
-    "@angular/core": "~20.1.6",
-    "@angular/common": "~20.1.6"
+    "@aiao/rxdb": "workspace:*",
+    "@aiao/utils": "workspace:*",
+    "@aiao/code-editor-angular": "workspace:*",
+    "@aiao/rxdb-plugin-graph": "workspace:*",
+    "@angular/core": "^20.0.0",
+    "rxjs": "^7.8.2",
+    "lucide-angular": ">=0.555.0",
+    "@rdlabo/ngx-cdk-scroll-strategies": "^21.0.2",
+    "@angular/cdk": ">=20.0.0",
+    "ngxtension": "^7.0.1"
   },
-  "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "module": "fesm2022/aiao-rxdb-angular.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/aiao-rxdb-angular.mjs"
-    }
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
-}
+  "sideEffects": false
+}

package/project.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "implicitDependencies": ["code-editor-angular"],
+  "name": "rxdb-angular",
+  "prefix": "rxdb",
+  "projectType": "library",
+  "release": {
+    "version": {
+      "manifestRootsToUpdate": ["dist/{projectRoot}"],
+      "currentVersionResolver": "git-tag",
+      "fallbackCurrentVersionResolver": "disk"
+    }
+  },
+  "sourceRoot": "packages/rxdb-angular/src",
+  "tags": ["angular-lib"],
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "packages/rxdb-angular/ng-package.json",
+        "tsConfig": "packages/rxdb-angular/tsconfig.lib.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "packages/rxdb-angular/tsconfig.lib.prod.json"
+        },
+        "development": {}
+      },
+      "defaultConfiguration": "production"
+    },
+    "nx-release-publish": {
+      "options": {
+        "packageRoot": "dist/{projectRoot}"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "test": {
+      "executor": "@nx/vitest:test",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "config": "packages/rxdb-angular/vite.config.mts"
+      }
+    }
+  }
+}

package/src/InfiniteScrollingList.ts

@@ -0,0 +1,123 @@
+import { EntityType, FindByCursorOptions, RxDB } from '@aiao/rxdb';
+import { isFunction, nextMicroTask } from '@aiao/utils';
+import { computed, DestroyRef, effect, EffectRef, inject, Signal, signal, untracked } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+type OptionsInput<T extends EntityType> = FindByCursorOptions<T> | Signal<FindByCursorOptions<T>>;
+
+/**
+ * 无限滚动的列表
+ */
+export class InfiniteScrollingList<T extends EntityType> {
+  readonly #values = signal<InstanceType<T>[][]>([]);
+  readonly #destroy_ref = inject(DestroyRef);
+  readonly #options_eff: EffectRef;
+
+  #is_initialized = false;
+
+  readonly error = signal<Error | undefined>(undefined);
+  readonly isLoading = signal<boolean>(false);
+  readonly hasMore = signal<boolean>(true);
+  readonly value = computed<InstanceType<T>[]>(() => this.#values().flat());
+  readonly hasValue = computed<boolean>(() => this.value().length > 0);
+  readonly isEmpty = computed<boolean>(() => !this.isLoading() && !this.hasValue() && this.#is_initialized);
+
+  constructor(
+    private readonly rxdb: RxDB,
+    private readonly EntityType: T,
+    private readonly options: OptionsInput<T>
+  ) {
+    this.#options_eff = effect(() => {
+      if (isFunction(this.options)) {
+        this.options();
+      }
+      if (!this.#is_initialized) {
+        this.#is_initialized = true;
+        nextMicroTask(() => this.loadMore());
+        return;
+      }
+      untracked(() => this.#reset());
+    });
+
+    this.#destroy_ref.onDestroy(() => {
+      this.#options_eff.destroy();
+    });
+  }
+
+  loadMore(): void {
+    if (this.isLoading() || !this.hasMore()) {
+      return;
+    }
+
+    this.isLoading.set(true);
+    this.error.set(undefined);
+
+    const last_entity = this.#get_last_entity();
+    const opt = isFunction(this.options) ? this.options() : this.options;
+    const options = structuredClone(opt);
+
+    if (last_entity) {
+      options.after = last_entity;
+    }
+
+    const current_index = this.#values().length;
+
+    this.rxdb.entityManager
+      .getRepository(this.EntityType)
+      .findByCursor(options)
+      .pipe(takeUntilDestroyed(this.#destroy_ref))
+      .subscribe({
+        next: result => {
+          this.isLoading.set(false);
+          this.#values.update(values => {
+            const updated = [...values];
+            updated[current_index] = result;
+            return updated;
+          });
+
+          if (result.length < (options.limit || 100)) {
+            this.hasMore.set(false);
+          }
+        },
+        error: error => {
+          this.isLoading.set(false);
+          this.error.set(error);
+        },
+        complete: () => {
+          this.hasMore.set(false);
+          this.isLoading.set(false);
+        }
+      });
+  }
+
+  /**
+   * 刷新列表数据
+   */
+  refresh(): void {
+    // 强制重置状态，即使正在加载中
+    this.#values.set([]);
+    this.error.set(undefined);
+    this.isLoading.set(false); // 强制设置为 false，允许新的 loadMore
+    this.hasMore.set(true);
+
+    // 立即开始加载
+    this.loadMore();
+  }
+  #reset(): void {
+    this.#values.set([]);
+    this.error.set(undefined);
+    this.isLoading.set(false);
+    this.hasMore.set(true);
+    nextMicroTask(() => this.loadMore());
+  }
+
+  #get_last_entity(): InstanceType<T> | undefined {
+    const values = this.#values();
+    if (values.length === 0) return undefined;
+
+    const last_page = values[values.length - 1];
+    if (last_page.length === 0) return undefined;
+
+    return last_page[last_page.length - 1];
+  }
+}

package/src/devtools/devtools.html

@@ -0,0 +1,99 @@
+@let tabs = $tabs();
+@let current_tab = $current_tab();
+
+<div class="touch" (mousedown)="mousedown($event)"></div>
+
+<!-- header -->
+<div class="bg-base-300 z-1 flex min-h-0 flex-row p-0 shadow-sm">
+  <div class="flex-1">
+    <div class="tabs tabs-border tabs-xs" role="tablist">
+      @for (tab of tabs; track $index) {
+        <a
+          class="tab"
+          [class.tab-active]="current_tab === tab.id"
+          (click)="$current_tab.set(tab.id)"
+          aria-hidden="true"
+          role="tab"
+        >
+          {{ tab.name }}
+        </a>
+      }
+    </div>
+  </div>
+  <div>
+    <button class="btn btn-xs btn-ghost" (click)="toggle_settings()" aria-hidden="true">
+      <lucide-icon [img]="Settings" size="16"></lucide-icon>
+    </button>
+    <button class="btn btn-xs btn-ghost" (click)="close_rxdb_devtools()" aria-hidden="true">
+      <lucide-icon [img]="X" size="16"></lucide-icon>
+    </button>
+  </div>
+</div>
+
+<!-- Pages -->
+<div class="bg-base-100 flex h-full flex-1 flex-row overflow-hidden">
+  @switch (current_tab) {
+    @case ('tables') {
+      @defer (on viewport) {
+        <rxdb-entity-table-tools [theme]="theme()"></rxdb-entity-table-tools>
+      } @placeholder {
+        <div>entity table loading...</div>
+      }
+    }
+
+    @case ('events') {
+      @defer (on viewport) {
+        <rxdb-event-tools></rxdb-event-tools>
+      } @placeholder {
+        <div>entity table loading...</div>
+      }
+    }
+
+    @case ('settings') {
+      @defer (on viewport) {
+        <rxdb-settings (sideChange)="$side.set($event)"></rxdb-settings>
+      } @placeholder {
+        <div>entity table loading...</div>
+      }
+    }
+  }
+</div>
+<!-- footer -->
+@let branchName = $branchName();
+@let switch_branching = $switch_branching();
+
+<div class="bg-base-300 relative z-1 flex min-h-0 flex-row p-0 shadow-sm">
+  <div class="relative flex w-30 items-center justify-center">
+    @if (switch_branching) {
+      <span class="loading loading-spinner loading-xs absolute"></span>
+    }
+    <select
+      class="select select-ghost select-xs outline-none"
+      [disabled]="switch_branching"
+      (change)="switch_branch($event)"
+      name="branch"
+    >
+      @for (branch of branches.value(); track $index) {
+        <option [selected]="branch.activated" [value]="branch.id">
+          {{ branch.id }}
+        </option>
+      }
+    </select>
+  </div>
+  <input
+    class="input input-xs w-24 outline-none"
+    [(ngModel)]="$branchName"
+    [disabled]="switch_branching"
+    (keyup.enter)="create_branch(branchName)"
+    placeholder="branch name"
+    type="text"
+  />
+  <button
+    class="btn btn-xs btn-ghost"
+    [class.btn-disabled]="!branchName"
+    [disabled]="switch_branching"
+    (click)="create_branch(branchName)"
+  >
+    Create Branch
+  </button>
+</div>

package/src/devtools/devtools.interface.ts

@@ -0,0 +1,3 @@
+export interface RxDBDevToolsOptions {
+  theme?: 'light' | 'dark';
+}

package/src/devtools/devtools.scss

@@ -0,0 +1,49 @@
+:host {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  border: 1px solid #ccc;
+}
+
+.touch {
+  position: absolute;
+  height: 100%;
+  width: 4px;
+  z-index: 1000;
+  cursor: ew-resize;
+  transition: background 0.1s 0.3s;
+  &:hover {
+    background-color: rgba($color: blue, $alpha: 0.2);
+  }
+}
+
+:host(.right) {
+  top: 0;
+  right: 0;
+  .touch {
+    left: 0;
+    transform: translateX(-2px);
+  }
+}
+
+:host(.left) {
+  top: 0;
+  left: 0;
+  .touch {
+    right: 0;
+    transform: translateX(2px);
+  }
+}
+
+:host(.bottom) {
+  bottom: 0;
+  left: 0;
+  .touch {
+    top: 0;
+    width: 100%;
+    height: 4px;
+    transform: translateY(-2px);
+    cursor: ns-resize;
+  }
+}

package/src/devtools/devtools.spec.ts

@@ -0,0 +1,30 @@
+import { provideZonelessChangeDetection } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserModule } from '@angular/platform-browser';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { provideRxDB } from '../rxdb.provider';
+import { RxDBDevtools } from './devtools';
+
+const setup_rxdb = () => {
+  return null as any;
+};
+
+describe('RxDBDevtools', () => {
+  let component: RxDBDevtools;
+  let fixture: ComponentFixture<RxDBDevtools>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RxDBDevtools, BrowserModule],
+      providers: [provideZonelessChangeDetection(), provideRxDB(setup_rxdb)]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RxDBDevtools);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/devtools/devtools.ts

@@ -0,0 +1,207 @@
+import { RxDB, RxDBBranch } from '@aiao/rxdb';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ComponentRef,
+  DOCUMENT,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  model,
+  signal
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { LucideAngularModule, PanelBottom, PanelLeft, PanelRight, Settings, X } from 'lucide-angular';
+import { useFindAll } from '../hooks';
+import { useState } from '../use-state';
+import { RxDBEntityTableTools } from './entity-table-tools';
+import { RxDBEventTools } from './event-tools';
+import { RxDBSettings } from './settings';
+
+interface FeatureTab {
+  id: string;
+  name: string;
+}
+
+const defaultSize = '480px';
+const state = useState('rxdb-devtools');
+
+@Component({
+  selector: 'rxdb-devtools',
+  imports: [LucideAngularModule, RxDBEntityTableTools, RxDBEventTools, RxDBSettings, FormsModule],
+  styleUrls: ['./devtools.scss'],
+  templateUrl: './devtools.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class.right]': "$side() === 'right'",
+    '[class.left]': "$side() === 'left'",
+    '[class.bottom]': "$side() === 'bottom'",
+    '[style.width]': '$width()',
+    '[style.height]': '$height()'
+  }
+})
+export class RxDBDevtools {
+  #last_tab_before_setting = '';
+  #document = inject(DOCUMENT);
+  #elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  #rxdb = inject(RxDB);
+
+  protected readonly X = X;
+  protected readonly Settings = Settings;
+  protected readonly PanelLeft = PanelLeft;
+  protected readonly PanelBottom = PanelBottom;
+  protected readonly PanelRight = PanelRight;
+
+  public readonly componentRef = input<ComponentRef<RxDBDevtools>>();
+  theme = input<'light' | 'dark'>('light');
+
+  $side = state('side').signal<'right' | 'left' | 'bottom'>('right');
+  $width = state('width').signal<string>(defaultSize);
+  $height = state('height').signal<string>('100%');
+  $switch_branching = model<boolean>(false);
+
+  $branchName = model<string>('');
+
+  $tabs = signal<FeatureTab[]>([
+    {
+      id: 'tables',
+      name: 'Tables'
+    },
+    {
+      id: 'events',
+      name: 'Events'
+    }
+  ]);
+  $current_tab = signal<string>('tables');
+
+  branches = useFindAll(RxDBBranch, {
+    where: {
+      combinator: 'and',
+      rules: []
+    }
+  });
+
+  constructor() {
+    effect(() => {
+      const side = this.$side();
+      switch (side) {
+        case 'left':
+        case 'right':
+          if (this.$height() !== '100%') {
+            this.$width.set(defaultSize);
+            this.$height.set('100%');
+          }
+          break;
+        case 'bottom':
+          if (this.$width() !== '100%') {
+            this.$width.set('100%');
+            this.$height.set(defaultSize);
+          }
+          break;
+      }
+    });
+    effect(() => {
+      const side = this.$side();
+      const width = this.$width();
+      const height = this.$height();
+      this.#body_style_default();
+      switch (side) {
+        case 'left':
+          this.#document.body.style.paddingLeft = width;
+          break;
+        case 'right':
+          this.#document.body.style.paddingRight = width;
+          break;
+        case 'bottom':
+          this.#document.body.style.paddingBottom = height;
+          break;
+      }
+    });
+  }
+
+  close_rxdb_devtools() {
+    this.#body_style_default();
+    this.componentRef()?.destroy();
+  }
+
+  toggle_settings() {
+    const current_tab = this.$current_tab();
+    if (current_tab !== 'settings') {
+      this.#last_tab_before_setting = current_tab;
+      this.$current_tab.set('settings');
+    } else {
+      this.$current_tab.set(this.#last_tab_before_setting || 'tables');
+    }
+  }
+
+  async create_branch(branch_name: string) {
+    try {
+      await this.#rxdb.versionManager.createBranch(branch_name);
+      this.$branchName.set('');
+    } catch {
+      //
+    }
+  }
+
+  mousedown(event: MouseEvent) {
+    const side = this.$side();
+    this.#document.body.style.cursor = side === 'bottom' ? 'ns-resize' : 'ew-resize';
+
+    const pageX = event.pageX;
+    const pageY = event.pageY;
+    const clientWidth = this.#elementRef.nativeElement.clientWidth;
+    const clientHeight = this.#elementRef.nativeElement.clientHeight;
+    const mousemove = (event: MouseEvent) => {
+      switch (side) {
+        case 'left':
+          {
+            let width = clientWidth + event.pageX - pageX;
+            width = width < 100 ? 100 : width;
+            this.$width.set(`${width}px`);
+          }
+          break;
+        case 'right':
+          {
+            let width = clientWidth + pageX - event.pageX;
+            width = width < 100 ? 100 : width;
+            this.$width.set(`${width}px`);
+          }
+          break;
+        case 'bottom':
+          {
+            let height = clientHeight + pageY - event.pageY;
+            height = height < 100 ? 100 : height;
+            this.$height.set(`${height}px`);
+          }
+          break;
+      }
+    };
+    const mouseup = () => {
+      this.#document.body.style.cursor = 'auto';
+      this.#document.removeEventListener('mousemove', mousemove);
+      this.#document.removeEventListener('mouseup', mouseup);
+    };
+    this.#document.addEventListener('mousemove', mousemove);
+    this.#document.addEventListener('mouseup', mouseup);
+  }
+
+  protected async switch_branch(event: Event) {
+    const branch = (event.target as HTMLSelectElement).value;
+    this.$switch_branching.set(true);
+    try {
+      await this.#rxdb.versionManager.switchBranch(branch);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      this.$switch_branching.set(false);
+    }
+  }
+
+  #body_style_default() {
+    this.#document.body.style.paddingBottom = '';
+    this.#document.body.style.paddingRight = '';
+    this.#document.body.style.paddingLeft = '';
+    this.#document.body.style.cursor = '';
+  }
+}