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 { 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