Merge branch 'update_code_examples' into generate-sharable-link

Author: amareshsm

src/App.tsx

@@ -9,7 +9,8 @@ import { ThemeProvider } from './components/theme-provider';
 import { decodeFromBase64 } from './lib/utils';
 
 function App() {
-  const { setTool, language, tool, JSCode, setJSCode, JSONCode, setJSONCode, setLanguage, setParser,
+
+  const { setTool, language, tool, jsCode, setJsCode, jsonCode, setJsonCode, setLanguage, setParser,
     setSourceType, setEsVersion, setIsJSX, setJsonMode, setWrap, setAstViewMode, setScopeViewMode,
     setPathViewMode, setPathIndexes, setPathIndex } = useExplorer();
   const activeTool = tools.find(({ value }) => value === tool) ?? tools[0];
@@ -55,9 +56,9 @@ function App() {
               <Editor
                 className="h-[30dvh] sm:h-full"
                 language={language}
-                value={language === 'javascript' ? JSCode : JSONCode}
+                value={language === 'javascript' ? jsCode : jsonCode}
                 onChange={(value) => {
-                  language === 'javascript' ? setJSCode(value ?? '') : setJSONCode(value ?? '')
+                  language === 'javascript' ? setJsCode(value ?? '') : setJsonCode(value ?? '')
                 }}
               />
               <div className="bg-foreground/5 pb-8 overflow-auto h-[70dvh] sm:h-full relative flex flex-col">

src/components/ast/javascript-ast.tsx

@@ -12,7 +12,7 @@ export const JavascriptAst: FC = () => {
   let tree: ReturnType<typeof espree.parse> | null = null;
 
   try {
-    tree = espree.parse(explorer.JSCode, {
+    tree = espree.parse(explorer.jsCode, {
       ecmaVersion: explorer.esVersion,
       sourceType: explorer.sourceType,
     });

src/components/ast/json-ast.tsx

@@ -12,7 +12,7 @@ export const JsonAst: FC = () => {
   let tree: ReturnType<typeof parse> | null = null;
 
   try {
-    tree = parse(explorer.JSONCode, {
+    tree = parse(explorer.jsonCode, {
       mode: explorer.jsonMode,
       ranges: true,
       tokens: true,

src/components/editor.tsx

@@ -2,8 +2,10 @@
 
 import { Editor as MonacoEditor } from '@monaco-editor/react';
 import { useExplorer } from '@/hooks/use-explorer';
+import { useEffect } from 'react';
 import type { ComponentProps, FC } from 'react';
 import { useTheme } from './theme-provider';
+import type * as monacoEditor from 'monaco-editor';
 
 type EditorProperties = ComponentProps<typeof MonacoEditor> & {
   readOnly?: boolean;
@@ -13,7 +15,17 @@ type EditorProperties = ComponentProps<typeof MonacoEditor> & {
 
 export const Editor: FC<EditorProperties> = ({ readOnly, value, onChange, ...properties }) => {
   const { theme } = useTheme();
-  const explorer = useExplorer();
+  const { wrap, jsonMode } = useExplorer();
+
+  useEffect(() => {
+    const monaco = (window as any).monaco as typeof monacoEditor;
+    if (monaco) {
+      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        validate: true,
+        allowComments: jsonMode === 'jsonc',
+      });
+    }
+  }, [jsonMode]);
 
   return (
     <MonacoEditor
@@ -36,12 +48,17 @@ export const Editor: FC<EditorProperties> = ({ readOnly, value, onChange, ...pro
             "editor.background": "#FFFFFF00",
           },
         });
+
+        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+          validate: true,
+          allowComments: jsonMode === 'jsonc',
+        });
       }}
       options={{
         minimap: {
           enabled: false,
         },
-        wordWrap: explorer.wrap ? 'on' : 'off',
+        wordWrap: wrap ? 'on' : 'off',
         readOnly: readOnly ?? false,
       }}
       theme={theme === 'dark' ? 'eslint-dark' : 'eslint-light'}

src/components/options.tsx

@@ -27,7 +27,6 @@ import { Button } from './ui/button';
 import { Label } from './ui/label';
 import type { FC } from 'react';
 import { Settings } from 'lucide-react';
-import { defaultJSONCode, defaultJavascriptCode } from '../lib/const';
 
 export const Options: FC = () => {
   const explorer = useExplorer();

src/components/path/index.tsx

@@ -22,7 +22,7 @@ export const CodePath: FC = () => {
 
   useDebouncedEffect(
     () => {
-      generateCodePath(explorer.JSCode, explorer.esVersion, explorer.sourceType)
+      generateCodePath(explorer.jsCode, explorer.esVersion, explorer.sourceType)
         .then((response) => {
           if ('error' in response) {
             throw new Error(response.error);
@@ -45,7 +45,7 @@ export const CodePath: FC = () => {
         .catch((newError) => setError(parseError(newError)));
     },
     500,
-    [explorer, explorer.JSCode, explorer.esVersion, explorer.sourceType, explorer.setPathIndexes, explorer.pathIndexes]
+    [explorer, explorer.jsCode, explorer.esVersion, explorer.sourceType, explorer.setPathIndexes, explorer.pathIndexes]
   );
 
   if (error) {

src/components/scope/index.tsx

@@ -13,7 +13,7 @@ export const Scope: FC = () => {
   let ast = {};
 
   try {
-    ast = espree.parse(explorer.JSCode, {
+    ast = espree.parse(explorer.jsCode, {
       range: true,
       ecmaVersion: explorer.esVersion,
       sourceType: explorer.sourceType,

src/hooks/use-explorer.ts

@@ -1,20 +1,20 @@
 import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import type { Options } from 'espree';
-import { defaultJavascriptCode, defaultJSONCode } from '../lib/const'
 import { storeState } from '../lib/utils';
+import {defaultJsCode, defaultJsonCode} from '../lib/const'
 export type SourceType = Exclude<Options['sourceType'], undefined>;
 export type Version = Exclude<Options['ecmaVersion'], undefined>;
 
 type ExplorerState = {
   tool: 'ast' | 'scope' | 'path';
   setTool: (tool: ExplorerState['tool']) => void;
 
-  JSCode: string;
-  setJSCode: (JSCode: string) => void;
+  jsCode: string;
+  setJsCode: (JSCode: string) => void;
 
-  JSONCode: string;
-  setJSONCode: (JSONCode: string) => void;
+  jsonCode: string;
+  setJsonCode: (JSONCode: string) => void;
 
   language: string;
   setLanguage: (language: string) => void;
@@ -69,11 +69,11 @@ export const useExplorer = create<ExplorerState>()(
         tool: 'ast',
         setTool: createSetter('tool', set),
 
-        JSCode: defaultJavascriptCode,
-        setJSCode: createSetter('JSCode', set),
+        jsCode: defaultJsCode,
+        setJsCode: createSetter('jsCode', set),
 
-        JSONCode: defaultJSONCode,
-        setJSONCode: createSetter('JSONCode', set),
+        jsonCode: defaultJsonCode,
+        setJsonCode: createSetter('jsonCode', set),
 
         language: 'javascript',
         setLanguage: createSetter('language', set),

src/lib/const.ts

@@ -194,7 +194,7 @@ export const pathViewOptions = [
   },
 ];
 
-export const defaultJavascriptCode = `
+export const defaultJsCode = `
 /**
  * Type or paste some JavaScript here to learn more about
  * the static analysis that ESLint can do for you.
@@ -228,9 +228,9 @@ function getConfig() {
 export default [
     ...js.configs.recommended,
     getConfig()
-];`;
+];`.trim();
 
-export const defaultJSONCode = `
+export const defaultJsonCode = `
 /**
  * Type or paste some JSON here to learn more about
  * the static analysis that ESLint can do for you.
@@ -253,5 +253,4 @@ export const defaultJSONCode = `
     "key2": {
         "key3": [1, 2, "3", 1e10, 1e-3]
     }
-}
-`
+}`.trim();