salat 3.2.0 → 4.0.0

package/dist/app.js

@@ -1,58 +1,13 @@
 #!/usr/bin/env node
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
 // Project's dependencies
-const chalk_1 = __importDefault(require("chalk"));
-const utils_1 = require("./utils");
-// Project's data
-const constants_1 = require("./constants");
-const cities_json_1 = __importDefault(require("./data/cities.json"));
-// Setting up localStorage
-const node_localstorage_1 = require("node-localstorage");
-const args = process.argv;
+import { render } from "ink";
+import React from "react";
+import App from "./ui.js"; // Note the .js extension for ESM imports
+// Project's setup
 process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
-// Logging function
-const green = (msg) => console.log(chalk_1.default.green(msg));
-// Cast citiesData to City[] properly
-const cities = cities_json_1.default;
-const localStorage = new node_localstorage_1.LocalStorage(constants_1.LOCAL_STORAGE_PATH);
+const args = process.argv;
 const cityNameArg = args[2];
-const cityName = (0, utils_1.getCityName)(cityNameArg, cities);
-// Convert string ID to number since getCityId returns number and getData expects number
-const cityId = (0, utils_1.getCityId)(cityName, cities);
-const main = async () => {
-    // Printing a banner ('cause I'm cool and I can do it XD)
-    green(constants_1.BANNER);
-    const storageKey = `${cityName.toLowerCase()}_${new Date().toLocaleDateString()}`;
-    let item = localStorage.getItem(storageKey);
-    // Disable localStorage for local development
-    if (process.env.NODE_ENV === "development") {
-        console.log("development mode: localStorage is disabled");
-        item = null;
-    }
-    let prayers = null;
-    if (item) {
-        prayers = JSON.parse(item);
-    }
-    else {
-        try {
-            const data = await (0, utils_1.getData)(cityId);
-            prayers = (0, utils_1.parsePrayerTimesFromResponse)(data);
-            localStorage.setItem(storageKey, JSON.stringify(prayers));
-        }
-        catch (ex) {
-            //TODO: Use a more descriptive error message
-            console.error("Something went wrong!");
-            console.log(ex);
-            return;
-        }
-    }
-    console.clear();
-    (0, utils_1.displayResult)(prayers, cityName);
+const main = () => {
+    render(React.createElement(App, { cityNameArg }));
 };
-(async () => {
-    await main();
-})();
+main();

package/dist/constants.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LOCAL_STORAGE_PATH = exports.DEFAULT_CITY = exports.NOT_FOUND_ERROR = exports.BANNER = exports.API_URL = void 0;
-exports.API_URL = "https://www.habous.gov.ma/prieres/horaire-api.php";
-exports.BANNER = ``;
-exports.NOT_FOUND_ERROR = `
+export const API_URL = "https://www.habous.gov.ma/prieres/horaire-api.php";
+export const BANNER = ``;
+export const NOT_FOUND_ERROR = `
   Your city was not found in the list
   Using the default city
   ----------------------
   You may need to check the spelling
   `;
-exports.DEFAULT_CITY = "Marrakech";
-exports.LOCAL_STORAGE_PATH = "./storage";
+export const DEFAULT_CITY = "Marrakech";
+export const LOCAL_STORAGE_PATH = "./storage";

package/dist/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/ui.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LOCAL_STORAGE_PATH } from "#constants";
+import { getCityId, getCityName, getData, parsePrayerTimesFromResponse, tConv24, } from "#utils";
+import { Box, Text, useApp } from "ink";
+import { useEffect, useState } from "react";
+// @ts-ignore
+import { LocalStorage } from "node-localstorage";
+import citiesData from "./data/cities.json" with { type: "json" };
+const cities = citiesData;
+const localStorage = new LocalStorage(LOCAL_STORAGE_PATH);
+const App = ({ cityNameArg }) => {
+    const { exit } = useApp();
+    const [prayerTimes, setPrayerTimes] = useState(null);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [resolvedCityName, setResolvedCityName] = useState("");
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const name = getCityName(cityNameArg, cities);
+                setResolvedCityName(name);
+                const storageKey = `${name.toLowerCase()}_${new Date().toLocaleDateString()}`;
+                let item = localStorage.getItem(storageKey);
+                // Disable localStorage for local development
+                if (process.env.NODE_ENV === "development") {
+                    item = null;
+                }
+                if (item) {
+                    setPrayerTimes(JSON.parse(item));
+                }
+                else {
+                    const cityId = getCityId(name, cities);
+                    const data = await getData(cityId);
+                    const prayers = parsePrayerTimesFromResponse(data);
+                    setPrayerTimes(prayers);
+                    localStorage.setItem(storageKey, JSON.stringify(prayers));
+                }
+            }
+            catch (err) {
+                setError(err.message || "An error occurred");
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchData();
+    }, [cityNameArg]);
+    useEffect(() => {
+        if (!loading && (prayerTimes || error)) {
+            // Small delay to ensure render happens
+            // Ink might need a tick to flush the output to stdout
+            const timer = setTimeout(() => {
+                exit();
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+    }, [loading, prayerTimes, error, exit]);
+    if (loading) {
+        return _jsx(Text, { children: "Loading prayer times..." });
+    }
+    if (error) {
+        return _jsxs(Text, { color: "red", children: ["Error: ", error] });
+    }
+    if (!prayerTimes) {
+        return _jsx(Text, { color: "red", children: "Could not fetch prayer times." });
+    }
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["\uD83E\uDDED ", resolvedCityName, ", Morocco"] }) }), _jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["\uD83D\uDCC5 ", new Date().toDateString()] }) }), _jsx(Box, { flexDirection: "column", children: Object.entries(prayerTimes).map(([prayer, time]) => (_jsxs(Box, { children: [_jsx(Box, { width: 10, children: _jsx(Text, { color: "white", children: prayer }) }), _jsx(Box, { marginRight: 2, children: _jsx(Text, { children: "-->" }) }), _jsx(Text, { color: "green", children: tConv24(time) })] }, prayer))) })] }));
+};
+export default App;

package/dist/utils.js

@@ -1,45 +1,34 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.displayResult = exports.parsePrayerTimesFromResponse = exports.getData = exports.getCityId = exports.getCityName = void 0;
-const chalk_1 = __importDefault(require("chalk"));
-const domino_1 = __importDefault(require("domino"));
-const node_fetch_1 = __importDefault(require("node-fetch"));
-const constants_1 = require("./constants");
-const prayers_json_1 = __importDefault(require("./data/prayers.json"));
-const error = (msg) => console.log(chalk_1.default.red(msg));
-const getCityName = (arg, cities) => {
+import { API_URL, DEFAULT_CITY, NOT_FOUND_ERROR } from "#constants";
+import domino from "domino";
+import fetch from "node-fetch";
+import prayersData from "./data/prayers.json" with { type: "json" };
+export const getCityName = (arg, cities) => {
     if (arg == null)
-        return constants_1.DEFAULT_CITY;
+        return DEFAULT_CITY;
     const index = getCityIndex(arg, cities);
     if (index === -1) {
-        error(constants_1.NOT_FOUND_ERROR);
-        return constants_1.DEFAULT_CITY;
+        console.error(NOT_FOUND_ERROR);
+        return DEFAULT_CITY;
     }
     return arg;
 };
-exports.getCityName = getCityName;
-const getCityId = (arg, cities) => {
+export const getCityId = (arg, cities) => {
     const parsed = parseInt(arg);
     if (parsed && cities.length >= parsed) {
         return parsed;
     }
     return getCityIndex(arg, cities) + 1;
 };
-exports.getCityId = getCityId;
 const getCityIndex = (city, cities) => cities.map((e) => e.name.toLowerCase()).indexOf(city.toLowerCase());
-const getData = async (cityId) => {
-    const response = await (0, node_fetch_1.default)(`${constants_1.API_URL}?ville=${cityId}`, {});
+export const getData = async (cityId) => {
+    const response = await fetch(`${API_URL}?ville=${cityId}`, {});
     return await response.text();
 };
-exports.getData = getData;
-const parsePrayerTimesFromResponse = (response) => {
-    const window = domino_1.default.createWindow(response);
+export const parsePrayerTimesFromResponse = (response) => {
+    const window = domino.createWindow(response);
     const document = window.document;
     const tds = document.getElementsByTagName("td");
-    const prayers = JSON.parse(JSON.stringify(prayers_json_1.default));
+    const prayers = JSON.parse(JSON.stringify(prayersData));
     let j = 0;
     for (let i = 1; i < tds.length && j < prayers.length; i += 2) {
         prayers[j].time = tds[i].textContent.trim();
@@ -53,8 +42,7 @@ const parsePrayerTimesFromResponse = (response) => {
         return acc;
     }, {});
 };
-exports.parsePrayerTimesFromResponse = parsePrayerTimesFromResponse;
-function tConv24(time24) {
+export function tConv24(time24) {
     const [hours, minutes] = time24.split(":");
     const hour = Number(hours);
     const formattedHour = hour % 12 || 12;
@@ -64,13 +52,3 @@ function tConv24(time24) {
     const ampm = hour < 12 ? "AM" : "PM";
     return `${formattedTime} ${ampm}`;
 }
-const displayResult = (prayers, city) => {
-    if (!prayers)
-        return;
-    console.log(` 🧭 ${city}, Morocco\n\n 📆 ${new Date().toDateString()}\n`);
-    Object.keys(prayers).forEach((key) => {
-        console.log(` ${chalk_1.default.cyan(key.padEnd(7, " "))} --> ${chalk_1.default.green(tConv24(prayers[key]))}`);
-    });
-    console.log("\n");
-};
-exports.displayResult = displayResult;

package/dist/utils.test.js

@@ -0,0 +1,77 @@
+import * as constants from '#constants';
+import { getCityId, getCityName, parsePrayerTimesFromResponse } from '#utils';
+import { describe, expect, it, vi } from 'vitest';
+// Mock cities data
+const mockCities = [
+    { id: 1, name: 'Casablanca' },
+    { id: 2, name: 'Rabat' },
+    { id: 3, name: 'Fes' },
+];
+describe('utils', () => {
+    describe('getCityName', () => {
+        it('should return the default city if no argument is provided', () => {
+            expect(getCityName(undefined, mockCities)).toBe(constants.DEFAULT_CITY);
+        });
+        it('should return the city name if it exists', () => {
+            expect(getCityName('Casablanca', mockCities)).toBe('Casablanca');
+        });
+        it('should return default city and log error if city does not exist', () => {
+            // Spy on console.error using vitest
+            const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => { });
+            const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+            expect(getCityName('UnknownCity', mockCities)).toBe(constants.DEFAULT_CITY);
+            // We expect some error message to be logged. 
+            // The actual implementation logs with chalk.red, so we just check it was called.
+            expect(consoleLogSpy.mock.calls.length + consoleErrorSpy.mock.calls.length).toBeGreaterThan(0);
+            consoleLogSpy.mockRestore();
+            consoleErrorSpy.mockRestore();
+        });
+        it('should be case insensitive', () => {
+            expect(getCityName('casablanca', mockCities)).toBe('casablanca');
+            expect(getCityName('RaBaT', mockCities)).toBe('RaBaT');
+        });
+    });
+    describe('getCityId', () => {
+        it('should return the ID if a number is provided as string', () => {
+            expect(getCityId('2', mockCities)).toBe(2);
+        });
+        it('should return the ID based on index + 1 if name is provided', () => {
+            // 'Casablanca' is at index 0, so ID should be 1
+            expect(getCityId('Casablanca', mockCities)).toBe(1);
+            // 'Rabat' is at index 1, so ID should be 2
+            expect(getCityId('Rabat', mockCities)).toBe(2);
+        });
+        it('should handle case insensitivity for city names', () => {
+            expect(getCityId('fes', mockCities)).toBe(3);
+        });
+    });
+    describe('parsePrayerTimesFromResponse', () => {
+        it('should parse prayer times correctly from HTML', () => {
+            const mockHtml = `
+            <html>
+                <body>
+                    <table>
+                        <tr><td>Fajr</td><td>05:30</td></tr>
+                        <tr><td>Chourouk</td><td>07:00</td></tr>
+                        <tr><td>Dhuhr</td><td>12:30</td></tr>
+                        <tr><td>Asr</td><td>15:45</td></tr>
+                        <tr><td>Maghrib</td><td>18:20</td></tr>
+                        <tr><td>Isha</td><td>19:50</td></tr>
+                    </table>
+                </body>
+            </html>
+            `;
+            // Note: The actual implementation expects td elements in a specific order (key, value, key, value...)
+            // And it relies on prayersData keys. 
+            // We need to match the structure expected by the function.
+            // The function iterates tds with i=1, i+=2. meaning it takes index 1, 3, 5... as times.
+            const results = parsePrayerTimesFromResponse(mockHtml);
+            // Based on default prayers.json keys, let's assume we expect those values.
+            // Since we mocked the HTML, if the code pushes to 'prayers' array from 'prayersData',
+            // and then updates .time property from tds.
+            // checking if it returns an object with times
+            expect(results).toHaveProperty('Fajr');
+            expect(results).toHaveProperty('Dhuhr');
+        });
+    });
+});

package/package.json

@@ -1,24 +1,30 @@
 {
   "name": "salat",
-  "version": "3.2.0",
+  "version": "4.0.0",
+  "imports": {
+    "#*": "./dist/*.js"
+  },
   "description": "Daily Moroccan prayers time, right in your console, at the tip of your fingers",
   "homepage": "https://kafiln.github.io/salat-cli/",
   "main": "dist/app.js",
   "bin": {
     "salat": "dist/app.js"
   },
+  "type": "module",
   "dependencies": {
-    "chalk": "^2.4.2",
     "domino": "^2.1.6",
-    "node-fetch": "^2.7.0",
-    "node-localstorage": "^1.3.1"
+    "ink": "^6.6.0",
+    "node-fetch": "^3.3.2",
+    "node-localstorage": "^3.0.5",
+    "react": "^19.2.4"
   },
   "scripts": {
-    "dev": "ts-node src/app.ts",
+    "dev": "node --no-warnings --loader ts-node/esm src/app.ts",
     "build": "tsc",
     "start": "node dist/app.js",
     "prestart": "npm run build",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test": "vitest run"
   },
   "keywords": [
     "prayers",
@@ -35,8 +41,10 @@
     "@types/node": "^25.2.1",
     "@types/node-fetch": "^2.6.13",
     "@types/node-localstorage": "^1.3.3",
-    "nodemon": "^3.1.0",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
     "ts-node": "^10.9.2",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
   }
 }

package/src/app.ts

@@ -1,72 +1,18 @@
 #!/usr/bin/env node
 
 // Project's dependencies
-import chalk from "chalk";
-import {
-  displayResult,
-  getCityId,
-  getCityName,
-  getData,
-  parsePrayerTimesFromResponse,
-} from "./utils";
+import { render } from "ink";
+import React from "react";
+import App from "./ui.js"; // Note the .js extension for ESM imports
 
-// Project's data
-import { BANNER, LOCAL_STORAGE_PATH } from "./constants";
-import citiesData from "./data/cities.json";
-import { City, PrayerTimes } from "./types";
-
-// Setting up localStorage
-import { LocalStorage } from "node-localstorage";
-
-const args = process.argv;
+// Project's setup
 process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";
 
-// Logging function
-const green = (msg: string) => console.log(chalk.green(msg));
-
-// Cast citiesData to City[] properly
-const cities: City[] = citiesData as City[];
-
-const localStorage = new LocalStorage(LOCAL_STORAGE_PATH);
-
+const args = process.argv;
 const cityNameArg = args[2];
-const cityName = getCityName(cityNameArg, cities);
-// Convert string ID to number since getCityId returns number and getData expects number
-const cityId = getCityId(cityName, cities);
-
-const main = async () => {
-  // Printing a banner ('cause I'm cool and I can do it XD)
-  green(BANNER);
-
-  const storageKey = `${cityName.toLowerCase()}_${new Date().toLocaleDateString()}`;
-  let item = localStorage.getItem(storageKey);
-
-  // Disable localStorage for local development
-  if (process.env.NODE_ENV === "development") {
-    console.log("development mode: localStorage is disabled");
-    item = null;
-  }
-  let prayers: PrayerTimes | null = null;
-
-  if (item) {
-    prayers = JSON.parse(item);
-  } else {
-    try {
-      const data = await getData(cityId);
-      prayers = parsePrayerTimesFromResponse(data);
-      localStorage.setItem(storageKey, JSON.stringify(prayers));
-    } catch (ex) {
-      //TODO: Use a more descriptive error message
-      console.error("Something went wrong!");
-      console.log(ex);
-      return;
-    }
-  }
 
-  console.clear();
-  displayResult(prayers, cityName);
+const main = () => {
+  render(React.createElement(App, { cityNameArg }));
 };
 
-(async () => {
-  await main();
-})();
+main();

package/src/ui.tsx

@@ -0,0 +1,111 @@
+import { LOCAL_STORAGE_PATH } from "#constants";
+import { City, PrayerTimes } from "#types";
+import {
+    getCityId,
+    getCityName,
+    getData,
+    parsePrayerTimesFromResponse,
+    tConv24,
+} from "#utils";
+import { Box, Text, useApp } from "ink";
+import React, { useEffect, useState } from "react";
+// @ts-ignore
+import { LocalStorage } from "node-localstorage";
+import citiesData from "./data/cities.json" with { type: "json" };
+
+const cities: City[] = citiesData as City[];
+const localStorage = new LocalStorage(LOCAL_STORAGE_PATH);
+
+interface AppProps {
+	cityNameArg?: string;
+}
+
+const App: React.FC<AppProps> = ({ cityNameArg }) => {
+	const { exit } = useApp();
+	const [prayerTimes, setPrayerTimes] = useState<PrayerTimes | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [loading, setLoading] = useState<boolean>(true);
+	const [resolvedCityName, setResolvedCityName] = useState<string>("");
+
+	useEffect(() => {
+		const fetchData = async () => {
+			try {
+				const name = getCityName(cityNameArg, cities);
+				setResolvedCityName(name);
+
+				const storageKey = `${name.toLowerCase()}_${new Date().toLocaleDateString()}`;
+				let item = localStorage.getItem(storageKey);
+
+				// Disable localStorage for local development
+				if (process.env.NODE_ENV === "development") {
+					item = null;
+				}
+
+				if (item) {
+					setPrayerTimes(JSON.parse(item));
+				} else {
+					const cityId = getCityId(name, cities);
+					const data = await getData(cityId);
+					const prayers = parsePrayerTimesFromResponse(data);
+					setPrayerTimes(prayers);
+					localStorage.setItem(storageKey, JSON.stringify(prayers));
+				}
+			} catch (err: any) {
+				setError(err.message || "An error occurred");
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchData();
+	}, [cityNameArg]);
+
+	useEffect(() => {
+		if (!loading && (prayerTimes || error)) {
+			// Small delay to ensure render happens
+			// Ink might need a tick to flush the output to stdout
+			const timer = setTimeout(() => {
+				exit();
+			}, 100);
+			return () => clearTimeout(timer);
+		}
+	}, [loading, prayerTimes, error, exit]);
+
+	if (loading) {
+		return <Text>Loading prayer times...</Text>;
+	}
+
+	if (error) {
+		return <Text color="red">Error: {error}</Text>;
+	}
+
+	if (!prayerTimes) {
+		return <Text color="red">Could not fetch prayer times.</Text>;
+	}
+
+	return (
+		<Box flexDirection="column" padding={1}>
+			<Box marginBottom={1}>
+				<Text>🧭 {resolvedCityName}, Morocco</Text>
+			</Box>
+			<Box marginBottom={1}>
+				<Text>📅 {new Date().toDateString()}</Text>
+			</Box>
+			<Box flexDirection="column">
+				{Object.entries(prayerTimes).map(([prayer, time]) => (
+					<Box key={prayer}>
+						<Box width={10}>
+							<Text color="white">{prayer}</Text>
+						</Box>
+						<Box marginRight={2}>
+							<Text>--&gt;</Text>
+						</Box>
+						<Text color="green">{tConv24(time)}</Text>
+					</Box>
+				))}
+			</Box>
+		</Box>
+	);
+};
+
+export default App;

package/src/utils.test.ts

@@ -0,0 +1,95 @@
+
+import * as constants from '#constants';
+import { City } from '#types';
+import { getCityId, getCityName, parsePrayerTimesFromResponse } from '#utils';
+import { describe, expect, it, vi } from 'vitest';
+
+// Mock cities data
+const mockCities: City[] = [
+  { id: 1, name: 'Casablanca' },
+  { id: 2, name: 'Rabat' },
+  { id: 3, name: 'Fes' },
+];
+
+describe('utils', () => {
+    describe('getCityName', () => {
+        it('should return the default city if no argument is provided', () => {
+            expect(getCityName(undefined, mockCities)).toBe(constants.DEFAULT_CITY);
+        });
+
+        it('should return the city name if it exists', () => {
+            expect(getCityName('Casablanca', mockCities)).toBe('Casablanca');
+        });
+
+        it('should return default city and log error if city does not exist', () => {
+            // Spy on console.error using vitest
+            const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+            const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+            
+            expect(getCityName('UnknownCity', mockCities)).toBe(constants.DEFAULT_CITY);
+            
+            // We expect some error message to be logged. 
+            // The actual implementation logs with chalk.red, so we just check it was called.
+            expect(consoleLogSpy.mock.calls.length + consoleErrorSpy.mock.calls.length).toBeGreaterThan(0);
+            
+            consoleLogSpy.mockRestore();
+            consoleErrorSpy.mockRestore();
+        });
+
+        it('should be case insensitive', () => {
+             expect(getCityName('casablanca', mockCities)).toBe('casablanca');
+             expect(getCityName('RaBaT', mockCities)).toBe('RaBaT');
+        });
+    });
+
+    describe('getCityId', () => {
+        it('should return the ID if a number is provided as string', () => {
+            expect(getCityId('2', mockCities)).toBe(2);
+        });
+
+        it('should return the ID based on index + 1 if name is provided', () => {
+             // 'Casablanca' is at index 0, so ID should be 1
+             expect(getCityId('Casablanca', mockCities)).toBe(1);
+             // 'Rabat' is at index 1, so ID should be 2
+             expect(getCityId('Rabat', mockCities)).toBe(2);
+        });
+
+        it('should handle case insensitivity for city names', () => {
+            expect(getCityId('fes', mockCities)).toBe(3);
+        });
+    });
+
+    describe('parsePrayerTimesFromResponse', () => {
+        it('should parse prayer times correctly from HTML', () => {
+            const mockHtml = `
+            <html>
+                <body>
+                    <table>
+                        <tr><td>Fajr</td><td>05:30</td></tr>
+                        <tr><td>Chourouk</td><td>07:00</td></tr>
+                        <tr><td>Dhuhr</td><td>12:30</td></tr>
+                        <tr><td>Asr</td><td>15:45</td></tr>
+                        <tr><td>Maghrib</td><td>18:20</td></tr>
+                        <tr><td>Isha</td><td>19:50</td></tr>
+                    </table>
+                </body>
+            </html>
+            `;
+            
+            // Note: The actual implementation expects td elements in a specific order (key, value, key, value...)
+            // And it relies on prayersData keys. 
+            // We need to match the structure expected by the function.
+            // The function iterates tds with i=1, i+=2. meaning it takes index 1, 3, 5... as times.
+            
+            const results = parsePrayerTimesFromResponse(mockHtml);
+
+            // Based on default prayers.json keys, let's assume we expect those values.
+            // Since we mocked the HTML, if the code pushes to 'prayers' array from 'prayersData',
+            // and then updates .time property from tds.
+            
+            // checking if it returns an object with times
+            expect(results).toHaveProperty('Fajr');
+            expect(results).toHaveProperty('Dhuhr');
+        });
+    });
+});

package/src/utils.ts

@@ -1,17 +1,15 @@
-import chalk from "chalk";
+import { API_URL, DEFAULT_CITY, NOT_FOUND_ERROR } from "#constants";
+import { City, PrayerDef, PrayerTimes } from "#types";
 import domino from "domino";
 import fetch from "node-fetch";
-import { API_URL, DEFAULT_CITY, NOT_FOUND_ERROR } from "./constants";
-import prayersData from "./data/prayers.json";
-import { City, PrayerDef, PrayerTimes } from "./types";
+import prayersData from "./data/prayers.json" with { type: "json" };
 
-const error = (msg: string) => console.log(chalk.red(msg));
 
 export const getCityName = (arg: string | undefined, cities: City[]): string => {
   if (arg == null) return DEFAULT_CITY;
   const index = getCityIndex(arg, cities);
   if (index === -1) {
-    error(NOT_FOUND_ERROR);
+    console.error(NOT_FOUND_ERROR);
     return DEFAULT_CITY;
   }
   return arg;
@@ -58,7 +56,7 @@ export const parsePrayerTimesFromResponse = (response: string): PrayerTimes => {
   }, {} as PrayerTimes);
 };
 
-function tConv24(time24: string): string {
+export function tConv24(time24: string): string {
   const [hours, minutes] = time24.split(":");
   const hour = Number(hours);
   const formattedHour = hour % 12 || 12;
@@ -69,18 +67,3 @@ function tConv24(time24: string): string {
   return `${formattedTime} ${ampm}`;
 }
 
-export const displayResult = (
-  prayers: PrayerTimes | undefined | null,
-  city: string
-) => {
-  if (!prayers) return;
-  console.log(` 🧭 ${city}, Morocco\n\n 📆 ${new Date().toDateString()}\n`);
-  Object.keys(prayers).forEach((key) => {
-    console.log(
-      ` ${chalk.cyan(key.padEnd(7, " "))} --> ${chalk.green(
-        tConv24(prayers[key])
-      )}`
-    );
-  });
-  console.log("\n");
-};

package/tests/cli.e2e.test.ts

@@ -0,0 +1,46 @@
+
+import { exec } from 'child_process';
+import path from 'path';
+import util from 'util';
+import { describe, expect, it } from 'vitest';
+
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const execPromise = util.promisify(exec);
+const appPath = path.join(__dirname, '../src/app.ts');
+
+describe('CLI E2E', () => {
+    it('should run and display prayer times for default city', async () => {
+        // Running via ts-node to avoid build step dependency in tests
+        // using npx ts-node might be slower but works without pre-build
+        const { stdout, stderr } = await execPromise(`node --no-warnings --loader ts-node/esm ${appPath}`);
+        
+        expect(stderr).toBe('');
+        expect(stdout).toContain('Marrakech'); // Default city
+        expect(stdout).toContain('Fajr');
+        expect(stdout).toContain('Isha');
+    }, 10000); // increase timeout for CLI execution
+
+    it('should run and display prayer times for a specific city', async () => {
+        const { stdout } = await execPromise(`node --no-warnings --loader ts-node/esm ${appPath} "Rabat"`);
+        
+        expect(stdout).toContain('Rabat');
+        expect(stdout).toContain('Fajr');
+    }, 10000);
+
+    it('should handle invalid city gracefully', async () => {
+        const { stdout } = await execPromise(`node --no-warnings --loader ts-node/esm ${appPath} "InvalidCity"`);
+        
+        // As per utils.ts, it returns default city (Casablanca) and logs error (NOT_FOUND_ERROR)
+        // Note: The error is logged to console.log, so it might appear in stdout or just be visible.
+        // utils.ts: error(NOT_FOUND_ERROR) -> console.log(chalk.red(msg))
+        
+        expect(stdout).toContain('Marrakech');
+        // We might want to check for the error message if it's printed to stdout
+        // BUT utils.ts uses console.log for error as well.
+    }, 10000);
+});

package/tsconfig.json

@@ -1,15 +1,24 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "module": "CommonJS",
+    "target": "ES2022",
+    "module": "NodeNext",
     "rootDir": "./src",
     "outDir": "./dist",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "skipLibCheck": true,
-    "resolveJsonModule": true
+    "moduleResolution": "NodeNext",
+    "resolveJsonModule": true,
+    "baseUrl": "./",
+    "paths": {
+      "#*": ["./src/*.ts"]
+    },
+    "jsx": "react-jsx"
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
+  "ts-node": {
+    "esm": true
+  }
 }

package/vitest.config.ts

@@ -0,0 +1,9 @@
+
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}', 'tests/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    environment: 'node',
+  },
+})