From 266c6bf18ba5e7ce0d532f7d32b5842dfdc9ae00 Mon Sep 17 00:00:00 2001 From: Armano Date: Fri, 1 Apr 2022 18:24:30 +0200 Subject: [PATCH 1/2] fix(website): propagate typescript options to eslint #4767 --- packages/website-eslint/package.json | 6 ++-- packages/website-eslint/src/linter/linter.js | 10 +++++- packages/website-eslint/types/index.d.ts | 1 + .../src/components/editor/LoadedEditor.tsx | 30 +++++++++------- .../website/src/components/editor/lintCode.ts | 2 +- .../components/editor/useSandboxServices.ts | 5 ++- packages/website/src/components/types.ts | 23 +----------- .../src/vendor/ds/createDesignSystem.d.ts | 9 ++--- packages/website/src/vendor/playground.d.ts | 11 +++--- packages/website/src/vendor/sandbox.d.ts | 8 ++--- packages/website/src/vendor/tsWorker.d.ts | 35 +------------------ .../website/src/vendor/typescript-vfs.d.ts | 8 ----- tools/generate-website-dts.ts | 16 +++------ yarn.lock | 6 ++-- 14 files changed, 56 insertions(+), 114 deletions(-) diff --git a/packages/website-eslint/package.json b/packages/website-eslint/package.json index 9fb83656e647..163ee3d2b680 100644 --- a/packages/website-eslint/package.json +++ b/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", diff --git a/packages/website-eslint/src/linter/linter.js b/packages/website-eslint/src/linter/linter.js index 6d88c341f9c0..55aff94f18b3 100644 --- a/packages/website-eslint/src/linter/linter.js +++ b/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; }, diff --git a/packages/website-eslint/types/index.d.ts b/packages/website-eslint/types/index.d.ts index 429de7388fa4..aa5a2a43ed7f 100644 --- a/packages/website-eslint/types/index.d.ts +++ b/packages/website-eslint/types/index.d.ts @@ -13,6 +13,7 @@ export interface WebLinter { getAst(): TSESTree.Program; getTsAst(): SourceFile; getScope(): Record; + updateOptions(options?: Record): void; lint( code: string, diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx index 880cf79a8a7a..b7721285f6c9 100644 --- a/packages/website/src/components/editor/LoadedEditor.tsx +++ b/packages/website/src/components/editor/LoadedEditor.tsx @@ -36,10 +36,27 @@ export const LoadedEditor: React.FC = ({ const [decorations, setDecorations] = useState([]); const fixes = useRef(new Map()).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 = ({ 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 = ({ 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( diff --git a/packages/website/src/components/editor/lintCode.ts b/packages/website/src/components/editor/lintCode.ts index dfbedbe13083..b601a6cdcb36 100644 --- a/packages/website/src/components/editor/lintCode.ts +++ b/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; }; } diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts index b64345124b87..9e07408cc3f8 100644 --- a/packages/website/src/components/editor/useSandboxServices.ts +++ b/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, }; diff --git a/packages/website/src/components/types.ts b/packages/website/src/components/types.ts index 5e1e3a721950..bb774a436f49 100644 --- a/packages/website/src/components/types.ts +++ b/packages/website/src/components/types.ts @@ -3,28 +3,7 @@ import type { RulesRecord, } from '@typescript-eslint/website-eslint'; -export interface CompilerFlags extends Record { - 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; export type SourceType = ParserOptions['sourceType']; diff --git a/packages/website/src/vendor/ds/createDesignSystem.d.ts b/packages/website/src/vendor/ds/createDesignSystem.d.ts index 542fd4712e42..7a506961350d 100644 --- a/packages/website/src/vendor/ds/createDesignSystem.d.ts +++ b/packages/website/src/vendor/ds/createDesignSystem.d.ts @@ -1,6 +1,7 @@ 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; @@ -8,11 +9,11 @@ export declare type LocalStorageOption = { 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 >; diff --git a/packages/website/src/vendor/playground.d.ts b/packages/website/src/vendor/playground.d.ts index 763a068e74c5..8de9141b6613 100644 --- a/packages/website/src/vendor/playground.d.ts +++ b/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; diff --git a/packages/website/src/vendor/sandbox.d.ts b/packages/website/src/vendor/sandbox.d.ts index 234696b77308..4b3ba86d8aae 100644 --- a/packages/website/src/vendor/sandbox.d.ts +++ b/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, @@ -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', diff --git a/packages/website/src/vendor/tsWorker.d.ts b/packages/website/src/vendor/tsWorker.d.ts index ab7099c30c7a..eaa5dd5cabb1 100644 --- a/packages/website/src/vendor/tsWorker.d.ts +++ b/packages/website/src/vendor/tsWorker.d.ts @@ -1,100 +1,73 @@ -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; - getSemanticDiagnostics(fileName: string): Promise; - getSuggestionDiagnostics( fileName: string, ): Promise; - getCompilerOptionsDiagnostics(fileName: string): Promise; - getCompletionsAtPosition( fileName: string, position: number, ): Promise; - getCompletionEntryDetails( fileName: string, position: number, entry: string, ): Promise; - getSignatureHelpItems( fileName: string, position: number, ): Promise; - getQuickInfoAtPosition( fileName: string, position: number, ): Promise; - getOccurrencesAtPosition( fileName: string, position: number, ): Promise | undefined>; - getDefinitionAtPosition( fileName: string, position: number, ): Promise | undefined>; - getReferencesAtPosition( fileName: string, position: number, ): Promise; - getNavigationBarItems(fileName: string): Promise; - getFormattingEditsForDocument( fileName: string, options: ts.FormatCodeOptions, ): Promise; - getFormattingEditsForRange( fileName: string, start: number, end: number, options: ts.FormatCodeOptions, ): Promise; - getFormattingEditsAfterKeystroke( fileName: string, postion: number, ch: string, options: ts.FormatCodeOptions, ): Promise; - findRenameLocations( fileName: string, positon: number, @@ -102,15 +75,12 @@ export declare class TypeScriptWorker implements ts.LanguageServiceHost { findInComments: boolean, providePrefixAndSuffixTextForRename: boolean, ): Promise; - getRenameInfo( fileName: string, positon: number, options: ts.RenameInfoOptions, ): Promise; - getEmitOutput(fileName: string): Promise; - getCodeFixesAtPosition( fileName: string, start: number, @@ -118,15 +88,12 @@ export declare class TypeScriptWorker implements ts.LanguageServiceHost { errorCodes: number[], formatOptions: ts.FormatCodeOptions, ): Promise>; - updateExtraLibs(extraLibs: IExtraLibs): void; } - export interface IExtraLib { content: string; version: number; } - export interface IExtraLibs { [path: string]: IExtraLib; } diff --git a/packages/website/src/vendor/typescript-vfs.d.ts b/packages/website/src/vendor/typescript-vfs.d.ts index 01cd017433e8..5a5db30651af 100644 --- a/packages/website/src/vendor/typescript-vfs.d.ts +++ b/packages/website/src/vendor/typescript-vfs.d.ts @@ -5,7 +5,6 @@ declare type LanguageServiceHost = import('typescript').LanguageServiceHost; declare type CompilerHost = import('typescript').CompilerHost; declare type SourceFile = import('typescript').SourceFile; declare type TS = typeof import('typescript'); - export interface VirtualTypeScriptEnvironment { sys: System; languageService: import('typescript').LanguageService; @@ -19,7 +18,6 @@ export interface VirtualTypeScriptEnvironment { replaceTextSpan?: import('typescript').TextSpan, ) => void; } - /** * Makes a virtual copy of the TypeScript environment. This is the main API you want to be using with * @typescript/vfs. A lot of the other exposed functions are used by this function to get set up. @@ -37,7 +35,6 @@ export declare function createVirtualTypeScriptEnvironment( compilerOptions?: CompilerOptions, customTransformers?: CustomTransformers, ): VirtualTypeScriptEnvironment; - /** * Grab the list of lib files for a particular target, will return a bit more than necessary (by including * the dom) but that's OK @@ -89,13 +86,11 @@ export declare const createDefaultMapFromCDN: ( fetcher?: typeof fetch | undefined, storer?: Storage | undefined, ) => Promise>; - /** * Creates an in-memory System object which can be used in a TypeScript program, this * is what provides read/write aspects of the virtual fs */ export declare function createSystem(files: Map): System; - /** * Creates a file-system backed System object which can be used in a TypeScript program, you provide * a set of virtual files which are prioritised over the FS versions, then a path to the root of your @@ -106,7 +101,6 @@ export declare function createFSBackedSystem( _projectRoot: string, ts: TS, ): System; - /** * Creates an in-memory CompilerHost -which is essentially an extra wrapper to System * which works with TypeScript objects - returns both a compiler host, and a way to add new SourceFile @@ -120,7 +114,6 @@ export declare function createVirtualCompilerHost( compilerHost: CompilerHost; updateFile: (sourceFile: SourceFile) => boolean; }; - /** * Creates an object which can host a language service against the virtual file-system */ @@ -134,5 +127,4 @@ export declare function createVirtualLanguageServiceHost( languageServiceHost: LanguageServiceHost; updateFile: (sourceFile: import('typescript').SourceFile) => void; }; - export {}; diff --git a/tools/generate-website-dts.ts b/tools/generate-website-dts.ts index 4a09e1b65263..0d9356a56aa9 100644 --- a/tools/generate-website-dts.ts +++ b/tools/generate-website-dts.ts @@ -77,18 +77,10 @@ async function main(): Promise { '/js/sandbox/index.d.ts', path.join(vendor, 'sandbox.d.ts'), text => { - const removeImports = text - .replace(/^import/g, '// import') - .replace(/\nimport/g, '\n// import'); - const replaceTSVFS = removeImports.replace( - '// import * as tsvfs from "./vendor/typescript-vfs"', - "\nimport * as tsvfs from './typescript-vfs'", - ); - const removedLZ = replaceTSVFS.replace( - 'lzstring: typeof lzstring', - '// lzstring: typeof lzstring', - ); - return 'import { TypeScriptWorker } from "./tsWorker";' + removedLZ; + return text + .replace(/import lzstring/g, '// import lzstring') + .replace('"./vendor/typescript-vfs"', "'./typescript-vfs'") + .replace('lzstring: typeof lzstring', '// lzstring: typeof lzstring'); }, ); diff --git a/yarn.lock b/yarn.lock index a86d7ab53d08..b576da812715 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3577,7 +3577,7 @@ resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1" integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g== -"@rollup/plugin-commonjs@^21.0.1": +"@rollup/plugin-commonjs@^21.0.3": version "21.0.3" resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-21.0.3.tgz#287896c64926ef3d7f0013708dcdcc1223576ef0" integrity sha512-ThGfwyvcLc6cfP/MWxA5ACF+LZCvsuhUq7V5134Az1oQWsiC7lNpLT4mJI86WQunK7BYmpUiHmMk2Op6OAHs0g== @@ -3597,7 +3597,7 @@ dependencies: "@rollup/pluginutils" "^3.0.8" -"@rollup/plugin-node-resolve@^13.0.6": +"@rollup/plugin-node-resolve@^13.1.3": version "13.1.3" resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.1.3.tgz#2ed277fb3ad98745424c1d2ba152484508a92d79" integrity sha512-BdxNk+LtmElRo5d06MGY4zoepyrXX1tkzX2hrnPEZ53k78GuOMWLqmJDGIIOPwVRIFZrLQOo+Yr6KtCuLIA0AQ== @@ -3618,7 +3618,7 @@ estree-walker "^1.0.1" picomatch "^2.2.2" -"@rollup/pluginutils@^4.1.1": +"@rollup/pluginutils@^4.2.0": version "4.2.0" resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.0.tgz#a14bbd058fdbba0a5647143b16ed0d86fb60bd08" integrity sha512-2WUyJNRkyH5p487pGnn4tWAsxhEFKN/pT8CMgHshd5H+IXkOnKvKZwsz5ZWz+YCXkleZRAU5kwbfgF8CPfDRqA== From 2ef3ff24fd859e64f90e2fd0f8447b822aa3f559 Mon Sep 17 00:00:00 2001 From: Armano Date: Fri, 1 Apr 2022 18:28:33 +0200 Subject: [PATCH 2/2] fix(website): reuse config provided to sandboxInstance in webLinter --- packages/website-eslint/src/linter/linter.js | 4 +--- packages/website/src/components/editor/LoadedEditor.tsx | 8 +++++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/website-eslint/src/linter/linter.js b/packages/website-eslint/src/linter/linter.js index 55aff94f18b3..06a4db0d3fb2 100644 --- a/packages/website-eslint/src/linter/linter.js +++ b/packages/website-eslint/src/linter/linter.js @@ -48,9 +48,7 @@ export function loadLinter(libs, options) { ruleNames: ruleNames, updateOptions(options) { - if (options) { - compilerOptions = Object.assign({}, compilerOptions, options); - } + compilerOptions = options || {}; }, getScope() { diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx index b7721285f6c9..9e4baa04da5b 100644 --- a/packages/website/src/components/editor/LoadedEditor.tsx +++ b/packages/website/src/components/editor/LoadedEditor.tsx @@ -37,14 +37,16 @@ export const LoadedEditor: React.FC = ({ const fixes = useRef(new Map()).current; useEffect(() => { - webLinter.updateOptions(tsConfig); - sandboxInstance.setCompilerSettings({ + 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, - }); + }; + + webLinter.updateOptions(config); + sandboxInstance.setCompilerSettings(config); }, [ jsx, sandboxInstance, pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy