feat: implement typescript for the core lib files

Author: joelshejar

biome.json

@@ -56,6 +56,7 @@
 					"fix": "none",
 					"level": "warn"
 				},
+				"noExplicitAny": "warn",
 				"noConsoleLog": {
 					"fix": "none",
 					"level": "warn"

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@joelshejar/react-ai-translator",
 	"description": "",
-	"version": "0.0.59",
+	"version": "0.0.60",
 	"author": "Joel Rajesh",
 	"license": "MIT",
 	"keywords": [],

src/hooks/index.js renamed to src/hooks/index.ts

@@ -1,14 +1,47 @@
 import { useEffect, useRef, useState } from "react";
 
-const useTranslation = () => {
-	const worker = useRef(null);
+// Define the possible statuses returned by the worker
+type WorkerStatus =
+	| "initiate"
+	| "progress"
+	| "done"
+	| "ready"
+	| "update"
+	| "complete";
+
+// Define the structure of the progress items
+interface ProgressItem {
+	file?: string;
+	progress?: number;
+}
+
+// Define the data structure for worker messages
+interface WorkerMessageData {
+	status: WorkerStatus;
+	output?: string;
+	progress?: number;
+	file?: string;
+}
+
+// Hook return type
+interface UseTranslationReturn {
+	translate: (text: string, srcLang: string, tgtLang: string) => void;
+	translatedText: string;
+	loading: boolean;
+	modelLoading: boolean;
+	progress: ProgressItem[];
+	error: string | null;
+}
+
+const useTranslation = (_workerScript: string): UseTranslationReturn => {
+	const worker = useRef<Worker | null>(null);
 
 	// States for managing translation
-	const [loading, setLoading] = useState(false);
-	const [modelLoading, setModelLoading] = useState(false);
-	const [progress, setProgress] = useState([]);
-	const [translatedText, setTranslatedText] = useState("");
-	const [error, setError] = useState(null);
+	const [loading, setLoading] = useState<boolean>(false);
+	const [modelLoading, setModelLoading] = useState<boolean>(false);
+	const [progress, setProgress] = useState<ProgressItem[]>([]);
+	const [translatedText, setTranslatedText] = useState<string>("");
+	const [error, setError] = useState<string | null>(null);
 
 	console.log("hhhhh");
 
@@ -21,7 +54,7 @@ const useTranslation = () => {
 		}
 
 		// Handle worker messages
-		const onMessage = (e) => {
+		const onMessage = (e: MessageEvent<WorkerMessageData>) => {
 			const { status, output, progress: progressValue, file } = e.data;
 
 			console.log(status, "status");
@@ -62,7 +95,9 @@ const useTranslation = () => {
 					console.log("update");
 					console.log(output, "output");
 					// Append partial translations
-					setTranslatedText(output);
+					if (output) {
+						setTranslatedText(output);
+					}
 					break;
 				}
 
@@ -77,13 +112,14 @@ const useTranslation = () => {
 		worker.current.addEventListener("message", onMessage);
 
 		return () => {
-			// worker.current.terminate(); // Clean up worker on unmount
+			// If you want the worker to be terminated on unmount, uncomment below:
+			// worker.current?.terminate();
 			// worker.current = null;
 		};
 	}, []);
 
 	// Function to send translation requests to the worker
-	const translate = (text, srcLang, tgtLang) => {
+	const translate = (text: string, srcLang: string, tgtLang: string) => {
 		console.log("kkkk");
 		if (!worker.current) {
 			console.error("Worker is not initialized.");

src/hooks/useTranslation.js renamed to src/hooks/useTranslation.ts

@@ -1,4 +1,9 @@
-import { pipeline } from "@xenova/transformers";
+// worker.ts
+
+import { type PipelineType, pipeline } from "@xenova/transformers";
+
+// Extend the global scope for a dedicated worker
+declare const self: DedicatedWorkerGlobalScope & typeof globalThis;
 
 /**
  * This class uses the Singleton pattern to ensure that only one instance of the
@@ -8,23 +13,24 @@ import { pipeline } from "@xenova/transformers";
 class MyTranslationPipeline {
 	static task = "translation";
 	static model = "Xenova/nllb-200-distilled-600M";
-	static instance = null;
+	static instance: any = null;
 
-	static async getInstance(progressCallback = null) {
+	static async getInstance(
+		progressCallback: ((x: any) => void) | undefined = undefined,
+	): Promise<any> {
 		if (MyTranslationPipeline.instance === null) {
 			MyTranslationPipeline.instance = pipeline(
-				MyTranslationPipeline.task,
+				MyTranslationPipeline.task as PipelineType,
 				MyTranslationPipeline.model,
-				{ dtype: "q8", progress_callback: progressCallback },
+				{ quantized: true, progress_callback: progressCallback },
 			);
 		}
-
 		return MyTranslationPipeline.instance;
 	}
 }
 
 // Listen for messages from the main thread
-self.addEventListener("message", async (event) => {
+self.addEventListener("message", async (event: MessageEvent) => {
 	// Retrieve the translation pipeline. When called for the first time,
 	// this will load the pipeline and save it for future use.
 	const translator = await MyTranslationPipeline.getInstance((x) => {
@@ -33,15 +39,15 @@ self.addEventListener("message", async (event) => {
 		self.postMessage(x);
 	});
 
-	// Actually perform the translation
-
+	// Log the language codes
 	console.log(event.data.tgt_lang, event.data.src_lang, "langcode");
+
+	// Actually perform the translation
 	const output = await translator?.(event.data.text, {
 		tgt_lang: event.data.tgt_lang,
 		src_lang: event.data.src_lang,
-
 		// Allows for partial output
-		callback_function: (x) => {
+		callback_function: (x: any) => {
 			self.postMessage({
 				status: "update",
 				output: translator.tokenizer.decode(x[0].output_token_ids, {

src/index.js renamed to src/index.ts

@@ -3,9 +3,10 @@
 		"esModuleInterop": true,
 		"jsx": "react-jsx",
 		"module": "ESNext",
-		"moduleResolution": "Bundler",
+		"moduleResolution": "node",
 		"skipLibCheck": true,
 		"strict": true,
-		"noEmit": true
+		"noEmit": true,
+		"lib": ["ESNext", "DOM", "WebWorker"]
 	}
 }

src/worker.js renamed to src/worker.ts

@@ -5,7 +5,7 @@ import path from "node:path";
 import { type Options, defineConfig } from "tsup";
 
 const common: Options = {
-	entry: ["src/index.js", "src/worker.js"],
+	entry: ["src/index.ts", "src/worker.ts"],
 	treeshake: false,
 	sourcemap: "inline",
 	minify: true,