feat: add tsconfig error

Author: developer-bandi

Diff for: 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 for: 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<UpdateModel>();
-  const [markers, setMarkers] = useState<ErrorGroup[]>();
+  const [markers, setMarkers] = useState<Record<TabType, ErrorGroup[]>>({
+    code: [],
+    eslintrc: [],
+    tsconfig: [],
+  });
   const [ruleNames, setRuleNames] = useState<RuleDetails[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [tsVersions, setTSVersion] = useState<readonly string[]>([]);
@@ -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 (
     <div className={styles.codeContainer}>
       <PanelGroup
@@ -166,8 +171,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}
@@ -217,7 +224,7 @@ function Playground(): React.JSX.Element {
                 />
               )
             ) : (
-              <ErrorsViewer value={markers} />
+              <ErrorsViewer value={markers[activeTab]} />
             )}
           </div>
         </Panel>

Diff for: packages/website/src/components/editor/LoadedEditor.tsx

@@ -84,11 +84,27 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
       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 for: 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<ConfigModel>) => void;
-  readonly onMarkersChange: (value: ErrorGroup[]) => void;
+  readonly onMarkersChange: React.Dispatch<
+    React.SetStateAction<Record<TabType, ErrorGroup[]>>
+  >;
   readonly onSelect: (position?: number) => void;
   readonly selectedRange?: SelectedRange;
 }

Diff for: 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<Record<TabType, ErrorGroup[]>>
+  >,
 ): 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),
+          };
+        });
+      }
     }
   };