chore: merge blocksuite source code (#9213)

blocksuite/playground/apps/_common/sync/blob/mock-server.ts

@@ -0,0 +1,54 @@
+import type { BlobSource } from '@blocksuite/sync';
+
+/**
+ * @internal just for test
+ *
+ * API: /api/collection/:id/blob/:key
+ * GET: get blob
+ * PUT: set blob
+ * DELETE: delete blob
+ */
+export class MockServerBlobSource implements BlobSource {
+  private readonly _cache = new Map<string, Blob>();
+
+  readonly = false;
+
+  constructor(readonly name: string) {}
+
+  async delete(key: string) {
+    this._cache.delete(key);
+    await fetch(`/api/collection/${this.name}/blob/${key}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async get(key: string) {
+    if (this._cache.has(key)) {
+      return this._cache.get(key) as Blob;
+    } else {
+      const blob = await fetch(`/api/collection/${this.name}/blob/${key}`, {
+        method: 'GET',
+      }).then(response => {
+        if (!response.ok) {
+          throw new Error(`Failed to fetch blob ${key}`);
+        }
+        return response.blob();
+      });
+      this._cache.set(key, blob);
+      return blob;
+    }
+  }
+
+  async list() {
+    return Array.from(this._cache.keys());
+  }
+
+  async set(key: string, value: Blob) {
+    this._cache.set(key, value);
+    await fetch(`/api/collection/${this.name}/blob/${key}`, {
+      method: 'PUT',
+      body: await value.arrayBuffer(),
+    });
+    return key;
+  }
+}

blocksuite/playground/apps/_common/sync/websocket/awareness.ts

@@ -0,0 +1,85 @@
+import { assertExists } from '@blocksuite/global/utils';
+import type { AwarenessSource } from '@blocksuite/sync';
+import type { Awareness } from 'y-protocols/awareness';
+import {
+  applyAwarenessUpdate,
+  encodeAwarenessUpdate,
+} from 'y-protocols/awareness';
+
+import type { WebSocketMessage } from './types';
+
+type AwarenessChanges = Record<'added' | 'updated' | 'removed', number[]>;
+
+export class WebSocketAwarenessSource implements AwarenessSource {
+  private _onAwareness = (changes: AwarenessChanges, origin: unknown) => {
+    if (origin === 'remote') return;
+
+    const changedClients = Object.values(changes).reduce((res, cur) =>
+      res.concat(cur)
+    );
+
+    assertExists(this.awareness);
+    const update = encodeAwarenessUpdate(this.awareness, changedClients);
+    this.ws.send(
+      JSON.stringify({
+        channel: 'awareness',
+        payload: {
+          type: 'update',
+          update: Array.from(update),
+        },
+      } satisfies WebSocketMessage)
+    );
+  };
+
+  private _onWebSocket = (event: MessageEvent<string>) => {
+    const data = JSON.parse(event.data) as WebSocketMessage;
+
+    if (data.channel !== 'awareness') return;
+    const { type } = data.payload;
+
+    if (type === 'update') {
+      const update = data.payload.update;
+      assertExists(this.awareness);
+      applyAwarenessUpdate(this.awareness, new Uint8Array(update), 'remote');
+    }
+
+    if (type === 'connect') {
+      assertExists(this.awareness);
+      this.ws.send(
+        JSON.stringify({
+          channel: 'awareness',
+          payload: {
+            type: 'update',
+            update: Array.from(
+              encodeAwarenessUpdate(this.awareness, [this.awareness.clientID])
+            ),
+          },
+        } satisfies WebSocketMessage)
+      );
+    }
+  };
+
+  awareness: Awareness | null = null;
+
+  constructor(readonly ws: WebSocket) {}
+
+  connect(awareness: Awareness): void {
+    this.awareness = awareness;
+    awareness.on('update', this._onAwareness);
+
+    this.ws.addEventListener('message', this._onWebSocket);
+    this.ws.send(
+      JSON.stringify({
+        channel: 'awareness',
+        payload: {
+          type: 'connect',
+        },
+      } satisfies WebSocketMessage)
+    );
+  }
+
+  disconnect(): void {
+    this.awareness?.off('update', this._onAwareness);
+    this.ws.close();
+  }
+}

blocksuite/playground/apps/_common/sync/websocket/doc.ts

@@ -0,0 +1,103 @@
+import { assertExists } from '@blocksuite/global/utils';
+import type { DocSource } from '@blocksuite/sync';
+import { diffUpdate, encodeStateVectorFromUpdate, mergeUpdates } from 'yjs';
+
+import type { WebSocketMessage } from './types';
+
+export class WebSocketDocSource implements DocSource {
+  private _onMessage = (event: MessageEvent<string>) => {
+    const data = JSON.parse(event.data) as WebSocketMessage;
+
+    if (data.channel !== 'doc') return;
+
+    if (data.payload.type === 'init') {
+      for (const [docId, data] of this.docMap) {
+        this.ws.send(
+          JSON.stringify({
+            channel: 'doc',
+            payload: {
+              type: 'update',
+              docId,
+              updates: Array.from(data),
+            },
+          } satisfies WebSocketMessage)
+        );
+      }
+      return;
+    }
+
+    const { docId, updates } = data.payload;
+    const update = this.docMap.get(docId);
+    if (update) {
+      this.docMap.set(docId, mergeUpdates([update, new Uint8Array(updates)]));
+    } else {
+      this.docMap.set(docId, new Uint8Array(updates));
+    }
+  };
+
+  docMap = new Map<string, Uint8Array>();
+
+  name = 'websocket';
+
+  constructor(readonly ws: WebSocket) {
+    this.ws.addEventListener('message', this._onMessage);
+
+    this.ws.send(
+      JSON.stringify({
+        channel: 'doc',
+        payload: {
+          type: 'init',
+        },
+      } satisfies WebSocketMessage)
+    );
+  }
+
+  pull(docId: string, state: Uint8Array) {
+    const update = this.docMap.get(docId);
+    if (!update) return null;
+
+    const diff = state.length ? diffUpdate(update, state) : update;
+    return { data: diff, state: encodeStateVectorFromUpdate(update) };
+  }
+
+  push(docId: string, data: Uint8Array) {
+    const update = this.docMap.get(docId);
+    if (update) {
+      this.docMap.set(docId, mergeUpdates([update, data]));
+    } else {
+      this.docMap.set(docId, data);
+    }
+
+    const latest = this.docMap.get(docId);
+    assertExists(latest);
+    this.ws.send(
+      JSON.stringify({
+        channel: 'doc',
+        payload: {
+          type: 'update',
+          docId,
+          updates: Array.from(latest),
+        },
+      } satisfies WebSocketMessage)
+    );
+  }
+
+  subscribe(cb: (docId: string, data: Uint8Array) => void) {
+    const abortController = new AbortController();
+    this.ws.addEventListener(
+      'message',
+      (event: MessageEvent<string>) => {
+        const data = JSON.parse(event.data) as WebSocketMessage;
+
+        if (data.channel !== 'doc' || data.payload.type !== 'update') return;
+
+        const { docId, updates } = data.payload;
+        cb(docId, new Uint8Array(updates));
+      },
+      { signal: abortController.signal }
+    );
+    return () => {
+      abortController.abort();
+    };
+  }
+}

blocksuite/playground/apps/_common/sync/websocket/types.ts

@@ -0,0 +1,19 @@
+export type AwarenessMessage = {
+  channel: 'awareness';
+  payload: { type: 'connect' } | { type: 'update'; update: number[] };
+};
+
+export type DocMessage = {
+  channel: 'doc';
+  payload:
+    | {
+        type: 'init';
+      }
+    | {
+        type: 'update';
+        docId: string;
+        updates: number[];
+      };
+};
+
+export type WebSocketMessage = AwarenessMessage | DocMessage;

blocksuite/playground/apps/_common/sync/websocket/utils.ts

@@ -0,0 +1,8 @@
+const BASE_URL = new URL(import.meta.env.PLAYGROUND_SERVER);
+export async function generateRoomId(): Promise<string> {
+  return fetch(new URL('/room/', BASE_URL), {
+    method: 'post',
+  })
+    .then(res => res.json())
+    .then(({ id }) => id);
+}