@tldraw/sync 5.5.0-next.f9308d324e1c → 5.5.0

package/src/useSync.ts

@@ -49,6 +49,25 @@ const MULTIPLAYER_EVENT_NAME = 'multiplayer.client'
 
 const defaultCustomMessageHandler: TLCustomMessageHandler = () => {}
 
+// Keyed by `reason`, which is an arbitrary string off the server's close event, so a Map rather
+// than an object literal: a reason of 'constructor' or '__proto__' would find a prototype member.
+const SYNC_ERROR_EVENT_NAMES = new Map<string, string>([
+	[TLSyncErrorCloseEventReason.NOT_FOUND, 'room-not-found'],
+	[TLSyncErrorCloseEventReason.FORBIDDEN, 'forbidden'],
+	[TLSyncErrorCloseEventReason.NOT_AUTHENTICATED, 'not-authenticated'],
+	[TLSyncErrorCloseEventReason.RATE_LIMITED, 'rate-limited'],
+])
+
+type SyncSocket = TLPersistentClientSocket<
+	TLSocketClientSentEvent<TLRecord>,
+	TLSocketServerSentEvent<TLRecord>
+>
+
+// The socket reports 'error' but the collaboration status only knows 'offline'.
+function toCollaborationStatus(status: SyncSocket['connectionStatus']) {
+	return status === 'error' ? 'offline' : status
+}
+
 /**
  * A store wrapper specifically for remote collaboration that excludes local-only states.
  * This type represents a tldraw store that is synchronized with a remote multiplayer server.
@@ -214,33 +233,26 @@ export function useSync(opts: UseSyncOptions & TLStoreSchemaOptions): RemoteTLSt
 	useEffect(() => {
 		const storeId = uniqueId()
 
-		const users: Required<TLUserStore> = _users
-			? {
-					currentUser: _users.currentUser,
-					resolve:
-						_users.resolve ??
-						createCachedUserResolve((userId) => {
-							const current = _users.currentUser.get()
-							return current && current.id === createUserId(userId) ? current : null
-						}),
-				}
-			: {
-					currentUser: defaultUserStore.currentUser,
-					resolve: createCachedUserResolve((userId) => {
-						const current = defaultUserStore.currentUser.get()
-						if (current && current.id === createUserId(userId)) return current
-						const presences = store.query.records('instance_presence').get()
-						const match = presences.find((p) => p.userId === createUserId(userId))
-						if (match) {
-							return UserRecordType.create({
-								id: createUserId(userId),
-								name: match.userName,
-								color: match.color,
-							})
-						}
-						return null
-					}),
-				}
+		const currentUserSignal = _users?.currentUser ?? defaultUserStore.currentUser
+		const users: Required<TLUserStore> = {
+			currentUser: currentUserSignal,
+			resolve:
+				_users?.resolve ??
+				createCachedUserResolve((userId) => {
+					const id = createUserId(userId)
+					const current = currentUserSignal.get()
+					if (current && current.id === id) return current
+					// Only the default user store falls back to presence records for other users.
+					if (_users) return null
+					const match = store.query
+						.records('instance_presence')
+						.get()
+						.find((p) => p.userId === id)
+					return match
+						? UserRecordType.create({ id, name: match.userName, color: match.color })
+						: null
+				}),
+		}
 
 		// This always returns a non-null user for presence display, falling back
 		// to anonymous user preferences. The store receives the raw `users` object
@@ -257,41 +269,23 @@ export function useSync(opts: UseSyncOptions & TLStoreSchemaOptions): RemoteTLSt
 			})
 		})
 
-		let socket: TLPersistentClientSocket<
-			TLSocketClientSentEvent<TLRecord>,
-			TLSocketServerSentEvent<TLRecord>
-		>
+		let socket: SyncSocket
 		if (connect) {
 			if (uri) {
 				throw new Error('uri and connect cannot be used together')
 			}
 
-			socket = connect({
-				sessionId: TAB_ID,
-				storeId,
-			}) as TLPersistentClientSocket<
-				TLSocketClientSentEvent<TLRecord>,
-				TLSocketServerSentEvent<TLRecord>
-			>
+			socket = connect({ sessionId: TAB_ID, storeId }) as SyncSocket
 		} else if (uri) {
-			if (connect) {
-				throw new Error('uri and connect cannot be used together')
-			}
-
 			socket = new ClientWebSocketAdapter(async () => {
-				const uriString = typeof uri === 'string' ? uri : await uri()
-
 				// set sessionId as a query param on the uri
-				const withParams = new URL(uriString)
-				if (withParams.searchParams.has('sessionId')) {
-					throw new Error(
-						'useSync. "sessionId" is a reserved query param name. Please use a different name'
-					)
-				}
-				if (withParams.searchParams.has('storeId')) {
-					throw new Error(
-						'useSync. "storeId" is a reserved query param name. Please use a different name'
-					)
+				const withParams = new URL(typeof uri === 'string' ? uri : await uri())
+				for (const param of ['sessionId', 'storeId']) {
+					if (withParams.searchParams.has(param)) {
+						throw new Error(
+							`useSync. "${param}" is a reserved query param name. Please use a different name`
+						)
+					}
 				}
 
 				withParams.searchParams.set('sessionId', TAB_ID)
@@ -304,12 +298,12 @@ export function useSync(opts: UseSyncOptions & TLStoreSchemaOptions): RemoteTLSt
 
 		let didCancel = false
 
-		function getConnectionStatus() {
-			return socket.connectionStatus === 'error' ? 'offline' : socket.connectionStatus
-		}
-		const collaborationStatusSignal = atom('collaboration status', getConnectionStatus())
+		const collaborationStatusSignal = atom(
+			'collaboration status',
+			toCollaborationStatus(socket.connectionStatus)
+		)
 		const unsubscribeFromConnectionStatus = socket.onStatusChange(() => {
-			collaborationStatusSignal.set(getConnectionStatus())
+			collaborationStatusSignal.set(toCollaborationStatus(socket.connectionStatus))
 		})
 
 		const syncMode = atom('sync mode', 'readwrite' as 'readonly' | 'readwrite')
@@ -349,30 +343,18 @@ export function useSync(opts: UseSyncOptions & TLStoreSchemaOptions): RemoteTLSt
 			didCancel: () => didCancel,
 			onLoad(client) {
 				track?.(MULTIPLAYER_EVENT_NAME, { name: 'load', roomId })
-				// Merge so we don't clobber objectAccess if onAfterConnect ran first.
-				setState((prev) => ({ ...prev, readyClient: client }))
+				// Keep objectAccess (onAfterConnect always runs first for this client) but drop the
+				// rest: an `error` left behind by a previous client (e.g. NOT_FOUND on the old uri)
+				// would otherwise keep the hook reporting status 'error' for the new, healthy room.
+				setState((prev) => ({ readyClient: client, objectAccess: prev?.objectAccess }))
 			},
 			onSyncError(reason) {
 				console.error('sync error', reason)
 
-				switch (reason) {
-					case TLSyncErrorCloseEventReason.NOT_FOUND:
-						track?.(MULTIPLAYER_EVENT_NAME, { name: 'room-not-found', roomId })
-						break
-					case TLSyncErrorCloseEventReason.FORBIDDEN:
-						track?.(MULTIPLAYER_EVENT_NAME, { name: 'forbidden', roomId })
-						break
-					case TLSyncErrorCloseEventReason.NOT_AUTHENTICATED:
-						track?.(MULTIPLAYER_EVENT_NAME, { name: 'not-authenticated', roomId })
-						break
-					case TLSyncErrorCloseEventReason.RATE_LIMITED:
-						track?.(MULTIPLAYER_EVENT_NAME, { name: 'rate-limited', roomId })
-						break
-					default:
-						track?.(MULTIPLAYER_EVENT_NAME, { name: 'sync-error:' + reason, roomId })
-						break
-				}
-
+				track?.(MULTIPLAYER_EVENT_NAME, {
+					name: SYNC_ERROR_EVENT_NAMES.get(reason) ?? 'sync-error:' + reason,
+					roomId,
+				})
 				setState({ error: new TLRemoteSyncError(reason) })
 				socket.close()
 			},
@@ -424,10 +406,9 @@ export function useSync(opts: UseSyncOptions & TLStoreSchemaOptions): RemoteTLSt
 			if (!state) return { status: 'loading' }
 			if (state.error) return { status: 'error', error: state.error }
 			if (!state.readyClient) return { status: 'loading' }
-			const connectionStatus = state.readyClient.socket.connectionStatus
 			return {
 				status: 'synced-remote',
-				connectionStatus: connectionStatus === 'error' ? 'offline' : connectionStatus,
+				connectionStatus: toCollaborationStatus(state.readyClient.socket.connectionStatus),
 				store: state.readyClient.store,
 				objectAccess: state.objectAccess ?? 'write',
 			}

package/src/useSyncDemo.ts

@@ -121,9 +121,9 @@ export function useSyncDemo(
 		assets,
 		onMount: useCallback(
 			(editor: Editor) => {
-				editor.registerExternalAssetHandler('url', async ({ url }) => {
-					return await createAssetFromUrlUsingDemoServer(host, url)
-				})
+				editor.registerExternalAssetHandler('url', ({ url }) =>
+					createAssetFromUrlUsingDemoServer(host, url)
+				)
 			},
 			[host]
 		),
@@ -182,9 +182,7 @@ function createDemoAssetStore(host: string): TLAssetStore {
 				alert('Uploading images is disabled in this demo.')
 				throw new Error('Uploading images is disabled in this demo.')
 			}
-			const id = uniqueId()
-
-			const objectName = `${id}-${file.name}`.replace(/\W/g, '-')
+			const objectName = `${uniqueId()}-${file.name}`.replace(/\W/g, '-')
 			const url = `${host}/uploads/${objectName}`
 
 			const response = await fetch(url, {
@@ -201,34 +199,34 @@ function createDemoAssetStore(host: string): TLAssetStore {
 		},
 
 		resolve(asset, context) {
-			if (!asset.props.src) return null
+			const { src } = asset.props
+			if (!src) return null
 
 			// We don't deal with videos at the moment.
-			if (asset.type === 'video') return asset.props.src
+			if (asset.type === 'video') return src
 
 			// Assert it's an image to make TS happy.
 			if (asset.type !== 'image') return null
 
 			// Don't try to transform data: URLs, yikes.
-			if (!asset.props.src.startsWith('http:') && !asset.props.src.startsWith('https:'))
-				return asset.props.src
+			if (!src.startsWith('http:') && !src.startsWith('https:')) return src
 
-			if (context.shouldResolveToOriginal) return asset.props.src
+			if (context.shouldResolveToOriginal) return src
 
 			// Don't try to transform animated images.
-			if (MediaHelpers.isAnimatedImageType(asset?.props.mimeType) || asset.props.isAnimated)
-				return asset.props.src
+			if (MediaHelpers.isAnimatedImageType(asset.props.mimeType) || asset.props.isAnimated)
+				return src
 
 			// Don't try to transform vector images.
-			if (MediaHelpers.isVectorImageType(asset?.props.mimeType)) return asset.props.src
+			if (MediaHelpers.isVectorImageType(asset.props.mimeType)) return src
 
-			const url = new URL(asset.props.src)
+			const url = new URL(src)
 
 			// we only transform images that are hosted on domains we control
 			const isTldrawImage =
 				url.origin === host || /\.tldraw\.(?:com|xyz|dev|workers\.dev)$/.test(url.host)
 
-			if (!isTldrawImage) return asset.props.src
+			if (!isTldrawImage) return src
 
 			// Assets that are under a certain file size aren't worth transforming (and incurring cost).
 			// We still send them through the image worker to get them optimized though.
@@ -256,8 +254,7 @@ function createDemoAssetStore(host: string): TLAssetStore {
 				url.searchParams.set('w', width.toString())
 			}
 
-			const newUrl = `${IMAGE_WORKER}/${url.host}/${url.toString().slice(url.origin.length + 1)}`
-			return newUrl
+			return `${IMAGE_WORKER}/${url.host}/${url.toString().slice(url.origin.length + 1)}`
 		},
 	}
 }
@@ -285,47 +282,28 @@ function createDemoAssetStore(host: string): TLAssetStore {
  * @internal
  */
 async function createAssetFromUrlUsingDemoServer(host: string, url: string): Promise<TLAsset> {
-	const urlHash = getHashForString(url)
+	let meta: { description?: string; image?: string; favicon?: string; title?: string } | null = null
 	try {
 		// First, try to get the meta data from our endpoint
 		const fetchUrl = new URL(`${host}/bookmarks/unfurl`)
 		fetchUrl.searchParams.set('url', url)
-
-		const meta = (await (await fetch(fetchUrl, { method: 'POST' })).json()) as {
-			description?: string
-			image?: string
-			favicon?: string
-			title?: string
-		} | null
-
-		return {
-			id: AssetRecordType.createId(urlHash),
-			typeName: 'asset',
-			type: 'bookmark',
-			props: {
-				src: url,
-				description: meta?.description ?? '',
-				image: meta?.image ?? '',
-				favicon: meta?.favicon ?? '',
-				title: meta?.title ?? '',
-			},
-			meta: {},
-		}
+		meta = await (await fetch(fetchUrl, { method: 'POST' })).json()
 	} catch (error) {
-		// Otherwise, fallback to a blank bookmark
+		// Otherwise, fall back to a blank bookmark
 		console.error(error)
-		return {
-			id: AssetRecordType.createId(urlHash),
-			typeName: 'asset',
-			type: 'bookmark',
-			props: {
-				src: url,
-				description: '',
-				image: '',
-				favicon: '',
-				title: '',
-			},
-			meta: {},
-		}
+	}
+
+	return {
+		id: AssetRecordType.createId(getHashForString(url)),
+		typeName: 'asset',
+		type: 'bookmark',
+		props: {
+			src: url,
+			description: meta?.description ?? '',
+			image: meta?.image ?? '',
+			favicon: meta?.favicon ?? '',
+			title: meta?.title ?? '',
+		},
+		meta: {},
 	}
 }