feat: local collab

Author: nusr

.gitignore

@@ -24,3 +24,4 @@ package-lock.json
 /blob-report/
 /playwright/.cache/
 build
+.env

package.json

@@ -29,7 +29,7 @@
   "homepage": "https://nusr.github.io/excel",
   "devDependencies": {
     "@playwright/test": "1.48.2",
-    "@rsbuild/core": "1.1.0",
+    "@rsbuild/core": "1.1.2",
     "@rsbuild/plugin-react": "1.0.7",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
@@ -50,14 +50,15 @@
     "typescript": "5.6.3"
   },
   "dependencies": {
-    "@sentry/react": "8.37.1",
+    "@sentry/react": "8.38.0",
+    "@supabase/supabase-js": "2.46.1",
     "chart.js": "4.4.6",
     "comlink": "4.4.2",
     "jszip": "3.10.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "ssf": "https://cdn.sheetjs.com/ssf-0.11.3/ssf-0.11.3.tgz",
-    "yjs": "^13.6.20"
+    "yjs": "13.6.20"
   },
   "engines": {
     "pnpm": "9.12.3"

rsbuild.config.ts

@@ -17,10 +17,9 @@ export default defineConfig({
     },
   },
   output: {
-    assetPrefix: '/excel/',
+    assetPrefix: process.env.CI ? '/excel/' : '',
     distPath: {
       js: '',
-      css: '',
     },
   },
   html: {

src/collaboration/index.ts

@@ -0,0 +1,18 @@
+import type { Doc } from 'yjs';
+import { initProvider } from './provider';
+import * as Y from 'yjs';
+
+export async function initCollaboration(doc: Doc) {
+  const provider = initProvider(doc);
+  doc.on('update', (update: Uint8Array) => {
+    provider.addHistory(doc.guid, update);
+  });
+  const result = await provider.retrieveHistory(doc.guid);
+  if (result.length > 0) {
+    const newDoc = Y.mergeUpdates(
+      result.map((v) => new Uint8Array(Buffer.from(v.update))),
+    );
+    Y.applyUpdate(doc, newDoc);
+  }
+  return provider;
+}

src/collaboration/provider/data.type.ts

@@ -0,0 +1,39 @@
+import type { HistoryItem } from '@/types';
+
+export type DocumentItem = {
+  id: string;
+  name: string;
+  create_time: string;
+};
+
+export interface Database {
+  public: {
+    Tables: {
+      document: {
+        Row: DocumentItem;
+        Insert: {
+          // the data to be passed to .insert()
+          id?: never;
+          name: string;
+          create_time?: never;
+        };
+        Update: {
+          // the data to be passed to .update()
+          id?: never;
+          name?: string;
+          create_time?: never;
+        };
+      };
+      history: {
+        Row: HistoryItem;
+        Insert: {
+          // the data to be passed to .insert()
+          id?: never;
+          doc_id: string;
+          update: string;
+          create_time?: never;
+        };
+      };
+    };
+  };
+}

src/collaboration/provider/index.ts

@@ -0,0 +1,16 @@
+import { SupabaseClient } from '@supabase/supabase-js';
+import type { Database } from './data.type';
+import { ServerProvider } from './server';
+import { LocalProvider } from './local';
+import { CollaborationProvider } from '@/types';
+import { type Doc } from 'yjs';
+
+export function initProvider(doc: Doc): CollaborationProvider {
+  const url = process.env.PUBLIC_SUPABASE_URL;
+  const key = process.env.PUBLIC_SUPABASE_KEY;
+  if (url && key) {
+    const supabase = new SupabaseClient<Database>(url, key);
+    return new ServerProvider(supabase, doc);
+  }
+  return new LocalProvider(doc);
+}

src/collaboration/provider/local.ts

@@ -0,0 +1,26 @@
+import { CollaborationProvider, HistoryItem } from '@/types';
+import * as Y from 'yjs';
+// import { eventEmitter } from '@/util';
+
+export class LocalProvider implements CollaborationProvider {
+  private readonly broadcastChannel: BroadcastChannel;
+  constructor(doc: Y.Doc) {
+    const docId = doc.guid;
+    this.broadcastChannel = new BroadcastChannel(docId);
+    this.broadcastChannel.onmessage = (
+      event: MessageEvent<{ docId: string; update: Uint8Array }>,
+    ) => {
+      const { update } = event.data;
+      console.log(docId, event);
+      Y.applyUpdate(doc, update);
+      // eventEmitter.emit('modelChange', { changeSet: new Set(['rangeMap']) });
+    };
+  }
+  addHistory = async (docId: string, update: Uint8Array) => {
+    this.broadcastChannel.postMessage({ docId, update });
+  };
+  retrieveHistory = async (docId: string): Promise<HistoryItem[]> => {
+    console.log(docId);
+    return [];
+  };
+}

src/collaboration/provider/server.ts

@@ -0,0 +1,36 @@
+import { SupabaseClient } from '@supabase/supabase-js';
+import type { Database } from './data.type';
+import { CollaborationProvider, HistoryItem } from '@/types';
+import * as Y from 'yjs';
+
+export class ServerProvider implements CollaborationProvider {
+  private readonly supabase: SupabaseClient<Database>;
+  constructor(supabase: SupabaseClient<Database>, doc: Y.Doc) {
+    this.supabase = supabase;
+
+    supabase
+      .channel('custom-insert-channel')
+      .on(
+        'postgres_changes',
+        { event: 'INSERT', schema: 'public', table: 'history' },
+        (payload) => {
+          // TODO
+          console.log('Change received!', payload);
+        },
+      )
+      .subscribe();
+  }
+
+  addHistory = async (docId: string, update: Uint8Array) => {
+    const temp = Buffer.from(update.buffer).toString();
+    this.supabase.from('history').insert([{ doc_id: docId, update: temp }]);
+  };
+  retrieveHistory = async (docId: string): Promise<HistoryItem[]> => {
+    const result = await this.supabase
+      .from('history')
+      .select('*')
+      .eq('doc_id', docId);
+    const list = result.data || [];
+    return list;
+  };
+}

src/containers/Excel/__tests__/importXLSX.test.ts

@@ -1,5 +1,5 @@
 import { convertXMLToJSON, importXLSX } from '../importXLSX';
-import { WorkBookJSON, EVerticalAlign, EUnderLine } from '@/types';
+import { ModelJSON, EVerticalAlign, EUnderLine } from '@/types';
 import fs from 'fs/promises';
 import path from 'path';
 import { initController } from '@/controller';
@@ -29,7 +29,7 @@ describe('importXLSX.test.ts', () => {
       const model = await importXLSX(fileData);
       const controller = initController();
       controller.fromJSON(model);
-      const result: WorkBookJSON = {
+      const result: ModelJSON = {
         autoFilter: {},
         rangeMap: {
           '2': { row: 0, col: 2, rowCount: 1, colCount: 1, sheetId: '2' },

src/containers/Excel/importXLSX.ts

@@ -1,5 +1,5 @@
 import {
-  WorkBookJSON,
+  ModelJSON,
   WorksheetType,
   ModelCellType,
   StyleType,
@@ -454,7 +454,7 @@ function getCellStyle(
 export function convertXMLDataToModel(
   xmlData: ObjectItem,
   imageSizeMap: Record<string, IWindowSize>,
-): WorkBookJSON {
+): ModelJSON {
   const workbook = xmlData[WORKBOOK_PATH];
 
   const sharedStrings: SharedStringItem[] = getArray(
@@ -468,7 +468,7 @@ export function convertXMLDataToModel(
     {},
   );
 
-  const result: WorkBookJSON = {
+  const result: ModelJSON = {
     workbook: {},
     mergeCells: {},
     customHeight: {},