@liveblocks/react 1.19.0-test1 → 2.0.0-alpha2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1056 @@
1
+ import * as React$1 from 'react';
2
+ import React__default, { ReactNode, PropsWithChildren } from 'react';
3
+ import { JsonObject, LsonObject, BaseUserMeta, LiveObject, User, Json, RoomNotificationSettings, Room, Status, BroadcastOptions, OthersEvent, LostConnectionEvent, History, Client, BaseMetadata as BaseMetadata$1 } from '@liveblocks/client';
4
+ import { BaseMetadata, CommentBody, Patchable, QueryMetadata, DRI, InboxNotificationData, Resolve, ToImmutable, ThreadData, LiveblocksError, RoomEventMessage, CommentData, RoomInitializers, OpaqueClient, DU, ClientOptions, DM, OpaqueRoom, RoomNotificationSettings as RoomNotificationSettings$1, DP, DS, DE } from '@liveblocks/core';
5
+
6
+ declare type Props = {
7
+ fallback: ReactNode;
8
+ children: // TODO Restore this again later
9
+ ReactNode | undefined;
10
+ };
11
+ /**
12
+ * Almost like a normal <Suspense> component, except that for server-side
13
+ * renders, the fallback will be used.
14
+ *
15
+ * The child props will have to be provided in a function, i.e. change:
16
+ *
17
+ * <Suspense fallback={<Loading />}>
18
+ * <MyRealComponent a={1} />
19
+ * </Suspense>
20
+ *
21
+ * To:
22
+ *
23
+ * <ClientSideSuspense fallback={<Loading />}>
24
+ * <MyRealComponent a={1} />
25
+ * </ClientSideSuspense>
26
+ *
27
+ */
28
+ declare function ClientSideSuspense(props: Props): React$1.JSX.Element;
29
+
30
+ declare class CreateThreadError<M extends BaseMetadata> extends Error {
31
+ cause: Error;
32
+ context: {
33
+ roomId: string;
34
+ threadId: string;
35
+ commentId: string;
36
+ body: CommentBody;
37
+ metadata: M;
38
+ };
39
+ constructor(cause: Error, context: {
40
+ roomId: string;
41
+ threadId: string;
42
+ commentId: string;
43
+ body: CommentBody;
44
+ metadata: M;
45
+ });
46
+ }
47
+ declare class EditThreadMetadataError<M extends BaseMetadata> extends Error {
48
+ cause: Error;
49
+ context: {
50
+ roomId: string;
51
+ threadId: string;
52
+ metadata: Patchable<M>;
53
+ };
54
+ constructor(cause: Error, context: {
55
+ roomId: string;
56
+ threadId: string;
57
+ metadata: Patchable<M>;
58
+ });
59
+ }
60
+ declare class CreateCommentError extends Error {
61
+ cause: Error;
62
+ context: {
63
+ roomId: string;
64
+ threadId: string;
65
+ commentId: string;
66
+ body: CommentBody;
67
+ };
68
+ constructor(cause: Error, context: {
69
+ roomId: string;
70
+ threadId: string;
71
+ commentId: string;
72
+ body: CommentBody;
73
+ });
74
+ }
75
+ declare class EditCommentError extends Error {
76
+ cause: Error;
77
+ context: {
78
+ roomId: string;
79
+ threadId: string;
80
+ commentId: string;
81
+ body: CommentBody;
82
+ };
83
+ constructor(cause: Error, context: {
84
+ roomId: string;
85
+ threadId: string;
86
+ commentId: string;
87
+ body: CommentBody;
88
+ });
89
+ }
90
+ declare class DeleteCommentError extends Error {
91
+ cause: Error;
92
+ context: {
93
+ roomId: string;
94
+ threadId: string;
95
+ commentId: string;
96
+ };
97
+ constructor(cause: Error, context: {
98
+ roomId: string;
99
+ threadId: string;
100
+ commentId: string;
101
+ });
102
+ }
103
+ declare class MarkInboxNotificationAsReadError extends Error {
104
+ cause: Error;
105
+ context: {
106
+ inboxNotificationId: string;
107
+ };
108
+ constructor(cause: Error, context: {
109
+ inboxNotificationId: string;
110
+ });
111
+ }
112
+ declare class UpdateNotificationSettingsError extends Error {
113
+ cause: Error;
114
+ context: {
115
+ roomId: string;
116
+ };
117
+ constructor(cause: Error, context: {
118
+ roomId: string;
119
+ });
120
+ }
121
+ declare type CommentsError<M extends BaseMetadata> = CreateThreadError<M> | EditThreadMetadataError<M> | CreateCommentError | EditCommentError | DeleteCommentError | MarkInboxNotificationAsReadError | UpdateNotificationSettingsError;
122
+
123
+ declare type UseThreadsOptions<M extends BaseMetadata> = {
124
+ /**
125
+ * The query (including metadata) to filter the threads by. If provided, only threads
126
+ * that match the query will be returned. If not provided, all threads will be returned.
127
+ */
128
+ query?: {
129
+ /**
130
+ * The metadata to filter the threads by. If provided, only threads with metadata that matches
131
+ * the provided metadata will be returned. If not provided, all threads will be returned.
132
+ */
133
+ metadata?: Partial<QueryMetadata<M>>;
134
+ };
135
+ /**
136
+ * Whether to scroll to a comment on load based on the URL hash. Defaults to `true`.
137
+ *
138
+ * @example
139
+ * Given the URL `https://example.com/my-room#cm_xxx`, the `cm_xxx` comment will be
140
+ * scrolled to on load if it exists in the page.
141
+ */
142
+ scrollOnLoad?: boolean;
143
+ };
144
+
145
+ declare type UserStateLoading = {
146
+ isLoading: true;
147
+ user?: never;
148
+ error?: never;
149
+ };
150
+ declare type UserStateError = {
151
+ isLoading: false;
152
+ user?: never;
153
+ error: Error;
154
+ };
155
+ declare type UserStateSuccess<T> = {
156
+ isLoading: false;
157
+ user: T;
158
+ error?: never;
159
+ };
160
+ declare type UserState<T> = UserStateLoading | UserStateError | UserStateSuccess<T>;
161
+ declare type RoomInfoStateLoading = {
162
+ isLoading: true;
163
+ info?: never;
164
+ error?: never;
165
+ };
166
+ declare type RoomInfoStateError = {
167
+ isLoading: false;
168
+ info?: never;
169
+ error: Error;
170
+ };
171
+ declare type RoomInfoStateSuccess = {
172
+ isLoading: false;
173
+ info: DRI;
174
+ error?: never;
175
+ };
176
+ declare type RoomInfoState = RoomInfoStateLoading | RoomInfoStateError | RoomInfoStateSuccess;
177
+ declare type CreateThreadOptions<M extends BaseMetadata> = Record<string, never> extends M ? {
178
+ body: CommentBody;
179
+ metadata?: M;
180
+ } : {
181
+ body: CommentBody;
182
+ metadata: M;
183
+ };
184
+ declare type EditThreadMetadataOptions<M extends BaseMetadata> = {
185
+ threadId: string;
186
+ metadata: Patchable<M>;
187
+ };
188
+ declare type CreateCommentOptions = {
189
+ threadId: string;
190
+ body: CommentBody;
191
+ };
192
+ declare type EditCommentOptions = {
193
+ threadId: string;
194
+ commentId: string;
195
+ body: CommentBody;
196
+ };
197
+ declare type DeleteCommentOptions = {
198
+ threadId: string;
199
+ commentId: string;
200
+ };
201
+ declare type CommentReactionOptions = {
202
+ threadId: string;
203
+ commentId: string;
204
+ emoji: string;
205
+ };
206
+ declare type ThreadsStateLoading = {
207
+ isLoading: true;
208
+ threads?: never;
209
+ error?: never;
210
+ };
211
+ declare type ThreadsStateResolved<M extends BaseMetadata> = {
212
+ isLoading: false;
213
+ threads: ThreadData<M>[];
214
+ error?: Error;
215
+ };
216
+ declare type ThreadsStateSuccess<M extends BaseMetadata> = {
217
+ isLoading: false;
218
+ threads: ThreadData<M>[];
219
+ error?: never;
220
+ };
221
+ declare type ThreadsState<M extends BaseMetadata> = ThreadsStateLoading | ThreadsStateResolved<M>;
222
+ declare type InboxNotificationsStateLoading = {
223
+ isLoading: true;
224
+ inboxNotifications?: never;
225
+ error?: never;
226
+ };
227
+ declare type InboxNotificationsStateResolved = {
228
+ isLoading: false;
229
+ inboxNotifications: InboxNotificationData[];
230
+ error?: Error;
231
+ };
232
+ declare type InboxNotificationsStateSuccess = {
233
+ isLoading: false;
234
+ inboxNotifications: InboxNotificationData[];
235
+ error?: never;
236
+ };
237
+ declare type InboxNotificationsStateError = {
238
+ isLoading: false;
239
+ inboxNotifications?: never;
240
+ error: Error;
241
+ };
242
+ declare type InboxNotificationsState = InboxNotificationsStateLoading | InboxNotificationsStateResolved | InboxNotificationsStateError;
243
+ declare type UnreadInboxNotificationsCountStateLoading = {
244
+ isLoading: true;
245
+ count?: never;
246
+ error?: never;
247
+ };
248
+ declare type UnreadInboxNotificationsCountStateSuccess = {
249
+ isLoading: false;
250
+ count: number;
251
+ error?: never;
252
+ };
253
+ declare type UnreadInboxNotificationsCountStateError = {
254
+ isLoading: false;
255
+ count?: never;
256
+ error: Error;
257
+ };
258
+ declare type UnreadInboxNotificationsCountState = UnreadInboxNotificationsCountStateLoading | UnreadInboxNotificationsCountStateSuccess | UnreadInboxNotificationsCountStateError;
259
+ declare type RoomNotificationSettingsStateLoading = {
260
+ isLoading: true;
261
+ settings?: never;
262
+ error?: never;
263
+ };
264
+ declare type RoomNotificationSettingsStateError = {
265
+ isLoading: false;
266
+ settings?: never;
267
+ error: Error;
268
+ };
269
+ declare type RoomNotificationSettingsStateSuccess = {
270
+ isLoading: false;
271
+ settings: RoomNotificationSettings;
272
+ error?: never;
273
+ };
274
+ declare type RoomNotificationSettingsState = RoomNotificationSettingsStateLoading | RoomNotificationSettingsStateError | RoomNotificationSettingsStateSuccess;
275
+ declare type RoomProviderProps<P extends JsonObject, S extends LsonObject> = Resolve<{
276
+ /**
277
+ * The id of the room you want to connect to
278
+ */
279
+ id: string;
280
+ children: React.ReactNode;
281
+ /**
282
+ * Whether or not the room should connect to Liveblocks servers
283
+ * when the RoomProvider is rendered.
284
+ *
285
+ * By default equals to `typeof window !== "undefined"`,
286
+ * meaning the RoomProvider tries to connect to Liveblocks servers
287
+ * only on the client side.
288
+ */
289
+ autoConnect?: boolean;
290
+ /**
291
+ * If you're on React 17 or lower, pass in a reference to
292
+ * `ReactDOM.unstable_batchedUpdates` or
293
+ * `ReactNative.unstable_batchedUpdates` here.
294
+ *
295
+ * @example
296
+ * import { unstable_batchedUpdates } from "react-dom";
297
+ *
298
+ * <RoomProvider ... unstable_batchedUpdates={unstable_batchedUpdates} />
299
+ *
300
+ * This will prevent you from running into the so-called "stale props"
301
+ * and/or "zombie child" problem that React 17 and lower can suffer from.
302
+ * Not necessary when you're on React v18 or later.
303
+ */
304
+ unstable_batchedUpdates?: (cb: () => void) => void;
305
+ } & RoomInitializers<P, S>>;
306
+ /**
307
+ * For any function type, returns a similar function type, but without the
308
+ * first argument.
309
+ */
310
+ declare type OmitFirstArg<F> = F extends (first: any, ...rest: infer A) => infer R ? (...args: A) => R : never;
311
+ declare type MutationContext<P extends JsonObject, S extends LsonObject, U extends BaseUserMeta> = {
312
+ storage: LiveObject<S>;
313
+ self: User<P, U>;
314
+ others: readonly User<P, U>[];
315
+ setMyPresence: (patch: Partial<P>, options?: {
316
+ addToHistory: boolean;
317
+ }) => void;
318
+ };
319
+ declare type ThreadSubscription = {
320
+ status: "not-subscribed";
321
+ unreadSince?: never;
322
+ } | {
323
+ status: "subscribed";
324
+ unreadSince: null;
325
+ } | {
326
+ status: "subscribed";
327
+ unreadSince: Date;
328
+ };
329
+ declare type SharedContextBundle<U extends BaseUserMeta> = {
330
+ classic: {
331
+ /**
332
+ * Returns user info from a given user ID.
333
+ *
334
+ * @example
335
+ * const { user, error, isLoading } = useUser("user-id");
336
+ */
337
+ useUser(userId: string): UserState<U["info"]>;
338
+ /**
339
+ * Returns room info from a given room ID.
340
+ *
341
+ * @example
342
+ * const { info, error, isLoading } = useRoomInfo("room-id");
343
+ */
344
+ useRoomInfo(roomId: string): RoomInfoState;
345
+ };
346
+ suspense: {
347
+ /**
348
+ * Returns user info from a given user ID.
349
+ *
350
+ * @example
351
+ * const { user } = useUser("user-id");
352
+ */
353
+ useUser(userId: string): UserStateSuccess<U["info"]>;
354
+ /**
355
+ * Returns room info from a given room ID.
356
+ *
357
+ * @example
358
+ * const { info } = useRoomInfo("room-id");
359
+ */
360
+ useRoomInfo(roomId: string): RoomInfoStateSuccess;
361
+ };
362
+ };
363
+ /**
364
+ * Properties that are the same in RoomContext and RoomContext["suspense"].
365
+ */
366
+ declare type RoomContextBundleCommon<P extends JsonObject, S extends LsonObject, U extends BaseUserMeta, E extends Json, M extends BaseMetadata> = {
367
+ /**
368
+ * You normally don't need to directly interact with the RoomContext, but
369
+ * it can be necessary if you're building an advanced app where you need to
370
+ * set up a context bridge between two React renderers.
371
+ */
372
+ RoomContext: React.Context<Room<P, S, U, E, M> | null>;
373
+ /**
374
+ * Makes a Room available in the component hierarchy below.
375
+ * Joins the room when the component is mounted, and automatically leaves
376
+ * the room when the component is unmounted.
377
+ */
378
+ RoomProvider(props: RoomProviderProps<P, S>): JSX.Element;
379
+ /**
380
+ * Returns the Room of the nearest RoomProvider above in the React component
381
+ * tree.
382
+ */
383
+ useRoom(): Room<P, S, U, E, M>;
384
+ /**
385
+ * Returns the current connection status for the Room, and triggers
386
+ * a re-render whenever it changes. Can be used to render a status badge.
387
+ */
388
+ useStatus(): Status;
389
+ /**
390
+ * @deprecated It's recommended to use `useMutation` for writing to Storage,
391
+ * which will automatically batch all mutations.
392
+ *
393
+ * Returns a function that batches modifications made during the given function.
394
+ * All the modifications are sent to other clients in a single message.
395
+ * All the modifications are merged in a single history item (undo/redo).
396
+ * All the subscribers are called only after the batch is over.
397
+ */
398
+ useBatch<T>(): (callback: () => T) => T;
399
+ /**
400
+ * Returns a callback that lets you broadcast custom events to other users in the room
401
+ *
402
+ * @example
403
+ * const broadcast = useBroadcastEvent();
404
+ *
405
+ * broadcast({ type: "CUSTOM_EVENT", data: { x: 0, y: 0 } });
406
+ */
407
+ useBroadcastEvent(): (event: E, options?: BroadcastOptions) => void;
408
+ /**
409
+ * Get informed when users enter or leave the room, as an event.
410
+ *
411
+ * @example
412
+ * useOthersListener({ type, user, others }) => {
413
+ * if (type === 'enter') {
414
+ * // `user` has joined the room
415
+ * } else if (type === 'leave') {
416
+ * // `user` has left the room
417
+ * }
418
+ * })
419
+ */
420
+ useOthersListener(callback: (event: OthersEvent<P, U>) => void): void;
421
+ /**
422
+ * Get informed when reconnecting to the Liveblocks servers is taking
423
+ * longer than usual. This typically is a sign of a client that has lost
424
+ * internet connectivity.
425
+ *
426
+ * This isn't problematic (because the Liveblocks client is still trying to
427
+ * reconnect), but it's typically a good idea to inform users about it if
428
+ * the connection takes too long to recover.
429
+ *
430
+ * @example
431
+ * useLostConnectionListener(event => {
432
+ * if (event === 'lost') {
433
+ * toast.warn('Reconnecting to the Liveblocks servers is taking longer than usual...')
434
+ * } else if (event === 'failed') {
435
+ * toast.warn('Reconnecting to the Liveblocks servers failed.')
436
+ * } else if (event === 'restored') {
437
+ * toast.clear();
438
+ * }
439
+ * })
440
+ */
441
+ useLostConnectionListener(callback: (event: LostConnectionEvent) => void): void;
442
+ /**
443
+ * useErrorListener is a React hook that allows you to respond to potential room
444
+ * connection errors.
445
+ *
446
+ * @example
447
+ * useErrorListener(er => {
448
+ * console.error(er);
449
+ * })
450
+ */
451
+ useErrorListener(callback: (err: LiveblocksError) => void): void;
452
+ /**
453
+ * useEventListener is a React hook that allows you to respond to events broadcast
454
+ * by other users in the room.
455
+ *
456
+ * @example
457
+ * useEventListener(({ connectionId, event }) => {
458
+ * if (event.type === "CUSTOM_EVENT") {
459
+ * // Do something
460
+ * }
461
+ * });
462
+ */
463
+ useEventListener(callback: (data: RoomEventMessage<P, U, E>) => void): void;
464
+ /**
465
+ * Returns the room.history
466
+ */
467
+ useHistory(): History;
468
+ /**
469
+ * Returns a function that undoes the last operation executed by the current client.
470
+ * It does not impact operations made by other clients.
471
+ */
472
+ useUndo(): () => void;
473
+ /**
474
+ * Returns a function that redoes the last operation executed by the current client.
475
+ * It does not impact operations made by other clients.
476
+ */
477
+ useRedo(): () => void;
478
+ /**
479
+ * Returns whether there are any operations to undo.
480
+ */
481
+ useCanUndo(): boolean;
482
+ /**
483
+ * Returns whether there are any operations to redo.
484
+ */
485
+ useCanRedo(): boolean;
486
+ /**
487
+ * Returns the mutable (!) Storage root. This hook exists for
488
+ * backward-compatible reasons.
489
+ *
490
+ * @example
491
+ * const [root] = useStorageRoot();
492
+ */
493
+ useStorageRoot(): [root: LiveObject<S> | null];
494
+ /**
495
+ * Returns the presence of the current user of the current room, and a function to update it.
496
+ * It is different from the setState function returned by the useState hook from React.
497
+ * You don't need to pass the full presence object to update it.
498
+ *
499
+ * @example
500
+ * const [myPresence, updateMyPresence] = useMyPresence();
501
+ * updateMyPresence({ x: 0 });
502
+ * updateMyPresence({ y: 0 });
503
+ *
504
+ * // At the next render, "myPresence" will be equal to "{ x: 0, y: 0 }"
505
+ */
506
+ useMyPresence(): [
507
+ P,
508
+ (patch: Partial<P>, options?: {
509
+ addToHistory: boolean;
510
+ }) => void
511
+ ];
512
+ /**
513
+ * useUpdateMyPresence is similar to useMyPresence but it only returns the function to update the current user presence.
514
+ * If you don't use the current user presence in your component, but you need to update it (e.g. live cursor), it's better to use useUpdateMyPresence to avoid unnecessary renders.
515
+ *
516
+ * @example
517
+ * const updateMyPresence = useUpdateMyPresence();
518
+ * updateMyPresence({ x: 0 });
519
+ * updateMyPresence({ y: 0 });
520
+ *
521
+ * // At the next render, the presence of the current user will be equal to "{ x: 0, y: 0 }"
522
+ */
523
+ useUpdateMyPresence(): (patch: Partial<P>, options?: {
524
+ addToHistory: boolean;
525
+ }) => void;
526
+ /**
527
+ * Create a callback function that lets you mutate Liveblocks state.
528
+ *
529
+ * The first argument that gets passed into your callback will be
530
+ * a "mutation context", which exposes the following:
531
+ *
532
+ * - `root` - The mutable Storage root.
533
+ * You can normal mutation on Live structures with this, for
534
+ * example: root.get('layers').get('layer1').set('fill',
535
+ * 'red')
536
+ *
537
+ * - `setMyPresence` - Call this with a new (partial) Presence value.
538
+ *
539
+ * - `self` - A read-only version of the latest self, if you need it to
540
+ * compute the next state.
541
+ *
542
+ * - `others` - A read-only version of the latest others list, if you
543
+ * need it to compute the next state.
544
+ *
545
+ * useMutation is like React's useCallback, except that the first argument
546
+ * that gets passed into your callback will be a "mutation context".
547
+ *
548
+ * If you want get access to the immutable root somewhere in your mutation,
549
+ * you can use `root.ToImmutable()`.
550
+ *
551
+ * @example
552
+ * const fillLayers = useMutation(
553
+ * ({ root }, color: Color) => {
554
+ * ...
555
+ * },
556
+ * [],
557
+ * );
558
+ *
559
+ * fillLayers('red');
560
+ *
561
+ * const deleteLayers = useMutation(
562
+ * ({ root }) => {
563
+ * ...
564
+ * },
565
+ * [],
566
+ * );
567
+ *
568
+ * deleteLayers();
569
+ */
570
+ useMutation<F extends (context: MutationContext<P, S, U>, ...args: any[]) => any>(callback: F, deps: readonly unknown[]): OmitFirstArg<F>;
571
+ /**
572
+ * Returns an object that lets you get information about all the users
573
+ * currently connected in the room.
574
+ *
575
+ * @example
576
+ * const others = useOthers();
577
+ *
578
+ * // Example to map all cursors in JSX
579
+ * return (
580
+ * <>
581
+ * {others.map((user) => {
582
+ * if (user.presence.cursor == null) {
583
+ * return null;
584
+ * }
585
+ * return <Cursor key={user.connectionId} cursor={user.presence.cursor} />
586
+ * })}
587
+ * </>
588
+ * )
589
+ */
590
+ useOthers(): readonly User<P, U>[];
591
+ /**
592
+ * Extract arbitrary data based on all the users currently connected in the
593
+ * room (except yourself).
594
+ *
595
+ * The selector function will get re-evaluated any time a user enters or
596
+ * leaves the room, as well as whenever their presence data changes.
597
+ *
598
+ * The component that uses this hook will automatically re-render if your
599
+ * selector function returns a different value from its previous run.
600
+ *
601
+ * By default `useOthers()` uses strict `===` to check for equality. Take
602
+ * extra care when returning a computed object or list, for example when you
603
+ * return the result of a .map() or .filter() call from the selector. In
604
+ * those cases, you'll probably want to use a `shallow` comparison check.
605
+ *
606
+ * @example
607
+ * const avatars = useOthers(users => users.map(u => u.info.avatar), shallow);
608
+ * const cursors = useOthers(users => users.map(u => u.presence.cursor), shallow);
609
+ * const someoneIsTyping = useOthers(users => users.some(u => u.presence.isTyping));
610
+ *
611
+ */
612
+ useOthers<T>(selector: (others: readonly User<P, U>[]) => T, isEqual?: (prev: T, curr: T) => boolean): T;
613
+ /**
614
+ * Returns an array of connection IDs. This matches the values you'll get by
615
+ * using the `useOthers()` hook.
616
+ *
617
+ * Roughly equivalent to:
618
+ * useOthers((others) => others.map(other => other.connectionId), shallow)
619
+ *
620
+ * This is useful in particular to implement efficiently rendering components
621
+ * for each user in the room, e.g. cursors.
622
+ *
623
+ * @example
624
+ * const ids = useOthersConnectionIds();
625
+ * // [2, 4, 7]
626
+ */
627
+ useOthersConnectionIds(): readonly number[];
628
+ /**
629
+ * Related to useOthers(), but optimized for selecting only "subsets" of
630
+ * others. This is useful for performance reasons in particular, because
631
+ * selecting only a subset of users also means limiting the number of
632
+ * re-renders that will be triggered.
633
+ *
634
+ * @example
635
+ * const avatars = useOthersMapped(user => user.info.avatar);
636
+ * // ^^^^^^^
637
+ * // { connectionId: number; data: string }[]
638
+ *
639
+ * The selector function you pass to useOthersMapped() is called an "item
640
+ * selector", and operates on a single user at a time. If you provide an
641
+ * (optional) "item comparison" function, it will be used to compare each
642
+ * item pairwise.
643
+ *
644
+ * For example, to select multiple properties:
645
+ *
646
+ * @example
647
+ * const avatarsAndCursors = useOthersMapped(
648
+ * user => [u.info.avatar, u.presence.cursor],
649
+ * shallow, // 👈
650
+ * );
651
+ */
652
+ useOthersMapped<T>(itemSelector: (other: User<P, U>) => T, itemIsEqual?: (prev: T, curr: T) => boolean): ReadonlyArray<readonly [connectionId: number, data: T]>;
653
+ /**
654
+ * Given a connection ID (as obtained by using `useOthersConnectionIds`), you
655
+ * can call this selector deep down in your component stack to only have the
656
+ * component re-render if properties for this particular user change.
657
+ *
658
+ * @example
659
+ * // Returns only the selected values re-renders whenever that selection changes)
660
+ * const { x, y } = useOther(2, user => user.presence.cursor);
661
+ */
662
+ useOther<T>(connectionId: number, selector: (other: User<P, U>) => T, isEqual?: (prev: T, curr: T) => boolean): T;
663
+ /**
664
+ * Returns a function that creates a thread with an initial comment, and optionally some metadata.
665
+ *
666
+ * @example
667
+ * const createThread = useCreateThread();
668
+ * createThread({ body: {}, metadata: {} });
669
+ */
670
+ useCreateThread(): (options: CreateThreadOptions<M>) => ThreadData<M>;
671
+ /**
672
+ * Returns a function that edits a thread's metadata.
673
+ * To delete an existing metadata property, set its value to `null`.
674
+ *
675
+ * @example
676
+ * const editThreadMetadata = useEditThreadMetadata();
677
+ * editThreadMetadata({ threadId: "th_xxx", metadata: {} })
678
+ */
679
+ useEditThreadMetadata(): (options: EditThreadMetadataOptions<M>) => void;
680
+ /**
681
+ * Returns a function that adds a comment to a thread.
682
+ *
683
+ * @example
684
+ * const createComment = useCreateComment();
685
+ * createComment({ threadId: "th_xxx", body: {} });
686
+ */
687
+ useCreateComment(): (options: CreateCommentOptions) => CommentData;
688
+ /**
689
+ * Returns a function that edits a comment's body.
690
+ *
691
+ * @example
692
+ * const editComment = useEditComment()
693
+ * editComment({ threadId: "th_xxx", commentId: "cm_xxx", body: {} })
694
+ */
695
+ useEditComment(): (options: EditCommentOptions) => void;
696
+ /**
697
+ * Returns a function that deletes a comment.
698
+ * If it is the last non-deleted comment, the thread also gets deleted.
699
+ *
700
+ * @example
701
+ * const deleteComment = useDeleteComment();
702
+ * deleteComment({ threadId: "th_xxx", commentId: "cm_xxx" })
703
+ */
704
+ useDeleteComment(): (options: DeleteCommentOptions) => void;
705
+ /**
706
+ * Returns a function that adds a reaction from a comment.
707
+ *
708
+ * @example
709
+ * const addReaction = useAddReaction();
710
+ * addReaction({ threadId: "th_xxx", commentId: "cm_xxx", emoji: "👍" })
711
+ */
712
+ useAddReaction(): (options: CommentReactionOptions) => void;
713
+ /**
714
+ * Returns a function that removes a reaction on a comment.
715
+ *
716
+ * @example
717
+ * const removeReaction = useRemoveReaction();
718
+ * removeReaction({ threadId: "th_xxx", commentId: "cm_xxx", emoji: "👍" })
719
+ */
720
+ useRemoveReaction(): (options: CommentReactionOptions) => void;
721
+ /**
722
+ * @beta
723
+ *
724
+ * Returns a function that updates the user's notification settings
725
+ * for the current room.
726
+ *
727
+ * @example
728
+ * const updateRoomNotificationSettings = useUpdateRoomNotificationSettings();
729
+ * updateRoomNotificationSettings({ threads: "all" });
730
+ */
731
+ useUpdateRoomNotificationSettings(): (settings: Partial<RoomNotificationSettings>) => void;
732
+ /**
733
+ * Returns a function that marks a thread as read.
734
+ *
735
+ * @example
736
+ * const markThreadAsRead = useMarkThreadAsRead();
737
+ * markThreadAsRead("th_xxx");
738
+ */
739
+ useMarkThreadAsRead(): (threadId: string) => void;
740
+ /**
741
+ * Returns the subscription status of a thread.
742
+ *
743
+ * @example
744
+ * const { status, unreadSince } = useThreadSubscription("th_xxx");
745
+ */
746
+ useThreadSubscription(threadId: string): ThreadSubscription;
747
+ };
748
+ /**
749
+ * @private
750
+ *
751
+ * Private methods and variables used in the core internals, but as a user
752
+ * of Liveblocks, NEVER USE ANY OF THESE DIRECTLY, because bad things
753
+ * will probably happen if you do.
754
+ */
755
+ declare type PrivateRoomContextApi = {
756
+ useCommentsErrorListener<M extends BaseMetadata>(callback: (err: CommentsError<M>) => void): void;
757
+ };
758
+ declare type RoomContextBundle<P extends JsonObject, S extends LsonObject, U extends BaseUserMeta, E extends Json, M extends BaseMetadata> = Resolve<RoomContextBundleCommon<P, S, U, E, M> & SharedContextBundle<U>["classic"] & {
759
+ /**
760
+ * Extract arbitrary data from the Liveblocks Storage state, using an
761
+ * arbitrary selector function.
762
+ *
763
+ * The selector function will get re-evaluated any time something changes in
764
+ * Storage. The value returned by your selector function will also be the
765
+ * value returned by the hook.
766
+ *
767
+ * The `root` value that gets passed to your selector function is
768
+ * a immutable/readonly version of your Liveblocks storage root.
769
+ *
770
+ * The component that uses this hook will automatically re-render if the
771
+ * returned value changes.
772
+ *
773
+ * By default `useStorage()` uses strict `===` to check for equality. Take
774
+ * extra care when returning a computed object or list, for example when you
775
+ * return the result of a .map() or .filter() call from the selector. In
776
+ * those cases, you'll probably want to use a `shallow` comparison check.
777
+ */
778
+ useStorage<T>(selector: (root: ToImmutable<S>) => T, isEqual?: (prev: T | null, curr: T | null) => boolean): T | null;
779
+ /**
780
+ * Gets the current user once it is connected to the room.
781
+ *
782
+ * @example
783
+ * const me = useSelf();
784
+ * const { x, y } = me.presence.cursor;
785
+ */
786
+ useSelf(): User<P, U> | null;
787
+ /**
788
+ * Extract arbitrary data based on the current user.
789
+ *
790
+ * The selector function will get re-evaluated any time your presence data
791
+ * changes.
792
+ *
793
+ * The component that uses this hook will automatically re-render if your
794
+ * selector function returns a different value from its previous run.
795
+ *
796
+ * By default `useSelf()` uses strict `===` to check for equality. Take extra
797
+ * care when returning a computed object or list, for example when you return
798
+ * the result of a .map() or .filter() call from the selector. In those
799
+ * cases, you'll probably want to use a `shallow` comparison check.
800
+ *
801
+ * Will return `null` while Liveblocks isn't connected to a room yet.
802
+ *
803
+ * @example
804
+ * const cursor = useSelf(me => me.presence.cursor);
805
+ * if (cursor !== null) {
806
+ * const { x, y } = cursor;
807
+ * }
808
+ *
809
+ */
810
+ useSelf<T>(selector: (me: User<P, U>) => T, isEqual?: (prev: T, curr: T) => boolean): T | null;
811
+ /**
812
+ * Returns the threads within the current room.
813
+ *
814
+ * @example
815
+ * const { threads, error, isLoading } = useThreads();
816
+ */
817
+ useThreads(options?: UseThreadsOptions<M>): ThreadsState<M>;
818
+ /**
819
+ * @beta
820
+ *
821
+ * Returns the user's notification settings for the current room
822
+ * and a function to update them.
823
+ *
824
+ * @example
825
+ * const [{ settings }, updateSettings] = useRoomNotificationSettings();
826
+ */
827
+ useRoomNotificationSettings(): [
828
+ RoomNotificationSettingsState,
829
+ (settings: Partial<RoomNotificationSettings>) => void
830
+ ];
831
+ suspense: Resolve<RoomContextBundleCommon<P, S, U, E, M> & SharedContextBundle<U>["suspense"] & {
832
+ /**
833
+ * Extract arbitrary data from the Liveblocks Storage state, using an
834
+ * arbitrary selector function.
835
+ *
836
+ * The selector function will get re-evaluated any time something changes in
837
+ * Storage. The value returned by your selector function will also be the
838
+ * value returned by the hook.
839
+ *
840
+ * The `root` value that gets passed to your selector function is
841
+ * a immutable/readonly version of your Liveblocks storage root.
842
+ *
843
+ * The component that uses this hook will automatically re-render if the
844
+ * returned value changes.
845
+ *
846
+ * By default `useStorage()` uses strict `===` to check for equality. Take
847
+ * extra care when returning a computed object or list, for example when you
848
+ * return the result of a .map() or .filter() call from the selector. In
849
+ * those cases, you'll probably want to use a `shallow` comparison check.
850
+ */
851
+ useStorage<T>(selector: (root: ToImmutable<S>) => T, isEqual?: (prev: T, curr: T) => boolean): T;
852
+ /**
853
+ * Gets the current user once it is connected to the room.
854
+ *
855
+ * @example
856
+ * const me = useSelf();
857
+ * const { x, y } = me.presence.cursor;
858
+ */
859
+ useSelf(): User<P, U>;
860
+ /**
861
+ * Extract arbitrary data based on the current user.
862
+ *
863
+ * The selector function will get re-evaluated any time your presence data
864
+ * changes.
865
+ *
866
+ * The component that uses this hook will automatically re-render if your
867
+ * selector function returns a different value from its previous run.
868
+ *
869
+ * By default `useSelf()` uses strict `===` to check for equality. Take extra
870
+ * care when returning a computed object or list, for example when you return
871
+ * the result of a .map() or .filter() call from the selector. In those
872
+ * cases, you'll probably want to use a `shallow` comparison check.
873
+ *
874
+ * Will return `null` while Liveblocks isn't connected to a room yet.
875
+ *
876
+ * @example
877
+ * const cursor = useSelf(me => me.presence.cursor);
878
+ * if (cursor !== null) {
879
+ * const { x, y } = cursor;
880
+ * }
881
+ *
882
+ */
883
+ useSelf<T>(selector: (me: User<P, U>) => T, isEqual?: (prev: T, curr: T) => boolean): T;
884
+ /**
885
+ * Returns the threads within the current room.
886
+ *
887
+ * @example
888
+ * const { threads } = useThreads();
889
+ */
890
+ useThreads(options?: UseThreadsOptions<M>): ThreadsStateSuccess<M>;
891
+ /**
892
+ * @beta
893
+ *
894
+ * Returns the user's notification settings for the current room
895
+ * and a function to update them.
896
+ *
897
+ * @example
898
+ * const [{ settings }, updateSettings] = useRoomNotificationSettings();
899
+ */
900
+ useRoomNotificationSettings(): [
901
+ RoomNotificationSettingsStateSuccess,
902
+ (settings: Partial<RoomNotificationSettings>) => void
903
+ ];
904
+ }>;
905
+ } & PrivateRoomContextApi>;
906
+ /**
907
+ * Properties that are the same in LiveblocksContext and LiveblocksContext["suspense"].
908
+ */
909
+ declare type LiveblocksContextBundleCommon<M extends BaseMetadata> = {
910
+ /**
911
+ * Makes Liveblocks features outside of rooms (e.g. Notifications) available
912
+ * in the component hierarchy below.
913
+ */
914
+ LiveblocksProvider(props: PropsWithChildren): JSX.Element;
915
+ /**
916
+ * @beta
917
+ *
918
+ * Returns a function that marks an inbox notification as read.
919
+ *
920
+ * @example
921
+ * const markInboxNotificationAsRead = useMarkInboxNotificationAsRead();
922
+ * markInboxNotificationAsRead("in_xxx");
923
+ */
924
+ useMarkInboxNotificationAsRead(): (inboxNotificationId: string) => void;
925
+ /**
926
+ * @beta
927
+ *
928
+ * Returns a function that marks all inbox notifications as read.
929
+ *
930
+ * @example
931
+ * const markAllInboxNotificationsAsRead = useMarkAllInboxNotificationsAsRead();
932
+ * markAllInboxNotificationsAsRead();
933
+ */
934
+ useMarkAllInboxNotificationsAsRead(): () => void;
935
+ /**
936
+ * @beta
937
+ *
938
+ * Returns the thread associated with a `"thread"` inbox notification.
939
+ *
940
+ * @example
941
+ * const thread = useInboxNotificationThread("in_xxx");
942
+ */
943
+ useInboxNotificationThread(inboxNotificationId: string): ThreadData<M>;
944
+ };
945
+ declare type LiveblocksContextBundle<U extends BaseUserMeta, M extends BaseMetadata> = Resolve<LiveblocksContextBundleCommon<M> & SharedContextBundle<U>["classic"] & {
946
+ /**
947
+ * @beta
948
+ *
949
+ * Returns the inbox notifications for the current user.
950
+ *
951
+ * @example
952
+ * const { inboxNotifications, error, isLoading } = useInboxNotifications();
953
+ */
954
+ useInboxNotifications(): InboxNotificationsState;
955
+ /**
956
+ * @beta
957
+ *
958
+ * Returns the number of unread inbox notifications for the current user.
959
+ *
960
+ * @example
961
+ * const { count, error, isLoading } = useUnreadInboxNotificationsCount();
962
+ */
963
+ useUnreadInboxNotificationsCount(): UnreadInboxNotificationsCountState;
964
+ suspense: Resolve<LiveblocksContextBundleCommon<M> & SharedContextBundle<U>["suspense"] & {
965
+ /**
966
+ * @beta
967
+ *
968
+ * Returns the inbox notifications for the current user.
969
+ *
970
+ * @example
971
+ * const { inboxNotifications } = useInboxNotifications();
972
+ */
973
+ useInboxNotifications(): InboxNotificationsStateSuccess;
974
+ /**
975
+ * @beta
976
+ *
977
+ * Returns the number of unread inbox notifications for the current user.
978
+ *
979
+ * @example
980
+ * const { count } = useUnreadInboxNotificationsCount();
981
+ */
982
+ useUnreadInboxNotificationsCount(): UnreadInboxNotificationsCountStateSuccess;
983
+ }>;
984
+ }>;
985
+
986
+ declare const ClientContext: React__default.Context<OpaqueClient | null>;
987
+ /**
988
+ * Obtains a reference to the current Liveblocks client.
989
+ */
990
+ declare function useClient<U extends BaseUserMeta>(): Client<U>;
991
+ declare function LiveblocksProvider<U extends BaseUserMeta = DU>(props: PropsWithChildren<ClientOptions<U>>): React__default.JSX.Element;
992
+ declare function createLiveblocksContext<U extends BaseUserMeta = DU, M extends BaseMetadata$1 = DM>(client: OpaqueClient): LiveblocksContextBundle<U, M>;
993
+ declare function useInboxNotifications(): InboxNotificationsState;
994
+ declare function useInboxNotificationsSuspense(): InboxNotificationsStateSuccess;
995
+ declare function useMarkAllInboxNotificationsAsRead(): () => void;
996
+ declare function useMarkInboxNotificationAsRead(): (inboxNotificationId: string) => void;
997
+ declare function useUnreadInboxNotificationsCount(): UnreadInboxNotificationsCountState;
998
+ declare function useUnreadInboxNotificationsCountSuspense(): UnreadInboxNotificationsCountStateSuccess;
999
+ declare function useRoomInfo(roomId: string): RoomInfoState;
1000
+ declare function useRoomInfoSuspense(roomId: string): RoomInfoStateSuccess;
1001
+ declare const __1: LiveblocksContextBundle<DU, DM>["useInboxNotificationThread"];
1002
+ declare const __2: LiveblocksContextBundle<DU, DM>["useUser"];
1003
+ declare const __3: LiveblocksContextBundle<DU, DM>["suspense"]["useUser"];
1004
+
1005
+ declare const RoomContext: React$1.Context<OpaqueRoom | null>;
1006
+ declare function useStatus(): Status;
1007
+ declare function useBatch<T>(): (callback: () => T) => T;
1008
+ declare function useLostConnectionListener(callback: (event: LostConnectionEvent) => void): void;
1009
+ declare function useErrorListener(callback: (err: LiveblocksError) => void): void;
1010
+ declare function useHistory(): History;
1011
+ declare function useUndo(): () => void;
1012
+ declare function useRedo(): () => void;
1013
+ declare function useCanUndo(): boolean;
1014
+ declare function useCanRedo(): boolean;
1015
+ declare function useOthersConnectionIds(): readonly number[];
1016
+ declare function useCommentsErrorListener<M extends BaseMetadata$1>(callback: (error: CommentsError<M>) => void): void;
1017
+ declare function useCreateComment(): (options: CreateCommentOptions) => CommentData;
1018
+ declare function useEditComment(): (options: EditCommentOptions) => void;
1019
+ declare function useDeleteComment(): ({ threadId, commentId }: DeleteCommentOptions) => void;
1020
+ declare function useRemoveReaction(): ({ threadId, commentId, emoji }: CommentReactionOptions) => void;
1021
+ declare function useMarkThreadAsRead(): (threadId: string) => void;
1022
+ declare function useThreadSubscription(threadId: string): ThreadSubscription;
1023
+ declare function useRoomNotificationSettings(): [
1024
+ RoomNotificationSettingsState,
1025
+ (settings: Partial<RoomNotificationSettings$1>) => void
1026
+ ];
1027
+ declare function useUpdateRoomNotificationSettings(): (settings: Partial<RoomNotificationSettings$1>) => void;
1028
+ declare function useOthersConnectionIdsSuspense(): readonly number[];
1029
+ declare function createRoomContext<P extends JsonObject = DP, S extends LsonObject = DS, U extends BaseUserMeta = DU, E extends Json = DE, M extends BaseMetadata$1 = DM>(client: OpaqueClient): RoomContextBundle<P, S, U, E, M>;
1030
+ declare type DefaultRoomContextBundle = RoomContextBundle<DP, DS, DU, DE, DM>;
1031
+ declare const _RoomProvider: DefaultRoomContextBundle["RoomProvider"];
1032
+ declare const _useBroadcastEvent: DefaultRoomContextBundle["useBroadcastEvent"];
1033
+ declare const _useOthersListener: DefaultRoomContextBundle["useOthersListener"];
1034
+ declare const _useRoom: DefaultRoomContextBundle["useRoom"];
1035
+ declare const _useAddReaction: DefaultRoomContextBundle["useAddReaction"];
1036
+ declare const _useMutation: DefaultRoomContextBundle["useMutation"];
1037
+ declare const _useCreateThread: DefaultRoomContextBundle["useCreateThread"];
1038
+ declare const _useEditThreadMetadata: DefaultRoomContextBundle["useEditThreadMetadata"];
1039
+ declare const _useEventListener: DefaultRoomContextBundle["useEventListener"];
1040
+ declare const _useMyPresence: DefaultRoomContextBundle["useMyPresence"];
1041
+ declare const _useOthersMapped: DefaultRoomContextBundle["useOthersMapped"];
1042
+ declare const _useOthersMappedSuspense: DefaultRoomContextBundle["suspense"]["useOthersMapped"];
1043
+ declare const _useThreads: DefaultRoomContextBundle["useThreads"];
1044
+ declare const _useThreadsSuspense: DefaultRoomContextBundle["suspense"]["useThreads"];
1045
+ declare const _useOther: DefaultRoomContextBundle["useOther"];
1046
+ declare const _useOthers: DefaultRoomContextBundle["useOthers"];
1047
+ declare const _useOtherSuspense: DefaultRoomContextBundle["suspense"]["useOther"];
1048
+ declare const _useOthersSuspense: DefaultRoomContextBundle["suspense"]["useOthers"];
1049
+ declare const _useStorage: DefaultRoomContextBundle["useStorage"];
1050
+ declare const _useStorageSuspense: DefaultRoomContextBundle["suspense"]["useStorage"];
1051
+ declare const _useSelf: DefaultRoomContextBundle["useSelf"];
1052
+ declare const _useSelfSuspense: DefaultRoomContextBundle["suspense"]["useSelf"];
1053
+ declare const _useStorageRoot: DefaultRoomContextBundle["useStorageRoot"];
1054
+ declare const _useUpdateMyPresence: DefaultRoomContextBundle["useUpdateMyPresence"];
1055
+
1056
+ export { __2 as $, useRemoveReaction as A, _useRoom as B, ClientSideSuspense as C, useRoomNotificationSettings as D, useStatus as E, _useStorageRoot as F, useThreadSubscription as G, useUndo as H, _useUpdateMyPresence as I, useUpdateRoomNotificationSettings as J, useCommentsErrorListener as K, LiveblocksProvider as L, type MutationContext as M, CreateThreadError as N, _useOther as O, _useOthers as P, useOthersConnectionIds as Q, RoomContext as R, _useOthersMapped as S, _useSelf as T, type UseThreadsOptions as U, _useStorage as V, _useThreads as W, useInboxNotifications as X, useRoomInfo as Y, useUnreadInboxNotificationsCount as Z, __1 as _, ClientContext as a, _useOtherSuspense as a0, _useOthersSuspense as a1, useOthersConnectionIdsSuspense as a2, _useOthersMappedSuspense as a3, _useSelfSuspense as a4, _useStorageSuspense as a5, _useThreadsSuspense as a6, useInboxNotificationsSuspense as a7, useRoomInfoSuspense as a8, useUnreadInboxNotificationsCountSuspense as a9, __3 as aa, useMarkAllInboxNotificationsAsRead as b, createLiveblocksContext as c, useMarkInboxNotificationAsRead as d, createRoomContext as e, _RoomProvider as f, _useAddReaction as g, useBatch as h, _useBroadcastEvent as i, useCanRedo as j, useCanUndo as k, useCreateComment as l, _useCreateThread as m, useDeleteComment as n, useEditComment as o, _useEditThreadMetadata as p, useErrorListener as q, _useEventListener as r, useHistory as s, useLostConnectionListener as t, useClient as u, useMarkThreadAsRead as v, _useMutation as w, _useMyPresence as x, _useOthersListener as y, useRedo as z };