From bfbe6379bad761d5f3ca07731aa0346e3c5fea5f Mon Sep 17 00:00:00 2001 From: Sasha Date: Wed, 8 Oct 2025 00:36:42 +0200 Subject: [PATCH] remove not needed logic from waku/react package --- package-lock.json | 2 +- packages/react/package.json | 2 +- packages/react/src/ContentPairProvider.tsx | 53 ----------- packages/react/src/WakuProvider.tsx | 34 +++---- packages/react/src/index.ts | 10 +- packages/react/src/types.ts | 21 +---- packages/react/src/useCreateContentPair.ts | 59 ------------ packages/react/src/useCreateWaku.ts | 17 ++-- packages/react/src/useFilterMessages.ts | 89 ------------------ packages/react/src/useLightPush.ts | 44 --------- packages/react/src/useStoreMessages.ts | 101 --------------------- 11 files changed, 27 insertions(+), 405 deletions(-) delete mode 100644 packages/react/src/ContentPairProvider.tsx delete mode 100644 packages/react/src/useCreateContentPair.ts delete mode 100644 packages/react/src/useFilterMessages.ts delete mode 100644 packages/react/src/useLightPush.ts delete mode 100644 packages/react/src/useStoreMessages.ts diff --git a/package-lock.json b/package-lock.json index bbf3c8b0c1..a3577599e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37553,7 +37553,7 @@ "node": ">=22" }, "peerDependencies": { - "react": "^16.8.0 || ^17 || ^18" + "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "packages/react/node_modules/@typescript-eslint/eslint-plugin": { diff --git a/packages/react/package.json b/packages/react/package.json index 1b043adfba..00354e1730 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -86,7 +86,7 @@ "rollup-plugin-typescript2": "^0.36.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17 || ^18" + "react": "^16.8.0 || ^17 || ^18 || ^19" }, "files": [ "dist", diff --git a/packages/react/src/ContentPairProvider.tsx b/packages/react/src/ContentPairProvider.tsx deleted file mode 100644 index f1fb622bb8..0000000000 --- a/packages/react/src/ContentPairProvider.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from "react"; - -import type { ContentPair, ReactChildrenProps } from "./types.js"; -import { useCreateContentPair } from "./useCreateContentPair.js"; - -type ContentPairContextType = Partial; - -const ContentPairContext = React.createContext({ - decoder: undefined, - encoder: undefined -}); - -/** - * Hook to retrieve Encoder/Decoder pair from Context. - * @example - * const { encoder, decoder } = useContentPair(); - * @returns {Object} { encoder, decoder } - */ -export const useContentPair = (): ContentPairContextType => - React.useContext(ContentPairContext); - -type ContentPairProviderProps = ReactChildrenProps & { - contentTopic: string; - ephemeral?: boolean; -}; - -/** - * Provider for creating Encoder/Decoder pair based on contentTopic - * @example - * const App = (props) => ( - * - * - * - * ); - * const Component = (props) => { - * const { encoder, decoder } = useContentPair(); - * ... - * }; - * @param {string} contentTopic - content topic for configuring the pair - * @param {boolean} ephemeral - flag to set messages ephemeral according to RFC https://rfc.vac.dev/spec/14/ - * @returns React ContentPair Provider component - */ -export const ContentPairProvider: React.FunctionComponent< - ContentPairProviderProps -> = (props) => { - const result = useCreateContentPair(props.contentTopic, props.ephemeral); - - return ( - - {props.children} - - ); -}; diff --git a/packages/react/src/WakuProvider.tsx b/packages/react/src/WakuProvider.tsx index e09ba1dedc..6fcabbe643 100644 --- a/packages/react/src/WakuProvider.tsx +++ b/packages/react/src/WakuProvider.tsx @@ -1,11 +1,7 @@ -import type { CreateNodeOptions, IWaku } from "@waku/interfaces"; +import type { CreateNodeOptions, IWaku, LightNode } from "@waku/interfaces"; import React from "react"; -import type { - BootstrapNodeOptions, - CreateNodeResult, - ReactChildrenProps -} from "./types.js"; +import type { CreateNodeResult, ReactChildrenProps } from "./types.js"; import { useCreateLightNode } from "./useCreateWaku.js"; type WakuContextType = CreateNodeResult; @@ -28,35 +24,31 @@ const WakuContext = React.createContext>({ * const { node, isLoading, error } = useWaku(); * @returns WakuContext */ -export const useWaku = (): WakuContextType => - React.useContext(WakuContext) as WakuContextType; +export const useWaku = (): WakuContextType => + React.useContext(WakuContext) as WakuContextType; -type ProviderProps = ReactChildrenProps & BootstrapNodeOptions; +type ProviderProps = ReactChildrenProps & { options: T }; /** - * Provider for creating Light Node based on options passed. + * Provider for creating Waku node based on options passed. * @example * const App = (props) => ( - * + * * - * + * * ); * const Component = (props) => { - * const { node, isLoading, error } = useWaku(); + * const { node, isLoading, error } = useWaku(); * ... * }; * @param {Object} props - options to create a node and other React props * @param {CreateNodeOptions} props.options - optional options for creating Light Node - * @param {Protocols} props.protocols - optional protocols list to initiate node with * @returns React Light Node provider component */ -export const LightNodeProvider: React.FunctionComponent< - ProviderProps -> = (props) => { - const result = useCreateLightNode({ - options: props.options, - protocols: props.protocols - }); +export const WakuProvider = ( + props: ProviderProps +): React.ReactElement => { + const result = useCreateLightNode(props.options); return ( {props.children} diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index d0800195b1..cf41fa9f5f 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -1,8 +1,2 @@ -export { ContentPairProvider, useContentPair } from "./ContentPairProvider.js"; -export { CreateNodeOptions } from "./types.js"; -export { useCreateContentPair } from "./useCreateContentPair.js"; -export { useCreateLightNode } from "./useCreateWaku.js"; -export { useFilterMessages } from "./useFilterMessages.js"; -export { useLightPush } from "./useLightPush.js"; -export { useStoreMessages } from "./useStoreMessages.js"; -export { LightNodeProvider, useWaku } from "./WakuProvider.js"; +export type { CreateNodeOptions } from "./types.js"; +export { WakuProvider, useWaku } from "./WakuProvider.js"; diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index e8f1006112..fbf70d9b50 100644 --- a/packages/react/src/types.ts +++ b/packages/react/src/types.ts @@ -1,13 +1,8 @@ -import type { - IDecodedMessage, - IDecoder, - IEncoder, - IWaku, - Protocols -} from "@waku/interfaces"; +import type { IWaku } from "@waku/interfaces"; +import type React from "react"; export type { CreateNodeOptions, AutoSharding } from "@waku/interfaces"; -export type HookState = { +type HookState = { isLoading: boolean; error: undefined | string; }; @@ -16,16 +11,6 @@ export type CreateNodeResult = HookState & { node: undefined | T; }; -export type BootstrapNodeOptions> = { - options?: T; - protocols?: Protocols[]; -}; - -export type ContentPair = { - encoder: IEncoder; - decoder: IDecoder; -}; - export type ReactChildrenProps = { children?: React.ReactNode; }; diff --git a/packages/react/src/useCreateContentPair.ts b/packages/react/src/useCreateContentPair.ts deleted file mode 100644 index be426b8b30..0000000000 --- a/packages/react/src/useCreateContentPair.ts +++ /dev/null @@ -1,59 +0,0 @@ -import type { - AutoSharding, - IDecodedMessage, - IDecoder, - IEncoder -} from "@waku/interfaces"; -import { createDecoder, createEncoder } from "@waku/sdk"; -import { createRoutingInfo } from "@waku/utils"; -import React from "react"; - -import type { ContentPair } from "./types.js"; - -const defaultNetworkConfig: AutoSharding = { - clusterId: 0, - numShardsInCluster: 8 -}; - -/** - * Creates Encoder / Decoder pair for a given contentTopic. - * @param {string} contentTopic - topic to orient to - * @param {boolean} ephemeral - makes messages ephemeral, default to false - * @param {AutoSharding} networkConfig - optional network config, defaults to cluster 0 with 8 shards - * @returns {Object} Encoder / Decoder pair - */ -export const useCreateContentPair = ( - contentTopic: string, - ephemeral = false, - networkConfig: AutoSharding = defaultNetworkConfig -): ContentPair => { - const routingInfo = React.useMemo( - () => createRoutingInfo(networkConfig, { contentTopic }), - [contentTopic, networkConfig.clusterId, networkConfig.numShardsInCluster] - ); - - const [encoder, setEncoder] = React.useState( - createEncoder({ contentTopic, ephemeral, routingInfo }) - ); - const [decoder, setDecoder] = React.useState>( - createDecoder(contentTopic, routingInfo) - ); - - React.useEffect(() => { - const newRoutingInfo = createRoutingInfo(networkConfig, { contentTopic }); - setEncoder( - createEncoder({ contentTopic, ephemeral, routingInfo: newRoutingInfo }) - ); - setDecoder(createDecoder(contentTopic, newRoutingInfo)); - }, [ - contentTopic, - ephemeral, - networkConfig.clusterId, - networkConfig.numShardsInCluster - ]); - - return { - encoder, - decoder - }; -}; diff --git a/packages/react/src/useCreateWaku.ts b/packages/react/src/useCreateWaku.ts index 7ad96bb5b0..8924d642a6 100644 --- a/packages/react/src/useCreateWaku.ts +++ b/packages/react/src/useCreateWaku.ts @@ -1,22 +1,19 @@ import type { CreateNodeOptions, IWaku, LightNode } from "@waku/interfaces"; -import { createLightNode, waitForRemotePeer } from "@waku/sdk"; +import { createLightNode } from "@waku/sdk"; import React from "react"; -import type { BootstrapNodeOptions, CreateNodeResult } from "./types.js"; +import type { CreateNodeResult } from "./types.js"; type NodeFactory> = (options?: T) => Promise; -type CreateNodeParams< - N extends IWaku, - T = Record -> = BootstrapNodeOptions & { +type CreateNodeParams> = T & { factory: NodeFactory; }; const useCreateNode = >( params: CreateNodeParams ): CreateNodeResult => { - const { factory, options, protocols = [] } = params; + const { factory, ...options } = params; const [node, setNode] = React.useState(undefined); const [isLoading, setLoading] = React.useState(true); @@ -26,14 +23,14 @@ const useCreateNode = >( let cancelled = false; setLoading(true); - factory(options) + factory(options as T) .then(async (node) => { if (cancelled) { return; } await node.start(); - await waitForRemotePeer(node, protocols); + await node.waitForPeers(); setNode(node); setLoading(false); @@ -56,7 +53,7 @@ const useCreateNode = >( }; export const useCreateLightNode = ( - params?: BootstrapNodeOptions + params?: CreateNodeOptions ): CreateNodeResult => { return useCreateNode({ ...params, diff --git a/packages/react/src/useFilterMessages.ts b/packages/react/src/useFilterMessages.ts deleted file mode 100644 index 9a7f7bf6a7..0000000000 --- a/packages/react/src/useFilterMessages.ts +++ /dev/null @@ -1,89 +0,0 @@ -import type { - IDecodedMessage, - IDecoder, - IFilter, - IWaku -} from "@waku/interfaces"; -import { Logger } from "@waku/utils"; -import React from "react"; - -import type { HookState } from "./types.js"; - -const log = new Logger("react:useFilterMessages"); - -type AbstractFilterNode = IWaku & { - filter: IFilter; -}; - -type UseFilterMessagesParams = { - node: undefined | AbstractFilterNode; - decoder: undefined | IDecoder; -}; - -type UseFilterMessagesResult = HookState & { - messages: IDecodedMessage[]; -}; - -/** - * Returns messages from Filter subscription and keeps them up to date - * @example - * const { isLoading, error, message } = useFilterMessages({node, decoder}); - * @param {Object} node - node that implements Filter, hook does nothing if undefined - * @param {Object} decoder - decoder to use for subscribing, hook does nothing if undefined - * @returns {Object} hook state (isLoading, error) and messages array - */ -export const useFilterMessages = ( - params: UseFilterMessagesParams -): UseFilterMessagesResult => { - const { node, decoder } = params; - - const [error, setError] = React.useState(undefined); - const [isLoading, setLoading] = React.useState(false); - const [messages, setMessage] = React.useState([]); - - const pushMessage = React.useCallback( - (message: IDecodedMessage): void => { - if (!message) { - return; - } - - setMessage((prev) => [...prev, message]); - }, - [setMessage] - ); - - React.useEffect(() => { - if (!node || !decoder) { - return; - } - - setLoading(true); - - node.filter - .subscribe([decoder], pushMessage) - .then((success) => { - setLoading(false); - if (!success) { - setError("Failed to subscribe to filter"); - } - }) - .catch((err) => { - setLoading(false); - setError( - `Failed to subscribe to filter: ${err?.message || "no message"}` - ); - }); - - return () => { - node.filter.unsubscribe([decoder]).catch((err) => { - log.error("Failed to unsubscribe:", err); - }); - }; - }, [node, decoder, pushMessage, setError, setLoading]); - - return { - error, - messages, - isLoading - }; -}; diff --git a/packages/react/src/useLightPush.ts b/packages/react/src/useLightPush.ts deleted file mode 100644 index 10c2f2f5e3..0000000000 --- a/packages/react/src/useLightPush.ts +++ /dev/null @@ -1,44 +0,0 @@ -import type { - IEncoder, - ILightPush, - IMessage, - IWaku, - LightPushSDKResult -} from "@waku/interfaces"; -import React from "react"; - -type AbstractLightPushNode = IWaku & { - lightPush: ILightPush; -}; - -type UseLightPushParams = { - encoder: undefined | IEncoder; - node: undefined | AbstractLightPushNode; -}; - -type PushFn = (message: IMessage) => Promise; - -type UseLightPushResult = { - push?: undefined | PushFn; -}; - -export const useLightPush = ( - params: UseLightPushParams -): UseLightPushResult => { - const { node, encoder } = params; - - const push = React.useCallback( - (message) => { - return node!.lightPush.send(encoder as IEncoder, message); - }, - [node, encoder] - ); - - if (!node && !encoder) { - return {}; - } - - return { - push - }; -}; diff --git a/packages/react/src/useStoreMessages.ts b/packages/react/src/useStoreMessages.ts deleted file mode 100644 index 2d0aade7c7..0000000000 --- a/packages/react/src/useStoreMessages.ts +++ /dev/null @@ -1,101 +0,0 @@ -import type { - IDecodedMessage, - IDecoder, - IStore, - IWaku, - QueryRequestParams -} from "@waku/interfaces"; -import React from "react"; - -import type { HookState } from "./types.js"; - -type AbstractStoreNode = IWaku & { - store: IStore; -}; - -type UseStoreMessagesParams = { - node: undefined | AbstractStoreNode; - decoder: undefined | IDecoder; - options: QueryRequestParams; -}; - -type UseStoreMessagesResult = HookState & { - messages: IDecodedMessage[]; -}; - -/** - * Hook for retrieving messages from Store protocol based on options - * @example - * const { isLoading, error, messages } = useStoreMessages({node, decoder, options}); - * @param {Object} node - node that implement Store, hook does nothing if undefined - * @param {Object} decoder - decoder to use for getting messages, hook does nothing if undefined - * @param {QueryRequestParams} options - options to initiate query to get messages - * @returns {Object} hook state (isLoading, error) and messages array - */ -export const useStoreMessages = ( - params: UseStoreMessagesParams -): UseStoreMessagesResult => { - const { node, decoder, options } = params; - - const [error, setError] = React.useState(undefined); - const [isLoading, setLoading] = React.useState(false); - const [messages, setMessage] = React.useState([]); - - const pushMessage = React.useCallback( - (newMessages: IDecodedMessage[]): void => { - if (!newMessages || !newMessages.length) { - return; - } - - setMessage((prev) => [...prev, ...newMessages]); - }, - [setMessage] - ); - - React.useEffect(() => { - if (!node || !decoder) { - return; - } - - let cancelled = false; - setLoading(true); - - Promise.resolve() - .then(async () => { - for await (const promises of node.store.queryGenerator( - [decoder], - options - )) { - if (cancelled) { - return; - } - - const messagesRaw = await Promise.all(promises); - const filteredMessages = messagesRaw.filter( - (v): v is IDecodedMessage => !!v - ); - - pushMessage(filteredMessages); - } - - setLoading(false); - }) - .catch((err) => { - setLoading(false); - setError( - `Failed to query messages from store: ${err?.message || "no message"}` - ); - }); - - return () => { - cancelled = true; - }; - // TODO: missing dependency on options, it will prevent consecutive update if options change - }, [node, decoder, pushMessage, setError, setLoading]); - - return { - error, - isLoading, - messages - }; -};