From ac39c5f8a1f13a487de3e88d9e2c17157638c64a Mon Sep 17 00:00:00 2001 From: Armano Date: Wed, 8 Jun 2022 22:40:37 +0200 Subject: [PATCH 1/9] chore(website): [playground] correct issues with changing default libs in playground --- .../website/src/components/editor/LoadedEditor.tsx | 4 ++-- packages/website/src/components/editor/config.ts | 2 +- .../src/components/editor/useSandboxServices.ts | 11 ++++++++++- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx index 0269c62e7f5f..e2468308f666 100644 --- a/packages/website/src/components/editor/LoadedEditor.tsx +++ b/packages/website/src/components/editor/LoadedEditor.tsx @@ -64,12 +64,12 @@ export const LoadedEditor: React.FC = ({ tsconfig: sandboxInstance.monaco.editor.createModel( defaultTsConfig, 'json', - sandboxInstance.monaco.Uri.file('./tsconfig.json'), + sandboxInstance.monaco.Uri.file('/tsconfig.json'), ), eslintrc: sandboxInstance.monaco.editor.createModel( defaultEslintConfig, '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 index 679baa8a0f22..ec30d92575a7 100644 --- a/packages/website/src/components/editor/config.ts +++ b/packages/website/src/components/editor/config.ts @@ -7,7 +7,7 @@ export function createCompilerOptions( tsConfig: Record = {}, ): Monaco.languages.typescript.CompilerOptions { return { - noResolve: true, + lib: ['lib'], // 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, diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts index 1276fc38f87d..40f8b7e28d3a 100644 --- 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, }; @@ -78,7 +79,7 @@ export const useSandboxServices = ( ); // 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 libs = ((window.ts as any).libs as string[]) ?? ['lib', 'esnext']; const libMap = await sandboxInstance.tsvfs.createDefaultMapFromCDN( { @@ -89,6 +90,14 @@ export const useSandboxServices = ( true, window.ts, ); + + libMap.forEach((value, path) => { + sandboxInstance!.monaco.languages.typescript.typescriptDefaults.addExtraLib( + value, + path, + ); + }); + const system = sandboxInstance.tsvfs.createSystem(libMap); const webLinter = new WebLinter(system, compilerOptions, lintUtils); From 25d8f18d7e9d5c97275ad8dd7d1fe9c97a98bb3a Mon Sep 17 00:00:00 2001 From: Armano Date: Wed, 8 Jun 2022 22:55:01 +0200 Subject: [PATCH 2/9] chore(website): [playground] default lib to es6 + dom --- packages/website/src/components/editor/config.ts | 2 +- .../website/src/components/editor/useSandboxServices.ts | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/website/src/components/editor/config.ts b/packages/website/src/components/editor/config.ts index ec30d92575a7..e4e500aaf491 100644 --- a/packages/website/src/components/editor/config.ts +++ b/packages/website/src/components/editor/config.ts @@ -7,7 +7,7 @@ export function createCompilerOptions( tsConfig: Record = {}, ): Monaco.languages.typescript.CompilerOptions { return { - lib: ['lib'], + lib: ['es6', 'dom'], // 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, diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts index 40f8b7e28d3a..12a2aa4ed109 100644 --- a/packages/website/src/components/editor/useSandboxServices.ts +++ b/packages/website/src/components/editor/useSandboxServices.ts @@ -79,7 +79,11 @@ export const useSandboxServices = ( ); // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access - const libs = ((window.ts as any).libs as string[]) ?? ['lib', 'esnext']; + const libs = ((window.ts as any).libs as string[]) ?? [ + 'es6', + 'dom', + 'esnext', + ]; const libMap = await sandboxInstance.tsvfs.createDefaultMapFromCDN( { From 5e7745239471245fd8da347c8d4b05c5e94b1469 Mon Sep 17 00:00:00 2001 From: Armano Date: Thu, 9 Jun 2022 01:19:14 +0200 Subject: [PATCH 3/9] chore(website): [playground] further refine lib handling, and remove cdn call to retrieve them --- .../website/src/components/editor/config.ts | 15 +++++- .../components/editor/useSandboxServices.ts | 48 +++++++++---------- packages/website/src/vendor/sandbox.d.ts | 3 +- packages/website/src/vendor/tsWorker.d.ts | 4 ++ 4 files changed, 44 insertions(+), 26 deletions(-) diff --git a/packages/website/src/components/editor/config.ts b/packages/website/src/components/editor/config.ts index e4e500aaf491..18455cc43f81 100644 --- a/packages/website/src/components/editor/config.ts +++ b/packages/website/src/components/editor/config.ts @@ -2,17 +2,30 @@ import type Monaco from 'monaco-editor'; import type { JSONSchema4 } from '@typescript-eslint/utils/dist/json-schema'; import { getTypescriptOptions } from '../config/utils'; +type StringMap = Map; +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; +} + export function createCompilerOptions( jsx = false, tsConfig: Record = {}, ): Monaco.languages.typescript.CompilerOptions { + const libs = Array.isArray(tsConfig.lib) ? tsConfig.lib : ['es6', 'dom']; + return { - lib: ['es6', 'dom'], // 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, + lib: libs.map(item => window.ts.libMap.get(String(item)) ?? String(item)), }; } diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts index 12a2aa4ed109..a6001f47b05a 100644 --- a/packages/website/src/components/editor/useSandboxServices.ts +++ b/packages/website/src/components/editor/useSandboxServices.ts @@ -78,31 +78,31 @@ 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[]) ?? [ - 'es6', - 'dom', - 'esnext', - ]; - - const libMap = await sandboxInstance.tsvfs.createDefaultMapFromCDN( - { - ...sandboxInstance.getCompilerOptions(), - lib: libs.filter(item => !item.includes('.')), - }, - props.ts, - true, - window.ts, - ); - - libMap.forEach((value, path) => { - sandboxInstance!.monaco.languages.typescript.typescriptDefaults.addExtraLib( - value, - path, + let libEntries: Map | undefined; + const worker = await sandboxInstance.getWorkerProcess(); + if (worker.getLibFiles) { + libEntries = new Map( + Object.entries((await worker.getLibFiles?.()) ?? {}), ); - }); - - const system = sandboxInstance.tsvfs.createSystem(libMap); + } else { + // for some older version of playground we do not have definitions available + libEntries = await sandboxInstance.tsvfs.createDefaultMapFromCDN( + { + lib: ['es6', 'dom'], + }, + props.ts, + true, + window.ts, + ); + libEntries.forEach((value, path) => { + sandboxInstance!.monaco.languages.typescript.typescriptDefaults.addExtraLib( + value, + path, + ); + }); + } + + const system = sandboxInstance.tsvfs.createSystem(new Map(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 index 4b3ba86d8aae..0bd3ecc2d259 100644 --- 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 index eaa5dd5cabb1..801ea3e43b44 100644 --- 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>; updateExtraLibs(extraLibs: IExtraLibs): void; + /** + * https://github.com/microsoft/TypeScript-Website/blob/246798df5013036bd9b4389932b642c20ab35deb/packages/playground-worker/types.d.ts#L48 + */ + getLibFiles(): Promise>; } export interface IExtraLib { content: string; From 86e97b9d831a738995958dae64c11545c429e45b Mon Sep 17 00:00:00 2001 From: Armano Date: Thu, 9 Jun 2022 01:20:55 +0200 Subject: [PATCH 4/9] chore(website): [playground] remove unnecessary ?. --- packages/website/src/components/editor/useSandboxServices.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts index a6001f47b05a..f0d2d605f08f 100644 --- a/packages/website/src/components/editor/useSandboxServices.ts +++ b/packages/website/src/components/editor/useSandboxServices.ts @@ -82,7 +82,7 @@ export const useSandboxServices = ( const worker = await sandboxInstance.getWorkerProcess(); if (worker.getLibFiles) { libEntries = new Map( - Object.entries((await worker.getLibFiles?.()) ?? {}), + Object.entries((await worker.getLibFiles()) ?? {}), ); } else { // for some older version of playground we do not have definitions available From 97266b03ec8a15e14ca2002cd02703e575608b95 Mon Sep 17 00:00:00 2001 From: Armano Date: Thu, 9 Jun 2022 02:25:56 +0200 Subject: [PATCH 5/9] chore(website): [playground] improve resolving default libs --- packages/website/src/components/editor/config.ts | 15 +++++++++++---- .../src/components/editor/useSandboxServices.ts | 11 +++++++---- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/packages/website/src/components/editor/config.ts b/packages/website/src/components/editor/config.ts index 18455cc43f81..c8a66dcbed24 100644 --- a/packages/website/src/components/editor/config.ts +++ b/packages/website/src/components/editor/config.ts @@ -17,16 +17,23 @@ export function createCompilerOptions( jsx = false, tsConfig: Record = {}, ): Monaco.languages.typescript.CompilerOptions { - const libs = Array.isArray(tsConfig.lib) ? tsConfig.lib : ['es6', 'dom']; - - return { + const config: Monaco.languages.typescript.CompilerOptions = { // 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, - lib: libs.map(item => window.ts.libMap.get(String(item)) ?? String(item)), }; + + const libs = Array.isArray(tsConfig.lib) + ? tsConfig.lib + : ['/' + window.ts.getDefaultLibFileName(config)]; + + config.lib = libs.map( + item => window.ts.libMap.get(String(item)) ?? String(item), + ); + + return config; } export function getEslintSchema( diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts index f0d2d605f08f..caa4bdc4b5fe 100644 --- a/packages/website/src/components/editor/useSandboxServices.ts +++ b/packages/website/src/components/editor/useSandboxServices.ts @@ -82,15 +82,18 @@ export const useSandboxServices = ( const worker = await sandboxInstance.getWorkerProcess(); if (worker.getLibFiles) { libEntries = new Map( - Object.entries((await worker.getLibFiles()) ?? {}), + 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: ['es6', 'dom'], + lib: Array.from(window.ts.libMap.keys()), }, - props.ts, + window.ts.version, true, window.ts, ); @@ -102,7 +105,7 @@ export const useSandboxServices = ( }); } - const system = sandboxInstance.tsvfs.createSystem(new Map(libEntries)); + const system = sandboxInstance.tsvfs.createSystem(libEntries); const webLinter = new WebLinter(system, compilerOptions, lintUtils); From 3cf6e47b485f1892b7693ba9f351c52949d1eb85 Mon Sep 17 00:00:00 2001 From: Armano Date: Thu, 9 Jun 2022 02:29:53 +0200 Subject: [PATCH 6/9] chore(website): [playground] revert incorrect change --- packages/website/src/components/editor/useSandboxServices.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts index caa4bdc4b5fe..a4efbf89e690 100644 --- a/packages/website/src/components/editor/useSandboxServices.ts +++ b/packages/website/src/components/editor/useSandboxServices.ts @@ -93,7 +93,7 @@ export const useSandboxServices = ( { lib: Array.from(window.ts.libMap.keys()), }, - window.ts.version, + props.ts, true, window.ts, ); From 6ac8fbb1754486c668e748d8aa1a5b7bd9dd5ade Mon Sep 17 00:00:00 2001 From: Armano Date: Thu, 9 Jun 2022 20:58:02 +0200 Subject: [PATCH 7/9] chore(website): [playground] move module augmentation to typings --- packages/website/src/components/editor/config.ts | 11 ----------- .../website/typings/remark-docusaurus-tabs.d.ts | 1 + packages/website/typings/typescript.d.ts | 13 +++++++++++++ 3 files changed, 14 insertions(+), 11 deletions(-) create mode 100644 packages/website/typings/typescript.d.ts diff --git a/packages/website/src/components/editor/config.ts b/packages/website/src/components/editor/config.ts index c8a66dcbed24..ed00b37421bc 100644 --- a/packages/website/src/components/editor/config.ts +++ b/packages/website/src/components/editor/config.ts @@ -2,17 +2,6 @@ import type Monaco from 'monaco-editor'; import type { JSONSchema4 } from '@typescript-eslint/utils/dist/json-schema'; import { getTypescriptOptions } from '../config/utils'; -type StringMap = Map; -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; -} - export function createCompilerOptions( jsx = false, tsConfig: Record = {}, diff --git a/packages/website/typings/remark-docusaurus-tabs.d.ts b/packages/website/typings/remark-docusaurus-tabs.d.ts index 9dab9651dd63..a2fb12147cba 100644 --- 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 new file mode 100644 index 000000000000..7239e4ddcb5f --- /dev/null +++ b/packages/website/typings/typescript.d.ts @@ -0,0 +1,13 @@ +import 'typescript'; + +type StringMap = Map; + +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; +} From 49971354da28520820e8746daccc3a970387fd6a Mon Sep 17 00:00:00 2001 From: Armano Date: Fri, 10 Jun 2022 02:01:29 +0200 Subject: [PATCH 8/9] fix: improve default lib selection --- packages/website/src/components/editor/config.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/website/src/components/editor/config.ts b/packages/website/src/components/editor/config.ts index ed00b37421bc..4cf788afec7d 100644 --- a/packages/website/src/components/editor/config.ts +++ b/packages/website/src/components/editor/config.ts @@ -14,9 +14,7 @@ export function createCompilerOptions( jsx: jsx ? window.ts.JsxEmit.Preserve : window.ts.JsxEmit.None, }; - const libs = Array.isArray(tsConfig.lib) - ? tsConfig.lib - : ['/' + window.ts.getDefaultLibFileName(config)]; + const libs = Array.isArray(tsConfig.lib) ? tsConfig.lib : ['es6', 'dom']; config.lib = libs.map( item => window.ts.libMap.get(String(item)) ?? String(item), From ba22b890587bd85dec353f7804a3fabe622ed993 Mon Sep 17 00:00:00 2001 From: Armano Date: Fri, 10 Jun 2022 07:32:44 +0200 Subject: [PATCH 9/9] fix: use ts build-in config parsing --- .../website/src/components/config/utils.ts | 16 +++++--- .../website/src/components/editor/config.ts | 40 ++++++++++--------- .../components/editor/useSandboxServices.ts | 10 ++--- 3 files changed, 37 insertions(+), 29 deletions(-) diff --git a/packages/website/src/components/config/utils.ts b/packages/website/src/components/config/utils.ts index 749487ea1aab..d068f9e13ff5 100644 --- 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/config.ts b/packages/website/src/components/editor/config.ts index fe04b1446933..e2c5b7fe6bb0 100644 --- a/packages/website/src/components/editor/config.ts +++ b/packages/website/src/components/editor/config.ts @@ -6,27 +6,31 @@ export function createCompilerOptions( jsx = false, tsConfig: Record = {}, ): Monaco.languages.typescript.CompilerOptions { - const config: Monaco.languages.typescript.CompilerOptions = { - // 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 libs = Array.isArray(tsConfig.lib) ? tsConfig.lib : ['es6', 'dom']; + const options = config.options as Monaco.languages.typescript.CompilerOptions; - config.lib = libs.map( - item => window.ts.libMap.get(String(item)) ?? String(item), - ); + if (!options.lib) { + options.lib = [window.ts.getDefaultLibFileName(options)]; + } - return config; + return options; } export function getEslintSchema( diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts index a4efbf89e690..eb54143bad46 100644 --- a/packages/website/src/components/editor/useSandboxServices.ts +++ b/packages/website/src/components/editor/useSandboxServices.ts @@ -97,12 +97,12 @@ export const useSandboxServices = ( true, window.ts, ); - libEntries.forEach((value, path) => { - sandboxInstance!.monaco.languages.typescript.typescriptDefaults.addExtraLib( - value, - path, + for (const pair of libEntries) { + sandboxInstance.languageServiceDefaults.addExtraLib( + pair[1], + 'ts:' + pair[0], ); - }); + } } const system = sandboxInstance.tsvfs.createSystem(libEntries);