typescript-eslint · armano2 · Apr 2, 2023 · Mar 29, 2023 · Mar 29, 2023 · Mar 30, 2023
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
@@ -7,7 +7,7 @@ import IconExternalLink from '@theme/Icon/ExternalLink';
 import React, { useCallback } from 'react';
 
 import { useClipboard } from '../hooks/useClipboard';
-import Checkbox from './inputs/Checkbox';
+import { fileTypes } from './config';
 import Dropdown from './inputs/Dropdown';
 import Tooltip from './inputs/Tooltip';
 import ActionLabel from './layout/ActionLabel';
@@ -74,11 +74,12 @@ function OptionsSelectorContent({
         <InputLabel name="TSEslint">{process.env.TS_ESLINT_VERSION}</InputLabel>
       </Expander>
       <Expander label="Options">
-        <InputLabel name="Enable jsx">
-          <Checkbox
-            name="jsx"
-            checked={state.jsx}
-            onChange={(e): void => setState({ jsx: e })}
+        <InputLabel name="File type">
+          <Dropdown
+            name="fileType"
+            value={state.fileType}
+            onChange={(fileType): void => setState({ fileType })}
+            options={fileTypes}
           />
         </InputLabel>
         <InputLabel name="Source type">

diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
@@ -29,7 +29,7 @@ import type {
 
 function Playground(): JSX.Element {
   const [state, setState] = useHashState({
-    jsx: false,
+    fileType: '.tsx',
     showAST: false,
     sourceType: 'module',
     code: '',
@@ -131,7 +131,7 @@ function Playground(): JSX.Element {
               </div>
               <LoadingEditor
                 ts={state.ts}
-                jsx={state.jsx}
+                fileType={state.fileType}
                 activeTab={activeTab}
                 code={state.code}
                 tsconfig={state.tsconfig}

diff --git a/packages/website/src/components/config.ts b/packages/website/src/components/config.ts
@@ -1,6 +1,20 @@
-export const detailTabs = [
-  { value: false as const, label: 'Errors' },
-  { value: 'es' as const, label: 'ESTree' },
-  { value: 'ts' as const, label: 'TypeScript' },
-  { value: 'scope' as const, label: 'Scope' },
+import type { ConfigFileType, ConfigShowAst } from './types';
+
+export const detailTabs: { value: ConfigShowAst; label: string }[] = [
+  { value: false, label: 'Errors' },
+  { value: 'es', label: 'ESTree' },
+  { value: 'ts', label: 'TypeScript' },
+  { value: 'scope', label: 'Scope' },
+];
+
+export const fileTypes: ConfigFileType[] = [
+  '.ts',
+  '.tsx',
+  '.js',
+  '.jsx',
+  '.d.ts',
+  '.cjs',
+  '.mjs',
+  '.cts',
+  '.mts',
 ];
diff --git a/packages/website/src/components/config/utils.ts b/packages/website/src/components/config/utils.ts
@@ -79,10 +79,6 @@ export function toJson(cfg: unknown): string {
   return JSON.stringify(cfg, null, 2);
 }
 
-export function toJsonConfig(cfg: unknown, prop: string): string {
-  return toJson({ [prop]: cfg });
-}
-
 export function getTypescriptOptions(): OptionDeclarations[] {
   const allowedCategories = [
     'Command-line Options',

diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
@@ -33,7 +33,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
   tsconfig,
   eslintrc,
   selectedRange,
-  jsx,
+  fileType,
   onEsASTChange,
   onScopeChange,
   onTsASTChange,
@@ -84,11 +84,11 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
   ]);
 
   useEffect(() => {
-    const newPath = jsx ? '/input.tsx' : '/input.ts';
+    const newPath = `/input${fileType}`;
     if (tabs.code.uri.path !== newPath) {
       const newModel = sandboxInstance.monaco.editor.createModel(
         tabs.code.getValue(),
-        'typescript',
+        undefined,
         sandboxInstance.monaco.Uri.file(newPath),
       );
       newModel.updateOptions({ tabSize: 2, insertSpaces: true });
@@ -98,22 +98,15 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
       tabs.code.dispose();
       tabs.code = newModel;
     }
-  }, [
-    jsx,
-    sandboxInstance.editor,
-    sandboxInstance.monaco.Uri,
-    sandboxInstance.monaco.editor,
-    tabs,
-  ]);
+  }, [fileType, sandboxInstance.editor, sandboxInstance.monaco, tabs]);
 
   useEffect(() => {
     const config = createCompilerOptions(
-      jsx,
       parseTSConfig(tsconfig).compilerOptions,
     );
     webLinter.updateCompilerOptions(config);
     sandboxInstance.setCompilerSettings(config);
-  }, [jsx, sandboxInstance, tsconfig, webLinter]);
+  }, [sandboxInstance, tsconfig, webLinter]);
 
   useEffect(() => {
     webLinter.updateRules(parseESLintRC(eslintrc).rules);
@@ -128,10 +121,10 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
     const lintEditor = debounce(() => {
       console.info('[Editor] linting triggered');
 
-      webLinter.updateParserOptions(jsx, sourceType);
+      webLinter.updateParserOptions(sourceType);
 
       try {
-        const messages = webLinter.lint(code);
+        const messages = webLinter.lint(code, tabs.code.uri.path);
 
         const markers = parseLintResults(messages, codeActions, ruleId =>
           sandboxInstance.monaco.Uri.parse(
@@ -164,7 +157,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
     lintEditor();
   }, [
     code,
-    jsx,
+    fileType,
     tsconfig,
     eslintrc,
     sourceType,
@@ -239,7 +232,10 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
         run(editor) {
           const editorModel = editor.getModel();
           if (editorModel) {
-            const fixed = webLinter.fix(editor.getValue());
+            const fixed = webLinter.fix(
+              editor.getValue(),
+              editorModel.uri.path,
+            );
             if (fixed.fixed) {
               editorModel.pushEditOperations(
                 null,

diff --git a/packages/website/src/components/editor/config.ts b/packages/website/src/components/editor/config.ts
@@ -4,16 +4,16 @@ import type Monaco from 'monaco-editor';
 import { getTypescriptOptions } from '../config/utils';
 
 export function createCompilerOptions(
-  jsx = false,
   tsConfig: Record<string, unknown> = {},
 ): Monaco.languages.typescript.CompilerOptions {
   const config = window.ts.convertCompilerOptionsFromJson(
     {
       // ts and monaco has different type as monaco types are not changing base on ts version
       target: 'esnext',
       module: 'esnext',
+      jsx: 'preserve',
       ...tsConfig,
-      jsx: jsx ? 'preserve' : undefined,
+      allowJs: true,
       lib: Array.isArray(tsConfig.lib) ? tsConfig.lib : undefined,
       moduleResolution: undefined,
       plugins: undefined,

diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts
@@ -33,22 +33,14 @@ export const useSandboxServices = (
 ): Error | SandboxServices | undefined => {
   const { onLoaded } = props;
   const [services, setServices] = useState<Error | SandboxServices>();
-  const [loadedTs, setLoadedTs] = useState<string>(props.ts);
   const { colorMode } = useColorMode();
 
-  useEffect(() => {
-    if (props.ts !== loadedTs) {
-      window.location.reload();
-    }
-  }, [props.ts, loadedTs]);
-
   useEffect(() => {
     let sandboxInstance: SandboxInstance | undefined;
-    setLoadedTs(props.ts);
 
     sandboxSingleton(props.ts)
       .then(async ({ main, sandboxFactory, lintUtils }) => {
-        const compilerOptions = createCompilerOptions(props.jsx);
+        const compilerOptions = createCompilerOptions();
 
         const sandboxConfig: Partial<SandboxConfig> = {
           text: props.code,
@@ -128,7 +120,7 @@ export const useSandboxServices = (
     };
     // colorMode and jsx can't be reactive here because we don't want to force a recreation
     // updating of colorMode and jsx is handled in LoadedEditor
-  }, [props.ts, onLoaded]);
+  }, []);
 
   return services;
 };