@liveblocks/react 0.16.4 → 0.16.5
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.
- package/index.d.ts +39 -190
- package/index.js +240 -379
- package/index.mjs +214 -491
- package/package.json +10 -9
package/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
import { Client
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Client } from '@liveblocks/client';
|
|
3
3
|
export { Json, JsonObject } from '@liveblocks/client';
|
|
4
|
-
import
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import * as _liveblocks_client_shared from '@liveblocks/client/shared';
|
|
5
6
|
|
|
6
7
|
declare type LiveblocksProviderProps = {
|
|
7
8
|
children: React.ReactNode;
|
|
@@ -17,197 +18,45 @@ declare function LiveblocksProvider(props: LiveblocksProviderProps): JSX.Element
|
|
|
17
18
|
*/
|
|
18
19
|
declare function useClient(): Client;
|
|
19
20
|
|
|
20
|
-
declare
|
|
21
|
-
/**
|
|
22
|
-
* The id of the room you want to connect to
|
|
23
|
-
*/
|
|
21
|
+
declare const RoomProvider: <TStorage>(props: {
|
|
24
22
|
id: string;
|
|
25
23
|
children: React.ReactNode;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
declare
|
|
33
|
-
/**
|
|
34
|
-
* Returns the Room of the nearest RoomProvider above in the React component
|
|
35
|
-
* tree.
|
|
36
|
-
*/
|
|
37
|
-
declare function useRoom(): Room;
|
|
38
|
-
/**
|
|
39
|
-
* Returns the presence of the current user of the current room, and a function to update it.
|
|
40
|
-
* It is different from the setState function returned by the useState hook from React.
|
|
41
|
-
* You don't need to pass the full presence object to update it.
|
|
42
|
-
*
|
|
43
|
-
* @example
|
|
44
|
-
* import { useMyPresence } from "@liveblocks/react";
|
|
45
|
-
*
|
|
46
|
-
* const [myPresence, updateMyPresence] = useMyPresence();
|
|
47
|
-
* updateMyPresence({ x: 0 });
|
|
48
|
-
* updateMyPresence({ y: 0 });
|
|
49
|
-
*
|
|
50
|
-
* // At the next render, "myPresence" will be equal to "{ x: 0, y: 0 }"
|
|
51
|
-
*/
|
|
52
|
-
declare function useMyPresence<T extends Presence>(): [
|
|
53
|
-
T,
|
|
54
|
-
(overrides: Partial<T>, options?: {
|
|
55
|
-
addToHistory: boolean;
|
|
56
|
-
}) => void
|
|
57
|
-
];
|
|
58
|
-
/**
|
|
59
|
-
* useUpdateMyPresence is similar to useMyPresence but it only returns the function to update the current user presence.
|
|
60
|
-
* 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.
|
|
61
|
-
*
|
|
62
|
-
* @example
|
|
63
|
-
* import { useUpdateMyPresence } from "@liveblocks/react";
|
|
64
|
-
*
|
|
65
|
-
* const updateMyPresence = useUpdateMyPresence();
|
|
66
|
-
* updateMyPresence({ x: 0 });
|
|
67
|
-
* updateMyPresence({ y: 0 });
|
|
68
|
-
*
|
|
69
|
-
* // At the next render, the presence of the current user will be equal to "{ x: 0, y: 0 }"
|
|
70
|
-
*/
|
|
71
|
-
declare function useUpdateMyPresence<T extends Presence>(): (overrides: Partial<T>, options?: {
|
|
24
|
+
initialPresence?: Record<string, unknown> | ((roomId: string) => Record<string, unknown>) | undefined;
|
|
25
|
+
initialStorage?: TStorage | ((roomId: string) => TStorage) | undefined;
|
|
26
|
+
defaultPresence?: (() => Record<string, unknown>) | undefined;
|
|
27
|
+
defaultStorageRoot?: TStorage | undefined;
|
|
28
|
+
}) => JSX.Element;
|
|
29
|
+
declare const useRoom: () => _liveblocks_client_shared.R;
|
|
30
|
+
declare const useMyPresence: <T extends Record<string, unknown>>() => [T, (overrides: Partial<T>, options?: {
|
|
72
31
|
addToHistory: boolean;
|
|
73
|
-
}) => void;
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
*
|
|
82
|
-
* // Example to map all cursors in jsx
|
|
83
|
-
* {
|
|
84
|
-
* others.map(({ connectionId, presence }) => {
|
|
85
|
-
* if(presence == null || presence.cursor == null) {
|
|
86
|
-
* return null;
|
|
87
|
-
* }
|
|
88
|
-
* return <Cursor key={connectionId} cursor={presence.cursor} />
|
|
89
|
-
* })
|
|
90
|
-
* }
|
|
91
|
-
*/
|
|
92
|
-
declare function useOthers<T extends Presence>(): Others<T>;
|
|
93
|
-
/**
|
|
94
|
-
* Returns a callback that lets you broadcast custom events to other users in the room
|
|
95
|
-
*
|
|
96
|
-
* @example
|
|
97
|
-
* import { useBroadcastEvent } from "@liveblocks/react";
|
|
98
|
-
*
|
|
99
|
-
* const broadcast = useBroadcastEvent();
|
|
100
|
-
*
|
|
101
|
-
* broadcast({ type: "CUSTOM_EVENT", data: { x: 0, y: 0 } });
|
|
102
|
-
*/
|
|
103
|
-
declare function useBroadcastEvent(): (event: any, options?: BroadcastOptions) => void;
|
|
104
|
-
/**
|
|
105
|
-
* useErrorListener is a react hook that lets you react to potential room connection errors.
|
|
106
|
-
*
|
|
107
|
-
* @example
|
|
108
|
-
* import { useErrorListener } from "@liveblocks/react";
|
|
109
|
-
*
|
|
110
|
-
* useErrorListener(er => {
|
|
111
|
-
* console.error(er);
|
|
112
|
-
* })
|
|
113
|
-
*/
|
|
114
|
-
declare function useErrorListener(callback: (err: Error) => void): void;
|
|
115
|
-
/**
|
|
116
|
-
* useEventListener is a react hook that lets you react to event broadcasted by other users in the room.
|
|
117
|
-
*
|
|
118
|
-
* @example
|
|
119
|
-
* import { useEventListener } from "@liveblocks/react";
|
|
120
|
-
*
|
|
121
|
-
* useEventListener(({ connectionId, event }) => {
|
|
122
|
-
* if (event.type === "CUSTOM_EVENT") {
|
|
123
|
-
* // Do something
|
|
124
|
-
* }
|
|
125
|
-
* });
|
|
126
|
-
*/
|
|
127
|
-
declare function useEventListener<TEvent extends Json>(callback: ({ connectionId, event, }: {
|
|
32
|
+
} | undefined) => void];
|
|
33
|
+
declare const useUpdateMyPresence: <T extends Record<string, unknown>>() => (overrides: Partial<T>, options?: {
|
|
34
|
+
addToHistory: boolean;
|
|
35
|
+
} | undefined) => void;
|
|
36
|
+
declare const useOthers: <T extends Record<string, unknown>>() => _liveblocks_client_shared.O<T>;
|
|
37
|
+
declare const useBroadcastEvent: () => (event: any, options?: _liveblocks_client_shared.B | undefined) => void;
|
|
38
|
+
declare const useErrorListener: (callback: (err: Error) => void) => void;
|
|
39
|
+
declare const useEventListener: <TEvent extends _liveblocks_client_shared.J>(callback: ({ connectionId, event, }: {
|
|
128
40
|
connectionId: number;
|
|
129
41
|
event: TEvent;
|
|
130
|
-
}) => void)
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
*
|
|
150
|
-
* @example
|
|
151
|
-
* const shapesById = useMap<string, Shape>("shapes");
|
|
152
|
-
*/
|
|
153
|
-
declare function useMap<TKey extends string, TValue extends Lson>(key: string): LiveMap<TKey, TValue> | null;
|
|
154
|
-
/**
|
|
155
|
-
* @deprecated We no longer recommend initializing the
|
|
156
|
-
* entries from the useMap() hook. For details, see https://bit.ly/3Niy5aP.
|
|
157
|
-
*/
|
|
158
|
-
declare function useMap<TKey extends string, TValue extends Lson>(key: string, entries: readonly (readonly [TKey, TValue])[] | null): LiveMap<TKey, TValue> | null;
|
|
159
|
-
/**
|
|
160
|
-
* Returns the LiveList associated with the provided key.
|
|
161
|
-
* The hook triggers a re-render if the LiveList is updated, however it does not triggers a re-render if a nested CRDT is updated.
|
|
162
|
-
*
|
|
163
|
-
* @param key The storage key associated with the LiveList
|
|
164
|
-
* @returns null while the storage is loading, otherwise, returns the LiveList associated to the storage
|
|
165
|
-
*
|
|
166
|
-
* @example
|
|
167
|
-
* const animals = useList("animals"); // e.g. [] or ["🦁", "🐍", "🦍"]
|
|
168
|
-
*/
|
|
169
|
-
declare function useList<TValue extends Lson>(key: string): LiveList<TValue> | null;
|
|
170
|
-
/**
|
|
171
|
-
* @deprecated We no longer recommend initializing the
|
|
172
|
-
* items from the useList() hook. For details, see https://bit.ly/3Niy5aP.
|
|
173
|
-
*/
|
|
174
|
-
declare function useList<TValue extends Lson>(key: string, items: TValue[]): LiveList<TValue> | null;
|
|
175
|
-
/**
|
|
176
|
-
* Returns the LiveObject associated with the provided key.
|
|
177
|
-
* The hook triggers a re-render if the LiveObject is updated, however it does not triggers a re-render if a nested CRDT is updated.
|
|
178
|
-
*
|
|
179
|
-
* @param key The storage key associated with the LiveObject
|
|
180
|
-
* @returns null while the storage is loading, otherwise, returns the LveObject associated to the storage
|
|
181
|
-
*
|
|
182
|
-
* @example
|
|
183
|
-
* const object = useObject("obj");
|
|
184
|
-
*/
|
|
185
|
-
declare function useObject<TData extends LsonObject>(key: string): LiveObject<TData> | null;
|
|
186
|
-
/**
|
|
187
|
-
* @deprecated We no longer recommend initializing the fields from the
|
|
188
|
-
* useObject() hook. For details, see https://bit.ly/3Niy5aP.
|
|
189
|
-
*/
|
|
190
|
-
declare function useObject<TData extends LsonObject>(key: string, initialData: TData): LiveObject<TData> | null;
|
|
191
|
-
/**
|
|
192
|
-
* Returns a function that undoes the last operation executed by the current client.
|
|
193
|
-
* It does not impact operations made by other clients.
|
|
194
|
-
*/
|
|
195
|
-
declare function useUndo(): () => void;
|
|
196
|
-
/**
|
|
197
|
-
* Returns a function that redoes the last operation executed by the current client.
|
|
198
|
-
* It does not impact operations made by other clients.
|
|
199
|
-
*/
|
|
200
|
-
declare function useRedo(): () => void;
|
|
201
|
-
/**
|
|
202
|
-
* Returns a function that batches modifications made during the given function.
|
|
203
|
-
* All the modifications are sent to other clients in a single message.
|
|
204
|
-
* All the modifications are merged in a single history item (undo/redo).
|
|
205
|
-
* All the subscribers are called only after the batch is over.
|
|
206
|
-
*/
|
|
207
|
-
declare function useBatch(): (callback: () => void) => void;
|
|
208
|
-
/**
|
|
209
|
-
* Returns the room.history
|
|
210
|
-
*/
|
|
211
|
-
declare function useHistory(): History;
|
|
42
|
+
}) => void) => void;
|
|
43
|
+
declare const useSelf: <TPresence extends Record<string, unknown> = Record<string, unknown>>() => _liveblocks_client_shared.U<TPresence> | null;
|
|
44
|
+
declare const useStorage: <TStorage extends Record<string, any>>() => [root: _liveblocks_client_shared.L<TStorage> | null];
|
|
45
|
+
declare const useMap: {
|
|
46
|
+
<TKey extends string, TValue extends _liveblocks_client_shared.e>(key: string): _liveblocks_client_shared.b<TKey, TValue> | null;
|
|
47
|
+
<TKey_1 extends string, TValue_1 extends _liveblocks_client_shared.e>(key: string, entries: readonly (readonly [TKey_1, TValue_1])[] | null): _liveblocks_client_shared.b<TKey_1, TValue_1> | null;
|
|
48
|
+
};
|
|
49
|
+
declare const useList: {
|
|
50
|
+
<TValue extends _liveblocks_client_shared.e>(key: string): _liveblocks_client_shared.c<TValue> | null;
|
|
51
|
+
<TValue_1 extends _liveblocks_client_shared.e>(key: string, items: TValue_1[]): _liveblocks_client_shared.c<TValue_1> | null;
|
|
52
|
+
};
|
|
53
|
+
declare const useObject: {
|
|
54
|
+
<TData extends _liveblocks_client_shared.f>(key: string): _liveblocks_client_shared.L<TData> | null;
|
|
55
|
+
<TData_1 extends _liveblocks_client_shared.f>(key: string, initialData: TData_1): _liveblocks_client_shared.L<TData_1> | null;
|
|
56
|
+
};
|
|
57
|
+
declare const useUndo: () => () => void;
|
|
58
|
+
declare const useRedo: () => () => void;
|
|
59
|
+
declare const useBatch: () => (callback: () => void) => void;
|
|
60
|
+
declare const useHistory: () => _liveblocks_client_shared.H;
|
|
212
61
|
|
|
213
62
|
export { LiveblocksProvider, RoomProvider, useBatch, useBroadcastEvent, useClient, useErrorListener, useEventListener, useHistory, useList, useMap, useMyPresence, useObject, useOthers, useRedo, useRoom, useSelf, useStorage, useUndo, useUpdateMyPresence };
|