feat: use collapsable JSON viewer

README.MD

@@ -1,5 +1,7 @@
 # tRPC.panel()
 
+#### This is a fork of [iway1/trpc-panel](https://github.com/iway1/trpc-panel)
+
 Probably the easiest and cheapest way to build a testing UI and documentation for your tRPC endpoints. tRPC panel automatically generates a UI for manually testing your tRPC backend with 0 overhead:
 
 ![Screenshot 2022-12-08 at 7 24 02 PM](https://user-images.githubusercontent.com/12774588/206602120-017a2b3a-66c3-4bf0-bd93-90fb4bddf0cc.png)
@@ -19,6 +21,7 @@ Check out our [test app](https://app.trpcpanel.io)
 - 🐦 Supports nested routers, and nested input objects. The structure of the UI maps one-to-one to your API's routers and procedures.
 - 🧭 SideNav and VSCode-like procedure / router search to quickly find what you're looking for
 - ✨ [Transform](#data-transformers) data with built in `superjson` support.
+- **(fork specific)** Collapsable JSON viewer
 
 ## Quick Start
 

package.json

@@ -3,8 +3,8 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "test:panel": "yarn && npx nx test --project trpc-panel",
-    "build:panel": "yarn && npx nx build --project trpc-panel",
+    "test:panel": "yarn && npx nx test --project @joekarow/trpc-panel",
+    "build:panel": "yarn && npx nx build --project @joekarow/trpc-panel",
     "build:test-app": "yarn && npx nx build --project test-trpc-panel",
     "build:docs": "yarn && npx nx build --project docs",
     "cpy:readme": "cp README.MD packages/trpc-panel/README.md",

packages/trpc-panel/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "trpc-panel",
-  "version": "1.0.2",
+  "name": "@joekarow/trpc-panel",
+  "version": "1.3.4-3",
   "description": "UI for testing tRPC backends",
   "main": "lib/index.js",
   "module": "lib/index.mjs",
@@ -88,8 +88,12 @@
     "zustand": "^4.1.5"
   },
   "dependencies": {
+    "@textea/json-viewer": "^3.0.0",
     "fuzzysort": "^2.0.4",
     "path": "^0.12.7",
+    "pretty-bytes": "^6.1.0",
+    "pretty-ms": "^8.0.0",
+    "string-byte-length": "^1.6.0",
     "url": "^0.11.0",
     "zod-to-json-schema": "^3.20.0"
   }

packages/trpc-panel/src/react-app/components/form/ProcedureForm/RequestResult.tsx

@@ -2,6 +2,18 @@ import React from "react";
 import { Response } from "./Response";
 import json from "json-bigint";
 
-export function RequestResult({ result }: { result: any }) {
-  return <Response>{`${json.stringify(result, null, 2)}`}</Response>;
+export function RequestResult({
+  result,
+  size,
+  time,
+}: {
+  result: any;
+  size?: number;
+  time?: number;
+}) {
+  return (
+    <Response size={size} time={time}>
+      {result}
+    </Response>
+  );
 }

packages/trpc-panel/src/react-app/components/form/ProcedureForm/Response.tsx

@@ -1,9 +1,36 @@
 import React from "react";
 import { FormSection } from "./FormSection";
+import { JsonViewer } from "@textea/json-viewer";
+import prettyBytes from "pretty-bytes";
+import prettyMs from "pretty-ms";
+
+export function Response({
+  children,
+  size,
+  time,
+}: {
+  children: string | object;
+  size?: number;
+  time?: number;
+}) {
+  const title = size
+    ? time
+      ? `Response (${prettyBytes(size)}, ${prettyMs(time)})`
+      : `Response (${prettyBytes(size)})`
+    : time
+    ? `Response (${prettyMs(time)})`
+    : `Response`;
+
+  if (typeof children === "object") {
+    return (
+      <FormSection title={title}>
+        <JsonViewer rootName={false} value={children} quotesOnKeys={false} />
+      </FormSection>
+    );
+  }
 
-export function Response({ children }: { children: string }) {
   return (
-    <FormSection title="Response">
+    <FormSection title={title}>
       <p className="font-mono whitespace-pre-wrap break-words">{children}</p>
     </FormSection>
   );

packages/trpc-panel/src/react-app/components/form/ProcedureForm/index.tsx

@@ -19,6 +19,7 @@ import type { ParsedInputNode } from "@src/parse/parseNodeTypes";
 import { DocumentationSection } from "@src/react-app/components/form/ProcedureForm/DescriptionSection";
 import { Field } from "@src/react-app/components/form/Field";
 import { ProcedureFormContextProvider } from "@src/react-app/components/form/ProcedureForm/ProcedureFormContext";
+import getSize from "string-byte-length";
 
 const TRPCErrorSchema = z.object({
   shape: z.object({
@@ -54,9 +55,12 @@ export function ProcedureForm({
   const [queryInput, setQueryInput] = useState<any>(null);
   const formRef = useRef<HTMLFormElement | null>(null);
   const context = trpc.useContext();
+  const [dataSize, setDataSize] = useState<number | undefined>();
+  const [startTime, setStartTime] = useState<number | undefined>();
+  const [opDuration, setOpDuration] = useState<number | undefined>();
 
   function getProcedure() {
-    var cur: typeof trpc | typeof trpc[string] = trpc;
+    var cur: typeof trpc | (typeof trpc)[string] = trpc;
     for (var p of procedure.pathFromRootRouter) {
       // TODO - Maybe figure out these typings?
       //@ts-ignore
@@ -73,6 +77,11 @@ export function ProcedureForm({
       initialData: null,
       retry: false,
       refetchOnWindowFocus: false,
+      onSuccess: (data: unknown) => {
+        if (startTime) setOpDuration(Date.now() - startTime);
+        setDataSize(getSize(JSON.stringify(data)));
+        setStartTime(undefined);
+      },
     });
   })() as UseQueryResult<any>;
 
@@ -89,6 +98,11 @@ export function ProcedureForm({
     //@ts-ignore
     return router.useMutation({
       retry: false,
+      onSuccess: (data: unknown) => {
+        if (startTime) setOpDuration(Date.now() - startTime);
+        setDataSize(getSize(JSON.stringify(data)));
+        setStartTime(undefined);
+      },
     });
   })() as UseMutationResult<any>;
 
@@ -104,8 +118,8 @@ export function ProcedureForm({
       [ROOT_VALS_PROPERTY_NAME]: defaultFormValuesForNode(procedure.node),
     },
   });
-
   function onSubmit(data: { [ROOT_VALS_PROPERTY_NAME]: any }) {
+    setStartTime(Date.now());
     if (procedure.procedureType === "query") {
       const newData = { ...data };
       setQueryInput(newData[ROOT_VALS_PROPERTY_NAME]);
@@ -197,15 +211,17 @@ export function ProcedureForm({
           </div>
         </form>
         <div className="flex flex-col space-y-4">
-          {data && <RequestResult result={data} />}
+          {data && (
+            <RequestResult result={data} size={dataSize} time={opDuration} />
+          )}
           {!data && data !== null && (
             <Response>Successful request but no data was returned</Response>
           )}
           {error &&
             (isTrpcError(error) ? (
               <Error error={error} />
             ) : (
-              <Response>{JSON.stringify(error)}</Response>
+              <Response>{error}</Response>
             ))}
         </div>
       </CollapsableSection>

yarn.lock

@@ -1176,11 +1176,25 @@
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.4.3.tgz#af975e367743fa91989cd666666aec31a8f50591"
   integrity sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==
 
-"@trpc/client@^10.0.0", "@trpc/client@^10.18.0", "@trpc/client@^10.2.0":
+"@textea/json-viewer@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@textea/json-viewer/-/json-viewer-3.0.0.tgz#0ba440c1e396f54f1cc4ded1e662e5d65f5975b5"
+  integrity sha512-rO/JdEcr4dfki0B+nZNAcEMCVCAjLfi0tGgZhm1/33Md5dlVbQAtxaR4rFU5W+tHom9tBBnsTT7d7T1JHkmjAg==
+  dependencies:
+    clsx "^1.2.1"
+    copy-to-clipboard "^3.3.3"
+    zustand "^4.3.7"
+
+"@trpc/client@^10.0.0":
   version "10.21.1"
   resolved "https://registry.yarnpkg.com/@trpc/client/-/client-10.21.1.tgz#1cc86ffddaabd7368b43b50070f2ca98bbfc460d"
   integrity sha512-oZgPbghs9y2frTCA9mZPSAlVknV9stCTKYO5nsvRr0aX+oaA0URoXJTKZTSpLZxLfuwWgxBj4iTiCWWWmaVelw==
 
+"@trpc/client@^10.18.0", "@trpc/client@^10.2.0":
+  version "10.19.1"
+  resolved "https://registry.yarnpkg.com/@trpc/client/-/client-10.19.1.tgz#3e8aff4abaff38c39ca275052768c957ff217ea3"
+  integrity sha512-H61dIgoAjiA7/SfuHlUAsqshhaxOSSRFyEfaoBwYvXzLyno+fvQRUXvxpsC4A8IsDuNX2pxiggAK8AwTNKqIzg==
+
 "@trpc/next@^10.18.0":
   version "10.21.1"
   resolved "https://registry.yarnpkg.com/@trpc/next/-/next-10.21.1.tgz#0abbc12178bb03582e8518492b0050dd58e33528"
@@ -2756,6 +2770,13 @@ copy-props@^2.0.1:
     each-props "^1.3.2"
     is-plain-object "^5.0.0"
 
+copy-to-clipboard@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -6727,6 +6748,11 @@ parse-json@^5.0.0, parse-json@^5.2.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-ms@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/parse-ms/-/parse-ms-3.0.0.tgz#3ea24a934913345fcc3656deda72df921da3a70e"
+  integrity sha512-Tpb8Z7r7XbbtBTrM9UhpkzzaMrqA2VXMT3YChzYltwV3P3pM6t8wl7TvpMnSTosz1aQAdVib7kdoys7vYOPerw==
+
 parse-node-version@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
@@ -7188,6 +7214,11 @@ prettier@^2.6.2:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
+pretty-bytes@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-6.1.0.tgz#1d1cc9aae1939012c74180b679da6684616bf804"
+  integrity sha512-Rk753HI8f4uivXi4ZCIYdhmG1V+WKzvRMg/X+M42a6t7D07RcmopXJMDNk6N++7Bl75URRGsb40ruvg7Hcp2wQ==
+
 pretty-format@^27.0.2:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
@@ -7211,6 +7242,13 @@ pretty-hrtime@^1.0.0:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==
 
+pretty-ms@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-8.0.0.tgz#a35563b2a02df01e595538f86d7de54ca23194a3"
+  integrity sha512-ASJqOugUF1bbzI35STMBUpZqdfYKlJugy6JBziGi2EE+AL5JPJGSzvpeVXojxrr0ViUYoToUjb5kjSEGf7Y83Q==
+  dependencies:
+    parse-ms "^3.0.0"
+
 process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -8121,6 +8159,11 @@ streamsearch@^1.1.0:
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
+string-byte-length@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/string-byte-length/-/string-byte-length-1.6.0.tgz#86cf5d85b7636e6289f119f0c9313895d6c1fd66"
+  integrity sha512-h9KzyolUa+9q6yHPCGzvPOta0VpWqG0/x0o1on22PZL0t+8txWXl0JCkRG/Gvi58HnyDvT1YCzDH2bAOpEc++g==
+
 string-hash@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
@@ -8616,6 +8659,11 @@ to-through@^2.0.0:
   dependencies:
     through2 "^2.0.3"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 [email protected]:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
@@ -8628,6 +8676,16 @@ touch@^3.1.0:
   dependencies:
     nopt "~1.0.10"
 
+trpc-panel@*:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/trpc-panel/-/trpc-panel-1.3.4.tgz#70276d0d24b6561b9e34158e83a5f8e59146bc89"
+  integrity sha512-u5/dCi/AAp2tpJcCL5ZCfrdJtHHu8hrtm2hzSBZCE7z9Tw6MB1rCcliSQvgMPIEXMQrgwXk4t4IedfWkxioKng==
+  dependencies:
+    fuzzysort "^2.0.4"
+    path "^0.12.7"
+    url "^0.11.0"
+    zod-to-json-schema "^3.20.0"
+
 ts-interface-checker@^0.1.9:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
@@ -9224,7 +9282,7 @@ zod@^3.19.1, zod@^3.21.4:
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db"
   integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==
 
-zustand@^4.1.5:
+zustand@^4.1.5, zustand@^4.3.7:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.3.7.tgz#501b1f0393a7f1d103332e45ab574be5747fedce"
   integrity sha512-dY8ERwB9Nd21ellgkBZFhudER8KVlelZm8388B5nDAXhO/+FZDhYMuRnqDgu5SYyRgz/iaf8RKnbUs/cHfOGlQ==