@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.
Files changed (4) hide show
  1. package/index.d.ts +39 -190
  2. package/index.js +240 -379
  3. package/index.mjs +214 -491
  4. package/package.json +10 -9
package/index.mjs CHANGED
@@ -1,507 +1,230 @@
1
- import * as React from 'react';
2
- import { useReducer } from 'react';
3
- import { LiveMap, LiveList, LiveObject } from '@liveblocks/client';
4
- import { deprecateIf } from '@liveblocks/client/internal';
1
+ import * as React from "react";
2
+
3
+ import { useReducer } from "react";
4
+
5
+ import { LiveMap, LiveList, LiveObject } from "@liveblocks/client";
6
+
7
+ import { deprecateIf } from "@liveblocks/client/internal";
5
8
 
6
9
  const ClientContext = React.createContext(null);
7
- /**
8
- * Makes the Liveblocks client available in the component hierarchy below.
9
- */
10
+
10
11
  function LiveblocksProvider(props) {
11
- return (React.createElement(ClientContext.Provider, { value: props.client }, props.children));
12
- }
13
- /**
14
- * Returns the Client of the nearest LiveblocksProvider above in the React
15
- * component tree.
16
- */
17
- function useClient() {
18
- const client = React.useContext(ClientContext);
19
- if (client == null) {
20
- throw new Error("LiveblocksProvider is missing from the react tree");
21
- }
22
- return client;
12
+ return React.createElement(ClientContext.Provider, {
13
+ value: props.client
14
+ }, props.children);
23
15
  }
24
16
 
25
- /*! *****************************************************************************
26
- Copyright (c) Microsoft Corporation.
27
-
28
- Permission to use, copy, modify, and/or distribute this software for any
29
- purpose with or without fee is hereby granted.
30
-
31
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
32
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
33
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
34
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
35
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
36
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
37
- PERFORMANCE OF THIS SOFTWARE.
38
- ***************************************************************************** */
39
-
40
- function __awaiter(thisArg, _arguments, P, generator) {
41
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
42
- return new (P || (P = Promise))(function (resolve, reject) {
43
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
44
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
45
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
46
- step((generator = generator.apply(thisArg, _arguments || [])).next());
47
- });
17
+ function useClient() {
18
+ const client = React.useContext(ClientContext);
19
+ if (null == client) throw new Error("LiveblocksProvider is missing from the react tree");
20
+ return client;
21
+ }
22
+
23
+ function __awaiter(thisArg, _arguments, P, generator) {
24
+ return new (P || (P = Promise))((function(resolve, reject) {
25
+ function fulfilled(value) {
26
+ try {
27
+ step(generator.next(value));
28
+ } catch (e) {
29
+ reject(e);
30
+ }
31
+ }
32
+ function rejected(value) {
33
+ try {
34
+ step(generator.throw(value));
35
+ } catch (e) {
36
+ reject(e);
37
+ }
38
+ }
39
+ function step(result) {
40
+ var value;
41
+ result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P((function(resolve) {
42
+ resolve(value);
43
+ }))).then(fulfilled, rejected);
44
+ }
45
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
46
+ }));
48
47
  }
49
48
 
50
- /**
51
- * Trigger a re-render programmatically, without changing the component's
52
- * state.
53
- *
54
- * Usage:
55
- *
56
- * const rerender = useRerender();
57
- * return (
58
- * <button onClick={rerender}>
59
- * {Math.random()}
60
- * </button>
61
- * )
62
- *
63
- */
64
49
  function useRerender() {
65
- const [, update] = useReducer(
66
- // This implementation works by incrementing a hidden counter value that is
67
- // never consumed. Simply incrementing the counter changes the component's
68
- // state and, thus, trigger a re-render.
69
- (x) => x + 1, 0);
70
- return update;
71
- }
72
-
73
- const RoomContext = React.createContext(null);
74
- /**
75
- * Makes a Room available in the component hierarchy below.
76
- * When this component is unmounted, the current user leave the room.
77
- * That means that you can't have 2 RoomProvider with the same room id in your react tree.
78
- */
79
- function RoomProvider(props) {
80
- const { id: roomId, initialPresence, initialStorage, defaultPresence, // Will get removed in 0.18
81
- defaultStorageRoot, } = props;
82
- if (process.env.NODE_ENV !== "production") {
83
- if (roomId == null) {
84
- throw new Error("RoomProvider id property is required. For more information: https://liveblocks.io/docs/errors/liveblocks-react/RoomProvider-id-property-is-required");
85
- }
86
- if (typeof roomId !== "string") {
87
- throw new Error("RoomProvider id property should be a string.");
88
- }
89
- }
90
- deprecateIf(defaultPresence, "RoomProvider's `defaultPresence` prop will be removed in @liveblocks/react 0.18. Please use `initialPresence` instead. For more info, see https://bit.ly/3Niy5aP", "defaultPresence");
91
- deprecateIf(defaultStorageRoot, "RoomProvider's `defaultStorageRoot` prop will be removed in @liveblocks/react 0.18. Please use `initialStorage` instead. For more info, see https://bit.ly/3Niy5aP", "defaultStorageRoot");
92
- const client = useClient();
93
- const [room, setRoom] = React.useState(() => client.enter(roomId, {
94
- initialPresence,
95
- initialStorage,
96
- defaultPresence,
97
- defaultStorageRoot,
98
- DO_NOT_USE_withoutConnecting: typeof window === "undefined",
50
+ const [, update] = useReducer((x => x + 1), 0);
51
+ return update;
52
+ }
53
+
54
+ const {RoomProvider: RoomProvider, useRoom: useRoom, useMyPresence: useMyPresence, useUpdateMyPresence: useUpdateMyPresence, useOthers: useOthers, useBroadcastEvent: useBroadcastEvent, useErrorListener: useErrorListener, useEventListener: useEventListener, useSelf: useSelf, useStorage: useStorage, useMap: useMap, useList: useList, useObject: useObject, useUndo: useUndo, useRedo: useRedo, useBatch: useBatch, useHistory: useHistory} = function() {
55
+ const RoomContext = React.createContext(null);
56
+ function useRoom() {
57
+ const room = React.useContext(RoomContext);
58
+ if (null == room) throw new Error("RoomProvider is missing from the react tree");
59
+ return room;
60
+ }
61
+ function useStorage() {
62
+ const room = useRoom(), [root, setState] = React.useState(null);
63
+ return React.useEffect((() => {
64
+ let didCancel = !1;
65
+ return function() {
66
+ __awaiter(this, void 0, void 0, (function*() {
67
+ const storage = yield room.getStorage();
68
+ didCancel || setState(storage.root);
99
69
  }));
100
- React.useEffect(() => {
101
- setRoom(client.enter(roomId, {
102
- initialPresence,
103
- initialStorage,
104
- defaultPresence,
105
- defaultStorageRoot,
106
- DO_NOT_USE_withoutConnecting: typeof window === "undefined",
107
- }));
108
- return () => {
109
- client.leave(roomId);
110
- };
111
- }, [client, roomId]);
112
- return (React.createElement(RoomContext.Provider, { value: room }, props.children));
113
- }
114
- /**
115
- * Returns the Room of the nearest RoomProvider above in the React component
116
- * tree.
117
- */
118
- function useRoom() {
119
- const room = React.useContext(RoomContext);
120
- if (room == null) {
121
- throw new Error("RoomProvider is missing from the react tree");
122
- }
123
- return room;
124
- }
125
- /**
126
- * Returns the presence of the current user of the current room, and a function to update it.
127
- * It is different from the setState function returned by the useState hook from React.
128
- * You don't need to pass the full presence object to update it.
129
- *
130
- * @example
131
- * import { useMyPresence } from "@liveblocks/react";
132
- *
133
- * const [myPresence, updateMyPresence] = useMyPresence();
134
- * updateMyPresence({ x: 0 });
135
- * updateMyPresence({ y: 0 });
136
- *
137
- * // At the next render, "myPresence" will be equal to "{ x: 0, y: 0 }"
138
- */
139
- function useMyPresence() {
140
- const room = useRoom();
141
- const presence = room.getPresence();
142
- const rerender = useRerender();
143
- React.useEffect(() => {
144
- const unsubscribe = room.subscribe("my-presence", rerender);
145
- return () => {
146
- unsubscribe();
147
- };
148
- }, [room]);
149
- const setPresence = React.useCallback((overrides, options) => room.updatePresence(overrides, options), [room]);
150
- return [presence, setPresence];
151
- }
152
- /**
153
- * useUpdateMyPresence is similar to useMyPresence but it only returns the function to update the current user presence.
154
- * 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.
155
- *
156
- * @example
157
- * import { useUpdateMyPresence } from "@liveblocks/react";
158
- *
159
- * const updateMyPresence = useUpdateMyPresence();
160
- * updateMyPresence({ x: 0 });
161
- * updateMyPresence({ y: 0 });
162
- *
163
- * // At the next render, the presence of the current user will be equal to "{ x: 0, y: 0 }"
164
- */
165
- function useUpdateMyPresence() {
166
- const room = useRoom();
167
- return React.useCallback((overrides, options) => {
168
- room.updatePresence(overrides, options);
169
- }, [room]);
170
- }
171
- /**
172
- * Returns an object that lets you get information about all the the users currently connected in the room.
173
- *
174
- * @example
175
- * import { useOthers } from "@liveblocks/react";
176
- *
177
- * const others = useOthers();
178
- *
179
- * // Example to map all cursors in jsx
180
- * {
181
- * others.map(({ connectionId, presence }) => {
182
- * if(presence == null || presence.cursor == null) {
183
- * return null;
184
- * }
185
- * return <Cursor key={connectionId} cursor={presence.cursor} />
186
- * })
187
- * }
188
- */
189
- function useOthers() {
190
- const room = useRoom();
191
- const rerender = useRerender();
192
- React.useEffect(() => {
193
- const unsubscribe = room.subscribe("others", rerender);
194
- return () => {
195
- unsubscribe();
196
- };
197
- }, [room]);
198
- return room.getOthers();
199
- }
200
- /**
201
- * Returns a callback that lets you broadcast custom events to other users in the room
202
- *
203
- * @example
204
- * import { useBroadcastEvent } from "@liveblocks/react";
205
- *
206
- * const broadcast = useBroadcastEvent();
207
- *
208
- * broadcast({ type: "CUSTOM_EVENT", data: { x: 0, y: 0 } });
209
- */
210
- function useBroadcastEvent() {
211
- const room = useRoom();
212
- return React.useCallback((event, options = { shouldQueueEventIfNotReady: false }) => {
213
- room.broadcastEvent(event, options);
214
- }, [room]);
215
- }
216
- /**
217
- * useErrorListener is a react hook that lets you react to potential room connection errors.
218
- *
219
- * @example
220
- * import { useErrorListener } from "@liveblocks/react";
221
- *
222
- * useErrorListener(er => {
223
- * console.error(er);
224
- * })
225
- */
226
- function useErrorListener(callback) {
227
- const room = useRoom();
228
- const savedCallback = React.useRef(callback);
229
- React.useEffect(() => {
230
- savedCallback.current = callback;
231
- });
232
- React.useEffect(() => {
233
- const listener = (e) => savedCallback.current(e);
234
- const unsubscribe = room.subscribe("error", listener);
235
- return () => {
236
- unsubscribe();
237
- };
238
- }, [room]);
239
- }
240
- /**
241
- * useEventListener is a react hook that lets you react to event broadcasted by other users in the room.
242
- *
243
- * @example
244
- * import { useEventListener } from "@liveblocks/react";
245
- *
246
- * useEventListener(({ connectionId, event }) => {
247
- * if (event.type === "CUSTOM_EVENT") {
248
- * // Do something
249
- * }
250
- * });
251
- */
252
- function useEventListener(callback) {
253
- const room = useRoom();
254
- const savedCallback = React.useRef(callback);
255
- React.useEffect(() => {
256
- savedCallback.current = callback;
257
- });
258
- React.useEffect(() => {
259
- const listener = (e) => savedCallback.current(e);
260
- const unsubscribe = room.subscribe("event", listener);
261
- return () => {
262
- unsubscribe();
263
- };
264
- }, [room]);
265
- }
266
- /**
267
- * Gets the current user once it is connected to the room.
268
- *
269
- * @example
270
- * import { useSelf } from "@liveblocks/react";
271
- *
272
- * const user = useSelf();
273
- */
274
- function useSelf() {
275
- const room = useRoom();
276
- const rerender = useRerender();
277
- React.useEffect(() => {
278
- const unsubscribePresence = room.subscribe("my-presence", rerender);
279
- const unsubscribeConnection = room.subscribe("connection", rerender);
280
- return () => {
281
- unsubscribePresence();
282
- unsubscribeConnection();
283
- };
284
- }, [room]);
285
- return room.getSelf();
286
- }
287
- function useStorage() {
288
- const room = useRoom();
289
- const [root, setState] = React.useState(null);
290
- React.useEffect(() => {
291
- let didCancel = false;
292
- function fetchStorage() {
293
- return __awaiter(this, void 0, void 0, function* () {
294
- const storage = yield room.getStorage();
295
- if (!didCancel) {
296
- setState(storage.root);
297
- }
298
- });
299
- }
300
- fetchStorage();
301
- return () => {
302
- didCancel = true;
303
- };
304
- }, [room]);
305
- return [root];
306
- }
307
- function useMap(key, entries) {
308
- deprecateIf(entries, `Support for initializing entries in useMap() directly will be removed in @liveblocks/react 0.18.
309
-
310
- Instead, please initialize this data where you set up your RoomProvider:
311
-
312
- const initialStorage = () => {
313
- ${JSON.stringify(key)}: new LiveMap(...),
314
- ...
70
+ }(), () => {
71
+ didCancel = !0;
72
+ };
73
+ }), [ room ]), [ root ];
74
+ }
75
+ function useHistory() {
76
+ return useRoom().history;
77
+ }
78
+ function useStorageValue(key, initialValue) {
79
+ const room = useRoom(), [root] = useStorage(), rerender = useRerender();
80
+ if (React.useEffect((() => {
81
+ if (null == root) return;
82
+ let liveValue = root.get(key);
83
+ null == liveValue && (liveValue = initialValue, root.set(key, liveValue));
84
+ let unsubscribeCrdt = room.subscribe(liveValue, rerender);
85
+ const unsubscribeRoot = room.subscribe(root, (function() {
86
+ const newCrdt = root.get(key);
87
+ newCrdt !== liveValue && (unsubscribeCrdt(), liveValue = newCrdt, unsubscribeCrdt = room.subscribe(liveValue, rerender),
88
+ rerender());
89
+ }));
90
+ return rerender(), () => {
91
+ unsubscribeRoot(), unsubscribeCrdt();
92
+ };
93
+ }), [ root, room ]), null == root) return {
94
+ status: "loading"
95
+ };
96
+ {
97
+ const value = root.get(key);
98
+ return null == value ? {
99
+ status: "notfound"
100
+ } : {
101
+ status: "ok",
102
+ value: value
103
+ };
104
+ }
105
+ }
106
+ return {
107
+ RoomProvider: function(props) {
108
+ const {id: roomId, initialPresence: initialPresence, initialStorage: initialStorage, defaultPresence: defaultPresence, defaultStorageRoot: defaultStorageRoot} = props;
109
+ if ("production" !== process.env.NODE_ENV) {
110
+ if (null == roomId) throw new Error("RoomProvider id property is required. For more information: https://liveblocks.io/docs/errors/liveblocks-react/RoomProvider-id-property-is-required");
111
+ if ("string" != typeof roomId) throw new Error("RoomProvider id property should be a string.");
112
+ }
113
+ deprecateIf(defaultPresence, "RoomProvider's `defaultPresence` prop will be removed in @liveblocks/react 0.18. Please use `initialPresence` instead. For more info, see https://bit.ly/3Niy5aP", "defaultPresence"),
114
+ deprecateIf(defaultStorageRoot, "RoomProvider's `defaultStorageRoot` prop will be removed in @liveblocks/react 0.18. Please use `initialStorage` instead. For more info, see https://bit.ly/3Niy5aP", "defaultStorageRoot");
115
+ const client = useClient(), [room, setRoom] = React.useState((() => client.enter(roomId, {
116
+ initialPresence: initialPresence,
117
+ initialStorage: initialStorage,
118
+ defaultPresence: defaultPresence,
119
+ defaultStorageRoot: defaultStorageRoot,
120
+ DO_NOT_USE_withoutConnecting: "undefined" == typeof window
121
+ })));
122
+ return React.useEffect((() => (setRoom(client.enter(roomId, {
123
+ initialPresence: initialPresence,
124
+ initialStorage: initialStorage,
125
+ defaultPresence: defaultPresence,
126
+ defaultStorageRoot: defaultStorageRoot,
127
+ DO_NOT_USE_withoutConnecting: "undefined" == typeof window
128
+ })), () => {
129
+ client.leave(roomId);
130
+ })), [ client, roomId ]), React.createElement(RoomContext.Provider, {
131
+ value: room
132
+ }, props.children);
133
+ },
134
+ useBatch: function() {
135
+ return useRoom().batch;
136
+ },
137
+ useBroadcastEvent: function() {
138
+ const room = useRoom();
139
+ return React.useCallback(((event, options = {
140
+ shouldQueueEventIfNotReady: !1
141
+ }) => {
142
+ room.broadcastEvent(event, options);
143
+ }), [ room ]);
144
+ },
145
+ useErrorListener: function(callback) {
146
+ const room = useRoom(), savedCallback = React.useRef(callback);
147
+ React.useEffect((() => {
148
+ savedCallback.current = callback;
149
+ })), React.useEffect((() => {
150
+ const unsubscribe = room.subscribe("error", (e => savedCallback.current(e)));
151
+ return () => {
152
+ unsubscribe();
315
153
  };
316
-
317
- <RoomProvider initialStorage={initialStorage}>
318
- ...
319
- </RoomProvider>
320
-
321
- Please see https://bit.ly/3Niy5aP for details.`);
322
- const value = useCrdt(key, new LiveMap(entries));
323
- // ^^^^^^^^^^^^^^^^^^^^
324
- // NOTE: This param is scheduled for removal in 0.18
325
- if (value.status === "ok") {
326
- return value.value;
327
- }
328
- else {
329
- deprecateIf(value.status === "notfound", `Key ${JSON.stringify(key)} was not found in Storage. Starting with 0.18, useMap() will no longer automatically create this key.
330
-
331
- Instead, please initialize your storage where you set up your RoomProvider:
332
-
333
- import { LiveMap } from "@liveblocks/client";
334
-
335
- const initialStorage = () => {
336
- ${JSON.stringify(key)}: new LiveMap(...),
337
- ...
154
+ }), [ room ]);
155
+ },
156
+ useEventListener: function(callback) {
157
+ const room = useRoom(), savedCallback = React.useRef(callback);
158
+ React.useEffect((() => {
159
+ savedCallback.current = callback;
160
+ })), React.useEffect((() => {
161
+ const unsubscribe = room.subscribe("event", (e => savedCallback.current(e)));
162
+ return () => {
163
+ unsubscribe();
338
164
  };
339
-
340
- <RoomProvider initialStorage={initialStorage}>
341
- ...
342
- </RoomProvider>
343
-
344
- Please see https://bit.ly/3Niy5aP for details.`);
345
- return null;
346
- }
347
- }
348
- function useList(key, items) {
349
- deprecateIf(items, `Support for initializing items in useList() directly will be removed in @liveblocks/react 0.18.
350
-
351
- Instead, please initialize this data where you set up your RoomProvider:
352
-
353
- import { LiveList } from "@liveblocks/client";
354
-
355
- const initialStorage = () => {
356
- ${JSON.stringify(key)}: new LiveList(...),
357
- ...
358
- };
359
-
360
- <RoomProvider initialStorage={initialStorage}>
361
- ...
362
- </RoomProvider>
363
-
364
- Please see https://bit.ly/3Niy5aP for details.`);
365
- const value = useCrdt(key, new LiveList(items));
366
- // ^^^^^^^^^^^^^^^^^^^
367
- // NOTE: This param is scheduled for removal in 0.18
368
- if (value.status === "ok") {
369
- return value.value;
370
- }
371
- else {
372
- deprecateIf(value.status === "notfound", `Key ${JSON.stringify(key)} was not found in Storage. Starting with 0.18, useList() will no longer automatically create this key.
373
-
374
- Instead, please initialize your storage where you set up your RoomProvider:
375
-
376
- import { LiveList } from "@liveblocks/client";
377
-
378
- const initialStorage = () => {
379
- ${JSON.stringify(key)}: new LiveList(...),
380
- ...
165
+ }), [ room ]);
166
+ },
167
+ useHistory: useHistory,
168
+ useList: function(key, items) {
169
+ deprecateIf(items, `Support for initializing items in useList() directly will be removed in @liveblocks/react 0.18.\n\nInstead, please initialize this data where you set up your RoomProvider:\n\n import { LiveList } from "@liveblocks/client";\n\n const initialStorage = () => {\n ${JSON.stringify(key)}: new LiveList(...),\n ...\n };\n\n <RoomProvider initialStorage={initialStorage}>\n ...\n </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.`);
170
+ const value = useStorageValue(key, new LiveList(items));
171
+ return "ok" === value.status ? value.value : (deprecateIf("notfound" === value.status, `Key ${JSON.stringify(key)} was not found in Storage. Starting with 0.18, useList() will no longer automatically create this key.\n\nInstead, please initialize your storage where you set up your RoomProvider:\n\n import { LiveList } from "@liveblocks/client";\n\n const initialStorage = () => {\n ${JSON.stringify(key)}: new LiveList(...),\n ...\n };\n\n <RoomProvider initialStorage={initialStorage}>\n ...\n </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.`),
172
+ null);
173
+ },
174
+ useMap: function(key, entries) {
175
+ deprecateIf(entries, `Support for initializing entries in useMap() directly will be removed in @liveblocks/react 0.18.\n\nInstead, please initialize this data where you set up your RoomProvider:\n\n const initialStorage = () => {\n ${JSON.stringify(key)}: new LiveMap(...),\n ...\n };\n\n <RoomProvider initialStorage={initialStorage}>\n ...\n </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.`);
176
+ const value = useStorageValue(key, new LiveMap(null != entries ? entries : void 0));
177
+ return "ok" === value.status ? value.value : (deprecateIf("notfound" === value.status, `Key ${JSON.stringify(key)} was not found in Storage. Starting with 0.18, useMap() will no longer automatically create this key.\n\nInstead, please initialize your storage where you set up your RoomProvider:\n\n import { LiveMap } from "@liveblocks/client";\n\n const initialStorage = () => {\n ${JSON.stringify(key)}: new LiveMap(...),\n ...\n };\n\n <RoomProvider initialStorage={initialStorage}>\n ...\n </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.`),
178
+ null);
179
+ },
180
+ useMyPresence: function() {
181
+ const room = useRoom(), presence = room.getPresence(), rerender = useRerender();
182
+ return React.useEffect((() => {
183
+ const unsubscribe = room.subscribe("my-presence", rerender);
184
+ return () => {
185
+ unsubscribe();
381
186
  };
382
-
383
- <RoomProvider initialStorage={initialStorage}>
384
- ...
385
- </RoomProvider>
386
-
387
- Please see https://bit.ly/3Niy5aP for details.`);
388
- return null;
389
- }
390
- }
391
- function useObject(key, initialData) {
392
- deprecateIf(initialData, `Support for initializing data in useObject() directly will be removed in @liveblocks/react 0.18.
393
-
394
- Instead, please initialize this data where you set up your RoomProvider:
395
-
396
- import { LiveObject } from "@liveblocks/client";
397
-
398
- const initialStorage = () => {
399
- ${JSON.stringify(key)}: new LiveObject(...),
400
- ...
187
+ }), [ room ]), [ presence, React.useCallback(((overrides, options) => room.updatePresence(overrides, options)), [ room ]) ];
188
+ },
189
+ useObject: function(key, initialData) {
190
+ deprecateIf(initialData, `Support for initializing data in useObject() directly will be removed in @liveblocks/react 0.18.\n\nInstead, please initialize this data where you set up your RoomProvider:\n\n import { LiveObject } from "@liveblocks/client";\n\n const initialStorage = () => {\n ${JSON.stringify(key)}: new LiveObject(...),\n ...\n };\n\n <RoomProvider initialStorage={initialStorage}>\n ...\n </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.`);
191
+ const value = useStorageValue(key, new LiveObject(initialData));
192
+ return "ok" === value.status ? value.value : (deprecateIf("notfound" === value.status, `Key ${JSON.stringify(key)} was not found in Storage. Starting with 0.18, useObject() will no longer automatically create this key.\n\nInstead, please initialize your storage where you set up your RoomProvider:\n\n import { LiveObject } from "@liveblocks/client";\n\n const initialStorage = () => {\n ${JSON.stringify(key)}: new LiveObject(...),\n ...\n };\n\n <RoomProvider initialStorage={initialStorage}>\n ...\n </RoomProvider>\n\nPlease see https://bit.ly/3Niy5aP for details.`),
193
+ null);
194
+ },
195
+ useOthers: function() {
196
+ const room = useRoom(), rerender = useRerender();
197
+ return React.useEffect((() => {
198
+ const unsubscribe = room.subscribe("others", rerender);
199
+ return () => {
200
+ unsubscribe();
401
201
  };
402
-
403
- <RoomProvider initialStorage={initialStorage}>
404
- ...
405
- </RoomProvider>
406
-
407
- Please see https://bit.ly/3Niy5aP for details.`);
408
- const value = useCrdt(key, new LiveObject(initialData));
409
- // ^^^^^^^^^^^^^^^^^^^^^^^^^^^
410
- // NOTE: This param is scheduled for removal in 0.18
411
- if (value.status === "ok") {
412
- return value.value;
413
- }
414
- else {
415
- deprecateIf(value.status === "notfound", `Key ${JSON.stringify(key)} was not found in Storage. Starting with 0.18, useObject() will no longer automatically create this key.
416
-
417
- Instead, please initialize your storage where you set up your RoomProvider:
418
-
419
- import { LiveObject } from "@liveblocks/client";
420
-
421
- const initialStorage = () => {
422
- ${JSON.stringify(key)}: new LiveObject(...),
423
- ...
202
+ }), [ room ]), room.getOthers();
203
+ },
204
+ useRedo: function() {
205
+ return useHistory().redo;
206
+ },
207
+ useRoom: useRoom,
208
+ useSelf: function() {
209
+ const room = useRoom(), rerender = useRerender();
210
+ return React.useEffect((() => {
211
+ const unsubscribePresence = room.subscribe("my-presence", rerender), unsubscribeConnection = room.subscribe("connection", rerender);
212
+ return () => {
213
+ unsubscribePresence(), unsubscribeConnection();
424
214
  };
425
-
426
- <RoomProvider initialStorage={initialStorage}>
427
- ...
428
- </RoomProvider>
429
-
430
- Please see https://bit.ly/3Niy5aP for details.`);
431
- return null;
432
- }
433
- }
434
- /**
435
- * Returns a function that undoes the last operation executed by the current client.
436
- * It does not impact operations made by other clients.
437
- */
438
- function useUndo() {
439
- return useRoom().history.undo;
440
- }
441
- /**
442
- * Returns a function that redoes the last operation executed by the current client.
443
- * It does not impact operations made by other clients.
444
- */
445
- function useRedo() {
446
- return useRoom().history.redo;
447
- }
448
- /**
449
- * Returns a function that batches modifications made during the given function.
450
- * All the modifications are sent to other clients in a single message.
451
- * All the modifications are merged in a single history item (undo/redo).
452
- * All the subscribers are called only after the batch is over.
453
- */
454
- function useBatch() {
455
- return useRoom().batch;
456
- }
457
- /**
458
- * Returns the room.history
459
- */
460
- function useHistory() {
461
- return useRoom().history;
462
- }
463
- function useCrdt(key, initialCrdt) {
464
- const room = useRoom();
465
- const [root] = useStorage();
466
- const rerender = useRerender();
467
- React.useEffect(() => {
468
- if (root == null) {
469
- return;
470
- }
471
- let crdt = root.get(key);
472
- if (crdt == null) {
473
- crdt = initialCrdt;
474
- root.set(key, crdt);
475
- }
476
- function onRootChange() {
477
- const newCrdt = root.get(key);
478
- if (newCrdt !== crdt) {
479
- unsubscribeCrdt();
480
- crdt = newCrdt;
481
- unsubscribeCrdt = room.subscribe(crdt /* AbstractCrdt */, rerender);
482
- rerender();
483
- }
484
- }
485
- let unsubscribeCrdt = room.subscribe(crdt /* AbstractCrdt */, rerender);
486
- const unsubscribeRoot = room.subscribe(root /* AbstractCrdt */, onRootChange);
487
- rerender();
488
- return () => {
489
- unsubscribeRoot();
490
- unsubscribeCrdt();
491
- };
492
- }, [root, room]);
493
- if (root == null) {
494
- return { status: "loading" };
495
- }
496
- else {
497
- const value = root.get(key);
498
- if (value == null) {
499
- return { status: "notfound" };
500
- }
501
- else {
502
- return { status: "ok", value };
503
- }
504
- }
505
- }
215
+ }), [ room ]), room.getSelf();
216
+ },
217
+ useStorage: useStorage,
218
+ useUndo: function() {
219
+ return useHistory().undo;
220
+ },
221
+ useUpdateMyPresence: function() {
222
+ const room = useRoom();
223
+ return React.useCallback(((overrides, options) => {
224
+ room.updatePresence(overrides, options);
225
+ }), [ room ]);
226
+ }
227
+ };
228
+ }();
506
229
 
507
230
  export { LiveblocksProvider, RoomProvider, useBatch, useBroadcastEvent, useClient, useErrorListener, useEventListener, useHistory, useList, useMap, useMyPresence, useObject, useOthers, useRedo, useRoom, useSelf, useStorage, useUndo, useUpdateMyPresence };