feat: calculate directory sizes in code view (#1540)

Author: wojtekmaj

app/components/Code/DirectoryListing.vue

@@ -120,10 +120,7 @@ const bytesFormatter = useBytesFormatter()
               </svg>
               <span class="w-full flex justify-self-stretch items-center gap-2">
                 <span class="flex-1">{{ node.name }}</span>
-                <span
-                  v-if="node.type === 'file' && node.size"
-                  class="text-end text-xs text-fg-subtle"
-                >
+                <span v-if="typeof node.size === 'number'" class="text-end text-xs text-fg-subtle">
                   {{ bytesFormatter.format(node.size) }}
                 </span>
               </span>

server/api/registry/files/[...pkg].get.ts

@@ -46,7 +46,7 @@ export default defineCachedEventHandler(
     swr: true,
     getKey: event => {
       const pkg = getRouterParam(event, 'pkg') ?? ''
-      return `files:v1:${pkg.replace(/\/+$/, '').trim()}`
+      return `files:v2:${pkg.replace(/\/+$/, '').trim()}`
     },
   },
 )

server/utils/file-tree.ts

@@ -39,11 +39,14 @@ export function convertToFileTree(
     const path = parentPath ? `${parentPath}/${node.name}` : node.name
 
     if (node.type === 'directory') {
+      const children = node.files ? convertToFileTree(node.files, path) : []
+
       result.push({
         name: node.name,
         path,
         type: 'directory',
-        children: node.files ? convertToFileTree(node.files, path) : [],
+        size: children.reduce((total, child) => total + (child.size ?? 0), 0),
+        children,
       })
     } else {
       result.push({

shared/types/npm-registry.ts

@@ -355,7 +355,7 @@ export interface PackageFileTree {
   path: string
   /** Node type */
   type: 'file' | 'directory'
-  /** File size in bytes (only for files) */
+  /** Node size in bytes (file size or recursive directory total) */
   size?: number
   /** Child nodes (only for directories) */
   children?: PackageFileTree[]

test/unit/server/utils/file-tree.spec.ts

@@ -93,6 +93,8 @@ describe('convertToFileTree', () => {
     const formatFile = getChildren(utilsDir).find(child => child.name === 'format.ts')
     expect(formatFile?.path).toBe('src/utils/format.ts')
     expect(formatFile?.size).toBe(22)
+    expect(utilsDir?.size).toBe(22)
+    expect(src?.size).toBe(122)
   })
 
   it('returns an empty tree for empty input', () => {
@@ -112,6 +114,7 @@ describe('convertToFileTree', () => {
     const tree = convertToFileTree(input)
 
     expect(tree[0]?.type).toBe('directory')
+    expect(tree[0]?.size).toBe(0)
     expect(tree[0]?.children).toEqual([])
   })
 })