feat: update components to use new handle package data

Author: velut

codebook.toml

@@ -8,6 +8,7 @@ words = [
     "cloudflarestorage",
     "cwd",
     "dompurify",
+    "dvh",
     "fflate",
     "gitlab",
     "iconify",
@@ -23,6 +24,7 @@ words = [
     "runed",
     "shiki",
     "svh",
+    "unpkg",
     "unplugin",
     "vercel",
     "vite",

src/components/PackageAbout.astro

@@ -1,11 +1,12 @@
 ---
 import newGitHubIssueURL from "new-github-issue-url";
-import type { PackagePageHandlerProps } from "../../lib/package-page-handler";
 import AnchoredH2 from "./AnchoredH2.astro";
+import type { HandlePackageData } from "../../lib/handlers/package/handle-package";
 
-type Props = PackagePageHandlerProps;
+type Props = HandlePackageData;
 
-const { status, pkgId, generatedAt, generatedIn } = Astro.props;
+const { status, pkgInfo } = Astro.props;
+const { pkgId, generatedAt, generatedIn } = pkgInfo;
 const issueUrl = newGitHubIssueURL({
 	repoUrl: "https://github.com/jsdocs-io/web",
 	template: "package-with-missing-or-incorrect-documentation.md",
@@ -23,17 +24,17 @@ const issueUrl = newGitHubIssueURL({
 		datetime={generatedAt}></time> in {generatedIn}ms.
 
 	{
-		status === "with-api" && (
+		status === "pkg-has-api" && (
 			<>
 				<br />
 				Package <code class="text-nowrap">{pkgId}</code> analyzed{" "}
 				<time
-					x-data={`timeAgo('${Astro.props.pkgApi.analyzedAt}')`}
+					x-data={`timeAgo('${pkgInfo.pkgApi.analyzedAt}')`}
 					x-text="text"
-					title={Astro.props.pkgApi.analyzedAt}
-					datetime={Astro.props.pkgApi.analyzedAt}
+					title={pkgInfo.pkgApi.analyzedAt}
+					datetime={pkgInfo.pkgApi.analyzedAt}
 				/>{" "}
-				in {Astro.props.pkgApi.analyzedIn}ms.
+				in {pkgInfo.pkgApi.analyzedIn}ms.
 			</>
 		)
 	}

src/components/PackageApi.astro

@@ -1,15 +1,15 @@
 ---
 import { makeDeclarationUrl } from "../../lib/declaration-url";
-import type { PackagePageHandlerProps } from "../../lib/package-page-handler";
+import type { PackageInfoWithApi } from "../../lib/handlers/package/handle-package";
 import { makeUnpkgUrl } from "../../lib/unpkg-url";
 import Declarations from "./Declarations.astro";
 
-type Props = PackagePageHandlerProps & { status: "with-api" };
+type Props = PackageInfoWithApi;
 
 const {
-	pkgApi: { declarations, packages },
+	pkgApi: { declarations, dependencies },
 } = Astro.props;
-const unpkgUrl = makeUnpkgUrl(packages);
+const unpkgUrl = makeUnpkgUrl(dependencies);
 const declarationUrl = makeDeclarationUrl(declarations);
 ---
 

src/components/PackageOverview.astro

@@ -1,14 +1,14 @@
 ---
-import type { PackagePageHandlerProps } from "../../lib/package-page-handler";
+import type { HandlePackageData } from "../../lib/handlers/package/handle-package";
 import AnchoredH2 from "./AnchoredH2.astro";
 import DocComment from "./DocComment.astro";
 
-type Props = PackagePageHandlerProps;
+type Props = HandlePackageData;
 
-const { status, pkgJson } = Astro.props;
+const { status, pkgInfo } = Astro.props;
 const overview =
-	status === "with-api" && Astro.props.pkgApi.overview ? Astro.props.pkgApi.overview
-	: pkgJson.description ? `/** ${pkgJson.description} */`
+	status === "pkg-has-api" && pkgInfo.pkgApi.overview ? pkgInfo.pkgApi.overview
+	: pkgInfo.pkgJson.description ? `/** ${pkgInfo.pkgJson.description} */`
 	: `/** Overview not available. */`;
 ---
 

src/components/PackagePageAlerts.astro

@@ -2,59 +2,70 @@
 import LucideCircleX from "~icons/lucide/circle-x";
 import LucidePackageCheck from "~icons/lucide/package-check";
 import LucideTriangleAlert from "~icons/lucide/triangle-alert";
-import type { PackagePageHandlerProps } from "../../lib/package-page-handler";
+import type { HandlePackageData } from "../../lib/handlers/package/handle-package";
 
-type Props = PackagePageHandlerProps;
+type Props = HandlePackageData;
 
-const { status, pkgId } = Astro.props;
+const { status, pkgInfo } = Astro.props;
 ---
 
 {
-	["invalid-license", "no-types", "definitely-typed", "no-api"].includes(status) && (
+	status !== "pkg-has-api" && (
 		<div role="alert" class="alert col-span-full justify-self-center text-balance lg:w-fit">
-			{status === "invalid-license" && (
+			{status === "pkg-has-invalid-license" && (
 				<>
 					<LucideTriangleAlert class="size-6" />
 					<span>
-						Documentation is unavailable because package {pkgId} is unlicensed or has a proprietary
-						license.
+						Documentation is unavailable because package {pkgInfo.pkgId} is unlicensed or has a
+						proprietary license.
 					</span>
 				</>
 			)}
 
-			{status === "no-types" && (
+			{status === "pkg-has-no-types" && (
 				<>
 					<LucideTriangleAlert class="size-6" />
 					<span>
-						Documentation is unavailable because package {pkgId} doesn't export type definitions.
+						Documentation is unavailable because package {pkgInfo.pkgId} doesn't export type
+						definitions.
 					</span>
 				</>
 			)}
 
-			{status === "definitely-typed" && (
+			{status === "pkg-is-deprecated-dt-pkg" && (
+				<>
+					<LucideTriangleAlert class="size-6" />
+					<span>
+						Documentation is unavailable because package {pkgInfo.pkgId} is a deprecated Definitely
+						Typed package.
+					</span>
+				</>
+			)}
+
+			{status === "pkg-has-dt-pkg" && (
 				<>
 					<LucidePackageCheck class="size-6" />
 					<span>
-						Type definitions for {pkgId} are available in the{" "}
-						<a class="link-hover link font-bold" href={`/package/${Astro.props.dtPkgName}`}>
-							{Astro.props.dtPkgName}
+						Type definitions for {pkgInfo.pkgId} are available in the{" "}
+						<a class="link-hover link font-bold" href={`/package/${pkgInfo.dtPkgName}`}>
+							{pkgInfo.dtPkgName}
 						</a>{" "}
 						package.
 					</span>
 					<a
-						href={`/package/${Astro.props.dtPkgName}`}
+						href={`/package/${pkgInfo.dtPkgName}`}
 						class="btn btn-outline btn-sm border-base-content/50"
 					>
 						See documentation
 					</a>
 				</>
 			)}
 
-			{status === "no-api" && (
+			{status === "pkg-has-no-api" && (
 				<>
 					<LucideCircleX class="size-6" />
 					<span>
-						Documentation is unavailable because API extraction failed for package {pkgId}.
+						Documentation is unavailable because API extraction failed for package {pkgInfo.pkgId}.
 					</span>
 				</>
 			)}

src/components/PackagePageArticle.astro

@@ -1,5 +1,5 @@
 ---
-import type { PackagePageHandlerProps } from "../../lib/package-page-handler";
+import type { HandlePackageData } from "../../lib/handlers/package/handle-package";
 import PackageAbout from "./PackageAbout.astro";
 import PackageApi from "./PackageApi.astro";
 import PackageBadge from "./PackageBadge.astro";
@@ -8,17 +8,18 @@ import PackageInfoBadges from "./PackageInfoBadges.astro";
 import PackageOverview from "./PackageOverview.astro";
 import PackageTitle from "./PackageTitle.astro";
 
-type Props = PackagePageHandlerProps;
+type Props = HandlePackageData;
 
-const { status, pkgJson } = Astro.props;
+const { status, pkgInfo } = Astro.props;
+const { pkgJson } = pkgInfo;
 ---
 
 <main id="main-content">
-	<article class="prose max-w-[100ch] break-words">
+	<article class="prose max-w-[100ch] wrap-break-word">
 		<PackageTitle {pkgJson} />
 		<PackageInfoBadges {pkgJson} />
 		<PackageOverview {...Astro.props} />
-		{status === "with-api" && <PackageApi {...Astro.props} />}
+		{status === "pkg-has-api" && <PackageApi {...pkgInfo} />}
 		<PackageDependencies {pkgJson} />
 		<PackageBadge name={pkgJson.name} />
 		<PackageAbout {...Astro.props} />

src/components/PackagePageIndex.astro

@@ -1,10 +1,11 @@
 ---
-import type { PackagePageHandlerProps } from "../../lib/package-page-handler";
+import type { HandlePackageData } from "../../lib/handlers/package/handle-package";
 import PackagePageIndexDeclarations from "./PackagePageIndexDeclarations.astro";
 
-type Props = PackagePageHandlerProps;
+type Props = HandlePackageData;
 
-const { status, pkgJson } = Astro.props;
+const { status, pkgInfo } = Astro.props;
+const { pkgJson } = pkgInfo;
 const hasPeerDeps = Object.keys(pkgJson.peerDependencies ?? {}).length > 0;
 ---
 
@@ -14,10 +15,10 @@ const hasPeerDeps = Object.keys(pkgJson.peerDependencies ?? {}).length > 0;
 
 	{/* Declarations. */}
 	{
-		status === "with-api" && (
+		status === "pkg-has-api" && (
 			<PackagePageIndexDeclarations
 				containerName="package"
-				declarations={Astro.props.pkgApi.declarations}
+				declarations={pkgInfo.pkgApi.declarations}
 			/>
 		)
 	}

src/components/PackagePageSidebar.astro

@@ -1,9 +1,9 @@
 ---
-import type { PackagePageHandlerProps } from "../../lib/package-page-handler";
+import type { HandlePackageData } from "../../lib/handlers/package/handle-package";
 import PackagePageIndex from "./PackagePageIndex.astro";
 import QuickSearchOpener from "./QuickSearchOpener.astro";
 
-type Props = PackagePageHandlerProps;
+type Props = HandlePackageData;
 ---
 
 {/* Make sidebar sticky on scroll and center it with 1.5rem above and below when full height. */}