feat(playground): search with grit in the playground

Author: dyc3

src/playground/CodeMirror.tsx

@@ -2,7 +2,8 @@ import type { Diagnostic as BiomeDiagnostic } from "@biomejs/wasm-web";
 import type { Diagnostic as CodeMirrorDiagnostic } from "@codemirror/lint";
 import { lintGutter, setDiagnostics } from "@codemirror/lint";
 import type { Extension } from "@codemirror/state";
-import { EditorView } from "@codemirror/view";
+import { Annotation, StateField } from "@codemirror/state";
+import { Decoration, type DecorationSet, EditorView } from "@codemirror/view";
 import type {
 	ReactCodeMirrorProps,
 	ReactCodeMirrorRef,
@@ -13,8 +14,46 @@ import { spanInBytesToSpanInCodeUnits, useTheme } from "@/playground/utils";
 
 export type BiomeExtension = Extension;
 
+const yellowHighlight = Decoration.mark({ class: "gritql-match" });
+
+const gritQueryMatchesAnnotation = Annotation.define<[number, number][]>();
+
+function buildDecorations(
+	matches: [number, number][],
+	doc: string,
+): DecorationSet {
+	const decorations = [];
+
+	for (const [from, to] of matches) {
+		const [codeUnitFrom, codeUnitTo] = spanInBytesToSpanInCodeUnits(
+			[from, to],
+			doc,
+		);
+		decorations.push(yellowHighlight.range(codeUnitFrom, codeUnitTo));
+	}
+
+	return Decoration.set(decorations);
+}
+
+const gritQueryMatchesField = StateField.define<DecorationSet>({
+	create() {
+		return Decoration.none;
+	},
+	update(matches, tr) {
+		const newMatches = tr.annotation(gritQueryMatchesAnnotation);
+		if (newMatches !== undefined) {
+			return buildDecorations(newMatches, tr.state.doc.toString());
+		}
+		return matches.map(tr.changes);
+	},
+	provide: (f) => {
+		return EditorView.decorations.from(f);
+	},
+});
+
 interface Props extends ReactCodeMirrorProps {
 	diagnostics?: BiomeDiagnostic[];
+	gritQueryMatches?: [number, number][];
 }
 
 function getDiagnosticMessage(diagnostic: BiomeDiagnostic): string {
@@ -73,12 +112,8 @@ function biomeDiagnosticsToCodeMirror(
 	return codeMirror;
 }
 
-function getDefaultExtensions(extensions: Extension[] = []) {
-	return [EditorView.lineWrapping, ...extensions];
-}
-
 export default forwardRef<ReactCodeMirrorRef, Props>(function CodeMirror(
-	{ diagnostics, ...props },
+	{ diagnostics, gritQueryMatches, ...props },
 	ref,
 ) {
 	const theme = useTheme();
@@ -90,12 +125,21 @@ export default forwardRef<ReactCodeMirrorRef, Props>(function CodeMirror(
 	}
 
 	const extensions = useMemo(() => {
+		const baseExtensions = [
+			EditorView.lineWrapping,
+			...(props.extensions ?? []),
+		];
+
+		if (gritQueryMatches && gritQueryMatches.length > 0) {
+			return [gritQueryMatchesField, ...baseExtensions];
+		}
+
 		if (diagnostics === undefined || diagnostics.length === 0) {
-			return getDefaultExtensions(props.extensions);
+			return baseExtensions;
 		}
 
-		return [lintGutter(), ...getDefaultExtensions(props.extensions)];
-	}, [diagnostics, props.extensions]);
+		return [lintGutter(), ...baseExtensions];
+	}, [diagnostics, props.extensions, gritQueryMatches]);
 
 	useEffect(() => {
 		if (editor !== undefined && diagnostics !== undefined) {
@@ -111,6 +155,14 @@ export default forwardRef<ReactCodeMirrorRef, Props>(function CodeMirror(
 		}
 	}, [editor, diagnostics]);
 
+	useEffect(() => {
+		if (editor !== undefined && gritQueryMatches !== undefined) {
+			editor.dispatch({
+				annotations: [gritQueryMatchesAnnotation.of(gritQueryMatches)],
+			});
+		}
+	}, [editor, gritQueryMatches]);
+
 	return (
 		<RealCodeMirror
 			{...props}

src/playground/Playground.tsx

@@ -63,6 +63,9 @@ export default function Playground({
 	const file = getFileState(playgroundState, playgroundState.currentFile);
 	const biomeOutput = file.biome;
 	const prettierOutput = file.prettier;
+	const gritQuery = file.gritQuery ?? "";
+	const gritQueryResults = biomeOutput.gritQuery ?? { matches: [] };
+	const gritTargetLanguage = playgroundState.settings.gritTargetLanguage;
 
 	const codeMirrorExtensions = useMemo(() => {
 		if (isJsonFilename(playgroundState.currentFile)) {
@@ -193,6 +196,7 @@ export default function Playground({
 			onChange={onChange}
 			autoFocus={true}
 			data-testid="editor"
+			gritQueryMatches={gritQueryResults.matches}
 		/>
 	);
 
@@ -353,6 +357,30 @@ export default function Playground({
 						console={biomeOutput.diagnostics.console}
 						diagnostics={biomeOutput.diagnostics.list}
 						code={code}
+						gritQuery={gritQuery}
+						gritQueryResults={gritQueryResults}
+						gritTargetLanguage={gritTargetLanguage}
+						onGritQueryChange={(query) => {
+							setPlaygroundState((state) => ({
+								...state,
+								files: {
+									...state.files,
+									[state.currentFile]: {
+										...getFileState(state, state.currentFile),
+										gritQuery: query,
+									},
+								},
+							}));
+						}}
+						onLanguageChange={(language) => {
+							setPlaygroundState((state) => ({
+								...state,
+								settings: {
+									...state.settings,
+									gritTargetLanguage: language,
+								},
+							}));
+						}}
 					/>
 				</Resizable>
 			</div>

src/playground/PlaygroundLoader.tsx

@@ -44,8 +44,8 @@ import {
 	normalizeFilename,
 } from "@/playground/utils";
 
-function throttle(callback: () => void): () => void {
-	const timeout = setTimeout(callback, 100);
+function throttle(callback: () => void, delay = 100): () => void {
+	const timeout = setTimeout(callback, delay);
 
 	return () => {
 		clearTimeout(timeout);
@@ -243,18 +243,24 @@ function PlaygroundLoader() {
 				code: getCurrentCode(state),
 			});
 
+			const file = getFileState(state, state.currentFile);
+
 			workerRef.current?.postMessage({
 				type: "update",
 				cursorPosition: state.cursorPosition,
 				filename: state.currentFile,
 				code: getCurrentCode(state),
+				gritQuery: file?.gritQuery,
+				defaultLanguage: state.settings.gritTargetLanguage,
 			});
 		});
 	}, [
 		loadingState,
 		state.currentFile,
 		state.cursorPosition,
+		state.settings.gritTargetLanguage,
 		getCurrentCode(state),
+		getFileState(state, state.currentFile)?.gritQuery,
 	]);
 
 	switch (loadingState) {
@@ -305,6 +311,11 @@ function buildLocation(state: PlaygroundState): string {
 		if (language !== LANGUAGE.TSX) {
 			queryStringObj.language = language;
 		}
+
+		const gritQuery = getFileState(state, state.currentFile)?.gritQuery;
+		if (gritQuery) {
+			queryStringObj.gritQuery = gritQuery;
+		}
 	} else {
 		// Populate files
 		for (const filename in state.files) {
@@ -361,11 +372,16 @@ function initState(
 				language: (searchParams.get("language") as Language) ?? LANGUAGE.TSX,
 				script: searchParams.get("script") === "true",
 			});
-			files[`main.${ext}`] = {
+			const gritQuery = searchParams.get("gritQuery");
+			const baseFile = {
 				content: decodeCode(searchParams.get("code") ?? ""),
 				biome: emptyBiomeOutput,
 				prettier: emptyPrettierOutput,
 			};
+			files[`main.${ext}`] =
+				gritQuery !== null && gritQuery !== ""
+					? { ...baseFile, gritQuery }
+					: baseFile;
 			hasFiles = true;
 		}
 	}
@@ -399,6 +415,7 @@ function initState(
 			lineWidth: Number.parseInt(
 				searchParams.get("lineWidth") ??
 					String(defaultPlaygroundState.settings.lineWidth),
+				10,
 			),
 			indentStyle:
 				(searchParams.get("indentStyle") as IndentStyle) ??
@@ -420,6 +437,7 @@ function initState(
 			indentWidth: Number.parseInt(
 				searchParams.get("indentWidth") ??
 					String(defaultPlaygroundState.settings.indentWidth),
+				10,
 			),
 			semicolons:
 				(searchParams.get("semicolons") as Semicolons) ??
@@ -476,6 +494,11 @@ function initState(
 			tailwindDirectives:
 				searchParams.get("tailwindDirectives") === "true" ||
 				defaultPlaygroundState.settings.tailwindDirectives,
+			gritTargetLanguage:
+				(searchParams.get("gritTargetLanguage") as
+					| "JavaScript"
+					| "CSS"
+					| undefined) ?? defaultPlaygroundState.settings.gritTargetLanguage,
 		},
 	};
 }

src/playground/components/DiagnosticsPane.tsx

@@ -4,21 +4,34 @@ import { type RefObject, useState } from "react";
 import Tabs from "@/playground/components/Tabs";
 import DiagnosticsConsoleTab from "@/playground/tabs/DiagnosticsConsoleTab";
 import DiagnosticsListTab from "@/playground/tabs/DiagnosticsListTab";
+import GritQLSearchTab from "@/playground/tabs/GritQLSearchTab";
 
 interface Props {
 	editorRef: RefObject<ReactCodeMirrorRef | null>;
 	console: string;
 	diagnostics: Diagnostic[];
 	code: string;
+	gritQuery: string;
+	gritQueryResults: { matches: [number, number][]; error?: string };
+	gritTargetLanguage: "JavaScript" | "CSS";
+	onGritQueryChange: (query: string) => void;
+	onLanguageChange: (language: "JavaScript" | "CSS") => void;
 }
 
 export default function DiagnosticsPane({
 	editorRef,
 	diagnostics,
 	console,
 	code,
+	gritQuery,
+	gritQueryResults,
+	gritTargetLanguage,
+	onGritQueryChange,
+	onLanguageChange,
 }: Props) {
-	const [tab, setTab] = useState<"diagnostics" | "console">("diagnostics");
+	const [tab, setTab] = useState<"diagnostics" | "console" | "gritql">(
+		"diagnostics",
+	);
 
 	return (
 		<Tabs
@@ -42,6 +55,21 @@ export default function DiagnosticsPane({
 					title: "Console",
 					children: <DiagnosticsConsoleTab console={console} />,
 				},
+				{
+					key: "gritql",
+					title: "GritQL",
+					children: (
+						<GritQLSearchTab
+							editorRef={editorRef}
+							code={code}
+							gritQuery={gritQuery}
+							gritQueryResults={gritQueryResults}
+							gritTargetLanguage={gritTargetLanguage}
+							onGritQueryChange={onGritQueryChange}
+							onLanguageChange={onLanguageChange}
+						/>
+					),
+				},
 			]}
 		/>
 	);