Add Issues page

filipsobol · Mar 2, 2025 · a66b827 · a66b827
1 parent a206294
commit a66b827
Show file tree

Hide file tree

Showing 11 changed files with 3,029 additions and 892 deletions.
diff --git a/packages/html-kit/sample_data.json b/packages/html-kit/sample_data.json
diff --git a/packages/html-kit/src/app.css b/packages/html-kit/src/app.css
@@ -1,9 +1,5 @@
 @import 'tailwindcss';
 
-html {
-  font-size: 14px;
-}
-
 * {
   scrollbar-width: thin;
 }
diff --git a/packages/html-kit/src/lib/components/Sidebar/Sidebar.svelte b/packages/html-kit/src/lib/components/Sidebar/Sidebar.svelte
@@ -74,21 +74,6 @@
           <span class="truncate pointer-events-none">Inputs</span>
         </Button>
 
-        <Button
-          element="link"
-          variant="ghost"
-          align="start"
-          full={ true }
-          href="#/warnings"
-        >
-          <CircleAlert
-            size={ 18 }
-            class="shrink-0 text-gray--600 pointer-events-none"
-          />
-
-          <span class="truncate pointer-events-none">Warnings</span>
-        </Button>
-
         <Button
           element="link"
           variant="ghost"
@@ -103,6 +88,23 @@
 
           <span class="truncate pointer-events-none">Dependencies</span>
         </Button>
+
+        {#if store.report.issues.length > 0}
+          <Button
+            element="link"
+            variant="ghost"
+            align="start"
+            full={ true }
+            href="#/issues"
+          >
+            <CircleAlert
+              size={ 18 }
+              class="shrink-0 text-gray--600 pointer-events-none"
+            />
+
+            <span class="truncate pointer-events-none">Issues</span>
+          </Button>
+        {/if}
       </div>
 
       <p class="mt-12 px-2 font-bold text-gray-500">Assets</p>

diff --git a/packages/html-kit/src/routes/dependencies/+page.svelte b/packages/html-kit/src/routes/dependencies/+page.svelte
@@ -30,7 +30,6 @@
                 <li>
                   <a
                     href={ '#/assets/' + path }
-                    data-hover={ path }
                     class="text-blue-500 hover:underline underline-offset-4"
                   >
                     { path }

diff --git a/packages/html-kit/src/routes/inputs/+page.svelte b/packages/html-kit/src/routes/inputs/+page.svelte
@@ -36,7 +36,6 @@
                 <li>
                   <a
                     href={ '#/assets/' + path }
-                    data-hover={ path }
                     class="text-blue-500 hover:underline underline-offset-4"
                   >
                     { path }

diff --git a/packages/html-kit/src/routes/issues/+page.svelte b/packages/html-kit/src/routes/issues/+page.svelte
@@ -0,0 +1,67 @@
+<div class="flex mb-4 items-center h-12">
+  <div class="grow flex gap-4">
+    <p class="col-span-12 text-2xl font-bold text-gray-900">Warnings</p>
+  </div>
+</div>
+
+{#if groupedIssues['duplicate-dependency']}
+  <p class="col-span-12 text-xl font-bold text-gray-900 mb-2">Duplicated dependencies</p>
+
+  <div class="relative overflow-x-auto">
+    <table class="w-full text-sm text-left table-auto text-gray-500">
+      <thead class="text-xs text-gray-700 uppercase bg-gray-50">
+        <tr>
+          <th class="px-6 py-3">Name</th>
+          <th class="px-6 py-3">Paths</th>
+          <th class="px-6 py-3">Used in</th>
+        </tr>
+      </thead>
+      <tbody class="align-top">
+        {#each groupedIssues['duplicate-dependency'] as dependency}
+          <tr class="bg-white border-b border-gray-200">
+            <th class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">{ dependency.name }</th>
+            <td class="px-6 py-4">
+              <ul>
+                {#each store.report.dependencies[ dependency.name ] as path}
+                  <li>{ path }</li>
+                {/each}
+              </ul>
+            </td>
+            <td class="px-6 py-4 text-gray-900 whitespace-nowrap">
+              <ul>
+                {#each getUsedIn( dependency.name ) as path}
+                  <li>
+                    <a
+                      href={ '#/assets/' + path }
+                      class="text-blue-500 hover:underline underline-offset-4"
+                    >
+                      { path }
+                    </a>
+                  </li>
+                {/each}
+              </ul>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+{/if}
+
+<script lang="ts">
+import { store } from '$lib/store.svelte.js';
+
+const groupedIssues = store.report.issues.reduce( ( acc, issue ) => {
+  acc[ issue.type ] ||= [];
+  acc[ issue.type ].push( issue.data );
+  return acc;
+}, {} as Record<string, any> );
+
+function getUsedIn( dependencyName: string ) {
+  return Object.entries( store.report.outputs )
+    .filter( ( [ , output ] ) => {
+      return Object.keys( output.inputs ).some( input => input.includes( dependencyName ) )
+    } )
+    .map( ( [ name ] ) => name );
+}
+</script>
diff --git a/packages/html-kit/src/routes/warnings/+page.svelte b/packages/html-kit/src/routes/warnings/+page.svelte
diff --git a/packages/sonda/src/report/formats.ts b/packages/sonda/src/report/formats.ts
@@ -40,7 +40,7 @@ export function generateJsonReport(
     inputs: sortObjectKeys( inputs ),
     outputs: sortObjectKeys( outputs ),
     dependencies: {},
-    issues: {}
+    issues: []
   };
 
   report.dependencies = getDependencies( report );

diff --git a/packages/sonda/src/report/issues.ts b/packages/sonda/src/report/issues.ts
@@ -1,22 +1,20 @@
-import type { JsonReport } from '../types';
+import type { JsonReport, IssueDuplicateDependency } from '../types';
 
 /**
  * Find issues with the bundles.
  */
 export function getIssues( report: JsonReport ): JsonReport['issues'] {
-  const issues: JsonReport['issues'] = {};
-  const duplicateDependencies = getDuplicateDependencies( report );
-
-  if ( duplicateDependencies.length > 0 ) {
-    issues.duplicateDependencies = duplicateDependencies;
-  }
-
-  return issues;
+  return [
+    ...getDuplicateDependencies( report )
+  ];
 }
 
-function getDuplicateDependencies( report: JsonReport ): Array<string> {
+function getDuplicateDependencies( report: JsonReport ): Array<IssueDuplicateDependency> {
   return Object
     .entries( report.dependencies )
     .filter(  ( [ , paths ] ) => paths.length > 1 )
-    .map( ( [ packageName ] ) => packageName );
+    .map( ( [ name ] ) => ( {
+      type: 'duplicate-dependency',
+      data: { name }
+    } ) );
 }
diff --git a/packages/sonda/src/types.ts b/packages/sonda/src/types.ts
@@ -132,9 +132,7 @@ export interface JsonReport {
   /**
    * List of issues detected in the outputs.
    */
-  issues: {
-    duplicateDependencies?: Array<string>
-  }
+  issues: Issues;
 }
 
 export interface Sizes {
@@ -143,6 +141,20 @@ export interface Sizes {
   brotli: number;
 }
 
+export type Issues = Array<IssueDuplicateDependency>;
+
+export interface IssueDuplicateDependency extends Issue {
+  type: 'duplicate-dependency';
+  data: {
+    name: string;
+  }
+}
+
+export interface Issue {
+  type: string;
+  data: unknown;
+}
+
 export interface CodeMap {
   code: string;
   map?: EncodedSourceMap;

diff --git a/packages/sonda/tests/report.test.ts b/packages/sonda/tests/report.test.ts
@@ -31,7 +31,7 @@ describe( 'report.ts', () => {
 				inputs: {},
 				outputs: {},
 				dependencies: {},
-				issues: {}
+				issues: []
 			} );
 		} );
 
@@ -49,7 +49,7 @@ describe( 'report.ts', () => {
 				inputs,
 				outputs: {},
 				dependencies: {},
-				issues: {}
+				issues: []
 			} );
 		} );
 
@@ -60,7 +60,7 @@ describe( 'report.ts', () => {
 				inputs: {},
 				outputs: {},
 				dependencies: {},
-				issues: {}
+				issues: []
 			} );
 		} );
 
@@ -71,7 +71,7 @@ describe( 'report.ts', () => {
 				inputs: {},
 				outputs: {},
 				dependencies: {},
-				issues: {}
+				issues: []
 			} );
 		} );
 
@@ -101,7 +101,7 @@ describe( 'report.ts', () => {
 					}
 				},
 				dependencies: {},
-				issues: {}
+				issues: []
 			} );
 		} );
 
@@ -132,7 +132,7 @@ describe( 'report.ts', () => {
 					}
 				},
 				dependencies: {},
-				issues: {}
+				issues: []
 			} );
 		} );
 
@@ -164,7 +164,7 @@ describe( 'report.ts', () => {
 					}
 				},
 				dependencies: {},
-				issues: {}
+				issues: []
 			} );
 		} );
 
@@ -206,7 +206,7 @@ describe( 'report.ts', () => {
 					}
 				},
 				dependencies: {},
-				issues: {}
+				issues: []
 			} );
 		} );
 
@@ -242,7 +242,7 @@ describe( 'report.ts', () => {
 					}
 				},
 				dependencies: {},
-				issues: {}
+				issues: []
 			} );
 		} );
 
@@ -319,7 +319,7 @@ describe( 'report.ts', () => {
 					}
 				},
 				dependencies: {},
-				issues: {}
+				issues: []
 			} );
 		} );
 
@@ -410,7 +410,7 @@ describe( 'report.ts', () => {
 					}
 				},
 				dependencies: {},
-				issues: {}
+				issues: []
 			} );
 		} );
 	} );
@@ -421,7 +421,7 @@ describe( 'report.ts', () => {
 				inputs: {},
 				outputs: {},
 				dependencies: {},
-				issues: {}
+				issues: []
 			} ) );
 
 			expect( generateHtmlReport( [], {}, defaultOptions ) ).toContain( stringifiedEmptyReport );
@@ -451,7 +451,7 @@ describe( 'report.ts', () => {
 					}
 				},
 				dependencies: {},
-				issues: {}
+				issues: []
 			} ) );
 
 			const assets = [ join( import.meta.dirname, 'fixtures/hasMapping/index.js' ) ];