From 4b73a9442fbcd244e9e85c462152f5d3b74a7c4c Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 25 May 2022 20:41:18 +0200
Subject: [PATCH 1/2] fix(website): pass user defined compilerOptions to linter

---
 packages/website/src/components/linter/WebLinter.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/website/src/components/linter/WebLinter.ts b/packages/website/src/components/linter/WebLinter.ts
index d3c045eaf427..9fbb58a456b3 100644
--- a/packages/website/src/components/linter/WebLinter.ts
+++ b/packages/website/src/components/linter/WebLinter.ts
@@ -40,7 +40,7 @@ export class WebLinter {
 
     this.linter.defineParser(PARSER_NAME, {
       parseForESLint: (text, options?: ParserOptions) => {
-        return this.eslintParse(text, compilerOptions, options);
+        return this.eslintParse(text, options);
       },
     });
 
@@ -70,7 +70,6 @@ export class WebLinter {
 
   eslintParse(
     code: string,
-    compilerOptions: CompilerOptions,
     eslintOptions: ParserOptions = {},
   ): TSESLint.Linter.ESLintParseResult {
     const isJsx = eslintOptions?.ecmaFeatures?.jsx ?? false;
@@ -80,7 +79,7 @@ export class WebLinter {
 
     const program = window.ts.createProgram(
       [fileName],
-      compilerOptions,
+      this.compilerOptions,
       this.host,
     );
     const tsAst = program.getSourceFile(fileName)!;

From 128debff5cbde051841c0d5413cfe2a9ec835194 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Thu, 26 May 2022 02:54:07 +0200
Subject: [PATCH 2/2] fix: normalize CompilerOptions defaults

---
 .../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 d6433bfaee50..d3ed7c4a90d2 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';
 
 export interface LoadedEditorProps extends CommonEditorProps {
   readonly main: typeof Monaco;
@@ -37,13 +38,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 000000000000..82486e625480
--- /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 698f136a9c3b..b6014a8312a1 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: '',