@pluv/react 0.18.0 → 0.20.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 +15 -15
- package/CHANGELOG.md +94 -0
- package/README.md +0 -138
- package/dist/index.d.mts +12 -12
- package/dist/index.d.ts +12 -12
- package/dist/index.js +99 -59
- package/dist/index.mjs +81 -41
- package/package.json +10 -11
- package/src/createBundle.tsx +3 -6
- package/src/createRoomBundle.tsx +48 -45
- package/src/index.ts +1 -1
- package/src/internal/hooks/index.ts +1 -1
- package/src/internal/hooks/useNoSsr.ts +18 -0
- package/src/internal/hooks/useSyncExternalStoreWithSelector.ts +56 -1
- package/src/internal/utils/index.ts +1 -0
- package/src/internal/utils/shallowEqual.ts +1 -0
- package/tsconfig.json +4 -1
- package/src/internal/hooks/useSyncExternalStore.ts +0 -10
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
|
|
2
|
-
> @pluv/react@0.
|
|
2
|
+
> @pluv/react@0.20.0 build /home/runner/work/pluv/pluv/packages/react
|
|
3
3
|
> tsup src/index.ts --format esm,cjs --dts --external react
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
5
|
+
CLI Building entry: src/index.ts
|
|
6
|
+
CLI Using tsconfig: tsconfig.json
|
|
7
|
+
CLI tsup v8.1.0
|
|
8
|
+
CLI Target: es6
|
|
9
|
+
ESM Build start
|
|
10
|
+
CJS Build start
|
|
11
|
+
CJS dist/index.js 14.27 KB
|
|
12
|
+
CJS ⚡️ Build success in 64ms
|
|
13
|
+
ESM dist/index.mjs 11.87 KB
|
|
14
|
+
ESM ⚡️ Build success in 67ms
|
|
15
|
+
DTS Build start
|
|
16
|
+
DTS ⚡️ Build success in 4545ms
|
|
17
|
+
DTS dist/index.d.mts 5.26 KB
|
|
18
|
+
DTS dist/index.d.ts 5.26 KB
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,99 @@
|
|
|
1
1
|
# @pluv/react
|
|
2
2
|
|
|
3
|
+
## 0.20.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 9492085: **BREAKING**: `@pluv/crdt-yjs` and `@pluv/crdt-loro` have been updated so that the utilities to create shared-types/containers no-longer return a wrapper around the underlying shared-types and containers, but rather return the shared-types/containers directly.
|
|
8
|
+
|
|
9
|
+
This means that for methods such as `getStorage` from `@pluv/client` and `useStorage` from `@pluv/react`, the shared-types/containers are also returned instead of the wrapper types.
|
|
10
|
+
|
|
11
|
+
The motivation for these changes are so that pluv.io is supplementary to `yjs` and `loro-crdt`, instead of having these libraries be an internal implementation of pluv.io.
|
|
12
|
+
|
|
13
|
+
```ts
|
|
14
|
+
// Before
|
|
15
|
+
|
|
16
|
+
import { yjs } from "@pluv/crdt-yjs";
|
|
17
|
+
|
|
18
|
+
yjs.array([]); // Returns CrdtYjsArray
|
|
19
|
+
yjs.object([]); // Returns CrdtYjsObject
|
|
20
|
+
|
|
21
|
+
const room: PluvRoom = /* ... */;
|
|
22
|
+
|
|
23
|
+
room.getStorage("messages"); // Returns AbstractCrdtType
|
|
24
|
+
|
|
25
|
+
const [, sharedType] = useStorage("messages"); // sharedType is an AbstractCrdtType
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
```ts
|
|
29
|
+
// Now
|
|
30
|
+
|
|
31
|
+
import { yjs } from "@pluv/crdt-yjs";
|
|
32
|
+
|
|
33
|
+
yjs.array([]); // Returns yjs.Array
|
|
34
|
+
yjs.object([]); // Returns yjs.Map
|
|
35
|
+
|
|
36
|
+
const room: PluvRoom = /* ... */;
|
|
37
|
+
|
|
38
|
+
room.getStorage("messages"); // Returns yjs.AbstractType
|
|
39
|
+
|
|
40
|
+
const [, sharedType] = useStorage("messages"); // sharedType is a yjs.AbstractType
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
For `@pluv/crdt-loro` specifically, `@pluv/client` relies on [loro events and subscriptions](https://www.loro.dev/docs/tutorial/get_started#event) to detect changes. The `AbstractLoroCrdt` types previously called `Loro.commit` after each change as an abstraction, but now this no-longer happens. To ensure that changes to loro containers are properly handled in `@pluv/react`, make sure to commit your changes whenever possible:
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
// Before
|
|
47
|
+
|
|
48
|
+
const [data, container] = useStorage("messages");
|
|
49
|
+
|
|
50
|
+
// This automatically called Loro.commit under the hood and rerendered the page with updated data.
|
|
51
|
+
container.push(loro.object({ name: "John Doe", age: 35 }));
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
```ts
|
|
55
|
+
// Now
|
|
56
|
+
|
|
57
|
+
const [data, container] = useStorage("messages");
|
|
58
|
+
|
|
59
|
+
const doc = useDoc();
|
|
60
|
+
const transact = useTransact();
|
|
61
|
+
|
|
62
|
+
// Updates need to be committed back to the doc whenever the changes need to be emitted to other users
|
|
63
|
+
// The returned data also will not update until the changes are commited
|
|
64
|
+
|
|
65
|
+
// The two operations below are functionally equivalent
|
|
66
|
+
transact(() => {
|
|
67
|
+
container.push(loro.object({ name: "John Doe", age: 35 }));
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
container.push(loro.object({ name: "John Doe", age: 35 }));
|
|
71
|
+
doc.value.commit();
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Patch Changes
|
|
75
|
+
|
|
76
|
+
- Updated dependencies [9492085]
|
|
77
|
+
- @pluv/client@0.20.0
|
|
78
|
+
- @pluv/crdt@0.20.0
|
|
79
|
+
- @pluv/types@0.20.0
|
|
80
|
+
|
|
81
|
+
## 0.19.0
|
|
82
|
+
|
|
83
|
+
### Minor Changes
|
|
84
|
+
|
|
85
|
+
- 798e32d: **Breaking**: useOthers now allows returning any data besides arrays when using a custom selector.
|
|
86
|
+
- 8450306: **Breaking**: Require minimum react version of ^18.0.0.
|
|
87
|
+
|
|
88
|
+
### Patch Changes
|
|
89
|
+
|
|
90
|
+
- 607afe3: Update the `updateMyPresence` function from `useMyPresence` to simply forward the function from the `PluvRoom`. This means all `updateMyPresence` functions should be the same underlying reference across all `useMyPresence` hooks.
|
|
91
|
+
- Updated dependencies [137444b]
|
|
92
|
+
- Updated dependencies [f5e4370]
|
|
93
|
+
- @pluv/client@0.19.0
|
|
94
|
+
- @pluv/crdt@0.19.0
|
|
95
|
+
- @pluv/types@0.19.0
|
|
96
|
+
|
|
3
97
|
## 0.18.0
|
|
4
98
|
|
|
5
99
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -1,30 +1,3 @@
|
|
|
1
|
-
> **Disclaimer:**
|
|
2
|
-
> This package is currently in preview and may have breaking changes between versions. Please wait for a `v1.0.0` stable release before using this in production.
|
|
3
|
-
|
|
4
|
-
<h1 align="center">
|
|
5
|
-
<br />
|
|
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
|
-
<br />
|
|
8
|
-
<a href="https://pluv.io/docs/introduction">Pluv.IO (preview)</a>
|
|
9
|
-
<br />
|
|
10
|
-
</h1>
|
|
11
|
-
|
|
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> 💕 <a href="https://docs.yjs.dev/">yjs</a> 💕 and <a href="https://developers.cloudflare.com/">Cloudflare</a> 💕 </h4>
|
|
14
|
-
|
|
15
|
-
<p align="center">
|
|
16
|
-
<a href="https://www.npmjs.com/package/@pluv/react">
|
|
17
|
-
<img src="https://img.shields.io/npm/v/@pluv/react" alt="npm @pluv/react" />
|
|
18
|
-
</a>
|
|
19
|
-
<a href="https://github.com/pluv-io/pluv/blob/master/LICENSE">
|
|
20
|
-
<img alt="GitHub" src="https://img.shields.io/github/license/pluv-io/pluv" alt="License MIT" />
|
|
21
|
-
</a>
|
|
22
|
-
<a href="https://commitizen.github.io/cz-cli/">
|
|
23
|
-
<img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" alt="Commitizen friendly" />
|
|
24
|
-
</a>
|
|
25
|
-
<img src="https://badgen.net/badge/-/TypeScript?icon=typescript&label&labelColor=blue&color=555555" alt="TypeScript" />
|
|
26
|
-
</p>
|
|
27
|
-
|
|
28
1
|
## `@pluv/react`
|
|
29
2
|
|
|
30
3
|
> [React.js](https://reactjs.org/) bindings for [@pluv/client](https://www.npmjs.com/package/@pluv/client).
|
|
@@ -43,114 +16,3 @@ yarn add @pluv/react @pluv/crdt-yjs yjs zod
|
|
|
43
16
|
# pnpm
|
|
44
17
|
pnpm add @pluv/react @pluv/crdt-yjs yjs zod
|
|
45
18
|
```
|
|
46
|
-
|
|
47
|
-
## Basic Example
|
|
48
|
-
|
|
49
|
-
```tsx
|
|
50
|
-
import { yjs } from "@pluv/crdt-yjs";
|
|
51
|
-
import { createBundle, createClient } from "@pluv/react";
|
|
52
|
-
import { z } from "zod";
|
|
53
|
-
// Import the PluvIO instance as a type from your server file
|
|
54
|
-
import { type io } from "./server";
|
|
55
|
-
|
|
56
|
-
// Initialize the @pluv/client client
|
|
57
|
-
const client = createClient<typeof io>({
|
|
58
|
-
authEndpoint: (room) => {
|
|
59
|
-
return `https://localhost:3000/api/authorize?room=${room}`;
|
|
60
|
-
},
|
|
61
|
-
wsEndpoint: (room) => {
|
|
62
|
-
return `ws://localhost:3000/api/room/${room}`;
|
|
63
|
-
},
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
export const {
|
|
67
|
-
// factories
|
|
68
|
-
createRoomBundle,
|
|
69
|
-
|
|
70
|
-
// components
|
|
71
|
-
PluvProvider,
|
|
72
|
-
|
|
73
|
-
// hooks
|
|
74
|
-
useClient,
|
|
75
|
-
} = createBundle(client);
|
|
76
|
-
|
|
77
|
-
export const {
|
|
78
|
-
// components
|
|
79
|
-
MockedRoomProvider,
|
|
80
|
-
PluvRoomProvider,
|
|
81
|
-
|
|
82
|
-
// utils
|
|
83
|
-
event,
|
|
84
|
-
|
|
85
|
-
// hooks
|
|
86
|
-
useBroadcast,
|
|
87
|
-
useCanRedo,
|
|
88
|
-
useCanUndo,
|
|
89
|
-
useConnection,
|
|
90
|
-
useDoc,
|
|
91
|
-
useEvent,
|
|
92
|
-
useMyPresence,
|
|
93
|
-
useMyself,
|
|
94
|
-
useOther,
|
|
95
|
-
useOthers,
|
|
96
|
-
useRedo,
|
|
97
|
-
useRoom,
|
|
98
|
-
useStorage,
|
|
99
|
-
useTransact,
|
|
100
|
-
useUndo,
|
|
101
|
-
} = createRoomBundle({
|
|
102
|
-
initialStorage: yjs.doc(() => ({
|
|
103
|
-
messages: yjs.array([
|
|
104
|
-
yjs.object({
|
|
105
|
-
message: "Hello World!",
|
|
106
|
-
name: "johnathan_doe",
|
|
107
|
-
}),
|
|
108
|
-
]),
|
|
109
|
-
})),
|
|
110
|
-
presence: z.object({
|
|
111
|
-
cursor: z.nullable(
|
|
112
|
-
z.object({
|
|
113
|
-
x: z.number(),
|
|
114
|
-
y: z.number(),
|
|
115
|
-
})
|
|
116
|
-
),
|
|
117
|
-
}),
|
|
118
|
-
});
|
|
119
|
-
|
|
120
|
-
import { FC } from "react";
|
|
121
|
-
|
|
122
|
-
export const MyPage: FC<Record<string, never>> = () => {
|
|
123
|
-
return (
|
|
124
|
-
<PluvProvider>
|
|
125
|
-
<MyRoom />
|
|
126
|
-
</PluvProvider>
|
|
127
|
-
);
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
export const MyRoom: FC<Record<string, never>> = () => {
|
|
131
|
-
const broadcast = useBroadcast();
|
|
132
|
-
|
|
133
|
-
event.RECEIVE_MESSAGE.useEvent(({ data }) => {
|
|
134
|
-
// data is typed as { message: string }
|
|
135
|
-
console.log(data.message);
|
|
136
|
-
});
|
|
137
|
-
|
|
138
|
-
return (
|
|
139
|
-
<button
|
|
140
|
-
onClick={() => {
|
|
141
|
-
broadcast.SEND_MESSAGE({
|
|
142
|
-
// TypeScript will require that message is typed as string
|
|
143
|
-
message: "Hello world!",
|
|
144
|
-
});
|
|
145
|
-
}}
|
|
146
|
-
type="button"
|
|
147
|
-
>
|
|
148
|
-
Send Message
|
|
149
|
-
</button>
|
|
150
|
-
);
|
|
151
|
-
};
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
## Reference
|
|
155
|
-
|
|
156
|
-
Check us out on [GitHub](https://github.com/pluv-io/pluv) for more information on how to use `@pluv/io`.
|
package/dist/index.d.mts
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { PluvRoomAddon, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom, MockedRoomEvents, PluvClient } from '@pluv/client';
|
|
2
2
|
export { ConnectionState, createClient } from '@pluv/client';
|
|
3
|
-
import {
|
|
4
|
-
export {
|
|
3
|
+
import { CrdtType, AbstractCrdtDocFactory, AbstractCrdtDoc, InferCrdtJson } from '@pluv/crdt';
|
|
4
|
+
export { CrdtType, InferCrdtJson } from '@pluv/crdt';
|
|
5
5
|
import * as _pluv_types from '@pluv/types';
|
|
6
6
|
import { IOLike, JsonObject, InputZodLike, Id, InferIOOutput, IOEventMessage, InferIOInput } from '@pluv/types';
|
|
7
7
|
export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types';
|
|
8
8
|
import { FC, Dispatch, ReactNode } from 'react';
|
|
9
9
|
|
|
10
|
-
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, CrdtType<any, any>> = {}> = {
|
|
11
11
|
addons?: readonly PluvRoomAddon<TIO, TPresence, TStorage>[];
|
|
12
12
|
initialStorage?: AbstractCrdtDocFactory<TStorage>;
|
|
13
13
|
presence?: InputZodLike<TPresence>;
|
|
14
14
|
};
|
|
15
|
-
type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string,
|
|
15
|
+
type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = {
|
|
16
16
|
children?: ReactNode;
|
|
17
17
|
initialStorage?: keyof TStorage extends never ? never : () => TStorage;
|
|
18
18
|
room: string;
|
|
@@ -21,10 +21,10 @@ type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record
|
|
|
21
21
|
} : {
|
|
22
22
|
initialPresence: TPresence;
|
|
23
23
|
});
|
|
24
|
-
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, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
|
|
25
25
|
events?: MockedRoomEvents<TIO>;
|
|
26
26
|
};
|
|
27
|
-
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, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
|
|
28
28
|
debug?: boolean | PluvRoomDebug<TIO>;
|
|
29
29
|
onAuthorizationFail?: (error: Error) => void;
|
|
30
30
|
};
|
|
@@ -33,14 +33,14 @@ interface SubscriptionHookOptions<T extends unknown> {
|
|
|
33
33
|
}
|
|
34
34
|
type UpdateMyPresenceAction<TPresence extends JsonObject> = Partial<TPresence> | ((oldPresence: TPresence | null) => Partial<TPresence>);
|
|
35
35
|
type BroadcastProxy<TIO extends IOLike> = (<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void) & {
|
|
36
|
-
[event in keyof InferIOInput<TIO>]: (
|
|
36
|
+
[event in keyof InferIOInput<TIO>]: (input: Id<InferIOInput<TIO>[event]>) => void;
|
|
37
37
|
};
|
|
38
38
|
type EventProxy<TIO extends IOLike> = {
|
|
39
39
|
[event in keyof InferIOOutput<TIO>]: {
|
|
40
40
|
useEvent: (callback: (data: Id<IOEventMessage<TIO, event>>) => void) => void;
|
|
41
41
|
};
|
|
42
42
|
};
|
|
43
|
-
interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string,
|
|
43
|
+
interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> {
|
|
44
44
|
MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
|
|
45
45
|
PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
|
|
46
46
|
event: EventProxy<TIO>;
|
|
@@ -52,11 +52,11 @@ interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TSt
|
|
|
52
52
|
useEvent: <TType extends keyof InferIOOutput<TIO>>(type: TType, callback: (data: Id<IOEventMessage<TIO, TType>>) => void) => void;
|
|
53
53
|
useMyPresence: <T extends unknown = TPresence>(selector?: (myPresence: TPresence) => T, options?: SubscriptionHookOptions<Id<T> | null>) => [myPresence: Id<T>, updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>];
|
|
54
54
|
useMyself: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (myself: Id<UserInfo<TIO, TPresence>>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
|
|
55
|
-
useOther: <T extends unknown = UserInfo<TIO, TPresence>>(connectionId: string, selector?: (other: UserInfo<TIO, TPresence>) => T, options?: SubscriptionHookOptions<
|
|
56
|
-
useOthers: <T extends unknown = UserInfo<TIO, TPresence
|
|
55
|
+
useOther: <T extends unknown = UserInfo<TIO, TPresence>>(connectionId: string, selector?: (other: UserInfo<TIO, TPresence>) => T, options?: SubscriptionHookOptions<T | null>) => T | null;
|
|
56
|
+
useOthers: <T extends unknown = readonly UserInfo<TIO, TPresence>[]>(selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T, options?: SubscriptionHookOptions<T>) => T;
|
|
57
57
|
useRedo: () => () => void;
|
|
58
58
|
useRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
|
|
59
|
-
useStorage: <TKey extends keyof TStorage, TData extends unknown =
|
|
59
|
+
useStorage: <TKey extends keyof TStorage, TData extends unknown = InferCrdtJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferCrdtJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: TStorage[TKey] | null];
|
|
60
60
|
useTransact: () => (fn: (storage: TStorage) => void, origin?: string) => void;
|
|
61
61
|
useUndo: () => () => void;
|
|
62
62
|
}
|
|
@@ -66,7 +66,7 @@ interface PluvProviderProps {
|
|
|
66
66
|
children?: ReactNode;
|
|
67
67
|
}
|
|
68
68
|
interface CreateBundle<TIO extends IOLike> {
|
|
69
|
-
createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string,
|
|
69
|
+
createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}>(options: CreateRoomBundleOptions<TIO, TPresence, TStorage>) => CreateRoomBundle<TIO, TPresence, TStorage>;
|
|
70
70
|
PluvProvider: FC<PluvProviderProps>;
|
|
71
71
|
useClient: () => PluvClient<TIO>;
|
|
72
72
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { PluvRoomAddon, PluvRoomDebug, WebSocketConnection, UserInfo, AbstractRoom, MockedRoomEvents, PluvClient } from '@pluv/client';
|
|
2
2
|
export { ConnectionState, createClient } from '@pluv/client';
|
|
3
|
-
import {
|
|
4
|
-
export {
|
|
3
|
+
import { CrdtType, AbstractCrdtDocFactory, AbstractCrdtDoc, InferCrdtJson } from '@pluv/crdt';
|
|
4
|
+
export { CrdtType, InferCrdtJson } from '@pluv/crdt';
|
|
5
5
|
import * as _pluv_types from '@pluv/types';
|
|
6
6
|
import { IOLike, JsonObject, InputZodLike, Id, InferIOOutput, IOEventMessage, InferIOInput } from '@pluv/types';
|
|
7
7
|
export { BaseUser, EventMessage, EventRecord, IOEventMessage } from '@pluv/types';
|
|
8
8
|
import { FC, Dispatch, ReactNode } from 'react';
|
|
9
9
|
|
|
10
|
-
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, CrdtType<any, any>> = {}> = {
|
|
11
11
|
addons?: readonly PluvRoomAddon<TIO, TPresence, TStorage>[];
|
|
12
12
|
initialStorage?: AbstractCrdtDocFactory<TStorage>;
|
|
13
13
|
presence?: InputZodLike<TPresence>;
|
|
14
14
|
};
|
|
15
|
-
type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string,
|
|
15
|
+
type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> = {
|
|
16
16
|
children?: ReactNode;
|
|
17
17
|
initialStorage?: keyof TStorage extends never ? never : () => TStorage;
|
|
18
18
|
room: string;
|
|
@@ -21,10 +21,10 @@ type BaseRoomProviderProps<TPresence extends JsonObject, TStorage extends Record
|
|
|
21
21
|
} : {
|
|
22
22
|
initialPresence: TPresence;
|
|
23
23
|
});
|
|
24
|
-
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, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
|
|
25
25
|
events?: MockedRoomEvents<TIO>;
|
|
26
26
|
};
|
|
27
|
-
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, CrdtType<any, any>>> = BaseRoomProviderProps<TPresence, TStorage> & {
|
|
28
28
|
debug?: boolean | PluvRoomDebug<TIO>;
|
|
29
29
|
onAuthorizationFail?: (error: Error) => void;
|
|
30
30
|
};
|
|
@@ -33,14 +33,14 @@ interface SubscriptionHookOptions<T extends unknown> {
|
|
|
33
33
|
}
|
|
34
34
|
type UpdateMyPresenceAction<TPresence extends JsonObject> = Partial<TPresence> | ((oldPresence: TPresence | null) => Partial<TPresence>);
|
|
35
35
|
type BroadcastProxy<TIO extends IOLike> = (<TEvent extends keyof InferIOInput<TIO>>(event: TEvent, data: Id<InferIOInput<TIO>[TEvent]>) => void) & {
|
|
36
|
-
[event in keyof InferIOInput<TIO>]: (
|
|
36
|
+
[event in keyof InferIOInput<TIO>]: (input: Id<InferIOInput<TIO>[event]>) => void;
|
|
37
37
|
};
|
|
38
38
|
type EventProxy<TIO extends IOLike> = {
|
|
39
39
|
[event in keyof InferIOOutput<TIO>]: {
|
|
40
40
|
useEvent: (callback: (data: Id<IOEventMessage<TIO, event>>) => void) => void;
|
|
41
41
|
};
|
|
42
42
|
};
|
|
43
|
-
interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string,
|
|
43
|
+
interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TStorage extends Record<string, CrdtType<any, any>>> {
|
|
44
44
|
MockedRoomProvider: FC<MockedRoomProviderProps<TIO, TPresence, TStorage>>;
|
|
45
45
|
PluvRoomProvider: FC<PluvRoomProviderProps<TIO, TPresence, TStorage>>;
|
|
46
46
|
event: EventProxy<TIO>;
|
|
@@ -52,11 +52,11 @@ interface CreateRoomBundle<TIO extends IOLike, TPresence extends JsonObject, TSt
|
|
|
52
52
|
useEvent: <TType extends keyof InferIOOutput<TIO>>(type: TType, callback: (data: Id<IOEventMessage<TIO, TType>>) => void) => void;
|
|
53
53
|
useMyPresence: <T extends unknown = TPresence>(selector?: (myPresence: TPresence) => T, options?: SubscriptionHookOptions<Id<T> | null>) => [myPresence: Id<T>, updateMyPresence: Dispatch<UpdateMyPresenceAction<TPresence>>];
|
|
54
54
|
useMyself: <T extends unknown = UserInfo<TIO, TPresence>>(selector?: (myself: Id<UserInfo<TIO, TPresence>>) => T, options?: SubscriptionHookOptions<Id<T> | null>) => Id<T> | null;
|
|
55
|
-
useOther: <T extends unknown = UserInfo<TIO, TPresence>>(connectionId: string, selector?: (other: UserInfo<TIO, TPresence>) => T, options?: SubscriptionHookOptions<
|
|
56
|
-
useOthers: <T extends unknown = UserInfo<TIO, TPresence
|
|
55
|
+
useOther: <T extends unknown = UserInfo<TIO, TPresence>>(connectionId: string, selector?: (other: UserInfo<TIO, TPresence>) => T, options?: SubscriptionHookOptions<T | null>) => T | null;
|
|
56
|
+
useOthers: <T extends unknown = readonly UserInfo<TIO, TPresence>[]>(selector?: (other: readonly Id<UserInfo<TIO, TPresence>>[]) => T, options?: SubscriptionHookOptions<T>) => T;
|
|
57
57
|
useRedo: () => () => void;
|
|
58
58
|
useRoom: () => AbstractRoom<TIO, TPresence, TStorage>;
|
|
59
|
-
useStorage: <TKey extends keyof TStorage, TData extends unknown =
|
|
59
|
+
useStorage: <TKey extends keyof TStorage, TData extends unknown = InferCrdtJson<TStorage[TKey]>>(key: TKey, selector?: (data: InferCrdtJson<TStorage[TKey]>) => TData, options?: SubscriptionHookOptions<TData | null>) => [data: TData | null, sharedType: TStorage[TKey] | null];
|
|
60
60
|
useTransact: () => (fn: (storage: TStorage) => void, origin?: string) => void;
|
|
61
61
|
useUndo: () => () => void;
|
|
62
62
|
}
|
|
@@ -66,7 +66,7 @@ interface PluvProviderProps {
|
|
|
66
66
|
children?: ReactNode;
|
|
67
67
|
}
|
|
68
68
|
interface CreateBundle<TIO extends IOLike> {
|
|
69
|
-
createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string,
|
|
69
|
+
createRoomBundle: <TPresence extends JsonObject = {}, TStorage extends Record<string, CrdtType<any, any>> = {}>(options: CreateRoomBundleOptions<TIO, TPresence, TStorage>) => CreateRoomBundle<TIO, TPresence, TStorage>;
|
|
70
70
|
PluvProvider: FC<PluvProviderProps>;
|
|
71
71
|
useClient: () => PluvClient<TIO>;
|
|
72
72
|
}
|