From bf88655b9b7eb9eacef4cfece0b8821054cb1dd4 Mon Sep 17 00:00:00 2001 From: hanayashiki Date: Thu, 18 May 2023 14:10:26 +0900 Subject: [PATCH] docs: fix and add readme --- packages/zod-monaco-reporter/README.md | 18 ++++++++++++++---- packages/zod-monaco-reporter/package.json | 2 +- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/zod-monaco-reporter/README.md b/packages/zod-monaco-reporter/README.md index 131472d..88420c5 100644 --- a/packages/zod-monaco-reporter/README.md +++ b/packages/zod-monaco-reporter/README.md @@ -1,7 +1,12 @@ -# Zod Monaco Editor +# Zod Monaco Reporter Render Zod errors in Monaco Editor (the editor used by VSCode). +## Why Monaco Editor + +Monaco Editor is gigantic, you may say, but when it comes to complex and large data validated by equally complex Zod schema, it is nice if we can fold up irrelevant blocks, +hover to get error details, and search through the data. All of this comes for free in our everyday VS Code, but you also deserve the same DX in your application. When the data fails validation, render it using `ZodMonacoReporter` and quickly figure out which part goes wrong. + ## Installation ```bash @@ -10,6 +15,8 @@ pnpm install @monoid-dev/zod-monaco-reporter yarn add @monoid-dev/zod-monaco-reporter ``` +No extra steps for compiling Monaco Editor is needed, because under the hood we use `@monaco-editor/react` which downloads it from [cdn.jsdelivr.net](https://jsdelivr.com). + ## Get Started Consider the following Zod schema: @@ -75,8 +82,11 @@ Usage: Parameters: -1. value: Any value needs validation. Notice that currently the value needs to be JSON serializable or it cannot be displayed correctly. -2. schema?: The zod schema used to verify the `value`. -3. error?: A ZodError for the result. The errors will be rendered regardless of the schema. It is useful if you don't know the schema. +1. value: Any value to validate. Notice that currently the value needs to be JSON serializable or it cannot be displayed correctly. +2. schema?: Optional. The zod schema used to verify the `value`. +3. error?: Optional. A ZodError for the result. The errors will be rendered regardless of the schema. It is useful if you don't know the schema. 4. name?: Optional. The name of the data. It needs to be unique for the Monaco Editor the match each `value` to its own `Model`. If you don't provide one, we generate a random name for you. +Note: + +You may prefer using `React.lazy` to load this element as it contains bloated JavaScript. diff --git a/packages/zod-monaco-reporter/package.json b/packages/zod-monaco-reporter/package.json index 9fea39a..befc18d 100644 --- a/packages/zod-monaco-reporter/package.json +++ b/packages/zod-monaco-reporter/package.json @@ -1,6 +1,6 @@ { "name": "@monoid-dev/zod-monaco-reporter", - "version": "0.0.4", + "version": "0.0.6", "type": "commonjs", "main": "./lib/index.js", "types": "./lib/index.d.ts",