From 942fcba04ca3a5fde979ef59857d6404d044bb8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Donny/=EA=B0=95=EB=8F=99=EC=9C=A4?= <kdy1997.dev@gmail.com>
Date: Wed, 28 Aug 2024 08:23:17 +0900
Subject: [PATCH] feat(swc-plugins): Improve UI (#58)

Closes #49
Closes #48
---
 .../versions/range/[compatRangeId]/page.tsx   |  53 +++++--
 .../swc-plugins/lib/api/compatRange/router.ts |  25 ++-
 apps/swc-plugins/lib/api/updater/router.ts    | 144 +++++++++---------
 3 files changed, 142 insertions(+), 80 deletions(-)

diff --git a/apps/swc-plugins/app/versions/range/[compatRangeId]/page.tsx b/apps/swc-plugins/app/versions/range/[compatRangeId]/page.tsx
index 489654f..60fab93 100644
--- a/apps/swc-plugins/app/versions/range/[compatRangeId]/page.tsx
+++ b/apps/swc-plugins/app/versions/range/[compatRangeId]/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Table,
   TableBody,
@@ -10,22 +11,39 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { apiClient } from "@/lib/trpc/web-client";
+import { useState } from "react";
 
 export default function Page({
   params: { compatRangeId },
 }: {
   params: { compatRangeId: string };
 }) {
+  const [includePrerelease, setIncludePrerelease] = useState(false);
   const [compatRange] = apiClient.compatRange.get.useSuspenseQuery({
     id: BigInt(compatRangeId),
+    includePrerelease,
   });
 
   return (
     <div>
-      <h1 className="text-2xl font-bold">
-        <kbd>swc_core</kbd>@<kbd>{compatRange.from}</kbd> -{" "}
-        <kbd>{compatRange.to}</kbd>
-      </h1>
+      <div className="flex flex-row justify-between">
+        <h1 className="mr-10 flex flex-col text-2xl font-bold">
+          <kbd>swc_core</kbd>
+          <span className="text-sm">
+            @<kbd>{compatRange.from}</kbd> - <kbd>{compatRange.to}</kbd>
+          </span>
+        </h1>
+
+        <div>
+          <Checkbox
+            checked={includePrerelease}
+            onCheckedChange={(v) => {
+              setIncludePrerelease(!!v);
+            }}
+          />
+          <label>Include Prerelease</label>
+        </div>
+      </div>
 
       <Table>
         <TableCaption>Runtime Version Ranges</TableCaption>
@@ -48,13 +66,26 @@ export default function Page({
       </Table>
 
       <h2 className="text-xl font-bold">Plugins</h2>
-      <ul>
-        {compatRange.plugins.map((plugin) => (
-          <li key={plugin.name}>
-            <kbd>{plugin.name}</kbd>
-          </li>
-        ))}
-      </ul>
+
+      <Table>
+        <TableCaption>Compatible Plugins</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[200px]">Plugin</TableHead>
+            <TableHead>Minimum Version</TableHead>
+            <TableHead>Maximum Version</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {compatRange.plugins.map((plugin) => (
+            <TableRow key={plugin.name}>
+              <TableCell className="font-medium">{plugin.name}</TableCell>
+              <TableCell>{plugin.minVersion}</TableCell>
+              <TableCell>{plugin.maxVersion}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
     </div>
   );
 }
diff --git a/apps/swc-plugins/lib/api/compatRange/router.ts b/apps/swc-plugins/lib/api/compatRange/router.ts
index f22d936..4cfd6d6 100644
--- a/apps/swc-plugins/lib/api/compatRange/router.ts
+++ b/apps/swc-plugins/lib/api/compatRange/router.ts
@@ -29,6 +29,7 @@ export const compatRangeRouter = router({
     .input(
       z.object({
         id: z.bigint(),
+        includePrerelease: z.boolean().default(false),
       })
     )
     .output(
@@ -40,7 +41,7 @@ export const compatRangeRouter = router({
         runtimes: z.array(VersionRangeSchema),
       })
     )
-    .query(async ({ ctx, input: { id } }) => {
+    .query(async ({ ctx, input: { id, includePrerelease } }) => {
       const range = await db.compatRange.findUnique({
         where: {
           id: id,
@@ -50,6 +51,17 @@ export const compatRangeRouter = router({
           from: true,
           to: true,
           plugins: {
+            where: {
+              ...(includePrerelease
+                ? {}
+                : {
+                    version: {
+                      not: {
+                        contains: "-",
+                      },
+                    },
+                  }),
+            },
             select: {
               id: true,
               version: true,
@@ -61,6 +73,17 @@ export const compatRangeRouter = router({
             },
           },
           runtimes: {
+            where: {
+              ...(includePrerelease
+                ? {}
+                : {
+                    version: {
+                      not: {
+                        contains: "-",
+                      },
+                    },
+                  }),
+            },
             select: {
               id: true,
               version: true,
diff --git a/apps/swc-plugins/lib/api/updater/router.ts b/apps/swc-plugins/lib/api/updater/router.ts
index ca29946..65dbb95 100644
--- a/apps/swc-plugins/lib/api/updater/router.ts
+++ b/apps/swc-plugins/lib/api/updater/router.ts
@@ -45,47 +45,51 @@ export const updaterRouter = router({
       const api = await (await import("@/lib/api/server")).createCaller(ctx);
 
       for (const pkg of input.pkgs) {
-        const plugin = await db.swcPlugin.upsert({
-          where: {
-            name: pkg.name,
-          },
-          create: {
-            name: pkg.name,
-          },
-          update: {},
-        });
-
-        for (const version of pkg.versions) {
-          const swcCoreVersion = version.swcCoreVersion;
-          const compatRange = await api.compatRange.byCoreVersion({
-            version: swcCoreVersion,
+        try {
+          const plugin = await db.swcPlugin.upsert({
+            where: {
+              name: pkg.name,
+            },
+            create: {
+              name: pkg.name,
+            },
+            update: {},
           });
 
-          if (!compatRange) {
-            throw new TRPCError({
-              code: "NOT_FOUND",
-              message: `Compat range not found for SWC core version ${swcCoreVersion}`,
+          for (const version of pkg.versions) {
+            const swcCoreVersion = version.swcCoreVersion;
+            const compatRange = await api.compatRange.byCoreVersion({
+              version: swcCoreVersion,
             });
-          }
 
-          await db.swcPluginVersion.upsert({
-            where: {
-              pluginId_version: {
+            if (!compatRange) {
+              throw new TRPCError({
+                code: "NOT_FOUND",
+                message: `Compat range not found for SWC core version ${swcCoreVersion}`,
+              });
+            }
+
+            await db.swcPluginVersion.upsert({
+              where: {
+                pluginId_version: {
+                  pluginId: plugin.id,
+                  version: version.version,
+                },
+              },
+              create: {
                 pluginId: plugin.id,
                 version: version.version,
+                compatRangeId: compatRange.id,
+                swcCoreVersion,
               },
-            },
-            create: {
-              pluginId: plugin.id,
-              version: version.version,
-              compatRangeId: compatRange.id,
-              swcCoreVersion,
-            },
-            update: {
-              compatRangeId: compatRange.id,
-              swcCoreVersion,
-            },
-          });
+              update: {
+                compatRangeId: compatRange.id,
+                swcCoreVersion,
+              },
+            });
+          }
+        } catch (e) {
+          console.error(`Error updating wasm plugins for ${pkg.name}`, e);
         }
       }
     }),
@@ -117,45 +121,49 @@ export const updaterRouter = router({
       }
 
       for (const pkg of input.pkgs) {
-        const runtime = await db.swcRuntime.upsert({
-          where: {
-            name: pkg.name,
-          },
-          create: {
-            name: pkg.name,
-          },
-          update: {},
-        });
-
-        for (const version of pkg.versions) {
-          const swcCoreVersion = version.swcCoreVersion;
-          const compatRange = byVersion(swcCoreVersion);
-
-          if (!compatRange) {
-            throw new TRPCError({
-              code: "NOT_FOUND",
-              message: `Compat range not found for SWC core version ${swcCoreVersion}`,
-            });
-          }
-
-          await db.swcRuntimeVersion.upsert({
+        try {
+          const runtime = await db.swcRuntime.upsert({
             where: {
-              runtimeId_version: {
-                runtimeId: runtime.id,
-                version: version.version,
-              },
+              name: pkg.name,
             },
             create: {
-              runtimeId: runtime.id,
-              version: version.version,
-              compatRangeId: compatRange.id,
-              swcCoreVersion,
-            },
-            update: {
-              compatRangeId: compatRange.id,
-              swcCoreVersion,
+              name: pkg.name,
             },
+            update: {},
           });
+
+          for (const version of pkg.versions) {
+            const swcCoreVersion = version.swcCoreVersion;
+            const compatRange = byVersion(swcCoreVersion);
+
+            if (!compatRange) {
+              throw new TRPCError({
+                code: "NOT_FOUND",
+                message: `Compat range not found for SWC core version ${swcCoreVersion}`,
+              });
+            }
+
+            await db.swcRuntimeVersion.upsert({
+              where: {
+                runtimeId_version: {
+                  runtimeId: runtime.id,
+                  version: version.version,
+                },
+              },
+              create: {
+                runtimeId: runtime.id,
+                version: version.version,
+                compatRangeId: compatRange.id,
+                swcCoreVersion,
+              },
+              update: {
+                compatRangeId: compatRange.id,
+                swcCoreVersion,
+              },
+            });
+          }
+        } catch (e) {
+          console.error(`Error updating runtimes for ${pkg.name}`, e);
         }
       }
     }),