add package size and dependency count to metadata (#1877)

Author: Simek

assets/data.json

@@ -138,17 +138,19 @@ export const A = ({
   const [isHovered, setIsHovered] = useState(false);
 
   const linkStyles = getLinkStyles(isDark);
-  const linkHoverStyles = getLinkHoverStyles(isDark);
+  const linkHoverStyles = getLinkHoverStyles();
 
   if ((target === '_self' && !href.startsWith('#')) || href.startsWith('/')) {
     const passedStyle = Array.isArray(style) ? StyleSheet.flatten(style) : style;
     return (
       <Link
         href={href}
+        onPointerEnter={() => setIsHovered(true)}
+        onPointerLeave={() => setIsHovered(false)}
         style={{
           ...linkStyles,
-          ...(isHovered && linkHoverStyles),
           ...(passedStyle as any),
+          ...(isHovered && linkHoverStyles),
           ...(isHovered && hoverStyle),
         }}>
         {children}
@@ -176,16 +178,13 @@ export const A = ({
 
 const getLinkStyles = (isDark: boolean) => ({
   color: isDark ? colors.white : colors.black,
-  backgroundColor: isDark ? darkColors.powder : colors.powder,
   textDecorationColor: isDark ? colors.gray5 : colors.pewter,
   textDecorationLine: 'underline',
   fontFamily: 'inherit',
 });
 
-const getLinkHoverStyles = (isDark: boolean) => ({
-  backgroundColor: isDark ? colors.primaryDark : colors.sky,
-  color: isDark ? darkColors.dark : colors.black,
-  textDecorationColor: isDark ? darkColors.powder : colors.gray4,
+const getLinkHoverStyles = () => ({
+  textDecorationColor: colors.primaryDark,
 });
 
 export function HoverEffect({ children }: PropsWithChildren) {

common/styleguide.tsx

@@ -455,3 +455,26 @@ export function NativeCode({ width = 18, height = 22, fill = colors.black }: Ico
     </Svg>
   );
 }
+
+export function PackageSize({ width = 18, height = 18, fill = colors.black }: IconProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
+      <Path fill={fill} d="M1 3h13v2H3v10h18v-4h2v8H1zm3 18h16v2H4z" />
+      <Path
+        fill={fill}
+        d="M20 1.002v4.586l1.501-1.5L22.915 5.5l-3.914 3.915L15.084 5.5l1.414-1.414l1.503 1.503V1.002z"
+      />
+    </Svg>
+  );
+}
+
+export function Dependency({ width = 18, height = 20, fill = colors.black }: IconProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 18 20" fill="none">
+      <Path
+        fill={fill}
+        d="M8 17.425V10.575L2 7.1V13.95L8 17.425ZM10 17.425L16 13.95V7.1L10 10.575V17.425ZM8 19.725L1 15.7C0.683337 15.5167 0.437337 15.275 0.262004 14.975C0.0866705 14.675 -0.000662879 14.3417 3.78787e-06 13.975V6.025C3.78787e-06 5.65833 0.0876704 5.325 0.263004 5.025C0.438337 4.725 0.684004 4.48333 1 4.3L8 0.275C8.31667 0.0916668 8.65 0 9 0C9.35 0 9.68333 0.0916668 10 0.275L17 4.3C17.3167 4.48333 17.5627 4.725 17.738 5.025C17.9133 5.325 18.0007 5.65833 18 6.025V13.975C18 14.3417 17.9123 14.675 17.737 14.975C17.5617 15.275 17.316 15.5167 17 15.7L10 19.725C9.68333 19.9083 9.35 20 9 20C8.65 20 8.31667 19.9083 8 19.725ZM13 6.525L14.925 5.425L9 2L7.05 3.125L13 6.525ZM9 8.85L10.95 7.725L5.025 4.3L3.075 5.425L9 8.85Z"
+      />
+    </Svg>
+  );
+}

components/Icons/index.tsx

@@ -2,8 +2,11 @@ import { useContext } from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 
 import { colors, A, P, Caption, darkColors } from '~/common/styleguide';
+import Tooltip from '~/components/Tooltip';
 import CustomAppearanceContext from '~/context/CustomAppearanceContext';
-import { type LibraryType } from '~/types';
+import { type LibraryType, MetadataEntryType } from '~/types';
+import { partition } from '~/util/arrays';
+import { formatBytes } from '~/util/formatBytes';
 
 import { DirectoryScore } from './DirectoryScore';
 import {
@@ -17,25 +20,26 @@ import {
   Code,
   TypeScript,
   NativeCode,
+  PackageSize,
+  Dependency,
 } from '../Icons';
 
 type Props = {
   library: LibraryType;
   secondary?: boolean;
 };
 
-function generateData({ github, score, npm, npmPkg }: LibraryType, isDark: boolean) {
+function generateData(
+  { github, score, npm, npmPkg }: LibraryType,
+  isDark: boolean
+): MetadataEntryType[] {
   const iconColor = isDark ? darkColors.pewter : colors.gray5;
   return [
     {
       id: 'score',
       icon: <DirectoryScore score={score} />,
       content: (
-        <A
-          target="_self"
-          href="/scoring"
-          style={{ ...styles.link, ...styles.mutedLink }}
-          hoverStyle={isDark && { color: colors.primaryDark }}>
+        <A target="_self" href="/scoring" style={styles.link}>
           Directory Score
         </A>
       ),
@@ -63,15 +67,38 @@ function generateData({ github, score, npm, npmPkg }: LibraryType, isDark: boole
         </A>
       ),
     },
+    {
+      id: 'dependencies',
+      icon: <Dependency fill={iconColor} />,
+      content: (
+        <A
+          href={`https://www.npmjs.com/package/${npmPkg}?activeTab=dependencies`}
+          style={styles.link}>
+          {`${github.stats.dependencies} ${github.stats.dependencies === 1 ? 'dependency' : 'dependencies'}`}
+        </A>
+      ),
+    },
+    npm.size
+      ? {
+          id: 'size',
+          icon: <PackageSize fill={iconColor} />,
+          content: (
+            <A href={`https://packagephobia.com/result?p=${npmPkg}`} style={styles.link}>
+              {`${formatBytes(npm.size)} package size`}
+            </A>
+          ),
+        }
+      : null,
     github.stats.forks
       ? {
           id: 'forks',
           icon: <Fork fill={iconColor} width={16} height={17} />,
           content: (
             <A href={`${github.urls.repo}/network/members`} style={styles.link}>
-              {`${github.stats.forks.toLocaleString()}`} forks
+              {`${github.stats.forks.toLocaleString()}`}
             </A>
           ),
+          tooltip: 'Forks',
         }
       : null,
     github.stats.subscribers
@@ -80,9 +107,10 @@ function generateData({ github, score, npm, npmPkg }: LibraryType, isDark: boole
           icon: <Eye fill={iconColor} />,
           content: (
             <A href={`${github.urls.repo}/watchers`} style={styles.link}>
-              {`${github.stats.subscribers.toLocaleString()}`} watchers
+              {`${github.stats.subscribers.toLocaleString()}`}
             </A>
           ),
+          tooltip: 'Watchers',
         }
       : null,
     github.stats.issues
@@ -91,9 +119,10 @@ function generateData({ github, score, npm, npmPkg }: LibraryType, isDark: boole
           icon: <Issue fill={iconColor} />,
           content: (
             <A href={`${github.urls.repo}/issues`} style={styles.link}>
-              {`${github.stats.issues.toLocaleString()}`} issues
+              {`${github.stats.issues.toLocaleString()}`}
             </A>
           ),
+          tooltip: 'Issues',
         }
       : null,
   ];
@@ -106,7 +135,10 @@ function generateSecondaryData({ github, examples }: LibraryType, isDark: boolea
   const iconColor = isDark ? darkColors.pewter : colors.secondary;
   const paragraphStyles = [styles.secondaryText, secondaryTextColor];
   const linkStyles = [...paragraphStyles, styles.mutedLink];
-  const hoverStyle = isDark && { color: colors.primaryDark };
+  const hoverStyle = [
+    { textDecorationColor: isDark ? colors.gray6 : colors.gray4 },
+    isDark && { color: colors.primaryDark },
+  ];
 
   return [
     github.urls.homepage
@@ -173,26 +205,57 @@ function generateSecondaryData({ github, examples }: LibraryType, isDark: boolea
 
 export function MetaData({ library, secondary }: Props) {
   const { isDark } = useContext(CustomAppearanceContext);
-  const data = secondary ? generateSecondaryData(library, isDark) : generateData(library, isDark);
 
-  return (
-    <>
-      {data.filter(Boolean).map(({ id, icon, content }, i) => (
-        <View
-          key={id}
-          style={[
-            styles.displayHorizontal,
-            i + 1 !== data.length ? styles.datumContainer : {},
-            secondary ? styles.secondaryContainer : {},
-          ]}>
-          <View style={[styles.iconContainer, secondary ? styles.secondaryIconContainer : {}]}>
-            {icon}
+  if (secondary) {
+    const data = generateSecondaryData(library, isDark).filter(Boolean);
+    return (
+      <>
+        {data.map(({ id, icon, content }, i) => (
+          <View
+            key={id}
+            style={[
+              styles.displayHorizontal,
+              i + 1 !== data.length ? styles.datumContainer : {},
+              styles.secondaryContainer,
+            ]}>
+            <View style={[styles.iconContainer, styles.secondaryIconContainer]}>{icon}</View>
+            {content}
           </View>
-          {content}
+        ))}
+      </>
+    );
+  } else {
+    const data = generateData(library, isDark).filter(entry => !!entry);
+    const [bottomData, listData] = partition<NonNullable<MetadataEntryType>>(data, ({ id }) => {
+      return ['forks', 'subscribers', 'issues'].includes(id);
+    });
+    return (
+      <>
+        {listData.map(({ id, icon, content }, i) => (
+          <View
+            key={id}
+            style={[styles.displayHorizontal, i + 1 !== data.length ? styles.datumContainer : {}]}>
+            <View style={styles.iconContainer}>{icon}</View>
+            {content}
+          </View>
+        ))}
+        <View style={[styles.displayHorizontal, styles.bottomStats]}>
+          {bottomData.map(({ id, icon, content, tooltip }) => (
+            <View key={id} style={styles.displayHorizontal}>
+              <Tooltip
+                key={id}
+                sideOffset={2}
+                delayDuration={100}
+                trigger={<View style={styles.iconContainer}>{icon}</View>}>
+                {tooltip}
+              </Tooltip>
+              {content}
+            </View>
+          ))}
         </View>
-      ))}
-    </>
-  );
+      </>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
@@ -205,6 +268,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  bottomStats: {
+    gap: 16,
+  },
   iconContainer: {
     marginRight: 7,
     width: 22,

components/Library/MetaData.tsx

@@ -92,7 +92,7 @@ const Library = ({ library, skipMetadata, showTrendingMark }: Props) => {
         <View style={styles.verticalMargin}>
           <CompatibilityTags library={library} />
         </View>
-        {github.description && github.description.length && (
+        {Boolean(github.description && github.description.length) && (
           <View style={styles.verticalMargin}>
             <Headline
               numberOfLines={skipMetadata ? 3 : undefined}

components/Library/index.tsx

@@ -13,7 +13,7 @@ import { Arrow } from './Icons';
 
 type Props = {
   query: Query;
-  total: number | null;
+  total?: number | null;
   style?: ViewStyle;
   basePath?: string;
 };

components/Pagination.tsx

@@ -120,7 +120,7 @@ const Search = ({ query, total }: Props) => {
                     Esc
                   </Label>
                   <Label style={styles.focusHintLabel}>
-                    to {search?.length > 0 ? 'clear' : 'blur'}
+                    to {(search?.length ?? 0) > 0 ? 'clear' : 'blur'}
                   </Label>
                 </View>
               ) : (

components/Search.tsx

@@ -1,17 +1,17 @@
-import { type PopperContentProps } from '@radix-ui/react-popper';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import type { PropsWithChildren, ReactNode } from 'react';
 
 type TooltipProps = PropsWithChildren<{
   trigger: ReactNode;
-  sideOffset?: number;
-  side?: PopperContentProps['side'];
+  sideOffset?: TooltipPrimitive.TooltipContentProps['sideOffset'];
+  side?: TooltipPrimitive.TooltipContentProps['side'];
+  delayDuration?: TooltipPrimitive.TooltipProps['delayDuration'];
 }>;
 
-function Tooltip({ children, trigger, side, sideOffset = 4 }: TooltipProps) {
+function Tooltip({ children, trigger, side, delayDuration = 0, sideOffset = 4 }: TooltipProps) {
   return (
     <TooltipPrimitive.Provider>
-      <TooltipPrimitive.Root delayDuration={0}>
+      <TooltipPrimitive.Root delayDuration={delayDuration}>
         <TooltipPrimitive.Trigger asChild>{trigger}</TooltipPrimitive.Trigger>
         <TooltipPrimitive.Portal>
           <TooltipPrimitive.Content className="TooltipContent" sideOffset={sideOffset} side={side}>

components/Tooltip.tsx

@@ -6,6 +6,7 @@ import path from 'node:path';
 
 import debugGithubRepos from '~/debug-github-repos.json';
 import githubRepos from '~/react-native-libraries.json';
+import { fetchNpmRegistryData } from '~/scripts/fetch-npm-registry-data';
 import { fetchNpmStatDataBulk } from '~/scripts/fetch-npm-stat-data';
 import { LibraryDataEntryType, LibraryType } from '~/types';
 import { isLaterThan, TimeRange } from '~/util/datetime';
@@ -115,6 +116,10 @@ async function buildAndScoreData() {
     },
   }));
 
+  console.log('\n⬇️ Fetching registry data from npm');
+
+  data = await fetchNpmRegistryDataSequentially(data);
+
   console.log('\n⚛️ Calculating Directory Score');
   data = data.map(project => {
     try {
@@ -370,4 +375,27 @@ async function fetchNpmStatDataSequentially(bulkList: string[][]) {
   return results;
 }
 
+async function fetchNpmRegistryDataSequentially(list: LibraryType[]) {
+  const total = list.length;
+
+  for (let i = 0; i < list.length; i++) {
+    const entry = list[i];
+
+    if (entry.template) {
+      continue;
+    }
+
+    await sleep(SLEEP_TIME / 10);
+    const shouldLog = i % CHUNK_SIZE === 0;
+    shouldLog && console.log(`Sleeping ${SLEEP_TIME / 10}ms`);
+
+    const data = await fetchNpmRegistryData(entry);
+    shouldLog && console.log(`${CHUNK_SIZE * Math.floor(i / CHUNK_SIZE)} of ${total} fetched`);
+
+    list[i] = data;
+  }
+
+  return list;
+}
+
 await buildAndScoreData();

scripts/build-and-score-data.ts

@@ -133,6 +133,9 @@ const createRepoDataWithResponse = (json, monorepo) => {
       json.name = packageJson.name;
       json.isPackagePrivate = packageJson.private ?? false;
       json.registry = packageJson?.publishConfig?.registry ?? undefined;
+      json.dependenciesCount = packageJson.dependencies
+        ? Object.keys(packageJson.dependencies).length
+        : 0;
 
       if (monorepo) {
         json.homepageUrl = packageJson.homepage;
@@ -192,6 +195,7 @@ const createRepoDataWithResponse = (json, monorepo) => {
       issues: json.issues.totalCount,
       subscribers: json.watchers.totalCount,
       stars: json.stargazers.totalCount,
+      dependencies: json.dependenciesCount,
     },
     name: json.name,
     fullName: json.nameWithOwner,