[IMPL] useWebWorkerFn hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useWebWorkerFn/UseWebWorkerFn.tsx

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from "react";
+import { useWebWorkerFn } from "../../../../../../packages/react-tools/src";
+
+/**
+The component uses _useWebWorkerFn_ hook to execute an expensive function in a worker. Same function can be executed in main thread. Try to execute it to see the differences.
+ */
+export const UseWebWorkerFn = () => {
+	const [ts, setTs] = useState(Date.now());
+	const [mess, setMess] = useState<string>("");
+	const heavyTask = useCallback(() => {
+		const numbers: number[] = Array(5_000_000).fill(true).map(() => Math.random() * 11)
+		return numbers.slice(0, 5).map(el => Math.floor(el))
+	}, []);
+	const execute = useWebWorkerFn(heavyTask);
+
+	useEffect(() => {
+		const id = setInterval(() => setTs(Date.now()), 1);
+		return () => clearInterval(id);
+	}, []);
+
+	return <div>
+		<p>Timestamp: {ts}</p>
+		<p>Result: {mess ? mess : ""}</p>
+		<button
+			onClick={() => {
+				setMess("Pending...");
+				setMess(heavyTask().join(","))
+			}}
+		>
+			Start in Main Thread
+		</button>
+		<button
+			onClick={() => {
+				setMess("Pending...");
+				execute().then(res => setMess(res.join(",")));
+			}}
+		>
+			Start in Web Worker
+		</button>
+	</div>
+}

apps/react-tools-demo/src/constants/components.ts

@@ -116,7 +116,8 @@ export const COMPONENTS = [
 			"usePermission",
 			"useMediaDevices",
 			"useDisplayMedia",
-			"useWebWorker"
+			"useWebWorker",
+			"useWebWorkerFn"
 		]
 	],
 	//UTILS

apps/react-tools-demo/src/markdown/useWebWorker.md

@@ -6,14 +6,12 @@ Hook to use [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Wo
 ```tsx
 export const UseWebWorker = () => {
 	const [ts, setTs] = useState(Date.now());
-	const [res, setRes] = useState<number[]>([]);
 	const [mess, setMess] = useState<string>("");
 
 	const { send } = useWebWorker({
 		url: new URL('./worker.ts', import.meta.url),
 		onMessage: useCallback((e: MessageEvent) => {
-			setMess("");
-			setRes(e.data)
+			setMess(e.data.res.join(","))
 		}, [])
 	});
 
@@ -24,7 +22,7 @@ export const UseWebWorker = () => {
 
 	return <div>
 		<p>Timestamp: {ts}</p>
-		<p>Result: {mess ? mess : res ? res.toString() : ""}</p>
+		<p>Result: {mess ? mess : ""}</p>
 		<button
 			onClick={() => {
 				setMess("Pending...");

apps/react-tools-demo/src/markdown/useWebWorkerFn.md

@@ -0,0 +1,65 @@
+# useWebWorkerFn
+Hook to run expensive functions using a Web Worker without blocking the UI handling execution as Promise.
+
+## Usage
+
+```tsx
+export const UseWebWorkerFn = () => {
+	const [ts, setTs] = useState(Date.now());
+	const [mess, setMess] = useState<string>("");
+	const heavyTask = useCallback(() => {
+		const numbers: number[] = Array(55_000_000).fill(true).map(() => Math.random() * 11)
+		return numbers.slice(0, 5).map(el => Math.floor(el))
+	}, []);
+	const execute = useWebWorkerFn(heavyTask);
+
+	useEffect(() => {
+		const id = setInterval(() => setTs(Date.now()), 1);
+		return () => clearInterval(id);
+	}, []);
+
+	return <div>
+		<p>Timestamp: {ts}</p>
+		<p>Result: {mess ? mess : ""}</p>
+		<button
+			onClick={() => {
+				setMess("Pending...");
+				setMess(heavyTask().join(","))
+			}}
+		>
+			Start in Main Thread
+		</button>
+		<button
+			onClick={() => {
+				setMess("Pending...");
+				execute().then(res => setMess(res.join(",")));
+			}}
+		>
+			Start in Web Worker
+		</button>
+	</div>
+}
+```
+
+> The component uses _useWebWorkerFn_ hook to execute an expensive function in a worker. Same function can be executed in main thread. Try to execute it to see the differences.
+
+
+## API
+
+```tsx
+useWebWorkerFn<T extends (...args: unknown[]) => unknown>(fn: UseWebWorkerFnProps<T>["fn"], deps?: UseWebWorkerFnProps<T>["deps"]): UseWebWorkerFnResult<T>
+```
+
+> ### Params
+>
+> - __fn__: _UseWebWorkerFnProps["fn"]_  
+Expensive function to be executed in worker.
+> - __deps?__: _UseWebWorkerFnProps["deps"]_  
+An array that contains the external dependencies needed to run the worker.
+>
+
+> ### Returns
+>
+> __execute__: function to execute expansive function: return a promise.
+> - _UseWebWorkerFnResult_  
+>

packages/react-tools/README.md

@@ -120,7 +120,7 @@
 	- [x] useMediaDevices
 	- [x] useDisplayMedia
 	- [x] useWebWorker
-	- [ ] useWebWorkerFn (https://vueuse.org/core/useWebWorkerFn/)
+	- [x] useWebWorkerFn
 	- [ ] useIndexedDB
 	- [ ] useFetch (with suspense ???)
 	- [ ] useLock - (https://developer.mozilla.org/en-US/docs/Web/API/LockManager/request)

packages/react-tools/src/hooks/index.ts

@@ -97,4 +97,5 @@ export { useMediaDevices } from './useMediaDevices';
 export { usePermission } from './usePermission';
 export { useDisplayMedia } from './useDisplayMedia';
 export { useSwipe } from './useSwipe';
-export { useWebWorker } from './useWebWorker';
+export { useWebWorker } from './useWebWorker';
+export { useWebWorkerFn } from './useWebWorkerFn';

packages/react-tools/src/hooks/useEventSource.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef } from "react";
 import { UseEventSourceProps, UseEventSourceResult } from "../models";
-import { useSyncExternalStore } from ".";
+import { useEffectOnce, useSyncExternalStore } from ".";
 
 /**
  * **`useEventSource`**: Hook to handle an [EventSource](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) or [Server-Sent-Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) connection to an HTTP server, which sends events in text/event-stream format.
@@ -20,7 +20,6 @@ import { useSyncExternalStore } from ".";
  * - __close__: function that closes connection.
  */
 export const useEventSource = <T>({ url, opts, events, immediateConnection, onOpen, onError, onMessage }: UseEventSourceProps): UseEventSourceResult<T> => {
-	const alreadyOpened = useRef(false);
 	const notifyRef = useRef<() => void>();
 	const sourceRef = useRef<EventSource>();
 	const eventsHandler = useRef((events || []).map(evt => {
@@ -37,44 +36,6 @@ export const useEventSource = <T>({ url, opts, events, immediateConnection, onOp
 		status: immediateConnection && url ? "CONNECTING" : "READY",
 		data: null
 	});
-	if (url && immediateConnection && !alreadyOpened.current) {
-		alreadyOpened.current = true;
-		sourceRef.current = new EventSource(url, opts);
-	}
-
-	if (sourceRef.current) {
-		sourceRef.current.onopen = (evt: Event) => {
-			!!onOpen && onOpen(evt);
-			cachedState.current.status = "OPENED";
-			notifyRef.current && notifyRef.current();
-		};
-		sourceRef.current.onerror = (evt: Event) => {
-			!!onError && onError(evt);
-			cachedState.current.status = "CLOSED";
-			notifyRef.current && notifyRef.current();
-		};
-		sourceRef.current.onmessage = (evt: MessageEvent<T>) => {
-			!!onMessage && onMessage(evt);
-			cachedState.current.data = evt.data;
-			notifyRef.current && notifyRef.current();
-		};
-		eventsHandler.current.forEach(evt => {
-			sourceRef.current?.removeEventListener(evt.name, evt.hanlder);
-		});
-		eventsHandler.current = (events || []).map(evt => {
-			return {
-				name: evt.name,
-				hanlder: (e: MessageEvent) => {
-					!!evt.handler && evt.handler(e);
-					cachedState.current.data = e.data;
-					notifyRef.current && notifyRef.current();
-				}
-			}
-		});
-		eventsHandler.current.forEach(evt => {
-			sourceRef.current?.addEventListener(evt.name, evt.hanlder);
-		});
-	}
 
 	const open = useCallback((urlParam?: UseEventSourceProps["url"]) => {
 		if (url || urlParam) {
@@ -117,6 +78,46 @@ export const useEventSource = <T>({ url, opts, events, immediateConnection, onOp
 
 	const data = useMemo(() => (state.data), [state.data]);
 
+	useEffectOnce(() => {
+		if (url && immediateConnection) {
+			sourceRef.current = new EventSource(url, opts);
+		}
+	})
+
+	if (sourceRef.current) {
+		sourceRef.current.onopen = (evt: Event) => {
+			!!onOpen && onOpen(evt);
+			cachedState.current.status = "OPENED";
+			notifyRef.current && notifyRef.current();
+		};
+		sourceRef.current.onerror = (evt: Event) => {
+			!!onError && onError(evt);
+			cachedState.current.status = "CLOSED";
+			notifyRef.current && notifyRef.current();
+		};
+		sourceRef.current.onmessage = (evt: MessageEvent<T>) => {
+			!!onMessage && onMessage(evt);
+			cachedState.current.data = evt.data;
+			notifyRef.current && notifyRef.current();
+		};
+		eventsHandler.current.forEach(evt => {
+			sourceRef.current?.removeEventListener(evt.name, evt.hanlder);
+		});
+		eventsHandler.current = (events || []).map(evt => {
+			return {
+				name: evt.name,
+				hanlder: (e: MessageEvent) => {
+					!!evt.handler && evt.handler(e);
+					cachedState.current.data = e.data;
+					notifyRef.current && notifyRef.current();
+				}
+			}
+		});
+		eventsHandler.current.forEach(evt => {
+			sourceRef.current?.addEventListener(evt.name, evt.hanlder);
+		});
+	}
+
 	return {
 		status: state.status,
 		data,

packages/react-tools/src/hooks/useSpeechRecognition.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef } from "react";
 import { SpeechRecognition, SpeechRecognitionConfig, SpeechRecognitionEvent, SpeechRecognitionState, UseSpeechRecognitionProps } from "../models";
-import { useSyncExternalStore } from ".";
+import { useEffectOnce, useSyncExternalStore } from ".";
 
 /**
  * **`useSpeechRecognition`**: Hook to use _SpeechRecognition API_. Refer to [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition).
@@ -40,7 +40,6 @@ export const useSpeechRecognition = ({ alreadyStarted, defaultConfig, onAudioSta
 	const recognition = useRef<SpeechRecognition>();
 	const notifRef = useRef<() => void>();
 	const isListening = useRef(false);
-	const firstExecution = useRef(true);
 	const result = useRef<{ results: SpeechRecognitionEvent["results"]|null, resultIndex: SpeechRecognitionEvent["resultIndex"]|null }>({resultIndex: null, results: null});
 
 	const start = useCallback((config?: typeof defaultConfig) => {
@@ -145,11 +144,12 @@ export const useSpeechRecognition = ({ alreadyStarted, defaultConfig, onAudioSta
 		}, [])
 	);
 
-	if (firstExecution.current && isSupported.current && alreadyStarted) {
-		isListening.current = true;
-		firstExecution.current = false;
-		start();
-	}
+	useEffectOnce(() => {
+		if (isSupported.current && alreadyStarted) {
+			isListening.current = true;
+			start();
+		}
+	})
 
 	return [state, start, stop.current, reset.current];
 }