feat: simplify editor config API

WipeAir · WipeAir · commit 3c65d556ade3 · 2026-03-18T15:37:37.000+01:00
diff --git a/packages/sel-editor-react/src/sel-editor.spec.tsx b/packages/sel-editor-react/src/sel-editor.spec.tsx
@@ -57,10 +57,13 @@ describe("src/sel-editor.tsx", () => {
 		expect(container.querySelector(".cm-editor")).toBeTruthy();
 	});
 
-	it("accepts validate prop for error highlighting", () => {
-		const validate = vi.fn().mockReturnValue([]);
+	it("accepts checkerOptions prop", () => {
 		const { container } = render(
-			<SELEditor schema={testSchema} value="test" validate={validate} />,
+			<SELEditor
+				schema={testSchema}
+				value="test"
+				checkerOptions={{ rules: [] }}
+			/>,
 		);
 		expect(container.querySelector(".cm-editor")).toBeTruthy();
 	});
diff --git a/packages/sel-editor-react/src/sel-editor.stories.tsx b/packages/sel-editor-react/src/sel-editor.stories.tsx
@@ -1,4 +1,4 @@
-import { SELChecker, rules } from "@seljs/checker";
+import { rules } from "@seljs/checker";
 import { buildSchema } from "@seljs/env";
 import { parseAbi } from "viem";
 
@@ -93,56 +93,43 @@ const WithValidation: Story = {
 	},
 };
 
-const checkerWithRules = new SELChecker(erc20Schema, {
-	rules: rules.builtIn,
-});
-
-const conditionChecker = new SELChecker(erc20Schema, {
-	rules: [rules.requireType("bool"), ...rules.builtIn],
-});
-
 const WithLintRules: Story = {
 	name: "Lint Rules (Redundant Bool)",
 	args: {
 		value: "erc20.balanceOf(user) > 0 == true",
-		validate: (expression: string) =>
-			checkerWithRules.check(expression).diagnostics,
+		checkerOptions: { rules: rules.builtIn },
 	},
 };
 
 const WithLintSelfComparison: Story = {
 	name: "Lint Rules (Self Comparison)",
 	args: {
 		value: "erc20.totalSupply() == erc20.totalSupply()",
-		validate: (expression: string) =>
-			checkerWithRules.check(expression).diagnostics,
+		checkerOptions: { rules: rules.builtIn },
 	},
 };
 
 const WithLintConstantCondition: Story = {
 	name: "Lint Rules (Constant Condition)",
 	args: {
 		value: "true && erc20.balanceOf(user) > 0",
-		validate: (expression: string) =>
-			checkerWithRules.check(expression).diagnostics,
+		checkerOptions: { rules: rules.builtIn },
 	},
 };
 
 const RequireTypeBoolPass: Story = {
 	name: "Require Type Bool (Pass)",
 	args: {
 		value: "erc20.balanceOf(user) > 0",
-		validate: (expression: string) =>
-			conditionChecker.check(expression).diagnostics,
+		checkerOptions: { rules: [rules.requireType("bool"), ...rules.builtIn] },
 	},
 };
 
 const RequireTypeBoolFail: Story = {
 	name: "Require Type Bool (Fail)",
 	args: {
 		value: "erc20.balanceOf(user)",
-		validate: (expression: string) =>
-			conditionChecker.check(expression).diagnostics,
+		checkerOptions: { rules: [rules.requireType("bool"), ...rules.builtIn] },
 	},
 };
 
@@ -197,15 +184,15 @@ const WithTypeDisplay: Story = {
 	name: "Type Display",
 	args: {
 		value: "erc20.balanceOf(user) > 0",
-		showType: true,
+		features: { typeDisplay: true },
 	},
 };
 
 const TypeDisplayDark: Story = {
 	name: "Type Display (Dark)",
 	args: {
 		value: "erc20.balanceOf(user)",
-		showType: true,
+		features: { typeDisplay: true },
 		dark: true,
 	},
 	decorators: [
diff --git a/packages/sel-editor-react/src/use-sel-editor.spec.ts b/packages/sel-editor-react/src/use-sel-editor.spec.ts
@@ -104,7 +104,7 @@ describe("src/use-sel-editor.ts", () => {
 			});
 		});
 
-		expect(onChange).toHaveBeenCalledWith("hello");
+		expect(onChange).toHaveBeenCalledWith("hello", expect.any(Boolean));
 
 		document.body.removeChild(container);
 	});
diff --git a/packages/sel-editor-react/src/use-sel-editor.ts b/packages/sel-editor-react/src/use-sel-editor.ts
@@ -11,6 +11,7 @@ export interface UseSELEditorResult {
 	ref: (node: HTMLElement | null) => void;
 	view: EditorView | null;
 	value: string;
+	valid: boolean;
 }
 
 export function useSELEditor(
@@ -19,6 +20,7 @@ export function useSELEditor(
 	const viewRef = useRef<EditorView | null>(null);
 	const [view, setView] = useState<EditorView | null>(null);
 	const [value, setValue] = useState(config.value ?? "");
+	const [valid, setValid] = useState(true);
 	const configRef = useRef(config);
 	configRef.current = config;
 
@@ -38,9 +40,10 @@ export function useSELEditor(
 			const editor = createSELEditor({
 				...currentConfig,
 				parent: node,
-				onChange: (newValue) => {
+				onChange: (newValue, isValid) => {
 					setValue(newValue);
-					currentConfig.onChange?.(newValue);
+					setValid(isValid);
+					currentConfig.onChange?.(newValue, isValid);
 				},
 			});
 			viewRef.current = editor;
@@ -56,5 +59,5 @@ export function useSELEditor(
 		};
 	}, []);
 
-	return { ref, view, value };
+	return { ref, view, value, valid };
 }
diff --git a/packages/sel-editor-react/src/whatsabi-explorer.stories.tsx b/packages/sel-editor-react/src/whatsabi-explorer.stories.tsx
@@ -334,8 +334,10 @@ function WhatsAbiExplorer({
 						schema={status.schema}
 						value={expression}
 						placeholder={`Try ${contractName.trim() || "contract"}.<method>(...)`}
-						onChange={setExpression}
-						showType
+						onChange={(value) => {
+							setExpression(value);
+						}}
+						features={{ typeDisplay: true }}
 					/>
 
 					<div style={{ marginTop: 12 }}>
diff --git a/packages/sel-editor/src/editor/create-editor.spec.ts b/packages/sel-editor/src/editor/create-editor.spec.ts
@@ -89,7 +89,7 @@ describe("src/editor/create-editor.ts", () => {
 			view.destroy();
 		});
 
-		it("onChange fires with current value on document changes", () => {
+		it("onChange fires with current value and validity on document changes", () => {
 			const onChange = vi.fn();
 			const parent = createParent();
 			const view = createSELEditor({
@@ -103,7 +103,7 @@ describe("src/editor/create-editor.ts", () => {
 				changes: { from: 0, insert: "test" },
 			});
 
-			expect(onChange).toHaveBeenCalledWith("test");
+			expect(onChange).toHaveBeenCalledWith("test", expect.any(Boolean));
 			view.destroy();
 		});
 
@@ -123,17 +123,15 @@ describe("src/editor/create-editor.ts", () => {
 			view.destroy();
 		});
 
-		it("passing validate enables the lint extension", () => {
-			const validate = vi.fn().mockReturnValue([]);
+		it("passing checkerOptions configures the internal checker", () => {
 			const parent = createParent();
 			const view = createSELEditor({
 				parent,
 				schema: testSchema,
 				value: "test",
-				validate,
+				checkerOptions: { rules: [] },
 			});
 
-			// Linter extension should be present (no errors thrown)
 			expect(view.state).toBeDefined();
 			view.destroy();
 		});
@@ -195,14 +193,25 @@ describe("src/editor/create-editor.ts", () => {
 			view2.destroy();
 		});
 
-		it("accepts additional extensions", () => {
+		it("features can disable linting", () => {
 			const parent = createParent();
+			const view = createSELEditor({
+				parent,
+				schema: testSchema,
+				features: { linting: false },
+			});
+
+			expect(view).toBeDefined();
+			view.destroy();
+		});
 
-			// Pass an empty array of extensions (no-op but shouldn't break)
+		it("features can enable type display", () => {
+			const parent = createParent();
 			const view = createSELEditor({
 				parent,
 				schema: testSchema,
-				extensions: [],
+				value: "erc20.balanceOf(user)",
+				features: { typeDisplay: true },
 			});
 
 			expect(view).toBeDefined();
diff --git a/packages/sel-editor/src/editor/editor-config.ts b/packages/sel-editor/src/editor/editor-config.ts
@@ -4,7 +4,7 @@ import { bracketMatching } from "@codemirror/language";
 import { EditorState, type Extension } from "@codemirror/state";
 import { EditorView, keymap, placeholder } from "@codemirror/view";
 import { celLanguageSupport } from "@seljs/cel-lezer";
-import { SELChecker, rules } from "@seljs/checker";
+import { SELChecker } from "@seljs/checker";
 
 import { selDarkTheme, selLightTheme } from "./theme";
 import { createTypeDisplay } from "./type-display";
@@ -13,23 +13,35 @@ import { createTokenizerConfig } from "../language";
 import { createSemanticHighlighter } from "../language/semantic-highlighter";
 import { createSELLinter } from "../linting";
 
-import type { SELEditorConfig } from "./types";
+import type { SELEditorConfig, SELEditorFeatures } from "./types";
+
+const resolveFeatures = (features?: SELEditorFeatures) => ({
+	linting: features?.linting ?? true,
+	autocomplete: features?.autocomplete ?? true,
+	semanticHighlighting: features?.semanticHighlighting ?? true,
+	typeDisplay: features?.typeDisplay ?? false,
+});
 
 export const buildExtensions = (config: SELEditorConfig): Extension[] => {
-	const checker = new SELChecker(config.schema, { rules: [...rules.builtIn] });
+	const checker = new SELChecker(config.schema, config.checkerOptions);
+	const resolved = resolveFeatures(config.features);
 	const extensions: Extension[] = [];
 
 	// Language support (includes syntax highlighting)
 	extensions.push(celLanguageSupport(config.dark));
 	extensions.push(bracketMatching());
 
 	// Semantic highlighting (schema-aware identifier coloring)
-	const tokenizerConfig = createTokenizerConfig(config.schema);
-	extensions.push(createSemanticHighlighter(tokenizerConfig, config.dark));
+	if (resolved.semanticHighlighting) {
+		const tokenizerConfig = createTokenizerConfig(config.schema);
+		extensions.push(createSemanticHighlighter(tokenizerConfig, config.dark));
+	}
 
 	// Autocomplete (type-aware via checker)
-	extensions.push(createSchemaCompletion(config.schema, checker));
-	extensions.push(closeBrackets());
+	if (resolved.autocomplete) {
+		extensions.push(createSchemaCompletion(config.schema, checker));
+		extensions.push(closeBrackets());
+	}
 
 	// Keybindings
 	extensions.push(
@@ -40,24 +52,24 @@ export const buildExtensions = (config: SELEditorConfig): Extension[] => {
 	// Theme
 	extensions.push(config.dark ? selDarkTheme : selLightTheme);
 
-	// Validation / linting (built-in checker used when no validate callback provided)
-	const validate =
-		config.validate ??
-		((expression: string) => checker.check(expression).diagnostics);
-	extensions.push(
-		createSELLinter({
-			validate,
-			delay: config.validateDelay,
-		}),
-	);
+	// Validation / linting
+	if (resolved.linting) {
+		extensions.push(
+			createSELLinter({
+				validate: (expression: string) => checker.check(expression).diagnostics,
+			}),
+		);
+	}
 
-	// onChange listener
+	// onChange listener with validity
 	if (config.onChange) {
 		const onChange = config.onChange;
 		extensions.push(
 			EditorView.updateListener.of((update) => {
 				if (update.docChanged) {
-					onChange(update.state.doc.toString());
+					const value = update.state.doc.toString();
+					const result = checker.check(value);
+					onChange(value, result.valid);
 				}
 			}),
 		);
@@ -74,14 +86,9 @@ export const buildExtensions = (config: SELEditorConfig): Extension[] => {
 	}
 
 	// Type display panel
-	if (config.showType) {
+	if (resolved.typeDisplay) {
 		extensions.push(createTypeDisplay(checker, config.dark ?? false));
 	}
 
-	// User-provided extensions (last, so they can override)
-	if (config.extensions) {
-		extensions.push(...config.extensions);
-	}
-
 	return extensions;
 };
diff --git a/packages/sel-editor/src/editor/index.ts b/packages/sel-editor/src/editor/index.ts
@@ -1,5 +1,4 @@
 export { createSELEditor } from "./create-editor";
-export { buildExtensions } from "./editor-config";
 export { selLightTheme, selDarkTheme } from "./theme";
-export type { SELEditorConfig } from "./types";
+export type { SELEditorConfig, SELEditorFeatures } from "./types";
 export type { EditorView } from "@codemirror/view";
diff --git a/packages/sel-editor/src/editor/types.ts b/packages/sel-editor/src/editor/types.ts
