docs: fix and add readme

MonoidDev · May 18, 2023 · bf88655 · bf88655
1 parent 04307ce
commit bf88655
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git 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
@@ -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",