feat: Add esquery selector textfield & highlighting of matched code

Fixes eslint#79

Author: pkerschbaum

package-lock.json

@@ -64,6 +64,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-scope": "^8.1.0",
     "espree": "^10.1.0",
+    "esquery": "^1.6.0",
     "global": "^4.4.0",
     "graphviz-react": "^1.2.5",
     "lucide-react": "^0.407.0",
@@ -77,6 +78,7 @@
   "devDependencies": {
     "@types/eslint-scope": "^3.7.7",
     "@types/espree": "^10.0.0",
+    "@types/esquery": "^1.5.4",
     "@types/node": "^18.19.44",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

package.json

@@ -126,3 +126,7 @@
 .cm-tooltip.cm-tooltip-autocomplete > ul {
 	border-radius: 0.125rem;
 }
+
+.eslint-code-explorer_highlight-range {
+	@apply bg-editorRangeHighlightColor;
+}

src/App.css

@@ -1,20 +1,29 @@
 import "./App.css";
+
 import { Navbar } from "./components/navbar";
 import { useExplorer } from "./hooks/use-explorer";
+import { useHighlightRanges } from "./hooks/use-highlight-ranges";
 import { tools } from "./lib/tools";
 import { Editor } from "./components/editor";
+import { EsquerySelectorInput } from "./components/esquery-selector-input";
 import { ToolSelector } from "./components/tool-selector";
 import { ThemeProvider } from "./components/theme-provider";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 function App() {
-	const { language, tool, code, setCode } = useExplorer();
+	const { language, tool, code, setCode, jsOptions } = useExplorer();
+
+	const highlightRanges = useHighlightRanges();
+
 	const activeTool = tools.find(({ value }) => value === tool) ?? tools[0];
 	return (
 		<ThemeProvider>
 			<div className="antialiased touch-manipulation font-sans">
 				<div className="flex flex-col h-screen">
 					<Navbar />
+					{jsOptions.esquerySelectorEnabled && (
+						<EsquerySelectorInput />
+					)}
 					<div className="h-full overflow-hidden">
 						<div className="border-t h-full">
 							<PanelGroup
@@ -24,6 +33,7 @@ function App() {
 								<Panel defaultSize={50} minSize={25}>
 									<Editor
 										value={code[language]}
+										highlightRanges={highlightRanges}
 										onChange={value => {
 											setCode({
 												...code,

src/App.tsx

@@ -80,6 +80,7 @@
 	--editor-bracket-match-outline-color: var(--color-neutral-200);
 	--editor-bracket-match-background-color: var(--color-neutral-100);
 	--editor-bracket-match-color: none;
+	--editor-range-highlight-color: 209deg 54% 81%;
 }
 
 .dark {
@@ -94,4 +95,5 @@
 	--editor-bracket-match-outline-color: var(--color-neutral-600);
 	--editor-bracket-match-background-color: var(--color-neutral-700);
 	--editor-bracket-match-color: var(--color-neutral-25);
+	--editor-range-highlight-color: 209deg 54% 31%;
 }

src/codemirror-themes.css

@@ -6,6 +6,7 @@ import { JavascriptAstTreeItem } from "./javascript-ast-tree-item";
 import type { FC } from "react";
 import { parseError } from "@/lib/parse-error";
 import { ErrorState } from "../error-boundary";
+import { parseJavascriptAST } from "@/lib/parse-javascript-ast";
 
 export const JavascriptAst: FC = () => {
 	const explorer = useExplorer();
@@ -15,12 +16,9 @@ export const JavascriptAst: FC = () => {
 	let tree: ReturnType<typeof espree.parse> | null = null;
 
 	try {
-		tree = espree.parse(explorer.code.javascript, {
-			ecmaVersion: explorer.jsOptions.esVersion,
-			sourceType: explorer.jsOptions.sourceType,
-			ecmaFeatures: {
-				jsx: explorer.jsOptions.isJSX,
-			},
+		tree = parseJavascriptAST({
+			code: explorer.code.javascript,
+			jsOptions: explorer.jsOptions,
 		});
 
 		ast = JSON.stringify(tree, null, 2);

src/components/ast/javascript-ast.tsx

@@ -16,6 +16,10 @@ import {
 	ESLintPlaygroundTheme,
 	ESLintPlaygroundHighlightStyle,
 } from "@/utils/codemirror-themes";
+import {
+	highlightRangesExtension,
+	type HighlightRange,
+} from "@/utils/highlight-ranges";
 
 const languageExtensions: Record<string, (isJSX?: boolean) => LanguageSupport> =
 	{
@@ -28,10 +32,16 @@ const languageExtensions: Record<string, (isJSX?: boolean) => LanguageSupport> =
 type EditorProperties = {
 	readOnly?: boolean;
 	value?: string;
+	highlightRanges?: HighlightRange[];
 	onChange?: (value: string) => void;
 };
 
-export const Editor: FC<EditorProperties> = ({ readOnly, value, onChange }) => {
+export const Editor: FC<EditorProperties> = ({
+	readOnly,
+	value,
+	highlightRanges = [],
+	onChange,
+}) => {
 	const { wrap, language, jsOptions } = useExplorer();
 	const { isJSX } = jsOptions;
 	const [isDragOver, setIsDragOver] = useState<boolean>(false);
@@ -50,6 +60,7 @@ export const Editor: FC<EditorProperties> = ({ readOnly, value, onChange }) => {
 		readOnly ? EditorState.readOnly.of(true) : [],
 		ESLintPlaygroundTheme,
 		ESLintPlaygroundHighlightStyle,
+		highlightRangesExtension(highlightRanges),
 	];
 
 	const debouncedOnChange = useCallback(

src/components/editor.tsx

@@ -0,0 +1,21 @@
+import { useId, type FC } from "react";
+import { Label } from "@/components/ui/label";
+import { TextField } from "@/components/ui/text-field";
+import { useExplorer } from "@/hooks/use-explorer";
+
+export const EsquerySelectorInput: FC = () => {
+	const { esquerySelector, setEsquerySelector } = useExplorer();
+	const htmlId = useId();
+
+	return (
+		<div className="space-y-1.5 m-2">
+			<Label htmlFor={htmlId}>esquery Selector</Label>
+			<TextField
+				id={htmlId}
+				className="w-full"
+				value={esquerySelector}
+				onChange={e => setEsquerySelector(e.target.value)}
+			/>
+		</div>
+	);
+};

src/components/esquery-selector-input.tsx

@@ -87,7 +87,8 @@ const CssPanel: React.FC = () => {
 const JavaScriptPanel = () => {
 	const explorer = useExplorer();
 	const { jsOptions, setJsOptions } = explorer;
-	const { parser, sourceType, esVersion, isJSX } = jsOptions;
+	const { parser, sourceType, esVersion, isJSX, esquerySelectorEnabled } =
+		jsOptions;
 	return (
 		<>
 			<LabeledSelect
@@ -137,6 +138,20 @@ const JavaScriptPanel = () => {
 				/>
 				<Label htmlFor="jsx">JSX</Label>
 			</div>
+
+			<div className="flex items-center gap-1.5">
+				<Switch
+					id="esquerySelector"
+					checked={esquerySelectorEnabled}
+					onCheckedChange={(value: boolean) => {
+						setJsOptions({
+							...jsOptions,
+							esquerySelectorEnabled: value,
+						});
+					}}
+				/>
+				<Label htmlFor="esquerySelector">esquery Selector</Label>
+			</div>
 		</>
 	);
 };

src/components/options.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type TextFieldProps = Exclude<
+	React.InputHTMLAttributes<HTMLInputElement>,
+	"type"
+>;
+
+const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<input
+				type="text"
+				className={cn(
+					"flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2",
+					className,
+				)}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+TextField.displayName = "TextField";
+
+export { TextField };

src/components/ui/text-field.tsx

@@ -33,6 +33,7 @@ export type JsOptions = {
 	sourceType: SourceType;
 	esVersion: Version;
 	isJSX: boolean;
+	esquerySelectorEnabled: boolean;
 };
 
 export type JsonOptions = {
@@ -89,6 +90,9 @@ type ExplorerState = {
 
 	pathIndex: PathIndex;
 	setPathIndex: (pathIndex: PathIndex) => void;
+
+	esquerySelector: string;
+	setEsquerySelector: (esqueryQuery: string) => void;
 };
 
 const hashStorage: StateStorage = {
@@ -145,6 +149,10 @@ export const useExplorer = create<ExplorerState>()(
 
 					pathIndex: defaultPathIndex,
 					setPathIndex: pathIndex => set({ pathIndex }),
+
+					esquerySelector: "",
+					setEsquerySelector: esquerySelector =>
+						set({ esquerySelector }),
 				}),
 				{
 					name: "eslint-explorer",

src/hooks/use-explorer.ts

@@ -0,0 +1,39 @@
+import esquery from "esquery";
+import { Node } from "acorn";
+import type { Node as EstreeNode } from "estree";
+import { useExplorer } from "@/hooks/use-explorer";
+import { parseJavascriptAST } from "@/lib/parse-javascript-ast";
+import type { HighlightRange } from "@/utils/highlight-ranges";
+
+export function useHighlightRanges() {
+	const { language, code, jsOptions, esquerySelector } = useExplorer();
+
+	let highlightRanges: HighlightRange[] = [];
+	if (language === "javascript" && jsOptions.esquerySelectorEnabled) {
+		if (jsOptions.esquerySelectorEnabled) {
+			try {
+				const tree = parseJavascriptAST({
+					code: code.javascript,
+					jsOptions: jsOptions,
+				});
+				/**
+				 * "esquery" uses type "Node" of "@types/estree", "espree" returns  "Node" of "acorn"
+				 * but they are compatible
+				 * Therefore, cast between "Node" of "acorn" and "Node" of "@types/estree"
+				 */
+				const esqueryMatchedNodes = esquery.match(
+					tree as EstreeNode,
+					esquery.parse(esquerySelector),
+				) as Node[];
+				highlightRanges = esqueryMatchedNodes.map(node => [
+					node.start,
+					node.end,
+				]);
+			} catch {
+				// ignore
+			}
+		}
+	}
+
+	return highlightRanges;
+}

src/hooks/use-highlight-ranges.ts

@@ -373,6 +373,7 @@ export const defaultJsOptions: JsOptions = {
 	sourceType: "module",
 	esVersion: "latest",
 	isJSX: true,
+	esquerySelectorEnabled: false,
 };
 
 export const defaultJsonOptions: JsonOptions = {

src/lib/const.ts

@@ -0,0 +1,15 @@
+import type { JsOptions } from "@/hooks/use-explorer";
+import * as espree from "espree";
+
+export function parseJavascriptAST(opts: {
+	code: string;
+	jsOptions: JsOptions;
+}) {
+	return espree.parse(opts.code, {
+		ecmaVersion: opts.jsOptions.esVersion,
+		sourceType: opts.jsOptions.sourceType,
+		ecmaFeatures: {
+			jsx: opts.jsOptions.isJSX,
+		},
+	});
+}

src/lib/parse-javascript-ast.ts

@@ -0,0 +1,16 @@
+import { Decoration, ViewPlugin } from "@codemirror/view";
+
+const highlightRangeDecoration = Decoration.mark({
+	class: "eslint-code-explorer_highlight-range",
+});
+export type HighlightRange = [rangeFrom: number, rangeTo: number];
+
+export const highlightRangesExtension = (ranges: HighlightRange[]) =>
+	ViewPlugin.define(() => ({}), {
+		decorations: () =>
+			Decoration.set(
+				ranges.map(([rangeFrom, rangeTo]) =>
+					highlightRangeDecoration.range(rangeFrom, rangeTo),
+				),
+			),
+	});

src/utils/highlight-ranges.tsx

@@ -51,6 +51,8 @@ module.exports = {
 				dropContainer: "hsl(var(--drop-container-bg-color))",
 				dropMessage: "hsl(var(--drop-message-bg-color))",
 				editorBackground: "hsl(var(--editor-background))",
+				editorRangeHighlightColor:
+					"hsl(var(--editor-range-highlight-color))",
 			},
 			borderRadius: {
 				lg: "var(--radius)",