(WIP) Added the option to disable type checking in the Monaco editor

src/App.tsx

@@ -15,7 +15,7 @@ import { SimulationProvider } from './SimulationContext';
 import { simulationMachine } from './simulationMachine';
 import { getSourceActor } from './sourceMachine';
 import { theme } from './theme';
-import { EditorThemeProvider } from './themeContext';
+import { EditorSettingsProvider } from './editorSettingsContext';
 import { useInterpretCanvas } from './useInterpretCanvas';
 
 function App() {
@@ -48,7 +48,7 @@ function App() {
 
   return (
     <ChakraProvider theme={theme}>
-      <EditorThemeProvider>
+      <EditorSettingsProvider>
         <PaletteProvider value={paletteService}>
           <SimulationProvider value={simService}>
             <Box
@@ -68,7 +68,7 @@ function App() {
             </Box>
           </SimulationProvider>
         </PaletteProvider>
-      </EditorThemeProvider>
+      </EditorSettingsProvider>
     </ChakraProvider>
   );
 }

src/EditorWithXStateImports.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react';
 import { themes } from './editor-themes';
 import { localCache } from './localCache';
 import { SpinnerWithText } from './SpinnerWithText';
-import { useEditorTheme } from './themeContext';
+import { useEditorSettings } from './editorSettingsContext';
 import { detectNewImportsToAcquireTypeFor } from './typeAcquisition';
 
 /**
@@ -83,14 +83,14 @@ const withTypeAcquisition = (
 export const EditorWithXStateImports = (
   props: EditorWithXStateImportsProps,
 ) => {
-  const editorTheme = useEditorTheme();
+  const editorSettings = useEditorSettings();
   const editorRef = useRef<typeof editor | null>(null);
   const definedEditorThemes = useRef(new Set<string>());
 
   useEffect(() => {
     const editor = editorRef.current;
     const definedThemes = definedEditorThemes.current;
-    const theme = editorTheme.theme;
+    const theme = editorSettings.theme;
 
     if (!editor || !definedThemes) {
       return;
@@ -100,8 +100,8 @@ export const EditorWithXStateImports = (
       editor.defineTheme(theme, themes[theme]);
     }
     editor.setTheme(theme);
-    localCache.saveEditorTheme(editorTheme.theme);
-  }, [editorTheme.theme]);
+    localCache.saveEditorTheme(editorSettings.theme);
+  }, [editorSettings.theme]);
 
   return (
     <Editor
@@ -122,7 +122,8 @@ export const EditorWithXStateImports = (
       theme="vs-dark"
       onMount={async (editor, monaco) => {
         editorRef.current = monaco.editor;
-        const theme = editorTheme.theme;
+
+        const theme = editorSettings.theme;
         monaco.editor.defineTheme(theme, themes[theme]);
         monaco.editor.setTheme(theme);
 
@@ -132,6 +133,11 @@ export const EditorWithXStateImports = (
           )}viz/ts-worker.js`,
         });
 
+        monaco?.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+          noSemanticValidation: editorSettings.isTypescriptEnabled,
+          noSyntaxValidation: editorSettings.isTypescriptEnabled,
+        });
+
         monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
           ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),
           module: monaco.languages.typescript.ModuleKind.CommonJS,

src/SettingsPanel.tsx

@@ -10,9 +10,10 @@ import {
   Kbd,
   VStack,
   Select,
+  Checkbox,
 } from '@chakra-ui/react';
 import { ThemeName, themes } from './editor-themes';
-import { useEditorTheme } from './themeContext';
+import { useEditorSettings } from './editorSettingsContext';
 import { useSimulationMode } from './SimulationContext';
 import { getPlatformMetaKeyLabel } from './utils';
 
@@ -60,21 +61,34 @@ const KeyboardShortcuts = () => (
 );
 
 export const SettingsPanel: React.FC = () => {
-  const editorTheme = useEditorTheme();
+  const editorSettings = useEditorSettings();
   const simulationMode = useSimulationMode();
   return (
     <VStack paddingY="5" spacing="7" alignItems="stretch">
       {simulationMode === 'visualizing' && <KeyboardShortcuts />}
+      {simulationMode === 'visualizing' && (
+        <Box>
+          <Heading as="h2" fontSize="l" marginBottom="5">
+            Enable Typescript
+          </Heading>
+          <Checkbox
+            checked={editorSettings.isTypescriptEnabled}
+            onChange={(e) => {
+              editorSettings.setIsTypescriptEnabled(e.target.checked);
+            }}
+          ></Checkbox>
+        </Box>
+      )}
       <Box>
         <Heading as="h2" fontSize="l" marginBottom="5">
           Editor theme
         </Heading>
         <Select
           maxWidth="fit-content"
-          defaultValue={editorTheme.theme}
+          defaultValue={editorSettings.theme}
           onChange={(e) => {
             const theme = e.target.value as ThemeName;
-            editorTheme.switchTheme(theme);
+            editorSettings.switchTheme(theme);
           }}
         >
           {Object.keys(themes).map((themeName) => (

src/editorSettingsContext.tsx

@@ -0,0 +1,42 @@
+import { useMemo, useState } from 'react';
+import { ThemeName } from './editor-themes';
+import { localCache } from './localCache';
+import { createRequiredContext } from './utils';
+
+interface EditorSettingsContext {
+  theme: ThemeName;
+  switchTheme(themeName: ThemeName): void;
+  isTypescriptEnabled: boolean;
+  setIsTypescriptEnabled: (value: boolean) => void;
+}
+
+const [EditorSettingsProviderLocal, useEditorSettings] =
+  createRequiredContext<EditorSettingsContext>('EditorSettings');
+
+export function EditorSettingsProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [theme, setTheme] = useState<ThemeName>(
+    () => localCache.getEditorTheme() || 'xstateViz',
+  );
+  const [isTypescriptEnabled, setIsTypescriptEnabled] = useState<boolean>(() =>
+    localCache.typescriptChecking.get(),
+  );
+  const contextValue: EditorSettingsContext = useMemo(
+    () => ({
+      theme,
+      switchTheme: setTheme,
+      isTypescriptEnabled,
+      setIsTypescriptEnabled,
+    }),
+    [theme, isTypescriptEnabled],
+  );
+  return (
+    <EditorSettingsProviderLocal value={contextValue}>
+      {children}
+    </EditorSettingsProviderLocal>
+  );
+}
+export { useEditorSettings };

src/localCache.ts

@@ -23,6 +23,7 @@ export interface CachedSource {
 const POSITION_CACHE_PREFIX = `xstate_viz_position`;
 const RAW_SOURCE_CACHE_PREFIX = `xstate_viz_raw_source`;
 const EDITOR_THEME_CACHE_KEY = `xstate_viz_editor_theme`;
+const EDITOR_SETTING_CACHE_PREFIX = `xstate_viz_editor_setting|`;
 
 const makePositionCacheKey = (sourceID: string | null) =>
   `${POSITION_CACHE_PREFIX}|${sourceID || 'no_source'}`;
@@ -146,6 +147,38 @@ const saveEditorTheme = (themeName: ThemeName) => {
   } catch (er) {}
 };
 
+const getSetting = <T extends string | boolean>(key: string): T | undefined => {
+  try {
+    const themeName = storage.getItem(`${EDITOR_SETTING_CACHE_PREFIX}|${key}`);
+    if (themeName) {
+      return JSON.parse(themeName);
+    }
+  } catch (e) {}
+};
+
+const saveSetting = <T>(key: string, value: T) => {
+  try {
+    storage.setItem(
+      `${EDITOR_SETTING_CACHE_PREFIX}|${key}`,
+      JSON.stringify(value),
+    );
+  } catch (er) {}
+};
+
+const makeSettingManager = <T extends string | boolean>(
+  key: string,
+  defaultValue: T,
+) => {
+  return {
+    get: () => {
+      return getSetting<T>(key) ?? defaultValue;
+    },
+    set: (value: T) => {
+      return saveSetting<T>(key, value);
+    },
+  };
+};
+
 export const localCache = {
   getPosition,
   savePosition,
@@ -154,4 +187,5 @@ export const localCache = {
   getEditorTheme,
   saveEditorTheme,
   removeSourceRawContent,
+  typescriptChecking: makeSettingManager('ts-check', true),
 };