From 594116e0debc148c715cb08ae111837f81ee8081 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Thu, 26 May 2022 17:50:41 +0200
Subject: [PATCH] chore(website): pass user defined compilerOptions to linter
 (#5080)

---
 .../src/components/editor/LoadedEditor.tsx       |  9 ++-------
 packages/website/src/components/editor/config.ts | 16 ++++++++++++++++
 .../src/components/editor/useSandboxServices.ts  |  9 ++-------
 3 files changed, 20 insertions(+), 14 deletions(-)
 create mode 100644 packages/website/src/components/editor/config.ts

diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
index b972b1a5e35..0c8f7540409 100644
--- a/packages/website/src/components/editor/LoadedEditor.tsx
+++ b/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);
diff --git a/packages/website/src/components/editor/config.ts b/packages/website/src/components/editor/config.ts
new file mode 100644
index 00000000000..82486e62548
--- /dev/null
+++ b/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,
+  };
+}
diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts
index 698f136a9c3..b6014a8312a 100644
--- a/packages/website/src/components/editor/useSandboxServices.ts
+++ b/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: '',