insite-subscriptions-react 1.0.148 → 2.0.0

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "insite-subscriptions-react",
-  "version": "1.0.148",
+  "version": "2.0.0",
   "description": "inSite subscriptions React components",
   "type": "module",
-  "main": "./lib/index.js",
-  "module": "./lib/index.js",
-  "packageManager": "bun@1.1.9",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "packageManager": "bun@1.1.26",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc -p ."
   },
   "repository": {
     "type": "git",
@@ -21,11 +22,13 @@
   "author": "Eugene Nesvetaev <dev@nesvet.dev> (https://nesvet.dev/)",
   "license": "MIT",
   "dependencies": {
-    "insite-subscriptions-client": "^1",
-    "@nesvet/n": "^1",
-    "react": "18.2"
+    "insite-subscriptions-client": "^2",
+    "@nesvet/n": "^1.1.7",
+    "react": "~18.2.0"
   },
   "devDependencies": {
-    "@nesvet/eslint-config": "^1"
+    "@nesvet/eslint-config": "^2.0.25",
+    "@types/react": "^18.3.5",
+    "typescript": "^5.5.4"
   }
 }

package/{lib/Subscription.jsx → src/Subscription.tsx}

@@ -1,18 +1,42 @@
+import { Component, type ReactNode } from "react";
 import {
 	getSubscriptionSymbol,
 	renewSymbol,
 	subscribeSymbol,
 	Subscription,
 	SubscriptionArray,
+	SubscriptionArrayWithSubscription,
 	SubscriptionMap,
+	SubscriptionMapWithSubscription,
 	SubscriptionObject,
+	SubscriptionObjectWithSubscription,
 	unsubscribeSymbol
 } from "insite-subscriptions-client";
-import { Component } from "react";
 
 
-export class SubscriptionComponent extends Component {
-	constructor(props) {
+type Value = SubscriptionArrayWithSubscription | SubscriptionMapWithSubscription | SubscriptionObjectWithSubscription;
+
+type Props = {
+	map?: boolean;
+	array?: boolean;
+	publication: string;
+	params: unknown[];
+	Item?: SubscriptionMap["Item"];
+	valueRef: (value: Value) => void;
+	consistent?: boolean;
+	children?: (isActive: boolean, value: Value) => ReactNode;
+	onUpdate?: (value: Value) => void;
+};
+
+type State = {} | undefined;// eslint-disable-line @typescript-eslint/ban-types
+
+function isValueSubscriptionMap(props: Props, value: Value): value is SubscriptionMapWithSubscription {
+	return props.map === true;
+}
+
+
+export class SubscriptionComponent extends Component<Props, State> {
+	constructor(props: Props) {
 		super(props);
 		
 		const SubscriptionTarget =
@@ -26,7 +50,7 @@ export class SubscriptionComponent extends Component {
 		
 		this.value = target;
 		
-		if (props.map && props.Item)
+		if (isValueSubscriptionMap(props, target) && props.Item)
 			target.Item = props.Item;
 		
 		props.valueRef?.(this.value);
@@ -38,6 +62,8 @@ export class SubscriptionComponent extends Component {
 			undefined :
 			{};
 	
+	value;
+	
 	publicationSnapshot =
 		this.props.consistent ?
 			undefined :
@@ -47,7 +73,7 @@ export class SubscriptionComponent extends Component {
 		return this.value[getSubscriptionSymbol]()?.isActive ?? false;
 	}
 	
-	renew(publicationName, params) {
+	renew(publicationName: string, params: unknown[]) {
 		return this.value[renewSymbol](publicationName, params);
 	}
 	
@@ -60,7 +86,7 @@ export class SubscriptionComponent extends Component {
 	}
 	
 	
-	shouldComponentUpdate = this.props.consistent ? undefined : nextProps => {
+	shouldComponentUpdate = this.props.consistent ? undefined : (nextProps: Props) => {
 		const publicationSnapshot = JSON.stringify(nextProps.params) + nextProps.publication;
 		
 		if (this.publicationSnapshot === publicationSnapshot)

package/{lib/SubscriptionGroup.jsx → src/SubscriptionGroup.tsx}

@@ -1,10 +1,29 @@
+import { Component, ReactNode } from "react";
 import { noop } from "@nesvet/n";
-import { Subscription, SubscriptionGroup } from "insite-subscriptions-client";
-import { Component } from "react";
+import {
+	Subscription,
+	SubscriptionGroup,
+	type Options as SubscriptionGroupOptions,
+	type SubscriptionGroupUnparsedDefinition,
+	type SubscriptionGroupValues
+} from "insite-subscriptions-client";
 
 
-export class SubscriptionGroupComponent extends Component {
-	constructor(props) {
+type Props = {
+	definitions: SubscriptionGroupUnparsedDefinition[];
+	target: SubscriptionGroupOptions["target"];
+	debounce: SubscriptionGroupOptions["debounce"];
+	valuesRef: (values: SubscriptionGroupValues) => void;
+	consistent: boolean;
+	children: (isLoaded: boolean, values: SubscriptionGroupValues) => ReactNode;
+	onUpdate: (group: SubscriptionGroup) => void;
+};
+
+type State = {} | undefined;// eslint-disable-line @typescript-eslint/ban-types
+
+
+export class SubscriptionGroupComponent extends Component<Props, State> {
+	constructor(props: Props) {
 		super(props);
 		
 		this.group = new SubscriptionGroup(props.definitions, {
@@ -19,6 +38,8 @@ export class SubscriptionGroupComponent extends Component {
 		
 	}
 	
+	group;
+	
 	state = this.props.consistent ? undefined : {};
 	
 	definitionsSnapshot = this.props.consistent ? undefined : JSON.stringify(this.props.definitions);
@@ -35,13 +56,13 @@ export class SubscriptionGroupComponent extends Component {
 		return this.group.values;
 	}
 	
-	redefine = definitions => this.group.redefine(definitions);
+	redefine = (definitions: SubscriptionGroupUnparsedDefinition[]) => this.group.redefine(definitions);
 	
 	subscribe = () => this.group.subscribe();
 	
 	unsubscribe = () => this.group.unsubscribe();
 	
-	shouldComponentUpdate = this.props.consistent ? undefined : nextProps => {
+	shouldComponentUpdate = this.props.consistent ? undefined : (nextProps: Props) => {
 		if (this.props.target !== nextProps.target || this.props.debounce !== nextProps.debounce)
 			this.group.applyOptions({ target: nextProps.target, debounceLimit: nextProps.debounce });