insite-subscriptions-react 2.0.0 → 2.0.1
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/dist/Subscription.d.ts +38 -0
- package/dist/Subscription.d.ts.map +1 -0
- package/dist/Subscription.js +67 -0
- package/dist/SubscriptionGroup.d.ts +33 -0
- package/dist/SubscriptionGroup.d.ts.map +1 -0
- package/dist/SubscriptionGroup.js +59 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +2 -0
- package/package.json +2 -2
- package/src/Subscription.tsx +5 -7
- package/src/SubscriptionGroup.tsx +5 -4
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { Component, type ReactNode } from "react";
|
|
2
|
+
import { Subscription, SubscriptionArrayWithSubscription, SubscriptionMap, SubscriptionMapWithSubscription, SubscriptionObjectWithSubscription } from "insite-subscriptions-client";
|
|
3
|
+
type Value = SubscriptionArrayWithSubscription | SubscriptionMapWithSubscription | SubscriptionObjectWithSubscription;
|
|
4
|
+
type Props = {
|
|
5
|
+
map?: boolean;
|
|
6
|
+
array?: boolean;
|
|
7
|
+
publication: string;
|
|
8
|
+
params: unknown[];
|
|
9
|
+
Item?: SubscriptionMap["Item"];
|
|
10
|
+
valueRef: (value: Value) => void;
|
|
11
|
+
consistent?: boolean;
|
|
12
|
+
children?: (isActive: boolean, value: Value) => ReactNode;
|
|
13
|
+
onUpdate?: (value: Value) => void;
|
|
14
|
+
};
|
|
15
|
+
type State = object | undefined;
|
|
16
|
+
export declare class SubscriptionComponent extends Component<Props, State> {
|
|
17
|
+
constructor(props: Props);
|
|
18
|
+
state: {} | undefined;
|
|
19
|
+
value: SubscriptionObjectWithSubscription | SubscriptionMapWithSubscription<({
|
|
20
|
+
_id: string;
|
|
21
|
+
} & Record<string, any>) | import("insite-subscriptions-client/dist/SubscriptionMap").SubscriptionMapItem> | SubscriptionArrayWithSubscription<unknown>;
|
|
22
|
+
publicationSnapshot: string | undefined;
|
|
23
|
+
get isActive(): boolean;
|
|
24
|
+
renew(publicationName: string, params: unknown[]): void;
|
|
25
|
+
subscribe(): void;
|
|
26
|
+
unsubscribe(): void;
|
|
27
|
+
shouldComponentUpdate: ((nextProps: Props) => boolean) | undefined;
|
|
28
|
+
render(): string | number | true | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null;
|
|
29
|
+
handleUpdate: () => void | undefined;
|
|
30
|
+
componentDidMount(): void;
|
|
31
|
+
componentWillUnmount(): void;
|
|
32
|
+
static defaultProps: {
|
|
33
|
+
params: never[];
|
|
34
|
+
};
|
|
35
|
+
static bindTo: typeof Subscription.bindTo;
|
|
36
|
+
}
|
|
37
|
+
export {};
|
|
38
|
+
//# sourceMappingURL=Subscription.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Subscription.d.ts","sourceRoot":"","sources":["../src/Subscription.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAIN,YAAY,EAEZ,iCAAiC,EACjC,eAAe,EACf,+BAA+B,EAE/B,kCAAkC,EAElC,MAAM,6BAA6B,CAAC;AAGrC,KAAK,KAAK,GAAG,iCAAiC,GAAG,+BAA+B,GAAG,kCAAkC,CAAC;AAEtH,KAAK,KAAK,GAAG;IACZ,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;AAOhC,qBAAa,qBAAsB,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBACrD,KAAK,EAAE,KAAK;IAmBxB,KAAK,iBAGA;IAEL,KAAK;;4JAAC;IAEN,mBAAmB,qBAG0C;IAE7D,IAAI,QAAQ,YAEX;IAED,KAAK,CAAC,eAAe,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE;IAIhD,SAAS;IAIT,WAAW;IAKX,qBAAqB,eAAmD,KAAK,0BAW3E;IAEF,MAAM;IAKN,YAAY,yBAA2C;IAEvD,iBAAiB;IAkBjB,oBAAoB;IAOpB,MAAM,CAAC,YAAY;;MAEjB;IAEF,MAAM,CAAC,MAAM,6BAAuB;CAEpC"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { Component } from "react";
|
|
2
|
+
import { getSubscriptionSymbol, renewSymbol, subscribeSymbol, Subscription, SubscriptionArray, SubscriptionMap, SubscriptionObject, unsubscribeSymbol } from "insite-subscriptions-client";
|
|
3
|
+
function isValueSubscriptionMap(props, value) {
|
|
4
|
+
return props.map === true;
|
|
5
|
+
}
|
|
6
|
+
export class SubscriptionComponent extends Component {
|
|
7
|
+
constructor(props) {
|
|
8
|
+
super(props);
|
|
9
|
+
const target = props.map ?
|
|
10
|
+
new SubscriptionMap.WithSubscription(props.publication, props.params, (() => this.handleUpdate()), false) :
|
|
11
|
+
props.array ?
|
|
12
|
+
new SubscriptionArray.WithSubscription(props.publication, props.params, (() => this.handleUpdate()), false) :
|
|
13
|
+
new SubscriptionObject.WithSubscription(props.publication, props.params, (() => this.handleUpdate()), false);
|
|
14
|
+
this.value = target;
|
|
15
|
+
if (isValueSubscriptionMap(props, target) && props.Item)
|
|
16
|
+
target.Item = props.Item;
|
|
17
|
+
props.valueRef?.(this.value);
|
|
18
|
+
}
|
|
19
|
+
state = this.props.consistent ?
|
|
20
|
+
undefined :
|
|
21
|
+
{};
|
|
22
|
+
value;
|
|
23
|
+
publicationSnapshot = this.props.consistent ?
|
|
24
|
+
undefined :
|
|
25
|
+
JSON.stringify(this.props.params) + this.props.publication;
|
|
26
|
+
get isActive() {
|
|
27
|
+
return this.value[getSubscriptionSymbol]()?.isActive ?? false;
|
|
28
|
+
}
|
|
29
|
+
renew(publicationName, params) {
|
|
30
|
+
return this.value[renewSymbol](publicationName, params);
|
|
31
|
+
}
|
|
32
|
+
subscribe() {
|
|
33
|
+
return this.value[subscribeSymbol]();
|
|
34
|
+
}
|
|
35
|
+
unsubscribe() {
|
|
36
|
+
return this.value[unsubscribeSymbol]();
|
|
37
|
+
}
|
|
38
|
+
shouldComponentUpdate = this.props.consistent ? undefined : (nextProps) => {
|
|
39
|
+
const publicationSnapshot = JSON.stringify(nextProps.params) + nextProps.publication;
|
|
40
|
+
if (this.publicationSnapshot === publicationSnapshot)
|
|
41
|
+
return true;
|
|
42
|
+
this.publicationSnapshot = publicationSnapshot;
|
|
43
|
+
this.renew(nextProps.publication, nextProps.params);
|
|
44
|
+
return false;
|
|
45
|
+
};
|
|
46
|
+
render() {
|
|
47
|
+
return this.props.children?.(this.isActive, this.value) || null;
|
|
48
|
+
}
|
|
49
|
+
handleUpdate = () => this.props.onUpdate?.(this.value);
|
|
50
|
+
componentDidMount() {
|
|
51
|
+
this.subscribe();
|
|
52
|
+
this.handleUpdate = this.props.consistent ? () => {
|
|
53
|
+
this.props.onUpdate?.(this.value);
|
|
54
|
+
this.forceUpdate();
|
|
55
|
+
} : () => {
|
|
56
|
+
this.props.onUpdate?.(this.value);
|
|
57
|
+
this.setState({});
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
componentWillUnmount() {
|
|
61
|
+
this.unsubscribe();
|
|
62
|
+
}
|
|
63
|
+
static defaultProps = {
|
|
64
|
+
params: []
|
|
65
|
+
};
|
|
66
|
+
static bindTo = Subscription.bindTo;
|
|
67
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Component, ReactNode } from "react";
|
|
2
|
+
import { Subscription, SubscriptionGroup, type SubscriptionGroupOptions, type SubscriptionGroupUnparsedDefinition } from "insite-subscriptions-client";
|
|
3
|
+
type SubscriptionGroupValues = any[] & Record<string, any>;
|
|
4
|
+
type Props = {
|
|
5
|
+
definitions: SubscriptionGroupUnparsedDefinition[];
|
|
6
|
+
target: SubscriptionGroupOptions["target"];
|
|
7
|
+
debounce: SubscriptionGroupOptions["debounce"];
|
|
8
|
+
valuesRef: (values: SubscriptionGroupValues) => void;
|
|
9
|
+
consistent: boolean;
|
|
10
|
+
children: (isLoaded: boolean, values: SubscriptionGroupValues) => ReactNode;
|
|
11
|
+
onUpdate: (group: SubscriptionGroup) => void;
|
|
12
|
+
};
|
|
13
|
+
type State = object | undefined;
|
|
14
|
+
export declare class SubscriptionGroupComponent extends Component<Props, State> {
|
|
15
|
+
constructor(props: Props);
|
|
16
|
+
group: SubscriptionGroup<SubscriptionGroupUnparsedDefinition[]>;
|
|
17
|
+
state: {} | undefined;
|
|
18
|
+
definitionsSnapshot: string | undefined;
|
|
19
|
+
get isLoaded(): boolean;
|
|
20
|
+
get isInited(): boolean;
|
|
21
|
+
get values(): any[] & Record<string, any>;
|
|
22
|
+
redefine: (definitions: SubscriptionGroupUnparsedDefinition[]) => Promise<(import("insite-subscriptions-client/dist/SubscriptionGroup/SubscriptionGroupItem").SubscriptionGroupItem<import("insite-subscriptions-client").SubscriptionGroupSubscriptionType, import("insite-subscriptions-client").SubscriptionGroupDefinition<import("insite-subscriptions-client").SubscriptionGroupSubscriptionType>> | import("insite-subscriptions-client/dist/SubscriptionGroup/SubscriptionGroupItem").SubscriptionGroupItem<import("insite-subscriptions-client").SubscriptionGroupSubscriptionType, import("insite-subscriptions-client").SubscriptionGroupDefinition<import("insite-subscriptions-client").SubscriptionGroupSubscriptionType>>[])[]>;
|
|
23
|
+
subscribe: () => (void | undefined)[];
|
|
24
|
+
unsubscribe: () => (void | undefined)[];
|
|
25
|
+
shouldComponentUpdate: ((nextProps: Props) => boolean) | undefined;
|
|
26
|
+
render(): string | number | true | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null;
|
|
27
|
+
handleUpdate: () => void;
|
|
28
|
+
componentDidMount(): void;
|
|
29
|
+
componentWillUnmount(): void;
|
|
30
|
+
static bindTo: typeof Subscription.bindTo;
|
|
31
|
+
}
|
|
32
|
+
export {};
|
|
33
|
+
//# sourceMappingURL=SubscriptionGroup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SubscriptionGroup.d.ts","sourceRoot":"","sources":["../src/SubscriptionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EACN,YAAY,EACZ,iBAAiB,EACjB,KAAK,wBAAwB,EAC7B,KAAK,mCAAmC,EACxC,MAAM,6BAA6B,CAAC;AAGrC,KAAK,uBAAuB,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE3D,KAAK,KAAK,GAAG;IACZ,WAAW,EAAE,mCAAmC,EAAE,CAAC;IACnD,MAAM,EAAE,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IAC3C,QAAQ,EAAE,wBAAwB,CAAC,UAAU,CAAC,CAAC;IAC/C,SAAS,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACrD,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,uBAAuB,KAAK,SAAS,CAAC;IAC5E,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;AAGhC,qBAAa,0BAA2B,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBAC1D,KAAK,EAAE,KAAK;IAexB,KAAK,2DAAC;IAEN,KAAK,iBAA0C;IAE/C,mBAAmB,qBAA8E;IAEjG,IAAI,QAAQ,YAEX;IAED,IAAI,QAAQ,YAEX;IAED,IAAI,MAAM,gCAET;IAED,QAAQ,gBAAiB,mCAAmC,EAAE,kpBAAsC;IAEpG,SAAS,6BAAgC;IAEzC,WAAW,6BAAkC;IAE7C,qBAAqB,eAAmD,KAAK,0BAc3E;IAEF,MAAM;IAKN,YAAY,aAA2C;IAEvD,iBAAiB;IAkBjB,oBAAoB;IASpB,MAAM,CAAC,MAAM,6BAAuB;CAEpC"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { Component } from "react";
|
|
2
|
+
import { noop } from "@nesvet/n";
|
|
3
|
+
import { Subscription, SubscriptionGroup } from "insite-subscriptions-client";
|
|
4
|
+
export class SubscriptionGroupComponent extends Component {
|
|
5
|
+
constructor(props) {
|
|
6
|
+
super(props);
|
|
7
|
+
this.group = new SubscriptionGroup(props.definitions, {
|
|
8
|
+
target: props.target,
|
|
9
|
+
debounce: props.debounce,
|
|
10
|
+
immediately: false
|
|
11
|
+
});
|
|
12
|
+
this.group.on("update", () => this.handleUpdate());
|
|
13
|
+
props.valuesRef?.(this.group.values);
|
|
14
|
+
}
|
|
15
|
+
group;
|
|
16
|
+
state = this.props.consistent ? undefined : {};
|
|
17
|
+
definitionsSnapshot = this.props.consistent ? undefined : JSON.stringify(this.props.definitions);
|
|
18
|
+
get isLoaded() {
|
|
19
|
+
return this.group.isLoaded;
|
|
20
|
+
}
|
|
21
|
+
get isInited() {
|
|
22
|
+
return this.group.isInited;
|
|
23
|
+
}
|
|
24
|
+
get values() {
|
|
25
|
+
return this.group.values;
|
|
26
|
+
}
|
|
27
|
+
redefine = (definitions) => this.group.redefine(definitions);
|
|
28
|
+
subscribe = () => this.group.subscribe();
|
|
29
|
+
unsubscribe = () => this.group.unsubscribe();
|
|
30
|
+
shouldComponentUpdate = this.props.consistent ? undefined : (nextProps) => {
|
|
31
|
+
if (this.props.target !== nextProps.target || this.props.debounce !== nextProps.debounce)
|
|
32
|
+
this.group.applyOptions({ target: nextProps.target, debounceLimit: nextProps.debounce });
|
|
33
|
+
const definitionsSnapshot = JSON.stringify(nextProps.definitions);
|
|
34
|
+
if (this.definitionsSnapshot === definitionsSnapshot)
|
|
35
|
+
return true;
|
|
36
|
+
this.definitionsSnapshot = definitionsSnapshot;
|
|
37
|
+
this.redefine(nextProps.definitions);
|
|
38
|
+
return false;
|
|
39
|
+
};
|
|
40
|
+
render() {
|
|
41
|
+
return this.props.children?.(this.group.isLoaded, this.group.values) || null;
|
|
42
|
+
}
|
|
43
|
+
handleUpdate = () => this.props.onUpdate?.(this.group);
|
|
44
|
+
componentDidMount() {
|
|
45
|
+
this.subscribe();
|
|
46
|
+
this.handleUpdate = this.props.consistent ? () => {
|
|
47
|
+
this.props.onUpdate?.(this.group);
|
|
48
|
+
this.forceUpdate();
|
|
49
|
+
} : () => {
|
|
50
|
+
this.props.onUpdate?.(this.group);
|
|
51
|
+
this.setState({});
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
componentWillUnmount() {
|
|
55
|
+
this.handleUpdate = noop;
|
|
56
|
+
this.unsubscribe();
|
|
57
|
+
}
|
|
58
|
+
static bindTo = Subscription.bindTo;
|
|
59
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,EAAE,0BAA0B,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
|
package/dist/index.js
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "insite-subscriptions-react",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "inSite subscriptions React components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./src/index.js",
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
"author": "Eugene Nesvetaev <dev@nesvet.dev> (https://nesvet.dev/)",
|
|
23
23
|
"license": "MIT",
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"insite-subscriptions-client": "^2",
|
|
26
25
|
"@nesvet/n": "^1.1.7",
|
|
26
|
+
"insite-subscriptions-client": "^2.0.2",
|
|
27
27
|
"react": "~18.2.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
package/src/Subscription.tsx
CHANGED
|
@@ -28,7 +28,7 @@ type Props = {
|
|
|
28
28
|
onUpdate?: (value: Value) => void;
|
|
29
29
|
};
|
|
30
30
|
|
|
31
|
-
type State =
|
|
31
|
+
type State = object | undefined;
|
|
32
32
|
|
|
33
33
|
function isValueSubscriptionMap(props: Props, value: Value): value is SubscriptionMapWithSubscription {
|
|
34
34
|
return props.map === true;
|
|
@@ -39,14 +39,12 @@ export class SubscriptionComponent extends Component<Props, State> {
|
|
|
39
39
|
constructor(props: Props) {
|
|
40
40
|
super(props);
|
|
41
41
|
|
|
42
|
-
const
|
|
42
|
+
const target =
|
|
43
43
|
props.map ?
|
|
44
|
-
SubscriptionMap :
|
|
44
|
+
new SubscriptionMap.WithSubscription(props.publication, props.params, (() => this.handleUpdate()), false) :
|
|
45
45
|
props.array ?
|
|
46
|
-
SubscriptionArray :
|
|
47
|
-
SubscriptionObject;
|
|
48
|
-
|
|
49
|
-
const target = new SubscriptionTarget.WithSubscription(props.publication, props.params, () => this.handleUpdate(), false);
|
|
46
|
+
new SubscriptionArray.WithSubscription(props.publication, props.params, (() => this.handleUpdate()), false) :
|
|
47
|
+
new SubscriptionObject.WithSubscription(props.publication, props.params, (() => this.handleUpdate()), false);
|
|
50
48
|
|
|
51
49
|
this.value = target;
|
|
52
50
|
|
|
@@ -3,12 +3,13 @@ import { noop } from "@nesvet/n";
|
|
|
3
3
|
import {
|
|
4
4
|
Subscription,
|
|
5
5
|
SubscriptionGroup,
|
|
6
|
-
type
|
|
7
|
-
type SubscriptionGroupUnparsedDefinition
|
|
8
|
-
type SubscriptionGroupValues
|
|
6
|
+
type SubscriptionGroupOptions,
|
|
7
|
+
type SubscriptionGroupUnparsedDefinition
|
|
9
8
|
} from "insite-subscriptions-client";
|
|
10
9
|
|
|
11
10
|
|
|
11
|
+
type SubscriptionGroupValues = any[] & Record<string, any>;// eslint-disable-line @typescript-eslint/no-explicit-any
|
|
12
|
+
|
|
12
13
|
type Props = {
|
|
13
14
|
definitions: SubscriptionGroupUnparsedDefinition[];
|
|
14
15
|
target: SubscriptionGroupOptions["target"];
|
|
@@ -19,7 +20,7 @@ type Props = {
|
|
|
19
20
|
onUpdate: (group: SubscriptionGroup) => void;
|
|
20
21
|
};
|
|
21
22
|
|
|
22
|
-
type State =
|
|
23
|
+
type State = object | undefined;
|
|
23
24
|
|
|
24
25
|
|
|
25
26
|
export class SubscriptionGroupComponent extends Component<Props, State> {
|