Merge pull request #1 from joebobmiles/feat/only-one-provider-of-type

Providers are unique per document

rollup.config.ts

@@ -30,9 +30,10 @@ export default defineConfig({
   ],
   external: [
     'yjs',
-    'y-websocket',
-    'y-webrtc',
     'y-indexeddb',
+    'y-protocols',
+    'y-webrtc',
+    'y-websocket',
     'react'
   ]
 })

src/feature/doc/component.tsx

@@ -1,9 +1,16 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import * as Y from 'yjs'
 
+import { Provider } from './type'
 import { useDoc } from './hook'
 
-export const DocumentContext = React.createContext<Y.Doc | null>(null)
+export const DocumentContext = React.createContext<{
+  doc: Y.Doc | null
+  providers: Set<Provider> | null
+}>({
+  doc: null,
+  providers: null
+})
 
 interface DocumentProviderProps {
   children: React.ReactNode
@@ -25,8 +32,22 @@ export const DocumentProvider = ({
     superDoc.getMap(folderName ?? '').set(documentName ?? doc.guid, doc)
   }
 
+  const providers = React.useRef(new Set<Provider>())
+
+  useEffect(
+    () =>
+      () => providers.current.forEach(
+        (provider) => provider.destroy()),
+    []
+  )
+
   return (
-    <DocumentContext.Provider value={doc}>
+    <DocumentContext.Provider
+      value={{
+        doc,
+        providers: providers.current
+      }}
+    >
       {children}
     </DocumentContext.Provider>
   )

src/feature/doc/hook.ts

@@ -2,15 +2,28 @@ import React from 'react'
 import * as Y from 'yjs'
 
 import { DocumentContext } from './component'
+import { Provider } from './type'
 
 export const useDoc = (): Y.Doc => {
-  const value = React.useContext(DocumentContext)
+  const { doc } = React.useContext(DocumentContext)
 
-  if (value !== null) {
-    return value
+  if (doc !== null) {
+    return doc
   } else {
     throw new Error(
       'Could not retrieve a document. Please wrap in a DocumentProvider.'
     )
   }
 }
+
+export const useProviders = (): Set<Provider> => {
+  const { providers } = React.useContext(DocumentContext)
+
+  if (providers !== null) {
+    return providers
+  } else {
+    throw new Error(
+      'Could not retrieve a set of providers. Please wrap in a DocumentProvider.'
+    )
+  }
+}

src/feature/doc/index.ts

@@ -1,2 +1,2 @@
 export { DocumentProvider } from './component'
-export { useDoc } from './hook'
+export { useDoc, useProviders } from './hook'

src/feature/doc/type.ts

@@ -0,0 +1,8 @@
+import { IndexeddbPersistence } from 'y-indexeddb'
+import { WebrtcProvider } from 'y-webrtc'
+import { WebsocketProvider } from 'y-websocket'
+
+export type Provider =
+  | WebrtcProvider
+  | WebsocketProvider
+  | IndexeddbPersistence

src/feature/provider/hook/useIndexedDb.ts

@@ -1,13 +1,31 @@
 import React from 'react'
 import { IndexeddbPersistence } from 'y-indexeddb'
-import { useDoc } from '../../doc'
+
+import { useDoc, useProviders } from '../../doc'
 
 export const useIndexedDb = (name: string): IndexeddbPersistence => {
   const doc = useDoc()
+  const providers = useProviders()
 
-  return React.useMemo(
+  const existingProvider = React.useMemo(
     () =>
-      new IndexeddbPersistence(name, doc),
-    [name]
+      Array.from(providers.values())
+        .find((provider): provider is IndexeddbPersistence =>
+          provider instanceof IndexeddbPersistence && provider.db?.name === name
+        ),
+    [providers, name]
   )
+
+  if (existingProvider !== undefined) {
+    return existingProvider
+  } else {
+    const provider = React.useMemo(
+      () => new IndexeddbPersistence(name, doc),
+      [doc, name]
+    )
+
+    providers.add(provider)
+
+    return provider
+  }
 }

src/feature/provider/hook/useWebRtc.spec.tsx

@@ -22,4 +22,21 @@ describe('useWebRtc', () => {
 
     expect(result.current).toBeInstanceOf(WebrtcProvider)
   })
+
+  it('Returns the same WebRTC provider under the same document.', () => {
+    expect(() => renderHook(
+      () => useWebRtc('room'),
+      {
+        wrapper: ({ children }) =>
+          (
+            <DocumentProvider>
+              {children}
+              {children}
+            </DocumentProvider>
+          )
+      }
+    )).not.toThrowError(
+      'Error: A Yjs Doc connected to room "room" already exists!'
+    )
+  })
 })

src/feature/provider/hook/useWebRtc.ts

@@ -1,13 +1,31 @@
 import React from 'react'
 import { WebrtcProvider } from 'y-webrtc'
 
-import { useDoc } from '../../doc'
+import { useDoc, useProviders } from '../../doc'
 
 export const useWebRtc = (room: string): WebrtcProvider => {
   const doc = useDoc()
+  const providers = useProviders()
 
-  return React.useMemo(
-    () => new WebrtcProvider(room, doc),
-    [room]
+  const existingProvider = React.useMemo(
+    () =>
+      Array.from(providers.values())
+        .find((provider): provider is WebrtcProvider =>
+          provider instanceof WebrtcProvider && provider.roomName === room
+        ),
+    [providers, room]
   )
+
+  if (existingProvider !== undefined) {
+    return existingProvider
+  } else {
+    const provider = React.useMemo(
+      () => new WebrtcProvider(room, doc),
+      [doc, room]
+    )
+
+    providers.add(provider)
+
+    return provider
+  }
 }

src/feature/provider/hook/useWebSocket.ts

@@ -1,21 +1,36 @@
 import React from 'react'
 import { WebsocketProvider } from 'y-websocket'
 
-import { useDoc } from '../../doc'
+import { useDoc, useProviders } from '../../doc'
 
 export const useWebSocket = (
   url: string,
   room: string
 ): WebsocketProvider => {
   const doc = useDoc()
+  const providers = useProviders()
 
-  return React.useMemo(
+  const existingProvider = React.useMemo(
     () =>
-      new WebsocketProvider(
-        url,
-        room,
-        doc
-      ),
-    [url, room]
+      Array.from(providers.values())
+        .find((provider): provider is WebsocketProvider =>
+          provider instanceof WebsocketProvider &&
+          provider.url === url &&
+          provider.roomname === room
+        ),
+    [providers, url, room]
   )
+
+  if (existingProvider !== undefined) {
+    return existingProvider
+  } else {
+    const provider = React.useMemo(
+      () => new WebsocketProvider(url, room, doc),
+      [doc, url, room]
+    )
+
+    providers.add(provider)
+
+    return provider
+  }
 }