fix(npm) update list not refreshing after installing selected updates

extensions/npm/package.json

@@ -3,7 +3,9 @@
   "name": "npm",
   "title": "NPM",
   "description": "An extenstion to manage npm packages",
-  "categories": ["Developer Tools"],
+  "categories": [
+    "Developer Tools"
+  ],
   "license": "MIT",
   "author": "FredrikMWold",
   "contributors": [],
@@ -91,16 +93,16 @@
     "lint": "vici lint"
   },
   "dependencies": {
-    "@raycast/utils": "^2.2.3",
+    "@raycast/utils": "^2.2.4",
     "@uidotdev/usehooks": "^2.4.1",
-    "@vicinae/api": "^0.20.9",
+    "@vicinae/api": "^0.20.15",
     "find-up": "^8.0.0",
     "package-manager-detector": "^1.6.0",
     "semver": "^7.7.4"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.8",
     "@types/semver": "^7.7.1",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.3"
   }
 }

extensions/npm/src/hooks/useGetVersionUpdate.ts

@@ -1,40 +1,34 @@
-import { useFetch } from "@raycast/utils";
-import semver from "semver";
+import { usePromise } from "@raycast/utils";
+import { useRef } from "react";
 import type { Package } from "../types";
 
-export const useGetVersionUpdate = (npmPackage: Package) => {
-  const encodedName = encodeURIComponent(npmPackage.name);
-
-  const { data, isLoading } = useFetch(
-    `https://registry.npmjs.com/${encodedName}`,
-    {
-      parseResponse: async (response) => {
-        const data = (await response.json()) as Response;
-        const latestVersion = data["dist-tags"].latest;
-        const latestSemver = semver.coerce(latestVersion);
-        const currentSemver = semver.coerce(npmPackage.version);
-        const hasUpdate =
-          latestSemver !== null &&
-          currentSemver !== null &&
-          semver.gt(latestSemver, currentSemver);
+export const useGetVersionUpdate = (npmPackage: Package[]) => {
+  const abortable = useRef<AbortController | null>(null);
+  const { data = [], isLoading } = usePromise(
+    async () => {
+      const responses = npmPackage.map(async (pkg) => {
+        const res = await fetch(`https://registry.npmjs.org/${pkg.name}`, {
+          signal: abortable.current?.signal,
+        });
+        const json = (await res.json()) as Response;
+        const latestVersion = json["dist-tags"].latest;
         return {
-          hasUpdate,
-          versionData: {
-            name: npmPackage.name,
-            version: npmPackage.version,
-            hasUpdate,
-            newVersion: latestVersion,
-          },
+          name: pkg.name,
+          newVersion: latestVersion,
         } as const;
-      },
+      });
+      return Promise.all(responses);
+    },
+    [],
+    {
+      abortable,
     },
   );
 
-  if (data) return data;
-  return { hasUpdate: false, isLoading, versionData: undefined };
+  return { data, isLoading };
 };
 
-type Response = {
+export type Response = {
   name: string;
   "dist-tags": {
     latest: string;

extensions/npm/src/hooks/useUpdatePackages.ts

@@ -1,10 +1,12 @@
-import { Cache, showToast, Toast } from "@vicinae/api";
+import { showToast, Toast } from "@vicinae/api";
 import { execSync } from "child_process";
 import { useState } from "react";
-import type { PackageManager } from "../utils/getPackageManager";
 import type { Package } from "../types";
-import { usePackageManger } from "./usePackageManger";
 import { getInstalledPackages } from "../utils/getPackageJson";
+import type { PackageManager } from "../utils/getPackageManager";
+import { usePackageManger } from "./usePackageManger";
+import { useGetVersionUpdate } from "./useGetVersionUpdate";
+import { hasUpdate } from "../utils/hasUpdate";
 
 export const useUpdatePackages = (path?: string) => {
   const [selectedDependencies, setSelectedDependencies] = useState<string[]>(
@@ -15,10 +17,25 @@ export const useUpdatePackages = (path?: string) => {
   >([]);
   const [error, setError] = useState<string>("");
   const { packageManager } = usePackageManger(path);
-  const [packages, setPackages] = useState<Package[]>(() =>
+  const [installedPackages, setInstalledPackages] = useState<Package[]>(() =>
     getInstalledPackages(packageManager, path),
   );
 
+  const { data: versionUpdates, isLoading } =
+    useGetVersionUpdate(installedPackages);
+
+  const packages = installedPackages
+    .map((pkg) => {
+      const newVersionData = versionUpdates.find(
+        (update) => update.name === pkg.name,
+      );
+      return {
+        ...pkg,
+        newVersion: newVersionData?.newVersion || "",
+      };
+    })
+    .filter(hasUpdate);
+
   const npmCommand = buildUpdateCommand(
     packageManager,
     selectedDependencies,
@@ -50,7 +67,7 @@ export const useUpdatePackages = (path?: string) => {
       title: `Successfully updated packages`,
       style: Toast.Style.Success,
     });
-    setPackages(getInstalledPackages(packageManager, path));
+    setInstalledPackages(getInstalledPackages(packageManager, path));
     setSelectedDependencies([]);
     setSelectedDevDependencies([]);
   };
@@ -81,6 +98,7 @@ export const useUpdatePackages = (path?: string) => {
     onSelectDevDependency,
     clearError,
     npmCommand,
+    isLoading,
   };
 };
 

extensions/npm/src/npm-update-global.tsx

@@ -7,6 +7,7 @@ import type { Package } from "./types";
 
 export default function NpmUpdateGlobal() {
   const {
+    isLoading,
     packages,
     updatePackages,
     selectedDependencies,
@@ -20,7 +21,7 @@ export default function NpmUpdateGlobal() {
     return <NpmErrorDetails error={error} clear={clearError} />;
   }
   return (
-    <List>
+    <List isLoading={isLoading}>
       <List.Section title="Packages">
         {packages
           .filter((pkg) => !pkg.dev)
@@ -52,8 +53,6 @@ const DependencyListItem = ({
   onSelect: (dependency: string) => void;
   npmCommand: string;
 }) => {
-  const { hasUpdate, versionData } = useGetVersionUpdate(pkg);
-  if (!hasUpdate) return;
   return (
     <List.Item
       key={pkg.name}
@@ -62,7 +61,7 @@ const DependencyListItem = ({
       accessories={[
         {
           text: {
-            value: `${semver.coerce(pkg.version)} → ${versionData?.newVersion}`,
+            value: `${semver.coerce(pkg.version)} → ${pkg?.newVersion}`,
             color: Color.Orange,
           },
         },

extensions/npm/src/npm-update.tsx

@@ -5,6 +5,7 @@ import { NpmTerminalUsageDetails } from "./components/NpmTerminalUsageDetails";
 import { useGetVersionUpdate } from "./hooks/useGetVersionUpdate";
 import { useUpdatePackages } from "./hooks/useUpdatePackages";
 import type { Package } from "./types";
+import { hasUpdate } from "./utils/hasUpdate";
 
 export default function NpmUpdate(props: {
   arguments?: {
@@ -16,6 +17,7 @@ export default function NpmUpdate(props: {
 
   const {
     packages,
+    isLoading,
     updatePackages,
     selectedDependencies,
     selectedDevDependencies,
@@ -30,7 +32,7 @@ export default function NpmUpdate(props: {
     return <NpmErrorDetails error={error} clear={clearError} />;
   }
   return (
-    <List>
+    <List isLoading={isLoading}>
       <List.Section title="Dependencies">
         {packages
           .filter((pkg) => !pkg.dev)
@@ -76,8 +78,6 @@ const DependencyListItem = ({
   onSelect: (dependency: string) => void;
   npmCommand: string;
 }) => {
-  const { hasUpdate, versionData } = useGetVersionUpdate(pkg);
-  if (!hasUpdate) return;
   return (
     <List.Item
       key={pkg.name}
@@ -86,7 +86,7 @@ const DependencyListItem = ({
       accessories={[
         {
           text: {
-            value: `${semver.coerce(pkg.version)} → ${versionData?.newVersion}`,
+            value: `${semver.coerce(pkg.version)} → ${pkg?.newVersion}`,
             color: Color.Orange,
           },
         },

extensions/npm/src/types.ts

@@ -3,4 +3,5 @@ export type Package = {
   version: string;
   dev?: boolean;
   global: boolean;
+  newVersion?: string;
 };

extensions/npm/src/utils/hasUpdate.ts

@@ -0,0 +1,12 @@
+import semver from "semver";
+import { Package } from "../types";
+
+export const hasUpdate = (pkg: Package) => {
+  const latestSemver = semver.coerce(pkg.newVersion);
+  const currentSemver = semver.coerce(pkg.version);
+  return (
+    latestSemver !== null &&
+    currentSemver !== null &&
+    semver.gt(latestSemver, currentSemver)
+  );
+};