Arktype kinda working

Author: aidansunbury

packages/dev-app/src/pages/index.tsx

@@ -1,5 +1,5 @@
 import dynamic from "next/dynamic";
-import { parseRouterWithOptions } from "trpc-ui/parse/parseRouter";
+// import { parseRouterWithOptions } from "trpc-ui/parse/parseRouter";
 import { parseTRPCRouter } from "trpc-ui/parseV2/parse";
 import { RootComponent } from "trpc-ui/react-app/Root";
 import { trpc } from "trpc-ui/react-app/trpc";
@@ -8,17 +8,17 @@ import { appRouter } from "~/router";
 // https://jsonforms.io/docs/
 
 console.log(`Using superjson: ${env.NEXT_PUBLIC_SUPERJSON}`);
-const parse = parseRouterWithOptions(appRouter, {
-  transformer: env.NEXT_PUBLIC_SUPERJSON === "false" ? undefined : "superjson",
-});
+// const parse = parseRouterWithOptions(appRouter, {
+//   transformer: env.NEXT_PUBLIC_SUPERJSON === "false" ? undefined : "superjson",
+// });
 
 const parseV2 = parseTRPCRouter(appRouter);
 
 const App = dynamic(
   Promise.resolve(() => (
     <RootComponent
       parsedRouter={parseV2}
-      rootRouter={parse}
+      // rootRouter={parse}
       options={{
         url: "http://localhost:3000/api/trpc",
         transformer:
@@ -28,7 +28,7 @@ const App = dynamic(
           description: "Hi there cool boi",
         },
       }}
-      trpc={trpc}
+      // trpc={trpc}
     />
   )),
   { ssr: false },

packages/dev-app/src/router.ts

@@ -115,11 +115,11 @@ const postsRouter = createTRPCRouter({
         ...input,
       };
     }),
-  // createPostArkType: procedure
-  //   .input(type({ age: "string" }))
-  //   .query(({ input }) => {
-  //     return input;
-  //   }),
+  createPostArkType: arktypeVal
+    .input(type({ age: "string" }))
+    .query(({ input }) => {
+      return input;
+    }),
   // createPost2: secondValidator
   //   .meta({
   //     schema:

packages/trpc-ui/src/parse/parseProcedure.ts

@@ -115,7 +115,7 @@ function nodeAndInputSchemaFromInputs(
   };
 }
 
-export function parseProcedure(
+function parseProcedure(
   procedure: Procedure,
   path: string[],
   options: TrpcPanelExtraOptions,

packages/trpc-ui/src/parse/parseRouter.ts

@@ -3,7 +3,7 @@ import { type Router, isProcedure, isRouter } from "./routerType";
 import type { AnyTRPCRouter } from "@trpc/server";
 import type { zodToJsonSchema } from "zod-to-json-schema";
 import { logParseError } from "./parseErrorLogs";
-import { type ParsedProcedure, parseProcedure } from "./parseProcedure";
+import { type ParsedProcedure } from "./parseProcedure";
 
 // TODO this should be more specific, as it hurts the type safety lower down
 export type JSON7SchemaType = ReturnType<typeof zodToJsonSchema>;
@@ -42,9 +42,9 @@ function parseRouter(
       if (isRouter(child)) {
         return parseRouter(child, newPath, options);
       }
-      if (isProcedure(child)) {
-        return parseProcedure(child, newPath, options);
-      }
+      // if (isProcedure(child)) {
+      //   return parseProcedure(child, newPath, options);
+      // }
       return null;
     })();
     if (!parsedNode) {
@@ -67,7 +67,7 @@ export type TrpcPanelExtraOptions = {
   transformer?: "superjson";
 };
 
-export function parseRouterWithOptions(
+function parseRouterWithOptions(
   router: AnyTRPCRouter,
   parseRouterOptions: TrpcPanelExtraOptions,
 ) {

packages/trpc-ui/src/parseV2/parse.ts

@@ -1,12 +1,12 @@
 import { toJsonSchema } from "@valibot/to-json-schema";
 import type { Type as ArkTypeValidator } from "arktype";
-import { mergeConfigs } from "tailwind-merge";
 import * as v from "valibot";
 import { zodToJsonSchema } from "zod-to-json-schema";
 import * as z3 from "zod/v3";
 import * as z4 from "zod/v4";
 import { detectValidatorType } from "./detectValidator";
 import type { ParsedTRPCRouter, Router } from "./types";
+import type { JSONSchema7Object } from "json-schema";
 
 export function parseRootRouter(router: any): Router {
   return parseTRPCRouter(router, []) as unknown as Router;
@@ -101,13 +101,15 @@ export function parseTRPCRouter(
           }
         } else if (validatorType === "arktype") {
           console.log("arktype");
+          console.log(item._def.inputs);
+          jsonSchema = arkToJson(item._def.inputs);
           // const merged = item._def.inputs.reduce(
           //   (merge: ArkTypeValidator, curr: ArkTypeValidator) => {
           //     merge.and(curr);
           //   },
           // );
           // jsonSchema = merged.toJsonSchema();
-          jsonSchema = item._def.inputs.toJSONSchema();
+          // jsonSchema = item._def.inputs.toJSONSchema();
         }
       }
 
@@ -147,3 +149,24 @@ export function parseTRPCRouter(
 
   return result;
 }
+
+function arkToJson(inputs: ArkTypeValidator[]): JSONSchema7Object {
+  if (inputs.length === 1) {
+    return inputs[0]?.toJsonSchema();
+  }
+  if (inputs.length > 1) {
+    const [first, ...rest] = inputs;
+    return arkRecursive(first, rest);
+  }
+  return {};
+}
+function arkRecursive(
+  base: ArkTypeValidator,
+  rest: ArkTypeValidator[],
+): JSONSchema7Object {
+  if (rest.length === 0) {
+    return base.toJsonSchema();
+  }
+  const [first, ...left] = rest;
+  return arkRecursive(base.and(first), left);
+}

packages/trpc-ui/src/react-app/Root.tsx

@@ -38,15 +38,11 @@ import {
 import { Container } from "./v2/Container";
 
 export function RootComponent({
-  rootRouter,
   parsedRouter,
   options,
-  trpc,
 }: {
-  rootRouter: ParsedRouter; // The old one
   parsedRouter: ParsedTRPCRouter; //* The new one
   options: RenderOptions;
-  trpc: ReturnType<typeof createTRPCReact>;
 }) {
   return (
     <NuqsAdapter>
@@ -57,11 +53,7 @@ export function RootComponent({
               <RenderOptionsProvider options={options} router={parsedRouter}>
                 <SearchOverlay>
                   <div className="relative flex h-full w-full flex-1 flex-col">
-                    <AppInnards
-                      rootRouter={rootRouter}
-                      options={options}
-                      parsedRouter={parsedRouter}
-                    />
+                    <AppInnards options={options} parsedRouter={parsedRouter} />
                   </div>
                 </SearchOverlay>
               </RenderOptionsProvider>
@@ -74,11 +66,9 @@ export function RootComponent({
 }
 
 function AppInnards({
-  rootRouter,
   options,
   parsedRouter,
 }: {
-  rootRouter: ParsedRouter;
   parsedRouter: ParsedTRPCRouter;
   options: RenderOptions;
 }) {