Refactor

Automattic · Jul 19, 2021 · 948bb07 · 948bb07
1 parent aceef27
commit 948bb07
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/src/components/block-editor-contents/use-yjs.js b/src/components/block-editor-contents/use-yjs.js
@@ -37,19 +37,12 @@ function initYDoc( { initialBlocks, onRemoteDataChange, channelId, transport } )
 		},
 	} );
 
-	window.addEventListener( 'storage', ( event ) => {
-		if ( event.storageArea !== localStorage ) return;
-		if ( event.key === 'isoEditorYjsMessage' && event.newValue ) {
-			doc.receiveMessage( JSON.parse( event.newValue ) );
-		}
-	} );
-
 	doc.onRemoteDataChange( ( changes ) => {
 		debug( 'remote change received', changes );
 		onRemoteDataChange( changes.blocks );
 	} );
 
-	return transport.connect( channelId ).then( ( { isFirstInChannel } ) => {
+	return transport.connect( { channelId, onReceiveMessage: doc.receiveMessage } ).then( ( { isFirstInChannel } ) => {
 		debug( `connected (channelId: ${ channelId })` );
 
 		if ( isFirstInChannel ) {

diff --git a/src/index.js b/src/index.js
@@ -105,8 +105,12 @@ import './style.scss';
  * Transport module for real time collaboration
  * @typedef CollaborationTransport
  * @property {(message: object) => void} sendMessage
- * @property {(channelId?: string) => Promise<{isFirstInChannel: boolean}>} connect
+ * @property {(options: CollaborationTransportConnectOpts) => Promise<{isFirstInChannel: boolean}>} connect
  * @property {() => Promise<void>} disconnect
+ *
+ * @typedef CollaborationTransportConnectOpts
+ * @property {string} [channelId]
+ * @property {(message: object) => void} onReceiveMessage
  */
 
 /**

diff --git a/src/stories/collab/mock-transport.js b/src/stories/collab/mock-transport.js
@@ -1,8 +1,21 @@
+const listeners = [];
+
+/** @type {import("../../components/block-editor-contents/use-yjs").CollaborationTransport} */
 const mockTransport = {
 	sendMessage: ( message ) => {
 		window.localStorage.setItem( 'isoEditorYjsMessage', JSON.stringify( message ) );
 	},
-	connect: ( channelId ) => {
+	connect: ( { channelId, onReceiveMessage } ) => {
+		listeners.push( {
+			event: 'storage',
+			listener: window.addEventListener( 'storage', ( event ) => {
+				if ( event.storageArea !== localStorage ) return;
+				if ( event.key === 'isoEditorYjsMessage' && event.newValue ) {
+					onReceiveMessage( JSON.parse( event.newValue ) );
+				}
+			} ),
+		} );
+
 		window.localStorage.setItem(
 			'isoEditorClients',
 			( parseInt( window.localStorage.getItem( 'isoEditorClients' ) || '0' ) + 1 ).toString()
@@ -11,6 +24,8 @@ const mockTransport = {
 		return Promise.resolve( { isFirstInChannel } );
 	},
 	disconnect: () => {
+		listeners.forEach( ( { event, listener } ) => window.removeEventListener( event, listener ) );
+
 		const clientCount = Math.max( 0, parseInt( window.localStorage.getItem( 'isoEditorClients' ) || '0' ) - 1 );
 		return Promise.resolve( window.localStorage.setItem( 'isoEditorClients', clientCount.toString() ) );
 	},