fix(website): propagate typescript options to eslint #4767

packages/website-eslint/package.json

@@ -20,10 +20,10 @@
     "@typescript-eslint/utils": "5.17.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/pluginutils": "^4.1.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/pluginutils": "^4.2.0",
     "@typescript-eslint/eslint-plugin": "5.17.0",
     "@typescript-eslint/parser": "5.17.0",
     "@typescript-eslint/scope-manager": "5.17.0",

packages/website-eslint/src/linter/linter.js

@@ -5,12 +5,14 @@ import rules from '@typescript-eslint/eslint-plugin/dist/rules';
 
 const PARSER_NAME = '@typescript-eslint/parser';
 
-export function loadLinter(libs, compilerOptions) {
+export function loadLinter(libs, options) {
   const linter = new Linter();
   let storedAST;
   let storedTsAST;
   let storedScope;
 
+  let compilerOptions = options;
+
   linter.defineParser(PARSER_NAME, {
     parseForESLint(code, eslintOptions) {
       const toParse = parseForESLint(
@@ -45,6 +47,12 @@ export function loadLinter(libs, compilerOptions) {
   return {
     ruleNames: ruleNames,
 
+    updateOptions(options) {
+      if (options) {
+        compilerOptions = Object.assign({}, compilerOptions, options);
+      }
+    },
+
     getScope() {
       return storedScope;
     },

packages/website-eslint/types/index.d.ts

@@ -13,6 +13,7 @@ export interface WebLinter {
   getAst(): TSESTree.Program;
   getTsAst(): SourceFile;
   getScope(): Record<string, unknown>;
+  updateOptions(options?: Record<string, unknown>): void;
 
   lint(
     code: string,

packages/website/src/components/editor/LoadedEditor.tsx

@@ -36,10 +36,27 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
   const [decorations, setDecorations] = useState<string[]>([]);
   const fixes = useRef(new Map<string, LintCodeAction>()).current;
 
+  useEffect(() => {
+    webLinter.updateOptions(tsConfig);
+    sandboxInstance.setCompilerSettings({
+      noResolve: true,
+      target: main.languages.typescript.ScriptTarget.ESNext,
+      module: main.languages.typescript.ModuleKind.ESNext,
+      ...tsConfig,
+      jsx: jsx ? main.languages.typescript.JsxEmit.React : undefined,
+    });
+  }, [
+    jsx,
+    sandboxInstance,
+    webLinter,
+    JSON.stringify(tsConfig) /* todo: better way? */,
+  ]);
+
   useEffect(
     debounce(() => {
       // eslint-disable-next-line no-console
       console.info('[Editor] linting triggered');
+
       const [markers, fatalMessage, codeActions] = lintCode(
         webLinter,
         code,
@@ -69,7 +86,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
       onScopeChange(fatalMessage ?? webLinter.getScope());
       onSelect(sandboxInstance.editor.getPosition());
     }, 500),
-    [code, jsx, sandboxInstance, rules, sourceType, webLinter],
+    [code, jsx, sandboxInstance, rules, sourceType, tsConfig, webLinter],
   );
 
   useEffect(() => {
@@ -137,17 +154,6 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
     sandboxInstance.monaco.editor.setTheme(darkTheme ? 'vs-dark' : 'vs-light');
   }, [darkTheme, sandboxInstance]);
 
-  useEffect(() => {
-    sandboxInstance.setCompilerSettings({
-      noResolve: true,
-      strict: true,
-      target: main.languages.typescript.ScriptTarget.ESNext,
-      module: main.languages.typescript.ModuleKind.ESNext,
-      ...tsConfig,
-      jsx: jsx ? main.languages.typescript.JsxEmit.React : undefined,
-    });
-  }, [jsx, sandboxInstance, JSON.stringify(tsConfig) /* todo: better way? */]);
-
   useEffect(() => {
     setDecorations(
       sandboxInstance.editor.deltaDecorations(

packages/website/src/components/editor/lintCode.ts

@@ -5,7 +5,7 @@ import { createURI, ensurePositiveInt } from './utils';
 export interface LintCodeAction {
   message: string;
   fix: {
-    range: [number, number];
+    range: Readonly<[number, number]>;
     text: string;
   };
 }

packages/website/src/components/editor/useSandboxServices.ts

@@ -48,12 +48,11 @@ export const useSandboxServices = (
 
     sandboxSingleton(props.ts)
       .then(async ({ main, sandboxFactory, ts, linter }) => {
-        const compilerOptions = {
+        const compilerOptions: Monaco.languages.typescript.CompilerOptions = {
           noResolve: true,
-          strict: true,
           target: main.languages.typescript.ScriptTarget.ESNext,
           jsx: props.jsx ? main.languages.typescript.JsxEmit.React : undefined,
-          lib: ['ESNext'],
+          lib: ['esnext'],
           module: main.languages.typescript.ModuleKind.ESNext,
         };
 

packages/website/src/components/types.ts

@@ -3,28 +3,7 @@ import type {
   RulesRecord,
 } from '@typescript-eslint/website-eslint';
 
-export interface CompilerFlags extends Record<string, unknown> {
-  isolatedModules?: boolean;
-  allowSyntheticDefaultImports?: boolean;
-  esModuleInterop?: boolean;
-  strict?: boolean;
-  noImplicitAny?: boolean;
-  strictNullChecks?: boolean;
-  strictFunctionTypes?: boolean;
-  strictBindCallApply?: boolean;
-  strictPropertyInitialization?: boolean;
-  noImplicitThis?: boolean;
-  alwaysStrict?: boolean;
-  noUnusedLocals?: boolean;
-  noUnusedParameters?: boolean;
-  noImplicitReturns?: boolean;
-  noFallthroughCasesInSwitch?: boolean;
-  allowUnusedLabels?: boolean;
-  allowUnreachableCode?: boolean;
-  experimentalDecorators?: boolean;
-  emitDecoratorMetadata?: boolean;
-  noLib?: boolean;
-}
+export type CompilerFlags = Record<string, unknown>;
 
 export type SourceType = ParserOptions['sourceType'];
 

packages/website/src/vendor/ds/createDesignSystem.d.ts

@@ -1,18 +1,19 @@
 import type { Sandbox } from '../sandbox';
 import type { DiagnosticRelatedInformation, Node } from 'typescript';
-export declare type LocalStorageOption = {
+
+export declare interface LocalStorageOption {
   blurb: string;
   flag: string;
   display: string;
   emptyImpliesEnabled?: true;
   oneline?: true;
   requireRestart?: true;
   onchange?: (newValue: boolean) => void;
-};
-export declare type OptionsListConfig = {
+}
+export declare interface OptionsListConfig {
   style: 'separated' | 'rows';
   requireRestart?: true;
-};
+}
 export declare type DesignSystem = ReturnType<
   ReturnType<typeof createDesignSystem>
 >;

packages/website/src/vendor/playground.d.ts

@@ -1,15 +1,15 @@
-declare type Sandbox = import('./sandbox').Sandbox;
-declare type Monaco = typeof import('monaco-editor');
 import { PluginUtils } from './pluginUtils';
 import type React from 'react';
 
+declare type Sandbox = import('./sandbox').Sandbox;
+declare type Monaco = typeof import('monaco-editor');
 export { PluginUtils } from './pluginUtils';
-export declare type PluginFactory = {
+export declare interface PluginFactory {
   (
     i: (key: string, components?: any) => string,
     utils: PluginUtils,
   ): PlaygroundPlugin;
-};
+}
 
 /** The interface of all sidebar plugins */
 export interface PlaygroundPlugin {
@@ -42,7 +42,6 @@ export interface PlaygroundPlugin {
   /** An object you can use to keep data around in the scope of your plugin object */
   data?: any;
 }
-
 interface PlaygroundConfig {
   /** Language like "en" / "ja" etc */
   lang: string;
@@ -53,7 +52,6 @@ interface PlaygroundConfig {
   /** Should this playground load up custom plugins from localStorage? */
   supportCustomPlugins: boolean;
 }
-
 export declare const setupPlayground: (
   sandbox: Sandbox,
   monaco: Monaco,
@@ -73,6 +71,7 @@ export declare const setupPlayground: (
     ) => boolean;
     openInTSAST: () => void;
     openInBugWorkbench: () => void;
+    openInVSCodeDev: () => void;
     exportAsTweet: () => void;
   };
   // ui: import("./createUI").UI;

packages/website/src/vendor/sandbox.d.ts

@@ -1,6 +1,5 @@
-import { TypeScriptWorker } from './tsWorker'; // import { TypeScriptWorker } from "./tsWorker";
+import { TypeScriptWorker } from './tsWorker';
 // import lzstring from "./vendor/lzstring.min";
-
 import * as tsvfs from './typescript-vfs';
 
 declare type CompilerOptions =
@@ -46,7 +45,6 @@ export declare type SandboxConfig = {
       elementToAppend: HTMLElement;
     }
 );
-
 /** The default settings which we apply a partial over */
 export declare function defaultPlaygroundSettings(): {
   /** The default source code for the playground */
@@ -79,7 +77,6 @@ export declare function defaultPlaygroundSettings(): {
 } & {
   domID: string;
 };
-
 /** Creates a sandbox editor, and returns a set of useful functions and the editor */
 export declare const createTypeScriptSandbox: (
   partialConfig: Partial<SandboxConfig>,
@@ -108,7 +105,8 @@ export declare const createTypeScriptSandbox: (
   };
   /** A list of TypeScript versions you can use with the TypeScript sandbox */
   supportedVersions: readonly [
-    '4.5.0-beta',
+    '4.6.2',
+    '4.5.5',
     '4.4.4',
     '4.3.5',
     '4.2.3',

packages/website/src/vendor/tsWorker.d.ts

@@ -1,132 +1,99 @@
-import ts from 'typescript';
+import * as ts from 'typescript';
 
 export declare class TypeScriptWorker implements ts.LanguageServiceHost {
   private _ctx;
   private _extraLibs;
   private _languageService;
   private _compilerOptions;
-
   constructor(ctx: any, createData: any);
-
   getCompilationSettings(): ts.CompilerOptions;
-
   getScriptFileNames(): string[];
-
   private _getModel;
-
   getScriptVersion(fileName: string): string;
-
   getScriptSnapshot(fileName: string): ts.IScriptSnapshot | undefined;
-
   getScriptKind?(fileName: string): ts.ScriptKind;
-
   getCurrentDirectory(): string;
-
   getDefaultLibFileName(options: ts.CompilerOptions): string;
-
   isDefaultLibFileName(fileName: string): boolean;
-
   private static clearFiles;
-
   getSyntacticDiagnostics(fileName: string): Promise<ts.Diagnostic[]>;
-
   getSemanticDiagnostics(fileName: string): Promise<ts.Diagnostic[]>;
-
   getSuggestionDiagnostics(
     fileName: string,
   ): Promise<ts.DiagnosticWithLocation[]>;
-
   getCompilerOptionsDiagnostics(fileName: string): Promise<ts.Diagnostic[]>;
-
   getCompletionsAtPosition(
     fileName: string,
     position: number,
   ): Promise<ts.CompletionInfo | undefined>;
-
   getCompletionEntryDetails(
     fileName: string,
     position: number,
     entry: string,
   ): Promise<ts.CompletionEntryDetails | undefined>;
-
   getSignatureHelpItems(
     fileName: string,
     position: number,
   ): Promise<ts.SignatureHelpItems | undefined>;
-
   getQuickInfoAtPosition(
     fileName: string,
     position: number,
   ): Promise<ts.QuickInfo | undefined>;
-
   getOccurrencesAtPosition(
     fileName: string,
     position: number,
   ): Promise<ReadonlyArray<ts.ReferenceEntry> | undefined>;
-
   getDefinitionAtPosition(
     fileName: string,
     position: number,
   ): Promise<ReadonlyArray<ts.DefinitionInfo> | undefined>;
-
   getReferencesAtPosition(
     fileName: string,
     position: number,
   ): Promise<ts.ReferenceEntry[] | undefined>;
-
   getNavigationBarItems(fileName: string): Promise<ts.NavigationBarItem[]>;
-
   getFormattingEditsForDocument(
     fileName: string,
     options: ts.FormatCodeOptions,
   ): Promise<ts.TextChange[]>;
-
   getFormattingEditsForRange(
     fileName: string,
     start: number,
     end: number,
     options: ts.FormatCodeOptions,
   ): Promise<ts.TextChange[]>;
-
   getFormattingEditsAfterKeystroke(
     fileName: string,
     postion: number,
     ch: string,
     options: ts.FormatCodeOptions,
   ): Promise<ts.TextChange[]>;
-
   findRenameLocations(
     fileName: string,
     positon: number,
     findInStrings: boolean,
     findInComments: boolean,
     providePrefixAndSuffixTextForRename: boolean,
   ): Promise<readonly ts.RenameLocation[] | undefined>;
-
   getRenameInfo(
     fileName: string,
     positon: number,
     options: ts.RenameInfoOptions,
   ): Promise<ts.RenameInfo>;
-
   getEmitOutput(fileName: string): Promise<ts.EmitOutput>;
-
   getCodeFixesAtPosition(
     fileName: string,
     start: number,
     end: number,
     errorCodes: number[],
     formatOptions: ts.FormatCodeOptions,
   ): Promise<ReadonlyArray<ts.CodeFixAction>>;
-
   updateExtraLibs(extraLibs: IExtraLibs): void;
 }
-
 export interface IExtraLib {
   content: string;
   version: number;
 }
-
 export interface IExtraLibs {
   [path: string]: IExtraLib;
 }