From a467b4e1a95e82b8e53c1554f65218216d9997cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Antti=20M=C3=A4ki?= Date: Wed, 17 Dec 2025 16:28:55 +0200 Subject: [PATCH 1/3] Don't fetch community in packageVersion.tsx The required information is now available in the listing data too. --- .../cyberstorm-remix/app/p/packageVersion.tsx | 65 ++++++++----------- 1 file changed, 26 insertions(+), 39 deletions(-) diff --git a/apps/cyberstorm-remix/app/p/packageVersion.tsx b/apps/cyberstorm-remix/app/p/packageVersion.tsx index 26fdd1bed..dc28776d2 100644 --- a/apps/cyberstorm-remix/app/p/packageVersion.tsx +++ b/apps/cyberstorm-remix/app/p/packageVersion.tsx @@ -79,7 +79,6 @@ export async function loader({ params }: LoaderFunctionArgs) { }); return { - community: await dapper.getCommunity(communityId), listing, packageVersion, team: await dapper.getTeamDetails(namespaceId), @@ -108,7 +107,6 @@ export async function clientLoader({ params }: LoaderFunctionArgs) { }); return { - community: dapper.getCommunity(communityId), listing, packageVersion, team: dapper.getTeamDetails(namespaceId), @@ -133,7 +131,7 @@ export function shouldRevalidate(arg: ShouldRevalidateFunctionArgs) { } export default function PackageVersion() { - const { community, listing, packageVersion, team } = useLoaderData< + const { listing, packageVersion, team } = useLoaderData< typeof loader | typeof clientLoader >(); @@ -175,42 +173,31 @@ export default function PackageVersion() { return ( <> - - - {(resolvedCommunity) => ( - <> - - - - - - - - - - - - )} - - + + + + + + + + + + +
From 34d03dbd14393b2e6420b70606ec6c1a2df45d3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Antti=20M=C3=A4ki?= Date: Wed, 17 Dec 2025 16:42:09 +0200 Subject: [PATCH 2/3] Simplify packageVersion.tsx I must admit I'm meddling with powers I don't comprehend. Why was this implemented this way? Is it still needed? At least for me both SSR and client side loading seem to work without issues. --- .../cyberstorm-remix/app/p/packageVersion.tsx | 54 ++++--------------- 1 file changed, 10 insertions(+), 44 deletions(-) diff --git a/apps/cyberstorm-remix/app/p/packageVersion.tsx b/apps/cyberstorm-remix/app/p/packageVersion.tsx index dc28776d2..43a0e61aa 100644 --- a/apps/cyberstorm-remix/app/p/packageVersion.tsx +++ b/apps/cyberstorm-remix/app/p/packageVersion.tsx @@ -28,15 +28,7 @@ import { faDownload, faCaretRight, } from "@fortawesome/free-solid-svg-icons"; -import { - memo, - type ReactElement, - Suspense, - useEffect, - useRef, - useState, -} from "react"; -import { useHydrated } from "remix-utils/use-hydrated"; +import { memo, Suspense } from "react"; import { PageHeader } from "~/commonComponents/PageHeader/PageHeader"; import { faArrowUpRight } from "@fortawesome/pro-solid-svg-icons"; import { RelativeTime } from "@thunderstore/cyberstorm/src/components/RelativeTime/RelativeTime"; @@ -136,35 +128,7 @@ export default function PackageVersion() { >(); const location = useLocation(); - const outletContext = useOutletContext() as OutletContextShape; - - const isHydrated = useHydrated(); - const startsHydrated = useRef(isHydrated); - - // START: For sidebar meta dates - const [firstUploaded, setFirstUploaded] = useState< - ReactElement | undefined - >(); - - // This will be loaded 2 times in development because of: - // https://react.dev/reference/react/StrictMode - // If strict mode is removed from the entry.client.tsx, this should only run once - useEffect(() => { - if (!startsHydrated.current && isHydrated) { - return; - } - - if (!listing) { - return; - } - - setFirstUploaded( - - ); - }, []); - // END: For sidebar meta dates - const currentTab = location.pathname.split("/")[8] || "details"; if (!listing) { @@ -276,7 +240,7 @@ export default function PackageVersion() { } rootClasses="package-listing__drawer" > - {packageMeta(firstUploaded, listing)} + {packageMeta(listing)} Loading...

}> @@ -366,7 +330,7 @@ export default function PackageVersion() { - {packageMeta(firstUploaded, listing)} + {packageMeta(listing)}
@@ -411,15 +375,17 @@ const Actions = memo(function Actions(props: { ); }); -function packageMeta( - firstUploaded: ReactElement | undefined, - listing: PackageListingDetails -) { +function packageMeta(listing: PackageListingDetails) { return (
Date Uploaded
-
{firstUploaded}
+
+ +
Downloads
From 1b17ae06a43046fbc6902985083394bf75d4fde6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Antti=20M=C3=A4ki?= Date: Thu, 18 Dec 2025 15:20:19 +0200 Subject: [PATCH 3/3] Rename component to make the usage clearer Considered PackageVersionListing too but I think this pairs nicer with PackageListing component. --- .../app/p/{packageVersion.tsx => packageListingVersion.tsx} | 2 +- apps/cyberstorm-remix/app/routes.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename apps/cyberstorm-remix/app/p/{packageVersion.tsx => packageListingVersion.tsx} (99%) diff --git a/apps/cyberstorm-remix/app/p/packageVersion.tsx b/apps/cyberstorm-remix/app/p/packageListingVersion.tsx similarity index 99% rename from apps/cyberstorm-remix/app/p/packageVersion.tsx rename to apps/cyberstorm-remix/app/p/packageListingVersion.tsx index 43a0e61aa..26a070927 100644 --- a/apps/cyberstorm-remix/app/p/packageVersion.tsx +++ b/apps/cyberstorm-remix/app/p/packageListingVersion.tsx @@ -122,7 +122,7 @@ export function shouldRevalidate(arg: ShouldRevalidateFunctionArgs) { return arg.defaultShouldRevalidate; } -export default function PackageVersion() { +export default function PackageListingVersion() { const { listing, packageVersion, team } = useLoaderData< typeof loader | typeof clientLoader >(); diff --git a/apps/cyberstorm-remix/app/routes.ts b/apps/cyberstorm-remix/app/routes.ts index 4723f9599..ca19895c9 100644 --- a/apps/cyberstorm-remix/app/routes.ts +++ b/apps/cyberstorm-remix/app/routes.ts @@ -35,7 +35,7 @@ export default [ ]), route( ":namespaceId/:packageId/v/:packageVersion", - "p/packageVersion.tsx", + "p/packageListingVersion.tsx", [ route( "/c/:communityId/p/:namespaceId/:packageId/v/:packageVersion/",