fix: README and the build pipeline (#5)

Author: joelshejar

README.md

@@ -40,6 +40,8 @@ Install the package via npm (or yarn):
 ```bash
 npm install react-ai-translator
 
+```
+
 # Usage
 
 Wrap your application (or a section of it) in the `TranslatorProvider` to initialize the translation model.  
@@ -97,6 +99,8 @@ function App() {
 
 export default App
 
+```
+
 
 # How It Works
 

lefthook.yml

@@ -5,7 +5,7 @@ pre-commit:
       run: pnpm biome check --write --unsafe --staged --no-errors-on-unmatched && git add -u
     typecheck:
       run: pnpm tsc
-    # build:
-    #   run: pnpm build
+    build:
+      run: pnpm build
     test:
       run: pnpm test:ci

package.json

@@ -1,13 +1,13 @@
 {
-	"name": "@joelshejar/react-ai-translator",
+	"name": "@codethicket/react-ai-translator",
 	"description": "",
-	"version": "0.0.60",
+	"version": "0.0.62",
 	"author": "Joel Rajesh",
 	"license": "MIT",
-	"keywords": [],
+	"keywords": ["translations", "ai", "react", "i18n"],
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/joelshejar/practise-translations-ai"
+		"url": "https://github.com/CodeThicket/react-ai-translator"
 	},
 	"scripts": {
 		"dev": "concurrently \"pnpm build --watch\" \"pnpm storybook\" \"pnpm test\" ",

src/hooks/useTranslation.ts

@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from "react";
 
-// Define the possible statuses returned by the worker
 type WorkerStatus =
 	| "initiate"
 	| "progress"
@@ -9,21 +8,18 @@ type WorkerStatus =
 	| "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;
@@ -36,29 +32,22 @@ interface UseTranslationReturn {
 const useTranslation = (_workerScript: string): UseTranslationReturn => {
 	const worker = useRef<Worker | null>(null);
 
-	// States for managing translation
 	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");
-
 	useEffect(() => {
 		if (!worker.current) {
-			// Initialize the worker
 			worker.current = new Worker(new URL("./worker.mjs", import.meta.url), {
 				type: "module",
 			});
 		}
 
-		// Handle worker messages
 		const onMessage = (e: MessageEvent<WorkerMessageData>) => {
 			const { status, output, progress: progressValue, file } = e.data;
 
-			console.log(status, "status");
-
 			switch (status) {
 				case "initiate": {
 					setLoading(true);
@@ -68,7 +57,6 @@ const useTranslation = (_workerScript: string): UseTranslationReturn => {
 				}
 
 				case "progress": {
-					console.log("progress");
 					setProgress((prev) =>
 						prev.map((item) =>
 							item.file === file ? { ...item, progress: progressValue } : item,
@@ -78,30 +66,24 @@ const useTranslation = (_workerScript: string): UseTranslationReturn => {
 				}
 
 				case "done": {
-					console.log("done");
 					setModelLoading(false);
 					setProgress((prev) => prev.filter((item) => item.file !== file));
 					break;
 				}
 
 				case "ready": {
-					console.log("ready");
 					setLoading(false);
 					break;
 				}
 
 				case "update": {
-					console.log("update");
-					console.log(output, "output");
-					// Append partial translations
 					if (output) {
 						setTranslatedText(output);
 					}
 					break;
 				}
 
 				case "complete": {
-					console.log("complete");
 					setLoading(false);
 					break;
 				}
@@ -111,25 +93,22 @@ const useTranslation = (_workerScript: string): UseTranslationReturn => {
 		worker.current.addEventListener("message", onMessage);
 
 		return () => {
+			// worker.current?.removeEventListener("message", onMessage)
 			// 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: string, srcLang: string, tgtLang: string) => {
-		console.log("kkkk");
 		if (!worker.current) {
 			console.error("Worker is not initialized.");
 			return;
 		}
 
 		setLoading(true);
 		setError(null);
-		setTranslatedText(""); // Reset the output
-
-		console.log("lllll", text, srcLang, tgtLang);
+		setTranslatedText("");
 
 		worker.current.postMessage({
 			text,

src/worker.ts

@@ -1,8 +1,5 @@
-// worker.ts
-
 import { type PipelineType, pipeline } from "@xenova/transformers";
 
-// Extend the global scope for a dedicated worker
 declare const self: DedicatedWorkerGlobalScope & typeof globalThis;
 
 /**
@@ -34,19 +31,12 @@ 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) => {
-		// We also add a progress callback to the pipeline so that we can
-		// track model loading.
 		self.postMessage(x);
 	});
 
-	// 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: any) => {
 			self.postMessage({
 				status: "update",
@@ -57,7 +47,6 @@ self.addEventListener("message", async (event: MessageEvent) => {
 		},
 	});
 
-	// Send the output back to the main thread
 	self.postMessage({
 		status: "complete",
 		output: output,

tsup.config.ts

@@ -17,12 +17,6 @@ const common: Options = {
 	injectStyle: false,
 	target: "es2021",
 	platform: "browser",
-	// dts: {
-	//   entry: 'src/index.js', // or whichever main file you want
-	// },
-	// loader: {
-	//   '.worker.js': 'file', // Handle worker files as static files
-	// },
 };
 
 const getPackageName = async () => {
@@ -68,9 +62,6 @@ const linkSelf = async () => {
 
 	// biome-ignore lint/suspicious/noConsoleLog: <explanation>
 	// biome-ignore lint/suspicious/noConsole: <explanation>
-	console.log(
-		`Run 'pnpm link ${await getPackageName()} --global' inside another project to consume this package.`,
-	);
 };
 
 export default defineConfig({