docs(hooks): simplify interfaces (#9)

* fix(docs): typo

* docs(hooks): simplify interfaces

docs/src/content/docs/hooks/useWorker.mdx

@@ -29,12 +29,12 @@ interface Options {
   transferable?: 'auto' | 'none';
 }
 
-const useWorker: <T extends (...funcArgs: any[]) => any>(
+const useWorker: <T extends (args: any[]) => any>(
   func: T,
   options?: Options
 ) => {
-  postMessage: (...funcArgs: Parameters<T>) => void;
-  onMessage: (callBack: (e: MessageEvent) => void) => void;
+  postMessage: (args: Parameters<T>) => void;
+  onMessage: (e: MessageEvent) => void;
   terminate: () => void;
   status: WorkerStatus;
 };

docs/src/content/docs/hooks/useWorkerFunc.mdx

@@ -30,18 +30,10 @@ interface Options {
   transferable?: 'auto' | 'none';
 }
 
-/**
- * @template T - The type of the function to be offloaded.
- * @param {T} func - The function to be offloaded.
- * @param {Options} [options] - Optional options.
- * @returns {[(...funcArgs: Parameters<T>) => Promise<ReturnType<T>>, Controller]} - An array containing the offloaded function and a Controller object.
- */
-const useWorkerFunc = <T extends (...funcArgs: any[]) => any>(
+const useWorkerFunc = <T extends (args: any[]) => any>(
   func: T,
   options?: Options
-) => {
-  return [(...funcArgs: Parameters<T>) => Promise<ReturnType<T>>, Controller];
-};
+) => [(args: Parameters<T>) => Promise<ReturnType<T>>, Controller];
 ```
 
 ## Usage
@@ -65,7 +57,7 @@ const MyCoolComponent = () => {
   };
 
   const without = () => {
-    const result = fibWorker(45); // Main thread is blocked 😪
+    const result = fibonacci(45); // Main thread is blocked 😪
     console.log(result);
   };
 
@@ -74,7 +66,7 @@ const MyCoolComponent = () => {
       <button className="btn" onClick={withWorker}>
         With Worker
       </button>
-      <button className="btn" onClick={handleClick}>
+      <button className="btn" onClick={without}>
         Without Worker
       </button>
     </div>

docs/src/content/docs/hooks/useWorkerState.mdx

@@ -23,22 +23,10 @@ interface Controller {
   terminate: () => void;
 }
 
-/**
- * @param {T} func - The function to be executed in the web worker.
- * @param {ReturnType<T>} defaultState - The arguments to be passed to the function.
- * @returns {[ReturnType<T> | null, (input: Parameters<T>) => Promise<void>,  Controller]} - An array containing the result of the function and a controller object.
- */
-const useWorkerState: <
-  R extends ReturnType<T>,
-  T extends (args: any) => any = (args: any) => any
->(
+const useWorkerState: <T extends (args: any) => any, R extends ReturnType<T>>(
   func: T,
   defaultState: R
-) => [
-  ReturnType<T> | null,
-  (...args: Parameters<T>) => Promise<void>,
-  Controller
-];
+) => [ReturnType<T> | null, (args: Parameters<T>) => Promise<void>, Controller];
 ```
 
 ## Usage

docs/src/content/docs/index.mdx

@@ -26,7 +26,7 @@ const MyCoolComponent = () => {
   };
 
   const without = () => {
-    const result = fibWorker(45); // Main thread is blocked 😪
+    const result = fibonacci(45); // Main thread is blocked 😪
     console.log(result);
   };
 
@@ -35,7 +35,7 @@ const MyCoolComponent = () => {
       <button className="btn" onClick={withWorker}>
         With Worker
       </button>
-      <button className="btn" onClick={handleClick}>
+      <button className="btn" onClick={without}>
         Without Worker
       </button>
     </div>