@cuboapp/crdt 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuboapp/crdt",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "CRDT for CUBO",
   "main": "src/index.ts",
   "repository": "git@github.com:cuboapp/crdt.git",
@@ -11,12 +11,16 @@
     "access": "public"
   },
   "dependencies": {
-    "@cuboapp/types": "^2.0.11",
-    "@cuboapp/utils": "1.0.9",
-    "@cuboapp/ws": "1.0.4",
+    "@cuboapp/types": "^2.0.12",
+    "@cuboapp/utils": "1.0.10",
+    "@cuboapp/ws": "1.0.5",
     "ws": "^8.19.0",
     "yjs": "^13.6.29"
   },
+  "peerDependencies": {
+    "vue": "^3.5.26",
+    "vue-router": "^4.6.3"
+  },
   "devDependencies": {
     "@types/node": "^24.10.1",
     "@types/ws": "^8.18.1",

package/src/client/index.ts

@@ -1,106 +1,384 @@
-import { EventEmitter } from '@cuboapp/utils'
-import { createWsClient, WsClient } from '@cuboapp/ws'
+import { keyBy, pick, uuid } from '@cuboapp/utils'
+import { computed, reactive } from 'vue'
 import { applyUpdate, Doc } from 'yjs'
 
-export type CuboCrdtClientOptions = {
-  host?: string
-  port?: number
-  protocol?: 'wss' | 'ws' | string
-  authToken?: () => Promise<string>
-  debug?: boolean
-}
+import { CUBO_CRDT_EVENT } from '../constants'
+import { CuboCrdtServerDocumentIncomingAction } from '../server'
+import { CuboCrdtAction, CuboCrdtKey } from '../types'
 
-export class CuboCrdtClient {
-  private ws: WsClient
+import {
+  CuboCrdtClientDocOrigin,
+  CuboCrdtClientDocUpdateOptions,
+  CuboCrdtClientList,
+  CuboCrdtClientOptions,
+  CuboCrdtClientRow,
+  CuboCrdtClientStore,
+  CuboCrdtClientSubscribeEvent,
+  CuboCrdtClientUseOptions
+} from './types'
 
-  constructor(
-    private opts: CuboCrdtClientOptions,
-    private ee = new EventEmitter()
-  ) {
-    this.ws = createWsClient({
-      host: this.opts.host,
-      port: this.opts.port,
-      protocol: this.opts.protocol,
-      autoReconnect: true,
-      pingInterval: 5000,
-      authToken: this.opts.authToken ? () => this.opts.authToken!() : () => ''
+export * from './types'
+
+export class CuboCrdtClient<M> {
+  public store: CuboCrdtClientStore<M> = {}
+
+  private listeners: Map<string, Map<string, (ctx: CuboCrdtClientSubscribeEvent) => void>> = new Map()
+
+  constructor(private opts: CuboCrdtClientOptions<M>) {
+    opts.entities.forEach((e) => this.listeners.set(e, new Map()))
+  }
+
+  async start() {
+    this.ws.registerHandler(CUBO_CRDT_EVENT.EVENT, ({ message }) => {
+      let events: CuboCrdtClientSubscribeEvent[] = message.data as any
+      if (!Array.isArray(events)) {
+        events = [events as any]
+      }
+
+      // todo: perform events through queue in await mode
+      events.forEach((event) => {
+        const listeners = this.listeners.get(event.entity)
+
+        if (this.debug) {
+          console.log('[CRDT] incoming event', { listeners: listeners?.size, event })
+        }
+
+        if (event.subscribe_id) {
+          const listener = listeners?.get(event.subscribe_id)
+          if (!listener) {
+            console.warn('[CRDT] listener not found:', event.subscribe_id, event)
+          } else {
+            listener(event)
+          }
+        } else {
+          listeners?.forEach((cb) => cb(event))
+        }
+      })
     })
   }
 
-  public async start() {
-    await this.ws.connect()
+  async stop() {
+    this.ws.deleteHandler(CUBO_CRDT_EVENT.EVENT)
 
-    this.ws.registerHandler('message', this.onMessage.bind(this))
+    this.listeners.clear()
   }
 
-  public async stop() {
-    try {
-      await this.ws.disconnect()
-    } catch {}
+  public useComputedList<K extends Extract<keyof M, string>>(entity: K) {
+    return computed(() => (this.store[entity]?.state.rows || []) as M[K][])
   }
 
-  private onMessage({ message }: any) {
-    if (message.event) {
-      this.ee.emit(message.event, message)
+  public useList<K extends Extract<keyof M, string>, T = CuboCrdtKey<K, M>>(
+    entity: K | string,
+    opts?: CuboCrdtClientUseOptions
+  ): CuboCrdtClientList<T> {
+    const storeKey = opts?.storeKey ?? `${entity}`
+    const filters = opts?.filters || {}
+
+    const subscribe_id = uuid()
+
+    // создаём хранилище
+    if (this.store[storeKey] === undefined) {
+      const state = reactive({
+        rows: [],
+        subscribed: false
+      })
+
+      this.store[storeKey] = {
+        state,
+        docs: new Map()
+      }
     }
-  }
 
-  async subscribe({ entity, id, filters }: { entity: string; id?: number; filters?: any }, cb: any) {
-    if (this.opts.debug) {
-      console.log('subscribeEntity', { entity, id })
+    // подписка
+    const subscribe = (filters?: Record<string, any>) => {
+      if (this.store[storeKey]?.state.subscribed) {
+        return
+      }
+
+      // ставим сразу флаг, потому что не может быть ошибок (считаем так)
+      this.store[storeKey]!.state.subscribed = true
+
+      filters = filters !== undefined ? filters : opts?.filters
+
+      if (this.debug) {
+        console.log('[CRDT] subscribe', { entity, opts, filters })
+      }
+
+      // подписываемся на фронте
+      this.listeners.get(entity)?.set(subscribe_id, (ctx) =>
+        this.onIncomingUpdate(ctx, {
+          subscribe_id,
+          storeKey,
+          ...(pick(opts || {}, ['onBeforeCreate', 'onBeforeUpdate', 'onBeforeDelete', 'onAfterCreate', 'onAfterUpdate', 'onAfterDelete']) ||
+            {})
+        })
+      )
+
+      // подписываемся на бэке
+      this.ws.request({ method: CUBO_CRDT_EVENT.SUBSCRIBE, data: { subscribe_id, entity, filters } })
     }
 
-    filters = filters || {}
-    if (id) {
-      filters.id = id
+    // отписка
+    const unsubscribe = (clear?: boolean) => {
+      if (this.debug) {
+        console.log('[CRDT] unsubscribe', { entity, opts, filters })
+      }
+
+      // отписываемся на бэке
+      this.ws.request({ method: CUBO_CRDT_EVENT.UNSUBSCRIBE, data: { subscribe_id } })
+
+      // отписываемся на фронте
+      this.listeners.get(entity)?.delete(subscribe_id)
+
+      // очищаем стор
+      if (clear !== false) {
+        this.store[storeKey] = undefined
+      }
     }
 
-    const event = `crdt:${entity}`
-    // const event = id ? `crdt:${entity}:${id}` : `crdt:${entity}`
+    // авто-подписка
+    if (opts?.autoSubscribe !== false) {
+      subscribe()
+    }
+
+    return {
+      subscribe_id,
+      storeKey,
+      subscribe,
+      unsubscribe,
+      docs: computed(() => this.store[storeKey]?.docs),
+      subscribed: () => computed(() => this.store[storeKey]?.state.subscribed || false),
+      rows: () => computed(() => this.store[storeKey]?.state.rows as T[]),
+      rowsById: () => computed(() => keyBy(this.store[storeKey]?.state.rows as T[], 'id' as keyof T))
+    }
+  }
+
+  public useRow<K extends Extract<keyof M, string>, T = CuboCrdtKey<K, M>>(
+    entity: K | string,
+    id: number,
+    opts?: CuboCrdtClientUseOptions
+  ): CuboCrdtClientRow<T> {
+    // console.log('store key', opts?.storeKey ?? `${entity}:${id}`)
 
-    this.ee.addListener(event, cb)
-    this.ws.request({ method: 'crdt:subscribe', data: { event, filters } })
+    const { subscribe_id, storeKey, docs, subscribe, unsubscribe, subscribed } = this.useList(entity, {
+      ...opts,
+      filters: opts?.filters ?? { id },
+      storeKey: opts?.storeKey ?? `${entity}:${id}`
+    })
+
+    return {
+      subscribe_id,
+      storeKey,
+      doc: computed(() => docs.value?.get(id)),
+      subscribe,
+      unsubscribe,
+      subscribed,
+      row: () => {
+        return computed(() => {
+          return (this.store[storeKey]?.state.rows?.[0] ?? null) as T
+        })
+      }
+    }
   }
 
-  async unsubscribe({ entity, id, filters }: { entity: string; id?: number; filters?: any }, cb: any) {
-    if (this.opts.debug) {
-      console.log('subscribeEntity', { entity, id })
+  public update<K extends string>(
+    entity: K,
+    entity_id: number,
+    dto: K extends Extract<keyof M, string> ? Partial<M[K]> : object,
+    opts?: CuboCrdtClientDocOrigin
+  ) {
+    const cardRow = this.store[`${entity}:${entity_id}`]?.state.rows?.[0]
+    const listRow = this.store[entity]?.state?.rows.find((r: any) => r.id === entity_id)
+    const cardDoc = this.store[`${entity}:${entity_id}`]?.docs.get(entity_id)
+    const listDoc = this.store[entity]?.docs.get(entity_id)
+
+    // обновляем документы
+    for (const doc of [cardDoc, listDoc]) {
+      if (doc) {
+        const map = doc.getMap()
+
+        const row = (cardRow || listRow) as any
+        const toUpdate = Object.fromEntries(Object.entries(dto).filter(([key, value]) => row[key] !== value))
+
+        if (Object.keys(toUpdate).length) {
+          const origin: CuboCrdtClientDocOrigin = {
+            store: opts?.store ?? true,
+            expose: opts?.expose ?? 'other',
+            keys: opts?.keys ?? Object.keys(toUpdate),
+            react: true // отправляем на бэк
+          }
+
+          doc.transact(() => {
+            Object.entries(toUpdate).forEach(([key, value]) => {
+              map.set(key, value)
+            })
+          }, origin)
+        }
+      }
     }
 
-    const event = `crdt:${entity}`
-    // const event = id ? `crdt:${entity}:${id}` : `crdt:${entity}`
+    // обновляем реактивку
+    for (const row of [cardRow, listRow]) {
+      if (row) {
+        const toUpdate = Object.fromEntries(Object.entries(dto).filter(([key, value]) => row[key as keyof typeof row] !== value))
 
-    this.ee.removeListener(event, cb)
-    this.ws.request({ method: 'crdt:unsubscribe', data: { event, filters } })
+        if (Object.keys(toUpdate).length) {
+          Object.entries(toUpdate).forEach(([key, value]) => {
+            row[key as keyof typeof row] = value
+          })
+        }
+      }
+    }
   }
 
-  async openDocument(entity: string, id: number, doc: Doc): Promise<void> {
-    const state: any = await this.ws.request(
-      {
-        method: 'crdt:open',
-        data: { name: `${entity}:${id}` }
-      },
-      { wait: true }
-    )
-
-    this.ee.addListener(`crdt:update:${entity}:${id}`, (ctx) => {
-      applyUpdate(doc, new Uint8Array(ctx.data))
+  private async onDocumentCreate(update: Uint8Array, ctx: CuboCrdtClientSubscribeEvent, opts: CuboCrdtClientDocUpdateOptions) {
+    if (opts?.onBeforeCreate) {
+      const result = await opts.onBeforeCreate(update, ctx, opts)
+      if (!result) {
+        return
+      }
+    }
+
+    const doc = new Doc()
+    applyUpdate(doc, update, { react: false })
+
+    // подписываемся на обновления документа
+    doc.on('update', (update, origin: CuboCrdtClientDocOrigin) => {
+      // react = false, если это апдейт с бэка
+      if (origin?.react !== false) {
+        const data: CuboCrdtServerDocumentIncomingAction = {
+          action: 'update',
+          entity: ctx.entity,
+          entity_id: ctx.entity_id,
+          data: Array.from(update),
+          origin: {
+            ...pick(origin || {}, ['store', 'keys', 'expose']),
+            subscribe_id: opts?.subscribe_id
+          }
+        }
+
+        this.ws.request({
+          method: CUBO_CRDT_EVENT.EVENT,
+          data
+        })
+      }
     })
 
-    this.ws.request({ method: 'crdt:subscribe', data: { crdt: { entity, id } } })
+    // добавляем документ в хранилище документов
+    this.store[opts.storeKey]?.docs.set(ctx.entity_id, doc)
+
+    // добавляем документ в реактивное хранилище
+    const json: any = doc.getMap().toJSON()
+    const index = this.store[opts.storeKey]?.state.rows.findIndex((r: any) => r.id === ctx.entity_id)
+    if (index !== undefined && index >= 0) {
+      if (this.debug) {
+        console.warn('[CRDT] onDocumentCreate - row already exists: "' + ctx.entity_id + '"', { ctx, opts })
+      }
+
+      this.store[opts.storeKey]!.state.rows[index] = json
+    } else {
+      this.store[opts.storeKey]?.state.rows.push(json)
+    }
+
+    if (opts?.onAfterCreate) {
+      await opts.onAfterCreate(doc, update, ctx, opts)
+    }
+  }
+
+  private async onDocumentUpdate(doc: Doc, update: Uint8Array, ctx: CuboCrdtClientSubscribeEvent, opts: CuboCrdtClientDocUpdateOptions) {
+    if (opts?.onBeforeUpdate) {
+      const result = await opts.onBeforeUpdate(doc, update, ctx, opts)
+      if (!result) {
+        return
+      }
+    }
+
+    // обновляем yjs-ный документ
+    applyUpdate(doc, update, { react: false })
+
+    // обновляем документ в реактивном хранилище
+    const json: any = doc.getMap().toJSON()
+    const index = this.store[opts.storeKey]?.state.rows.findIndex((r: any) => r.id === ctx.entity_id)
+    if (index !== undefined && index >= 0) {
+      this.store[opts.storeKey]!.state.rows[index] = json
+    } else {
+      if (this.debug) {
+        console.warn('[CRDT] onDocumentUpdate - row not exists: "' + ctx.entity_id + '"', { ctx, opts })
+      }
+
+      this.store[opts.storeKey]!.state.rows.push(json)
+    }
+
+    if (opts?.onAfterUpdate) {
+      await opts.onAfterUpdate(doc, update, ctx, opts)
+    }
+  }
+
+  private async onDocumentDelete(doc: Doc, ctx: CuboCrdtClientSubscribeEvent, opts: CuboCrdtClientDocUpdateOptions) {
+    if (opts?.onBeforeDelete) {
+      const result = await opts.onBeforeDelete(doc, ctx, opts)
+      if (!result) {
+        return
+      }
+    }
+
+    // console.log('onDocumentDelete', ctx, opts)
+
+    doc.destroy()
+    this.store[opts.storeKey]?.docs.delete(ctx.entity_id)
+
+    const index = this.store[opts.storeKey]?.state.rows.findIndex((r: any) => r.id === ctx.entity_id)
+    if (index !== undefined && index >= 0) {
+      this.store[opts.storeKey]?.state.rows.splice(index, 1)
+    } else {
+      console.log('row not found', index, ctx, opts)
+    }
+
+    if (opts?.onAfterDelete) {
+      await opts.onAfterDelete(doc, ctx, opts)
+    }
+  }
+
+  private onIncomingUpdate(ctx: CuboCrdtClientSubscribeEvent, opts: CuboCrdtClientDocUpdateOptions) {
+    if (this.debug) {
+      console.log('[CRDT] call event listener', ctx, opts)
+    }
+
+    if (!this.store[opts.storeKey]) {
+      console.warn('[CRDT] on incoming update, store key not found: "' + opts.storeKey + '"')
+    }
 
-    applyUpdate(doc, new Uint8Array(state))
+    const doc = this.store[opts.storeKey]?.docs.get(ctx.entity_id)
+    const action: CuboCrdtAction = !doc ? 'create' : ctx.action === 'delete' ? 'delete' : 'update'
+
+    // console.log('action', action)
+
+    switch (action) {
+      case 'create':
+        {
+          const update = new Uint8Array(ctx.data as any)
+          this.onDocumentCreate(update, ctx, opts)
+        }
+        break
+      case 'update':
+        if (doc) {
+          const update = new Uint8Array(ctx.data as any)
+          this.onDocumentUpdate(doc, update, ctx, opts)
+        }
+        break
+      case 'delete':
+        if (doc) {
+          this.onDocumentDelete(doc, ctx, opts)
+        }
+        break
+    }
   }
 
-  async closeDocument(entity: string, id: number) {
-    await this.ws.request(
-      {
-        method: 'crdt:close',
-        data: { name: `${entity}:${id}` }
-      },
-      { wait: true }
-    )
+  private get ws() {
+    return this.opts.ws
+  }
 
-    this.ee.removeAllListeners(`crdt:document:${entity}:${id}:update`)
+  private get debug() {
+    return this.opts.debug
   }
 }