May 26, 2022 · May 23, 2022 · May 23, 2022 · May 23, 2022 · May 24, 2022 · May 24, 2022
diff --git a/packages/website/data/sponsors.json b/packages/website/data/sponsors.json
    "totalDonations": 1500,
    "website": "https://www.mysportsinjury.co.uk"
  }
 ]
 ]
diff --git a/packages/website/src/components/ErrorsViewer.module.css b/packages/website/src/components/ErrorsViewer.module.css
 .list {
  font-family: var(--ifm-font-family-monospace);
  background: transparent;
  border: none;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0;
  font-feature-settings: 'liga' 0, 'calt' 0;
  box-sizing: border-box;
  white-space: break-spaces;
  margin: 0;
 }

 .fixer {
  margin: 0.5rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx
 import React, { useEffect, useMemo, useState } from 'react';
 import type Monaco from 'monaco-editor';
 import type { ErrorItem } from './types';

 import styles from './ErrorsViewer.module.css';

 export interface ErrorsViewerProps {
  readonly value?: ErrorItem[];
 }

 export interface ErrorBlockProps {
  readonly item: ErrorItem;
  readonly setIsLocked: (value: boolean) => void;
  readonly isLocked: boolean;
 }

 function severityClass(severity: Monaco.MarkerSeverity): string {
  switch (severity) {
    case 8:
      return 'danger';
    case 4:
      return 'caution';
    case 2:
      return 'note';
  }
  return 'info';
 }

 function groupErrorItems(items: ErrorItem[]): [string, ErrorItem[]][] {
  return Object.entries(
    items.reduce<Record<string, ErrorItem[]>>((acc, obj) => {
      if (!acc[obj.group]) {
        acc[obj.group] = [];
      }
      acc[obj.group].push(obj);
      return acc;
    }, {}),
  ).sort(([a], [b]) => a.localeCompare(b));
 }

 function ErrorBlock({
  item,
  setIsLocked,
  isLocked,
 }: ErrorBlockProps): JSX.Element {
  return (
    <div className={`admonition alert alert--${severityClass(item.severity)}`}>
      <div className="admonition-content">
        <div className="row row--no-gutters">
          <div className="col col--12">
            {item.message} {item.location}
          </div>
          {item.hasFixers && (
            <div className="col col--12">
              {item.fixers.map((fixer, index) => (
                <div key={index} className={styles.fixer}>
                  <span>&gt; {fixer.message}</span>
                  <button
                    className="button button--primary button--sm"
                    disabled={isLocked}
                    onClick={(): void => {
                      fixer.fix();
                      setIsLocked(true);
                    }}
                  >
                    fix
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
 }

 export default function ErrorsViewer({
  value,
 }: ErrorsViewerProps): JSX.Element {
  const model = useMemo(
    () => (value ? groupErrorItems(value) : undefined),
    [value],
  );

  const [isLocked, setIsLocked] = useState(false);

  useEffect(() => {
    setIsLocked(false);
  }, [value]);

  return (
    <div className={styles.list}>
      {model?.map(([group, data]) => {
        return (
          <div className="margin-top--sm" key={group}>
            <h4>{group}</h4>
            {data.map((item, index) => (
              <ErrorBlock
                isLocked={isLocked}
                setIsLocked={setIsLocked}
                item={item}
                key={index}
              />
            ))}
          </div>
        );
      })}
    </div>
  );
 }
diff --git a/packages/website/src/components/Playground.module.css b/packages/website/src/components/Playground.module.css
  border: 1px solid var(--ifm-color-emphasis-100);
 }

 .sourceCodeStandalone {
  width: 100%;
 }

 .codeBlocks {
  display: flex;
  flex-direction: row;
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
 import type { TSESTree } from '@typescript-eslint/utils';
 import type { SourceFile } from 'typescript';
 import ASTViewerScope from '@site/src/components/ASTViewerScope';
 import ErrorsViewer from '@site/src/components/ErrorsViewer';

 function rangeReducer<T extends SelectedRange | null>(
  prevState: T,
  const [esAst, setEsAst] = useState<TSESTree.Program | string | null>();
  const [tsAst, setTsAST] = useState<SourceFile | string | null>();
  const [scope, setScope] = useState<Record<string, unknown> | string | null>();
  const [markers, setMarkers] = useState<Monaco.editor.IMarker[]>();
  const [ruleNames, setRuleNames] = useState<RuleDetails[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [tsVersions, setTSVersion] = useState<readonly string[]>([]);
        />
      </div>
      <div className={styles.codeBlocks}>
        <div
          className={clsx(
            styles.sourceCode,
            state.showAST ? '' : styles.sourceCodeStandalone,
          )}
        >
        <div className={clsx(styles.sourceCode)}>
          {isLoading && <Loader />}
          <EditorEmbed />
          <LoadingEditor
            onEsASTChange={setEsAst}
            onTsASTChange={setTsAST}
            onScopeChange={setScope}
            onMarkersChange={setMarkers}
            decoration={selectedRange}
            onChange={(code): void => setState({ code: code })}
            onLoaded={(ruleNames, tsVersions): void => {
            onSelect={setPosition}
          />
        </div>
        {state.showAST && (
          <div className={styles.astViewer}>
            {(tsAst && state.showAST === 'ts' && (
              <ASTViewerTS
                value={tsAst}
        <div className={styles.astViewer}>
          {(tsAst && state.showAST === 'ts' && (
            <ASTViewerTS
              value={tsAst}
              position={position}
              onSelectNode={setSelectedRange}
            />
          )) ||
            (state.showAST === 'scope' && scope && (
              <ASTViewerScope
                value={scope}
                position={position}
                onSelectNode={setSelectedRange}
              />
            )) ||
              (state.showAST === 'scope' && scope && (
                <ASTViewerScope
                  value={scope}
                  position={position}
                  onSelectNode={setSelectedRange}
                />
              )) ||
              (esAst && (
                <ASTViewerESTree
                  value={esAst}
                  position={position}
                  onSelectNode={setSelectedRange}
                />
              ))}
          </div>
        )}
            (state.showAST === 'es' && esAst && (
              <ASTViewerESTree
                value={esAst}
                position={position}
                onSelectNode={setSelectedRange}
              />
            )) || <ErrorsViewer value={markers} />}
        </div>
      </div>
    </div>
  );
diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
 import { debounce } from '../lib/debounce';
 import { lintCode, LintCodeAction } from '../linter/lintCode';
 import { createProvideCodeActions } from './createProvideCodeActions';
 import { parseMarkers } from '../linter/utils';

 export interface LoadedEditorProps extends CommonEditorProps {
  readonly main: typeof Monaco;
  onEsASTChange,
  onScopeChange,
  onTsASTChange,
  onMarkersChange,
  onChange,
  onSelect,
  rules,
  webLinter,
 }) => {
  const [decorations, setDecorations] = useState<string[]>([]);
  const fixes = useRef(new Map<string, LintCodeAction>()).current;
  const fixes = useRef(new Map<string, LintCodeAction[]>()).current;

  useEffect(() => {
    const config = {
          onChange(sandboxInstance.getModel().getValue());
        }, 500),
      ),
      sandboxInstance.monaco.editor.onDidChangeMarkers(() => {
        const markers = sandboxInstance.monaco.editor.getModelMarkers({});
        onMarkersChange(parseMarkers(markers, fixes, sandboxInstance.editor));
      }),
    ];

    return (): void => {
diff --git a/packages/website/src/components/editor/createProvideCodeActions.ts b/packages/website/src/components/editor/createProvideCodeActions.ts
 import { createURI } from '../linter/utils';

 export function createProvideCodeActions(
  fixes: Map<string, LintCodeAction>,
  fixes: Map<string, LintCodeAction[]>,
 ): Monaco.languages.CodeActionProvider {
  return {
    provideCodeActions(
      }
      const actions: Monaco.languages.CodeAction[] = [];
      for (const marker of context.markers) {
        constmessage = fixes.get(createURI(marker));
 if (message) {
        constmessages = fixes.get(createURI(marker)) ?? [];
 for (constmessage of messages) {
          const start = model.getPositionAt(message.fix.range[0]);
          const end = model.getPositionAt(message.fix.range[1]);
          actions.push({
diff --git a/packages/website/src/components/editor/types.ts b/packages/website/src/components/editor/types.ts
 import type Monaco from 'monaco-editor';
 import type { ConfigModel, SelectedRange } from '../types';
 import type { ConfigModel, SelectedRange, ErrorItem } from '../types';
 import type { TSESTree } from '@typescript-eslint/utils';
 import type { SourceFile } from 'typescript';

  readonly onTsASTChange: (value: string | SourceFile) => void;
  readonly onEsASTChange: (value: string | TSESTree.Program) => void;
  readonly onScopeChange: (value: string | Record<string, unknown>) => void;
  readonly onMarkersChange: (value: ErrorItem[]) => void;
  readonly onSelect: (position: Monaco.Position | null) => void;
 }
diff --git a/packages/website/src/components/linter/WebLinter.ts b/packages/website/src/components/linter/WebLinter.ts

    this.linter.defineParser(PARSER_NAME, {
      parseForESLint: (text, options?: ParserOptions) => {
        return this.eslintParse(text,compilerOptions,options);
        return this.eslintParse(text, options);
      },
    });


  eslintParse(
    code: string,
    compilerOptions: CompilerOptions,
    eslintOptions: ParserOptions = {},
  ): TSESLint.Linter.ESLintParseResult {
    const isJsx = eslintOptions?.ecmaFeatures?.jsx ?? false;

    const program = window.ts.createProgram(
      [fileName],
      compilerOptions,
 this.compilerOptions,
      this.host,
    );
    const tsAst = program.getSourceFile(fileName)!;
diff --git a/packages/website/src/components/linter/lintCode.ts b/packages/website/src/components/linter/lintCode.ts
  };
 }

 export type LintCodeActionGroup = [string, LintCodeAction];
 export type LintCodeActionGroup = [string, LintCodeAction[]];

 export function lintCode(
  linter: WebLinter,
    };
    const markerUri = createURI(marker);

    const fixes: LintCodeAction[] = [];
    if (message.fix) {
      codeActions.push([
        markerUri,
        {
          message: `Fix this ${message.ruleId ?? 'unknown'} problem`,
          fix: message.fix,
        },
      ]);
      fixes.push({
        message: `Fix this ${message.ruleId ?? 'unknown'} problem`,
        fix: message.fix,
      });
    }
    if (message.suggestions) {
      for (const suggestion of message.suggestions) {
        codeActions.push([
          markerUri,
          {
            message: `${suggestion.desc} (${message.ruleId ?? 'unknown'})`,
            fix: suggestion.fix,
          },
        ]);
        fixes.push({
          message: `${suggestion.desc} (${message.ruleId ?? 'unknown'})`,
          fix: suggestion.fix,
        });
      }
    }

    if (fixes.length > 0) {
      codeActions.push([markerUri, fixes]);
    }
    markers.push(marker);
  }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -229,4 +229,4 @@
		"totalDonations": 1500,
		"website": "https://www.mysportsinjury.co.uk"
		}
		]
		]
bradzacher marked this conversation as resolved. Show resolvedHide resolved
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,21 @@
		.list {
		font-family: var(--ifm-font-family-monospace);
		background: transparent;
		border: none;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		font-size: 13px;
		line-height: 18px;
		letter-spacing: 0;
		font-feature-settings: 'liga' 0, 'calt' 0;
		box-sizing: border-box;
		white-space: break-spaces;
		margin: 0;
		}

		.fixer {
		margin: 0.5rem 1.5rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,111 @@
		import React, { useEffect, useMemo, useState } from 'react';
		import type Monaco from 'monaco-editor';
		import type { ErrorItem } from './types';

		import styles from './ErrorsViewer.module.css';

		export interface ErrorsViewerProps {
		readonly value?: ErrorItem[];
		}

		export interface ErrorBlockProps {
		readonly item: ErrorItem;
		readonly setIsLocked: (value: boolean) => void;
		readonly isLocked: boolean;
		}

		function severityClass(severity: Monaco.MarkerSeverity): string {
		switch (severity) {
		case 8:
		return 'danger';
		case 4:
		return 'caution';
		case 2:
		return 'note';
		}
		return 'info';
		}

		function groupErrorItems(items: ErrorItem[]): [string, ErrorItem[]][] {
		return Object.entries(
		items.reduce<Record<string, ErrorItem[]>>((acc, obj) => {
		if (!acc[obj.group]) {
		acc[obj.group] = [];
		}
		acc[obj.group].push(obj);
		return acc;
		}, {}),
		).sort(([a], [b]) => a.localeCompare(b));
		}

		function ErrorBlock({
		item,
		setIsLocked,
		isLocked,
		}: ErrorBlockProps): JSX.Element {
		return (
		<div className={`admonition alert alert--${severityClass(item.severity)}`}>
		<div className="admonition-content">
		<div className="row row--no-gutters">
		<div className="col col--12">
		{item.message} {item.location}
		</div>
		{item.hasFixers && (
		<div className="col col--12">
		{item.fixers.map((fixer, index) => (
		<div key={index} className={styles.fixer}>
		<span>> {fixer.message}</span>
		<button
		className="button button--primary button--sm"
		disabled={isLocked}
		onClick={(): void => {
		fixer.fix();
		setIsLocked(true);
		}}
		>
		fix
		</button>
		</div>
		))}
		</div>
		)}
		</div>
		</div>
		</div>
		);
		}

		export default function ErrorsViewer({
		value,
		}: ErrorsViewerProps): JSX.Element {
		const model = useMemo(
		() => (value ? groupErrorItems(value) : undefined),
		[value],
		);

		const [isLocked, setIsLocked] = useState(false);

		useEffect(() => {
		setIsLocked(false);
		}, [value]);
armano2 marked this conversation as resolved. Show resolvedHide resolved

		return (
		<div className={styles.list}>
		{model?.map(([group, data]) => {
		return (
		<div className="margin-top--sm" key={group}>
		<h4>{group}</h4>
		{data.map((item, index) => (
		<ErrorBlock
		isLocked={isLocked}
		setIsLocked={setIsLocked}
		item={item}
		key={index}
		/>
		))}
		</div>
		);
		})}
		</div>
		);
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,10 +10,6 @@
		border: 1px solid var(--ifm-color-emphasis-100);
		}

		.sourceCodeStandalone {
		width: 100%;
		}

		.codeBlocks {
		display: flex;
		flex-direction: row;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,6 +20,7 @@ import type { RuleDetails, SelectedRange } from './types';
		import type { TSESTree } from '@typescript-eslint/utils';
		import type { SourceFile } from 'typescript';
		import ASTViewerScope from '@site/src/components/ASTViewerScope';
		import ErrorsViewer from '@site/src/components/ErrorsViewer';

		function rangeReducer<T extends SelectedRange \| null>(
		prevState: T,
Expand DownExpand Up		@@ -52,6 +53,7 @@ function Playground(): JSX.Element {
		const [esAst, setEsAst] = useState<TSESTree.Program \| string \| null>();
		const [tsAst, setTsAST] = useState<SourceFile \| string \| null>();
		const [scope, setScope] = useState<Record<string, unknown> \| string \| null>();
		const [markers, setMarkers] = useState<Monaco.editor.IMarker[]>();
		const [ruleNames, setRuleNames] = useState<RuleDetails[]>([]);
		const [isLoading, setIsLoading] = useState<boolean>(true);
		const [tsVersions, setTSVersion] = useState<readonly string[]>([]);
Expand All		@@ -70,12 +72,7 @@ function Playground(): JSX.Element {
		/>
		</div>
		<div className={styles.codeBlocks}>
		<div
		className={clsx(
		styles.sourceCode,
		state.showAST ? '' : styles.sourceCodeStandalone,
		)}
		>
		<div className={clsx(styles.sourceCode)}>
		{isLoading && <Loader />}
		<EditorEmbed />
		<LoadingEditor
Expand All		@@ -90,6 +87,7 @@ function Playground(): JSX.Element {
		onEsASTChange={setEsAst}
		onTsASTChange={setTsAST}
		onScopeChange={setScope}
		onMarkersChange={setMarkers}
		decoration={selectedRange}
		onChange={(code): void => setState({ code: code })}
		onLoaded={(ruleNames, tsVersions): void => {
Expand All		@@ -100,31 +98,29 @@ function Playground(): JSX.Element {
		onSelect={setPosition}
		/>
		</div>
		{state.showAST && (
		<div className={styles.astViewer}>
		{(tsAst && state.showAST === 'ts' && (
		<ASTViewerTS
		value={tsAst}
		<div className={styles.astViewer}>
		{(tsAst && state.showAST === 'ts' && (
		<ASTViewerTS
		value={tsAst}
		position={position}
		onSelectNode={setSelectedRange}
		/>
		)) \|\|
		(state.showAST === 'scope' && scope && (
		<ASTViewerScope
		value={scope}
		position={position}
		onSelectNode={setSelectedRange}
		/>
		)) \|\|
		(state.showAST === 'scope' && scope && (
		<ASTViewerScope
		value={scope}
		position={position}
		onSelectNode={setSelectedRange}
		/>
		)) \|\|
		(esAst && (
		<ASTViewerESTree
		value={esAst}
		position={position}
		onSelectNode={setSelectedRange}
		/>
		))}
		</div>
		)}
		(state.showAST === 'es' && esAst && (
		<ASTViewerESTree
		value={esAst}
		position={position}
		onSelectNode={setSelectedRange}
		/>
		)) \|\| <ErrorsViewer value={markers} />}
		</div>
		</div>
		</div>
		);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,6 +8,7 @@ import type { WebLinter } from '../linter/WebLinter';
		import { debounce } from '../lib/debounce';
		import { lintCode, LintCodeAction } from '../linter/lintCode';
		import { createProvideCodeActions } from './createProvideCodeActions';
		import { parseMarkers } from '../linter/utils';

		export interface LoadedEditorProps extends CommonEditorProps {
		readonly main: typeof Monaco;
Expand All		@@ -24,6 +25,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
		onEsASTChange,
		onScopeChange,
		onTsASTChange,
		onMarkersChange,
		onChange,
		onSelect,
		rules,
Expand All		@@ -34,7 +36,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
		webLinter,
		}) => {
		const [decorations, setDecorations] = useState<string[]>([]);
		const fixes = useRef(new Map<string, LintCodeAction>()).current;
		const fixes = useRef(new Map<string, LintCodeAction[]>()).current;

		useEffect(() => {
		const config = {
Expand DownExpand Up		@@ -112,6 +114,10 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
		onChange(sandboxInstance.getModel().getValue());
		}, 500),
		),
		sandboxInstance.monaco.editor.onDidChangeMarkers(() => {
		const markers = sandboxInstance.monaco.editor.getModelMarkers({});
		onMarkersChange(parseMarkers(markers, fixes, sandboxInstance.editor));
		}),
		];

		return (): void => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,7 +3,7 @@ import type { LintCodeAction } from '../linter/lintCode';
		import { createURI } from '../linter/utils';

		export function createProvideCodeActions(
		fixes: Map<string, LintCodeAction>,
		fixes: Map<string, LintCodeAction[]>,
		): Monaco.languages.CodeActionProvider {
		return {
		provideCodeActions(
Expand All		@@ -22,8 +22,8 @@ export function createProvideCodeActions(
		}
		const actions: Monaco.languages.CodeAction[] = [];
		for (const marker of context.markers) {
		constmessage = fixes.get(createURI(marker));
		if (message) {
		constmessages = fixes.get(createURI(marker)) ?? [];
		for (constmessage of messages) {
		const start = model.getPositionAt(message.fix.range[0]);
		const end = model.getPositionAt(message.fix.range[1]);
		actions.push({
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		import type Monaco from 'monaco-editor';
		import type { ConfigModel, SelectedRange } from '../types';
		import type { ConfigModel, SelectedRange, ErrorItem } from '../types';
		import type { TSESTree } from '@typescript-eslint/utils';
		import type { SourceFile } from 'typescript';

Expand All		@@ -10,5 +10,6 @@ export interface CommonEditorProps extends ConfigModel {
		readonly onTsASTChange: (value: string \| SourceFile) => void;
		readonly onEsASTChange: (value: string \| TSESTree.Program) => void;
		readonly onScopeChange: (value: string \| Record<string, unknown>) => void;
		readonly onMarkersChange: (value: ErrorItem[]) => void;
		readonly onSelect: (position: Monaco.Position \| null) => void;
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -40,7 +40,7 @@ export class WebLinter {

		this.linter.defineParser(PARSER_NAME, {
		parseForESLint: (text, options?: ParserOptions) => {
		return this.eslintParse(text,compilerOptions,options);
		return this.eslintParse(text, options);
		},
		});

Expand DownExpand Up		@@ -70,7 +70,6 @@ export class WebLinter {

		eslintParse(
		code: string,
		compilerOptions: CompilerOptions,
		eslintOptions: ParserOptions = {},
		): TSESLint.Linter.ESLintParseResult {
		const isJsx = eslintOptions?.ecmaFeatures?.jsx ?? false;
Expand All		@@ -80,7 +79,7 @@ export class WebLinter {

		const program = window.ts.createProgram(
		[fileName],
		compilerOptions,
		this.compilerOptions,
		this.host,
		);
		const tsAst = program.getSourceFile(fileName)!;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,7 +11,7 @@ export interface LintCodeAction {
		};
		}

		export type LintCodeActionGroup = [string, LintCodeAction];
		export type LintCodeActionGroup = [string, LintCodeAction[]];

		export function lintCode(
		linter: WebLinter,
Expand DownExpand Up		@@ -59,27 +59,24 @@ export function lintCode(
		};
		const markerUri = createURI(marker);

		const fixes: LintCodeAction[] = [];
		if (message.fix) {
		codeActions.push([
		markerUri,
		{
		message: `Fix this ${message.ruleId ?? 'unknown'} problem`,
		fix: message.fix,
		},
		]);
		fixes.push({
		message: `Fix this ${message.ruleId ?? 'unknown'} problem`,
		fix: message.fix,
		});
		}
		if (message.suggestions) {
		for (const suggestion of message.suggestions) {
		codeActions.push([
		markerUri,
		{
		message: `${suggestion.desc} (${message.ruleId ?? 'unknown'})`,
		fix: suggestion.fix,
		},
		]);
		fixes.push({
		message: `${suggestion.desc} (${message.ruleId ?? 'unknown'})`,
		fix: suggestion.fix,
		});
		}
		}

		if (fixes.length > 0) {
		codeActions.push([markerUri, fixes]);
		}
		markers.push(marker);
		}

Expand Down