From 5c65c43c3ba265f85249589bf5794c9affff9b0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=89=E1=85=A1=E1=86=BC?= =?UTF-8?q?=E1=84=83=E1=85=AE?= Date: Sun, 23 Mar 2025 23:54:41 +0900 Subject: [PATCH 1/4] WIP --- .../website/src/components/ErrorsViewer.tsx | 2 ++ .../website/src/components/Playground.tsx | 3 +- .../src/components/editor/LoadedEditor.tsx | 6 +++- .../components/editor/useSandboxServices.ts | 1 + .../src/components/linter/createLinter.ts | 29 +++++++++++++++++-- yarn.lock | 2 +- 6 files changed, 38 insertions(+), 5 deletions(-) diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx index b9f6528672be..fce769ae935e 100644 --- a/packages/website/src/components/ErrorsViewer.tsx +++ b/packages/website/src/components/ErrorsViewer.tsx @@ -133,6 +133,8 @@ export function ErrorViewer({ export function ErrorsViewer({ value }: ErrorsViewerProps): React.JSX.Element { const [isLocked, setIsLocked] = useState(false); + console.log(value); + useEffect(() => { setIsLocked(false); }, [value]); diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx index f0d16e744d0c..547572c4e07d 100644 --- a/packages/website/src/components/Playground.tsx +++ b/packages/website/src/components/Playground.tsx @@ -39,7 +39,7 @@ function Playground(): React.JSX.Element { const [tsVersions, setTSVersion] = useState([]); const [selectedRange, setSelectedRange] = useState(); const [position, setPosition] = useState(); - const [activeTab, setTab] = useState('code'); + const [activeTab, setTab] = useState('tsconfig'); const [esQueryError, setEsQueryError] = useState(); const [visualEslintRc, setVisualEslintRc] = useState(false); const [visualTSConfig, setVisualTSConfig] = useState(false); @@ -63,6 +63,7 @@ function Playground(): React.JSX.Element { [], ); + console.log(markers); const ActiveVisualEditor = !isLoading && { diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx index 0cc5dbe16299..a1f5c2a9de35 100644 --- a/packages/website/src/components/editor/LoadedEditor.tsx +++ b/packages/website/src/components/editor/LoadedEditor.tsx @@ -83,7 +83,11 @@ export const LoadedEditor: React.FC = ({ const markers = monaco.editor.getModelMarkers({ resource: model.uri, }); - onMarkersChange(parseMarkers(markers, codeActions, editor)); + + const test = parseMarkers(markers, codeActions, editor); + + console.log(test); + // onMarkersChange(parseMarkers(markers, codeActions, editor)); }, [codeActions, onMarkersChange, editor, monaco.editor]); useEffect(() => { diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts index d3a6e7fc00e3..f28548405e15 100644 --- a/packages/website/src/components/editor/useSandboxServices.ts +++ b/packages/website/src/components/editor/useSandboxServices.ts @@ -116,6 +116,7 @@ export const useSandboxServices = ( system, lintUtils, sandboxInstance.tsvfs, + props.onMarkersChange, ); onLoaded( diff --git a/packages/website/src/components/linter/createLinter.ts b/packages/website/src/components/linter/createLinter.ts index 78f001439d87..b53227318890 100644 --- a/packages/website/src/components/linter/createLinter.ts +++ b/packages/website/src/components/linter/createLinter.ts @@ -19,7 +19,7 @@ import { createEventsBinder } from '../lib/createEventsBinder'; import { parseESLintRC, parseTSConfig } from '../lib/parseConfig'; import { defaultEslintConfig, PARSER_NAME } from './config'; import { createParser } from './createParser'; - +import { ErrorGroup } from '../../../../website/src/components/types'; export interface CreateLinter { configs: string[]; onLint(cb: LinterOnLint): () => void; @@ -42,6 +42,7 @@ export function createLinter( system: PlaygroundSystem, webLinterModule: WebLinterModule, vfs: typeof tsvfs, + onMarkersChange: (value: ErrorGroup[]) => void, ): CreateLinter { const rules: CreateLinter['rules'] = new Map(); const configs = new Map(Object.entries(webLinterModule.configs)); @@ -160,7 +161,31 @@ export function createLinter( console.log('[Editor] Updating', fileName, compilerOptions); parser.updateConfig(compilerOptions); } catch (e) { - console.error(e); + const errors = { + group: 'Typescript', + items: e.message + .trim() + .split('\n') + .map((message: string) => { + return { + fixer: undefined, + location: '', + message, + severity: 8, + suggestions: [], + }; + }), + uri: undefined, + }; + + console.log(onMarkersChange); + console.log(errors); + + onMarkersChange([errors]); + + // const marker = + + // console.error("asdf",e); } }; diff --git a/yarn.lock b/yarn.lock index 70aa80576f21..f93427d7fcc4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20455,7 +20455,7 @@ __metadata: "typescript@patch:typescript@npm%3A5.8.2#~builtin": version: 5.8.2 - resolution: "typescript@patch:typescript@npm%3A5.8.2#~builtin::version=5.8.2&hash=b45daf" + resolution: "typescript@patch:typescript@npm%3A5.8.2#~builtin::version=5.8.2&hash=f3b441" bin: tsc: bin/tsc tsserver: bin/tsserver From f20593c83469dd5cf7a20be716f82d45ef23e388 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=89=E1=85=A1=E1=86=BC?= =?UTF-8?q?=E1=84=83=E1=85=AE?= Date: Thu, 27 Mar 2025 22:19:16 +0900 Subject: [PATCH 2/4] feat: add tsconfig error --- .../website/src/components/ErrorsViewer.tsx | 2 +- .../website/src/components/Playground.tsx | 17 +++-- .../src/components/editor/LoadedEditor.tsx | 24 +++++-- .../website/src/components/editor/types.ts | 4 +- .../src/components/linter/createLinter.ts | 66 +++++++++++-------- 5 files changed, 75 insertions(+), 38 deletions(-) diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx index fce769ae935e..54d9007020d3 100644 --- a/packages/website/src/components/ErrorsViewer.tsx +++ b/packages/website/src/components/ErrorsViewer.tsx @@ -6,7 +6,7 @@ import clsx from 'clsx'; import React, { useEffect, useState } from 'react'; import type { AlertBlockProps } from './layout/AlertBlock'; -import type { ErrorGroup, ErrorItem } from './types'; +import type { ErrorGroup, ErrorItem, TabType } from './types'; import styles from './ErrorsViewer.module.css'; import AlertBlock from './layout/AlertBlock'; diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx index 547572c4e07d..91b7be3a540b 100644 --- a/packages/website/src/components/Playground.tsx +++ b/packages/website/src/components/Playground.tsx @@ -33,7 +33,11 @@ function Playground(): React.JSX.Element { const windowSize = useWindowSize(); const [state, setState] = useHashState(defaultConfig); const [astModel, setAstModel] = useState(); - const [markers, setMarkers] = useState(); + const [markers, setMarkers] = useState>({ + code: [], + eslintrc: [], + tsconfig: [], + }); const [ruleNames, setRuleNames] = useState([]); const [isLoading, setIsLoading] = useState(true); const [tsVersions, setTSVersion] = useState([]); @@ -63,7 +67,6 @@ function Playground(): React.JSX.Element { [], ); - console.log(markers); const ActiveVisualEditor = !isLoading && { @@ -88,6 +91,8 @@ function Playground(): React.JSX.Element { } }, [windowSize]); + console.log(activeTab, markers); + return (
prev + cur.items.length, 0) || - 0, + markers[activeTab].reduce( + (prev, cur) => prev + cur.items.length, + 0, + ) || 0, }} change={showAST => setState({ showAST })} tabs={detailTabs} @@ -217,7 +224,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 a1f5c2a9de35..676a590720a1 100644 --- a/packages/website/src/components/editor/LoadedEditor.tsx +++ b/packages/website/src/components/editor/LoadedEditor.tsx @@ -84,11 +84,27 @@ export const LoadedEditor: React.FC = ({ resource: model.uri, }); - const test = parseMarkers(markers, codeActions, editor); + const errors = parseMarkers(markers, codeActions, editor); + + onMarkersChange(prev => { + const tsconfigError = + activeTab === 'tsconfig' && + Object.fromEntries(prev[activeTab].map(error => [error.group, error])) + .Typescript; + + if (!errors.length && tsconfigError) { + return { + ...prev, + [activeTab]: [tsconfigError], + }; + } - console.log(test); - // onMarkersChange(parseMarkers(markers, codeActions, editor)); - }, [codeActions, onMarkersChange, editor, monaco.editor]); + return { + ...prev, + [activeTab]: 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/linter/createLinter.ts b/packages/website/src/components/linter/createLinter.ts index b53227318890..30fad6378017 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, @@ -19,7 +23,7 @@ import { createEventsBinder } from '../lib/createEventsBinder'; import { parseESLintRC, parseTSConfig } from '../lib/parseConfig'; import { defaultEslintConfig, PARSER_NAME } from './config'; import { createParser } from './createParser'; -import { ErrorGroup } from '../../../../website/src/components/types'; + export interface CreateLinter { configs: string[]; onLint(cb: LinterOnLint): () => void; @@ -42,7 +46,9 @@ export function createLinter( system: PlaygroundSystem, webLinterModule: WebLinterModule, vfs: typeof tsvfs, - onMarkersChange: (value: ErrorGroup[]) => void, + onMarkersChange: React.Dispatch< + React.SetStateAction> + >, ): CreateLinter { const rules: CreateLinter['rules'] = new Map(); const configs = new Map(Object.entries(webLinterModule.configs)); @@ -161,31 +167,37 @@ export function createLinter( console.log('[Editor] Updating', fileName, compilerOptions); parser.updateConfig(compilerOptions); } catch (e) { - const errors = { - group: 'Typescript', - items: e.message - .trim() - .split('\n') - .map((message: string) => { - return { - fixer: undefined, - location: '', - message, - severity: 8, - suggestions: [], - }; - }), - uri: undefined, - }; - - console.log(onMarkersChange); - console.log(errors); - - onMarkersChange([errors]); - - // const marker = - - // console.error("asdf",e); + if (e instanceof Error) { + const error = { + group: 'Typescript', + items: e.message + .trim() + .split('\n') + .map((message: string) => { + return { + fixer: undefined, + location: '', + message, + severity: 8, + suggestions: [], + }; + }), + uri: undefined, + }; + + onMarkersChange(prev => { + const activeTabErrors = Object.fromEntries( + prev.tsconfig.map(error => [error.group, error]), + ); + + activeTabErrors.Typescript = error; + + return { + ...prev, + tsconfig: Object.values(activeTabErrors), + }; + }); + } } }; From a619ba6a72a112af5dc4bbc708f5c24771c6852e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=89=E1=85=A1=E1=86=BC?= =?UTF-8?q?=E1=84=83=E1=85=AE?= Date: Thu, 27 Mar 2025 22:27:16 +0900 Subject: [PATCH 3/4] fix: remove console.log & not use code --- packages/website/src/components/ErrorsViewer.tsx | 4 +--- packages/website/src/components/Playground.tsx | 4 +--- yarn.lock | 2 +- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx index 54d9007020d3..b9f6528672be 100644 --- a/packages/website/src/components/ErrorsViewer.tsx +++ b/packages/website/src/components/ErrorsViewer.tsx @@ -6,7 +6,7 @@ import clsx from 'clsx'; import React, { useEffect, useState } from 'react'; import type { AlertBlockProps } from './layout/AlertBlock'; -import type { ErrorGroup, ErrorItem, TabType } from './types'; +import type { ErrorGroup, ErrorItem } from './types'; import styles from './ErrorsViewer.module.css'; import AlertBlock from './layout/AlertBlock'; @@ -133,8 +133,6 @@ export function ErrorViewer({ export function ErrorsViewer({ value }: ErrorsViewerProps): React.JSX.Element { const [isLocked, setIsLocked] = useState(false); - console.log(value); - useEffect(() => { setIsLocked(false); }, [value]); diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx index 91b7be3a540b..42306e822430 100644 --- a/packages/website/src/components/Playground.tsx +++ b/packages/website/src/components/Playground.tsx @@ -43,7 +43,7 @@ function Playground(): React.JSX.Element { const [tsVersions, setTSVersion] = useState([]); const [selectedRange, setSelectedRange] = useState(); const [position, setPosition] = useState(); - const [activeTab, setTab] = useState('tsconfig'); + const [activeTab, setTab] = useState('code'); const [esQueryError, setEsQueryError] = useState(); const [visualEslintRc, setVisualEslintRc] = useState(false); const [visualTSConfig, setVisualTSConfig] = useState(false); @@ -91,8 +91,6 @@ function Playground(): React.JSX.Element { } }, [windowSize]); - console.log(activeTab, markers); - return (
": version: 5.8.2 - resolution: "typescript@patch:typescript@npm%3A5.8.2#~builtin::version=5.8.2&hash=f3b441" + resolution: "typescript@patch:typescript@npm%3A5.8.2#~builtin::version=5.8.2&hash=b45daf" bin: tsc: bin/tsc tsserver: bin/tsserver From eb539d9044975dd1437c3ce81cb35f3ed143eb78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=89=E1=85=A1=E1=86=BC?= =?UTF-8?q?=E1=84=83=E1=85=AE?= Date: Sat, 12 Apr 2025 18:52:15 +0900 Subject: [PATCH 4/4] fix: fix code review --- .../website/src/components/ErrorsViewer.tsx | 2 +- .../src/components/editor/LoadedEditor.tsx | 17 +++----- .../src/components/linter/createLinter.ts | 41 ++++++++++--------- packages/website/src/components/types.ts | 4 +- 4 files changed, 31 insertions(+), 33 deletions(-) diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx index b9f6528672be..b37597f69483 100644 --- a/packages/website/src/components/ErrorsViewer.tsx +++ b/packages/website/src/components/ErrorsViewer.tsx @@ -86,7 +86,7 @@ function ErrorBlock({ )}
- {item.suggestions.length > 0 && ( + {item.suggestions && item.suggestions.length > 0 && (
{item.suggestions.map((fixer, index) => (
= ({ const errors = parseMarkers(markers, codeActions, editor); onMarkersChange(prev => { - const tsconfigError = + const tsconfigErrors = activeTab === 'tsconfig' && - Object.fromEntries(prev[activeTab].map(error => [error.group, error])) - .Typescript; - - if (!errors.length && tsconfigError) { - return { - ...prev, - [activeTab]: [tsconfigError], - }; - } + !errors.length && + Object.values(prev[activeTab]).filter( + error => error.group === 'TypeScript', + ); return { ...prev, - [activeTab]: errors, + [activeTab]: tsconfigErrors || errors, }; }); }, [activeTab, codeActions, onMarkersChange, editor, monaco.editor]); diff --git a/packages/website/src/components/linter/createLinter.ts b/packages/website/src/components/linter/createLinter.ts index 30fad6378017..c396a4642e03 100644 --- a/packages/website/src/components/linter/createLinter.ts +++ b/packages/website/src/components/linter/createLinter.ts @@ -160,6 +160,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; @@ -168,36 +170,37 @@ export function createLinter( parser.updateConfig(compilerOptions); } catch (e) { if (e instanceof Error) { - const error = { - group: 'Typescript', + error = { + group: 'TypeScript', items: e.message .trim() .split('\n') .map((message: string) => { return { - fixer: undefined, - location: '', message, - severity: 8, - suggestions: [], + severity: 8, // MarkerSeverity.Error }; }), uri: undefined, }; - - onMarkersChange(prev => { - const activeTabErrors = Object.fromEntries( - prev.tsconfig.map(error => [error.group, error]), - ); - - activeTabErrors.Typescript = error; - - return { - ...prev, - tsconfig: Object.values(activeTabErrors), - }; - }); } + } 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 {