[IMPL] useWebWorker hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useWebWorker/UseWebWorker.tsx

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useState } from "react";
+import { useWebWorker } from "../../../../../../packages/react-tools/src"
+
+/**
+The component uses _useWebWorker_ hook to execute an heavy function in a worker to avoid burdening the main thread.
+ */
+export const UseWebWorker = () => {
+	const [ts, setTs] = useState(Date.now());
+	const [mess, setMess] = useState<string>("");
+
+	const { send } = useWebWorker({
+		url: new URL('./worker.ts', import.meta.url),
+		onMessage: useCallback((e: MessageEvent) => {
+			setMess(e.data.res.join(","))
+		}, [])
+	});
+
+	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...");
+				send("heavyTask");
+			}}
+		>
+			START
+		</button>
+	</div>
+}

apps/react-tools-demo/src/components/hooks/useWebWorker/worker.ts

@@ -0,0 +1,9 @@
+function heavyTask() {
+	const numbers: number[] = Array(55_000_000).fill(true).map(() => Math.random() * 11)
+	return numbers.slice(0, 5).map(el => Math.floor(el))
+}
+
+self.onmessage = () => {
+	const res = heavyTask();
+	self.postMessage({ res });
+}

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

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

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

@@ -41,11 +41,11 @@ useSwipe({ target, onSwipeStart, onSwipe, onSwipeEnd, options }: UseSwipeProps):
 object
 > - __param.target__: _RefObject<Element>|Element_  
 element on which attach swipe event.
-> - __param.onSwipeStart?__: _(e: PointerEvent|TouchEvent) => void_  
+> - __param.onSwipeStart?__: _(e: MouseEvent|TouchEvent) => void_  
 callback that will be executed when swipe starts.
-> - __param.onSwipe?__: _(e: PointerEvent|TouchEvent, direction: SwipeDirection, delta: {x: number, y: number}) => void_  
+> - __param.onSwipe?__: _(e: MouseEvent|TouchEvent, direction: SwipeDirection, delta: {x: number, y: number}) => void_  
 callback that will be executed when swipe moves.
-> - __param.onSwipeEnd?__: _(e: PointerEvent|TouchEvent, direction: SwipeDirection, delta: { x: number, y: number }) => void_  
+> - __param.onSwipeEnd?__: _(e: MouseEvent|TouchEvent, direction: SwipeDirection, delta: { x: number, y: number }) => void_  
 callback that will be executed when swipe ends.
 > - __param.options?__: _Object_  
 object to set option for listener.

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

@@ -0,0 +1,71 @@
+# useWebWorker
+Hook to use [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API), handling registration and communication.
+
+## Usage
+
+```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)
+		}, [])
+	});
+
+	useEffect(() => {
+		const id = setInterval(() => setTs(Date.now()), 1);
+		return () => clearInterval(id);
+	}, []);
+
+	return <div>
+		<p>Timestamp: {ts}</p>
+		<p>Result: {mess ? mess : res ? res.toString() : ""}</p>
+		<button
+			onClick={() => {
+				setMess("Pending...");
+				send("heavyTask");
+			}}
+		>
+			START
+		</button>
+	</div>
+}
+```
+
+> The component uses _useWebWorker_ hook to execute an heavy function in a worker to avoid burdening the main thread.
+
+
+## API
+
+```tsx
+useWebWorker({ url, options, onMessage, onError, onMessageError }: UseWebWorkerProps): UseWebWorkerResult
+```
+
+> ### Params
+>
+> - __param__: _UseWebWorkerProps_  
+object
+> - __param.url?__: _string|URL_  
+A string representing the URL of the script the worker will execute. It must obey the same-origin policy.
+> - __param.options?__: _WorkerOptions_  
+An object containing option properties that can be set when creating the object instance.
+> - __param.onMessage?__: _(e: MessageEvent)=>void_  
+function that will be executed when a message occurred.
+> - __param.onMessageError?__: _(e: MessageEvent)=>void_  
+function that will be executed when a messageError occurred.
+> - __param.onError?__: _(e: Event)=>void_  
+function that will be executed when an error occurred.
+>
+
+> ### Returns
+>
+> __result__:  _UseWebWorkerResult_  
+> Object with these properties:
+> - __send__: function to send a message to worker.
+> - __terminate__: function to terminate worker.
+>

packages/react-tools/README.md

@@ -119,7 +119,7 @@
 	- [x] usePermission
 	- [x] useMediaDevices
 	- [x] useDisplayMedia
-	- [ ] useWebWorker (https://vueuse.org/core/useWebWorker/)
+	- [x] useWebWorker
 	- [ ] useWebWorkerFn (https://vueuse.org/core/useWebWorkerFn/)
 	- [ ] useIndexedDB
 	- [ ] useFetch (with suspense ???)

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

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

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

@@ -0,0 +1,53 @@
+import { useCallback, useRef } from "react"
+import { UseWebWorkerProps, UseWebWorkerResult } from "../models";
+
+/**
+ * **`useWebWorker`**: Hook to use [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API), handling registration and communication.
+ * @param {UseWebWorkerProps} param - object
+ * @param {string|URL} [param.url] - A string representing the URL of the script the worker will execute. It must obey the same-origin policy.
+ * @param {WorkerOptions} [param.options] - An object containing option properties that can be set when creating the object instance.
+ * @param {(e: MessageEvent)=>void} [param.onMessage] - function that will be executed when a message occurred.
+ * @param {(e: MessageEvent)=>void} [param.onMessageError] - function that will be executed when a messageError occurred.
+ * @param {(e: Event)=>void} [param.onError] - function that will be executed when an error occurred.
+ * @returns {UseWebWorkerResult} result
+ * Object with these properties:
+ * - __send__: function to send a message to worker.
+ * - __terminate__: function to terminate worker.
+ */
+export const useWebWorker = ({ url, options, onMessage, onError, onMessageError }: UseWebWorkerProps): UseWebWorkerResult => {
+	const worker = useRef<Worker>();
+	const terminated = useRef(false);
+
+	if (!worker.current && !terminated.current) {
+		const path = url instanceof URL ? url : new URL(url, import.meta.url);
+		worker.current = new Worker(path, options);
+		worker.current.onerror = (e: Event) => {
+			!!onError && onError(e);
+		}
+		worker.current.onmessageerror = (e: MessageEvent) => {
+			!!onMessageError && onMessageError(e);
+		}
+		worker.current.onmessage = (e: MessageEvent) => {
+			!!onMessage && onMessage(e);
+		}
+	}
+
+	const send: UseWebWorkerResult["send"] = useCallback(<T>(message: T, transfer?: Transferable[] | StructuredSerializeOptions) => {
+		if (Array.isArray(transfer)) {
+			worker.current?.postMessage(message, transfer);
+		} else {
+			worker.current?.postMessage(message, transfer);
+		}
+	}, []);
+
+	const terminate = useCallback(() => {
+		worker.current?.terminate();
+		terminated.current = true;
+		worker.current = undefined;
+	}, []);
+
+	return {
+		send,
+		terminate
+	}
+}

packages/react-tools/src/index.ts

@@ -77,7 +77,9 @@ export type {
 	CaptureController,
 	SwipeDirection,
 	UseSwipeProps,
-	UseSwipeResult
+	UseSwipeResult,
+	UseWebWorkerProps,
+	UseWebWorkerResult
 } from './models'
 
 export {
@@ -179,7 +181,8 @@ export {
 	useMediaDevices,
 	usePermission,
 	useDisplayMedia,
-	useSwipe
+	useSwipe,
+	useWebWorker
 } from './hooks'
 
 export {

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

@@ -24,4 +24,5 @@ export type { UseEventSourceProps, UseEventSourceResult } from './useEventSource
 export type { UseWebSocketProps, UseWebSocketResult } from './useWebSocket.model';
 export type { UseMediaDevicesProps, UseMediaDevicesResult, TDisplayMediaStreamOptions, CaptureController } from './useMediaDevices.model';
 export type { TPermissionName, UsePermissionResult, TPermissionState } from './usePermission.model';
-export type { SwipeDirection, UseSwipeProps, UseSwipeResult } from './useSwipe.model';
+export type { SwipeDirection, UseSwipeProps, UseSwipeResult } from './useSwipe.model';
+export type { UseWebWorkerProps, UseWebWorkerResult } from './useWebWorker.model';