refactor: use types from @eslint/core (#223)

Author: lumirlumir

package-lock.json

@@ -72,6 +72,7 @@
     "zustand": "^4.5.7"
   },
   "devDependencies": {
+    "@eslint/core": "^0.17.0",
     "@types/eslint-scope": "^8.3.2",
     "@types/espree": "^10.1.0",
     "@types/esquery": "^1.5.4",

package.json

@@ -13,10 +13,8 @@ import {
 	ESLintPlaygroundTheme,
 	ESLintPlaygroundHighlightStyle,
 } from "@/utils/codemirror-themes";
-import {
-	highlightedRangesExtension,
-	type HighlightedRange,
-} from "@/utils/highlighted-ranges";
+import { highlightedRangesExtension } from "@/utils/highlighted-ranges";
+import type { SourceRange } from "@eslint/core";
 
 const languageExtensions: Record<
 	Language,
@@ -32,7 +30,7 @@ const languageExtensions: Record<
 type EditorProperties = {
 	readOnly?: boolean;
 	value?: string;
-	highlightedRanges?: HighlightedRange[];
+	highlightedRanges?: SourceRange[];
 	onChange?: (value: string) => void;
 };
 

src/components/editor.tsx

@@ -1,6 +1,7 @@
 import * as espree from "espree";
 import esquery from "esquery";
 import type { Node as EstreeNode } from "estree";
+import type { ParseResult, FileError } from "@eslint/core";
 import css from "@eslint/css";
 import json from "@eslint/json";
 import markdown from "@eslint/markdown";
@@ -21,9 +22,7 @@ export function useAST() {
 		esquerySelector,
 	} = useExplorer();
 
-	let astParseResult:
-		| { ok: true; ast: unknown }
-		| { ok: false; errors: Array<unknown> };
+	let astParseResult: ParseResult<unknown>;
 
 	switch (language) {
 		case "javascript": {
@@ -40,7 +39,7 @@ export function useAST() {
 				astParseResult = { ast, ok: true };
 			} catch (err) {
 				// 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)
-				astParseResult = { ok: false, errors: [err] };
+				astParseResult = { ok: false, errors: [err as FileError] };
 			}
 			break;
 		}

src/hooks/use-ast.ts

@@ -1,28 +1,25 @@
-import type { HighlightedRange } from "@/utils/highlighted-ranges";
+import type { SourceRange } from "@eslint/core";
 
 export function convertNodesToRanges(
 	esqueryMatchedNodes: unknown[],
-): HighlightedRange[] {
-	const highlightedRanges: HighlightedRange[] = esqueryMatchedNodes
+): SourceRange[] {
+	const highlightedRanges: SourceRange[] = esqueryMatchedNodes
 		.map(node => {
 			if (isNodeWithStartEnd(node)) {
-				return [node.start, node.end] satisfies HighlightedRange;
+				return [node.start, node.end] satisfies SourceRange;
 			}
 			if (isNodeWithPosition(node)) {
 				return [
 					node.position.start.offset,
 					node.position.end.offset,
-				] satisfies HighlightedRange;
+				] satisfies SourceRange;
 			} else if (isNodeWithLoc(node)) {
 				return [
 					node.loc.start.offset,
 					node.loc.end.offset,
-				] satisfies HighlightedRange;
+				] satisfies SourceRange;
 			} else if (isNodeWithRange(node)) {
-				return [
-					node.range[0],
-					node.range[1],
-				] satisfies HighlightedRange;
+				return [node.range[0], node.range[1]] satisfies SourceRange;
 			}
 		})
 		.filter(range => range !== undefined);
@@ -48,7 +45,7 @@ type PositionElem = {
 };
 
 type NodeWithRange = {
-	range: [number, number];
+	range: SourceRange;
 };
 
 function isNodeWithStartEnd(node: unknown): node is NodeWithStartEnd {

src/lib/convert-nodes-to-ranges.ts

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