Jun 13, 2022 · Jun 8, 2022 · Jun 8, 2022 · Jun 8, 2022 · Jun 8, 2022 · Jun 9, 2022
diff --git a/packages/website/src/components/config/utils.ts b/packages/website/src/components/config/utils.ts
 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
      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
  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
            formatOnType: true,
            wrappingIndent: 'same',
          },
          acquireTypes: false,
          compilerOptions: compilerOptions,
          domID: editorEmbedId,
        };
          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
  };
  /** 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
    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
 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
 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;
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 });
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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(
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -64,6 +64,7 @@ export const useSandboxServices = (
		formatOnType: true,
		wrappingIndent: 'same',
		},
		acquireTypes: false,
armano2 marked this conversation as resolved. Show resolvedHide resolved
		compilerOptions: compilerOptions,
		domID: editorEmbedId,
		};
Expand All		@@ -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(
armano2 marked this conversation as resolved. Show resolvedHide resolved
		{
		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);

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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',
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,6 @@
		declare module 'remark-docusaurus-tabs' {
		import type { Plugin } from 'unified';

		const plugin: Plugin;
		export = plugin;
		}
Original file line number	Diff line number	Diff line change
		@@ -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;
		}