Replace Bundlephobia with Package Phobia

statico · statico · commit bb8069627d4d · 2025-11-11T15:38:42.000-08:00
Should begin to work per styfle/packagephobia#1077
diff --git a/app/list/page.tsx b/app/list/page.tsx
@@ -48,7 +48,7 @@ export default async function ListPage() {
                 NPM
               </th>
               <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border-b border-gray-300 dark:border-gray-600">
-                Bundlephobia
+                Package Phobia
               </th>
             </tr>
           </thead>
@@ -77,7 +77,7 @@ export default async function ListPage() {
                   <LinkTo href={item.npm?.url} />
                 </td>
                 <td className="px-4 py-2 text-sm">
-                  <LinkTo href={item.bundlephobia?.url} />
+                  <LinkTo href={item.packagephobia?.url} />
                 </td>
               </tr>
             ))}
diff --git a/components/Card.tsx b/components/Card.tsx
@@ -248,10 +248,10 @@ const Card = memo(({ info }: CardProps) => {
           />
           <Metric
             icon={<GoPackage />}
-            value={info.bundlephobia?.gzipSize}
+            value={info.packagephobia?.installSize}
             formatter={(n: number) => (n >= 0 ? filesize(n) : "?? KB")}
-            title={"Gzipped package size is %s"}
-            href={info.bundlephobia?.url}
+            title={"Package install size is %s"}
+            href={info.packagephobia?.url}
           />
           <Metric
             icon={<FaUsers />}
diff --git a/components/IndexPage.tsx b/components/IndexPage.tsx
@@ -98,8 +98,8 @@ export default function IndexPage({ items, ts }: IndexPageProps) {
           </a>
         </div>
         <div>
-          <a href="https://bundlephobia.com/" className="hover:underline">
-            Package sizes from Bundlephobia
+          <a href="https://packagephobia.com/" className="hover:underline">
+            Package sizes from Package Phobia
           </a>
         </div>
         <div>
diff --git a/components/TableView.tsx b/components/TableView.tsx
@@ -184,7 +184,7 @@ const TableView = memo(({ items }: TableViewProps) => {
                   </div>
                 </TooltipTrigger>
                 <TooltipContent>
-                  <p>Gzipped Bundle Size</p>
+                  <p>Package Install Size</p>
                 </TooltipContent>
               </Tooltip>
             </TableHead>
@@ -263,9 +263,9 @@ const TableView = memo(({ items }: TableViewProps) => {
               </TableCell>
               <TableCell className="text-right">
                 <MetricCell
-                  value={item.bundlephobia?.gzipSize}
+                  value={item.packagephobia?.installSize}
                   formatter={(n: number) => (n >= 0 ? filesize(n) : "?? KB")}
-                  href={item.bundlephobia?.url}
+                  href={item.packagephobia?.url}
                 />
               </TableCell>
               <TableCell className="text-right">
diff --git a/data/angular-ui-grid.yml b/data/angular-ui-grid.yml
@@ -3,7 +3,6 @@ homeUrl: http://ui-grid.info/
 demoUrl: http://ui-grid.info/
 githubRepo: angular-ui/ui-grid
 npmPackage: angular-ui-grid
-ignoreBundlephobia: true
 license: MIT License
 revenueModel: Free
 description: >
diff --git a/data/grid-js.yml b/data/grid-js.yml
@@ -3,7 +3,6 @@ homeUrl: https://gridjs.io/
 demoUrl: https://gridjs.io/docs/examples/hello-world/
 githubRepo: grid-js/gridjs
 npmPackage: gridjs
-ignoreBundlephobia: true
 license: MIT License
 revenueModel: Free
 description: >
diff --git a/data/jqgrid.yml b/data/jqgrid.yml
@@ -3,7 +3,6 @@ homeUrl: http://guriddo.net/
 demoUrl: http://guriddo.net/?page_id=119
 githubRepo: tonytomov/jqGrid
 npmPackage: jqGrid
-ignoreBundlephobia: true
 license: CC-BY-NC-3.0 or Commerical License
 revenueModel: Free for Personal Use / Commercial License
 description: >
diff --git a/data/ng-table.yml b/data/ng-table.yml
@@ -3,7 +3,6 @@ homeUrl: https://esvit.github.io/ng-table/
 demoUrl: null
 githubRepo: esvit/ng-table
 npmPackage: ng-table
-ignoreBundlephobia: true
 license: BSD 3-Clause License
 revenueModel: Free
 description: >
diff --git a/data/paramquery.yml b/data/paramquery.yml
@@ -3,7 +3,6 @@ homeUrl: https://paramquery.com/
 demoUrl: https://paramquery.com/demos
 githubRepo: paramquery/grid
 npmPackage: pqgrid
-ignoreBundlephobia: true
 license: GPLv3 or Commercial License
 revenueModel: Free (Vanilla JS Only) and Pro Versions
 description: >
diff --git a/data/react-pivot.yml b/data/react-pivot.yml
@@ -3,7 +3,6 @@ homeUrl: https://davidguttman.github.io/react-pivot/
 demoUrl: https://davidguttman.github.io/react-pivot/
 githubRepo: davidguttman/react-pivot
 npmPackage: react-pivot
-ignoreBundlephobia: true
 license: MIT License
 revenueModel: Free
 description: >
diff --git a/data/sencha-ext-gen.yml b/data/sencha-ext-gen.yml
@@ -3,7 +3,6 @@ homeUrl: https://www.sencha.com/products/extjs/
 demoUrl: https://examples.sencha.com/extjs/
 githubRepo: sencha/ext-gen
 npmPackage: "@sencha/ext-gen"
-ignoreBundlephobia: true
 license: Custom License
 revenueModel: Commercial 30-day Trial
 description: >
diff --git a/data/smart-grid.yml b/data/smart-grid.yml
@@ -3,7 +3,6 @@ homeUrl: https://www.htmlelements.com/docs/grid/
 demoUrl: https://www.htmlelements.com/demos/grid/overview/
 githubRepo: HTMLElements/smart-webcomponents
 npmPackage: "@smarthtmlelements/smart-elements"
-ignoreBundlephobia: true
 license: Custom License
 revenueModel: Community and Enterprise Versions
 description: >
diff --git a/data/svar-datagrid.yml b/data/svar-datagrid.yml
@@ -3,7 +3,6 @@ homeUrl: https://svar.dev/svelte/datagrid/
 demoUrl: https://docs.svar.dev/svelte/grid/samples/#/base/willow
 githubRepo: svar-widgets/grid
 npmPackage: wx-svelte-grid
-ignoreBundlephobia: true
 license: MIT License
 revenueModel: Free
 description: >
diff --git a/data/wijmo-flexgrid.yml b/data/wijmo-flexgrid.yml
@@ -3,7 +3,6 @@ homeUrl: https://www.grapecity.com/wijmo/flexgrid-javascript-data-grid
 demoUrl: https://www.grapecity.com/wijmo/demos/Grid/Overview/purejs
 githubRepo:
 npmPackage: "@grapecity/wijmo.all"
-ignoreBundlephobia: true
 license: Custom License
 revenueModel: Commercial License
 description: >
diff --git a/data/wijmo-grid.yml b/data/wijmo-grid.yml
@@ -3,7 +3,6 @@ homeUrl: https://www.grapecity.com/wijmo
 demoUrl: https://www.grapecity.com/wijmo/demos/Grid/Overview/purejs
 githubRepo: null
 npmPackage: wijmo
-ignoreBundlephobia: true
 license: Commercial
 revenueModel: Commercial
 description: Enterprise-grade JavaScript data grid component by GrapeCity. Part of the Wijmo UI controls suite, offering comprehensive data visualization and editing capabilities for business applications.
diff --git a/lib/fetcher.ts b/lib/fetcher.ts
@@ -19,8 +19,8 @@ const throttledFetch = throttler(async (url: string) => {
   try {
     // Be nice to our APIs. (File a GitHub issue if we aren't!)
     const ua = VERCEL_URL
-      ? `jsgrids.statico.io (Netlify build ${VERCEL_URL} for commit ${VERCEL_GITHUB_COMMIT_SHA})`
-      : `jsgrids.statico.io (local development)`;
+      ? `https://jsgrids.statico.io (Netlify build ${VERCEL_URL} for commit ${VERCEL_GITHUB_COMMIT_SHA})`
+      : `https://jsgrids.statico.io (local development)`;
     const headers: any = {
       "User-Agent": ua,
     };
@@ -34,9 +34,10 @@ const throttledFetch = throttler(async (url: string) => {
       headers.Authorization = `Bearer ${NPM_TOKEN}`;
     }
 
-    if (/bundlephobia/.test(url)) {
-      // bundle-phobia-cli does something like this so let's follow suit.
-      headers["X-Bundlephobia-User"] = ua;
+    if (/packagephobia/.test(url)) {
+      // Package Phobia API requires User-Agent header to avoid being blocked.
+      // See: https://github.com/styfle/packagephobia/blob/main/API.md
+      headers["User-Agent"] = ua;
     }
 
     const fn = async () => {
@@ -49,10 +50,11 @@ const throttledFetch = throttler(async (url: string) => {
       return { headers: resHeaders, data };
     };
 
+    const isPackagePhobia = /packagephobia/.test(url);
     return await pRetry(fn, {
       minTimeout: 3000,
       factor: 1,
-      retries: 3,
+      retries: isPackagePhobia ? 1 : 3,
       onFailedAttempt: (err) => {
         console.log(
           "fetcher: failed %s, attempt number = %d, retries left = %d",
diff --git a/lib/libraries.ts b/lib/libraries.ts
@@ -51,7 +51,6 @@ const ImportedYAMLInfo = z.object({
   demoUrl: z.union([URL, z.null()]),
   githubRepo: z.union([GitHubRepo, z.null()]),
   npmPackage: z.union([z.string(), z.null()]),
-  ignoreBundlephobia: z.boolean().optional(),
   license: z.union([z.string(), z.null()]),
   revenueModel: z.union([z.string(), z.null()]),
   frameworks: Frameworks,
@@ -80,12 +79,12 @@ const AugmentedInfo = z.object({
       downloads: z.number(),
     })
     .optional(),
-  bundlephobia: z
+  packagephobia: z
     .union([
       z.object({
         url: URL,
-        rawSize: z.number(),
-        gzipSize: z.number(),
+        publishSize: z.number(),
+        installSize: z.number(),
       }),
       z.null(),
     ])
@@ -197,24 +196,29 @@ export const getLibraries = async (): Promise<LibraryInfo[]> => {
         item.npm = npm;
       }
 
-      // Grab bundle sizes from Bundlephobia.
-      if (item.npmPackage && item.ignoreBundlephobia !== true) {
+      // Grab package sizes from Package Phobia.
+      if (item.npmPackage) {
         const name = item.npmPackage;
-        const url = `https://bundlephobia.com/result?p=${name}`;
+        const url = `https://packagephobia.com/result?p=${name}`;
         try {
           const { data } = await fetcher(
-            `https://bundlephobia.com/api/size?package=${name}`,
+            `https://packagephobia.com/v2/api.json?p=${name}`,
           );
-          item.bundlephobia = {
+          // Package Phobia API returns publish and install sizes in bytes
+          const publishSize =
+            data.publish?.bytes ?? data.publishSize ?? data.size ?? 0;
+          const installSize =
+            data.install?.bytes ?? data.installSize ?? data.gzip ?? 0;
+          item.packagephobia = {
             url,
-            rawSize: data.size || 0,
-            gzipSize: data.gzip || 0,
+            publishSize,
+            installSize,
           };
         } catch (err) {
-          // Bundlephobia constantly errors out, even after retrying. So let's do
-          // the best we can and signal to the frontend that the API is broken.
-          console.log("libraries: giving up getting bundle size for %s", name);
-          item.bundlephobia = { url, rawSize: -1, gzipSize: -1 };
+          // Package Phobia might error out, so let's do the best we can and
+          // signal to the frontend that the API is broken.
+          console.log("libraries: giving up getting package size for %s", name);
+          item.packagephobia = { url, publishSize: -1, installSize: -1 };
         }
       }
 
