feat(website): dependencies tab

website/src/lib/registry-api.ts

@@ -18,6 +18,7 @@ export type PackageResponse = {
 	license?: string
 	authors?: string[]
 	repository?: string
+	dependencies: Record<string, DependencyEntry>
 }
 
 export type TargetInfo = {
@@ -28,6 +29,17 @@ export type TargetInfo = {
 
 export type TargetKind = "roblox" | "roblox_server" | "lune" | "luau"
 
+export type DependencyEntry = [DependencyInfo, DependencyKind]
+
+export type DependencyInfo = {
+	index: string
+	name: string
+	target: string
+	version: string
+}
+
+export type DependencyKind = "standard" | "peer" | "dev"
+
 export const TARGET_KIND_DISPLAY_NAMES: Record<TargetKind, string> = {
 	roblox: "Roblox",
 	roblox_server: "Roblox (server)",
@@ -35,6 +47,12 @@ export const TARGET_KIND_DISPLAY_NAMES: Record<TargetKind, string> = {
 	luau: "Luau",
 }
 
+export const DEPENDENCY_KIND_DISPLAY_NAMES: Record<DependencyKind, string> = {
+	standard: "Dependencies",
+	peer: "Peer Dependencies",
+	dev: "Dev Dependencies",
+}
+
 export class RegistryHttpError extends Error {
 	name = "RegistryError"
 	constructor(

website/src/routes/packages/[scope]/[name]/+layout.svelte

@@ -78,6 +78,7 @@
 
 	<nav class="flex w-full border-b-2">
 		<Tab tab={readme}>Readme</Tab>
+		<Tab tab={`${pkgVersion}/${currentTarget.kind}/dependencies`}>Dependencies</Tab>
 		<Tab tab="versions">Versions</Tab>
 	</nav>
 

website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte

@@ -49,7 +49,7 @@
 </script>
 
 <div class="flex flex-col lg:flex-row">
-	<div class="lg:pr-4">
+	<div class="flex-grow lg:pr-4">
 		{@render children()}
 	</div>
 	<aside

website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/dependencies/+page.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { DEPENDENCY_KIND_DISPLAY_NAMES, type DependencyKind } from "$lib/registry-api.js"
+
+	const { data } = $props()
+
+	let groupedDeps = $derived(
+		Object.groupBy(
+			Object.entries(data.pkg.dependencies).map(([alias, dependency]) => ({ alias, dependency })),
+			(entry) => entry.dependency[1],
+		),
+	)
+</script>
+
+{#if Object.keys(groupedDeps).length === 0}
+	<p class="py-24 text-center">This package doesn't have any dependencies.</p>
+{:else}
+	<div class="space-y-8 py-8">
+		{#each Object.entries(groupedDeps).sort( (a, b) => a[0].localeCompare(b[0]), ) as [dependencyKind, group]}
+			<section>
+				<h2 class="text-heading mb-4 text-xl font-medium">
+					{DEPENDENCY_KIND_DISPLAY_NAMES[dependencyKind as DependencyKind]}
+				</h2>
+
+				<div class="space-y-4">
+					{#each group as { dependency: [dependencyInfo] }}
+						{@const [scope, name] = dependencyInfo.name.split("/")}
+
+						<article
+							class="bg-card hover:bg-card-hover relative overflow-hidden rounded px-5 py-4 transition"
+						>
+							<h3 class="font-semibold">
+								<a
+									href={`/packages/${dependencyInfo.name}/latest/any`}
+									class="after:absolute after:inset-0 after:content-['']"
+								>
+									<span class="text-heading">{scope}/</span><span class="text-light">{name}</span>
+								</a>
+							</h3>
+							<div class="text-primary text-sm font-semibold">
+								{dependencyInfo.version}
+								·
+								{dependencyInfo.target}
+							</div>
+						</article>
+					{/each}
+				</div>
+			</section>
+		{/each}
+	</div>
+{/if}