@aiao/rxdb-angular 0.0.7 → 0.0.8

package/src/devtools/devtools.ts

@@ -1,207 +0,0 @@
-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 = '';
-  }
-}

package/src/devtools/entity-table-item.ts

@@ -1,47 +0,0 @@
-import { JsonPipe } from '@angular/common';
-import { afterNextRender, Component, ElementRef, inject, input } from '@angular/core';
-import { RxDBEntityChangeDirective } from '../rxdb-change-detector.directive';
-import { ScrollAdvancedCalcService } from './scroll-advanced-calc.service';
-
-@Component({
-  selector: 'rxdb-entity-item',
-  template: `
-    @let item = entity();
-    @let i = index();
-
-    <pre class="text-xs" [class.bg-base-100]="i % 2 === 0" [rxdbChangeDetector]="item">
-    {{ item | json }}
-    </pre
-    >
-  `,
-  imports: [JsonPipe, RxDBEntityChangeDirective],
-  styles: [
-    `
-      :host {
-        display: block;
-        min-height: 150px;
-      }
-    `
-  ]
-})
-export class RxDBEntityTableItem {
-  readonly #calcService = inject(ScrollAdvancedCalcService);
-  readonly #el = inject(ElementRef);
-  readonly entity = input.required<any>();
-  readonly index = input.required<number>();
-
-  constructor() {
-    afterNextRender(() => {
-      const item = this.entity();
-      this.#calcService.cacheCalcDynamic.update(cache => {
-        if (!cache.some(c => c.trackId === item.id)) {
-          cache.push({
-            trackId: item.id,
-            itemSize: this.#el.nativeElement.getBoundingClientRect().height
-          });
-        }
-        return cache;
-      });
-    });
-  }
-}

package/src/devtools/entity-table-tools.html

@@ -1,56 +0,0 @@
-@let entity_meta_tree = $entity_meta_tree();
-@let current_entity_meta = $current_entity_meta();
-
-<div class="bg-base-200 overflow-y-auto">
-  <ul class="menu menu-xs rounded-box w-30 p-0">
-    @for (ns of entity_meta_tree; track $index) {
-      <li>
-        <details open>
-          <summary>{{ ns.namespace }}</summary>
-          <ul>
-            @for (entity of ns.entities; track entity.name) {
-              <li>
-                <a
-                  [class.menu-active]="current_entity_meta === entity"
-                  (click)="$current_entity_meta.set(entity)"
-                  aria-hidden="true"
-                >
-                  {{ entity.name }}
-                </a>
-              </li>
-            }
-          </ul>
-        </details>
-      </li>
-    }
-  </ul>
-</div>
-
-<div class="relative flex-1 overflow-hidden">
-  <div class="tabs tabs-border tabs-xs bg-base-300 h-full">
-    <input class="tab" aria-label="Data" checked="checked" name="my_tabs_2" type="radio" />
-    <div class="tab-content h-full overflow-hidden">
-      <cdk-virtual-scroll-viewport
-        class="tab-content h-full"
-        [itemDynamicSizes]="dynamicSize()"
-        maxBufferPx="1350"
-        minBufferPx="900"
-        rdlaboFixVirtualScrollElement
-      >
-        @defer (on viewport) {
-          <ng-container *cdkVirtualFor="let item of $entity_all_data(); let i = index; trackBy: trackByFn">
-            <rxdb-entity-item [entity]="item" [index]="i"></rxdb-entity-item>
-          </ng-container>
-        } @placeholder {
-          <div class="h-40"></div>
-        }
-      </cdk-virtual-scroll-viewport>
-    </div>
-    <input class="tab" aria-label="Metadata" name="my_tabs_2" type="radio" />
-    <div class="tab-content h-full overflow-y-auto">
-      @if (current_entity_meta) {
-        <ao-code-editor [theme]="theme()" [value]="current_entity_meta | json" language="json"></ao-code-editor>
-      }
-    </div>
-  </div>
-</div>

package/src/devtools/entity-table-tools.scss

@@ -1,8 +0,0 @@
-:host {
-  @apply flex h-full w-full overflow-hidden;
-}
-
-.menu :where(li ul) {
-  margin-inline-start: calc(0.25rem * 2);
-  padding-inline-start: calc(0.25rem * 0);
-}

package/src/devtools/entity-table-tools.ts

@@ -1,153 +0,0 @@
-import { CodeEditor } from '@aiao/code-editor-angular';
-import { EntityMetadata, EntityType, getEntityMetadata, RxDB } from '@aiao/rxdb';
-import { nextMacroTask } from '@aiao/utils';
-import { ObserversModule } from '@angular/cdk/observers';
-import { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  computed,
-  effect,
-  inject,
-  input,
-  OnInit,
-  signal,
-  viewChild
-} from '@angular/core';
-import { toObservable, toSignal } from '@angular/core/rxjs-interop';
-import {
-  CdkDynamicSizeVirtualScroll,
-  DynamicSizeVirtualScrollService,
-  itemDynamicSize
-} from '@rdlabo/ngx-cdk-scroll-strategies';
-import { LucideAngularModule } from 'lucide-angular';
-import { of, switchMap } from 'rxjs';
-import { RxDBEntityTableItem } from './entity-table-item';
-import { ScrollAdvancedCalcService } from './scroll-advanced-calc.service';
-
-interface EntityTreeItem {
-  namespace: string;
-  entities: EntityMetadata[];
-}
-(BigInt.prototype as any)['toJSON'] = function () {
-  return Number(this);
-};
-@Component({
-  selector: 'rxdb-entity-table-tools',
-  imports: [
-    LucideAngularModule,
-    CommonModule,
-    RxDBEntityTableItem,
-    CodeEditor,
-    ObserversModule,
-    CdkVirtualForOf,
-    CdkVirtualScrollViewport,
-    CdkDynamicSizeVirtualScroll
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  styleUrls: ['./entity-table-tools.scss'],
-  templateUrl: './entity-table-tools.html'
-})
-export class RxDBEntityTableTools implements OnInit {
-  #rxdb = inject(RxDB);
-  #entity_metadata_map = new Map<EntityMetadata, EntityType>();
-  #scroll = inject(DynamicSizeVirtualScrollService);
-  #calcService = inject(ScrollAdvancedCalcService);
-  #latestScrollOffset = 0;
-
-  virtualScroll = viewChild(CdkVirtualScrollViewport);
-
-  dynamicSize = computed<itemDynamicSize[]>(() => {
-    const size = this.#calcService.changeItemsToDynamicItemSize(
-      this.$entity_all_data() as any,
-      this.#calcService.cacheCalcDynamic(),
-      this.virtualScroll()
-    );
-    return size;
-  });
-
-  cdr = inject(ChangeDetectorRef);
-  theme = input<'light' | 'dark'>('light');
-
-  $entity_meta_tree = signal<EntityTreeItem[]>([]);
-  $current_entity_meta = signal<EntityMetadata | null>(null);
-
-  current_entity_meta$ = toObservable(this.$current_entity_meta);
-
-  entity_all_data$ = this.current_entity_meta$.pipe(
-    switchMap(meta => {
-      if (meta) {
-        const entity = this.#entity_metadata_map.get(meta)!;
-        return this.#rxdb.entityManager.getRepository(entity).findAll({
-          where: {
-            combinator: 'and',
-            rules: []
-          },
-          orderBy: [
-            {
-              field: 'id',
-              sort: 'desc'
-            }
-          ]
-        });
-      } else {
-        return of([]);
-      }
-    })
-  );
-
-  $entity_all_data = toSignal(this.entity_all_data$);
-  constructor() {
-    effect(() => {
-      this.$current_entity_meta();
-      nextMacroTask(() => {
-        this.#calcService.beforeCacheCalcDynamicSize.set(0);
-        this.#calcService.cacheCalcDynamic.set([]);
-        this.virtualScroll()?.scrollTo({
-          top: 0
-        });
-      });
-    });
-  }
-  trackByFn = (_: number, item: any) => {
-    let track_id = item.id;
-    if (item.updatedAt) {
-      track_id += (item.updatedAt as Date).getTime();
-    }
-    return track_id;
-  };
-
-  ngOnInit(): void {
-    this.#scroll.onInit(this.virtualScroll()!, this.#latestScrollOffset);
-    this.virtualScroll()?.scrolledIndexChange.subscribe(() => {
-      if (this.#calcService.beforeCacheCalcDynamicSize() !== this.#calcService.cacheCalcDynamic().length) {
-        this.#calcService.cacheCalcDynamic.update(cache => [...cache]);
-        this.#calcService.beforeCacheCalcDynamicSize.set(this.#calcService.cacheCalcDynamic().length);
-      }
-    });
-
-    const entity_meta_tree: EntityTreeItem[] = [];
-    let rxdb_change_meta: any;
-    this.#rxdb.config.entities.forEach(entity => {
-      const meta = getEntityMetadata(entity);
-      this.#entity_metadata_map.set(meta, entity);
-      if (meta.name === 'RxDBChange') {
-        rxdb_change_meta = meta;
-      }
-      const namespace = meta.namespace;
-      const existing = entity_meta_tree.find(item => item.namespace === namespace);
-      if (existing) {
-        existing.entities.push(meta);
-      } else {
-        entity_meta_tree.push({
-          namespace,
-          entities: [meta]
-        });
-      }
-    });
-    this.$entity_meta_tree.set(entity_meta_tree);
-    this.$current_entity_meta.set(rxdb_change_meta);
-  }
-}

package/src/devtools/event-tools.html

@@ -1,15 +0,0 @@
-@let events = $events();
-
-<div class="bg-base-300 w-full text-xs">
-  <button class="btn btn-xs" (click)="clear()">clear</button>
-  <span>{{ events.length }}</span>
-</div>
-<div class="bg-base-300 relative flex-1 overflow-y-auto">
-  @for (item of events; track item) {
-    @defer (on viewport) {
-      <pre class="text-xs" [class.bg-base-100]="$index % 2 === 0" animate.enter="fade-in">{{ item | json }}</pre>
-    } @placeholder {
-      <div class="h-40">loading...</div>
-    }
-  }
-</div>

package/src/devtools/event-tools.scss

@@ -1,18 +0,0 @@
-:host {
-  @apply flex h-full w-full flex-col overflow-hidden;
-}
-
-.fade-in {
-  animation: fadeIn 0.3s ease-out;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateX(100px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}

package/src/devtools/event-tools.ts

@@ -1,45 +0,0 @@
-import {
-  ENTITY_LOCAL_CREATE_EVENT,
-  ENTITY_LOCAL_NEW_EVENT,
-  ENTITY_LOCAL_REMOVE_EVENT,
-  ENTITY_LOCAL_UPDATE_EVENT,
-  RxDB,
-  RxDBEvent,
-  TRANSACTION_BEGIN,
-  TRANSACTION_COMMIT,
-  TRANSACTION_ROLLBACK
-} from '@aiao/rxdb';
-import { JsonPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
-import { LucideAngularModule } from 'lucide-angular';
-
-@Component({
-  selector: 'rxdb-event-tools',
-  imports: [LucideAngularModule, JsonPipe],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  styleUrls: ['./event-tools.scss'],
-  templateUrl: './event-tools.html'
-})
-export class RxDBEventTools implements OnInit {
-  #rxdb = inject(RxDB);
-
-  $events = signal<RxDBEvent[]>([]);
-
-  ngOnInit(): void {
-    this.#rxdb.addEventListener(ENTITY_LOCAL_NEW_EVENT, this.handler);
-    this.#rxdb.addEventListener(ENTITY_LOCAL_CREATE_EVENT, this.handler);
-    this.#rxdb.addEventListener(ENTITY_LOCAL_UPDATE_EVENT, this.handler);
-    this.#rxdb.addEventListener(ENTITY_LOCAL_REMOVE_EVENT, this.handler);
-    this.#rxdb.addEventListener(TRANSACTION_BEGIN, this.handler);
-    this.#rxdb.addEventListener(TRANSACTION_COMMIT, this.handler);
-    this.#rxdb.addEventListener(TRANSACTION_ROLLBACK, this.handler);
-  }
-
-  handler = (event: RxDBEvent) => {
-    this.$events.update(events => [event, ...events]);
-  };
-
-  clear() {
-    this.$events.set([]);
-  }
-}

package/src/devtools/scroll-advanced-calc.service.ts

@@ -1,41 +0,0 @@
-import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { Injectable, signal } from '@angular/core';
-import { itemDynamicSize } from '@rdlabo/ngx-cdk-scroll-strategies';
-
-export interface ScrollAdvancedItem {
-  id: string;
-}
-
-export interface DynamicSizeCache {
-  trackId: number | string;
-  itemSize: number;
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ScrollAdvancedCalcService {
-  readonly cacheCalcDynamic = signal<DynamicSizeCache[]>([]);
-  readonly beforeCacheCalcDynamicSize = signal<number>(0);
-
-  changeItemsToDynamicItemSize(
-    items: ScrollAdvancedItem[],
-    dynamicSizeCache: DynamicSizeCache[],
-    virtualScroll: CdkVirtualScrollViewport | undefined
-  ): itemDynamicSize[] {
-    if (virtualScroll === undefined) {
-      return [];
-    }
-    return (
-      items?.map(item => {
-        const cacheSize = dynamicSizeCache.find(cache => cache.trackId === item.id)?.itemSize;
-        const itemSize = cacheSize || 150;
-        return {
-          itemSize: Math.ceil(itemSize),
-          trackId: item.id,
-          source: cacheSize !== undefined ? 'cache' : 'temporary'
-        };
-      }) || []
-    );
-  }
-}

package/src/devtools/settings.html

@@ -1,46 +0,0 @@
-<div class="p-2">
-  <fieldset class="fieldset">
-    <legend class="fieldset-legend">Side</legend>
-    <div class="join" id="side">
-      <button
-        class="btn join-item btn-xs btn-ghost"
-        id="panel-left"
-        (click)="sideChange.emit('left')"
-        aria-hidden="true"
-      >
-        <lucide-icon [img]="PanelLeft" size="16"></lucide-icon>
-      </button>
-      <button
-        class="btn join-item btn-xs btn-ghost"
-        id="panel-bottom"
-        (click)="sideChange.emit('bottom')"
-        aria-hidden="true"
-      >
-        <lucide-icon [img]="PanelBottom" size="16"></lucide-icon>
-      </button>
-      <button
-        class="btn join-item btn-xs btn-ghost"
-        id="panel-right"
-        (click)="sideChange.emit('right')"
-        aria-hidden="true"
-      >
-        <lucide-icon [img]="PanelRight" size="16"></lucide-icon>
-      </button>
-    </div>
-  </fieldset>
-
-  <fieldset class="fieldset">
-    <legend class="fieldset-legend">tools</legend>
-    <div class="flex gap-2 p-2">
-      <button class="btn btn-xs" (click)="delete_db()">delete_db</button>
-    </div>
-  </fieldset>
-</div>
-
-<ng-template #message let-message="message">
-  <div class="toast toast-top toast-center">
-    <div class="alert alert-error">
-      <span>{{ message }}</span>
-    </div>
-  </div>
-</ng-template>

package/src/devtools/settings.scss

@@ -1,19 +0,0 @@
-:host {
-  @apply flex h-full w-full flex-col overflow-hidden;
-}
-
-:has(rxdb-devtools.right) :host {
-  #panel-right {
-    color: var(--color-primary);
-  }
-}
-:has(rxdb-devtools.left) :host {
-  #panel-left {
-    color: var(--color-primary);
-  }
-}
-:has(rxdb-devtools.bottom) :host {
-  #panel-bottom {
-    color: var(--color-primary);
-  }
-}