feat: improve response types

VChet · VChet · commit 3c680c855647 · 2025-03-12T00:51:00.000+05:00
diff --git a/eslint.config.js b/eslint.config.js
@@ -9,6 +9,7 @@ const SORT_IMPORT_CUSTOM_GROUP = {
 
 export default antfu({
   toml: false,
+  isInEditor: false,
   rules: {
     "antfu/consistent-list-newline": "off",
     "antfu/if-newline": "off",
diff --git a/package.json b/package.json
@@ -20,24 +20,27 @@
     "@octokit/core": "^6.1.4",
     "@tabler/icons-vue": "^3.31.0",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vueuse/core": "^12.8.2",
-    "@vueuse/integrations": "^12.8.2",
+    "@vueuse/core": "^13.0.0",
+    "@vueuse/integrations": "^13.0.0",
     "dayjs": "^1.11.13",
     "http-status-codes": "^2.3.0",
     "semver": "^7.7.1",
     "sortablejs": "^1.15.6",
-    "vite": "^6.2.0",
+    "vite": "^6.2.1",
     "vite-plugin-pwa": "^0.21.1",
     "vue": "^3.5.13",
     "vue-dompurify-html": "^5.2.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.6.0",
+    "@antfu/eslint-config": "^4.8.1",
     "@octokit/types": "^13.8.0",
     "@stylistic/stylelint-plugin": "^3.1.2",
-    "@types/node": "^22.13.9",
+    "@total-typescript/ts-reset": "^0.6.1",
+    "@types/mime-types": "^2.1.4",
+    "@types/node": "^22.13.10",
     "@types/semver": "^7.5.8",
-    "eslint": "^9.21.0",
+    "eslint": "^9.22.0",
+    "mime-types": "^2.1.35",
     "postcss-html": "^1.8.0",
     "postcss-scss": "^4.0.9",
     "sass": "^1.85.1",
@@ -51,6 +54,7 @@
     "typescript": "^5.8.2",
     "vue-router": "^4.5.0",
     "vue-tsc": "^2.2.8",
+    "workbox-build": "^7.3.0",
     "workbox-core": "^7.3.0",
     "workbox-precaching": "^7.3.0",
     "workbox-routing": "^7.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/header/import-export.vue b/src/components/header/import-export.vue
@@ -16,7 +16,7 @@ import { IconDownload, IconUpload } from "@tabler/icons-vue";
 import dayjs from "dayjs";
 import { downloadFile, readFile } from "@/helpers/file";
 import { isValidJSON } from "@/helpers/validate";
-import { useRepositoriesStore } from "@/store/repositories";
+import { isExportedRepository, useRepositoriesStore, type ExportedRepository } from "@/store/repositories";
 import IconLoader from "../icon-loader.vue";
 
 defineProps<{ noData: boolean }>();
@@ -28,9 +28,18 @@ const isImporting = ref<boolean>(false);
 whenever(files, async ({ 0: payload }) => {
   const content = await readFile(payload).then(String);
   if (!isValidJSON(content)) throw new Error("Invalid JSON");
+
+  const parsedData = JSON.parse(content);
+  if (!Array.isArray(parsedData)) throw new Error("Invalid import data");
+  const importData = parsedData.reduce((acc: ExportedRepository[], repo) => {
+    if (isExportedRepository(repo)) acc.push(repo);
+    return acc;
+  }, []);
+  if (!importData.length) throw new Error("Invalid import data");
+
   try {
     isImporting.value = true;
-    await importRepositories(JSON.parse(content));
+    await importRepositories(importData);
   } finally {
     isImporting.value = false;
   }
diff --git a/src/components/header/main-header.vue b/src/components/header/main-header.vue
@@ -27,8 +27,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { IconActivityHeartbeat, IconProgressAlert } from "@tabler/icons-vue";
-import { clearCachedRequests } from "@/service/memoize";
-import { fetchRateLimit, rateLimit } from "@/service/octokit";
+import { fetchRateLimit, fetchRepositoryFiles, rateLimit } from "@/service/octokit";
 import { useEventsStore } from "@/store/events";
 import { useLatestVersionsStore } from "@/store/latest-versions";
 import { useRepositoriesStore } from "@/store/repositories";
@@ -49,7 +48,7 @@ const isUpdating = ref<boolean>(false);
 async function update(): Promise<void> {
   try {
     isUpdating.value = true;
-    clearCachedRequests();
+    fetchRepositoryFiles.clear();
     await Promise.all([updateRepositories(), updateLatestVersions(), updateEvents()]);
   } finally {
     isUpdating.value = false;
diff --git a/src/components/header/user-repos.vue b/src/components/header/user-repos.vue
@@ -59,15 +59,17 @@ import { fetchCurrentUserRepos } from "@/service/octokit";
 import { useRepositoriesStore } from "@/store/repositories";
 import { useSettingsStore } from "@/store/settings";
 import type { Repository } from "@/composable/useRepo";
-import type { UserRepositoriesResponse } from "@/types/repo";
+import type { UserReposResponse } from "@/types/repo";
+
+type RawRepo = UserReposResponse["data"][number];
 
 defineProps<{ progress: { current: number, total: number } }>();
 defineEmits<{ submit: [repos: Repository[]] }>();
 
 const { repositories } = useRepositoriesStore();
 const { settings } = useSettingsStore();
 
-const userRepos = ref<UserRepositoriesResponse>([]);
+const userRepos = ref<RawRepo[]>([]);
 const isLoading = ref(false);
 onBeforeMount(async () => {
   if (settings.value.authToken) {
diff --git a/src/composable/useRepo.ts b/src/composable/useRepo.ts
@@ -1,6 +1,6 @@
 import { computed, type Ref } from "vue";
-import type { PackageJson } from "type-fest";
-import type { RepositoryResponse } from "@/types/repo";
+import type { PackageJson, Simplify } from "type-fest";
+import type { RepoResponse } from "@/types/repo";
 
 interface Integrations {
   uptimerobotKey?: string
@@ -11,10 +11,10 @@ interface Integrations {
   packageManager?: string
 }
 
-export interface Repository extends RepositoryResponse {
+export type Repository = Simplify<RepoResponse["data"] & {
   dependencies: NonNullable<PackageJson.Dependency> | null
   integrations: Integrations
-}
+}>;
 
 export function useRepository(data: Ref<Repository>) {
   const hostingName = computed<string | null>(() => {
diff --git a/src/helpers/file.ts b/src/helpers/file.ts
@@ -1,3 +1,5 @@
+import mimeType from "mime-types";
+
 export function readFile(file: File): Promise<string | ArrayBuffer> {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -8,16 +10,12 @@ export function readFile(file: File): Promise<string | ArrayBuffer> {
   });
 }
 
-export function downloadFile(
-  data: BlobPart,
-  fileName: HTMLAnchorElement["download"],
-  type: BlobPropertyBag["type"] = "text/json"
-): void {
-  const blob = new Blob([data], { type });
-  const element = window.document.createElement("a");
-  element.href = window.URL.createObjectURL(blob);
-  element.download = fileName;
-  document.body.appendChild(element);
-  element.click();
-  document.body.removeChild(element);
+export function downloadFile(data: BlobPart, fileName: File["name"], type: File["type"]): void {
+  const blob = data instanceof Blob ? data : new Blob([data], { type });
+  const link = window.document.createElement("a");
+  const fileExtension = mimeType.extension(type);
+  link.href = window.URL.createObjectURL(blob);
+  link.download = `${fileName}.${fileExtension}`;
+  link.click();
+  link.remove();
 }
diff --git a/src/helpers/object.ts b/src/helpers/object.ts
@@ -21,5 +21,5 @@ export function deepEqual<T extends Record<string, any>>(a: T | null, b: T | nul
 }
 
 export function deepCopy<T>(object: T): WritableDeep<T> {
-  return JSON.parse(JSON.stringify(object));
+  return JSON.parse(JSON.stringify(object)) as WritableDeep<T>;
 }
diff --git a/src/service/memoize.ts b/src/service/memoize.ts
diff --git a/src/service/octokit.ts b/src/service/octokit.ts
@@ -1,15 +1,17 @@
 import { ref } from "vue";
+import { useMemoize } from "@vueuse/core";
 import { Octokit } from "@octokit/core";
 import { StatusCodes } from "http-status-codes";
 import type { RequestError, RequestParameters, Route } from "@octokit/types";
 import type { PackageJson } from "type-fest";
 import { useSettingsStore } from "@/store/settings";
-import { repositoryContents } from "./memoize";
 import type {
-  RepositoryResponse,
-  User,
+  RateLimitResponse,
+  RepoContentsResponse,
+  RepoResponse,
   UserReceivedEventsResponse,
-  UserRepositoriesResponse,
+  UserReposResponse,
+  UserResponse,
   WorkflowsResponse
 } from "@/types/repo";
 
@@ -38,60 +40,76 @@ export function fetch(url: Route, options: RequestParameters = {}): Promise<any>
   });
 }
 
-export async function fetchRateLimit(): Promise<void> {
-  const response = await fetch("GET /rate_limit");
-  rateLimit.value = response.data.rate.remaining.toString() ?? "-";
+export async function fetchRateLimit() {
+  const { data } = await fetch("GET /rate_limit") as RateLimitResponse;
+  rateLimit.value = data.rate.remaining.toString() ?? "-";
 }
 
-export async function fetchRepo(fullName: string): Promise<RepositoryResponse | void> {
-  const { data } = await fetch(`GET /repos/${fullName}`);
+export async function fetchRepo(fullName: string) {
+  const { data } = await fetch(`GET /repos/${fullName}`) as RepoResponse;
   return data;
 }
 
-export function fetchRepositoryContents(fullName: string): Promise<unknown[]> {
-  return repositoryContents(fullName);
+async function fetchRepositoryContents(fullName: string) {
+  const { data } = await fetch(`GET /repos/${fullName}/contents`) as RepoContentsResponse;
+  return data;
+}
+
+export const fetchRepositoryFiles = useMemoize(async (fullName: string) => {
+  try {
+    const files = await fetchRepositoryContents(fullName);
+    return Array.isArray(files) ? files.map(({ name }) => name) : [];
+  } catch (error: unknown) {
+    if ((error as RequestError).status !== StatusCodes.NOT_FOUND) console.error(error);
+    return [];
+  }
+});
+
+async function fetchRepositoryFile(fullName: string, fileName: string) {
+  const { data } = await fetch(`GET /repos/${fullName}/contents/${fileName}`) as RepoContentsResponse;
+  if ("content" in data) return atob(data.content);
+  throw new Error("Invalid file");
 }
 
 export async function fetchRepositoryPackages(fullName: string): Promise<PackageJson.Dependency | null> {
   try {
-    const hasPackage: boolean = await repositoryContents(fullName).then((files) => files.includes("package.json"));
-    if (!hasPackage) { return null; }
-    const { data } = await fetch(`GET /repos/${fullName}/contents/package.json`);
-    if (!("content" in data)) return null;
-    const content: PackageJson = JSON.parse(atob(data.content));
+    const hasPackage: boolean = await fetchRepositoryFiles(fullName).then((files) => files.includes("package.json"));
+    if (!hasPackage) return null;
+    const packageContents = await fetchRepositoryFile(fullName, "package.json");
+    const content = JSON.parse(packageContents) as PackageJson;
     return { ...content.dependencies, ...content.devDependencies };
   } catch (error: unknown) {
     if ((error as RequestError).status !== StatusCodes.NOT_FOUND) console.error(error);
     return null;
   }
 }
 
-export async function fetchRepositoryWorkflows(fullName: string): Promise<WorkflowsResponse | null> {
+export async function fetchRepositoryWorkflows(fullName: string) {
   try {
-    const { data } = await fetch(`GET /repos/${fullName}/actions/workflows`);
+    const { data } = await fetch(`GET /repos/${fullName}/actions/workflows`) as WorkflowsResponse;
     return data;
   } catch (error: unknown) {
     if ((error as RequestError).status !== StatusCodes.NOT_FOUND) console.error(error);
     return null;
   }
 }
 
-export async function fetchCurrentUser(): Promise<User | void> {
+export async function fetchCurrentUser() {
   if (!settings.value.authToken) return console.warn("empty authToken");
-  const { data } = await fetch("GET /user");
+  const { data } = await fetch("GET /user") as UserResponse;
   return data;
 }
 
-export async function fetchCurrentUserRepos(): Promise<UserRepositoriesResponse | void> {
+export async function fetchCurrentUserRepos() {
   if (!settings.value.authToken) return console.warn("empty authToken");
-  const { data } = await fetch("GET /user/repos", { affiliation: "owner" });
+  const { data } = await fetch("GET /user/repos", { affiliation: "owner" }) as UserReposResponse;
   return data;
 }
 
-export async function fetchCurrentUserReceivedEvents(page = 1): Promise<{ data: UserReceivedEventsResponse, hasNextPage: boolean } | void> {
+export async function fetchCurrentUserReceivedEvents(page = 1) {
   if (!settings.value.authToken) throw new Error("empty authToken");
   if (!settings.value.username) throw new Error("empty username");
-  const { data, headers } = await fetch(`GET /users/${settings.value.username}/received_events`, { per_page: 100, page });
+  const { data, headers } = await fetch(`GET /users/${settings.value.username}/received_events`, { per_page: 100, page }) as UserReceivedEventsResponse;
   if (!Array.isArray(data)) throw new Error("Error fetching user received events", data);
 
   return {
diff --git a/src/store/events.ts b/src/store/events.ts
@@ -5,7 +5,7 @@ import { fetchCurrentUserReceivedEvents } from "@/service/octokit";
 import { useSettingsStore } from "@/store/settings";
 import type { UserReceivedEventsResponse } from "@/types/repo";
 
-type RawEvent = UserReceivedEventsResponse[0];
+type RawEvent = UserReceivedEventsResponse["data"][number];
 
 const TARGET_EVENTS = ["WatchEvent", "ForkEvent"] as const;
 
diff --git a/src/store/latest-versions.ts b/src/store/latest-versions.ts
@@ -15,7 +15,7 @@ const DEFAULT_STORE: LatestVersionsStore = {
 
 async function fetchLatestVersion(dependency: string) {
   const response = await fetch(`https://registry.npmjs.org/${dependency}/latest`);
-  const data: PackageJson = await response.json();
+  const data = await response.json() as PackageJson;
   return data.version;
 };
 
diff --git a/src/store/repositories.ts b/src/store/repositories.ts
@@ -1,15 +1,18 @@
 import { computed } from "vue";
-import { useLocalStorage } from "@vueuse/core";
+import { isObject, useLocalStorage } from "@vueuse/core";
 import dayjs from "dayjs";
-import { fetchRepo, fetchRepositoryContents, fetchRepositoryPackages, fetchRepositoryWorkflows } from "@/service/octokit";
+import { fetchRepo, fetchRepositoryFiles, fetchRepositoryPackages, fetchRepositoryWorkflows } from "@/service/octokit";
 import type { Repository } from "@/composable/useRepo";
 
 interface RepositoriesStore {
   lastUpdate: string
   data: Repository[]
 };
 
-type ExportedRepository = Pick<Repository, "id" | "full_name" | "integrations">;
+export type ExportedRepository = Pick<Repository, "id" | "full_name" | "integrations">;
+export function isExportedRepository(data: unknown): data is ExportedRepository {
+  return isObject(data) && "id" in data && "full_name" in data && "integrations" in data;
+}
 
 const DEFAULT_STORE: RepositoriesStore = {
   lastUpdate: dayjs().toISOString(),
@@ -22,7 +25,7 @@ async function parseWorkflows(fullName: Repository["full_name"]): Promise<Reposi
   return firstWorkflow?.state === "active" ? firstWorkflow.badge_url : undefined;
 }
 async function parsePackageManager(fullName: Repository["full_name"]): Promise<"npm" | "pnpm" | "yarn" | undefined> {
-  const files = await fetchRepositoryContents(fullName);
+  const files = await fetchRepositoryFiles(fullName);
   if (files.includes("package-lock.json")) return "npm";
   else if (files.includes("pnpm-lock.yaml")) return "pnpm";
   else if (files.includes("yarn.lock")) return "yarn";
@@ -81,7 +84,7 @@ export function useRepositoriesStore() {
     lastUpdate.value = dayjs().toISOString();
   }
 
-  async function importRepositories(payload: Repository[]): Promise<void> {
+  async function importRepositories(payload: ExportedRepository[]): Promise<void> {
     const fetchPromises = payload.map(({ id, full_name, integrations }) => isRepoExists(id) ?
       updateRepository(full_name, integrations) :
       addRepository(full_name, integrations)
diff --git a/src/types/repo.ts b/src/types/repo.ts
@@ -1,7 +1,11 @@
 import type { Endpoints } from "@octokit/types";
 
-export type RepositoryResponse = Endpoints["GET /repos/{owner}/{repo}"]["response"]["data"];
-export type WorkflowsResponse = Endpoints["GET /repos/{owner}/{repo}/actions/workflows"]["response"]["data"];
-export type User = Endpoints["GET /user"]["response"]["data"];
-export type UserRepositoriesResponse = Endpoints["GET /user/repos"]["response"]["data"];
-export type UserReceivedEventsResponse = Endpoints["GET /users/{username}/received_events"]["response"]["data"];
+export type RateLimitResponse = Endpoints["GET /rate_limit"]["response"];
+
+export type UserResponse = Endpoints["GET /user"]["response"];
+export type UserReposResponse = Endpoints["GET /user/repos"]["response"];
+export type UserReceivedEventsResponse = Endpoints["GET /users/{username}/received_events"]["response"];
+
+export type RepoResponse = Endpoints["GET /repos/{owner}/{repo}"]["response"];
+export type RepoContentsResponse = Endpoints["GET /repos/{owner}/{repo}/contents/{path}"]["response"];
+export type WorkflowsResponse = Endpoints["GET /repos/{owner}/{repo}/actions/workflows"]["response"];
diff --git a/src/types/reset.ts b/src/types/reset.ts
@@ -0,0 +1,2 @@
+// Do not add any other lines of code to this file!
+import "@total-typescript/ts-reset";

Original file line number	Diff line number	Diff line change
`@@ -21,5 +21,5 @@ export function deepEqual<T extends Record<string, any>>(a: T \| null, b: T \| nul`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`export function deepCopy<T>(object: T): WritableDeep<T> {`
`24`		`- return JSON.parse(JSON.stringify(object));`
	`24`	`+ return JSON.parse(JSON.stringify(object)) as WritableDeep<T>;`
`25`	`25`	`}`