0acfd563fe
* Upgrade Liveblocks packages to 0.17 * Convert app to recommended Liveblocks 0.17 setup * Convert multiplayer example to recommended Liveblocks 0.17 setup * Convert multiplayer-with-images example to recommended Liveblocks 0.17 setup * Fix React rendering issue for multiplayer app This bug could manifest after _navigating_ internally to the Multiplayer example app. Liveblocks Storage would seem to remain empty, but Presence would still seem to work. In other words, you'd see cursors flying, but no document contents. This did not happen when doing a full page load. This bug only occurs in React strict mode. * update onPatch and onCommand * "Add event callbacks for `onSessionStart` and `onSessionEnd`" * Adds edit state * Pass callbacks to app * Remove console logs * interpolate cursor only when not in session * Update multiplayer icon * Fix a few things Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { createClient } from '@liveblocks/client'
|
|
import type { EnsureJson, LiveMap, LiveObject } from '@liveblocks/client'
|
|
import { createRoomContext } from '@liveblocks/react'
|
|
import type { TDUser, TDShape, TDBinding, TDDocument, TDAsset } from '@tldraw/tldraw'
|
|
|
|
const client = createClient({
|
|
publicApiKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_API_KEY || '',
|
|
throttle: 80,
|
|
})
|
|
|
|
// Presence represents the properties that will exist on every User in the
|
|
// Liveblocks Room and that will automatically be kept in sync. Accessible
|
|
// through the `user.presence` property.
|
|
type Presence = {
|
|
id?: string
|
|
user: EnsureJson<TDUser>
|
|
}
|
|
|
|
// Storage represents the shared document that persists in the Room, even after
|
|
// all Users leave, and for which updates are automatically persisted and
|
|
// synced to all connected clients.
|
|
export type Storage = {
|
|
version: number
|
|
doc: LiveObject<{
|
|
uuid: string
|
|
document: EnsureJson<TDDocument>
|
|
migrated?: boolean
|
|
}>
|
|
shapes: LiveMap<string, EnsureJson<TDShape>>
|
|
bindings: LiveMap<string, EnsureJson<TDBinding>>
|
|
assets: LiveMap<string, EnsureJson<TDAsset>>
|
|
}
|
|
|
|
// Optionally, UserMeta represents static/readonly metadata on each User, as
|
|
// provided by your own custom auth backend. This isn't used for TLDraw.
|
|
// type UserMeta = {
|
|
// id?: string, // Accessible through `user.id`
|
|
// info?: Json, // Accessible through `user.info`
|
|
// };
|
|
|
|
// Optionally, the type of custom events broadcasted and listened for in this
|
|
// room.
|
|
// type RoomEvent = {};
|
|
|
|
const { RoomProvider, useHistory, useRedo, useUndo, useRoom, useUpdateMyPresence } =
|
|
createRoomContext<
|
|
Presence,
|
|
Storage
|
|
/* UserMeta, RoomEvent */
|
|
>(client)
|
|
|
|
export { RoomProvider, useHistory, useRedo, useUndo, useRoom, useUpdateMyPresence }
|