combine state var

Author: amareshsm

src/App.tsx

@@ -10,22 +10,21 @@ import { decodeFromBase64 } from './lib/utils';
 
 function App() {
 
-  const { setTool, language, tool, jsCode, setJsCode, jsonCode, setJsonCode, setLanguage, setParser,
+  const { setTool, language, tool, setLanguage, setParser,
     setSourceType, setEsVersion, setIsJSX, setJsonMode, setWrap, setAstViewMode, setScopeViewMode,
-    setPathViewMode, setPathIndexes, setPathIndex } = useExplorer();
+    setPathViewMode, setPathIndexes, setPathIndex, code, setCode } = useExplorer();
   const activeTool = tools.find(({ value }) => value === tool) ?? tools[0];
 
   useLayoutEffect(() => {
     const getUrlState = () => {
       try {
         const urlState = JSON.parse(decodeFromBase64(window.location.hash.replace(/^#/u, "")));
         if (urlState?.state) {
-          const { tool, jsCode, jsonCode, language, parser, sourceType, esVersion, isJSX,
+          const { code, tool, language, parser, sourceType, esVersion, isJSX,
             jsonMode, wrap, astViewMode, scopeViewMode, pathViewMode, pathIndexes, pathIndex } = urlState.state;
 
+          setCode(code);
           setTool(tool);
-          setJsCode(jsCode);
-          setJsonCode(jsonCode);
           setLanguage(language);
           setParser(parser);
           setSourceType(sourceType);
@@ -44,7 +43,7 @@ function App() {
       }
     };
     getUrlState();
-  }, [])
+  }, []);
 
   return (
     <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
@@ -56,9 +55,9 @@ function App() {
               <Editor
                 className="h-[30dvh] sm:h-full"
                 language={language}
-                value={language === 'javascript' ? jsCode : jsonCode}
+                value={language === 'javascript' ? code.jsCode : code.jsonCode}
                 onChange={(value) => {
-                  language === 'javascript' ? setJsCode(value ?? '') : setJsonCode(value ?? '')
+                  language === 'javascript' ? setCode({ ...code, jsCode: value || '' }) : setCode({ ...code, jsonCode: 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.code.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.code.jsonCode, {
       mode: explorer.jsonMode,
       ranges: true,
       tokens: true,

src/components/path/index.tsx

@@ -22,7 +22,7 @@ export const CodePath: FC = () => {
 
   useDebouncedEffect(
     () => {
-      generateCodePath(explorer.jsCode, explorer.esVersion, explorer.sourceType)
+      generateCodePath(explorer.code.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.code.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.code.jsCode, {
       range: true,
       ecmaVersion: explorer.esVersion,
       sourceType: explorer.sourceType,

src/hooks/use-explorer.ts

@@ -2,23 +2,24 @@ import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import type { Options } from 'espree';
 import { storeState } from '../lib/utils';
-import {defaultJsCode, defaultJsonCode} from '../lib/const'
+import {defaultCode, defaultJsOptions} from '../lib/const'
 export type SourceType = Exclude<Options['sourceType'], undefined>;
 export type Version = Exclude<Options['ecmaVersion'], undefined>;
 
+type Code = { jsCode: string, jsonCode: string };
+type JsOptions = { parser: string, sourceType: string, esVersion: string, isJSX: Boolean}
 type ExplorerState = {
-  tool: 'ast' | 'scope' | 'path';
-  setTool: (tool: ExplorerState['tool']) => void;
-
-  jsCode: string;
-  setJsCode: (jsCode: string) => void;
-
-  jsonCode: string;
-  setJsonCode: (jsonCode: string) => void;
+  code: Code;
+  setCode: (code: Code) => void;
 
   language: string;
   setLanguage: (language: string) => void;
 
+  tool: 'ast' | 'scope' | 'path';
+  setTool: (tool: ExplorerState['tool']) => void;
+
+  jsOptions: JsOptions;
+
   parser: string;
   setParser: (parser: string) => void;
 
@@ -66,18 +67,18 @@ export const useExplorer = create<ExplorerState>()(
   devtools(
     persist(
       (set) => ({
-        tool: 'ast',
-        setTool: createSetter('tool', set),
-
-        jsCode: defaultJsCode,
-        setJsCode: createSetter('jsCode', set),
-
-        jsonCode: defaultJsonCode,
-        setJsonCode: createSetter('jsonCode', set),
+        code: defaultCode,
+        setCode: createSetter('code', set),
 
         language: 'javascript',
         setLanguage: createSetter('language', set),
 
+        tool: 'ast',
+        setTool: createSetter('tool', set),
+
+        jsOptions: defaultJsOptions,
+        setJsOptions: createSetter('jsOptions', set),
+
         parser: 'espree',
         setParser: createSetter('parser', set),
 

src/lib/const.ts

@@ -194,7 +194,7 @@ export const pathViewOptions = [
   },
 ];
 
-export const defaultJsCode = `
+const defaultJsCode = `
 /**
  * Type or paste some JavaScript here to learn more about
  * the static analysis that ESLint can do for you.
@@ -230,7 +230,7 @@ export default [
     getConfig()
 ];`.trim();
 
-export const defaultJsonCode = `
+const defaultJsonCode = `
 /**
  * Type or paste some JSON here to learn more about
  * the static analysis that ESLint can do for you.
@@ -253,4 +253,23 @@ export const defaultJsonCode = `
     "key2": {
         "key3": [1, 2, "3", 1e10, 1e-3]
     }
-}`.trim();
+}`.trim();
+
+export const defaultCode = { jsCode: defaultJsCode, jsonCode: defaultJsonCode };
+
+export const defaultJsOptions = {
+  parser: 'espree',
+  sourceType: 'module',
+  esVersion: 'latest',
+  isJSX: true,
+}
+
+export const defaultJsonOptions = {
+  jsonMode: 'jsonc',
+  wrap: true,
+  astViewMode: 'json',
+  scopeViewMode: 'flat',
+  pathViewMode: 'code',
+  pathIndexes: 1,
+  pathIndex: 0,
+}