From 05a15846bc334ad7c2be72408eb260c9f91257a1 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 1 Dec 2021 05:27:44 +0100
Subject: [PATCH 01/14] docs(website): initial refactor of AstViewer

---
 .../src/components/Playground.module.css      |  2 +-
 .../website/src/components/Playground.tsx     | 24 +++++----
 .../src/components/ast/ASTViewer.module.css   | 22 +++++---
 .../website/src/components/ast/ASTViewer.tsx  | 21 ++++----
 .../website/src/components/ast/Elements.tsx   | 51 ++++++-------------
 .../src/components/ast/PropertyName.tsx       | 40 ++++++++++-----
 .../src/components/ast/PropertyValue.tsx      |  6 ++-
 .../website/src/components/ast/selection.ts   | 22 +++-----
 packages/website/src/components/ast/types.ts  | 11 ++--
 .../src/components/editor/LoadedEditor.tsx    |  9 ++--
 .../website/src/components/editor/types.ts    |  4 +-
 .../src/components/hooks/useHashState.ts      | 21 +-------
 .../src/components/lib/shallowEqual.ts        | 19 +++++++
 packages/website/src/components/types.ts      | 10 ++++
 14 files changed, 136 insertions(+), 126 deletions(-)
 create mode 100644 packages/website/src/components/lib/shallowEqual.ts

diff --git a/packages/website/src/components/Playground.module.css b/packages/website/src/components/Playground.module.css
index 6c5a9fdad71e..f1d78f13c6c4 100644
--- a/packages/website/src/components/Playground.module.css
+++ b/packages/website/src/components/Playground.module.css
@@ -25,8 +25,8 @@
   height: 100%;
   width: 50%;
   border: 1px solid var(--ifm-color-emphasis-100);
+  padding: 0;
   overflow: auto;
-  background: var(--ifm-background-surface-color);
   word-wrap: initial;
   white-space: nowrap;
   background: var(--code-editor-bg);
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index f0c7903e5f27..885ad1d10384 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -11,7 +11,9 @@ import OptionsSelector from './OptionsSelector';
 import ASTViewer from './ast/ASTViewer';
 import { LoadingEditor } from './editor/LoadingEditor';
 import { EditorEmbed } from './editor/EditorEmbed';
-import type { RuleDetails } from './types';
+import { shallowEqual } from './lib/shallowEqual';
+
+import type { RuleDetails, SelectedRange } from './types';
 
 import type { TSESTree } from '@typescript-eslint/website-eslint';
 
@@ -30,21 +32,23 @@ function Playground(): JSX.Element {
   const [ruleNames, setRuleNames] = useState<RuleDetails[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [tsVersions, setTSVersion] = useState<readonly string[]>([]);
-  const [selectedNode, setSelectedNode] = useState<TSESTree.Node | null>(null);
+  const [selectedRange, setSelectedRange] = useState<SelectedRange | null>(
+    null,
+  );
   const [position, setPosition] = useState<Monaco.Position | null>(null);
 
   const updateSelectedNode = useCallback(
-    (node: TSESTree.Node | null) => {
+    (value: SelectedRange | null) => {
       if (
-        !node ||
-        !selectedNode ||
-        selectedNode.range[0] !== node.range[0] ||
-        selectedNode.range[1] !== node.range[1]
+        !value ||
+        !selectedRange ||
+        !shallowEqual(selectedRange.start, value.start) ||
+        !shallowEqual(selectedRange.end, value.end)
       ) {
-        setSelectedNode(node);
+        setSelectedRange(value);
       }
     },
-    [selectedNode],
+    [selectedRange],
   );
 
   return (
@@ -77,7 +81,7 @@ function Playground(): JSX.Element {
             rules={state.rules}
             showAST={state.showAST}
             onASTChange={setAST}
-            decoration={selectedNode}
+            decoration={selectedRange}
             onChange={(code): void => setState({ code: code })}
             onLoaded={(ruleNames, tsVersions): void => {
               setRuleNames(ruleNames);
diff --git a/packages/website/src/components/ast/ASTViewer.module.css b/packages/website/src/components/ast/ASTViewer.module.css
index ebb4b3470dcb..3ec748bb3a9d 100644
--- a/packages/website/src/components/ast/ASTViewer.module.css
+++ b/packages/website/src/components/ast/ASTViewer.module.css
@@ -1,16 +1,23 @@
+.list,
+.subList,
+.clickable {
+  font-family: var(--ifm-font-family-monospace);
+  background: transparent;
+  border: none;
+  padding: 0;
+  font-weight: normal;
+  font-size: 13px;
+  line-height: 18px;
+  letter-spacing: 0;
+  font-feature-settings: 'liga' 0, 'calt' 0;
+}
+
 .list,
 .subList {
   cursor: default;
   box-sizing: border-box;
   margin: 0;
-  list-style: none;
   padding-left: 1.5rem;
-  font-family: Consolas, "Courier New", monospace;
-  font-weight: normal;
-  font-size: 13px;
-  font-feature-settings: "liga" 0, "calt" 0;
-  line-height: 18px;
-  letter-spacing: 0px;
 }
 
 .nonExpand,
@@ -73,6 +80,7 @@
 .clickable {
   cursor: pointer;
 }
+
 .clickable:hover {
   text-decoration: underline;
 }
diff --git a/packages/website/src/components/ast/ASTViewer.tsx b/packages/website/src/components/ast/ASTViewer.tsx
index 7c234f91a238..f6cb3852dd96 100644
--- a/packages/website/src/components/ast/ASTViewer.tsx
+++ b/packages/website/src/components/ast/ASTViewer.tsx
@@ -2,17 +2,20 @@ import React, { useEffect, useState } from 'react';
 import styles from './ASTViewer.module.css';
 
 import type { TSESTree } from '@typescript-eslint/website-eslint';
-import type { Position } from './types';
+import type { SelectedPosition, SelectedRange } from '../types';
 
 import { ElementObject } from './Elements';
 import type Monaco from 'monaco-editor';
+import { isRecord } from './selection';
 
-function ASTViewer(props: {
-  ast: TSESTree.Node | string;
+export interface ASTViewerProps {
+  ast: Record<string, unknown> | TSESTree.Node | string;
   position?: Monaco.Position | null;
-  onSelectNode: (node: TSESTree.Node | null) => void;
-}): JSX.Element {
-  const [selection, setSelection] = useState<Position | null>(() =>
+  onSelectNode: (node: SelectedRange | null) => void;
+}
+
+function ASTViewer(props: ASTViewerProps): JSX.Element {
+  const [selection, setSelection] = useState<SelectedPosition | null>(() =>
     props.position
       ? {
           line: props.position.lineNumber,
@@ -32,9 +35,7 @@ function ASTViewer(props: {
     );
   }, [props.position]);
 
-  return typeof props.ast === 'string' ? (
-    <div>{props.ast}</div>
-  ) : (
+  return isRecord(props.ast) ? (
     <div className={styles.list}>
       <ElementObject
         value={props.ast}
@@ -43,6 +44,8 @@ function ASTViewer(props: {
         onSelectNode={props.onSelectNode}
       />
     </div>
+  ) : (
+    <div>{props.ast}</div>
   );
 }
 
diff --git a/packages/website/src/components/ast/Elements.tsx b/packages/website/src/components/ast/Elements.tsx
index 9dba9eff491a..e92d74e5466b 100644
--- a/packages/website/src/components/ast/Elements.tsx
+++ b/packages/website/src/components/ast/Elements.tsx
@@ -1,13 +1,6 @@
-import React, {
-  SyntheticEvent,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 
-import type { TSESTree } from '@typescript-eslint/website-eslint';
 import type { GenericParams } from './types';
 
 import { scrollIntoViewIfNeeded } from '@site/src/components/lib/scroll-into';
@@ -89,7 +82,7 @@ export function ElementArray(props: GenericParams<unknown[]>): JSX.Element {
 }
 
 export function ElementObject(
-  props: GenericParams<TSESTree.Node | Record<string, unknown>>,
+  props: GenericParams<Record<string, unknown>>,
 ): JSX.Element {
   const [isExpanded, setIsExpanded] = useState<boolean>(() => {
     return isInRange(props.selection, props.value);
@@ -100,25 +93,17 @@ export function ElementObject(
   );
   const listItem = useRef<HTMLDivElement | null>(null);
 
-  const onMouseEnter = useCallback(
-    (e: SyntheticEvent) => {
-      if (isEsNode(props.value)) {
-        props.onSelectNode(props.value as TSESTree.Node);
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    },
-    [props.value],
-  );
+  const onMouseEnter = useCallback(() => {
+    if (isEsNode(props.value)) {
+      props.onSelectNode(props.value.loc);
+    }
+  }, [props.value]);
 
-  const onMouseLeave = useCallback(
-    (_e: SyntheticEvent) => {
-      if (isEsNode(props.value)) {
-        props.onSelectNode(null);
-      }
-    },
-    [props.value],
-  );
+  const onMouseLeave = useCallback(() => {
+    if (isEsNode(props.value)) {
+      props.onSelectNode(null);
+    }
+  }, [props.value]);
 
   useEffect(() => {
     const selected = isInRange(props.selection, props.value);
@@ -148,10 +133,10 @@ export function ElementObject(
         isExpanded ? '' : styles.open,
         isSelected ? styles.selected : '',
       )}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
     >
       <PropertyName
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
         propName={props.propName}
         name={props.value.type as string | undefined}
         onClick={(): void => setIsExpanded(!isExpanded)}
@@ -193,16 +178,12 @@ export function ElementItem(props: GenericParams<unknown>): JSX.Element {
         onSelectNode={props.onSelectNode}
       />
     );
-  } else if (
-    typeof props.value === 'object' &&
-    props.value &&
-    props.value.constructor === Object
-  ) {
+  } else if (isRecord(props.value)) {
     return (
       <ElementObject
         level={`${props.level}_${props.name}`}
         propName={props.name}
-        value={props.value as Record<string, unknown>}
+        value={props.value}
         selection={props.selection}
         onSelectNode={props.onSelectNode}
       />
diff --git a/packages/website/src/components/ast/PropertyName.tsx b/packages/website/src/components/ast/PropertyName.tsx
index f8768a6c4a2a..fa8614efe6c4 100644
--- a/packages/website/src/components/ast/PropertyName.tsx
+++ b/packages/website/src/components/ast/PropertyName.tsx
@@ -1,27 +1,39 @@
-import React, { SyntheticEvent } from 'react';
+import React, { MouseEvent } from 'react';
 import clsx from 'clsx';
 import styles from './ASTViewer.module.css';
 
-export default function PropertyName(props: {
-  name?: string;
-  propName?: string;
-  onClick?: (e: SyntheticEvent) => void;
-  onMouseEnter?: (e: SyntheticEvent) => void;
-}): JSX.Element {
+export interface PropertyNameProps {
+  readonly name?: string;
+  readonly propName?: string;
+  readonly onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+  readonly onMouseEnter?: (e: MouseEvent<HTMLButtonElement>) => void;
+  readonly onMouseLeave?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+
+export default function PropertyName(props: PropertyNameProps): JSX.Element {
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    <span onClick={props.onClick} onMouseEnter={props.onMouseEnter}>
+    <>
       {props.propName && (
-        <span className={clsx(styles.propName, styles.clickable)}>
+        <button
+          onMouseEnter={props.onMouseEnter}
+          onMouseLeave={props.onMouseLeave}
+          onClick={props.onClick}
+          className={clsx(styles.propName, styles.clickable)}
+        >
           {props.propName}
-        </span>
+        </button>
       )}
       {props.propName && <span>: </span>}
       {props.name && (
-        <span className={clsx(styles.tokenName, styles.clickable)}>
+        <button
+          onMouseEnter={props.onMouseEnter}
+          onMouseLeave={props.onMouseLeave}
+          onClick={props.onClick}
+          className={clsx(styles.tokenName, styles.clickable)}
+        >
           {props.name}
-        </span>
+        </button>
       )}
-    </span>
+    </>
   );
 }
diff --git a/packages/website/src/components/ast/PropertyValue.tsx b/packages/website/src/components/ast/PropertyValue.tsx
index 48f3ba119a68..3a22ca9010c2 100644
--- a/packages/website/src/components/ast/PropertyValue.tsx
+++ b/packages/website/src/components/ast/PropertyValue.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import styles from './ASTViewer.module.css';
 
-export default function PropertyValue(props: { value: unknown }): JSX.Element {
+export interface PropertyValueProps {
+  readonly value: unknown;
+}
+
+export default function PropertyValue(props: PropertyValueProps): JSX.Element {
   if (typeof props.value === 'string') {
     return (
       <span className={styles.propString}>{JSON.stringify(props.value)}</span>
diff --git a/packages/website/src/components/ast/selection.ts b/packages/website/src/components/ast/selection.ts
index 9a882d2bf9af..5f6e57efe5d2 100644
--- a/packages/website/src/components/ast/selection.ts
+++ b/packages/website/src/components/ast/selection.ts
@@ -1,26 +1,20 @@
 import type { TSESTree } from '@typescript-eslint/website-eslint';
-import type { Position } from './types';
+import type { SelectedPosition } from '../types';
 
 export const propsToFilter = ['parent', 'comments', 'tokens', 'loc'];
 
 export function filterRecord(
-  values: TSESTree.Node | Record<string, unknown>,
+  values: Record<string, unknown>,
 ): [string, unknown][] {
   return Object.entries(values).filter(
     item => !propsToFilter.includes(item[0]),
   );
 }
 
-export function isNode(node: unknown): node is TSESTree.Node {
-  return Boolean(
-    typeof node === 'object' && node && 'type' in node && 'loc' in node,
-  );
-}
-
 export function isWithinNode(
-  loc: Position,
-  start: Position,
-  end: Position,
+  loc: SelectedPosition,
+  start: SelectedPosition,
+  end: SelectedPosition,
 ): boolean {
   const canStart =
     start.line < loc.line ||
@@ -43,7 +37,7 @@ export function isEsNode(
 }
 
 export function isInRange(
-  position: Position | null | undefined,
+  position: SelectedPosition | null | undefined,
   value: unknown,
 ): boolean {
   return Boolean(
@@ -54,7 +48,7 @@ export function isInRange(
 }
 
 export function isArrayInRange(
-  position: Position | null | undefined,
+  position: SelectedPosition | null | undefined,
   value: unknown,
 ): boolean {
   return Boolean(
@@ -65,7 +59,7 @@ export function isArrayInRange(
 }
 
 export function hasChildInRange(
-  position: Position | null | undefined,
+  position: SelectedPosition | null | undefined,
   value: unknown,
 ): boolean {
   return Boolean(
diff --git a/packages/website/src/components/ast/types.ts b/packages/website/src/components/ast/types.ts
index 53a565599ab9..f7eb9de5e08c 100644
--- a/packages/website/src/components/ast/types.ts
+++ b/packages/website/src/components/ast/types.ts
@@ -1,15 +1,10 @@
-import type { TSESTree } from '@typescript-eslint/website-eslint';
-
-export interface Position {
-  line: number;
-  column: number;
-}
+import type { SelectedPosition, SelectedRange } from '../types';
 
 export interface GenericParams<V> {
   readonly propName?: string;
   readonly name?: string;
   readonly value: V;
   readonly level: string;
-  readonly selection?: Position | null;
-  readonly onSelectNode: (node: TSESTree.Node | null) => void;
+  readonly selection?: SelectedPosition | null;
+  readonly onSelectNode: (node: SelectedRange | null) => void;
 }
diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
index 309da95ad6fb..5faeb5c96067 100644
--- a/packages/website/src/components/editor/LoadedEditor.tsx
+++ b/packages/website/src/components/editor/LoadedEditor.tsx
@@ -11,7 +11,6 @@ import { createProvideCodeActions } from './createProvideCodeActions';
 
 export interface LoadedEditorProps extends CommonEditorProps {
   readonly main: typeof Monaco;
-  readonly onSelect: (position: Monaco.Position | null) => void;
   readonly sandboxInstance: SandboxInstance;
   readonly webLinter: WebLinter;
 }
@@ -149,10 +148,10 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
           ? [
               {
                 range: new sandboxInstance.monaco.Range(
-                  decoration.loc.start.line,
-                  decoration.loc.start.column + 1,
-                  decoration.loc.end.line,
-                  decoration.loc.end.column + 1,
+                  decoration.start.line,
+                  decoration.start.column + 1,
+                  decoration.end.line,
+                  decoration.end.column + 1,
                 ),
                 options: {
                   inlineClassName: 'myLineDecoration',
diff --git a/packages/website/src/components/editor/types.ts b/packages/website/src/components/editor/types.ts
index 6760c57f13d8..308400b15f8e 100644
--- a/packages/website/src/components/editor/types.ts
+++ b/packages/website/src/components/editor/types.ts
@@ -1,10 +1,10 @@
 import type Monaco from 'monaco-editor';
-import type { ConfigModel } from '../types';
+import type { ConfigModel, SelectedRange } from '../types';
 import type { TSESTree } from '@typescript-eslint/website-eslint';
 
 export interface CommonEditorProps extends ConfigModel {
   readonly darkTheme: boolean;
-  readonly decoration: TSESTree.Node | null;
+  readonly decoration: SelectedRange | null;
   readonly onChange: (value: string) => void;
   readonly onASTChange: (value: string | TSESTree.Program) => void;
   readonly onSelect: (position: Monaco.Position | null) => void;
diff --git a/packages/website/src/components/hooks/useHashState.ts b/packages/website/src/components/hooks/useHashState.ts
index d6a8e8cc8e91..b1263ce04ccb 100644
--- a/packages/website/src/components/hooks/useHashState.ts
+++ b/packages/website/src/components/hooks/useHashState.ts
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import type { CompilerFlags, ConfigModel, RulesRecord } from '../types';
 
 import * as lz from 'lzstring.ts';
+import { shallowEqual } from '../lib/shallowEqual';
 
 function writeQueryParam(value: string): string {
   return lz.LZString.compressToEncodedURIComponent(value);
@@ -76,26 +77,6 @@ const writeStateToUrl = (newState: ConfigModel): string => {
   return '';
 };
 
-function shallowEqual(
-  object1: Record<string, unknown> | ConfigModel | undefined,
-  object2: Record<string, unknown> | ConfigModel | undefined,
-): boolean {
-  if (object1 === object2) {
-    return true;
-  }
-  const keys1 = Object.keys(object1 ?? {});
-  const keys2 = Object.keys(object2 ?? {});
-  if (keys1.length !== keys2.length) {
-    return false;
-  }
-  for (const key of keys1) {
-    if (object1![key] !== object2![key]) {
-      return false;
-    }
-  }
-  return true;
-}
-
 function useHashState(
   initialState: ConfigModel,
 ): [ConfigModel, (cfg: Partial<ConfigModel>) => void] {
diff --git a/packages/website/src/components/lib/shallowEqual.ts b/packages/website/src/components/lib/shallowEqual.ts
new file mode 100644
index 000000000000..f1e26ede82d5
--- /dev/null
+++ b/packages/website/src/components/lib/shallowEqual.ts
@@ -0,0 +1,19 @@
+export function shallowEqual(
+  object1: object | undefined | null,
+  object2: object | undefined | null,
+): boolean {
+  if (object1 === object2) {
+    return true;
+  }
+  const keys1 = Object.keys(object1 ?? {});
+  const keys2 = Object.keys(object2 ?? {});
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  for (const key of keys1) {
+    if (object1![key] !== object2![key]) {
+      return false;
+    }
+  }
+  return true;
+}
diff --git a/packages/website/src/components/types.ts b/packages/website/src/components/types.ts
index 4d5d032db0fc..53a1f45d9728 100644
--- a/packages/website/src/components/types.ts
+++ b/packages/website/src/components/types.ts
@@ -44,3 +44,13 @@ export interface ConfigModel {
   ts: string;
   showAST?: boolean;
 }
+
+export interface SelectedPosition {
+  line: number;
+  column: number;
+}
+
+export interface SelectedRange {
+  start: SelectedPosition;
+  end: SelectedPosition;
+}

From 33fe86b053f3338ec8d781284d073e3642de844a Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 1 Dec 2021 06:31:21 +0100
Subject: [PATCH 02/14] docs(website): add simple ts ast viewer

---
 packages/website-eslint/src/linter/linter.js  |  6 ++++++
 packages/website-eslint/src/linter/parser.js  |  4 +++-
 packages/website-eslint/types/index.d.ts      |  1 +
 .../src/components/OptionsSelector.tsx        | 17 +++++++++++----
 .../website/src/components/Playground.tsx     | 21 +++++++++++--------
 .../src/components/ast/ASTViewer.module.css   | 10 +++++++++
 .../website/src/components/ast/ASTViewer.tsx  |  2 +-
 .../website/src/components/ast/Elements.tsx   | 11 +++++++---
 .../src/components/ast/PropertyValue.tsx      |  3 ++-
 .../website/src/components/ast/selection.ts   | 14 ++++++++++---
 packages/website/src/components/ast/types.ts  |  2 +-
 .../src/components/editor/LoadedEditor.tsx    |  6 ++++--
 .../website/src/components/editor/types.ts    |  3 ++-
 .../src/components/hooks/useHashState.ts      | 13 +++++++++++-
 packages/website/src/components/types.ts      |  2 +-
 15 files changed, 87 insertions(+), 28 deletions(-)

diff --git a/packages/website-eslint/src/linter/linter.js b/packages/website-eslint/src/linter/linter.js
index 4b798674eeb6..1643dcf2562f 100644
--- a/packages/website-eslint/src/linter/linter.js
+++ b/packages/website-eslint/src/linter/linter.js
@@ -8,11 +8,13 @@ const PARSER_NAME = '@typescript-eslint/parser';
 export function loadLinter() {
   const linter = new Linter();
   let storedAST;
+  let storedTsAST;
 
   linter.defineParser(PARSER_NAME, {
     parseForESLint(code, options) {
       const toParse = parseForESLint(code, options);
       storedAST = toParse.ast;
+      storedTsAST = toParse.tsAst;
       return toParse;
     }, // parse(code: string, options: ParserOptions): ParseForESLintResult['ast'] {
     //   const toParse = parseForESLint(code, options);
@@ -39,6 +41,10 @@ export function loadLinter() {
       return storedAST;
     },
 
+    getTsAst() {
+      return storedTsAST;
+    },
+
     lint(code, parserOptions, rules) {
       return linter.verify(code, {
         parser: PARSER_NAME,
diff --git a/packages/website-eslint/src/linter/parser.js b/packages/website-eslint/src/linter/parser.js
index 282f67c0da7a..41c0b24baf10 100644
--- a/packages/website-eslint/src/linter/parser.js
+++ b/packages/website-eslint/src/linter/parser.js
@@ -14,6 +14,7 @@ function parseAndGenerateServices(code, options) {
 
   return {
     ast: estree,
+    tsAst: ast,
     services: {
       hasFullTypeInformation: true,
       program,
@@ -24,7 +25,7 @@ function parseAndGenerateServices(code, options) {
 }
 
 export function parseForESLint(code, parserOptions) {
-  const { ast, services } = parseAndGenerateServices(code, {
+  const { ast, tsAst, services } = parseAndGenerateServices(code, {
     ...parserOptions,
     jsx: parserOptions.ecmaFeatures?.jsx ?? false,
     useJSXTextNode: true,
@@ -40,6 +41,7 @@ export function parseForESLint(code, parserOptions) {
 
   return {
     ast,
+    tsAst,
     services,
     scopeManager,
     visitorKeys,
diff --git a/packages/website-eslint/types/index.d.ts b/packages/website-eslint/types/index.d.ts
index eaa86160cba7..86e0c02eed6c 100644
--- a/packages/website-eslint/types/index.d.ts
+++ b/packages/website-eslint/types/index.d.ts
@@ -12,6 +12,7 @@ export interface WebLinter {
   ruleNames: { name: string; description?: string }[];
 
   getAst(): ESLintAST;
+  getTsAst(): Record<string, unknown>;
 
   lint(
     code: string,
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
index 71f83a95902a..4e58b9525b29 100644
--- a/packages/website/src/components/OptionsSelector.tsx
+++ b/packages/website/src/components/OptionsSelector.tsx
@@ -132,11 +132,20 @@ function OptionsSelector({
           />
         </label>
         <label className={styles.optionLabel}>
-          Show AST
+          Show Es AST
           <Checkbox
-            name="ast"
-            checked={state.showAST}
-            onChange={(e): void => setState({ showAST: e })}
+            name="es-ast"
+            checked={state.showAST === 'es' || state.showAST === true}
+            onChange={(e): void => setState({ showAST: e && 'es' })}
+            className={styles.optionCheckbox}
+          />
+        </label>
+        <label className={styles.optionLabel}>
+          Show Ts AST
+          <Checkbox
+            name="ts-ast"
+            checked={state.showAST === 'ts'}
+            onChange={(e): void => setState({ showAST: e && 'ts' })}
             className={styles.optionCheckbox}
           />
         </label>
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index 885ad1d10384..efc67bdb2787 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -28,7 +28,8 @@ function Playground(): JSX.Element {
     tsConfig: {},
   });
   const { isDarkTheme } = useThemeContext();
-  const [ast, setAST] = useState<TSESTree.Program | string | null>();
+  const [esAst, setEsAst] = useState<TSESTree.Program | string | null>();
+  const [tsAst, setTsAST] = useState<Record<string, unknown> | string | null>();
   const [ruleNames, setRuleNames] = useState<RuleDetails[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [tsVersions, setTSVersion] = useState<readonly string[]>([]);
@@ -80,7 +81,8 @@ function Playground(): JSX.Element {
             sourceType={state.sourceType}
             rules={state.rules}
             showAST={state.showAST}
-            onASTChange={setAST}
+            onEsASTChange={setEsAst}
+            onTsASTChange={setTsAST}
             decoration={selectedRange}
             onChange={(code): void => setState({ code: code })}
             onLoaded={(ruleNames, tsVersions): void => {
@@ -93,13 +95,14 @@ function Playground(): JSX.Element {
         </div>
         {state.showAST && (
           <div className={styles.astViewer}>
-            {ast && (
-              <ASTViewer
-                ast={ast}
-                position={position}
-                onSelectNode={updateSelectedNode}
-              />
-            )}
+            {(tsAst && state.showAST === 'ts' && <ASTViewer ast={tsAst} />) ||
+              (esAst && (
+                <ASTViewer
+                  ast={esAst}
+                  position={position}
+                  onSelectNode={updateSelectedNode}
+                />
+              ))}
           </div>
         )}
       </div>
diff --git a/packages/website/src/components/ast/ASTViewer.module.css b/packages/website/src/components/ast/ASTViewer.module.css
index 3ec748bb3a9d..5ccb2fdceaef 100644
--- a/packages/website/src/components/ast/ASTViewer.module.css
+++ b/packages/website/src/components/ast/ASTViewer.module.css
@@ -65,6 +65,10 @@
   color: #b58900;
 }
 
+.propClass {
+  color: #b58900;
+}
+
 .propBoolean {
   color: #b58900;
 }
@@ -75,6 +79,12 @@
 
 .hidden {
   color: var(--ifm-color-emphasis-400);
+  max-width: 40%;
+  overflow: hidden;
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
 }
 
 .clickable {
diff --git a/packages/website/src/components/ast/ASTViewer.tsx b/packages/website/src/components/ast/ASTViewer.tsx
index f6cb3852dd96..9b70185cd3fe 100644
--- a/packages/website/src/components/ast/ASTViewer.tsx
+++ b/packages/website/src/components/ast/ASTViewer.tsx
@@ -11,7 +11,7 @@ import { isRecord } from './selection';
 export interface ASTViewerProps {
   ast: Record<string, unknown> | TSESTree.Node | string;
   position?: Monaco.Position | null;
-  onSelectNode: (node: SelectedRange | null) => void;
+  onSelectNode?: (node: SelectedRange | null) => void;
 }
 
 function ASTViewer(props: ASTViewerProps): JSX.Element {
diff --git a/packages/website/src/components/ast/Elements.tsx b/packages/website/src/components/ast/Elements.tsx
index e92d74e5466b..ed0da6d65e7c 100644
--- a/packages/website/src/components/ast/Elements.tsx
+++ b/packages/website/src/components/ast/Elements.tsx
@@ -94,13 +94,13 @@ export function ElementObject(
   const listItem = useRef<HTMLDivElement | null>(null);
 
   const onMouseEnter = useCallback(() => {
-    if (isEsNode(props.value)) {
+    if (props.onSelectNode && isEsNode(props.value)) {
       props.onSelectNode(props.value.loc);
     }
   }, [props.value]);
 
   const onMouseLeave = useCallback(() => {
-    if (isEsNode(props.value)) {
+    if (props.onSelectNode && isEsNode(props.value)) {
       props.onSelectNode(null);
     }
   }, [props.value]);
@@ -138,7 +138,12 @@ export function ElementObject(
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         propName={props.propName}
-        name={props.value.type as string | undefined}
+        name={
+          // TODO: refactor this
+          ((props.value.type || String(props.value.kind)) as
+            | string
+            | undefined) ?? '_'
+        }
         onClick={(): void => setIsExpanded(!isExpanded)}
       />
       <span> {'{'}</span>
diff --git a/packages/website/src/components/ast/PropertyValue.tsx b/packages/website/src/components/ast/PropertyValue.tsx
index 3a22ca9010c2..23cbe7494e0f 100644
--- a/packages/website/src/components/ast/PropertyValue.tsx
+++ b/packages/website/src/components/ast/PropertyValue.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styles from './ASTViewer.module.css';
+import { objType } from './selection';
 
 export interface PropertyValueProps {
   readonly value: unknown;
@@ -25,5 +26,5 @@ export default function PropertyValue(props: PropertyValueProps): JSX.Element {
       </span>
     );
   }
-  return <span>{String(props.value)}</span>;
+  return <span className={styles.propClass}>{objType(props.value)}</span>;
 }
diff --git a/packages/website/src/components/ast/selection.ts b/packages/website/src/components/ast/selection.ts
index 5f6e57efe5d2..2093cb4926d2 100644
--- a/packages/website/src/components/ast/selection.ts
+++ b/packages/website/src/components/ast/selection.ts
@@ -24,10 +24,18 @@ export function isWithinNode(
   return canStart && canEnd;
 }
 
+export function objType(obj: unknown): string {
+  const type = Object.prototype.toString.call(obj).slice(8, -1);
+  // @ts-expect-error: this is correct check
+  if (type === 'Object' && obj && typeof obj[Symbol.iterator] === 'function') {
+    return 'Iterable';
+  }
+
+  return type;
+}
+
 export function isRecord(value: unknown): value is Record<string, unknown> {
-  return Boolean(
-    typeof value === 'object' && value && value.constructor === Object,
-  );
+  return objType(value) === 'Object';
 }
 
 export function isEsNode(
diff --git a/packages/website/src/components/ast/types.ts b/packages/website/src/components/ast/types.ts
index f7eb9de5e08c..ee675d442d1d 100644
--- a/packages/website/src/components/ast/types.ts
+++ b/packages/website/src/components/ast/types.ts
@@ -6,5 +6,5 @@ export interface GenericParams<V> {
   readonly value: V;
   readonly level: string;
   readonly selection?: SelectedPosition | null;
-  readonly onSelectNode: (node: SelectedRange | null) => void;
+  readonly onSelectNode?: (node: SelectedRange | null) => void;
 }
diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
index 5faeb5c96067..5a2180ba0fdc 100644
--- a/packages/website/src/components/editor/LoadedEditor.tsx
+++ b/packages/website/src/components/editor/LoadedEditor.tsx
@@ -21,7 +21,8 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
   decoration,
   jsx,
   main,
-  onASTChange,
+  onEsASTChange,
+  onTsASTChange,
   onChange,
   onSelect,
   rules,
@@ -62,7 +63,8 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
         );
       }
 
-      onASTChange(fatalMessage ?? webLinter.getAst());
+      onEsASTChange(fatalMessage ?? webLinter.getAst());
+      onTsASTChange(fatalMessage ?? webLinter.getTsAst());
       onSelect(sandboxInstance.editor.getPosition());
     }, 500),
     [code, jsx, sandboxInstance, rules, sourceType, webLinter],
diff --git a/packages/website/src/components/editor/types.ts b/packages/website/src/components/editor/types.ts
index 308400b15f8e..56048321473f 100644
--- a/packages/website/src/components/editor/types.ts
+++ b/packages/website/src/components/editor/types.ts
@@ -6,6 +6,7 @@ export interface CommonEditorProps extends ConfigModel {
   readonly darkTheme: boolean;
   readonly decoration: SelectedRange | null;
   readonly onChange: (value: string) => void;
-  readonly onASTChange: (value: string | TSESTree.Program) => void;
+  readonly onTsASTChange: (value: string | Record<string, unknown>) => void;
+  readonly onEsASTChange: (value: string | TSESTree.Program) => void;
   readonly onSelect: (position: Monaco.Position | null) => void;
 }
diff --git a/packages/website/src/components/hooks/useHashState.ts b/packages/website/src/components/hooks/useHashState.ts
index b1263ce04ccb..58ffb030bd44 100644
--- a/packages/website/src/components/hooks/useHashState.ts
+++ b/packages/website/src/components/hooks/useHashState.ts
@@ -15,6 +15,16 @@ function readQueryParam(value: string | null, fallback: string): string {
     : fallback;
 }
 
+function readShowAST(value: string | null): 'ts' | 'es' | boolean {
+  switch (value) {
+    case 'es':
+      return 'es';
+    case 'ts':
+      return 'ts';
+  }
+  return Boolean(value);
+}
+
 const parseStateFromUrl = (hash: string): ConfigModel | undefined => {
   if (!hash) {
     return;
@@ -25,7 +35,8 @@ const parseStateFromUrl = (hash: string): ConfigModel | undefined => {
     return {
       ts: (searchParams.get('ts') ?? process.env.TS_VERSION).trim(),
       jsx: searchParams.has('jsx'),
-      showAST: searchParams.has('showAST'),
+      showAST:
+        searchParams.has('showAST') && readShowAST(searchParams.get('showAST')),
       sourceType:
         searchParams.has('sourceType') &&
         searchParams.get('sourceType') === 'script'
diff --git a/packages/website/src/components/types.ts b/packages/website/src/components/types.ts
index 53a1f45d9728..7830baa224c5 100644
--- a/packages/website/src/components/types.ts
+++ b/packages/website/src/components/types.ts
@@ -42,7 +42,7 @@ export interface ConfigModel {
   tsConfig?: CompilerFlags;
   code: string;
   ts: string;
-  showAST?: boolean;
+  showAST?: boolean | 'ts' | 'es';
 }
 
 export interface SelectedPosition {

From db99a86450e3d01543d19872c06f639e0e4e3b5a Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 1 Dec 2021 17:11:50 +0100
Subject: [PATCH 03/14] docs(website): correct issues with rendering ast

---
 .../website/src/components/ASTEsViewer.tsx    |  15 ++
 .../website/src/components/ASTTsViewer.tsx    |  19 ++
 .../website/src/components/Playground.tsx     |  14 +-
 .../src/components/ast/ASTViewer.module.css   |  12 +-
 .../website/src/components/ast/ASTViewer.tsx  |  28 ++-
 .../website/src/components/ast/Elements.tsx   | 205 ++++++------------
 .../website/src/components/ast/HiddenItem.tsx |  48 ++++
 .../website/src/components/ast/ItemGroup.tsx  |  50 +++++
 .../src/components/ast/PropertyName.tsx       |  11 +-
 .../src/components/ast/PropertyValue.tsx      |   2 +-
 packages/website/src/components/ast/types.ts  |   3 +-
 .../components/ast/{selection.ts => utils.ts} |  27 ++-
 12 files changed, 250 insertions(+), 184 deletions(-)
 create mode 100644 packages/website/src/components/ASTEsViewer.tsx
 create mode 100644 packages/website/src/components/ASTTsViewer.tsx
 create mode 100644 packages/website/src/components/ast/HiddenItem.tsx
 create mode 100644 packages/website/src/components/ast/ItemGroup.tsx
 rename packages/website/src/components/ast/{selection.ts => utils.ts} (84%)

diff --git a/packages/website/src/components/ASTEsViewer.tsx b/packages/website/src/components/ASTEsViewer.tsx
new file mode 100644
index 000000000000..250f6522040c
--- /dev/null
+++ b/packages/website/src/components/ASTEsViewer.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import ASTViewer, { ASTViewerBaseProps } from './ast/ASTViewer';
+import { isRecord } from './ast/utils';
+
+function getTypeName(value: unknown): string | undefined {
+  if (isRecord(value) && 'type' in value && value.type) {
+    return String(value.type);
+  }
+  return undefined;
+}
+
+export default function ASTEsViewer(props: ASTViewerBaseProps): JSX.Element {
+  return <ASTViewer getTypeName={getTypeName} {...props} />;
+}
diff --git a/packages/website/src/components/ASTTsViewer.tsx b/packages/website/src/components/ASTTsViewer.tsx
new file mode 100644
index 000000000000..d9431699fa1e
--- /dev/null
+++ b/packages/website/src/components/ASTTsViewer.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import ASTViewer, { ASTViewerBaseProps } from './ast/ASTViewer';
+import { isRecord } from './ast/utils';
+
+function getTypeName(value: unknown): string | undefined {
+  if (
+    isRecord(value) &&
+    typeof value.kind === 'number' &&
+    window.ts.SyntaxKind[value.kind]
+  ) {
+    return String(window.ts.SyntaxKind[value.kind]);
+  }
+  return undefined;
+}
+
+export default function ASTTsViewer(props: ASTViewerBaseProps): JSX.Element {
+  return <ASTViewer getTypeName={getTypeName} ast={props.ast} />;
+}
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index efc67bdb2787..d324311c28fa 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -8,11 +8,13 @@ import Loader from './layout/Loader';
 
 import useHashState from './hooks/useHashState';
 import OptionsSelector from './OptionsSelector';
-import ASTViewer from './ast/ASTViewer';
 import { LoadingEditor } from './editor/LoadingEditor';
 import { EditorEmbed } from './editor/EditorEmbed';
 import { shallowEqual } from './lib/shallowEqual';
 
+import ASTEsViewer from './ASTEsViewer';
+import ASTTsViewer from './ASTTsViewer';
+
 import type { RuleDetails, SelectedRange } from './types';
 
 import type { TSESTree } from '@typescript-eslint/website-eslint';
@@ -95,9 +97,15 @@ function Playground(): JSX.Element {
         </div>
         {state.showAST && (
           <div className={styles.astViewer}>
-            {(tsAst && state.showAST === 'ts' && <ASTViewer ast={tsAst} />) ||
+            {(tsAst && state.showAST === 'ts' && (
+              <ASTTsViewer
+                ast={tsAst}
+                position={position}
+                onSelectNode={updateSelectedNode}
+              />
+            )) ||
               (esAst && (
-                <ASTViewer
+                <ASTEsViewer
                   ast={esAst}
                   position={position}
                   onSelectNode={updateSelectedNode}
diff --git a/packages/website/src/components/ast/ASTViewer.module.css b/packages/website/src/components/ast/ASTViewer.module.css
index 5ccb2fdceaef..3cb20a77f125 100644
--- a/packages/website/src/components/ast/ASTViewer.module.css
+++ b/packages/website/src/components/ast/ASTViewer.module.css
@@ -1,6 +1,7 @@
 .list,
 .subList,
-.clickable {
+.clickable,
+.propName {
   font-family: var(--ifm-font-family-monospace);
   background: transparent;
   border: none;
@@ -16,10 +17,15 @@
 .subList {
   cursor: default;
   box-sizing: border-box;
+  white-space: break-spaces;
   margin: 0;
   padding-left: 1.5rem;
 }
 
+.selected {
+  background: var(--code-line-decoration);
+}
+
 .nonExpand,
 .expand {
   border-left: 0.1rem dashed var(--ifm-color-emphasis-200);
@@ -29,10 +35,6 @@
   content: '+';
 }
 
-.selected {
-  background: var(--code-line-decoration);
-}
-
 .expand::before {
   content: '-';
   margin-left: -1rem;
diff --git a/packages/website/src/components/ast/ASTViewer.tsx b/packages/website/src/components/ast/ASTViewer.tsx
index 9b70185cd3fe..2b189e1f13bc 100644
--- a/packages/website/src/components/ast/ASTViewer.tsx
+++ b/packages/website/src/components/ast/ASTViewer.tsx
@@ -4,25 +4,22 @@ import styles from './ASTViewer.module.css';
 import type { TSESTree } from '@typescript-eslint/website-eslint';
 import type { SelectedPosition, SelectedRange } from '../types';
 
-import { ElementObject } from './Elements';
+import { ComplexItem } from './Elements';
 import type Monaco from 'monaco-editor';
-import { isRecord } from './selection';
+import { isRecord } from './utils';
 
-export interface ASTViewerProps {
-  ast: Record<string, unknown> | TSESTree.Node | string;
-  position?: Monaco.Position | null;
-  onSelectNode?: (node: SelectedRange | null) => void;
+export interface ASTViewerBaseProps {
+  readonly ast: Record<string, unknown> | TSESTree.Node | string;
+  readonly position?: Monaco.Position | null;
+  readonly onSelectNode?: (node: SelectedRange | null) => void;
+}
+
+export interface ASTViewerProps extends ASTViewerBaseProps {
+  readonly getTypeName: (data: unknown) => string | undefined;
 }
 
 function ASTViewer(props: ASTViewerProps): JSX.Element {
-  const [selection, setSelection] = useState<SelectedPosition | null>(() =>
-    props.position
-      ? {
-          line: props.position.lineNumber,
-          column: props.position.column - 1,
-        }
-      : null,
-  );
+  const [selection, setSelection] = useState<SelectedPosition | null>(null);
 
   useEffect(() => {
     setSelection(
@@ -37,7 +34,8 @@ function ASTViewer(props: ASTViewerProps): JSX.Element {
 
   return isRecord(props.ast) ? (
     <div className={styles.list}>
-      <ElementObject
+      <ComplexItem
+        getTypeName={props.getTypeName}
         value={props.ast}
         level="ast"
         selection={selection}
diff --git a/packages/website/src/components/ast/Elements.tsx b/packages/website/src/components/ast/Elements.tsx
index ed0da6d65e7c..bd20bae7e76e 100644
--- a/packages/website/src/components/ast/Elements.tsx
+++ b/packages/website/src/components/ast/Elements.tsx
@@ -1,193 +1,112 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import clsx from 'clsx';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import type { GenericParams } from './types';
 
-import { scrollIntoViewIfNeeded } from '@site/src/components/lib/scroll-into';
 import {
-  filterRecord,
   hasChildInRange,
   isArrayInRange,
   isEsNode,
   isInRange,
   isRecord,
-} from './selection';
+  propsToFilter,
+} from './utils';
 
-import PropertyNameComp from '@site/src/components/ast/PropertyName';
 import PropertyValueComp from '@site/src/components/ast/PropertyValue';
+import ItemGroup from '@site/src/components/ast/ItemGroup';
+import HiddenItem from '@site/src/components/ast/HiddenItem';
+
 import styles from '@site/src/components/ast/ASTViewer.module.css';
 
-export const PropertyName = React.memo(PropertyNameComp);
 export const PropertyValue = React.memo(PropertyValueComp);
 
-export function ElementArray(props: GenericParams<unknown[]>): JSX.Element {
-  const [isComplex, setIsComplex] = useState<boolean>(() =>
-    isRecord(props.value),
-  );
+export function ComplexItem(
+  props: GenericParams<Record<string, unknown> | unknown[]>,
+): JSX.Element {
   const [isExpanded, setIsExpanded] = useState<boolean>(
-    () =>
-      isComplex || props.value.some(item => isInRange(props.selection, item)),
+    () => props.level === 'ast',
   );
+  const [isSelected, setIsSelected] = useState<boolean>(false);
+  const [model, setModel] = useState<[string, unknown][]>([]);
 
   useEffect(() => {
-    setIsComplex(
-      props.value.some(item => typeof item === 'object' && item !== null),
+    setModel(
+      Object.entries(props.value).filter(
+        item =>
+          !propsToFilter.includes(item[0]) &&
+          !item[0].startsWith('_') &&
+          item[1] !== undefined,
+      ),
     );
   }, [props.value]);
 
-  useEffect(() => {
-    if (isComplex && !isExpanded) {
-      setIsExpanded(isArrayInRange(props.selection, props.value));
-    }
-  }, [props.value, props.selection]);
-
-  return (
-    <div className={clsx(styles.expand, isExpanded ? '' : styles.open)}>
-      <PropertyName
-        propName={props.name}
-        onClick={(): void => setIsExpanded(!isExpanded)}
-      />
-      <span>[</span>
-      {isExpanded ? (
-        <div className={styles.subList}>
-          {props.value.map((item, index) => {
-            return (
-              <ElementItem
-                level={`${props.level}_${props.name}[${index}]`}
-                key={`${props.level}_${props.name}[${index}]`}
-                value={item}
-                selection={props.selection}
-                onSelectNode={props.onSelectNode}
-              />
-            );
-          })}
-        </div>
-      ) : !isComplex ? (
-        <span className={styles.hidden}>
-          {props.value.map((item, index) => (
-            <span key={`${props.level}_${props.name}|[${index}]`}>
-              {index > 0 && ', '}
-              <PropertyValue value={item} />
-            </span>
-          ))}
-        </span>
-      ) : (
-        <span className={styles.hidden}>
-          {props.value.length} {props.value.length > 1 ? 'elements' : 'element'}
-        </span>
-      )}
-      <span>]</span>
-    </div>
+  const onHover = useCallback(
+    (state: boolean) => {
+      if (props.onSelectNode && isEsNode(props.value)) {
+        props.onSelectNode(state ? props.value.loc : null);
+      }
+    },
+    [props.value],
   );
-}
-
-export function ElementObject(
-  props: GenericParams<Record<string, unknown>>,
-): JSX.Element {
-  const [isExpanded, setIsExpanded] = useState<boolean>(() => {
-    return isInRange(props.selection, props.value);
-  });
-  const [isSelected, setIsSelected] = useState<boolean>(
-    () =>
-      isInRange(props.selection, props.value) && props.value.type !== 'Program',
-  );
-  const listItem = useRef<HTMLDivElement | null>(null);
-
-  const onMouseEnter = useCallback(() => {
-    if (props.onSelectNode && isEsNode(props.value)) {
-      props.onSelectNode(props.value.loc);
-    }
-  }, [props.value]);
-
-  const onMouseLeave = useCallback(() => {
-    if (props.onSelectNode && isEsNode(props.value)) {
-      props.onSelectNode(null);
-    }
-  }, [props.value]);
 
   useEffect(() => {
-    const selected = isInRange(props.selection, props.value);
+    const selected = props.isArray
+      ? isArrayInRange(props.selection, props.value)
+      : isInRange(props.selection, props.value);
 
     setIsSelected(
-      selected &&
-        props.value.type !== 'Program' &&
-        !hasChildInRange(props.selection, props.value),
+      props.level !== 'ast' &&
+        selected &&
+        !hasChildInRange(props.selection, model),
     );
 
     if (selected && !isExpanded) {
-      setIsExpanded(isInRange(props.selection, props.value));
+      setIsExpanded(selected);
     }
-  }, [props.selection, props.value]);
-
-  useEffect(() => {
-    if (listItem.current && isSelected) {
-      scrollIntoViewIfNeeded(listItem.current);
-    }
-  }, [isSelected, listItem]);
+  }, [model, props.selection, props.value, props.isArray]);
 
   return (
-    <div
-      ref={listItem}
-      className={clsx(
-        styles.expand,
-        isExpanded ? '' : styles.open,
-        isSelected ? styles.selected : '',
-      )}
+    <ItemGroup
+      propName={props.propName}
+      value={props.value}
+      isExpanded={isExpanded}
+      isSelected={isSelected}
+      typeName={props.getTypeName}
+      canExpand={true}
+      onHover={onHover}
+      onClick={(): void => setIsExpanded(!isExpanded)}
     >
-      <PropertyName
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        propName={props.propName}
-        name={
-          // TODO: refactor this
-          ((props.value.type || String(props.value.kind)) as
-            | string
-            | undefined) ?? '_'
-        }
-        onClick={(): void => setIsExpanded(!isExpanded)}
-      />
-      <span> {'{'}</span>
+      <span>{props.isArray ? '[' : '{'}</span>
       {isExpanded ? (
         <div className={styles.subList}>
-          {filterRecord(props.value).map((item, index) => (
+          {model.map((item, index) => (
             <ElementItem
               level={`${props.level}_${item[0]}[${index}]`}
               key={`${props.level}_${item[0]}[${index}]`}
+              getTypeName={props.getTypeName}
               selection={props.selection}
-              name={item[0]}
+              propName={item[0]}
               value={item[1]}
               onSelectNode={props.onSelectNode}
             />
           ))}
         </div>
       ) : (
-        <span className={styles.hidden}>
-          {filterRecord(props.value)
-            .map(item => item[0])
-            .join(', ')}
-        </span>
+        <HiddenItem level={props.level} isArray={props.isArray} value={model} />
       )}
-      <span>{'}'}</span>
-    </div>
+      <span>{props.isArray ? ']' : '}'}</span>
+    </ItemGroup>
   );
 }
 
 export function ElementItem(props: GenericParams<unknown>): JSX.Element {
-  if (Array.isArray(props.value)) {
+  const isArray = Array.isArray(props.value);
+  if (isArray || isRecord(props.value)) {
     return (
-      <ElementArray
-        name={props.name}
-        value={props.value}
-        level={props.level}
-        selection={props.selection}
-        onSelectNode={props.onSelectNode}
-      />
-    );
-  } else if (isRecord(props.value)) {
-    return (
-      <ElementObject
-        level={`${props.level}_${props.name}`}
-        propName={props.name}
+      <ComplexItem
+        isArray={isArray}
+        level={`${props.level}_${props.propName}`}
+        propName={props.propName}
+        getTypeName={props.getTypeName}
         value={props.value}
         selection={props.selection}
         onSelectNode={props.onSelectNode}
@@ -195,10 +114,12 @@ export function ElementItem(props: GenericParams<unknown>): JSX.Element {
     );
   }
   return (
-    <div className={styles.nonExpand}>
-      {props.name && <span className={styles.propName}>{props.name}</span>}
-      {props.name && <span>: </span>}
+    <ItemGroup
+      propName={props.propName}
+      value={props.value}
+      typeName={props.getTypeName}
+    >
       <PropertyValue value={props.value} />
-    </div>
+    </ItemGroup>
   );
 }
diff --git a/packages/website/src/components/ast/HiddenItem.tsx b/packages/website/src/components/ast/HiddenItem.tsx
new file mode 100644
index 000000000000..8fed84aac512
--- /dev/null
+++ b/packages/website/src/components/ast/HiddenItem.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import styles from '@site/src/components/ast/ASTViewer.module.css';
+import { PropertyValue } from '@site/src/components/ast/Elements';
+
+export interface HiddenItemProps {
+  readonly value: [string, unknown][];
+  readonly level: string;
+  readonly isArray?: boolean;
+}
+
+export default function HiddenItem(props: HiddenItemProps): JSX.Element {
+  const [isComplex, setIsComplex] = useState<boolean>(true);
+
+  useEffect(() => {
+    setIsComplex(
+      Boolean(
+        props.isArray &&
+          props.value.some(
+            item => typeof item[1] === 'object' && item[1] !== null,
+          ),
+      ),
+    );
+  }, [props.value, props.isArray]);
+
+  return (
+    <span className={styles.hidden}>
+      {props.isArray && !isComplex ? (
+        props.value.map((item, index) => (
+          <span key={`${props.level}_[${index}]`}>
+            {index > 0 && ', '}
+            <PropertyValue value={item[1]} />
+          </span>
+        ))
+      ) : props.isArray ? (
+        <>
+          {props.value.length} {props.value.length > 1 ? 'elements' : 'element'}
+        </>
+      ) : (
+        props.value.map((item, index) => (
+          <span key={`${props.level}_[${index}]`}>
+            {index > 0 && ', '}
+            {String(item[0])}
+          </span>
+        ))
+      )}
+    </span>
+  );
+}
diff --git a/packages/website/src/components/ast/ItemGroup.tsx b/packages/website/src/components/ast/ItemGroup.tsx
new file mode 100644
index 000000000000..060631b18b96
--- /dev/null
+++ b/packages/website/src/components/ast/ItemGroup.tsx
@@ -0,0 +1,50 @@
+import React, { MouseEvent, useEffect, useRef } from 'react';
+import { scrollIntoViewIfNeeded } from '@site/src/components/lib/scroll-into';
+import clsx from 'clsx';
+import styles from '@site/src/components/ast/ASTViewer.module.css';
+
+import PropertyNameComp from '@site/src/components/ast/PropertyName';
+
+const PropertyName = React.memo(PropertyNameComp);
+
+export interface ItemGroupProps {
+  readonly propName?: string;
+  readonly value: unknown;
+  readonly typeName: (data: unknown) => string | undefined;
+  readonly isSelected?: boolean;
+  readonly isExpanded?: boolean;
+  readonly canExpand?: boolean;
+  readonly onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+  readonly onHover?: (e: boolean) => void;
+  readonly children: JSX.Element | (JSX.Element | false)[];
+}
+
+export default function ItemGroup(props: ItemGroupProps): JSX.Element {
+  const listItem = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (listItem.current && props.isSelected) {
+      scrollIntoViewIfNeeded(listItem.current);
+    }
+  }, [props.isSelected, listItem]);
+
+  return (
+    <div
+      ref={listItem}
+      className={clsx(
+        props.canExpand ? styles.expand : styles.nonExpand,
+        props.isExpanded ? '' : styles.open,
+        props.isSelected ? styles.selected : '',
+      )}
+    >
+      <PropertyName
+        propName={props.propName}
+        typeName={props.typeName(props.value)}
+        onMouseEnter={(): void => props.onHover?.(true)}
+        onMouseLeave={(): void => props.onHover?.(false)}
+        onClick={props.onClick}
+      />
+      {React.Children.map(props.children, child => child)}
+    </div>
+  );
+}
diff --git a/packages/website/src/components/ast/PropertyName.tsx b/packages/website/src/components/ast/PropertyName.tsx
index fa8614efe6c4..444327b51cb1 100644
--- a/packages/website/src/components/ast/PropertyName.tsx
+++ b/packages/website/src/components/ast/PropertyName.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import styles from './ASTViewer.module.css';
 
 export interface PropertyNameProps {
-  readonly name?: string;
+  readonly typeName?: string;
   readonly propName?: string;
   readonly onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
   readonly onMouseEnter?: (e: MouseEvent<HTMLButtonElement>) => void;
@@ -18,22 +18,23 @@ export default function PropertyName(props: PropertyNameProps): JSX.Element {
           onMouseEnter={props.onMouseEnter}
           onMouseLeave={props.onMouseLeave}
           onClick={props.onClick}
-          className={clsx(styles.propName, styles.clickable)}
+          className={clsx(styles.propName, props.onClick && styles.clickable)}
         >
           {props.propName}
         </button>
       )}
       {props.propName && <span>: </span>}
-      {props.name && (
+      {props.typeName && (
         <button
           onMouseEnter={props.onMouseEnter}
           onMouseLeave={props.onMouseLeave}
           onClick={props.onClick}
-          className={clsx(styles.tokenName, styles.clickable)}
+          className={clsx(styles.tokenName, props.onClick && styles.clickable)}
         >
-          {props.name}
+          {props.typeName}
         </button>
       )}
+      {props.typeName && <span> </span>}
     </>
   );
 }
diff --git a/packages/website/src/components/ast/PropertyValue.tsx b/packages/website/src/components/ast/PropertyValue.tsx
index 23cbe7494e0f..51f7e70ea438 100644
--- a/packages/website/src/components/ast/PropertyValue.tsx
+++ b/packages/website/src/components/ast/PropertyValue.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './ASTViewer.module.css';
-import { objType } from './selection';
+import { objType } from './utils';
 
 export interface PropertyValueProps {
   readonly value: unknown;
diff --git a/packages/website/src/components/ast/types.ts b/packages/website/src/components/ast/types.ts
index ee675d442d1d..61fddb587528 100644
--- a/packages/website/src/components/ast/types.ts
+++ b/packages/website/src/components/ast/types.ts
@@ -2,9 +2,10 @@ import type { SelectedPosition, SelectedRange } from '../types';
 
 export interface GenericParams<V> {
   readonly propName?: string;
-  readonly name?: string;
   readonly value: V;
   readonly level: string;
   readonly selection?: SelectedPosition | null;
   readonly onSelectNode?: (node: SelectedRange | null) => void;
+  readonly getTypeName: (data: unknown) => string | undefined;
+  readonly isArray?: boolean;
 }
diff --git a/packages/website/src/components/ast/selection.ts b/packages/website/src/components/ast/utils.ts
similarity index 84%
rename from packages/website/src/components/ast/selection.ts
rename to packages/website/src/components/ast/utils.ts
index 2093cb4926d2..32b0642c04e0 100644
--- a/packages/website/src/components/ast/selection.ts
+++ b/packages/website/src/components/ast/utils.ts
@@ -1,15 +1,19 @@
 import type { TSESTree } from '@typescript-eslint/website-eslint';
 import type { SelectedPosition } from '../types';
 
-export const propsToFilter = ['parent', 'comments', 'tokens', 'loc'];
-
-export function filterRecord(
-  values: Record<string, unknown>,
-): [string, unknown][] {
-  return Object.entries(values).filter(
-    item => !propsToFilter.includes(item[0]),
-  );
-}
+export const propsToFilter = [
+  'parent',
+  'comments',
+  'tokens',
+  // 'loc',
+  'jsDoc',
+  'lineMap',
+  'externalModuleIndicator',
+  'bindDiagnostics',
+  'modifierFlagsCache',
+  'transformFlags',
+  'resolvedModules',
+];
 
 export function isWithinNode(
   loc: SelectedPosition,
@@ -68,12 +72,11 @@ export function isArrayInRange(
 
 export function hasChildInRange(
   position: SelectedPosition | null | undefined,
-  value: unknown,
+  value: [string, unknown][],
 ): boolean {
   return Boolean(
     position &&
-      isEsNode(value) &&
-      filterRecord(value).some(
+      value.some(
         ([, item]) =>
           isInRange(position, item) || isArrayInRange(position, item),
       ),

From 3b496eb20a08e1d1a3b4999f0c9ebefef87de76e Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Thu, 2 Dec 2021 09:33:43 +0100
Subject: [PATCH 04/14] docs(website): filter out SyntaxKind

---
 .../website/src/components/ASTTsViewer.tsx    | 27 ++++++++++++++-----
 .../src/components/OptionsSelector.tsx        |  4 +--
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/website/src/components/ASTTsViewer.tsx b/packages/website/src/components/ASTTsViewer.tsx
index d9431699fa1e..6f31b9787a1d 100644
--- a/packages/website/src/components/ASTTsViewer.tsx
+++ b/packages/website/src/components/ASTTsViewer.tsx
@@ -3,13 +3,28 @@ import React from 'react';
 import ASTViewer, { ASTViewerBaseProps } from './ast/ASTViewer';
 import { isRecord } from './ast/utils';
 
+const cache: Record<string, Record<number, string>> = {};
+
+export function getSyntaxKind(): Record<number, string> {
+  if (!cache[window.ts.version]) {
+    const result: Record<number, string> = {};
+    const keys = Object.keys(window.ts.SyntaxKind).filter(k =>
+      isNaN(parseInt(k, 10)),
+    );
+    for (const name of keys) {
+      const value = Number(window.ts.SyntaxKind[name]);
+      if (!(value in result)) {
+        result[value] = name;
+      }
+    }
+    cache[window.ts.version] = result;
+  }
+  return cache[window.ts.version];
+}
+
 function getTypeName(value: unknown): string | undefined {
-  if (
-    isRecord(value) &&
-    typeof value.kind === 'number' &&
-    window.ts.SyntaxKind[value.kind]
-  ) {
-    return String(window.ts.SyntaxKind[value.kind]);
+  if (isRecord(value) && typeof value.kind === 'number') {
+    return getSyntaxKind()[value.kind];
   }
   return undefined;
 }
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
index 4e58b9525b29..c9baf694d7ea 100644
--- a/packages/website/src/components/OptionsSelector.tsx
+++ b/packages/website/src/components/OptionsSelector.tsx
@@ -132,7 +132,7 @@ function OptionsSelector({
           />
         </label>
         <label className={styles.optionLabel}>
-          Show Es AST
+          Show ESTree
           <Checkbox
             name="es-ast"
             checked={state.showAST === 'es' || state.showAST === true}
@@ -141,7 +141,7 @@ function OptionsSelector({
           />
         </label>
         <label className={styles.optionLabel}>
-          Show Ts AST
+          Show TS AST
           <Checkbox
             name="ts-ast"
             checked={state.showAST === 'ts'}

From f14404ace3eaf631d66f57d4ab01f66e61e37089 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Thu, 2 Dec 2021 09:44:15 +0100
Subject: [PATCH 05/14] docs(website): expand flags in tooltips

---
 .../website/src/components/ASTTsViewer.tsx    | 72 ++++++++++----
 .../src/components/OptionsSelector.tsx        | 10 +-
 .../src/components/ast/ASTViewer.module.css   |  7 +-
 .../website/src/components/ast/ASTViewer.tsx  |  2 +
 .../website/src/components/ast/Elements.tsx   | 48 +++++++---
 .../website/src/components/ast/HiddenItem.tsx |  2 +-
 .../website/src/components/ast/ItemGroup.tsx  |  6 +-
 .../src/components/ast/PropertyName.tsx       | 12 ++-
 .../src/components/ast/PropertyValue.tsx      |  4 +-
 packages/website/src/components/ast/types.ts  |  1 +
 .../src/components/hooks/useDelayToggle.ts    | 26 ++++++
 .../src/components/inputs/Tooltip.module.css  | 93 +++++++++++++++----
 .../website/src/components/inputs/Tooltip.tsx | 26 +++---
 13 files changed, 226 insertions(+), 83 deletions(-)
 create mode 100644 packages/website/src/components/hooks/useDelayToggle.ts

diff --git a/packages/website/src/components/ASTTsViewer.tsx b/packages/website/src/components/ASTTsViewer.tsx
index 6f31b9787a1d..01a4364ffc7f 100644
--- a/packages/website/src/components/ASTTsViewer.tsx
+++ b/packages/website/src/components/ASTTsViewer.tsx
@@ -1,34 +1,68 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import ASTViewer, { ASTViewerBaseProps } from './ast/ASTViewer';
 import { isRecord } from './ast/utils';
 
-const cache: Record<string, Record<number, string>> = {};
+export interface ASTTsViewerProps extends ASTViewerBaseProps {
+  readonly ts: string;
+}
 
-export function getSyntaxKind(): Record<number, string> {
-  if (!cache[window.ts.version]) {
-    const result: Record<number, string> = {};
-    const keys = Object.keys(window.ts.SyntaxKind).filter(k =>
-      isNaN(parseInt(k, 10)),
-    );
-    for (const name of keys) {
-      const value = Number(window.ts.SyntaxKind[name]);
+function extractEnum(
+  obj: Record<number, string | number>,
+): Record<number, string> {
+  const result: Record<number, string> = {};
+  const keys = Object.entries(obj);
+  for (const [name, value] of keys) {
+    if (typeof value === 'number') {
       if (!(value in result)) {
         result[value] = name;
       }
     }
-    cache[window.ts.version] = result;
   }
-  return cache[window.ts.version];
+  return result;
 }
 
-function getTypeName(value: unknown): string | undefined {
-  if (isRecord(value) && typeof value.kind === 'number') {
-    return getSyntaxKind()[value.kind];
-  }
-  return undefined;
+function getFlagNamesFromEnum(
+  allFlags: Record<number, string>,
+  flags: number,
+  prefix: string,
+): string[] {
+  return Object.entries(allFlags)
+    .filter(([f, _]) => (Number(f) & flags) !== 0)
+    .map(([_, name]) => `${prefix}.${name}`);
 }
 
-export default function ASTTsViewer(props: ASTViewerBaseProps): JSX.Element {
-  return <ASTViewer getTypeName={getTypeName} ast={props.ast} />;
+export default function ASTTsViewer(props: ASTTsViewerProps): JSX.Element {
+  const [syntaxKind, setSyntaxKind] = useState<Record<number, string>>({});
+  const [nodeFlags, setNodeFlags] = useState<Record<number, string>>({});
+  const [tokenFlags, setTokenFlags] = useState<Record<number, string>>({});
+
+  useEffect(() => {
+    setSyntaxKind(extractEnum(window.ts.SyntaxKind));
+    setNodeFlags(extractEnum(window.ts.NodeFlags));
+    setTokenFlags(extractEnum(window.ts.TokenFlags));
+  }, [props.ts]);
+
+  return (
+    <ASTViewer
+      formatValue={(key, value): string | undefined => {
+        if (key === 'flags' && typeof value === 'number') {
+          return getFlagNamesFromEnum(nodeFlags, value, 'NodeFlags').join('\n');
+        } else if (key === 'numericLiteralFlags' && typeof value === 'number') {
+          return getFlagNamesFromEnum(tokenFlags, value, 'TokenFlags').join(
+            '\n',
+          );
+        } else if (key === 'kind' && typeof value === 'number') {
+          return `SyntaxKind.${syntaxKind[value]}`;
+        }
+        return undefined;
+      }}
+      getTypeName={(value): string | undefined =>
+        isRecord(value) && typeof value.kind === 'number'
+          ? syntaxKind[value.kind]
+          : undefined
+      }
+      ast={props.ast}
+    />
+  );
 }
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
index c9baf694d7ea..289493acd368 100644
--- a/packages/website/src/components/OptionsSelector.tsx
+++ b/packages/website/src/components/OptionsSelector.tsx
@@ -10,6 +10,8 @@ import Tooltip from './inputs/Tooltip';
 import EditIcon from './icons/EditIcon';
 import CopyIcon from './icons/CopyIcon';
 
+import useDelayToggle from './hooks/useDelayToggle';
+
 import { createMarkdown } from './lib/markdown';
 
 import type { RuleDetails } from './types';
@@ -40,8 +42,8 @@ function OptionsSelector({
 }: OptionsSelectorParams): JSX.Element {
   const [eslintModal, setEslintModal] = useState<boolean>(false);
   const [typeScriptModal, setTypeScriptModal] = useState<boolean>(false);
-  const [copyLink, setCopyLink] = useState<boolean>(false);
-  const [copyMarkdown, setCopyMarkdown] = useState<boolean>(false);
+  const [copyLink, setCopyLink] = useDelayToggle<boolean>(false);
+  const [copyMarkdown, setCopyMarkdown] = useDelayToggle<boolean>(false);
 
   const updateTS = useCallback((version: string) => {
     setState({ ts: version });
@@ -176,7 +178,7 @@ function OptionsSelector({
       <Expander label="Actions">
         <button className={styles.optionLabel} onClick={copyLinkToClipboard}>
           Copy Link
-          <Tooltip open={copyLink} text="Copied" close={setCopyLink}>
+          <Tooltip open={copyLink} text="Copied">
             <CopyIcon className={styles.clickableIcon} />
           </Tooltip>
         </button>
@@ -185,7 +187,7 @@ function OptionsSelector({
           onClick={copyMarkdownToClipboard}
         >
           Copy Markdown
-          <Tooltip open={copyMarkdown} text="Copied" close={setCopyMarkdown}>
+          <Tooltip open={copyMarkdown} text="Copied">
             <CopyIcon className={styles.clickableIcon} />
           </Tooltip>
         </button>
diff --git a/packages/website/src/components/ast/ASTViewer.module.css b/packages/website/src/components/ast/ASTViewer.module.css
index 3cb20a77f125..855148770880 100644
--- a/packages/website/src/components/ast/ASTViewer.module.css
+++ b/packages/website/src/components/ast/ASTViewer.module.css
@@ -1,12 +1,8 @@
-.list,
-.subList,
-.clickable,
-.propName {
+.list {
   font-family: var(--ifm-font-family-monospace);
   background: transparent;
   border: none;
   padding: 0;
-  font-weight: normal;
   font-size: 13px;
   line-height: 18px;
   letter-spacing: 0;
@@ -15,7 +11,6 @@
 
 .list,
 .subList {
-  cursor: default;
   box-sizing: border-box;
   white-space: break-spaces;
   margin: 0;
diff --git a/packages/website/src/components/ast/ASTViewer.tsx b/packages/website/src/components/ast/ASTViewer.tsx
index 2b189e1f13bc..0824e7c0ced4 100644
--- a/packages/website/src/components/ast/ASTViewer.tsx
+++ b/packages/website/src/components/ast/ASTViewer.tsx
@@ -16,6 +16,7 @@ export interface ASTViewerBaseProps {
 
 export interface ASTViewerProps extends ASTViewerBaseProps {
   readonly getTypeName: (data: unknown) => string | undefined;
+  readonly formatValue?: (key: string, data: unknown) => string | undefined;
 }
 
 function ASTViewer(props: ASTViewerProps): JSX.Element {
@@ -36,6 +37,7 @@ function ASTViewer(props: ASTViewerProps): JSX.Element {
     <div className={styles.list}>
       <ComplexItem
         getTypeName={props.getTypeName}
+        formatValue={props.formatValue}
         value={props.ast}
         level="ast"
         selection={selection}
diff --git a/packages/website/src/components/ast/Elements.tsx b/packages/website/src/components/ast/Elements.tsx
index bd20bae7e76e..61818600bb77 100644
--- a/packages/website/src/components/ast/Elements.tsx
+++ b/packages/website/src/components/ast/Elements.tsx
@@ -11,13 +11,12 @@ import {
   propsToFilter,
 } from './utils';
 
-import PropertyValueComp from '@site/src/components/ast/PropertyValue';
-import ItemGroup from '@site/src/components/ast/ItemGroup';
-import HiddenItem from '@site/src/components/ast/HiddenItem';
-
 import styles from '@site/src/components/ast/ASTViewer.module.css';
 
-export const PropertyValue = React.memo(PropertyValueComp);
+import PropertyValue from '@site/src/components/ast/PropertyValue';
+import ItemGroup from '@site/src/components/ast/ItemGroup';
+import HiddenItem from '@site/src/components/ast/HiddenItem';
+import Tooltip from '@site/src/components/inputs/Tooltip';
 
 export function ComplexItem(
   props: GenericParams<Record<string, unknown> | unknown[]>,
@@ -70,7 +69,7 @@ export function ComplexItem(
       value={props.value}
       isExpanded={isExpanded}
       isSelected={isSelected}
-      typeName={props.getTypeName}
+      getTypeName={props.getTypeName}
       canExpand={true}
       onHover={onHover}
       onClick={(): void => setIsExpanded(!isExpanded)}
@@ -83,6 +82,7 @@ export function ComplexItem(
               level={`${props.level}_${item[0]}[${index}]`}
               key={`${props.level}_${item[0]}[${index}]`}
               getTypeName={props.getTypeName}
+              formatValue={props.formatValue}
               selection={props.selection}
               propName={item[0]}
               value={item[1]}
@@ -98,6 +98,30 @@ export function ComplexItem(
   );
 }
 
+export function SimpleItem(props: GenericParams<unknown>): JSX.Element {
+  const [tooltip, setTooltip] = useState<string | undefined>();
+
+  useEffect(() => {
+    setTooltip(props.formatValue?.(props.propName ?? '', props.value));
+  }, [props.formatValue, props.propName, props.value]);
+
+  return (
+    <ItemGroup
+      propName={props.propName}
+      value={props.value}
+      getTypeName={props.getTypeName}
+    >
+      {tooltip ? (
+        <Tooltip hover={true} position="right" text={tooltip}>
+          <PropertyValue value={props.value} />
+        </Tooltip>
+      ) : (
+        <PropertyValue value={props.value} />
+      )}
+    </ItemGroup>
+  );
+}
+
 export function ElementItem(props: GenericParams<unknown>): JSX.Element {
   const isArray = Array.isArray(props.value);
   if (isArray || isRecord(props.value)) {
@@ -107,19 +131,13 @@ export function ElementItem(props: GenericParams<unknown>): JSX.Element {
         level={`${props.level}_${props.propName}`}
         propName={props.propName}
         getTypeName={props.getTypeName}
+        formatValue={props.formatValue}
         value={props.value}
         selection={props.selection}
         onSelectNode={props.onSelectNode}
       />
     );
+  } else {
+    return <SimpleItem {...props} />;
   }
-  return (
-    <ItemGroup
-      propName={props.propName}
-      value={props.value}
-      typeName={props.getTypeName}
-    >
-      <PropertyValue value={props.value} />
-    </ItemGroup>
-  );
 }
diff --git a/packages/website/src/components/ast/HiddenItem.tsx b/packages/website/src/components/ast/HiddenItem.tsx
index 8fed84aac512..c0402e07c6ad 100644
--- a/packages/website/src/components/ast/HiddenItem.tsx
+++ b/packages/website/src/components/ast/HiddenItem.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styles from '@site/src/components/ast/ASTViewer.module.css';
-import { PropertyValue } from '@site/src/components/ast/Elements';
+import PropertyValue from '@site/src/components/ast/PropertyValue';
 
 export interface HiddenItemProps {
   readonly value: [string, unknown][];
diff --git a/packages/website/src/components/ast/ItemGroup.tsx b/packages/website/src/components/ast/ItemGroup.tsx
index 060631b18b96..6bfaa8d91fa7 100644
--- a/packages/website/src/components/ast/ItemGroup.tsx
+++ b/packages/website/src/components/ast/ItemGroup.tsx
@@ -10,13 +10,13 @@ const PropertyName = React.memo(PropertyNameComp);
 export interface ItemGroupProps {
   readonly propName?: string;
   readonly value: unknown;
-  readonly typeName: (data: unknown) => string | undefined;
+  readonly getTypeName: (data: unknown) => string | undefined;
   readonly isSelected?: boolean;
   readonly isExpanded?: boolean;
   readonly canExpand?: boolean;
   readonly onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
   readonly onHover?: (e: boolean) => void;
-  readonly children: JSX.Element | (JSX.Element | false)[];
+  readonly children: JSX.Element | false | (JSX.Element | false)[];
 }
 
 export default function ItemGroup(props: ItemGroupProps): JSX.Element {
@@ -39,7 +39,7 @@ export default function ItemGroup(props: ItemGroupProps): JSX.Element {
     >
       <PropertyName
         propName={props.propName}
-        typeName={props.typeName(props.value)}
+        typeName={props.getTypeName(props.value)}
         onMouseEnter={(): void => props.onHover?.(true)}
         onMouseLeave={(): void => props.onHover?.(false)}
         onClick={props.onClick}
diff --git a/packages/website/src/components/ast/PropertyName.tsx b/packages/website/src/components/ast/PropertyName.tsx
index 444327b51cb1..184249bde4ec 100644
--- a/packages/website/src/components/ast/PropertyName.tsx
+++ b/packages/website/src/components/ast/PropertyName.tsx
@@ -18,7 +18,11 @@ export default function PropertyName(props: PropertyNameProps): JSX.Element {
           onMouseEnter={props.onMouseEnter}
           onMouseLeave={props.onMouseLeave}
           onClick={props.onClick}
-          className={clsx(styles.propName, props.onClick && styles.clickable)}
+          className={clsx(
+            'clean-btn',
+            styles.propName,
+            props.onClick && styles.clickable,
+          )}
         >
           {props.propName}
         </button>
@@ -29,7 +33,11 @@ export default function PropertyName(props: PropertyNameProps): JSX.Element {
           onMouseEnter={props.onMouseEnter}
           onMouseLeave={props.onMouseLeave}
           onClick={props.onClick}
-          className={clsx(styles.tokenName, props.onClick && styles.clickable)}
+          className={clsx(
+            'clean-btn',
+            styles.tokenName,
+            props.onClick && styles.clickable,
+          )}
         >
           {props.typeName}
         </button>
diff --git a/packages/website/src/components/ast/PropertyValue.tsx b/packages/website/src/components/ast/PropertyValue.tsx
index 51f7e70ea438..4d777b3a4bf4 100644
--- a/packages/website/src/components/ast/PropertyValue.tsx
+++ b/packages/website/src/components/ast/PropertyValue.tsx
@@ -6,7 +6,7 @@ export interface PropertyValueProps {
   readonly value: unknown;
 }
 
-export default function PropertyValue(props: PropertyValueProps): JSX.Element {
+function PropertyValue(props: PropertyValueProps): JSX.Element {
   if (typeof props.value === 'string') {
     return (
       <span className={styles.propString}>{JSON.stringify(props.value)}</span>
@@ -28,3 +28,5 @@ export default function PropertyValue(props: PropertyValueProps): JSX.Element {
   }
   return <span className={styles.propClass}>{objType(props.value)}</span>;
 }
+
+export default PropertyValue;
diff --git a/packages/website/src/components/ast/types.ts b/packages/website/src/components/ast/types.ts
index 61fddb587528..046b60b3bad2 100644
--- a/packages/website/src/components/ast/types.ts
+++ b/packages/website/src/components/ast/types.ts
@@ -7,5 +7,6 @@ export interface GenericParams<V> {
   readonly selection?: SelectedPosition | null;
   readonly onSelectNode?: (node: SelectedRange | null) => void;
   readonly getTypeName: (data: unknown) => string | undefined;
+  readonly formatValue?: (key: string, data: unknown) => string | undefined;
   readonly isArray?: boolean;
 }
diff --git a/packages/website/src/components/hooks/useDelayToggle.ts b/packages/website/src/components/hooks/useDelayToggle.ts
new file mode 100644
index 000000000000..fe0e61a9e17d
--- /dev/null
+++ b/packages/website/src/components/hooks/useDelayToggle.ts
@@ -0,0 +1,26 @@
+import { useRef, useCallback, useState } from 'react';
+
+export default function useDelayToggle<T>(
+  value: T,
+  timeout = 1000,
+): [T, (data: T) => void] {
+  const [state, setState] = useState<T>(value);
+  const timeoutIdRef = useRef<NodeJS.Timeout>();
+
+  const update = useCallback(
+    (data: T) => {
+      setState(data);
+      const timeoutId = timeoutIdRef.current;
+      if (timeoutId) {
+        timeoutIdRef.current = undefined;
+        clearTimeout(timeoutId);
+      }
+      timeoutIdRef.current = setTimeout(() => {
+        setState(value);
+      }, timeout);
+    },
+    [timeoutIdRef],
+  );
+
+  return [state, update];
+}
diff --git a/packages/website/src/components/inputs/Tooltip.module.css b/packages/website/src/components/inputs/Tooltip.module.css
index 95895ffc6092..2d5303e01105 100644
--- a/packages/website/src/components/inputs/Tooltip.module.css
+++ b/packages/website/src/components/inputs/Tooltip.module.css
@@ -1,34 +1,89 @@
+:root {
+  --tooltip-bg-color: var(--ifm-color-emphasis-200);
+  --tooltip-text-color: var(--ifm-color-emphasis-900);
+  --tooltip-arrow-size: 0.3125rem;
+}
+
 .tooltip {
   position: relative;
   display: inline-block;
 }
 
-.tooltipText {
-  visibility: hidden;
-  background-color: var(--ifm-color-emphasis-200);
-  color: var(--ifm-color-emphasis-900);
-  text-align: center;
+.tooltip.hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.tooltip:after {
+  background-color: var(--tooltip-bg-color);
   border-radius: 6px;
+  color: var(--tooltip-text-color);
+  content: attr(aria-label);
   padding: 0.2rem 1rem;
-  margin-right: 0.3rem;
-  position: absolute;
-  z-index: 1;
-  top: -5px;
-  right: 110%;
+  text-indent: 0;
+  text-shadow: none;
+  white-space: normal;
+  word-wrap: break-word;
+  z-index: 10;
+  min-width: 6.25rem;
+  max-width: 25rem;
+  visibility: hidden;
 }
 
-.tooltipText::after {
+.tooltip:before {
   content: '';
+  z-index: 11;
+  border: var(--tooltip-arrow-size) solid transparent;
+  height: 0;
+  width: 0;
+  visibility: hidden;
+}
+
+.tooltip:after,
+.tooltip:before {
+  box-sizing: border-box;
+  opacity: 0;
+  pointer-events: none;
   position: absolute;
-  top: 50%;
-  left: 100%;
-  margin-top: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: transparent transparent transparent
-    var(--ifm-color-emphasis-200);
+  transition: opacity 120ms ease-out 120ms;
 }
 
-.tooltip.tooltipActive .tooltipText {
+.tooltip.hover:hover:before,
+.tooltip.hover:hover:after,
+.tooltip.visible:before,
+.tooltip.visible:after {
   visibility: visible;
+  opacity: 100%;
+}
+
+.tooltipLeft:after {
+  margin-right: calc(var(--tooltip-arrow-size) * 2);
+}
+
+.tooltipLeft:before {
+  border-left-color: var(--tooltip-bg-color);
+}
+
+.tooltipLeft:after,
+.tooltipLeft:before {
+  right: calc(100% - var(--tooltip-arrow-size) / 2);
+  top: 50%;
+  transform-origin: left;
+  transform: translateY(-50%);
+}
+
+.tooltipRight:after {
+  margin-left: calc(var(--tooltip-arrow-size) * 2);
+}
+
+.tooltipRight:before {
+  border-right-color: var(--tooltip-bg-color);
+}
+
+.tooltipRight:after,
+.tooltipRight:before {
+  left: calc(100% - var(--tooltip-arrow-size) / 2);
+  top: 50%;
+  transform-origin: right;
+  transform: translateY(-50%);
 }
diff --git a/packages/website/src/components/inputs/Tooltip.tsx b/packages/website/src/components/inputs/Tooltip.tsx
index 5a0542ad6048..5756321e0719 100644
--- a/packages/website/src/components/inputs/Tooltip.tsx
+++ b/packages/website/src/components/inputs/Tooltip.tsx
@@ -1,28 +1,28 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import styles from './Tooltip.module.css';
 import clsx from 'clsx';
 
 export interface TooltipProps {
   readonly children: JSX.Element | (JSX.Element | false)[];
   readonly text: string;
+  readonly position?: 'left' | 'right';
   readonly open?: boolean;
-  readonly close: (status: boolean) => void;
+  readonly hover?: boolean;
 }
 
 function Tooltip(props: TooltipProps): JSX.Element {
-  useEffect(() => {
-    if (props.open) {
-      setTimeout(() => {
-        props.close(false);
-      }, 1000);
-    }
-  }, [props.open]);
-
   return (
-    <div className={clsx(styles.tooltip, props.open && styles.tooltipActive)}>
+    <span
+      aria-label={((props.open || props.hover) && props.text) || undefined}
+      className={clsx(
+        styles.tooltip,
+        props.position === 'right' ? styles.tooltipRight : styles.tooltipLeft,
+        props.open && styles.visible,
+        props.hover && styles.hover,
+      )}
+    >
       {React.Children.map(props.children, child => child)}
-      <span className={styles.tooltipText}>{props.text}</span>
-    </div>
+    </span>
   );
 }
 

From ab13bc0cbb8fc43263224f64131b404364add080 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Fri, 3 Dec 2021 05:51:51 +0100
Subject: [PATCH 06/14] docs(website): change checkboxes to dropdown in AST
 Viewer

---
 .../website/src/components/ASTTsViewer.tsx    |  4 +-
 .../src/components/OptionsSelector.tsx        | 36 ++++++---------
 .../website/src/components/Playground.tsx     |  1 +
 .../src/components/hooks/useHashState.ts      |  8 ++--
 .../src/components/inputs/Dropdown.tsx        | 46 ++++++++++++++-----
 5 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/packages/website/src/components/ASTTsViewer.tsx b/packages/website/src/components/ASTTsViewer.tsx
index 01a4364ffc7f..df0abd942d4e 100644
--- a/packages/website/src/components/ASTTsViewer.tsx
+++ b/packages/website/src/components/ASTTsViewer.tsx
@@ -4,7 +4,7 @@ import ASTViewer, { ASTViewerBaseProps } from './ast/ASTViewer';
 import { isRecord } from './ast/utils';
 
 export interface ASTTsViewerProps extends ASTViewerBaseProps {
-  readonly ts: string;
+  readonly version: string;
 }
 
 function extractEnum(
@@ -41,7 +41,7 @@ export default function ASTTsViewer(props: ASTTsViewerProps): JSX.Element {
     setSyntaxKind(extractEnum(window.ts.SyntaxKind));
     setNodeFlags(extractEnum(window.ts.NodeFlags));
     setTokenFlags(extractEnum(window.ts.TokenFlags));
-  }, [props.ts]);
+  }, [props.version]);
 
   return (
     <ASTViewer
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
index 289493acd368..341db12caedf 100644
--- a/packages/website/src/components/OptionsSelector.tsx
+++ b/packages/website/src/components/OptionsSelector.tsx
@@ -18,12 +18,7 @@ import type { RuleDetails } from './types';
 
 import styles from './OptionsSelector.module.css';
 
-import type {
-  CompilerFlags,
-  ConfigModel,
-  SourceType,
-  RulesRecord,
-} from './types';
+import type { CompilerFlags, ConfigModel, RulesRecord } from './types';
 
 export interface OptionsSelectorParams {
   readonly ruleOptions: RuleDetails[];
@@ -33,6 +28,12 @@ export interface OptionsSelectorParams {
   readonly isLoading: boolean;
 }
 
+const ASTOptions = [
+  { value: false, label: 'Disabled' },
+  { value: 'es', label: 'ESTree' },
+  { value: 'ts', label: 'TypeScript' },
+] as const;
+
 function OptionsSelector({
   ruleOptions,
   state,
@@ -134,21 +135,12 @@ function OptionsSelector({
           />
         </label>
         <label className={styles.optionLabel}>
-          Show ESTree
-          <Checkbox
-            name="es-ast"
-            checked={state.showAST === 'es' || state.showAST === true}
-            onChange={(e): void => setState({ showAST: e && 'es' })}
-            className={styles.optionCheckbox}
-          />
-        </label>
-        <label className={styles.optionLabel}>
-          Show TS AST
-          <Checkbox
-            name="ts-ast"
-            checked={state.showAST === 'ts'}
-            onChange={(e): void => setState({ showAST: e && 'ts' })}
-            className={styles.optionCheckbox}
+          AST Viewer
+          <Dropdown
+            name="showAST"
+            value={state.showAST}
+            onChange={(e): void => setState({ showAST: e })}
+            options={ASTOptions}
           />
         </label>
         <label className={styles.optionLabel}>
@@ -156,7 +148,7 @@ function OptionsSelector({
           <Dropdown
             name="sourceType"
             value={state.sourceType}
-            onChange={(e): void => setState({ sourceType: e as SourceType })}
+            onChange={(e): void => setState({ sourceType: e })}
             options={['script', 'module']}
           />
         </label>
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index d324311c28fa..e6328f69afc2 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -102,6 +102,7 @@ function Playground(): JSX.Element {
                 ast={tsAst}
                 position={position}
                 onSelectNode={updateSelectedNode}
+                version={state.ts}
               />
             )) ||
               (esAst && (
diff --git a/packages/website/src/components/hooks/useHashState.ts b/packages/website/src/components/hooks/useHashState.ts
index 58ffb030bd44..9c495facc591 100644
--- a/packages/website/src/components/hooks/useHashState.ts
+++ b/packages/website/src/components/hooks/useHashState.ts
@@ -92,14 +92,14 @@ function useHashState(
   initialState: ConfigModel,
 ): [ConfigModel, (cfg: Partial<ConfigModel>) => void] {
   const [hash, setHash] = useState<string>(window.location.hash.slice(1));
-  const [state, setState] = useState<ConfigModel>({
+  const [state, setState] = useState<ConfigModel>(() => ({
     ...initialState,
     ...parseStateFromUrl(window.location.hash.slice(1)),
-  });
-  const [tmpState, setTmpState] = useState<Partial<ConfigModel>>({
+  }));
+  const [tmpState, setTmpState] = useState<Partial<ConfigModel>>(() => ({
     ...initialState,
     ...parseStateFromUrl(window.location.hash.slice(1)),
-  });
+  }));
 
   useEffect(() => {
     const newHash = window.location.hash.slice(1);
diff --git a/packages/website/src/components/inputs/Dropdown.tsx b/packages/website/src/components/inputs/Dropdown.tsx
index 3a298eb5910f..56a7de6824b0 100644
--- a/packages/website/src/components/inputs/Dropdown.tsx
+++ b/packages/website/src/components/inputs/Dropdown.tsx
@@ -1,28 +1,52 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from '../OptionsSelector.module.css';
 import clsx from 'clsx';
 
-export interface DropdownProps {
-  readonly onChange: (value: string) => void;
-  readonly options: string[];
-  readonly value: string | undefined;
+export interface DropdownOption<T> {
+  readonly value: T;
+  readonly label: string;
+}
+
+export interface DropdownProps<T> {
+  readonly onChange: (value: T) => void;
+  readonly options: readonly (DropdownOption<T> | T)[];
+  readonly value: T | undefined;
   readonly name: string;
   readonly className?: string;
 }
 
-function Dropdown(props: DropdownProps): JSX.Element {
+function Dropdown<T extends boolean | string | number>(
+  props: DropdownProps<T>,
+): JSX.Element {
+  const [options, setOptions] = useState<DropdownOption<T>[]>([]);
+
+  useEffect(() => {
+    setOptions(
+      props.options.map(option =>
+        typeof option !== 'object'
+          ? { label: String(option), value: option }
+          : option,
+      ),
+    );
+  }, [props.options]);
+
   return (
     <select
       name={props.name}
-      value={props.value}
+      value={String(props.value)}
       className={clsx(styles.optionSelect, props.className)}
       onChange={(e): void => {
-        props.onChange(e.target.value);
+        const selected = options.find(
+          item => String(item.value) === e.target.value,
+        );
+        if (selected) {
+          props.onChange(selected.value);
+        }
       }}
     >
-      {props.options.map(item => (
-        <option key={item} value={item}>
-          {item}
+      {options.map(item => (
+        <option key={String(item.value)} value={String(item.value)}>
+          {item.label}
         </option>
       ))}
     </select>

From d1467b38f625050e124d8eb98f2a7fa15667a0c2 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Fri, 3 Dec 2021 06:11:58 +0100
Subject: [PATCH 07/14] docs(website): correct length value for custom arrays

---
 .../website/src/components/ast/HiddenItem.tsx  | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/website/src/components/ast/HiddenItem.tsx b/packages/website/src/components/ast/HiddenItem.tsx
index c0402e07c6ad..77c0bee99aee 100644
--- a/packages/website/src/components/ast/HiddenItem.tsx
+++ b/packages/website/src/components/ast/HiddenItem.tsx
@@ -10,16 +10,16 @@ export interface HiddenItemProps {
 
 export default function HiddenItem(props: HiddenItemProps): JSX.Element {
   const [isComplex, setIsComplex] = useState<boolean>(true);
+  const [length, setLength] = useState<number>(0);
 
   useEffect(() => {
-    setIsComplex(
-      Boolean(
-        props.isArray &&
-          props.value.some(
-            item => typeof item[1] === 'object' && item[1] !== null,
-          ),
-      ),
-    );
+    if (props.isArray) {
+      const filtered = props.value.filter(item => !isNaN(Number(item[0])));
+      setIsComplex(
+        !filtered.some(item => typeof item[1] !== 'object' || item[1] === null),
+      );
+      setLength(Number(filtered.length));
+    }
   }, [props.value, props.isArray]);
 
   return (
@@ -33,7 +33,7 @@ export default function HiddenItem(props: HiddenItemProps): JSX.Element {
         ))
       ) : props.isArray ? (
         <>
-          {props.value.length} {props.value.length > 1 ? 'elements' : 'element'}
+          {length} {length === 1 ? 'element' : 'elements'}
         </>
       ) : (
         props.value.map((item, index) => (

From 928b5cc2262da03e3785c25d433d3a11fe98798a Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Fri, 3 Dec 2021 06:25:38 +0100
Subject: [PATCH 08/14] docs(website): cleanup code

---
 packages/website/src/components/ast/HiddenItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/website/src/components/ast/HiddenItem.tsx b/packages/website/src/components/ast/HiddenItem.tsx
index 77c0bee99aee..5d1cdc5d2299 100644
--- a/packages/website/src/components/ast/HiddenItem.tsx
+++ b/packages/website/src/components/ast/HiddenItem.tsx
@@ -18,7 +18,7 @@ export default function HiddenItem(props: HiddenItemProps): JSX.Element {
       setIsComplex(
         !filtered.some(item => typeof item[1] !== 'object' || item[1] === null),
       );
-      setLength(Number(filtered.length));
+      setLength(filtered.length);
     }
   }, [props.value, props.isArray]);
 

From 504be84c513900063113dcd1f6a90f5c3bb70faf Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Fri, 3 Dec 2021 06:31:31 +0100
Subject: [PATCH 09/14] docs(website): rename getTypeName to getNodeName and
 formatValue to getTooltip

---
 .../website/src/components/ASTEsViewer.tsx    |  7 +--
 .../website/src/components/ASTTsViewer.tsx    | 48 +++++++++++--------
 .../website/src/components/Playground.tsx     |  4 +-
 .../website/src/components/ast/ASTViewer.tsx  | 29 +++++------
 .../website/src/components/ast/Elements.tsx   | 16 +++----
 .../website/src/components/ast/HiddenItem.tsx |  4 +-
 .../website/src/components/ast/ItemGroup.tsx  | 10 ++--
 packages/website/src/components/ast/types.ts  | 20 ++++++--
 packages/website/src/components/ast/utils.ts  |  2 +-
 9 files changed, 81 insertions(+), 59 deletions(-)

diff --git a/packages/website/src/components/ASTEsViewer.tsx b/packages/website/src/components/ASTEsViewer.tsx
index 250f6522040c..e9cd6751db66 100644
--- a/packages/website/src/components/ASTEsViewer.tsx
+++ b/packages/website/src/components/ASTEsViewer.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 
-import ASTViewer, { ASTViewerBaseProps } from './ast/ASTViewer';
+import ASTViewer from './ast/ASTViewer';
 import { isRecord } from './ast/utils';
+import type { ASTViewerBaseProps } from './ast/types';
 
-function getTypeName(value: unknown): string | undefined {
+function getNodeName(value: unknown): string | undefined {
   if (isRecord(value) && 'type' in value && value.type) {
     return String(value.type);
   }
@@ -11,5 +12,5 @@ function getTypeName(value: unknown): string | undefined {
 }
 
 export default function ASTEsViewer(props: ASTViewerBaseProps): JSX.Element {
-  return <ASTViewer getTypeName={getTypeName} {...props} />;
+  return <ASTViewer getNodeName={getNodeName} {...props} />;
 }
diff --git a/packages/website/src/components/ASTTsViewer.tsx b/packages/website/src/components/ASTTsViewer.tsx
index df0abd942d4e..021f53712fa8 100644
--- a/packages/website/src/components/ASTTsViewer.tsx
+++ b/packages/website/src/components/ASTTsViewer.tsx
@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
-import ASTViewer, { ASTViewerBaseProps } from './ast/ASTViewer';
+import ASTViewer from './ast/ASTViewer';
 import { isRecord } from './ast/utils';
+import type { ASTViewerBaseProps } from './ast/types';
 
 export interface ASTTsViewerProps extends ASTViewerBaseProps {
   readonly version: string;
@@ -43,26 +44,33 @@ export default function ASTTsViewer(props: ASTTsViewerProps): JSX.Element {
     setTokenFlags(extractEnum(window.ts.TokenFlags));
   }, [props.version]);
 
+  const getTooltip = useCallback(
+    (key: string, value: unknown): string | undefined => {
+      if (key === 'flags' && typeof value === 'number') {
+        return getFlagNamesFromEnum(nodeFlags, value, 'NodeFlags').join('\n');
+      } else if (key === 'numericLiteralFlags' && typeof value === 'number') {
+        return getFlagNamesFromEnum(tokenFlags, value, 'TokenFlags').join('\n');
+      } else if (key === 'kind' && typeof value === 'number') {
+        return `SyntaxKind.${syntaxKind[value]}`;
+      }
+      return undefined;
+    },
+    [nodeFlags, tokenFlags, syntaxKind],
+  );
+
+  const getNodeName = useCallback(
+    (value): string | undefined =>
+      isRecord(value) && typeof value.kind === 'number'
+        ? syntaxKind[value.kind]
+        : undefined,
+    [syntaxKind],
+  );
+
   return (
     <ASTViewer
-      formatValue={(key, value): string | undefined => {
-        if (key === 'flags' && typeof value === 'number') {
-          return getFlagNamesFromEnum(nodeFlags, value, 'NodeFlags').join('\n');
-        } else if (key === 'numericLiteralFlags' && typeof value === 'number') {
-          return getFlagNamesFromEnum(tokenFlags, value, 'TokenFlags').join(
-            '\n',
-          );
-        } else if (key === 'kind' && typeof value === 'number') {
-          return `SyntaxKind.${syntaxKind[value]}`;
-        }
-        return undefined;
-      }}
-      getTypeName={(value): string | undefined =>
-        isRecord(value) && typeof value.kind === 'number'
-          ? syntaxKind[value.kind]
-          : undefined
-      }
-      ast={props.ast}
+      getTooltip={getTooltip}
+      getNodeName={getNodeName}
+      value={props.value}
     />
   );
 }
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index e6328f69afc2..0199ca5d1fea 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -99,7 +99,7 @@ function Playground(): JSX.Element {
           <div className={styles.astViewer}>
             {(tsAst && state.showAST === 'ts' && (
               <ASTTsViewer
-                ast={tsAst}
+                value={tsAst}
                 position={position}
                 onSelectNode={updateSelectedNode}
                 version={state.ts}
@@ -107,7 +107,7 @@ function Playground(): JSX.Element {
             )) ||
               (esAst && (
                 <ASTEsViewer
-                  ast={esAst}
+                  value={esAst}
                   position={position}
                   onSelectNode={updateSelectedNode}
                 />
diff --git a/packages/website/src/components/ast/ASTViewer.tsx b/packages/website/src/components/ast/ASTViewer.tsx
index 0824e7c0ced4..2b0a2c82e6b5 100644
--- a/packages/website/src/components/ast/ASTViewer.tsx
+++ b/packages/website/src/components/ast/ASTViewer.tsx
@@ -1,22 +1,19 @@
 import React, { useEffect, useState } from 'react';
 import styles from './ASTViewer.module.css';
 
-import type { TSESTree } from '@typescript-eslint/website-eslint';
-import type { SelectedPosition, SelectedRange } from '../types';
+import type {
+  ASTViewerBaseProps,
+  SelectedPosition,
+  GetNodeNameFn,
+  GetTooltipFn,
+} from './types';
 
 import { ComplexItem } from './Elements';
-import type Monaco from 'monaco-editor';
 import { isRecord } from './utils';
 
-export interface ASTViewerBaseProps {
-  readonly ast: Record<string, unknown> | TSESTree.Node | string;
-  readonly position?: Monaco.Position | null;
-  readonly onSelectNode?: (node: SelectedRange | null) => void;
-}
-
 export interface ASTViewerProps extends ASTViewerBaseProps {
-  readonly getTypeName: (data: unknown) => string | undefined;
-  readonly formatValue?: (key: string, data: unknown) => string | undefined;
+  readonly getNodeName: GetNodeNameFn;
+  readonly getTooltip?: GetTooltipFn;
 }
 
 function ASTViewer(props: ASTViewerProps): JSX.Element {
@@ -33,19 +30,19 @@ function ASTViewer(props: ASTViewerProps): JSX.Element {
     );
   }, [props.position]);
 
-  return isRecord(props.ast) ? (
+  return isRecord(props.value) ? (
     <div className={styles.list}>
       <ComplexItem
-        getTypeName={props.getTypeName}
-        formatValue={props.formatValue}
-        value={props.ast}
+        getNodeName={props.getNodeName}
+        getTooltip={props.getTooltip}
+        value={props.value}
         level="ast"
         selection={selection}
         onSelectNode={props.onSelectNode}
       />
     </div>
   ) : (
-    <div>{props.ast}</div>
+    <div>{props.value}</div>
   );
 }
 
diff --git a/packages/website/src/components/ast/Elements.tsx b/packages/website/src/components/ast/Elements.tsx
index 61818600bb77..cfedd3884a2a 100644
--- a/packages/website/src/components/ast/Elements.tsx
+++ b/packages/website/src/components/ast/Elements.tsx
@@ -69,7 +69,7 @@ export function ComplexItem(
       value={props.value}
       isExpanded={isExpanded}
       isSelected={isSelected}
-      getTypeName={props.getTypeName}
+      getNodeName={props.getNodeName}
       canExpand={true}
       onHover={onHover}
       onClick={(): void => setIsExpanded(!isExpanded)}
@@ -81,8 +81,8 @@ export function ComplexItem(
             <ElementItem
               level={`${props.level}_${item[0]}[${index}]`}
               key={`${props.level}_${item[0]}[${index}]`}
-              getTypeName={props.getTypeName}
-              formatValue={props.formatValue}
+              getNodeName={props.getNodeName}
+              getTooltip={props.getTooltip}
               selection={props.selection}
               propName={item[0]}
               value={item[1]}
@@ -102,14 +102,14 @@ export function SimpleItem(props: GenericParams<unknown>): JSX.Element {
   const [tooltip, setTooltip] = useState<string | undefined>();
 
   useEffect(() => {
-    setTooltip(props.formatValue?.(props.propName ?? '', props.value));
-  }, [props.formatValue, props.propName, props.value]);
+    setTooltip(props.getTooltip?.(props.propName ?? '', props.value));
+  }, [props.getTooltip, props.propName, props.value]);
 
   return (
     <ItemGroup
       propName={props.propName}
       value={props.value}
-      getTypeName={props.getTypeName}
+      getNodeName={props.getNodeName}
     >
       {tooltip ? (
         <Tooltip hover={true} position="right" text={tooltip}>
@@ -130,8 +130,8 @@ export function ElementItem(props: GenericParams<unknown>): JSX.Element {
         isArray={isArray}
         level={`${props.level}_${props.propName}`}
         propName={props.propName}
-        getTypeName={props.getTypeName}
-        formatValue={props.formatValue}
+        getNodeName={props.getNodeName}
+        getTooltip={props.getTooltip}
         value={props.value}
         selection={props.selection}
         onSelectNode={props.onSelectNode}
diff --git a/packages/website/src/components/ast/HiddenItem.tsx b/packages/website/src/components/ast/HiddenItem.tsx
index 5d1cdc5d2299..26717b349567 100644
--- a/packages/website/src/components/ast/HiddenItem.tsx
+++ b/packages/website/src/components/ast/HiddenItem.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import styles from '@site/src/components/ast/ASTViewer.module.css';
-import PropertyValue from '@site/src/components/ast/PropertyValue';
+import styles from './ASTViewer.module.css';
+import PropertyValue from './PropertyValue';
 
 export interface HiddenItemProps {
   readonly value: [string, unknown][];
diff --git a/packages/website/src/components/ast/ItemGroup.tsx b/packages/website/src/components/ast/ItemGroup.tsx
index 6bfaa8d91fa7..e1656e2432f2 100644
--- a/packages/website/src/components/ast/ItemGroup.tsx
+++ b/packages/website/src/components/ast/ItemGroup.tsx
@@ -1,16 +1,18 @@
 import React, { MouseEvent, useEffect, useRef } from 'react';
 import { scrollIntoViewIfNeeded } from '@site/src/components/lib/scroll-into';
 import clsx from 'clsx';
-import styles from '@site/src/components/ast/ASTViewer.module.css';
 
-import PropertyNameComp from '@site/src/components/ast/PropertyName';
+import styles from './ASTViewer.module.css';
+
+import PropertyNameComp from './PropertyName';
+import type { GetNodeNameFn } from './types';
 
 const PropertyName = React.memo(PropertyNameComp);
 
 export interface ItemGroupProps {
   readonly propName?: string;
   readonly value: unknown;
-  readonly getTypeName: (data: unknown) => string | undefined;
+  readonly getNodeName: GetNodeNameFn;
   readonly isSelected?: boolean;
   readonly isExpanded?: boolean;
   readonly canExpand?: boolean;
@@ -39,7 +41,7 @@ export default function ItemGroup(props: ItemGroupProps): JSX.Element {
     >
       <PropertyName
         propName={props.propName}
-        typeName={props.getTypeName(props.value)}
+        typeName={props.getNodeName(props.value)}
         onMouseEnter={(): void => props.onHover?.(true)}
         onMouseLeave={(): void => props.onHover?.(false)}
         onClick={props.onClick}
diff --git a/packages/website/src/components/ast/types.ts b/packages/website/src/components/ast/types.ts
index 046b60b3bad2..4c5f82aee2fa 100644
--- a/packages/website/src/components/ast/types.ts
+++ b/packages/website/src/components/ast/types.ts
@@ -1,12 +1,26 @@
 import type { SelectedPosition, SelectedRange } from '../types';
+import { TSESTree } from '@typescript-eslint/website-eslint';
+import Monaco from 'monaco-editor';
+
+export type GetNodeNameFn = (data: unknown) => string | undefined;
+export type GetTooltipFn = (key: string, data: unknown) => string | undefined;
+export type OnSelectNodeFn = (node: SelectedRange | null) => void;
 
 export interface GenericParams<V> {
   readonly propName?: string;
   readonly value: V;
   readonly level: string;
   readonly selection?: SelectedPosition | null;
-  readonly onSelectNode?: (node: SelectedRange | null) => void;
-  readonly getTypeName: (data: unknown) => string | undefined;
-  readonly formatValue?: (key: string, data: unknown) => string | undefined;
+  readonly onSelectNode?: OnSelectNodeFn;
+  readonly getNodeName: GetNodeNameFn;
+  readonly getTooltip?: GetTooltipFn;
   readonly isArray?: boolean;
 }
+
+export interface ASTViewerBaseProps {
+  readonly value: Record<string, unknown> | TSESTree.Node | string;
+  readonly position?: Monaco.Position | null;
+  readonly onSelectNode?: OnSelectNodeFn;
+}
+
+export type { SelectedPosition, SelectedRange };
diff --git a/packages/website/src/components/ast/utils.ts b/packages/website/src/components/ast/utils.ts
index 32b0642c04e0..0735cf39ebce 100644
--- a/packages/website/src/components/ast/utils.ts
+++ b/packages/website/src/components/ast/utils.ts
@@ -1,5 +1,5 @@
 import type { TSESTree } from '@typescript-eslint/website-eslint';
-import type { SelectedPosition } from '../types';
+import type { SelectedPosition } from './types';
 
 export const propsToFilter = [
   'parent',

From da93df6e993fa2eea048c3cbc829ef01d87446d2 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Fri, 3 Dec 2021 08:00:55 +0100
Subject: [PATCH 10/14] docs(website): add support for selection in ts ast
 viewer

---
 .../website/src/components/ASTEsViewer.tsx    | 23 +++++++-
 .../website/src/components/ASTTsViewer.tsx    | 57 +++++++++++++++++--
 .../website/src/components/ast/ASTViewer.tsx  | 13 +----
 .../website/src/components/ast/Elements.tsx   | 22 ++++---
 packages/website/src/components/ast/types.ts  |  8 +++
 packages/website/src/components/ast/utils.ts  | 44 +++++++-------
 6 files changed, 118 insertions(+), 49 deletions(-)

diff --git a/packages/website/src/components/ASTEsViewer.tsx b/packages/website/src/components/ASTEsViewer.tsx
index e9cd6751db66..0a55c1b6b9d7 100644
--- a/packages/website/src/components/ASTEsViewer.tsx
+++ b/packages/website/src/components/ASTEsViewer.tsx
@@ -2,15 +2,32 @@ import React from 'react';
 
 import ASTViewer from './ast/ASTViewer';
 import { isRecord } from './ast/utils';
-import type { ASTViewerBaseProps } from './ast/types';
+import type { ASTViewerBaseProps, SelectedRange } from './ast/types';
+import { TSESTree } from '@typescript-eslint/website-eslint';
+
+function isEsNode(
+  value: unknown,
+): value is Record<string, unknown> & TSESTree.BaseNode {
+  return isRecord(value) && 'type' in value && 'loc' in value;
+}
 
 function getNodeName(value: unknown): string | undefined {
-  if (isRecord(value) && 'type' in value && value.type) {
+  if (isEsNode(value)) {
     return String(value.type);
   }
   return undefined;
 }
 
+function getRange(value: unknown): SelectedRange | undefined {
+  if (isEsNode(value)) {
+    return {
+      start: value.loc.start,
+      end: value.loc.end,
+    };
+  }
+  return undefined;
+}
+
 export default function ASTEsViewer(props: ASTViewerBaseProps): JSX.Element {
-  return <ASTViewer getNodeName={getNodeName} {...props} />;
+  return <ASTViewer getRange={getRange} getNodeName={getNodeName} {...props} />;
 }
diff --git a/packages/website/src/components/ASTTsViewer.tsx b/packages/website/src/components/ASTTsViewer.tsx
index 021f53712fa8..be6fde7660c1 100644
--- a/packages/website/src/components/ASTTsViewer.tsx
+++ b/packages/website/src/components/ASTTsViewer.tsx
@@ -2,7 +2,12 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import ASTViewer from './ast/ASTViewer';
 import { isRecord } from './ast/utils';
-import type { ASTViewerBaseProps } from './ast/types';
+import type {
+  ASTViewerBaseProps,
+  SelectedRange,
+  SelectedPosition,
+} from './ast/types';
+import type { Node, SourceFile } from 'typescript';
 
 export interface ASTTsViewerProps extends ASTViewerBaseProps {
   readonly version: string;
@@ -23,6 +28,10 @@ function extractEnum(
   return result;
 }
 
+function isTsNode(value: unknown): value is Node {
+  return isRecord(value) && typeof value.kind === 'number';
+}
+
 function getFlagNamesFromEnum(
   allFlags: Record<number, string>,
   flags: number,
@@ -33,6 +42,28 @@ function getFlagNamesFromEnum(
     .map(([_, name]) => `${prefix}.${name}`);
 }
 
+export function getLineAndCharacterFor(
+  pos: number,
+  ast: SourceFile,
+): SelectedPosition {
+  const loc = ast.getLineAndCharacterOfPosition(pos);
+  return {
+    line: loc.line + 1,
+    column: loc.character,
+  };
+}
+
+export function getLocFor(
+  start: number,
+  end: number,
+  ast: SourceFile,
+): SelectedRange {
+  return {
+    start: getLineAndCharacterFor(start, ast),
+    end: getLineAndCharacterFor(end, ast),
+  };
+}
+
 export default function ASTTsViewer(props: ASTTsViewerProps): JSX.Element {
   const [syntaxKind, setSyntaxKind] = useState<Record<number, string>>({});
   const [nodeFlags, setNodeFlags] = useState<Record<number, string>>({});
@@ -59,18 +90,32 @@ export default function ASTTsViewer(props: ASTTsViewerProps): JSX.Element {
   );
 
   const getNodeName = useCallback(
-    (value): string | undefined =>
-      isRecord(value) && typeof value.kind === 'number'
-        ? syntaxKind[value.kind]
-        : undefined,
+    (value: unknown): string | undefined =>
+      isTsNode(value) ? syntaxKind[value.kind] : undefined,
     [syntaxKind],
   );
 
+  const getRange = useCallback(
+    (value: unknown): SelectedRange | undefined => {
+      if (props.value && isTsNode(value)) {
+        return getLocFor(
+          value.pos,
+          value.end,
+          // @ts-expect-error: unsafe cast
+          props.value as SourceFile,
+        );
+      }
+      return undefined;
+    },
+    [props.value],
+  );
+
   return (
     <ASTViewer
+      getRange={getRange}
       getTooltip={getTooltip}
       getNodeName={getNodeName}
-      value={props.value}
+      {...props}
     />
   );
 }
diff --git a/packages/website/src/components/ast/ASTViewer.tsx b/packages/website/src/components/ast/ASTViewer.tsx
index 2b0a2c82e6b5..4de785f438cc 100644
--- a/packages/website/src/components/ast/ASTViewer.tsx
+++ b/packages/website/src/components/ast/ASTViewer.tsx
@@ -1,21 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import styles from './ASTViewer.module.css';
 
-import type {
-  ASTViewerBaseProps,
-  SelectedPosition,
-  GetNodeNameFn,
-  GetTooltipFn,
-} from './types';
+import type { SelectedPosition, ASTViewerProps } from './types';
 
 import { ComplexItem } from './Elements';
 import { isRecord } from './utils';
 
-export interface ASTViewerProps extends ASTViewerBaseProps {
-  readonly getNodeName: GetNodeNameFn;
-  readonly getTooltip?: GetTooltipFn;
-}
-
 function ASTViewer(props: ASTViewerProps): JSX.Element {
   const [selection, setSelection] = useState<SelectedPosition | null>(null);
 
@@ -35,6 +25,7 @@ function ASTViewer(props: ASTViewerProps): JSX.Element {
       <ComplexItem
         getNodeName={props.getNodeName}
         getTooltip={props.getTooltip}
+        getRange={props.getRange}
         value={props.value}
         level="ast"
         selection={selection}
diff --git a/packages/website/src/components/ast/Elements.tsx b/packages/website/src/components/ast/Elements.tsx
index cfedd3884a2a..83a6e9844a12 100644
--- a/packages/website/src/components/ast/Elements.tsx
+++ b/packages/website/src/components/ast/Elements.tsx
@@ -5,7 +5,6 @@ import type { GenericParams } from './types';
 import {
   hasChildInRange,
   isArrayInRange,
-  isEsNode,
   isInRange,
   isRecord,
   propsToFilter,
@@ -40,28 +39,33 @@ export function ComplexItem(
 
   const onHover = useCallback(
     (state: boolean) => {
-      if (props.onSelectNode && isEsNode(props.value)) {
-        props.onSelectNode(state ? props.value.loc : null);
+      if (props.onSelectNode) {
+        const range = props.getRange(props.value);
+        if (range) {
+          props.onSelectNode(state ? range : null);
+        }
       }
     },
     [props.value],
   );
 
   useEffect(() => {
-    const selected = props.isArray
-      ? isArrayInRange(props.selection, props.value)
-      : isInRange(props.selection, props.value);
+    const selected = props.selection
+      ? props.isArray
+        ? isArrayInRange(props.selection, props.value, props.getRange)
+        : isInRange(props.selection, props.value, props.getRange)
+      : false;
 
     setIsSelected(
       props.level !== 'ast' &&
         selected &&
-        !hasChildInRange(props.selection, model),
+        !hasChildInRange(props.selection, model, props.getRange),
     );
 
     if (selected && !isExpanded) {
       setIsExpanded(selected);
     }
-  }, [model, props.selection, props.value, props.isArray]);
+  }, [model, props.selection, props.value, props.isArray, props.getRange]);
 
   return (
     <ItemGroup
@@ -83,6 +87,7 @@ export function ComplexItem(
               key={`${props.level}_${item[0]}[${index}]`}
               getNodeName={props.getNodeName}
               getTooltip={props.getTooltip}
+              getRange={props.getRange}
               selection={props.selection}
               propName={item[0]}
               value={item[1]}
@@ -132,6 +137,7 @@ export function ElementItem(props: GenericParams<unknown>): JSX.Element {
         propName={props.propName}
         getNodeName={props.getNodeName}
         getTooltip={props.getTooltip}
+        getRange={props.getRange}
         value={props.value}
         selection={props.selection}
         onSelectNode={props.onSelectNode}
diff --git a/packages/website/src/components/ast/types.ts b/packages/website/src/components/ast/types.ts
index 4c5f82aee2fa..b6807889f320 100644
--- a/packages/website/src/components/ast/types.ts
+++ b/packages/website/src/components/ast/types.ts
@@ -4,6 +4,7 @@ import Monaco from 'monaco-editor';
 
 export type GetNodeNameFn = (data: unknown) => string | undefined;
 export type GetTooltipFn = (key: string, data: unknown) => string | undefined;
+export type GetRangeFn = (data: unknown) => SelectedRange | undefined;
 export type OnSelectNodeFn = (node: SelectedRange | null) => void;
 
 export interface GenericParams<V> {
@@ -14,6 +15,7 @@ export interface GenericParams<V> {
   readonly onSelectNode?: OnSelectNodeFn;
   readonly getNodeName: GetNodeNameFn;
   readonly getTooltip?: GetTooltipFn;
+  readonly getRange: GetRangeFn;
   readonly isArray?: boolean;
 }
 
@@ -23,4 +25,10 @@ export interface ASTViewerBaseProps {
   readonly onSelectNode?: OnSelectNodeFn;
 }
 
+export interface ASTViewerProps extends ASTViewerBaseProps {
+  readonly getNodeName: GetNodeNameFn;
+  readonly getTooltip?: GetTooltipFn;
+  readonly getRange: GetRangeFn;
+}
+
 export type { SelectedPosition, SelectedRange };
diff --git a/packages/website/src/components/ast/utils.ts b/packages/website/src/components/ast/utils.ts
index 0735cf39ebce..821af6ced2b0 100644
--- a/packages/website/src/components/ast/utils.ts
+++ b/packages/website/src/components/ast/utils.ts
@@ -1,5 +1,5 @@
-import type { TSESTree } from '@typescript-eslint/website-eslint';
-import type { SelectedPosition } from './types';
+import type { SelectedPosition, SelectedRange } from './types';
+import { GetRangeFn } from './types';
 
 export const propsToFilter = [
   'parent',
@@ -13,18 +13,19 @@ export const propsToFilter = [
   'modifierFlagsCache',
   'transformFlags',
   'resolvedModules',
+  'imports',
 ];
 
-export function isWithinNode(
+export function isWithinRange(
   loc: SelectedPosition,
-  start: SelectedPosition,
-  end: SelectedPosition,
+  range: SelectedRange,
 ): boolean {
   const canStart =
-    start.line < loc.line ||
-    (start.line === loc.line && start.column <= loc.column);
+    range.start.line < loc.line ||
+    (range.start.line === loc.line && range.start.column <= loc.column);
   const canEnd =
-    end.line > loc.line || (end.line === loc.line && end.column >= loc.column);
+    range.end.line > loc.line ||
+    (range.end.line === loc.line && range.end.column >= loc.column);
   return canStart && canEnd;
 }
 
@@ -42,43 +43,44 @@ export function isRecord(value: unknown): value is Record<string, unknown> {
   return objType(value) === 'Object';
 }
 
-export function isEsNode(
-  value: unknown,
-): value is Record<string, unknown> & TSESTree.BaseNode {
-  return isRecord(value) && 'type' in value && 'loc' in value;
-}
-
 export function isInRange(
   position: SelectedPosition | null | undefined,
   value: unknown,
+  getRange: GetRangeFn,
 ): boolean {
-  return Boolean(
-    position &&
-      isEsNode(value) &&
-      isWithinNode(position, value.loc.start, value.loc.end),
-  );
+  if (!position) {
+    return false;
+  }
+  const range = getRange(value);
+  if (!range) {
+    return false;
+  }
+  return isWithinRange(position, range);
 }
 
 export function isArrayInRange(
   position: SelectedPosition | null | undefined,
   value: unknown,
+  getRange: GetRangeFn,
 ): boolean {
   return Boolean(
     position &&
       Array.isArray(value) &&
-      value.some(item => isInRange(position, item)),
+      value.some(item => isInRange(position, item, getRange)),
   );
 }
 
 export function hasChildInRange(
   position: SelectedPosition | null | undefined,
   value: [string, unknown][],
+  getRange: GetRangeFn,
 ): boolean {
   return Boolean(
     position &&
       value.some(
         ([, item]) =>
-          isInRange(position, item) || isArrayInRange(position, item),
+          isInRange(position, item, getRange) ||
+          isArrayInRange(position, item, getRange),
       ),
   );
 }

From 3702d9b2d105153f9eaa43ef64752d9156052484 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Sun, 5 Dec 2021 12:16:17 +0100
Subject: [PATCH 11/14] docs(website): allow configuration of filterProps

---
 .../website/src/components/ASTEsViewer.tsx    | 53 ++++++++++++-------
 .../website/src/components/ASTTsViewer.tsx    | 28 ++++++++++
 .../src/components/ast/ASTViewer.module.css   | 11 ++++
 .../website/src/components/ast/ASTViewer.tsx  |  1 +
 .../website/src/components/ast/Elements.tsx   | 19 ++-----
 .../website/src/components/ast/ItemGroup.tsx  |  4 +-
 .../src/components/ast/PropertyName.tsx       | 43 ++++++++-------
 packages/website/src/components/ast/types.ts  |  3 ++
 packages/website/src/components/ast/utils.ts  | 15 ------
 9 files changed, 110 insertions(+), 67 deletions(-)

diff --git a/packages/website/src/components/ASTEsViewer.tsx b/packages/website/src/components/ASTEsViewer.tsx
index 0a55c1b6b9d7..5befa88c70ac 100644
--- a/packages/website/src/components/ASTEsViewer.tsx
+++ b/packages/website/src/components/ASTEsViewer.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import ASTViewer from './ast/ASTViewer';
 import { isRecord } from './ast/utils';
@@ -11,23 +11,40 @@ function isEsNode(
   return isRecord(value) && 'type' in value && 'loc' in value;
 }
 
-function getNodeName(value: unknown): string | undefined {
-  if (isEsNode(value)) {
-    return String(value.type);
-  }
-  return undefined;
-}
-
-function getRange(value: unknown): SelectedRange | undefined {
-  if (isEsNode(value)) {
-    return {
-      start: value.loc.start,
-      end: value.loc.end,
-    };
-  }
-  return undefined;
-}
+export const propsToFilter = ['parent', 'comments', 'tokens'];
 
 export default function ASTEsViewer(props: ASTViewerBaseProps): JSX.Element {
-  return <ASTViewer getRange={getRange} getNodeName={getNodeName} {...props} />;
+  const filterProps = useCallback(
+    (item: [string, unknown]): boolean =>
+      !propsToFilter.includes(item[0]) &&
+      !item[0].startsWith('_') &&
+      item[1] !== undefined,
+    [],
+  );
+
+  const getRange = useCallback(
+    (value: unknown): SelectedRange | undefined =>
+      isEsNode(value)
+        ? {
+            start: value.loc.start,
+            end: value.loc.end,
+          }
+        : undefined,
+    [],
+  );
+
+  const getNodeName = useCallback(
+    (value: unknown): string | undefined =>
+      isEsNode(value) ? String(value.type) : undefined,
+    [],
+  );
+
+  return (
+    <ASTViewer
+      filterProps={filterProps}
+      getRange={getRange}
+      getNodeName={getNodeName}
+      {...props}
+    />
+  );
 }
diff --git a/packages/website/src/components/ASTTsViewer.tsx b/packages/website/src/components/ASTTsViewer.tsx
index be6fde7660c1..6e06aeac2edf 100644
--- a/packages/website/src/components/ASTTsViewer.tsx
+++ b/packages/website/src/components/ASTTsViewer.tsx
@@ -64,15 +64,30 @@ export function getLocFor(
   };
 }
 
+export const propsToFilter = [
+  'parent',
+  'jsDoc',
+  'lineMap',
+  'externalModuleIndicator',
+  'bindDiagnostics',
+  'transformFlags',
+  'resolvedModules',
+  'imports',
+];
+
 export default function ASTTsViewer(props: ASTTsViewerProps): JSX.Element {
   const [syntaxKind, setSyntaxKind] = useState<Record<number, string>>({});
   const [nodeFlags, setNodeFlags] = useState<Record<number, string>>({});
   const [tokenFlags, setTokenFlags] = useState<Record<number, string>>({});
+  const [modifierFlags, setModifierFlags] = useState<Record<number, string>>(
+    {},
+  );
 
   useEffect(() => {
     setSyntaxKind(extractEnum(window.ts.SyntaxKind));
     setNodeFlags(extractEnum(window.ts.NodeFlags));
     setTokenFlags(extractEnum(window.ts.TokenFlags));
+    setModifierFlags(extractEnum(window.ts.ModifierFlags));
   }, [props.version]);
 
   const getTooltip = useCallback(
@@ -81,6 +96,10 @@ export default function ASTTsViewer(props: ASTTsViewerProps): JSX.Element {
         return getFlagNamesFromEnum(nodeFlags, value, 'NodeFlags').join('\n');
       } else if (key === 'numericLiteralFlags' && typeof value === 'number') {
         return getFlagNamesFromEnum(tokenFlags, value, 'TokenFlags').join('\n');
+      } else if (key === 'modifierFlagsCache' && typeof value === 'number') {
+        return getFlagNamesFromEnum(modifierFlags, value, 'ModifierFlags').join(
+          '\n',
+        );
       } else if (key === 'kind' && typeof value === 'number') {
         return `SyntaxKind.${syntaxKind[value]}`;
       }
@@ -95,6 +114,14 @@ export default function ASTTsViewer(props: ASTTsViewerProps): JSX.Element {
     [syntaxKind],
   );
 
+  const filterProps = useCallback(
+    (item: [string, unknown]): boolean =>
+      !propsToFilter.includes(item[0]) &&
+      !item[0].startsWith('_') &&
+      item[1] !== undefined,
+    [],
+  );
+
   const getRange = useCallback(
     (value: unknown): SelectedRange | undefined => {
       if (props.value && isTsNode(value)) {
@@ -112,6 +139,7 @@ export default function ASTTsViewer(props: ASTTsViewerProps): JSX.Element {
 
   return (
     <ASTViewer
+      filterProps={filterProps}
       getRange={getRange}
       getTooltip={getTooltip}
       getNodeName={getNodeName}
diff --git a/packages/website/src/components/ast/ASTViewer.module.css b/packages/website/src/components/ast/ASTViewer.module.css
index 855148770880..ae132be15d5b 100644
--- a/packages/website/src/components/ast/ASTViewer.module.css
+++ b/packages/website/src/components/ast/ASTViewer.module.css
@@ -42,6 +42,17 @@
   width: fit-content;
 }
 
+.tokenName,
+.propName,
+.propNumber,
+.propEmpty,
+.propRegExp,
+.propClass,
+.propBoolean,
+.propString {
+  cursor: default;
+}
+
 .tokenName {
   color: #2aa198;
 }
diff --git a/packages/website/src/components/ast/ASTViewer.tsx b/packages/website/src/components/ast/ASTViewer.tsx
index 4de785f438cc..aa1e35687ec0 100644
--- a/packages/website/src/components/ast/ASTViewer.tsx
+++ b/packages/website/src/components/ast/ASTViewer.tsx
@@ -26,6 +26,7 @@ function ASTViewer(props: ASTViewerProps): JSX.Element {
         getNodeName={props.getNodeName}
         getTooltip={props.getTooltip}
         getRange={props.getRange}
+        filterProps={props.filterProps}
         value={props.value}
         level="ast"
         selection={selection}
diff --git a/packages/website/src/components/ast/Elements.tsx b/packages/website/src/components/ast/Elements.tsx
index 83a6e9844a12..be573770d94d 100644
--- a/packages/website/src/components/ast/Elements.tsx
+++ b/packages/website/src/components/ast/Elements.tsx
@@ -2,13 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import type { GenericParams } from './types';
 
-import {
-  hasChildInRange,
-  isArrayInRange,
-  isInRange,
-  isRecord,
-  propsToFilter,
-} from './utils';
+import { hasChildInRange, isArrayInRange, isInRange, isRecord } from './utils';
 
 import styles from '@site/src/components/ast/ASTViewer.module.css';
 
@@ -28,14 +22,9 @@ export function ComplexItem(
 
   useEffect(() => {
     setModel(
-      Object.entries(props.value).filter(
-        item =>
-          !propsToFilter.includes(item[0]) &&
-          !item[0].startsWith('_') &&
-          item[1] !== undefined,
-      ),
+      Object.entries(props.value).filter(item => props.filterProps(item)),
     );
-  }, [props.value]);
+  }, [props.value, props.filterProps]);
 
   const onHover = useCallback(
     (state: boolean) => {
@@ -88,6 +77,7 @@ export function ComplexItem(
               getNodeName={props.getNodeName}
               getTooltip={props.getTooltip}
               getRange={props.getRange}
+              filterProps={props.filterProps}
               selection={props.selection}
               propName={item[0]}
               value={item[1]}
@@ -138,6 +128,7 @@ export function ElementItem(props: GenericParams<unknown>): JSX.Element {
         getNodeName={props.getNodeName}
         getTooltip={props.getTooltip}
         getRange={props.getRange}
+        filterProps={props.filterProps}
         value={props.value}
         selection={props.selection}
         onSelectNode={props.onSelectNode}
diff --git a/packages/website/src/components/ast/ItemGroup.tsx b/packages/website/src/components/ast/ItemGroup.tsx
index e1656e2432f2..a117c9c05f89 100644
--- a/packages/website/src/components/ast/ItemGroup.tsx
+++ b/packages/website/src/components/ast/ItemGroup.tsx
@@ -16,7 +16,7 @@ export interface ItemGroupProps {
   readonly isSelected?: boolean;
   readonly isExpanded?: boolean;
   readonly canExpand?: boolean;
-  readonly onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+  readonly onClick?: (e: MouseEvent<HTMLElement>) => void;
   readonly onHover?: (e: boolean) => void;
   readonly children: JSX.Element | false | (JSX.Element | false)[];
 }
@@ -44,7 +44,7 @@ export default function ItemGroup(props: ItemGroupProps): JSX.Element {
         typeName={props.getNodeName(props.value)}
         onMouseEnter={(): void => props.onHover?.(true)}
         onMouseLeave={(): void => props.onHover?.(false)}
-        onClick={props.onClick}
+        onClick={(props.canExpand && props.onClick) || undefined}
       />
       {React.Children.map(props.children, child => child)}
     </div>
diff --git a/packages/website/src/components/ast/PropertyName.tsx b/packages/website/src/components/ast/PropertyName.tsx
index 184249bde4ec..90ca003c3dfa 100644
--- a/packages/website/src/components/ast/PropertyName.tsx
+++ b/packages/website/src/components/ast/PropertyName.tsx
@@ -5,42 +5,49 @@ import styles from './ASTViewer.module.css';
 export interface PropertyNameProps {
   readonly typeName?: string;
   readonly propName?: string;
-  readonly onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-  readonly onMouseEnter?: (e: MouseEvent<HTMLButtonElement>) => void;
-  readonly onMouseLeave?: (e: MouseEvent<HTMLButtonElement>) => void;
+  readonly onClick?: (e: MouseEvent<HTMLElement>) => void;
+  readonly onMouseEnter?: (e: MouseEvent<HTMLElement>) => void;
+  readonly onMouseLeave?: (e: MouseEvent<HTMLElement>) => void;
 }
 
 export default function PropertyName(props: PropertyNameProps): JSX.Element {
-  return (
+  return props.onClick ? (
     <>
       {props.propName && (
-        <button
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
+        <a
+          href="javascript:void(0)"
           onMouseEnter={props.onMouseEnter}
           onMouseLeave={props.onMouseLeave}
           onClick={props.onClick}
-          className={clsx(
-            'clean-btn',
-            styles.propName,
-            props.onClick && styles.clickable,
-          )}
+          className={clsx(styles.propName, styles.clickable)}
         >
           {props.propName}
-        </button>
+        </a>
       )}
       {props.propName && <span>: </span>}
       {props.typeName && (
-        <button
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
+        <a
+          href="javascript:void(0)"
           onMouseEnter={props.onMouseEnter}
           onMouseLeave={props.onMouseLeave}
           onClick={props.onClick}
-          className={clsx(
-            'clean-btn',
-            styles.tokenName,
-            props.onClick && styles.clickable,
-          )}
+          className={clsx(styles.tokenName, styles.clickable)}
         >
           {props.typeName}
-        </button>
+        </a>
+      )}
+      {props.typeName && <span> </span>}
+    </>
+  ) : (
+    <>
+      {props.propName && (
+        <span className={styles.propName}>{props.propName}</span>
+      )}
+      {props.propName && <span>: </span>}
+      {props.typeName && (
+        <span className={styles.tokenName}>{props.typeName}</span>
       )}
       {props.typeName && <span> </span>}
     </>
diff --git a/packages/website/src/components/ast/types.ts b/packages/website/src/components/ast/types.ts
index b6807889f320..8b27865e3428 100644
--- a/packages/website/src/components/ast/types.ts
+++ b/packages/website/src/components/ast/types.ts
@@ -6,6 +6,7 @@ export type GetNodeNameFn = (data: unknown) => string | undefined;
 export type GetTooltipFn = (key: string, data: unknown) => string | undefined;
 export type GetRangeFn = (data: unknown) => SelectedRange | undefined;
 export type OnSelectNodeFn = (node: SelectedRange | null) => void;
+export type FilterPropsFn = (item: [string, unknown]) => boolean;
 
 export interface GenericParams<V> {
   readonly propName?: string;
@@ -15,6 +16,7 @@ export interface GenericParams<V> {
   readonly onSelectNode?: OnSelectNodeFn;
   readonly getNodeName: GetNodeNameFn;
   readonly getTooltip?: GetTooltipFn;
+  readonly filterProps: FilterPropsFn;
   readonly getRange: GetRangeFn;
   readonly isArray?: boolean;
 }
@@ -29,6 +31,7 @@ export interface ASTViewerProps extends ASTViewerBaseProps {
   readonly getNodeName: GetNodeNameFn;
   readonly getTooltip?: GetTooltipFn;
   readonly getRange: GetRangeFn;
+  readonly filterProps: FilterPropsFn;
 }
 
 export type { SelectedPosition, SelectedRange };
diff --git a/packages/website/src/components/ast/utils.ts b/packages/website/src/components/ast/utils.ts
index 821af6ced2b0..4573fc143b48 100644
--- a/packages/website/src/components/ast/utils.ts
+++ b/packages/website/src/components/ast/utils.ts
@@ -1,21 +1,6 @@
 import type { SelectedPosition, SelectedRange } from './types';
 import { GetRangeFn } from './types';
 
-export const propsToFilter = [
-  'parent',
-  'comments',
-  'tokens',
-  // 'loc',
-  'jsDoc',
-  'lineMap',
-  'externalModuleIndicator',
-  'bindDiagnostics',
-  'modifierFlagsCache',
-  'transformFlags',
-  'resolvedModules',
-  'imports',
-];
-
 export function isWithinRange(
   loc: SelectedPosition,
   range: SelectedRange,

From 37ecbfd12f9fa11e15f07f4c31b7a85f289693e8 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Sun, 5 Dec 2021 12:17:22 +0100
Subject: [PATCH 12/14] docs(website): do not include last column in range

---
 packages/website/src/components/ast/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/website/src/components/ast/utils.ts b/packages/website/src/components/ast/utils.ts
index 4573fc143b48..a06436e9c356 100644
--- a/packages/website/src/components/ast/utils.ts
+++ b/packages/website/src/components/ast/utils.ts
@@ -7,7 +7,7 @@ export function isWithinRange(
 ): boolean {
   const canStart =
     range.start.line < loc.line ||
-    (range.start.line === loc.line && range.start.column <= loc.column);
+    (range.start.line === loc.line && range.start.column < loc.column);
   const canEnd =
     range.end.line > loc.line ||
     (range.end.line === loc.line && range.end.column >= loc.column);

From 770d1550df688577bda5f77829079aa2b43ce29d Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Sun, 5 Dec 2021 12:30:33 +0100
Subject: [PATCH 13/14] docs(website): remove redundant styles

---
 .../src/components/ast/ASTViewer.module.css   | 19 -------------------
 .../src/components/ast/PropertyName.tsx       |  5 ++---
 2 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/packages/website/src/components/ast/ASTViewer.module.css b/packages/website/src/components/ast/ASTViewer.module.css
index ae132be15d5b..84a40b866c26 100644
--- a/packages/website/src/components/ast/ASTViewer.module.css
+++ b/packages/website/src/components/ast/ASTViewer.module.css
@@ -42,17 +42,6 @@
   width: fit-content;
 }
 
-.tokenName,
-.propName,
-.propNumber,
-.propEmpty,
-.propRegExp,
-.propClass,
-.propBoolean,
-.propString {
-  cursor: default;
-}
-
 .tokenName {
   color: #2aa198;
 }
@@ -94,11 +83,3 @@
   white-space: nowrap;
   vertical-align: bottom;
 }
-
-.clickable {
-  cursor: pointer;
-}
-
-.clickable:hover {
-  text-decoration: underline;
-}
diff --git a/packages/website/src/components/ast/PropertyName.tsx b/packages/website/src/components/ast/PropertyName.tsx
index 90ca003c3dfa..36c3a6341534 100644
--- a/packages/website/src/components/ast/PropertyName.tsx
+++ b/packages/website/src/components/ast/PropertyName.tsx
@@ -1,5 +1,4 @@
 import React, { MouseEvent } from 'react';
-import clsx from 'clsx';
 import styles from './ASTViewer.module.css';
 
 export interface PropertyNameProps {
@@ -20,7 +19,7 @@ export default function PropertyName(props: PropertyNameProps): JSX.Element {
           onMouseEnter={props.onMouseEnter}
           onMouseLeave={props.onMouseLeave}
           onClick={props.onClick}
-          className={clsx(styles.propName, styles.clickable)}
+          className={styles.propName}
         >
           {props.propName}
         </a>
@@ -33,7 +32,7 @@ export default function PropertyName(props: PropertyNameProps): JSX.Element {
           onMouseEnter={props.onMouseEnter}
           onMouseLeave={props.onMouseLeave}
           onClick={props.onClick}
-          className={clsx(styles.tokenName, styles.clickable)}
+          className={styles.tokenName}
         >
           {props.typeName}
         </a>

From 137fd38c83551e5485aa3155acdafe72327619c4 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Thu, 9 Dec 2021 10:52:56 +0100
Subject: [PATCH 14/14] docs: apply changes from code review

---
 .../{ASTEsViewer.tsx => ASTViewerESTree.tsx}   | 10 ++++++----
 .../{ASTTsViewer.tsx => ASTViewerTS.tsx}       |  2 +-
 .../website/src/components/OptionsSelector.tsx |  6 +++---
 packages/website/src/components/Playground.tsx |  8 ++++----
 ...useDelayToggle.ts => useDebouncedToggle.ts} |  2 +-
 .../website/src/components/inputs/Dropdown.tsx | 18 ++++++------------
 6 files changed, 21 insertions(+), 25 deletions(-)
 rename packages/website/src/components/{ASTEsViewer.tsx => ASTViewerESTree.tsx} (85%)
 rename packages/website/src/components/{ASTTsViewer.tsx => ASTViewerTS.tsx} (98%)
 rename packages/website/src/components/hooks/{useDelayToggle.ts => useDebouncedToggle.ts} (92%)

diff --git a/packages/website/src/components/ASTEsViewer.tsx b/packages/website/src/components/ASTViewerESTree.tsx
similarity index 85%
rename from packages/website/src/components/ASTEsViewer.tsx
rename to packages/website/src/components/ASTViewerESTree.tsx
index 5befa88c70ac..899daeedba9a 100644
--- a/packages/website/src/components/ASTEsViewer.tsx
+++ b/packages/website/src/components/ASTViewerESTree.tsx
@@ -5,7 +5,7 @@ import { isRecord } from './ast/utils';
 import type { ASTViewerBaseProps, SelectedRange } from './ast/types';
 import { TSESTree } from '@typescript-eslint/website-eslint';
 
-function isEsNode(
+function isESTreeNode(
   value: unknown,
 ): value is Record<string, unknown> & TSESTree.BaseNode {
   return isRecord(value) && 'type' in value && 'loc' in value;
@@ -13,7 +13,9 @@ function isEsNode(
 
 export const propsToFilter = ['parent', 'comments', 'tokens'];
 
-export default function ASTEsViewer(props: ASTViewerBaseProps): JSX.Element {
+export default function ASTViewerESTree(
+  props: ASTViewerBaseProps,
+): JSX.Element {
   const filterProps = useCallback(
     (item: [string, unknown]): boolean =>
       !propsToFilter.includes(item[0]) &&
@@ -24,7 +26,7 @@ export default function ASTEsViewer(props: ASTViewerBaseProps): JSX.Element {
 
   const getRange = useCallback(
     (value: unknown): SelectedRange | undefined =>
-      isEsNode(value)
+      isESTreeNode(value)
         ? {
             start: value.loc.start,
             end: value.loc.end,
@@ -35,7 +37,7 @@ export default function ASTEsViewer(props: ASTViewerBaseProps): JSX.Element {
 
   const getNodeName = useCallback(
     (value: unknown): string | undefined =>
-      isEsNode(value) ? String(value.type) : undefined,
+      isESTreeNode(value) ? String(value.type) : undefined,
     [],
   );
 
diff --git a/packages/website/src/components/ASTTsViewer.tsx b/packages/website/src/components/ASTViewerTS.tsx
similarity index 98%
rename from packages/website/src/components/ASTTsViewer.tsx
rename to packages/website/src/components/ASTViewerTS.tsx
index 6e06aeac2edf..f30265ba574e 100644
--- a/packages/website/src/components/ASTTsViewer.tsx
+++ b/packages/website/src/components/ASTViewerTS.tsx
@@ -75,7 +75,7 @@ export const propsToFilter = [
   'imports',
 ];
 
-export default function ASTTsViewer(props: ASTTsViewerProps): JSX.Element {
+export default function ASTViewerTS(props: ASTTsViewerProps): JSX.Element {
   const [syntaxKind, setSyntaxKind] = useState<Record<number, string>>({});
   const [nodeFlags, setNodeFlags] = useState<Record<number, string>>({});
   const [tokenFlags, setTokenFlags] = useState<Record<number, string>>({});
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
index 0e54e5d2c50f..ee1f14648d9d 100644
--- a/packages/website/src/components/OptionsSelector.tsx
+++ b/packages/website/src/components/OptionsSelector.tsx
@@ -10,7 +10,7 @@ import Tooltip from './inputs/Tooltip';
 import EditIcon from './icons/EditIcon';
 import CopyIcon from './icons/CopyIcon';
 
-import useDelayToggle from './hooks/useDelayToggle';
+import useDebouncedToggle from './hooks/useDebouncedToggle';
 
 import { createMarkdown } from './lib/markdown';
 
@@ -43,8 +43,8 @@ function OptionsSelector({
 }: OptionsSelectorParams): JSX.Element {
   const [eslintModal, setEslintModal] = useState<boolean>(false);
   const [typeScriptModal, setTypeScriptModal] = useState<boolean>(false);
-  const [copyLink, setCopyLink] = useDelayToggle<boolean>(false);
-  const [copyMarkdown, setCopyMarkdown] = useDelayToggle<boolean>(false);
+  const [copyLink, setCopyLink] = useDebouncedToggle<boolean>(false);
+  const [copyMarkdown, setCopyMarkdown] = useDebouncedToggle<boolean>(false);
 
   const updateTS = useCallback(
     (version: string) => {
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index 0199ca5d1fea..844b955dd8b8 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -12,8 +12,8 @@ import { LoadingEditor } from './editor/LoadingEditor';
 import { EditorEmbed } from './editor/EditorEmbed';
 import { shallowEqual } from './lib/shallowEqual';
 
-import ASTEsViewer from './ASTEsViewer';
-import ASTTsViewer from './ASTTsViewer';
+import ASTViewerESTree from './ASTViewerESTree';
+import ASTViewerTS from './ASTViewerTS';
 
 import type { RuleDetails, SelectedRange } from './types';
 
@@ -98,7 +98,7 @@ function Playground(): JSX.Element {
         {state.showAST && (
           <div className={styles.astViewer}>
             {(tsAst && state.showAST === 'ts' && (
-              <ASTTsViewer
+              <ASTViewerTS
                 value={tsAst}
                 position={position}
                 onSelectNode={updateSelectedNode}
@@ -106,7 +106,7 @@ function Playground(): JSX.Element {
               />
             )) ||
               (esAst && (
-                <ASTEsViewer
+                <ASTViewerESTree
                   value={esAst}
                   position={position}
                   onSelectNode={updateSelectedNode}
diff --git a/packages/website/src/components/hooks/useDelayToggle.ts b/packages/website/src/components/hooks/useDebouncedToggle.ts
similarity index 92%
rename from packages/website/src/components/hooks/useDelayToggle.ts
rename to packages/website/src/components/hooks/useDebouncedToggle.ts
index fe0e61a9e17d..73b655d28e79 100644
--- a/packages/website/src/components/hooks/useDelayToggle.ts
+++ b/packages/website/src/components/hooks/useDebouncedToggle.ts
@@ -1,6 +1,6 @@
 import { useRef, useCallback, useState } from 'react';
 
-export default function useDelayToggle<T>(
+export default function useDebouncedToggle<T>(
   value: T,
   timeout = 1000,
 ): [T, (data: T) => void] {
diff --git a/packages/website/src/components/inputs/Dropdown.tsx b/packages/website/src/components/inputs/Dropdown.tsx
index 56a7de6824b0..929f4bc6bbbc 100644
--- a/packages/website/src/components/inputs/Dropdown.tsx
+++ b/packages/website/src/components/inputs/Dropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styles from '../OptionsSelector.module.css';
 import clsx from 'clsx';
 
@@ -18,17 +18,11 @@ export interface DropdownProps<T> {
 function Dropdown<T extends boolean | string | number>(
   props: DropdownProps<T>,
 ): JSX.Element {
-  const [options, setOptions] = useState<DropdownOption<T>[]>([]);
-
-  useEffect(() => {
-    setOptions(
-      props.options.map(option =>
-        typeof option !== 'object'
-          ? { label: String(option), value: option }
-          : option,
-      ),
-    );
-  }, [props.options]);
+  const options: DropdownOption<T>[] = props.options.map(option =>
+    typeof option !== 'object'
+      ? { label: String(option), value: option }
+      : option,
+  );
 
   return (
     <select