cleanup

src/App.css

@@ -127,6 +127,6 @@
 	border-radius: 0.125rem;
 }
 
-.eslint-code-explorer_highlight-range {
-	@apply bg-editorRangeHighlightColor;
+.eslint-code-explorer_highlighted-range {
+	@apply bg-editorHighlightedRangeColor;
 }

src/App.tsx

@@ -1,8 +1,7 @@
 import "./App.css";
-
 import { Navbar } from "./components/navbar";
 import { useExplorer } from "./hooks/use-explorer";
-import { useHighlightRanges } from "./hooks/use-highlight-ranges";
+import { useHighlightedRanges } from "./hooks/use-highlighted-ranges";
 import { tools } from "./lib/tools";
 import { Editor } from "./components/editor";
 import { EsquerySelectorInput } from "./components/esquery-selector-input";
@@ -13,7 +12,7 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 function App() {
 	const { language, tool, code, setCode, jsOptions } = useExplorer();
 
-	const highlightRanges = useHighlightRanges();
+	const highlightedRanges = useHighlightedRanges();
 
 	const activeTool = tools.find(({ value }) => value === tool) ?? tools[0];
 	return (
@@ -33,7 +32,7 @@ function App() {
 								<Panel defaultSize={50} minSize={25}>
 									<Editor
 										value={code[language]}
-										highlightRanges={highlightRanges}
+										highlightedRanges={highlightedRanges}
 										onChange={value => {
 											setCode({
 												...code,

src/codemirror-themes.css

@@ -80,7 +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%;
+	--editor-highlighted-range-color: 209deg 54% 81%;
 }
 
 .dark {
@@ -95,5 +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%;
+	--editor-highlighted-range-color: 209deg 54% 31%;
 }

src/components/editor.tsx

@@ -17,9 +17,9 @@ import {
 	ESLintPlaygroundHighlightStyle,
 } from "@/utils/codemirror-themes";
 import {
-	highlightRangesExtension,
-	type HighlightRange,
-} from "@/utils/highlight-ranges";
+	highlightedRangesExtension,
+	type HighlightedRange,
+} from "@/utils/highlighted-ranges";
 
 const languageExtensions: Record<string, (isJSX?: boolean) => LanguageSupport> =
 	{
@@ -32,14 +32,14 @@ const languageExtensions: Record<string, (isJSX?: boolean) => LanguageSupport> =
 type EditorProperties = {
 	readOnly?: boolean;
 	value?: string;
-	highlightRanges?: HighlightRange[];
+	highlightedRanges?: HighlightedRange[];
 	onChange?: (value: string) => void;
 };
 
 export const Editor: FC<EditorProperties> = ({
 	readOnly,
 	value,
-	highlightRanges = [],
+	highlightedRanges = [],
 	onChange,
 }) => {
 	const { wrap, language, jsOptions } = useExplorer();
@@ -60,7 +60,7 @@ export const Editor: FC<EditorProperties> = ({
 		readOnly ? EditorState.readOnly.of(true) : [],
 		ESLintPlaygroundTheme,
 		ESLintPlaygroundHighlightStyle,
-		highlightRangesExtension(highlightRanges),
+		highlightedRangesExtension(highlightedRanges),
 	];
 
 	const debouncedOnChange = useCallback(

src/hooks/use-explorer.ts

@@ -92,7 +92,7 @@ type ExplorerState = {
 	setPathIndex: (pathIndex: PathIndex) => void;
 
 	esquerySelector: string;
-	setEsquerySelector: (esqueryQuery: string) => void;
+	setEsquerySelector: (esquerySelector: string) => void;
 };
 
 const hashStorage: StateStorage = {

src/hooks/use-highlighted-ranges.ts

@@ -0,0 +1,37 @@
+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 { HighlightedRange } from "@/utils/highlighted-ranges";
+
+export function useHighlightedRanges() {
+	const { language, code, jsOptions, esquerySelector } = useExplorer();
+
+	let highlightedRanges: HighlightedRange[] = [];
+	if (language === "javascript" && 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[];
+			highlightedRanges = esqueryMatchedNodes.map(node => [
+				node.start,
+				node.end,
+			]);
+		} catch {
+			// error occured e.g. because the JS code cannot be parsed into an AST, or the esquery selector is no valid selector --> just ignore (no highlighted ranges)
+		}
+	}
+
+	return highlightedRanges;
+}

src/utils/highlight-ranges.tsx → src/utils/highlighted-ranges.tsx

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

tailwind.config.js

@@ -51,8 +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))",
+				editorHighlightedRangeColor:
+					"hsl(var(--editor-highlighted-range-color))",
 			},
 			borderRadius: {
 				lg: "var(--radius)",