iway1 · ferm10n · Sep 26, 2023
diff --git a/packages/dev-app/package.json b/packages/dev-app/package.json
@@ -15,6 +15,7 @@
     "@trpc/react-query": "^10.18.0",
     "@trpc/server": "^10.18.0",
     "autoprefixer": "^10.4.14",
+    "jsoneditor": "^9.10.3",
     "next": "^13.2.4",
     "next-transpile-modules": "^10.0.0",
     "postcss": "^8.4.21",

diff --git a/packages/dev-app/src/pages/_app.tsx b/packages/dev-app/src/pages/_app.tsx
@@ -3,6 +3,7 @@ import { type AppType } from "next/app";
 import { api } from "~/utils/api";
 
 import "~/styles/globals.css";
+import 'jsoneditor/dist/jsoneditor.css';
 
 const MyApp: AppType = ({ Component, pageProps }) => {
   return <Component {...pageProps} />;

diff --git a/packages/trpc-panel/package.json b/packages/trpc-panel/package.json
@@ -55,6 +55,7 @@
     "@trpc/server": "10.2.0",
     "@types/jest": "^29.2.4",
     "@types/json-bigint": "^1.0.1",
+    "@types/jsoneditor": "^9.9.1",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "ajv": "^8.11.2",
@@ -66,6 +67,7 @@
     "gulp-replace": "^1.1.3",
     "jest": "^29.3.1",
     "json-bigint": "^1.0.0",
+    "jsoneditor": "^9.10.3",
     "postcss": "^8.4.19",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/packages/trpc-panel/rollup.config.js b/packages/trpc-panel/rollup.config.js
@@ -24,8 +24,8 @@ export default [
       // commonjs(),
     ],
     output: [
-      { file: "lib/index.js", format: "cjs" },
-      { file: "lib/index.mjs", format: "es" },
+      { file: "lib/index.js", format: "cjs", inlineDynamicImports: true },
+      { file: "lib/index.mjs", format: "es", inlineDynamicImports: true },
     ],
   },
   {
@@ -35,6 +35,7 @@ export default [
       format: "umd",
       sourcemap: true,
       name: "trpc-panel",
+      inlineDynamicImports: true,
     },
     plugins: [
       postcss({

diff --git a/packages/trpc-panel/src/react-app/components/form/JSONEditor.tsx b/packages/trpc-panel/src/react-app/components/form/JSONEditor.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from 'react';
+import type JSONEditor from 'jsoneditor';
+
+const jsonEditorImport = import('jsoneditor').then(({ default: JSONEditor }) => JSONEditor);
+
+export default function JSONEditorDemo ({
+  value,
+  onChange,
+}: {
+  value: any;
+  onChange: (value: any) => void;
+}) {
+  const editorRef = useRef(null);
+
+  useEffect(() => {
+    let abort = false;
+    let newEditor: JSONEditor;
+    jsonEditorImport.then(JSONEditor => {
+      if (!abort && editorRef.current) {
+        newEditor = new JSONEditor(editorRef.current, {
+          mode: 'code',
+          history: false,
+          onChange: () => {
+            try {
+              onChange(newEditor.get());
+            } catch (err) {}
+          },
+        });
+        newEditor.set(value);
+      }
+    });
+
+    return () => {
+      abort = true;
+      if (newEditor) {
+        newEditor.destroy();
+      }
+    };
+  }, [ editorRef.current, value ]);
+
+  return (
+    <div className="jsoneditor-react-container" ref={editorRef} />
+  );
+}
diff --git a/packages/trpc-panel/src/react-app/components/form/ProcedureForm/index.tsx b/packages/trpc-panel/src/react-app/components/form/ProcedureForm/index.tsx
@@ -13,12 +13,14 @@ import { Error } from "./Error";
 import { RequestResult } from "./RequestResult";
 import { CollapsableSection } from "@src/react-app/components/CollapsableSection";
 import { CloseIcon } from "@src/react-app/components/icons/CloseIcon";
+import { ToggleJsonIcon } from "@src/react-app/components/icons/ToggleJsonIcon";
 import { ObjectField } from "@src/react-app/components/form/fields/ObjectField";
 import { fullFormats } from "ajv-formats/dist/formats";
 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 JSONEditor from '../JSONEditor';
 
 const TRPCErrorSchema = z.object({
   shape: z.object({
@@ -96,6 +98,8 @@ export function ProcedureForm({
     control,
     reset: resetForm,
     handleSubmit,
+    getValues,
+    setValue,
   } = useForm({
     resolver: ajvResolver(wrapJsonSchema(procedure.inputSchema as any), {
       formats: fullFormats,
@@ -147,6 +151,12 @@ export function ProcedureForm({
 
   const fieldName = procedure.node.path.join(".");
 
+  const [ useRawInput, setUseRawInput ] = useState(false);
+  function toggleRawInput() {
+    console.log(getValues());
+    setUseRawInput(!useRawInput);
+  }
+
   return (
     <ProcedureFormContextProvider path={procedure.pathFromRootRouter.join(".")}>
       <CollapsableSection
@@ -169,9 +179,15 @@ export function ProcedureForm({
 
             <FormSection
               title="Input"
-              topRightElement={<XButton control={control} reset={reset} />}
+              topRightElement={
+                <div className="flex">
+                  <XButton control={control} reset={reset} />
+                  <ToggleRawInput onClick={toggleRawInput} />
+                </div>
+              }
             >
-              {procedure.node.type === "object" ? (
+              {useRawInput && <JSONEditor value={getValues().vals} onChange={(values) => {setValue('vals', values)}} />}
+              {!useRawInput && (procedure.node.type === "object" ? (
                 Object.keys(procedure.node.children).length > 0 && (
                   <ObjectField
                     node={
@@ -186,7 +202,7 @@ export function ProcedureForm({
                 )
               ) : (
                 <Field inputNode={procedure.node} control={control} />
-              )}
+              ))}
 
               <ProcedureFormButton
                 text={`Execute ${name}`}
@@ -237,6 +253,20 @@ function XButton({
   );
 }
 
+function ToggleRawInput ({
+  onClick
+}: {
+  onClick: () => void
+}) {
+  return (
+    <div className="w-6 h-6">
+      <button type="button" onClick={onClick}>
+        <ToggleJsonIcon className="w-6 h-6" />
+      </button>
+    </div>
+  );
+}
+
 function wrapJsonSchema(jsonSchema: any) {
   delete jsonSchema["$schema"];
 

diff --git a/packages/trpc-panel/src/react-app/components/icons/ToggleJsonIcon.tsx b/packages/trpc-panel/src/react-app/components/icons/ToggleJsonIcon.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+export function ToggleJsonIcon({ className }: { className?: string }) {
+    return (
+        <svg
+            id="Layer_1"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className={className}
+        >
+            <defs>
+                <style>{`.cls-1{fill:#444;fill-rule:evenodd;}`}</style>
+            </defs>
+            <title>toggle raw JSON input</title>
+            <path
+                className="cls-1"
+                d="M8 3a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2H3v2h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h2v-2H8v-5a2 2 0 0 0-2-2a2 2 0 0 0 2-2V5h2V3m6 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2a2 2 0 0 1-2-2V5h-2V3h2Z"
+            />
+        </svg>
+    );
+}
diff --git a/packages/trpc-panel/src/react-app/index.tsx b/packages/trpc-panel/src/react-app/index.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { RootComponent } from "./Root";
 import "./index.css";
+import 'jsoneditor/dist/jsoneditor.css';
 import { RenderOptions } from "@src/render";
 import { trpc } from "@src/react-app/trpc";
 

diff --git a/yarn.lock b/yarn.lock
@@ -1113,6 +1113,11 @@
   dependencies:
     "@sinonjs/commons" "^2.0.0"
 
+"@sphinxxxx/color-conversion@^2.2.2":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz#03ecc29279e3c0c832f6185a5bfa3497858ac8ca"
+  integrity sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw==
+
 "@swc/[email protected]":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.0.tgz#bf1d807b60f7290d0ec763feea7ccdeda06e85f1"
@@ -1238,6 +1243,11 @@
   resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.3.tgz#472eaab5f15c1ffdd7f8628bd4c4f753995ec79e"
   integrity sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==
 
+"@types/ace@*":
+  version "0.0.49"
+  resolved "https://registry.yarnpkg.com/@types/ace/-/ace-0.0.49.tgz#067d2f14d7c18d6b03646f06336fef4329370b3a"
+  integrity sha512-VpeUGbQ5f1Pka30vOMyLoI+GuNcbyeroeFsuy2H+CHBJ9GYwpg/qPlbI5cfsUvvac4EWwP55x+xMfwgpal4USQ==
+
 "@types/aria-query@^5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc"
@@ -1406,6 +1416,14 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/jsoneditor@^9.9.1":
+  version "9.9.1"
+  resolved "https://registry.yarnpkg.com/@types/jsoneditor/-/jsoneditor-9.9.1.tgz#b96a26437e04210c666da2f31a51b9428f165199"
+  integrity sha512-+TJ8eXq5sm3z8gPAO6ZSBB9YyYvzWoHOvORnc0y4i+i5RL3ghQakJ211kCE3sKnuTIYqK752kITOnF3yfjdkug==
+  dependencies:
+    "@types/ace" "*"
+    ajv "^6.12.0"
+
 "@types/livereload@^0.9.2":
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/@types/livereload/-/livereload-0.9.2.tgz#e5259bc2f38f6dc631a7139a2383cd70e267fe81"
@@ -1674,6 +1692,11 @@ accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
+ace-builds@^1.27.0:
+  version "1.28.0"
+  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.28.0.tgz#b606702c33dec470393531d9808a1082add8302b"
+  integrity sha512-wkJp+Wz8MRHtCVdt65L/jPFLAQ0iqJZ2EeD2XWOvKGbIi4mZNwHlpHRLRB8ZnQ07VoiB0TLFWwIjjm2FL9gUcQ==
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -1696,7 +1719,7 @@ ajv-formats@^2.1.1:
   dependencies:
     ajv "^8.0.0"
 
-ajv@^6.10.0, ajv@^6.12.4:
+ajv@^6.10.0, ajv@^6.12.0, ajv@^6.12.4, ajv@^6.12.6:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -5258,6 +5281,11 @@ istextorbinary@^3.0.0:
     binaryextensions "^2.2.0"
     textextensions "^3.2.0"
 
+javascript-natural-sort@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz#f9e2303d4507f6d74355a73664d1440fb5a0ef59"
+  integrity sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==
+
 jest-changed-files@^29.5.0:
   version "29.5.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.5.0.tgz#e88786dca8bf2aa899ec4af7644e16d9dcf9b23e"
@@ -5624,6 +5652,11 @@ jiti@^1.17.2:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.18.2.tgz#80c3ef3d486ebf2450d9335122b32d121f2a83cd"
   integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==
 
+jmespath@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.16.0.tgz#b15b0a85dfd4d930d43e69ed605943c802785076"
+  integrity sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==
+
 js-sdsl@^4.1.4:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.4.0.tgz#8b437dbe642daa95760400b602378ed8ffea8430"
@@ -5676,6 +5709,11 @@ json-schema-traverse@^1.0.0:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
+json-source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/json-source-map/-/json-source-map-0.6.1.tgz#e0b1f6f4ce13a9ad57e2ae165a24d06e62c79a0f"
+  integrity sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg==
+
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
@@ -5698,6 +5736,21 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
   integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
 
+jsoneditor@^9.10.3:
+  version "9.10.3"
+  resolved "https://registry.yarnpkg.com/jsoneditor/-/jsoneditor-9.10.3.tgz#dbd8a32c5eb5f9900a0560ebe921132bed6f212d"
+  integrity sha512-9vSMTPKBZzz56WY0SjbV7VQqa1+wUPKmwqtitmVXmTT5ohAMOYlOLgOdRwj0bl81nHP5HsKsYEVLCPiArHNSFw==
+  dependencies:
+    ace-builds "^1.27.0"
+    ajv "^6.12.6"
+    javascript-natural-sort "^0.7.1"
+    jmespath "^0.16.0"
+    json-source-map "^0.6.1"
+    jsonrepair "^3.2.1"
+    mobius1-selectr "^2.4.13"
+    picomodal "^3.0.0"
+    vanilla-picker "^2.12.2"
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@@ -5714,6 +5767,11 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonrepair@^3.2.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/jsonrepair/-/jsonrepair-3.2.2.tgz#712315e4aa953bd066819810545cb976b0b6f3ef"
+  integrity sha512-IwsEsj59BVjFTO5DJ22Naxk5+AuNjS+1BUqOebpPlcyF8C+n8SAAICFo4Db74ORltzDygAlTAH56Pe1vupsnzA==
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
@@ -6145,6 +6203,11 @@ mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+mobius1-selectr@^2.4.13:
+  version "2.4.13"
+  resolved "https://registry.yarnpkg.com/mobius1-selectr/-/mobius1-selectr-2.4.13.tgz#0019dfd9f984840d6e40f70683ab3ec78ce3b5df"
+  integrity sha512-Mk9qDrvU44UUL0EBhbAA1phfQZ7aMZPjwtL7wkpiBzGh8dETGqfsh50mWoX9EkjDlkONlErWXArHCKfoxVg0Bw==
+
 morgan@^1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.10.0.tgz#091778abc1fc47cd3509824653dae1faab6b17d7"
@@ -6828,6 +6891,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+picomodal@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/picomodal/-/picomodal-3.0.0.tgz#facd30f4fbf34a809c1e04ea525f004f399c0b82"
+  integrity sha512-FoR3TDfuLlqUvcEeK5ifpKSVVns6B4BQvc8SDF6THVMuadya6LLtji0QgUDSStw0ZR2J7I6UGi5V2V23rnPWTw==
+
 pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -8972,6 +9040,13 @@ value-or-function@^3.0.0:
   resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-3.0.0.tgz#1c243a50b595c1be54a754bfece8563b9ff8d813"
   integrity sha512-jdBB2FrWvQC/pnPtIqcLsMaQgjhdb6B7tk1MMyTKapox+tQZbdRP4uLxu/JY0t7fbfDCUMnuelzEYv5GsxHhdg==
 
+vanilla-picker@^2.12.2:
+  version "2.12.2"
+  resolved "https://registry.yarnpkg.com/vanilla-picker/-/vanilla-picker-2.12.2.tgz#b4c6a3f4015dbd208080265fe7edd311709aa251"
+  integrity sha512-dk0gNeNL9fQFGd1VEhNDQfFlbCqAiksRh1H2tVPlavkH88n/a/y30rXi9PPKrYPTK5kEfPO4xcldt4ts/1wIAg==
+  dependencies:
+    "@sphinxxxx/color-conversion" "^2.2.2"
+
 vary@^1, vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"