typescript-eslint · JoshuaKGoldberg · Mar 13, 2023 · Feb 23, 2023 · Feb 23, 2023 · Feb 23, 2023
diff --git a/packages/website-eslint/package.json b/packages/website-eslint/package.json
@@ -23,15 +23,16 @@
     "@rollup/plugin-commonjs": "^23.0.0",
     "@rollup/plugin-json": "^5.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-terser": "^0.4.0",
     "@rollup/pluginutils": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "5.54.0",
     "@typescript-eslint/parser": "5.54.0",
     "@typescript-eslint/scope-manager": "5.54.0",
     "@typescript-eslint/typescript-estree": "5.54.0",
     "@typescript-eslint/visitor-keys": "5.54.0",
     "eslint": "*",
+    "esquery": "*",
     "rollup": "^2.75.4",
-    "rollup-plugin-terser": "^7.0.2",
     "semver": "^7.3.7"
   }
 }
diff --git a/packages/website-eslint/rollup.config.js b/packages/website-eslint/rollup.config.js
@@ -1,7 +1,7 @@
 import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
 import resolve from '@rollup/plugin-node-resolve';
-import { terser } from 'rollup-plugin-terser';
+import terser from '@rollup/plugin-terser';
 
 const replace = require('./rollup-plugin/replace');
 
@@ -18,6 +18,14 @@ module.exports = {
   plugins: [
     terser({
       keep_classnames: true,
+      compress: {
+        global_defs: {
+          'process.platform': '"browser"',
+          'process.env.CI': 'undefined',
+          '@process.env.TSESTREE_SINGLE_RUN': 'undefined',
+          '@process.env.DEBUG': 'undefined',
+        },
+      },
     }),
     replace({
       // verbose: true,
@@ -108,6 +116,16 @@ module.exports = {
           test: /process\.env\.IGNORE_TEST_WIN32/u,
           replace: 'true',
         },
+        {
+          // replace all process.cwd with "/"
+          test: /process\.cwd\(\)/u,
+          replace: '"/"',
+        },
+        {
+          // replace all process.emitWarning with console.warn
+          test: /process.emitWarning/u,
+          replace: 'console.warn',
+        },
       ],
     }),
     resolve({

diff --git a/packages/website-eslint/src/linter/linter.js b/packages/website-eslint/src/linter/linter.js
@@ -1,6 +1,7 @@
 import 'vs/language/typescript/tsWorker';
 import { Linter } from 'eslint';
 import rules from '@typescript-eslint/eslint-plugin/dist/rules';
+import esquery from 'esquery';
 
 export function createLinter() {
   const linter = new Linter();
@@ -14,3 +15,5 @@ export { analyze } from '@typescript-eslint/scope-manager/dist/analyze';
 export { visitorKeys } from '@typescript-eslint/visitor-keys/dist/visitor-keys';
 export { astConverter } from '@typescript-eslint/typescript-estree/dist/ast-converter';
 export { getScriptKind } from '@typescript-eslint/typescript-estree/dist/create-program/getScriptKind';
+
+export { esquery };
diff --git a/packages/website-eslint/types/index.d.ts b/packages/website-eslint/types/index.d.ts
@@ -3,11 +3,13 @@ import type { TSESLint } from '@typescript-eslint/utils';
 import { analyze } from '@typescript-eslint/scope-manager/dist/analyze';
 import { astConverter } from '@typescript-eslint/typescript-estree/dist/ast-converter';
 import { getScriptKind } from '@typescript-eslint/typescript-estree/dist/create-program/getScriptKind';
+import esquery from 'esquery';
 
 export interface LintUtils {
   createLinter: () => TSESLint.Linter;
   analyze: typeof analyze;
   visitorKeys: TSESLint.SourceCode.VisitorKeys;
   astConverter: typeof astConverter;
   getScriptKind: typeof getScriptKind;
+  esquery: typeof esquery;
 }
diff --git a/packages/website/package.json b/packages/website/package.json
@@ -45,6 +45,7 @@
     "@axe-core/playwright": "^4.4.5",
     "@docusaurus/module-type-aliases": "~2.2.0",
     "@playwright/test": "^1.27.1",
+    "@types/esquery": "^1.0.2",
     "@types/react": "^18.0.9",
     "@types/react-helmet": "^6.1.5",
     "@types/react-router-dom": "^5.3.3",

diff --git a/packages/website/src/components/ASTViewerESTree.tsx b/packages/website/src/components/ASTViewerESTree.tsx
@@ -1,4 +1,5 @@
 import type { TSESTree } from '@typescript-eslint/utils';
+import type * as ESQuery from 'esquery';
 import React, { useMemo } from 'react';
 
 import ASTViewer from './ast/ASTViewer';
@@ -8,17 +9,34 @@ import type { ASTViewerBaseProps } from './ast/types';
 
 export interface ASTESTreeViewerProps extends ASTViewerBaseProps {
   readonly value: TSESTree.BaseNode;
+  readonly filter?: ESQuery.Selector;
+}
+
+function tryToApplyFilter<T extends TSESTree.BaseNode>(
+  value: T,
+  filter?: ESQuery.Selector,
+): T | T[] {
+  try {
+    if (window.esquery && filter) {
+      // @ts-expect-error - esquery requires js ast types
+      return window.esquery.match(value, filter);
+    }
+  } catch (e: unknown) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
+  return value;
 }
 
 export default function ASTViewerESTree({
   value,
   position,
   onSelectNode,
+  filter,
 }: ASTESTreeViewerProps): JSX.Element {
-  const model = useMemo(
-    () => serialize(value, createESTreeSerializer()),
-    [value],
-  );
+  const model = useMemo(() => {
+    return serialize(tryToApplyFilter(value, filter), createESTreeSerializer());
+  }, [value, filter]);
 
   return (
     <ASTViewer value={model} position={position} onSelectNode={onSelectNode} />

diff --git a/packages/website/src/components/ESQueryFilter.module.css b/packages/website/src/components/ESQueryFilter.module.css
@@ -0,0 +1,7 @@
+.searchContainer {
+  display: flex;
+  margin: 0 0 0.5rem 0;
+  position: sticky;
+  top: 0;
+  left: 0;
+}
diff --git a/packages/website/src/components/ESQueryFilter.tsx b/packages/website/src/components/ESQueryFilter.tsx
@@ -0,0 +1,39 @@
+import type { Selector } from 'esquery';
+import React, { useState } from 'react';
+
+import styles from './ESQueryFilter.module.css';
+import Text from './inputs/Text';
+
+export interface ESQueryFilterProps {
+  readonly onChange: (value: Selector) => void;
+  readonly onError: (value?: Error) => void;
+}
+
+export function ESQueryFilter({
+  onChange,
+  onError,
+}: ESQueryFilterProps): JSX.Element {
+  const [value, setValue] = useState('');
+  const changeEvent = (value: string): void => {
+    setValue(value);
+    try {
+      const queryParsed = window.esquery.parse(value);
+      onChange(queryParsed);
+      onError(undefined);
+    } catch (e: unknown) {
+      onError(e instanceof Error ? e : new Error(String(e)));
+    }
+  };
+
+  return (
+    <div className={styles.searchContainer}>
+      <Text
+        value={value}
+        type="search"
+        name="esquery"
+        onChange={changeEvent}
+        placeholder="ESQuery filter"
+      />
+    </div>
+  );
+}
diff --git a/packages/website/src/components/ErrorsViewer.module.css b/packages/website/src/components/ErrorsViewer.module.css
@@ -10,6 +10,7 @@
   font-feature-settings: 'liga' 0, 'calt' 0;
   box-sizing: border-box;
   margin: 0;
+  white-space: break-spaces;
 }
 
 .fixerContainer {

diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx
@@ -11,7 +11,19 @@ export interface ErrorsViewerProps {
   readonly value?: ErrorGroup[] | Error;
 }
 
-export interface ErrorBlockProps {
+export interface ErrorViewerProps {
+  readonly value: Error;
+  readonly title: string;
+  readonly type: AlertBlockProps['type'];
+}
+
+interface AlertBlockProps {
+  readonly type: 'danger' | 'warning' | 'note' | 'info' | 'success';
+  readonly children: React.ReactNode;
+  readonly fixer?: boolean;
+}
+
+interface ErrorBlockProps {
   readonly item: ErrorItem;
   readonly setIsLocked: (value: boolean) => void;
   readonly isLocked: boolean;
@@ -23,7 +35,9 @@ export interface FixButtonProps {
   readonly disabled: boolean;
 }
 
-function severityClass(severity: Monaco.MarkerSeverity): string {
+function severityClass(
+  severity: Monaco.MarkerSeverity,
+): AlertBlockProps['type'] {
   switch (severity) {
     case 8:
       return 'danger';
@@ -50,78 +64,92 @@ function FixButton(props: FixButtonProps): JSX.Element {
   );
 }
 
+function AlertBlock(props: AlertBlockProps): JSX.Element {
+  return (
+    <div className={`admonition alert alert--${props.type}`}>
+      <div className="admonition-content">{props.children}</div>
+    </div>
+  );
+}
+
 function ErrorBlock({
   item,
   setIsLocked,
   isLocked,
 }: ErrorBlockProps): JSX.Element {
   return (
-    <div className={`admonition alert alert--${severityClass(item.severity)}`}>
-      <div className="admonition-content">
-        <div className={clsx(!!item.fixer && styles.fixerContainer)}>
-          <div>
-            {item.message} {item.location}
-          </div>
-          {item.fixer && (
-            <FixButton
-              disabled={isLocked}
-              fix={item.fixer.fix}
-              setIsLocked={setIsLocked}
-            />
-          )}
+    <AlertBlock type={severityClass(item.severity)}>
+      <div className={clsx(!!item.fixer && styles.fixerContainer)}>
+        <div>
+          {item.message} {item.location}
         </div>
-        {item.suggestions.length > 0 && (
-          <div>
-            {item.suggestions.map((fixer, index) => (
-              <div
-                key={index}
-                className={clsx(styles.fixerContainer, styles.fixer)}
-              >
-                <span>&gt; {fixer.message}</span>
-                <FixButton
-                  disabled={isLocked}
-                  fix={fixer.fix}
-                  setIsLocked={setIsLocked}
-                />
-              </div>
-            ))}
-          </div>
+        {item.fixer && (
+          <FixButton
+            disabled={isLocked}
+            fix={item.fixer.fix}
+            setIsLocked={setIsLocked}
+          />
         )}
       </div>
-    </div>
+      {item.suggestions.length > 0 && (
+        <div>
+          {item.suggestions.map((fixer, index) => (
+            <div
+              key={index}
+              className={clsx(styles.fixerContainer, styles.fixer)}
+            >
+              <span>&gt; {fixer.message}</span>
+              <FixButton
+                disabled={isLocked}
+                fix={fixer.fix}
+                setIsLocked={setIsLocked}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </AlertBlock>
   );
 }
 
 function SuccessBlock(): JSX.Element {
   return (
-    <div className="admonition alert alert--success">
-      <div className="admonition-content">
-        <div className={styles.fixerContainer}>
-          <div>All is ok!</div>
-        </div>
+    <AlertBlock type="success">
+      <div className={styles.fixerContainer}>
+        <div>All is ok!</div>
       </div>
-    </div>
+    </AlertBlock>
   );
 }
 
-export default function ErrorsViewer({
+export function ErrorViewer({
   value,
-}: ErrorsViewerProps): JSX.Element {
+  title,
+  type,
+}: ErrorViewerProps): JSX.Element {
+  return (
+    <div className={styles.list}>
+      <div className="margin-top--md">
+        <AlertBlock type={type}>
+          <div className={styles.fixerContainer}>
+            <h4>{title}</h4>
+          </div>
+          {type === 'danger' ? value.stack : value.message}
+        </AlertBlock>
+      </div>
+    </div>
+  );
+}
+
+export function ErrorsViewer({ value }: ErrorsViewerProps): JSX.Element {
   const [isLocked, setIsLocked] = useState(false);
 
   useEffect(() => {
     setIsLocked(false);
   }, [value]);
 
   if (value && !Array.isArray(value)) {
-    return (
-      <div className={styles.list}>
-        <div className="margin-top--sm">
-          <h4>ESLint internal error</h4>
-          {value?.stack}
-        </div>
-      </div>
-    );
+    return <ErrorViewer type="danger" title="Internal error" value={value} />;
   }
 
   return (

diff --git a/packages/website/src/components/OptionsSelector.module.css b/packages/website/src/components/OptionsSelector.module.css
@@ -37,15 +37,17 @@
   font-weight: 500;
   font-family: inherit;
   border-radius: 6px;
-  -webkit-appearance: none;
+  appearance: none;
   color: var(--ifm-font-color-secondary);
   border: 1px solid var(--ifm-color-emphasis-100);
   background: var(--ifm-color-emphasis-200);
   transition: border 0.3s ease;
 }
+
 .optionInput::placeholder {
   color: var(--ifm-color-emphasis-700);
 }
+
 .optionInput:focus {
   outline: none;
   border-color: var(--ifm-color-primary);