Website should have an interactive playground editor for validating schemas

[gnidan]

It would be nice for there to be a way for people trying to familiarize themselves with this format to be able to type or paste JSON values and see errors if there's a validation problem.

[raxhvl]

Do you have a reference for how this should work?

[gnidan]

Do you have a reference for how this should work?

Not quite a reference, but let me explain what I'm thinking a bit:

• We should add a new packages/validate/ that defines the @ethdebug/format-validate package. I already made the @ethdebug/format package in packages/format/, which is just an NPM package to distribute the schemas themselves. I figure we should have this validate package be separate, so the schemas package doesn't add extra deps. This validate package should use hyperjump's libraries (the way the tests package does now)
• Inside packages/web, we should make a new component (likely in src/components/Playground or such). This Playground component would have a JSON editor and it would validate and report errors when the text input changes.
• I'm thinking that we want to have some kind of drop-down to select which schema to validate (on a single /spec/playground page), or maybe each schema page should have its own schema-specific playground.

Does this make sense? I haven't really thought this through in much detail yet. There might be another option (besides using the hyperjump libraries), which would be to use the Monaco editor's custom validation logic... I think this approach would be nice if it's easy to get working, because Monaco editor gives you red squiggly lines (as opposed to just a separate errors list)

[raxhvl]

Inside packages/web, we should make a new component (likely in src/components/Playground or such). This Playground component would have a JSON editor and it would validate and report errors when the text input changes.

You mean something like this: https://json-schema.hyperjump.io/

[gnidan]

Inside packages/web, we should make a new component (likely in src/components/Playground or such). This Playground component would have a JSON editor and it would validate and report errors when the text input changes.

You mean something like this: https://json-schema.hyperjump.io/

Yep exactly! Except no need for the left-side pane: instead I'm thinking that we have a single code editor + a drop-down for which schema you want to validate (ethdebug/format/type, ethdebug/format/type/elementary/uint, etc.) Maybe this dropdown could be searchable, or have other nice features.

Basically I just want to make it as easy as possible to learn this format... someone who reads the section on array types might want to try writing a complex nested array of arrays, and it would be nice if they could check for validation errors right on our website.

Oh, and we probably don't need the tabs of multiple instances that hyperjump's site lets you do.

I'm probably biased, but I'm imagining the simplicity of https://gnidan.github.io/abi-to-sol (the left hand side specifically)

[raxhvl]

I'm probably biased, but I'm imagining the simplicity of https://gnidan.github.io/abi-to-sol (the left hand side specifically)

Love it! Let me give it a shot. I'll come back with more ideas early next week.

[gnidan]

Love it! Let me give it a shot. I'll come back with more ideas early next week.

Awesome! Let me know how you get on. I put together this mockup to show the kind of layout I'm thinking for this case:

[raxhvl]

I made a quick prototype: https://eth-debug-playground.vercel.app/

Let me know what you think

[gnidan]

Whoa, looks great! Can you get this working in the site itself? (I ask because I was playing with Monaco editor before I opened this issue and ran into trouble. But looks like you'll have more luck than me!)

[gnidan]

@raxhvl here's the codesandbox I came up with

[gnidan]

I just also found this package, maybe it will work better than @monaco-editor/react: https://github.com/react-monaco-editor/react-monaco-editor