@tuturuuu/ui 0.37.2 → 0.39.0

package/src/hooks/notification-subscription.ts

@@ -1,7 +1,7 @@
 import { type QueryClient, useQueryClient } from '@tanstack/react-query';
 import { useEffect } from 'react';
 
-export const NOTIFICATION_REFRESH_INTERVAL_MS = 30_000;
+export const NOTIFICATION_REFRESH_INTERVAL_MS = 120_000;
 
 interface NotificationSubscriptionEntry {
   queryClients: Map<QueryClient, number>;
@@ -12,7 +12,8 @@ interface NotificationSubscriptionEntry {
 const registry = new Map<string, NotificationSubscriptionEntry>();
 
 function invalidateVisibleNotifications(entry: NotificationSubscriptionEntry) {
-  if (document.visibilityState === 'hidden') return;
+  if (document.visibilityState === 'hidden' || navigator.onLine === false)
+    return;
   for (const queryClient of entry.queryClients.keys()) {
     // Only active queries refetch; closed inboxes remain lazy.
     void queryClient.invalidateQueries({ queryKey: ['notifications'] });
@@ -22,6 +23,7 @@ function invalidateVisibleNotifications(entry: NotificationSubscriptionEntry) {
 function stopEntry(entry: NotificationSubscriptionEntry) {
   clearInterval(entry.interval);
   document.removeEventListener('visibilitychange', entry.onVisibilityChange);
+  window.removeEventListener('online', entry.onVisibilityChange);
 }
 
 /**
@@ -50,6 +52,7 @@ export function useNotificationSubscription(
       };
       registry.set(userId, entry);
       document.addEventListener('visibilitychange', refresh);
+      window.addEventListener('online', refresh);
     }
     entry.queryClients.set(
       queryClient,

package/src/hooks/supabase-provider.ts

@@ -1,9 +1,13 @@
+import {
+  createRealtimeClient,
+  type RealtimeChannel,
+} from '@tuturuuu/internal-api/realtime';
 import type { SupabaseClient } from '@tuturuuu/supabase/next/client';
-import type { RealtimeChannel } from '@tuturuuu/supabase/next/realtime';
 import debug from 'debug';
 import { EventEmitter } from 'eventemitter3';
 import * as awarenessProtocol from 'y-protocols/awareness';
 import * as Y from 'yjs';
+import { DocumentHydration } from './collaboration-document-hydration';
 import { isPageVisible } from './use-page-visibility';
 
 export const SUPABASE_PROVIDER_SYNC_ORIGIN = Symbol.for(
@@ -22,12 +26,18 @@ export interface SupabaseProviderConfig {
   broadcastDebounceMs?: number; // Debounce time for broadcasting updates (0 = immediate, default: 0)
   loadState?: () => Promise<number[] | null>;
   saveState?: (state: number[]) => Promise<boolean | undefined>;
+  ownsDocument?: boolean;
 }
 
 export default class SupabaseProvider extends EventEmitter {
   public awareness: awarenessProtocol.Awareness;
   public connected = false;
+  public hydrated = false;
+  private connectionGeneration = 0;
+  private hydration: DocumentHydration;
   private channel: RealtimeChannel | null = null;
+  private realtime = createRealtimeClient();
+  private pendingAwarenessClients = new Set<number>();
 
   private _synced: boolean = false;
   private resyncInterval: NodeJS.Timeout | undefined;
@@ -71,15 +81,11 @@ export default class SupabaseProvider extends EventEmitter {
       return;
     }
 
-    // Only broadcast and save if connected and not destroyed
     if (!this.connected || this.destroyed) {
-      this.logger('skipping broadcast - not connected or destroyed');
       return;
     }
 
-    // Validate update size (avoid broadcasting empty or corrupted updates)
     if (!update || update.length === 0) {
-      this.logger('skipping broadcast - empty update');
       return;
     }
 
@@ -91,8 +97,6 @@ export default class SupabaseProvider extends EventEmitter {
     );
 
     if (this.broadcastDebounceMs > 0) {
-      // Debounced broadcast for free tier — merge rapid incremental edits so
-      // peers do not miss insertion structs that later updates depend on.
       this.pendingBroadcastUpdate = this.pendingBroadcastUpdate
         ? Y.mergeUpdates([this.pendingBroadcastUpdate, update])
         : update;
@@ -110,7 +114,6 @@ export default class SupabaseProvider extends EventEmitter {
         }
       }, this.broadcastDebounceMs);
     } else {
-      // Immediate broadcast for paid tier
       this.emit('message', update);
     }
 
@@ -118,25 +121,17 @@ export default class SupabaseProvider extends EventEmitter {
   }
 
   debouncedSave() {
-    // Clear any pending save
     if (this.saveTimeout) {
       clearTimeout(this.saveTimeout);
     }
 
-    // Schedule a new save after the debounce period
     this.saveTimeout = setTimeout(() => {
       this.saveTimeout = undefined;
-      this.logger('debounce period elapsed, saving to database');
       void this.save();
     }, this.saveDebounceMs);
   }
 
-  /**
-   * Immediately save any pending changes without waiting for debounce period.
-   * Also flushes any pending broadcast.
-   */
   async flushSave() {
-    // Flush pending broadcast first
     if (this.broadcastDebounceTimeout) {
       clearTimeout(this.broadcastDebounceTimeout);
       this.broadcastDebounceTimeout = undefined;
@@ -151,29 +146,34 @@ export default class SupabaseProvider extends EventEmitter {
     if (this.saveTimeout) {
       clearTimeout(this.saveTimeout);
       this.saveTimeout = undefined;
-      this.logger('flushing pending save immediately');
       await this.save();
     }
   }
 
-  onAwarenessUpdate({ added, updated, removed }: any, _origin: any) {
-    const changedClients = added.concat(updated).concat(removed);
-    const awarenessUpdate = awarenessProtocol.encodeAwarenessUpdate(
-      this.awareness,
-      changedClients
-    );
-
-    // Debounce awareness broadcasts to coalesce rapid cursor/selection changes
-    if (this.awarenessDebounceTimeout) {
-      clearTimeout(this.awarenessDebounceTimeout);
-    }
+  onAwarenessUpdate(
+    {
+      added,
+      updated,
+      removed,
+    }: { added: number[]; updated: number[]; removed: number[] },
+    origin: unknown
+  ) {
+    if (origin === this || this.destroyed) return;
+    for (const id of [...added, ...updated, ...removed])
+      this.pendingAwarenessClients.add(id);
+    if (this.awarenessDebounceTimeout) return;
     this.awarenessDebounceTimeout = setTimeout(() => {
-      this.emit('awareness', awarenessUpdate);
+      this.awarenessDebounceTimeout = undefined;
+      const clients = [...this.pendingAwarenessClients];
+      this.pendingAwarenessClients.clear();
+      this.emit(
+        'awareness',
+        awarenessProtocol.encodeAwarenessUpdate(this.awareness, clients)
+      );
     }, 150);
   }
 
   removeSelfFromAwarenessOnUnload() {
-    // Flush any pending saves before unload
     this.flushSave();
     awarenessProtocol.removeAwarenessStates(
       this.awareness,
@@ -184,7 +184,6 @@ export default class SupabaseProvider extends EventEmitter {
 
   async save() {
     try {
-      // Don't save if not connected or destroyed
       if (!this.connected || this.destroyed) {
         this.logger('skipping save - not connected or destroyed');
         return false;
@@ -192,13 +191,11 @@ export default class SupabaseProvider extends EventEmitter {
 
       const content = Array.from(Y.encodeStateAsUpdate(this.doc));
 
-      // Skip save if content is empty or too small (likely invalid)
       if (!content || content.length === 0) {
         this.logger('skipping save - empty content');
         return false;
       }
 
-      // Skip save if content is suspiciously small (might be corrupted)
       if (content.length < 10) {
         this.logger('skipping save - content too small, possibly corrupted');
         return false;
@@ -229,7 +226,6 @@ export default class SupabaseProvider extends EventEmitter {
         if (error) {
           this.logger(`save failed with status ${status}:`, error);
 
-          // Handle 422 errors - task was deleted, validation failed, or RLS rejected
           if (status === 422) {
             console.warn(
               `Failed to save Yjs state (422 - Unprocessable Entity):`,
@@ -241,15 +237,12 @@ export default class SupabaseProvider extends EventEmitter {
               }
             );
 
-            // Mark as not synced so UI shows warning
             this.synced = false;
 
-            // Stop trying to save this document
             this.logger('stopping future saves due to 422 error');
             return false;
           }
 
-          // Handle 404 errors - task doesn't exist
           if (status === 404) {
             console.warn(`Task ${this.config.id} not found, stopping saves`);
             this.synced = false;
@@ -276,43 +269,22 @@ export default class SupabaseProvider extends EventEmitter {
   }
 
   private async onConnect() {
-    this.logger('connected');
-
-    // Reset reconnect attempts on successful connection
     this.reconnectAttempts = 0;
     if (this.reconnectTimeout) {
       clearTimeout(this.reconnectTimeout);
       this.reconnectTimeout = undefined;
     }
 
-    const persistedState = this.config.loadState
-      ? await this.config.loadState()
-      : await (async () => {
-          const { data, status } = await this.supabase
-            .from(this.config.tableName as any)
-            .select<string, { [key: string]: number[] }>(
-              `${this.config.columnName}`
-            )
-            .eq(this.config.idName || 'id', this.config.id)
-            .single();
-
-          this.logger('retrieved data from supabase', status);
-          return data?.[this.config.columnName] ?? null;
-        })();
-
-    if (persistedState && persistedState.length > 0) {
-      this.logger('applying update to yjs');
-      try {
-        this.applyUpdate(Uint8Array.from(persistedState), this);
-      } catch (error) {
-        this.logger(error);
-      }
-    }
+    const generation = this.connectionGeneration;
+    if (
+      !(await this.hydration.load()) ||
+      this.destroyed ||
+      generation !== this.connectionGeneration
+    )
+      return;
 
-    this.logger('setting connected flag to true');
     this.isOnline(true);
 
-    // Mark as synced after loading initial data
     this.synced = true;
 
     this.emit('status', [{ status: 'connected' }]);
@@ -331,9 +303,6 @@ export default class SupabaseProvider extends EventEmitter {
       this.version++;
       Y.applyUpdate(this.doc, update, origin);
     } catch (error) {
-      // Handle DOM reconciliation errors during Yjs sync
-      // This happens when ProseMirror/Tiptap tries to manipulate DOM nodes
-      // that React has already cleaned up during reconnection scenarios
       if (
         error instanceof DOMException &&
         error.name === 'NotFoundError' &&
@@ -343,33 +312,31 @@ export default class SupabaseProvider extends EventEmitter {
           'DOM reconciliation error during Yjs update - this can happen after AFK reconnection'
         );
         console.warn(
-          '[SupabaseProvider] DOM reconciliation error during Yjs sync. ' +
+          '[Cloudflare collaboration] DOM reconciliation error during Yjs sync. ' +
             'This is usually harmless and occurs when the editor reconnects after being idle.'
         );
-        // Emit event so the component can handle recovery if needed
         this.emit('dom-error', error);
         return;
       }
-      // Re-throw other errors
       throw error;
     }
   }
 
   private disconnect() {
     if (this.channel) {
-      this.supabase.removeChannel(this.channel);
+      this.realtime.removeChannel(this.channel);
       this.channel = null;
     }
   }
 
   private connect() {
-    this.channel = this.supabase.channel(this.config.channel);
+    this.channel = this.realtime.channel(this.config.channel);
     if (this.channel) {
       this.channel
-        .on('broadcast', { event: 'message' }, ({ payload }) => {
+        .on<number[]>('broadcast', { event: 'message' }, ({ payload }) => {
           this.onMessage(Uint8Array.from(payload), this);
         })
-        .on('broadcast', { event: 'awareness' }, ({ payload }) => {
+        .on<number[]>('broadcast', { event: 'awareness' }, ({ payload }) => {
           this.onAwareness(Uint8Array.from(payload));
         })
         .subscribe((status, err) => {
@@ -420,7 +387,6 @@ export default class SupabaseProvider extends EventEmitter {
     this.config = config || {};
     this.id = doc.clientID;
 
-    // Initialize debounce times
     (this as any).saveDebounceMs = this.config.saveDebounceMs ?? 1000;
     (this as any).broadcastDebounceMs = this.config.broadcastDebounceMs ?? 0;
 
@@ -429,12 +395,35 @@ export default class SupabaseProvider extends EventEmitter {
     this.on('disconnect', this.onDisconnect);
 
     this.logger = debug(`y-${doc.clientID}`);
-    // turn on debug logging to the console
     this.logger.enabled = true;
 
-    this.logger('constructor initializing');
-    this.logger('connecting to Supabase Realtime', doc.guid);
-    this.logger(`save debounce set to ${this.saveDebounceMs}ms`);
+    this.hydration = new DocumentHydration({
+      load:
+        this.config.loadState ??
+        (async () => {
+          const { data, error } = await this.supabase
+            .from(this.config.tableName as any)
+            .select<string, { [key: string]: number[] }>(this.config.columnName)
+            .eq(this.config.idName || 'id', this.config.id)
+            .single();
+          if (error) throw error;
+          return data?.[this.config.columnName] ?? null;
+        }),
+      apply: (state) => Y.applyUpdate(this.doc, state, this),
+      isActive: () => !this.destroyed,
+      onLoaded: () => {
+        this.hydrated = true;
+        this.emit('hydrated');
+      },
+      onError: () =>
+        this.emit('error', {
+          message: 'Unable to load collaboration document',
+          channel: this.config.channel,
+          status: 'DOCUMENT_ERROR',
+        }),
+    });
+    // Durable reads must not depend on a successful peer transport connection.
+    void this.hydration.load();
 
     if (
       this.config.resyncInterval ||
@@ -448,21 +437,16 @@ export default class SupabaseProvider extends EventEmitter {
         `setting resync interval to every ${interval / 1000} seconds`
       );
       this.resyncInterval = setInterval(() => {
-        // Only resync if connected and not destroyed
         if (!this.connected || this.destroyed) {
           this.logger('skipping resync - not connected or destroyed');
           return;
         }
 
-        // Skip resync when page is hidden (no one is watching)
         if (!isPageVisible()) {
-          this.logger('skipping resync - page not visible');
           return;
         }
 
-        // Skip resync if no local changes since last resync
         if (!this._dirty) {
-          this.logger('skipping resync - no local changes');
           return;
         }
 
@@ -471,7 +455,6 @@ export default class SupabaseProvider extends EventEmitter {
         this.logger('resyncing (resync interval elapsed)');
         const update = Y.encodeStateAsUpdate(this.doc);
 
-        // Validate update before broadcasting
         if (!update || update.length === 0) {
           this.logger('skipping resync - empty update');
           return;
@@ -497,9 +480,7 @@ export default class SupabaseProvider extends EventEmitter {
       process.on('exit', this.processExitHandler);
     }
     this.on('awareness', (update) => {
-      // Only broadcast if connected and channel exists
       if (this.connected && this.channel && !this.destroyed) {
-        // Validate update before broadcasting
         if (update && update.length > 0) {
           this.channel.send({
             type: 'broadcast',
@@ -510,9 +491,7 @@ export default class SupabaseProvider extends EventEmitter {
       }
     });
     this.on('message', (update) => {
-      // Only broadcast if connected and channel exists
       if (this.connected && this.channel && !this.destroyed) {
-        // Validate update before broadcasting
         if (update && update.length > 0) {
           this.channel.send({
             type: 'broadcast',
@@ -525,7 +504,6 @@ export default class SupabaseProvider extends EventEmitter {
 
     this.connect();
 
-    // Reconnect when user returns from AFK (hidden → visible)
     if (typeof document !== 'undefined') {
       this._handleVisibilityChange = () => {
         if (this.destroyed) return;
@@ -535,7 +513,6 @@ export default class SupabaseProvider extends EventEmitter {
           this.resetAndReconnect();
         }
 
-        // Pause reconnect timer when page goes hidden to conserve attempts
         if (document.visibilityState === 'hidden' && this.reconnectTimeout) {
           this.logger('page hidden during reconnect backoff — pausing timer');
           clearTimeout(this.reconnectTimeout);
@@ -550,7 +527,6 @@ export default class SupabaseProvider extends EventEmitter {
 
     this.awareness.on('update', this.boundAwarenessUpdate);
 
-    // Listen to document updates and broadcast them to peers
     this.doc.on('update', this.boundDocumentUpdate);
   }
 
@@ -569,7 +545,6 @@ export default class SupabaseProvider extends EventEmitter {
 
   public onConnecting() {
     if (!this.isOnline()) {
-      this.logger('connecting');
       this.emit('status', [{ status: 'connecting' }]);
     }
   }
@@ -578,12 +553,10 @@ export default class SupabaseProvider extends EventEmitter {
     if (this.destroyed || this.reconnectTimeout) return;
 
     if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-      this.logger('max reconnect attempts reached');
       this.emit('reconnect-failed');
       return;
     }
 
-    // Exponential backoff with jitter
     const delay = Math.min(
       this.reconnectDelay * 2 ** this.reconnectAttempts,
       this.maxReconnectDelay
@@ -600,23 +573,15 @@ export default class SupabaseProvider extends EventEmitter {
       this.reconnectAttempts++;
       this.logger(`reconnect attempt ${this.reconnectAttempts}`);
 
-      // Disconnect old channel if it exists
       this.disconnect();
 
-      // Try to reconnect
       this.connect();
     }, actualDelay);
   }
 
-  /**
-   * Reset backoff state and force a fresh connection cycle.
-   * Used when the user returns from AFK (visibilitychange) or when
-   * reconnect-failed fires while the page is still active.
-   */
   public resetAndReconnect() {
     if (this.destroyed || this.connected) return;
 
-    this.logger('resetAndReconnect: resetting backoff and reconnecting');
     this.reconnectAttempts = 0;
 
     if (this.reconnectTimeout) {
@@ -629,17 +594,14 @@ export default class SupabaseProvider extends EventEmitter {
   }
 
   public onDisconnect() {
-    this.logger('disconnected');
+    this.connectionGeneration++;
 
     this.synced = false;
     this.isOnline(false);
-    this.logger('set connected flag to false');
     if (this.isOnline()) {
       this.emit('status', [{ status: 'disconnected' }]);
     }
 
-    // update awareness (keep all users except local)
-    // FIXME? compare to broadcast channel behavior
     const states = Array.from(this.awareness.getStates().keys()).filter(
       (client) => client !== this.doc.clientID
     );
@@ -670,11 +632,12 @@ export default class SupabaseProvider extends EventEmitter {
     if (!message) {
       this.logger(`Permission denied to channel`);
     }
-    this.logger('processed message (type = MessageAuth)');
   }
 
   public destroy() {
+    if (this.destroyed) return;
     this.logger('destroying');
+    const pendingSave = this.flushSave();
     this.destroyed = true;
 
     // Clear reconnect timeout
@@ -696,9 +659,6 @@ export default class SupabaseProvider extends EventEmitter {
     }
     this.pendingBroadcastUpdate = undefined;
 
-    // Save any pending changes before destroying
-    this.flushSave();
-
     // Remove visibility change listener
     if (this._handleVisibilityChange && typeof document !== 'undefined') {
       document.removeEventListener(
@@ -721,5 +681,9 @@ export default class SupabaseProvider extends EventEmitter {
     this.doc.off('update', this.boundDocumentUpdate);
 
     if (this.channel) this.disconnect();
+    if (this.config.ownsDocument) {
+      this.awareness.destroy();
+      void pendingSave.finally(() => this.doc.destroy());
+    }
   }
 }