@pluv/react 0.15.0 → 0.16.0
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/.turbo/turbo-build.log +9 -9
- package/CHANGELOG.md +199 -39
- package/README.md +24 -29
- package/dist/index.d.mts +30 -28
- package/dist/index.d.ts +30 -28
- package/dist/index.js +78 -77
- package/dist/index.mjs +78 -76
- package/package.json +10 -11
- package/src/createBundle.tsx +10 -10
- package/src/createRoomBundle.tsx +108 -93
- package/src/index.ts +4 -3
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
|
|
2
|
-
> @pluv/react@0.
|
|
2
|
+
> @pluv/react@0.16.0 build /home/runner/work/pluv/pluv/packages/react
|
|
3
3
|
> tsup src/index.ts --format esm,cjs --dts --external react
|
|
4
4
|
|
|
5
5
|
[34mCLI[39m Building entry: src/index.ts
|
|
6
6
|
[34mCLI[39m Using tsconfig: tsconfig.json
|
|
7
|
-
[34mCLI[39m tsup v8.0.
|
|
7
|
+
[34mCLI[39m tsup v8.0.2
|
|
8
8
|
[34mCLI[39m Target: es6
|
|
9
9
|
[34mESM[39m Build start
|
|
10
10
|
[34mCJS[39m Build start
|
|
11
|
-
[32mCJS[39m [1mdist/index.js [22m[32m12.
|
|
12
|
-
[32mCJS[39m ⚡️ Build success in
|
|
13
|
-
[32mESM[39m [1mdist/index.mjs [22m[32m9.
|
|
14
|
-
[32mESM[39m ⚡️ Build success in
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m12.53 KB[39m
|
|
12
|
+
[32mCJS[39m ⚡️ Build success in 112ms
|
|
13
|
+
[32mESM[39m [1mdist/index.mjs [22m[32m9.96 KB[39m
|
|
14
|
+
[32mESM[39m ⚡️ Build success in 112ms
|
|
15
15
|
[34mDTS[39m Build start
|
|
16
|
-
[32mDTS[39m ⚡️ Build success in
|
|
17
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[
|
|
18
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[
|
|
16
|
+
[32mDTS[39m ⚡️ Build success in 3801ms
|
|
17
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m5.05 KB[39m
|
|
18
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m5.05 KB[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,171 @@
|
|
|
1
1
|
# @pluv/react
|
|
2
2
|
|
|
3
|
+
## 0.16.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 995aa9c: Renamed all hooks from `@pluv/react` to be simply prefixed with `use` instead of `usePluv` (e.g. `usePluvStorage` is now just `useStorage`).
|
|
8
|
+
|
|
9
|
+
Hooks can be aliased to retain the same names if preferred:
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
export const {
|
|
13
|
+
// ...
|
|
14
|
+
useStorage: usePluvStorage,
|
|
15
|
+
useTransact: usePluvTransact,
|
|
16
|
+
// ...
|
|
17
|
+
} = createRoomBundle(/* */);
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
- 4280220: ## Breaking Changes
|
|
21
|
+
|
|
22
|
+
- Storage types are now kept on the root of the document.
|
|
23
|
+
- Previously, `@pluv/crdt-yjs` kept all shared-types on a hidden Yjs Map called `storage` on the root of the Yjs Doc. Now all shared-types are kept on the root of the Yjs Doc instead. This behavior should be more in-line with how shared-types are documented to be used from Yjs.
|
|
24
|
+
- `@pluv/client` and `@pluv/react` no-longer re-export `@pluv/crdt-yjs`. This package will now need to be installed separately.
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
# if installing @pluv/client
|
|
28
|
+
npm install @pluv/client @pluv/crdt-yjs
|
|
29
|
+
# if installing @pluv/react
|
|
30
|
+
npm install @pluv/react @pluv/crdt-yjs
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
// Before:
|
|
35
|
+
import { createClient, y } from "@pluv/client";
|
|
36
|
+
// After:
|
|
37
|
+
import { createClient } from "@pluv/client";
|
|
38
|
+
import { yjs } from "@pluv/crdt-yjs"; // y renamed to yjs
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
- The `y` import has been renamed to `yjs`.
|
|
42
|
+
```ts
|
|
43
|
+
// Before:
|
|
44
|
+
import { y } from "@pluv/crdt-yjs";
|
|
45
|
+
// After:
|
|
46
|
+
import { yjs } from "@pluv/crdt-yjs";
|
|
47
|
+
```
|
|
48
|
+
- `@pluv/crdt-yjs` functions no-longer return Yjs shared-types directly, but instead return an `AbstractCrdtType` from `@pluv/crdt` (new package). This also affects methods that return storage shared types in both `@pluv/client` and `@pluv/react` from functions like `PluvRoom.getStorage` and `PluvRoom.useStorage`.
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
// Before:
|
|
52
|
+
import { y } from "@pluv/crdt-yjs";
|
|
53
|
+
import type { Array as YArray, Map as YMap } from "yjs";
|
|
54
|
+
|
|
55
|
+
const array: YArray<YMap<{ message: string }>> = y.array([
|
|
56
|
+
y.object({ message: "Hello" }),
|
|
57
|
+
]);
|
|
58
|
+
|
|
59
|
+
array.push([y.object({ message: "World!" })]);
|
|
60
|
+
|
|
61
|
+
// After:
|
|
62
|
+
import type { CrdtYjsArray, CrdtYjsObject } from "@pluv/crdt-yjs";
|
|
63
|
+
import { yjs } from "@pluv/crdt-yjs";
|
|
64
|
+
import type { Array as YArray } from "yjs";
|
|
65
|
+
|
|
66
|
+
const array: CrdtYjsArray<CrdtYjsObject<{ message: string }>> = yjs.array([
|
|
67
|
+
yjs.object({ message: "Hello" }),
|
|
68
|
+
]);
|
|
69
|
+
|
|
70
|
+
array.push(yjs.object({ message: "World!" }));
|
|
71
|
+
|
|
72
|
+
// use .value to get the underlying yjs type
|
|
73
|
+
const yarray: YArray<YMap<{ message: string }>> = array.value;
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
- `initialStorage` must now use the `doc` function from `@pluv/crdt-yjs` to be defined. This also affects `@pluv/react`.
|
|
77
|
+
|
|
78
|
+
```ts
|
|
79
|
+
// Before:
|
|
80
|
+
import { createClient, y } from "@pluv/client";
|
|
81
|
+
|
|
82
|
+
const client = createClient({
|
|
83
|
+
/* ... */
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
client.createRoom({
|
|
87
|
+
// ...
|
|
88
|
+
initialStorage: () => ({
|
|
89
|
+
messages: y.array([y.object({ message: "Hello world!" })]),
|
|
90
|
+
}),
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
// After:
|
|
94
|
+
import { createClient } from "@pluv/client";
|
|
95
|
+
// This is now imported separately
|
|
96
|
+
import { yjs } from "@pluv/crdt-yjs";
|
|
97
|
+
|
|
98
|
+
const client = createClient({
|
|
99
|
+
/* ... */
|
|
100
|
+
});
|
|
101
|
+
|
|
102
|
+
client.createRoom({
|
|
103
|
+
// ...
|
|
104
|
+
initialStorage: yjs.doc(() => ({
|
|
105
|
+
messages: yjs.array([yjs.object({ message: "Hello world!" })]),
|
|
106
|
+
})),
|
|
107
|
+
});
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
- `@pluv/client` can now instead use [loro](https://github.com/loro-dev/loro) instead of [yjs](https://github.com/yjs/yjs).
|
|
111
|
+
```bash
|
|
112
|
+
npm install @pluv/client @pluv/crdt-loro loro-crdt
|
|
113
|
+
```
|
|
114
|
+
- If you are using storage features with pluv, `@pluv/io` must now specify which crdt library (i.e. `@pluv/crdt-yjs` or `@pluv/crdt-loro`) it is meant to use.
|
|
115
|
+
|
|
116
|
+
```ts
|
|
117
|
+
import { loro } from "@pluv/crdt-loro";
|
|
118
|
+
import { yjs } from "@pluv/crdt-yjs";
|
|
119
|
+
import { createIO } from "@pluv/io";
|
|
120
|
+
|
|
121
|
+
const io = createIO({
|
|
122
|
+
// ...
|
|
123
|
+
// If using loro
|
|
124
|
+
crdt: loro,
|
|
125
|
+
// If using yjs
|
|
126
|
+
crdt: yjs,
|
|
127
|
+
});
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
- `PluvRoom.getDoc()` from `@pluv/client` no-longer returns the Yjs Doc instance, but rather a `AbstractCrdtDoc` instance from `@pluv/crdt`. This also affects the hook from `@pluv/react`.
|
|
131
|
+
|
|
132
|
+
```ts
|
|
133
|
+
// Before:
|
|
134
|
+
import { Doc as YDoc } from "yjs";
|
|
135
|
+
|
|
136
|
+
const room: PluvRoom = client.createRoom({
|
|
137
|
+
/* ... */
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
const doc: YDoc = room.getDoc();
|
|
141
|
+
|
|
142
|
+
// After:
|
|
143
|
+
import { CrdtYjsDoc } from "@pluv/crdt-yjs";
|
|
144
|
+
import { Doc as YDoc } from "yjs";
|
|
145
|
+
|
|
146
|
+
const room: PluvRoom = client.createRoom({
|
|
147
|
+
/* ... */
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
const doc: CrdtYjsDoc<any> = room.getDoc();
|
|
151
|
+
const ydoc: YDoc = doc.value;
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
- `@pluv/client` and `@pluv/react` now may return `null` when retrieving storage while storage is being initialized.
|
|
155
|
+
|
|
156
|
+
```ts
|
|
157
|
+
const sharedType = room.getStorage("messages"); // This may be null
|
|
158
|
+
|
|
159
|
+
const [data, sharedType] = useStorage("messages"); // data and sharedType may both be null
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### Patch Changes
|
|
163
|
+
|
|
164
|
+
- Updated dependencies [4280220]
|
|
165
|
+
- @pluv/client@0.16.0
|
|
166
|
+
- @pluv/crdt@0.16.0
|
|
167
|
+
- @pluv/types@0.16.0
|
|
168
|
+
|
|
3
169
|
## 0.15.0
|
|
4
170
|
|
|
5
171
|
### Patch Changes
|
|
@@ -25,12 +191,12 @@
|
|
|
25
191
|
|
|
26
192
|
### Minor Changes
|
|
27
193
|
|
|
28
|
-
- 4c4b47f: Added `
|
|
194
|
+
- 4c4b47f: Added `useDoc` to access the root Yjs doc.
|
|
29
195
|
|
|
30
196
|
```ts
|
|
31
197
|
import type { Doc } from "yjs";
|
|
32
198
|
|
|
33
|
-
const doc: Doc =
|
|
199
|
+
const doc: Doc = useDoc();
|
|
34
200
|
```
|
|
35
201
|
|
|
36
202
|
### Patch Changes
|
|
@@ -216,7 +382,7 @@
|
|
|
216
382
|
|
|
217
383
|
## @pluv/react
|
|
218
384
|
|
|
219
|
-
`@pluv/react`'s `createRoomBundle` now exposes 5 new react hooks: `
|
|
385
|
+
`@pluv/react`'s `createRoomBundle` now exposes 5 new react hooks: `useCanRedo`, `useCanUndo`, `useRedo`, `useUndo` and `useTransact`.
|
|
220
386
|
|
|
221
387
|
Refer to the code-example below to better understand how to undo and redo with your `createRoomBundle`.
|
|
222
388
|
|
|
@@ -228,47 +394,41 @@
|
|
|
228
394
|
|
|
229
395
|
const { createRoomBundle } = createBundle(client);
|
|
230
396
|
|
|
231
|
-
const {
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
* specifies additional tracked origins besides the user's connection id.
|
|
256
|
-
* @see (@link https://docs.yjs.dev/api/undo-manager)
|
|
257
|
-
* @default undefined
|
|
258
|
-
*/
|
|
259
|
-
trackedOrigins: ["user-123"],
|
|
260
|
-
});
|
|
397
|
+
const { useCanRedo, useCanUndo, useRedo, useStorage, useTransact, useUndo } =
|
|
398
|
+
createRoomBundle({
|
|
399
|
+
initialStorage: () => ({
|
|
400
|
+
messages: y.array<string>([]),
|
|
401
|
+
}),
|
|
402
|
+
/**
|
|
403
|
+
* @description This is the same `captureTimeout` option from yjs's UndoManager.
|
|
404
|
+
* This specifies a number in ms, during which edits are merged together to be
|
|
405
|
+
* undone together. Set this to 0, to track each transacted change individually.
|
|
406
|
+
* @see (@link https://docs.yjs.dev/api/undo-manager)
|
|
407
|
+
* @default 500
|
|
408
|
+
*/
|
|
409
|
+
captureTimeout: 500,
|
|
410
|
+
/**
|
|
411
|
+
* @desription This is the same `trackedOrigins` option from yjs's UndoManager.
|
|
412
|
+
* This specifies transaction origins (strings only) to filter which transactions
|
|
413
|
+
* can be undone.
|
|
414
|
+
* When omitted, the user's connection id will be tracked. When provided,
|
|
415
|
+
* specifies additional tracked origins besides the user's connection id.
|
|
416
|
+
* @see (@link https://docs.yjs.dev/api/undo-manager)
|
|
417
|
+
* @default undefined
|
|
418
|
+
*/
|
|
419
|
+
trackedOrigins: ["user-123"],
|
|
420
|
+
});
|
|
261
421
|
|
|
262
422
|
/**
|
|
263
423
|
* @description Check whether calling undo will mutate storage
|
|
264
424
|
*/
|
|
265
|
-
const canUndo: boolean =
|
|
425
|
+
const canUndo: boolean = useCanUndo();
|
|
266
426
|
/**
|
|
267
427
|
* @description Check whether calling redo will mutate storage
|
|
268
428
|
*/
|
|
269
|
-
const canRedo: boolean =
|
|
429
|
+
const canRedo: boolean = useCanRedo();
|
|
270
430
|
|
|
271
|
-
const [messages, sharedType] =
|
|
431
|
+
const [messages, sharedType] = useStorage("messages");
|
|
272
432
|
|
|
273
433
|
/**
|
|
274
434
|
* @description Calling transact will enable a storage mutation to be undone/redone.
|
|
@@ -277,7 +437,7 @@
|
|
|
277
437
|
*
|
|
278
438
|
* You can specify a 2nd parameter to transact with a different transaction origin.
|
|
279
439
|
*/
|
|
280
|
-
const transact =
|
|
440
|
+
const transact = useTransact();
|
|
281
441
|
|
|
282
442
|
transact(() => {
|
|
283
443
|
sharedType.push(["hello world!"]);
|
|
@@ -291,14 +451,14 @@
|
|
|
291
451
|
/**
|
|
292
452
|
* @description Undoes the last valid mutation to storage
|
|
293
453
|
*/
|
|
294
|
-
const undo =
|
|
454
|
+
const undo = useUndo();
|
|
295
455
|
|
|
296
456
|
undo();
|
|
297
457
|
|
|
298
458
|
/**
|
|
299
459
|
* @description Re-applies the last undone mutation to storage
|
|
300
460
|
*/
|
|
301
|
-
const redo =
|
|
461
|
+
const redo = useRedo();
|
|
302
462
|
|
|
303
463
|
redo();
|
|
304
464
|
```
|
package/README.md
CHANGED
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
<br />
|
|
6
6
|
<img src="https://github.com/pluv-io/pluv/blob/master/assets/pluv-icon-192x192.png?raw=true" alt="Pluv.IO" width="180" style="border-radius:16px" />
|
|
7
7
|
<br />
|
|
8
|
-
Pluv.IO (preview)
|
|
8
|
+
<a href="https://pluv.io/docs/introduction">Pluv.IO (preview)</a>
|
|
9
9
|
<br />
|
|
10
10
|
</h1>
|
|
11
11
|
|
|
12
12
|
<h3 align="center">Multi-platform, E2E type-safe realtime packages</h3>
|
|
13
|
-
<h4 align="center">💕 Inspired by <a href="https://trpc.io">trpc</a> 💕
|
|
13
|
+
<h4 align="center">💕 Inspired by <a href="https://trpc.io">trpc</a> 💕 <a href="https://docs.yjs.dev/">yjs</a> 💕 and <a href="https://developers.cloudflare.com/">Cloudflare</a> 💕 </h4>
|
|
14
14
|
|
|
15
15
|
<p align="center">
|
|
16
16
|
<a href="https://www.npmjs.com/package/@pluv/react">
|
|
@@ -19,14 +19,10 @@
|
|
|
19
19
|
<a href="https://github.com/pluv-io/pluv/blob/master/LICENSE">
|
|
20
20
|
<img alt="GitHub" src="https://img.shields.io/github/license/pluv-io/pluv" alt="License MIT" />
|
|
21
21
|
</a>
|
|
22
|
-
<img src="https://badgen.net/badge/-/TypeScript?icon=typescript&label&labelColor=blue&color=555555" alt="TypeScript" />
|
|
23
22
|
<a href="https://commitizen.github.io/cz-cli/">
|
|
24
23
|
<img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" alt="Commitizen friendly" />
|
|
25
24
|
</a>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<p align="center">
|
|
29
|
-
<img src="https://github.com/pluv-io/pluv/blob/master/assets/demo-events.gif?raw=true" alt="Demo" />
|
|
25
|
+
<img src="https://badgen.net/badge/-/TypeScript?icon=typescript&label&labelColor=blue&color=555555" alt="TypeScript" />
|
|
30
26
|
</p>
|
|
31
27
|
|
|
32
28
|
## `@pluv/react`
|
|
@@ -39,21 +35,20 @@
|
|
|
39
35
|
|
|
40
36
|
```bash
|
|
41
37
|
# npm
|
|
42
|
-
npm install @pluv/react yjs
|
|
38
|
+
npm install @pluv/react @pluv/crdt-yjs yjs zod
|
|
43
39
|
|
|
44
40
|
# yarn
|
|
45
|
-
yarn add @pluv/react yjs
|
|
41
|
+
yarn add @pluv/react @pluv/crdt-yjs yjs zod
|
|
46
42
|
|
|
47
43
|
# pnpm
|
|
48
|
-
pnpm add @pluv/react yjs
|
|
44
|
+
pnpm add @pluv/react @pluv/crdt-yjs yjs zod
|
|
49
45
|
```
|
|
50
46
|
|
|
51
|
-
If you plan on using presence and/or storage, make sure to also install `zod`.
|
|
52
|
-
|
|
53
47
|
## Basic Example
|
|
54
48
|
|
|
55
49
|
```tsx
|
|
56
|
-
import {
|
|
50
|
+
import { yjs } from "@pluv/crdt-yjs";
|
|
51
|
+
import { createBundle, createClient } from "@pluv/react";
|
|
57
52
|
import { z } from "zod";
|
|
58
53
|
// Import the PluvIO instance as a type from your server file
|
|
59
54
|
import { type io } from "./server";
|
|
@@ -76,7 +71,7 @@ export const {
|
|
|
76
71
|
PluvProvider,
|
|
77
72
|
|
|
78
73
|
// hooks
|
|
79
|
-
|
|
74
|
+
useClient,
|
|
80
75
|
} = createBundle(client);
|
|
81
76
|
|
|
82
77
|
export const {
|
|
@@ -84,24 +79,24 @@ export const {
|
|
|
84
79
|
PluvRoomProvider,
|
|
85
80
|
|
|
86
81
|
// hooks
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
82
|
+
useBroadcast,
|
|
83
|
+
useConnection,
|
|
84
|
+
useEvent,
|
|
85
|
+
useMyPresence,
|
|
86
|
+
useMyself,
|
|
87
|
+
useOther,
|
|
88
|
+
useOthers,
|
|
89
|
+
useRoom,
|
|
90
|
+
useStorage,
|
|
96
91
|
} = createRoomBundle({
|
|
97
|
-
initialStorage: () => ({
|
|
98
|
-
messages:
|
|
99
|
-
|
|
92
|
+
initialStorage: yjs.doc(() => ({
|
|
93
|
+
messages: yjs.array([
|
|
94
|
+
yjs.object({
|
|
100
95
|
message: "Hello World!",
|
|
101
96
|
name: "johnathan_doe",
|
|
102
97
|
}),
|
|
103
98
|
]),
|
|
104
|
-
}),
|
|
99
|
+
})),
|
|
105
100
|
presence: z.object({
|
|
106
101
|
cursor: z.nullable(
|
|
107
102
|
z.object({
|
|
@@ -123,9 +118,9 @@ export const MyPage: FC<Record<string, never>> = () => {
|
|
|
123
118
|
};
|
|
124
119
|
|
|
125
120
|
export const MyRoom: FC<Record<string, never>> = () => {
|
|
126
|
-
const broadcast =
|
|
121
|
+
const broadcast = useBroadcast();
|
|
127
122
|
|
|
128
|
-
|
|
123
|
+
useEvent("RECEIVE_MESSAGE", ({ data }) => {
|
|
129
124
|
// data is typed as { message: string }
|
|
130
125
|
console.log(data.message);
|
|
131
126
|
});
|
package/dist/index.d.mts
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-
import { PluvRoomAddon,
|
|
2
|
-
export {
|
|
1
|
+
import { PluvRoomAddon, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom, MockedRoomEvents, PluvClient } from '@pluv/client';
|
|
2
|
+
export { ConnectionState, createClient } from '@pluv/client';
|
|
3
|
+
import { AbstractCrdtType, AbstractCrdtDocFactory, AbstractCrdtDoc, InferCrdtStorageJson } from '@pluv/crdt';
|
|
4
|
+
export { AbstractCrdtType, InferCrdtStorageJson } from '@pluv/crdt';
|
|
3
5
|
import * as _pluv_types from '@pluv/types';
|
|
4
6
|
import { IOLike, JsonObject, InputZodLike, InferIOInput, Id, InferIOOutput, IOEventMessage } from '@pluv/types';
|
|
5
7
|
export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types';
|
|
6
8
|
import { FC, Dispatch, ReactNode } from 'react';
|
|
7
|
-
import { AbstractType, Doc } from 'yjs';
|
|
8
9
|
|
|
9
|
-
type CreateRoomBundleOptions<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string,
|
|
10
|
+
type CreateRoomBundleOptions<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractCrdtType<any, any>> = {}> = {
|
|
10
11
|
addons?: readonly PluvRoomAddon<TIO, TPresence, TStorage>[];
|
|
11
|
-
initialStorage?:
|
|
12
|
+
initialStorage?: AbstractCrdtDocFactory<TStorage>;
|
|
12
13
|
presence?: InputZodLike<TPresence>;
|
|
13
|
-
}
|
|
14
|
-
type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string,
|
|
14
|
+
};
|
|
15
|
+
type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> = {
|
|
15
16
|
children?: ReactNode;
|
|
16
17
|
initialStorage?: keyof TStorage extends never ? never : () => TStorage;
|
|
17
18
|
room: string;
|
|
@@ -20,10 +21,10 @@ type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record
|
|
|
20
21
|
} : {
|
|
21
22
|
initialPresence: TPresence;
|
|
22
23
|
});
|
|
23
|
-
type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string,
|
|
24
|
+
type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
|
|
24
25
|
events?: MockedRoomEvents<TIO>;
|
|
25
26
|
};
|
|
26
|
-
type PluvRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string,
|
|
27
|
+
type PluvRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
|
|
27
28
|
debug?: boolean | PluvRoomDebug<TIO>;
|
|
28
29
|
onAuthorizationFail?: (error: Error) => void;
|
|
29
30
|
};
|
|
@@ -31,37 +32,38 @@ interface SubscriptionHookOptions<T extends unknown> {
|
|
|
31
32
|
isEqual?: (a: T, b: T) => boolean;
|
|
32
33
|
}
|
|
33
34
|
type UpdateMyPresenceAction<TPresence extends JsonObject> = Partial<TPresence> | ((oldPresence: TPresence | null) => Partial<TPresence>);
|
|
34
|
-
interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string,
|
|
35
|
+
interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> {
|
|
35
36
|
MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
|
|
36
37
|
PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
38
|
+
useBroadcast: () => <TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void;
|
|
39
|
+
useCanRedo: () => boolean;
|
|
40
|
+
useCanUndo: () => boolean;
|
|
41
|
+
useConnection: <T extends unknown = WebSocketConnection>(selector: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
|
|
42
|
+
useDoc: () => AbstractCrdtDoc<TStorage>;
|
|
43
|
+
useEvent: <TType extends keyof InferIOOutput<TIO>>(type: TType, callback: (data: Id<IOEventMessage<TIO, TType>>) => void) => void;
|
|
44
|
+
useMyPresence: <T extends unknown = TPresence>(selector?: (myPresence: TPresence) => T, options?: SubscriptionHookOptions<Id<T> | null>) => [
|
|
44
45
|
myPresence: Id<T>,
|
|
45
46
|
updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>
|
|
46
47
|
];
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
48
|
+
useMyself: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (myself: Id<UserInfo<TIO, TPresence>>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
|
|
49
|
+
useOther: <T extends unknown = UserInfo<TIO, TPresence>>(connectionId: string, selector?: (other: UserInfo<TIO, TPresence>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
|
|
50
|
+
useOthers: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[], options?: SubscriptionHookOptions<readonly Id<T>[]>) => readonly Id<T>[];
|
|
51
|
+
useRedo: () => () => void;
|
|
52
|
+
useRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
|
|
53
|
+
useStorage: <TKey extends keyof TStorage, TData extends unknown = InferCrdtStorageJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferCrdtStorageJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: TStorage[TKey] | null];
|
|
54
|
+
useTransact: () => (fn: (storage: TStorage) => void, origin?: string) => void;
|
|
55
|
+
useUndo: () => () => void;
|
|
55
56
|
}
|
|
57
|
+
type InferRoomStorage<TRoomBundle extends CreateRoomBundle<any, any, any>> = TRoomBundle extends CreateRoomBundle<any, any, infer IStorage> ? IStorage : never;
|
|
56
58
|
|
|
57
59
|
interface PluvProviderProps {
|
|
58
60
|
children?: ReactNode;
|
|
59
61
|
}
|
|
60
62
|
interface CreateBundle<TIO extends IOLike> {
|
|
61
|
-
createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string,
|
|
63
|
+
createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractCrdtType<any, any>> = {}>(options: CreateRoomBundleOptions<TIO, TPresence, TStorage>) => CreateRoomBundle<TIO, TPresence, TStorage>;
|
|
62
64
|
PluvProvider: FC<PluvProviderProps>;
|
|
63
|
-
|
|
65
|
+
useClient: () => PluvClient<TIO>;
|
|
64
66
|
}
|
|
65
67
|
declare const createBundle: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any>, {}, {}, {}, {}>>(client: PluvClient<TIO>) => CreateBundle<TIO>;
|
|
66
68
|
|
|
67
|
-
export { type CreateBundle, type CreateRoomBundle, type CreateRoomBundleOptions, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };
|
|
69
|
+
export { type CreateBundle, type CreateRoomBundle, type CreateRoomBundleOptions, type InferRoomStorage, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-
import { PluvRoomAddon,
|
|
2
|
-
export {
|
|
1
|
+
import { PluvRoomAddon, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom, MockedRoomEvents, PluvClient } from '@pluv/client';
|
|
2
|
+
export { ConnectionState, createClient } from '@pluv/client';
|
|
3
|
+
import { AbstractCrdtType, AbstractCrdtDocFactory, AbstractCrdtDoc, InferCrdtStorageJson } from '@pluv/crdt';
|
|
4
|
+
export { AbstractCrdtType, InferCrdtStorageJson } from '@pluv/crdt';
|
|
3
5
|
import * as _pluv_types from '@pluv/types';
|
|
4
6
|
import { IOLike, JsonObject, InputZodLike, InferIOInput, Id, InferIOOutput, IOEventMessage } from '@pluv/types';
|
|
5
7
|
export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types';
|
|
6
8
|
import { FC, Dispatch, ReactNode } from 'react';
|
|
7
|
-
import { AbstractType, Doc } from 'yjs';
|
|
8
9
|
|
|
9
|
-
type CreateRoomBundleOptions<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string,
|
|
10
|
+
type CreateRoomBundleOptions<TIO extends IOLike, TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractCrdtType<any, any>> = {}> = {
|
|
10
11
|
addons?: readonly PluvRoomAddon<TIO, TPresence, TStorage>[];
|
|
11
|
-
initialStorage?:
|
|
12
|
+
initialStorage?: AbstractCrdtDocFactory<TStorage>;
|
|
12
13
|
presence?: InputZodLike<TPresence>;
|
|
13
|
-
}
|
|
14
|
-
type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string,
|
|
14
|
+
};
|
|
15
|
+
type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> = {
|
|
15
16
|
children?: ReactNode;
|
|
16
17
|
initialStorage?: keyof TStorage extends never ? never : () => TStorage;
|
|
17
18
|
room: string;
|
|
@@ -20,10 +21,10 @@ type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record
|
|
|
20
21
|
} : {
|
|
21
22
|
initialPresence: TPresence;
|
|
22
23
|
});
|
|
23
|
-
type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string,
|
|
24
|
+
type MockedRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
|
|
24
25
|
events?: MockedRoomEvents<TIO>;
|
|
25
26
|
};
|
|
26
|
-
type PluvRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string,
|
|
27
|
+
type PluvRoomProviderProps<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
|
|
27
28
|
debug?: boolean | PluvRoomDebug<TIO>;
|
|
28
29
|
onAuthorizationFail?: (error: Error) => void;
|
|
29
30
|
};
|
|
@@ -31,37 +32,38 @@ interface SubscriptionHookOptions<T extends unknown> {
|
|
|
31
32
|
isEqual?: (a: T, b: T) => boolean;
|
|
32
33
|
}
|
|
33
34
|
type UpdateMyPresenceAction<TPresence extends JsonObject> = Partial<TPresence> | ((oldPresence: TPresence | null) => Partial<TPresence>);
|
|
34
|
-
interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string,
|
|
35
|
+
interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, AbstractCrdtType<any, any>>> {
|
|
35
36
|
MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
|
|
36
37
|
PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
38
|
+
useBroadcast: () => <TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void;
|
|
39
|
+
useCanRedo: () => boolean;
|
|
40
|
+
useCanUndo: () => boolean;
|
|
41
|
+
useConnection: <T extends unknown = WebSocketConnection>(selector: (connection: WebSocketConnection) => T, options?: SubscriptionHookOptions<Id<T>>) => Id<T>;
|
|
42
|
+
useDoc: () => AbstractCrdtDoc<TStorage>;
|
|
43
|
+
useEvent: <TType extends keyof InferIOOutput<TIO>>(type: TType, callback: (data: Id<IOEventMessage<TIO, TType>>) => void) => void;
|
|
44
|
+
useMyPresence: <T extends unknown = TPresence>(selector?: (myPresence: TPresence) => T, options?: SubscriptionHookOptions<Id<T> | null>) => [
|
|
44
45
|
myPresence: Id<T>,
|
|
45
46
|
updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>
|
|
46
47
|
];
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
48
|
+
useMyself: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (myself: Id<UserInfo<TIO, TPresence>>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
|
|
49
|
+
useOther: <T extends unknown = UserInfo<TIO, TPresence>>(connectionId: string, selector?: (other: UserInfo<TIO, TPresence>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
|
|
50
|
+
useOthers: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T[], options?: SubscriptionHookOptions<readonly Id<T>[]>) => readonly Id<T>[];
|
|
51
|
+
useRedo: () => () => void;
|
|
52
|
+
useRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
|
|
53
|
+
useStorage: <TKey extends keyof TStorage, TData extends unknown = InferCrdtStorageJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferCrdtStorageJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: TStorage[TKey] | null];
|
|
54
|
+
useTransact: () => (fn: (storage: TStorage) => void, origin?: string) => void;
|
|
55
|
+
useUndo: () => () => void;
|
|
55
56
|
}
|
|
57
|
+
type InferRoomStorage<TRoomBundle extends CreateRoomBundle<any, any, any>> = TRoomBundle extends CreateRoomBundle<any, any, infer IStorage> ? IStorage : never;
|
|
56
58
|
|
|
57
59
|
interface PluvProviderProps {
|
|
58
60
|
children?: ReactNode;
|
|
59
61
|
}
|
|
60
62
|
interface CreateBundle<TIO extends IOLike> {
|
|
61
|
-
createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string,
|
|
63
|
+
createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string, AbstractCrdtType<any, any>> = {}>(options: CreateRoomBundleOptions<TIO, TPresence, TStorage>) => CreateRoomBundle<TIO, TPresence, TStorage>;
|
|
62
64
|
PluvProvider: FC<PluvProviderProps>;
|
|
63
|
-
|
|
65
|
+
useClient: () => PluvClient<TIO>;
|
|
64
66
|
}
|
|
65
67
|
declare const createBundle: <TIO extends IOLike<_pluv_types.IOAuthorize<any, any>, {}, {}, {}, {}>>(client: PluvClient<TIO>) => CreateBundle<TIO>;
|
|
66
68
|
|
|
67
|
-
export { type CreateBundle, type CreateRoomBundle, type CreateRoomBundleOptions, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };
|
|
69
|
+
export { type CreateBundle, type CreateRoomBundle, type CreateRoomBundleOptions, type InferRoomStorage, type PluvProviderProps, type PluvRoomProviderProps, type SubscriptionHookOptions, createBundle };
|