Total refactor

.github/workflows/build-test.yml

@@ -25,5 +25,4 @@ jobs:
 
       - name: Install deps
         run: pnpm install
-
-      - run: pnpm test:panel
+

.github/workflows/npm.yml

@@ -5,30 +5,8 @@ on:
     types: [published]
 
 jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4  
-
-      - name: Install node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.node-version'
-          registry-url: https://registry.npmjs.org/
-          cache: 'pnpm'
-
-      - name: Install deps
-        run: pnpm install
-
-      - run: pnpm test:panel
-
 
   publish-npm:
-    needs: test
     runs-on: ubuntu-latest
     concurrency: "run"
     steps:

.gitignore

@@ -51,4 +51,5 @@ Thumbs.db
 stats.html
 
 # yarn
-.yarn
+.yarn
+.claude

package.json

@@ -4,7 +4,6 @@
   "license": "MIT",
   "packageManager": "[email protected]",
   "scripts": {
-    "test:panel": "pnpm -F trpc-ui test",
     "build:panel": "pnpm -F trpc-ui build",
     "build:test-app": "pnpm -F test-app build",
     "dev:dev-app": "pnpm -F dev-app dev",

packages/dev-app/package.json

@@ -4,26 +4,40 @@
   "private": true,
   "scripts": {
     "build": "next build",
-    "dev": "next dev",
+    "dev": "if [ -f .env ]; then export $(grep -v '^#' .env | xargs); fi && NEXT_PUBLIC_PORT=${NEXT_PUBLIC_PORT:-3000} && echo \"Starting dev server on port $NEXT_PUBLIC_PORT\" && next dev --port=$NEXT_PUBLIC_PORT",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
+    "@chakra-ui/core": "1.0.0-rc.8",
+    "@jsonforms/material-renderers": "^3.5.1",
+    "@jsonforms/react": "^3.5.1",
+    "@rjsf/chakra-ui": "^5.24.8",
+    "@rjsf/core": "^5.24.8",
+    "@rjsf/material-ui": "^5.24.8",
+    "@rjsf/mui": "^5.24.8",
+    "@rjsf/utils": "^5.24.8",
+    "@rjsf/validator-ajv8": "^5.24.8",
     "@tanstack/react-query": "^5.12.2",
-    "@trpc/client": "^11.0.0-next-beta.264",
-    "@trpc/next": "^11.0.0-next-beta.264",
-    "@trpc/react-query": "^11.0.0-next-beta.264",
-    "@trpc/server": "^11.0.0-next-beta.264",
+    "@trpc/client": "^11.4.3",
+    "@trpc/next": "^11.4.3",
+    "@trpc/react-query": "^11.4.3",
+    "@trpc/server": "^11.4.3",
+    "@types/json-schema": "^7.0.15",
+    "@valibot/to-json-schema": "1.0.0-rc.0",
+    "arktype": "^2.1.9",
     "autoprefixer": "^10.4.14",
-    "next": "^13.2.4",
+    "next": "^15.4.4",
     "next-transpile-modules": "^10.0.0",
     "postcss": "^8.4.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "superjson": "1.12.2",
     "tailwindcss": "^3.3.1",
     "ts-loader": "^9.4.2",
-    "zod": "^3.24.2"
+    "valibot": "1.1.0",
+    "zod": "^3.25.0",
+    "zod-to-json-schema": "^3.24.4"
   },
   "devDependencies": {
     "@types/node": "^18.15.5",

packages/dev-app/src/env.mjs

@@ -5,16 +5,18 @@ import { z } from "zod";
  * built with invalid env vars.
  */
 const server = z.object({
-  NODE_ENV: z.enum(["development", "test", "production"]),
-  NEXT_PUBLIC_SUPERJSON: z.enum(["true", "false"]),
+  NODE_ENV: z.enum(["development", "test", "production"]).optional(),
+  NEXT_PUBLIC_SUPERJSON: z.enum(["true", "false"]).optional(),
+  NEXT_PUBLIC_PORT: z.coerce.number().default(3000),
 });
 
 /**
  * Specify your client-side environment variables schema here. This way you can ensure the app isn't
  * built with invalid env vars. To expose them to the client, prefix them with `NEXT_PUBLIC_`.
  */
 const client = z.object({
-  NEXT_PUBLIC_SUPERJSON: z.enum(["true", "false"]),
+  NEXT_PUBLIC_SUPERJSON: z.enum(["true", "false"]).optional(),
+  NEXT_PUBLIC_PORT: z.coerce.number().default(3000),
 });
 
 /**
@@ -26,6 +28,7 @@ const client = z.object({
 const processEnv = {
   NODE_ENV: process.env.NODE_ENV,
   NEXT_PUBLIC_SUPERJSON: process.env.NEXT_PUBLIC_SUPERJSON,
+  NEXT_PUBLIC_PORT: process.env.NEXT_PUBLIC_PORT,
 };
 
 // Don't touch the part below

packages/dev-app/src/pages/api/trpc-superjson/[trpc].ts

@@ -0,0 +1,58 @@
+import { initTRPC } from "@trpc/server";
+import { createNextApiHandler } from "@trpc/server/adapters/next";
+import superjson from "superjson";
+import type { TRPCPanelMeta } from "trpc-ui";
+import { ZodError } from "zod";
+
+import { env } from "~/env.mjs";
+import { appRouterSuperjson } from "~/router-superjson";
+import { createTRPCContext } from "~/server/api/trpc";
+
+// Create a separate tRPC instance with superjson transformer
+const tSuperjson = initTRPC
+  .context<typeof createTRPCContext>()
+  .meta<TRPCPanelMeta>()
+  .create({
+    transformer: superjson,
+    errorFormatter({ shape, error }) {
+      return {
+        ...shape,
+        data: {
+          ...shape.data,
+          zodError:
+            error.cause instanceof ZodError ? error.cause.flatten() : null,
+        },
+      };
+    },
+    allowOutsideOfServer: true,
+  });
+
+// Create middleware with logging
+const loggingMiddleware = tSuperjson.middleware(
+  async ({ next, path, type, getRawInput }) => {
+    const rawInput = await getRawInput();
+    console.log(`=
+ [SUPERJSON ${type.toUpperCase()}] ${path}`);
+    console.log("Raw Input:", rawInput);
+    console.log("Input type:", typeof rawInput);
+    console.log("Input JSON:", JSON.stringify(rawInput, null, 2));
+    return next();
+  },
+);
+
+// Create procedure with superjson-enabled tRPC instance
+const procedureSuperjson = tSuperjson.procedure.use(loggingMiddleware);
+
+// Export API handler
+export default createNextApiHandler({
+  router: appRouterSuperjson,
+  createContext: createTRPCContext,
+  onError:
+    env.NODE_ENV === "development"
+      ? ({ path, error }) => {
+          console.error(
+            `L tRPC (superjson) failed on ${path ?? "<no-path>"}: ${error.message}`,
+          );
+        }
+      : undefined,
+});

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

@@ -1,30 +1,31 @@
 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";
 import { env } from "~/env.mjs";
 import { appRouter } from "~/router";
 
 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
-      rootRouter={parse}
+      parsedRouter={parseV2}
+      // rootRouter={parse}
       options={{
-        url: "http://localhost:3000/api/trpc",
-        transformer:
-          env.NEXT_PUBLIC_SUPERJSON === "false" ? undefined : "superjson",
+        url: `http://localhost:${String(env.NEXT_PUBLIC_PORT)}/api/trpc`,
+        transformer: undefined,
         meta: {
           title: "Dev App Title",
-          description:
-            "Dev App Description is longer and should support [markdown](https://github.com/aidansunbury/trpc-ui) The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. \n## Heading 2\n### Heading 3 \n - list item 1\n - list item 2\n",
+          description: `http://localhost:${String(env.NEXT_PUBLIC_PORT)}/api/trpc`,
         },
       }}
-      trpc={trpc}
     />
   )),
   { ssr: false },

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

@@ -0,0 +1,32 @@
+import dynamic from "next/dynamic";
+import { parseTRPCRouter } from "trpc-ui/parseV2/parse";
+import { RootComponent } from "trpc-ui/react-app/Root";
+import { env } from "~/env.mjs";
+import { appRouterSuperjson } from "~/router-superjson";
+
+console.log("Using superjson: true");
+
+const parseV2 = parseTRPCRouter(appRouterSuperjson);
+
+const App = dynamic(
+  Promise.resolve(() => (
+    <RootComponent
+      parsedRouter={parseV2}
+      options={{
+        url: `http://localhost:${env.NEXT_PUBLIC_PORT}/api/trpc-superjson`,
+        transformer: "superjson",
+        meta: {
+          title: "Dev App Title (Superjson)",
+          description: "Testing trpc-ui with superjson support",
+        },
+      }}
+    />
+  )),
+  { ssr: false },
+);
+
+const Component = () => {
+  return <App />;
+};
+
+export default Component;