typescript-eslint · bradzacher · Jun 13, 2022 · Jun 8, 2022 · Jun 8, 2022 · Jun 8, 2022
diff --git a/packages/website/src/components/config/utils.ts b/packages/website/src/components/config/utils.ts
@@ -34,12 +34,16 @@ export function parseESLintRC(code?: string): EslintRC {
 export function parseTSConfig(code?: string): TSConfig {
   if (code) {
     try {
-      const parsed: unknown = parse(code);
-      if (isRecord(parsed)) {
-        if ('compilerOptions' in parsed && isRecord(parsed.compilerOptions)) {
-          return parsed as TSConfig;
-        }
-        return { ...parsed, compilerOptions: {} };
+      const parsed = window.ts.parseConfigFileTextToJson(
+        '/tsconfig.json',
+        code,
+      );
+      if (parsed.error) {
+        // eslint-disable-next-line no-console
+        console.error(parsed.error);
+      }
+      if (isRecord(parsed.config)) {
+        return parsed.config as TSConfig;
       }
     } catch (e) {
       // eslint-disable-next-line no-console

diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
@@ -63,12 +63,12 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
       tsconfig: sandboxInstance.monaco.editor.createModel(
         tsconfig,
         'json',
-        sandboxInstance.monaco.Uri.file('./tsconfig.json'),
+        sandboxInstance.monaco.Uri.file('/tsconfig.json'),
       ),
       eslintrc: sandboxInstance.monaco.editor.createModel(
         eslintrc,
         'json',
-        sandboxInstance.monaco.Uri.file('./.eslintrc'),
+        sandboxInstance.monaco.Uri.file('/.eslintrc'),
       ),
     };
     tabsDefault.code.updateOptions({ tabSize: 2, insertSpaces: true });

diff --git a/packages/website/src/components/editor/config.ts b/packages/website/src/components/editor/config.ts
@@ -6,20 +6,31 @@ export function createCompilerOptions(
   jsx = false,
   tsConfig: Record<string, unknown> = {},
 ): Monaco.languages.typescript.CompilerOptions {
-  return {
-    noResolve: true,
-    // 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,
-    moduleResolution: undefined,
-    plugins: undefined,
-    typeRoots: undefined,
-    paths: undefined,
-    moduleDetection: undefined,
-    baseUrl: undefined,
-  };
+  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',
+      ...tsConfig,
+      jsx: jsx ? 'preserve' : undefined,
+      lib: Array.isArray(tsConfig.lib) ? tsConfig.lib : undefined,
+      moduleResolution: undefined,
+      plugins: undefined,
+      typeRoots: undefined,
+      paths: undefined,
+      moduleDetection: undefined,
+      baseUrl: undefined,
+    },
+    '/tsconfig.json',
+  );
+
+  const options = config.options as Monaco.languages.typescript.CompilerOptions;
+
+  if (!options.lib) {
+    options.lib = [window.ts.getDefaultLibFileName(options)];
+  }
+
+  return options;
 }
 
 export function getEslintSchema(

diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts
@@ -64,6 +64,7 @@ export const useSandboxServices = (
             formatOnType: true,
             wrappingIndent: 'same',
           },
+          acquireTypes: false,
           compilerOptions: compilerOptions,
           domID: editorEmbedId,
         };
@@ -77,19 +78,34 @@ export const useSandboxServices = (
           colorMode === 'dark' ? 'vs-dark' : 'vs-light',
         );
 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
-        const libs = ((window.ts as any).libs as string[]) ?? ['esnext'];
-
-        const libMap = await sandboxInstance.tsvfs.createDefaultMapFromCDN(
-          {
-            ...sandboxInstance.getCompilerOptions(),
-            lib: libs.filter(item => !item.includes('.')),
-          },
-          props.ts,
-          true,
-          window.ts,
-        );
-        const system = sandboxInstance.tsvfs.createSystem(libMap);
+        let libEntries: Map<string, string> | undefined;
+        const worker = await sandboxInstance.getWorkerProcess();
+        if (worker.getLibFiles) {
+          libEntries = new Map(
+            Object.entries((await worker.getLibFiles()) ?? {}).map(item => [
+              '/' + item[0],
+              item[1],
+            ]),
+          );
+        } else {
+          // for some older version of playground we do not have definitions available
+          libEntries = await sandboxInstance.tsvfs.createDefaultMapFromCDN(
+            {
+              lib: Array.from(window.ts.libMap.keys()),
+            },
+            props.ts,
+            true,
+            window.ts,
+          );
+          for (const pair of libEntries) {
+            sandboxInstance.languageServiceDefaults.addExtraLib(
+              pair[1],
+              'ts:' + pair[0],
+            );
+          }
+        }
+
+        const system = sandboxInstance.tsvfs.createSystem(libEntries);
 
         const webLinter = new WebLinter(system, compilerOptions, lintUtils);
 

diff --git a/packages/website/src/vendor/sandbox.d.ts b/packages/website/src/vendor/sandbox.d.ts
@@ -105,7 +105,8 @@ export declare const createTypeScriptSandbox: (
   };
   /** A list of TypeScript versions you can use with the TypeScript sandbox */
   supportedVersions: readonly [
-    '4.6.2',
+    '4.7.3',
+    '4.6.4',
     '4.5.5',
     '4.4.4',
     '4.3.5',

diff --git a/packages/website/src/vendor/tsWorker.d.ts b/packages/website/src/vendor/tsWorker.d.ts
@@ -89,6 +89,10 @@ export declare class TypeScriptWorker implements ts.LanguageServiceHost {
     formatOptions: ts.FormatCodeOptions,
   ): Promise<ReadonlyArray<ts.CodeFixAction>>;
   updateExtraLibs(extraLibs: IExtraLibs): void;
+  /**
+   * https://github.com/microsoft/TypeScript-Website/blob/246798df5013036bd9b4389932b642c20ab35deb/packages/playground-worker/types.d.ts#L48
+   */
+  getLibFiles(): Promise<Record<string, string>>;
 }
 export interface IExtraLib {
   content: string;

diff --git a/packages/website/typings/remark-docusaurus-tabs.d.ts b/packages/website/typings/remark-docusaurus-tabs.d.ts
@@ -1,5 +1,6 @@
 declare module 'remark-docusaurus-tabs' {
   import type { Plugin } from 'unified';
+
   const plugin: Plugin;
   export = plugin;
 }
diff --git a/packages/website/typings/typescript.d.ts b/packages/website/typings/typescript.d.ts
@@ -0,0 +1,13 @@
+import 'typescript';
+
+type StringMap = Map<string, string>;
+
+declare module 'typescript' {
+  /**
+   * Map of available libraries
+   *
+   * The key is the key used in compilerOptions.lib
+   * The value is the file name
+   */
+  const libMap: StringMap;
+}