From 4f667b2d04ddeadb324ba798e364de38c06b73ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Donny/=EA=B0=95=EB=8F=99=EC=9C=A4?= Date: Tue, 27 Aug 2024 15:15:33 +0900 Subject: [PATCH] feat(swc-plugins): Provide some UI (#55) --- apps/swc-plugins/app/(home)/page.tsx | 83 +++++++++++++ .../app/compat/core/[version]/page.tsx | 32 ----- apps/swc-plugins/app/layout.tsx | 7 +- apps/swc-plugins/app/loading.tsx | 2 +- apps/swc-plugins/app/page.tsx | 113 ------------------ .../app/versions/from-core/[version]/page.tsx | 19 +++ .../range/[compatRangeId]/page.tsx | 0 .../app/{compat => versions}/range/page.tsx | 2 +- apps/swc-plugins/components/dynamic.tsx | 17 +++ apps/swc-plugins/lib/api/router.ts | 2 + apps/swc-plugins/lib/api/runtimes/router.ts | 54 +++++++++ 11 files changed, 183 insertions(+), 148 deletions(-) create mode 100644 apps/swc-plugins/app/(home)/page.tsx delete mode 100644 apps/swc-plugins/app/compat/core/[version]/page.tsx delete mode 100644 apps/swc-plugins/app/page.tsx create mode 100644 apps/swc-plugins/app/versions/from-core/[version]/page.tsx rename apps/swc-plugins/app/{compat => versions}/range/[compatRangeId]/page.tsx (100%) rename apps/swc-plugins/app/{compat => versions}/range/page.tsx (91%) create mode 100644 apps/swc-plugins/components/dynamic.tsx create mode 100644 apps/swc-plugins/lib/api/runtimes/router.ts diff --git a/apps/swc-plugins/app/(home)/page.tsx b/apps/swc-plugins/app/(home)/page.tsx new file mode 100644 index 0000000..c8c992d --- /dev/null +++ b/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(); + + return ( +
+
+ + + {selectedRuntime && } +
+
+ + + +
+
+ ); +} + +function VersionSelector({ runtimeId }: { runtimeId: bigint }) { + const router = useRouter(); + const versions = apiClient.runtime.listVersions.useQuery({ + runtimeId, + }); + + return ( + + ); +} diff --git a/apps/swc-plugins/app/compat/core/[version]/page.tsx b/apps/swc-plugins/app/compat/core/[version]/page.tsx deleted file mode 100644 index 1c52b62..0000000 --- a/apps/swc-plugins/app/compat/core/[version]/page.tsx +++ /dev/null @@ -1,32 +0,0 @@ -"use client"; - -import { apiClient } from "@/lib/trpc/web-client"; -import Link from "next/link"; - -export default function Page({ - params: { version }, -}: { - params: { version: string }; -}) { - const [compatRange] = apiClient.compatRange.byCoreVersion.useSuspenseQuery({ - version, - }); - - return ( -
- {compatRange ? ( - <> - - {compatRange.from} ~ {compatRange.to} - - - ) : ( - <> -

No compat range found

- - )} -
- ); -} - -export const dynamic = "force-dynamic"; diff --git a/apps/swc-plugins/app/layout.tsx b/apps/swc-plugins/app/layout.tsx index 0d850b2..17b0df6 100644 --- a/apps/swc-plugins/app/layout.tsx +++ b/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) { - {children} + +
+ {children} +
+ diff --git a/apps/swc-plugins/app/loading.tsx b/apps/swc-plugins/app/loading.tsx index 1255263..4c9586b 100644 --- a/apps/swc-plugins/app/loading.tsx +++ b/apps/swc-plugins/app/loading.tsx @@ -1,6 +1,6 @@ export default function Loading() { return ( -
+
Loading...
); diff --git a/apps/swc-plugins/app/page.tsx b/apps/swc-plugins/app/page.tsx deleted file mode 100644 index ff6a97a..0000000 --- a/apps/swc-plugins/app/page.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import Image from "next/image"; - -export default function Home() { - return ( -
-
-

- Get started by editing  - app/page.tsx -

- -
- -
- Next.js Logo -
- - -
- ); -} diff --git a/apps/swc-plugins/app/versions/from-core/[version]/page.tsx b/apps/swc-plugins/app/versions/from-core/[version]/page.tsx new file mode 100644 index 0000000..2601354 --- /dev/null +++ b/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
No compat range found for swc_core@{version}
; +} diff --git a/apps/swc-plugins/app/compat/range/[compatRangeId]/page.tsx b/apps/swc-plugins/app/versions/range/[compatRangeId]/page.tsx similarity index 100% rename from apps/swc-plugins/app/compat/range/[compatRangeId]/page.tsx rename to apps/swc-plugins/app/versions/range/[compatRangeId]/page.tsx diff --git a/apps/swc-plugins/app/compat/range/page.tsx b/apps/swc-plugins/app/versions/range/page.tsx similarity index 91% rename from apps/swc-plugins/app/compat/range/page.tsx rename to apps/swc-plugins/app/versions/range/page.tsx index 157ea5d..0b91129 100644 --- a/apps/swc-plugins/app/compat/range/page.tsx +++ b/apps/swc-plugins/app/versions/range/page.tsx @@ -11,7 +11,7 @@ export default async function Page() {
    {ranges.map((range) => (
  • - + swc_core@{range.from} -{" "} {range.to} diff --git a/apps/swc-plugins/components/dynamic.tsx b/apps/swc-plugins/components/dynamic.tsx new file mode 100644 index 0000000..c2a5607 --- /dev/null +++ b/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} ; +}; diff --git a/apps/swc-plugins/lib/api/router.ts b/apps/swc-plugins/lib/api/router.ts index 855a170..b74ab2d 100644 --- a/apps/swc-plugins/lib/api/router.ts +++ b/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, }); diff --git a/apps/swc-plugins/lib/api/runtimes/router.ts b/apps/swc-plugins/lib/api/runtimes/router.ts new file mode 100644 index 0000000..4eeffb2 --- /dev/null +++ b/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; + }), +});