chore(website): pass user defined compilerOptions to linter (typescript-eslint#5080)

Author: armano2

packages/website/src/components/editor/LoadedEditor.tsx

@@ -8,6 +8,7 @@ import type { WebLinter } from '../linter/WebLinter';
 import { debounce } from '../lib/debounce';
 import { lintCode, LintCodeAction } from '../linter/lintCode';
 import { createProvideCodeActions } from './createProvideCodeActions';
+import { createCompilerOptions } from '@site/src/components/editor/config';
 import { parseMarkers } from '../linter/utils';
 
 export interface LoadedEditorProps extends CommonEditorProps {
@@ -39,13 +40,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
   const fixes = useRef(new Map<string, LintCodeAction[]>()).current;
 
   useEffect(() => {
-    const config = {
-      noResolve: true,
-      target: main.languages.typescript.ScriptTarget.ESNext,
-      module: main.languages.typescript.ModuleKind.ESNext,
-      ...tsConfig,
-      jsx: jsx ? main.languages.typescript.JsxEmit.React : undefined,
-    };
+    const config = createCompilerOptions(jsx, tsConfig);
 
     webLinter.updateOptions(config);
     sandboxInstance.setCompilerSettings(config);

packages/website/src/components/editor/config.ts

@@ -0,0 +1,16 @@
+import type Monaco from 'monaco-editor';
+
+export function createCompilerOptions(
+  jsx = false,
+  tsConfig: Record<string, unknown> = {},
+): Monaco.languages.typescript.CompilerOptions {
+  return {
+    noResolve: true,
+    lib: ['es2021', 'esnext'],
+    // ts and monaco has different type as monaco types are not changing base on ts version
+    target: window.ts.ScriptTarget.ESNext as number,
+    module: window.ts.ModuleKind.ESNext as number,
+    ...tsConfig,
+    jsx: jsx ? window.ts.JsxEmit.Preserve : window.ts.JsxEmit.None,
+  };
+}

packages/website/src/components/editor/useSandboxServices.ts

@@ -12,6 +12,7 @@ import { WebLinter } from '../linter/WebLinter';
 import { sandboxSingleton } from './loadSandbox';
 import { editorEmbedId } from './EditorEmbed';
 import { useColorMode } from '@docusaurus/theme-common';
+import { createCompilerOptions } from '@site/src/components/editor/config';
 
 export interface SandboxServicesProps {
   readonly jsx?: boolean;
@@ -51,13 +52,7 @@ export const useSandboxServices = (
 
     sandboxSingleton(props.ts)
       .then(async ({ main, sandboxFactory, ts, lintUtils }) => {
-        const compilerOptions: Monaco.languages.typescript.CompilerOptions = {
-          noResolve: true,
-          target: main.languages.typescript.ScriptTarget.ESNext,
-          jsx: props.jsx ? main.languages.typescript.JsxEmit.React : undefined,
-          lib: ['es2021', 'esnext'],
-          module: main.languages.typescript.ModuleKind.ESNext,
-        };
+        const compilerOptions = createCompilerOptions(props.jsx);
 
         const sandboxConfig: Partial<SandboxConfig> = {
           text: '',