feat(playground): prettier schema in editor

playground/package.json

@@ -17,6 +17,7 @@
         "@chakra-ui/cli": "^2.1.8",
         "@chakra-ui/styled-system": "^2.3.4",
         "@iconify/json": "^2.1.132",
+        "@types/json-schema": "^7.0.11",
         "@types/lz-string": "^1.3.34",
         "@types/react": "^18.0.18",
         "@types/react-dom": "^18.0.6",

playground/src/Playground/Playground.consts.ts

@@ -3,19 +3,19 @@ import type { OptionsFormValues } from "../components/OptionsForm";
 export type PresetTemplate = { name: string; preset: string; template: string; options?: Partial<OptionsFormValues> };
 export const presetTemplateList = [
     { name: "Default", preset: "default", template: "template-default", options: { groupStrategy: "none" } },
+    {
+        name: "Default - Schemas only",
+        preset: "schemas-only",
+        template: "template-schemas-only",
+        options: { groupStrategy: "none", shouldExportAllSchemas: true },
+    },
     { name: "Grouped by tag", preset: "grouped-tag", template: "template-grouped", options: { groupStrategy: "tag" } },
     {
         name: "Grouped by method",
         preset: "grouped-method",
         template: "template-grouped",
         options: { groupStrategy: "method" },
     },
-    {
-        name: "Schemas only",
-        preset: "schemas-only",
-        template: "template-schemas-only",
-        options: { groupStrategy: "none", shouldExportAllSchemas: true },
-    },
     {
         name: "Grouped by tag (split files)",
         preset: "grouped-tag-file",

playground/src/Playground/Playground.tsx

@@ -14,9 +14,10 @@ import {
     Kbd,
     Menu,
     MenuButton,
+    MenuDivider,
+    MenuGroup,
     MenuItem,
     MenuItemOption,
-    MenuGroup,
     MenuList,
     MenuOptionGroup,
     ModalFooter,
@@ -26,12 +27,11 @@ import {
     PopoverTrigger,
     Tab,
     TabList,
+    TabProps,
     Tabs,
     useClipboard,
     useColorMode,
     useModalContext,
-    MenuDivider,
-    TabProps,
 } from "@chakra-ui/react";
 import Editor, { EditorProps } from "@monaco-editor/react";
 import { BaseField, Field, FieldProps, FormDialog, FormLayout, useFormContext, useWatch } from "@saas-ui/react";
@@ -40,26 +40,19 @@ import type { TemplateContextOptions } from "openapi-zod-client";
 import { match } from "ts-pattern";
 import { defaultOptionValues, OptionsForm, OptionsFormValues } from "../components/OptionsForm";
 import { SplitPane } from "../components/SplitPane/SplitPane";
+import type { GetLanguageSchemasData } from "../macros/get-language-schemas";
+import { isValidDocumentName, isValidPrettierConfig, isValidTemplateName } from "./Playground.asserts";
 import { presetTemplateList } from "./Playground.consts";
 import { FileTabData, usePlaygroundContext } from "./Playground.machine";
 import { presets } from "./presets";
-import { isValidDocumentName, isValidTemplateName, isValidPrettierConfig } from "./Playground.asserts";
 
 // TODO
 // template context explorer -> copy ctx as JSON to clipboard + open https://jsoncrack.com/editor
-// input = getZodSchema
 // TODO diff editor + collect warnings
 // https://reactflow.dev/ + dependency graph
-// monaco settings (theme + inline diff or not / minimap / etc)
-
-// -> prettier schema for autocomplete on options
-//  https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-json-defaults
-// -> openapi schema for yaml/json ?
 
 // when hovering on output, show source schema in input ?
 // https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-hover-provider-example
-// https://github.com/OAI/OpenAPI-Specification/blob/main/schemas/v3.0/schema.json
-// https://github.com/SchemaStore/schemastore/blob/master/src/schemas/json/prettierrc.json
 
 export const Playground = () => {
     const service = usePlaygroundContext();
@@ -133,6 +126,24 @@ export const Playground = () => {
                                 });
                             }}
                             theme={colorMode === "dark" ? "vs-dark" : "vs-light"}
+                            beforeMount={(monaco) => {
+                                const schemas: GetLanguageSchemasData = import.meta.compileTime(
+                                    "../macros/get-language-schemas.ts"
+                                );
+
+                                const prettierUri = new monaco.Uri().with({ path: inputList[2].name });
+
+                                monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+                                    validate: true,
+                                    schemas: [
+                                        {
+                                            uri: schemas.prettier.id,
+                                            fileMatch: [prettierUri.toString()],
+                                            schema: schemas.prettier,
+                                        },
+                                    ],
+                                });
+                            }}
                         />
                     </Box>
                     <Box h="100%" flexGrow={1} flexShrink={0} minW={0}>
@@ -302,7 +313,7 @@ const SelectPresetTemplateMenu = () => {
     return (
         <Popover trigger="hover" placement="left" closeOnBlur={false}>
             <PopoverTrigger>
-                <MenuItem>Select handlebars template</MenuItem>
+                <MenuItem>Select template preset</MenuItem>
             </PopoverTrigger>
             <PopoverContent>
                 <PopoverBody>
@@ -482,6 +493,7 @@ const FieldEditor = ({ name, language, ...props }: FieldProps & Pick<EditorProps
     return (
         <BaseField name={name} {...props}>
             <Editor
+                defaultValue={form.getValues(name)}
                 onChange={(content) => form.setValue(name, content)}
                 onMount={() => form.register(name)}
                 theme={colorMode === "dark" ? "vs-dark" : "vs-light"}

playground/src/macros/get-language-schemas.ts

@@ -0,0 +1,21 @@
+import { parse } from "yaml";
+import { JSONSchema7 } from "json-schema";
+import schemaPrettier from "./schema-prettierrc.json";
+import { AwaitFn } from "pastable";
+
+const getLanguageSchemas = async () => {
+    return {
+        data: {
+            // https://github.com/SchemaStore/schemastore/blob/1d89c46b81e34e0f6ff9914085eb2ba44808145c/src/schemas/json/prettierrc.json
+            prettier: schemaPrettier,
+            // https://github.com/OAI/OpenAPI-Specification/blob/157a4c81ae537ef793b2bee368bc00d88b461de8/schemas/v3.0/schema.yaml
+            // commented since @monaco-editor/react isn't compatible with monaco-yaml
+            // hopefully it will be fixed in the future
+            // openApiV3: (await parse("./schema-openapi-v3.0.yaml")) as Omit<JSONSchema7, "$id"> & { id: string },
+        },
+    };
+};
+
+export default getLanguageSchemas;
+
+export type GetLanguageSchemasData = AwaitFn<typeof getLanguageSchemas>["data"];

playground/src/macros/get-package-version.ts

@@ -1,4 +1,3 @@
-import { safeJSONParse } from "pastable";
 import packageJson from "../../../lib/package.json";
 
 const getPackageJsonVersion = () => ({ data: packageJson.version });