feat(swc-plugins): Provide some UI (#55)

apps/swc-plugins/app/(home)/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { apiClient } from "@/lib/trpc/web-client";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+export default function Home() {
+  const [runtimes] = apiClient.runtime.list.useSuspenseQuery();
+
+  const [selectedRuntime, setSelectedRuntime] = useState<bigint>();
+
+  return (
+    <div className="flex w-full max-w-md flex-col space-y-4">
+      <div className="flex space-x-4">
+        <Select onValueChange={(e) => setSelectedRuntime(BigInt(e))}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Select runtime" />
+          </SelectTrigger>
+          <SelectContent>
+            {runtimes.map((runtime) => (
+              <SelectItem
+                key={runtime.id.toString()}
+                value={runtime.id.toString()}
+              >
+                {runtime.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {selectedRuntime && <VersionSelector runtimeId={selectedRuntime} />}
+      </div>
+      <div className="flex justify-center">
+        <Link href={`/versions/range`} passHref>
+          <Button
+            variant="secondary"
+            size="default"
+            className="whitespace-nowrap"
+          >
+            See all versions
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+function VersionSelector({ runtimeId }: { runtimeId: bigint }) {
+  const router = useRouter();
+  const versions = apiClient.runtime.listVersions.useQuery({
+    runtimeId,
+  });
+
+  return (
+    <Select
+      onValueChange={(e) => {
+        const selected = versions.data?.find((v) => v.version === e);
+        router.push(`/versions/range/${selected?.compatRangeId}`);
+      }}
+    >
+      <SelectTrigger className="w-[120px]">
+        <SelectValue placeholder="Version" />
+      </SelectTrigger>
+      <SelectContent>
+        {versions.data?.map((version) => (
+          <SelectItem key={version.version} value={version.version}>
+            {version.version}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

apps/swc-plugins/app/layout.tsx

@@ -1,3 +1,4 @@
+import { Dynamic } from "@/components/dynamic";
 import { Toaster } from "@/components/ui/toaster";
 import { cn } from "@/lib/utils";
 import { SessionProvider } from "next-auth/react";
@@ -28,7 +29,11 @@ export default function RootLayout({ children }: PropsWithChildren) {
         <NextTopLoader color={"var(--colors-primary)"} />
 
         <SessionProvider>
-          <ClientProviders>{children}</ClientProviders>
+          <ClientProviders>
+            <main className="flex h-screen w-full flex-col items-center justify-center align-middle">
+              <Dynamic>{children}</Dynamic>
+            </main>
+          </ClientProviders>
         </SessionProvider>
         <Toaster />
       </body>

apps/swc-plugins/app/loading.tsx

@@ -1,6 +1,6 @@
 export default function Loading() {
   return (
-    <div className="bg-muted flex min-h-screen w-full items-center justify-center">
+    <div className="flex min-h-screen w-full items-center justify-center">
       <div className="animate-pulse">Loading...</div>
     </div>
   );

apps/swc-plugins/app/versions/from-core/[version]/page.tsx

@@ -0,0 +1,19 @@
+import { createCaller } from "@/lib/server";
+import { redirect } from "next/navigation";
+
+export default async function Page({
+  params: { version },
+}: {
+  params: { version: string };
+}) {
+  const api = await createCaller();
+  const compatRange = await api.compatRange.byCoreVersion({
+    version,
+  });
+
+  if (compatRange) {
+    return redirect(`/compat/range/${compatRange.id}`);
+  }
+
+  return <div>No compat range found for swc_core@{version}</div>;
+}

apps/swc-plugins/app/compat/range/page.tsx → apps/swc-plugins/app/versions/range/page.tsx

@@ -11,7 +11,7 @@ export default async function Page() {
       <ul>
         {ranges.map((range) => (
           <li key={range.id}>
-            <Link href={`/compat/range/${range.id}`}>
+            <Link href={`/versions/range/${range.id}`}>
               <kbd>swc_core</kbd>@<kbd>{range.from}</kbd> -{" "}
               <kbd>{range.to}</kbd>
             </Link>

apps/swc-plugins/components/dynamic.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { ReactNode, useEffect, useState } from "react";
+
+export const Dynamic = ({ children }: { children: ReactNode }) => {
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  if (!hasMounted) {
+    return null;
+  }
+
+  return <>{children} </>;
+};

apps/swc-plugins/lib/api/router.ts

@@ -2,11 +2,13 @@ import { router } from "@/lib/base";
 
 import { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
 import { compatRangeRouter } from "./compatRange/router";
+import { runtimeRouter } from "./runtimes/router";
 import { userRouter } from "./users/router";
 
 export const apiRouter = router({
   users: userRouter,
 
+  runtime: runtimeRouter,
   compatRange: compatRangeRouter,
 });
 

apps/swc-plugins/lib/api/runtimes/router.ts

@@ -0,0 +1,54 @@
+import { publicProcedure, router } from "@/lib/base";
+import { db } from "@/lib/prisma";
+import { z } from "zod";
+
+export const runtimeRouter = router({
+  list: publicProcedure
+    .input(z.void())
+    .output(
+      z.array(
+        z.object({
+          id: z.bigint(),
+          name: z.string(),
+        })
+      )
+    )
+    .query(async () => {
+      const runtimes = await db.swcRuntime.findMany({
+        select: {
+          id: true,
+          name: true,
+        },
+      });
+
+      return runtimes;
+    }),
+
+  listVersions: publicProcedure
+    .input(
+      z.object({
+        runtimeId: z.bigint(),
+      })
+    )
+    .output(
+      z.array(
+        z.object({
+          version: z.string(),
+          compatRangeId: z.bigint(),
+        })
+      )
+    )
+    .query(async ({ input: { runtimeId } }) => {
+      const versions = await db.swcRuntimeVersion.findMany({
+        where: {
+          runtimeId,
+        },
+        select: {
+          version: true,
+          compatRangeId: true,
+        },
+      });
+
+      return versions;
+    }),
+});