{item.suggestions.map((fixer, index) => (

(); - const [markers, setMarkers] = useState(); + const [markers, setMarkers] = useState>({ + code: [], + eslintrc: [], + tsconfig: [], + }); const [ruleNames, setRuleNames] = useState([]); const [isLoading, setIsLoading] = useState(true); const [tsVersions, setTSVersion] = useState([]); @@ -165,8 +169,10 @@ function Playground(): React.JSX.Element { active={state.showAST ?? false} additionalTabsInfo={{ Errors: - markers?.reduce((prev, cur) => prev + cur.items.length, 0) || - 0, + markers[activeTab].reduce( + (prev, cur) => prev + cur.items.length, + 0, + ) || 0, }} change={showAST => setState({ showAST })} tabs={detailTabs} @@ -216,7 +222,7 @@ function Playground(): React.JSX.Element { /> ) ) : ( - + )}

diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx index 0cc5dbe16299..1b7937e5244a 100644 --- a/packages/website/src/components/editor/LoadedEditor.tsx +++ b/packages/website/src/components/editor/LoadedEditor.tsx @@ -83,8 +83,23 @@ export const LoadedEditor: React.FC = ({ const markers = monaco.editor.getModelMarkers({ resource: model.uri, }); - onMarkersChange(parseMarkers(markers, codeActions, editor)); - }, [codeActions, onMarkersChange, editor, monaco.editor]); + + const errors = parseMarkers(markers, codeActions, editor); + + onMarkersChange(prev => { + const tsconfigErrors = + activeTab === 'tsconfig' && + !errors.length && + Object.values(prev[activeTab]).filter( + error => error.group === 'TypeScript', + ); + + return { + ...prev, + [activeTab]: tsconfigErrors || errors, + }; + }); + }, [activeTab, codeActions, onMarkersChange, editor, monaco.editor]); useEffect(() => { webLinter.updateParserOptions(sourceType); diff --git a/packages/website/src/components/editor/types.ts b/packages/website/src/components/editor/types.ts index 3b8b41a67944..932f7cf5d9ad 100644 --- a/packages/website/src/components/editor/types.ts +++ b/packages/website/src/components/editor/types.ts @@ -5,7 +5,9 @@ export interface CommonEditorProps extends ConfigModel { readonly activeTab: TabType; readonly onASTChange: (value: UpdateModel | undefined) => void; readonly onChange: (cfg: Partial) => void; - readonly onMarkersChange: (value: ErrorGroup[]) => void; + readonly onMarkersChange: React.Dispatch< + React.SetStateAction> + >; readonly onSelect: (position?: number) => void; readonly selectedRange?: SelectedRange; } diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts index 9c2b2ff669e3..0e46551a2350 100644 --- a/packages/website/src/components/editor/useSandboxServices.ts +++ b/packages/website/src/components/editor/useSandboxServices.ts @@ -119,6 +119,7 @@ export const useSandboxServices = ( system, lintUtils, sandboxInstance.tsvfs, + props.onMarkersChange, ); onModelCreate.register(webLinter.registerFile); diff --git a/packages/website/src/components/linter/createLinter.ts b/packages/website/src/components/linter/createLinter.ts index 21620b6dd779..eefd1b0e4287 100644 --- a/packages/website/src/components/linter/createLinter.ts +++ b/packages/website/src/components/linter/createLinter.ts @@ -7,6 +7,10 @@ import type { } from '@typescript-eslint/utils/ts-eslint'; import type * as ts from 'typescript'; +import type { + ErrorGroup, + TabType, +} from '../../../../website/src/components/types'; import type { LinterOnLint, LinterOnParse, @@ -44,6 +48,9 @@ export function createLinter( system: PlaygroundSystem, webLinterModule: WebLinterModule, vfs: typeof tsvfs, + onMarkersChange: React.Dispatch< + React.SetStateAction> + >, ): CreateLinter { const rules: CreateLinter['rules'] = new Map(); const configs = new Map(Object.entries(webLinterModule.configs)); @@ -155,6 +162,8 @@ export function createLinter( }; const applyTSConfig = (fileName: string): void => { + let error: ErrorGroup | null = null; + try { const file = system.readFile(fileName) ?? '{}'; const parsed = parseTSConfig(file).compilerOptions; @@ -162,7 +171,38 @@ export function createLinter( console.log('[Editor] Updating', fileName, compilerOptions); parser.updateConfig(compilerOptions); } catch (e) { - console.error(e); + if (e instanceof Error) { + error = { + group: 'TypeScript', + items: e.message + .trim() + .split('\n') + .map((message: string) => { + return { + message, + severity: 8, // MarkerSeverity.Error + }; + }), + uri: undefined, + }; + } + } finally { + onMarkersChange(prev => { + const activeTabErrors = Object.fromEntries( + prev.tsconfig.map(error => [error.group, error]), + ); + + if (error) { + activeTabErrors.TypeScript = error; + } else { + delete activeTabErrors.TypeScript; + } + + return { + ...prev, + tsconfig: Object.values(activeTabErrors), + }; + }); } }; diff --git a/packages/website/src/components/types.ts b/packages/website/src/components/types.ts index 181e1e5de39b..7dc1e913b1f1 100644 --- a/packages/website/src/components/types.ts +++ b/packages/website/src/components/types.ts @@ -40,10 +40,10 @@ export type SelectedRange = [number, number]; export interface ErrorItem { fixer?: { fix(): void; message: string }; - location: string; + location?: string; message: string; severity: number; - suggestions: { fix(): void; message: string }[]; + suggestions?: { fix(): void; message: string }[]; } export interface ErrorGroup { 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: