chore(website): [playground] add copy as json and simplify ast viewer

packages/website/src/components/Playground.tsx

@@ -1,14 +1,11 @@
+import { useWindowSize } from '@docusaurus/theme-common';
 import type { TSESTree } from '@typescript-eslint/utils';
 import clsx from 'clsx';
 import type * as ESQuery from 'esquery';
-import type Monaco from 'monaco-editor';
-import React, { useCallback, useReducer, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import type { SourceFile } from 'typescript';
 
-import { useMediaQuery } from '../hooks/useMediaQuery';
-import ASTViewerESTree from './ASTViewerESTree';
-import ASTViewerScope from './ASTViewerScope';
-import ASTViewerTS from './ASTViewerTS';
+import ASTViewer from './ast/ASTViewer';
 import { detailTabs } from './config';
 import ConfigEslint from './config/ConfigEslint';
 import ConfigTypeScript from './config/ConfigTypeScript';
@@ -20,7 +17,6 @@ import { ESQueryFilter } from './ESQueryFilter';
 import useHashState from './hooks/useHashState';
 import EditorTabs from './layout/EditorTabs';
 import Loader from './layout/Loader';
-import { shallowEqual } from './lib/shallowEqual';
 import OptionsSelector from './OptionsSelector';
 import styles from './Playground.module.css';
 import ConditionalSplitPane from './SplitPane/ConditionalSplitPane';
@@ -32,22 +28,6 @@ import type {
   TabType,
 } from './types';
 
-function rangeReducer<T extends SelectedRange | null>(
-  prevState: T,
-  action: T,
-): T {
-  if (prevState !== action) {
-    if (
-      !prevState ||
-      !action ||
-      !shallowEqual(prevState.start, action.start) ||
-      !shallowEqual(prevState.end, action.end)
-    ) {
-      return action;
-    }
-  }
-  return prevState;
-}
 function Playground(): JSX.Element {
   const [state, setState] = useHashState({
     jsx: false,
@@ -65,13 +45,13 @@ function Playground(): JSX.Element {
   const [ruleNames, setRuleNames] = useState<RuleDetails[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [tsVersions, setTSVersion] = useState<readonly string[]>([]);
-  const [selectedRange, setSelectedRange] = useReducer(rangeReducer, null);
-  const [position, setPosition] = useState<Monaco.Position | null>(null);
+  const [selectedRange, setSelectedRange] = useState<SelectedRange>();
+  const [position, setPosition] = useState<number>();
   const [activeTab, setTab] = useState<TabType>('code');
   const [showModal, setShowModal] = useState<TabType | false>(false);
   const [esQueryFilter, setEsQueryFilter] = useState<ESQuery.Selector>();
   const [esQueryError, setEsQueryError] = useState<Error>();
-  const enableSplitPanes = useMediaQuery('(min-width: 996px)');
+  const windowSize = useWindowSize();
 
   const updateModal = useCallback(
     (config?: Partial<ConfigModel>) => {
@@ -92,6 +72,15 @@ function Playground(): JSX.Element {
     [],
   );
 
+  const astToShow =
+    state.showAST === 'ts'
+      ? tsAst
+      : state.showAST === 'scope'
+      ? scope
+      : state.showAST === 'es'
+      ? esAst
+      : undefined;
+
   return (
     <div className={styles.codeContainer}>
       {ruleNames.length > 0 && (
@@ -109,7 +98,7 @@ function Playground(): JSX.Element {
       />
       <div className={styles.codeBlocks}>
         <ConditionalSplitPane
-          render={enableSplitPanes}
+          render={windowSize !== 'mobile'}
           split="vertical"
           minSize="10%"
           defaultSize="20rem"
@@ -126,7 +115,7 @@ function Playground(): JSX.Element {
             />
           </div>
           <ConditionalSplitPane
-            render={enableSplitPanes}
+            render={windowSize !== 'mobile'}
             split="vertical"
             minSize="10%"
             defaultSize="50%"
@@ -157,7 +146,7 @@ function Playground(): JSX.Element {
                 onTsASTChange={setTsAST}
                 onScopeChange={setScope}
                 onMarkersChange={setMarkers}
-                decoration={selectedRange}
+                selectedRange={selectedRange}
                 onChange={setState}
                 onLoaded={onLoaded}
                 onSelect={setPosition}
@@ -178,33 +167,21 @@ function Playground(): JSX.Element {
                 )}
               </div>
 
-              {(state.showAST === 'ts' && tsAst && (
-                <ASTViewerTS
-                  value={tsAst}
-                  position={position}
-                  onSelectNode={setSelectedRange}
+              {(state.showAST === 'es' && esQueryError && (
+                <ErrorViewer
+                  type="warning"
+                  title="Invalid Selector"
+                  value={esQueryError}
                 />
               )) ||
-                (state.showAST === 'scope' && scope && (
-                  <ASTViewerScope
-                    value={scope}
-                    position={position}
-                    onSelectNode={setSelectedRange}
-                  />
-                )) ||
-                (state.showAST === 'es' && esQueryError && (
-                  <ErrorViewer
-                    type="warning"
-                    title="Invalid Selector"
-                    value={esQueryError}
-                  />
-                )) ||
-                (state.showAST === 'es' && esAst && (
-                  <ASTViewerESTree
-                    value={esAst}
-                    position={position}
-                    filter={esQueryFilter}
-                    onSelectNode={setSelectedRange}
+                (state.showAST && astToShow && (
+                  <ASTViewer
+                    key={String(state.showAST)}
+                    filter={state.showAST === 'es' ? esQueryFilter : undefined}
+                    value={astToShow}
+                    enableScrolling={true}
+                    cursorPosition={position}
+                    onHoverNode={setSelectedRange}
                   />
                 )) || <ErrorsViewer value={markers} />}
             </div>

packages/website/src/components/ast/ASTViewer.module.css

@@ -7,6 +7,12 @@
   line-height: 18px;
   letter-spacing: 0;
   font-feature-settings: 'liga' 0, 'calt' 0;
+  position: relative;
+  min-width: 100%;
+}
+
+.list * {
+  vertical-align: top;
 }
 
 .list,
@@ -47,6 +53,20 @@
   color: var(--token-color-class-name);
 }
 
+.propNumber,
+.propEmpty,
+.propRegExp,
+.propClass,
+.propBoolean,
+.propError,
+.propString {
+  display: inline-block;
+  max-width: 600px;
+  word-wrap: break-word;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
 .propName {
   color: var(--token-color-property);
 }
@@ -71,6 +91,10 @@
   color: var(--token-color-boolean);
 }
 
+.propError {
+  color: var(--token-color-deleted);
+}
+
 .propString {
   color: var(--token-color-string);
 }