@arbiter/evidence-dsl-editor (1.1.1)
Installation
@arbiter:registry=https://grafana.kl1.tenere.ai/api/packages/Arbiter/npm/npm install @arbiter/evidence-dsl-editor@1.1.1"@arbiter/evidence-dsl-editor": "1.1.1"About this package
@arbiter/evidence-dsl-editor
Editor tooling for the Evidence DSL, generated from the canonical grammar
(src/grammar/dsl.peggy in the root package) by the peggylex pipeline. The
grammar is the DSL's sole naming authority: nothing in this package
hand-lists a keyword. Every file carries the grammar hash it was generated
from; CI byte-compares the committed artifacts against a fresh generation,
so the projections cannot go stale.
Dependency-free EXCEPT ./cm (see below). Data only — the host wires it
into its own editor/theme.
Tiers
| Subpath | Surface | Contents |
|---|---|---|
./stream |
CodeMirror 6 (StreamLanguage) | state-machine data + createStreamLanguage() factory, tag table |
./completion |
any | keywords, statement snippets, grammarHash, languageName |
./cm |
CodeMirror 6 | the full extension-array factory (createEvidenceDslEditorExtensions) + theme/style factories |
./textmate |
Shiki, VS Code | TextMate grammar (ESM + raw .json) |
./monarch |
Monaco | Monarch tokenizer module (verbatim data-only ESM) + contribution |
./lsp |
LSP servers | language config + semantic-token legend |
CodeMirror 6 (the common case)
npm install @arbiter/evidence-dsl-editor @codemirror/state @codemirror/view \
@codemirror/language @codemirror/autocomplete @codemirror/commands \
@codemirror/search @lezer/highlight
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { createEvidenceDslEditorExtensions } from '@arbiter/evidence-dsl-editor/cm';
const view = new EditorView({
state: EditorState.create({
doc: '',
extensions: createEvidenceDslEditorExtensions({
palette: {
syntax: { keyword: 'var(--accent)', string: 'var(--success)' },
chrome: { surface: 'var(--surface-1)', caret: 'var(--accent)' },
shape: { radius: 'var(--radius-sm)' },
},
placeholder: '// Author an Evidence DSL policy',
}),
}),
parent: document.body,
});
The palette is CSS-color strings (var(--x) welcome) with neutral defaults
— pass only what your theme must own. ./cm carries the complete editor
experience: line numbers, history, search, bracket closing, completion,
highlighting, the theme, and an empty-state placeholder.
React host (thin wrapper pattern)
function EvidenceDslEditor({ value, onChange }: { value: string; onChange: (v: string) => void }) {
const host = useRef<HTMLDivElement>(null);
const view = useRef<EditorView | null>(null);
useEffect(() => {
view.current = new EditorView({
state: EditorState.create({ doc: value, extensions: createEvidenceDslEditorExtensions({ palette }) }),
parent: host.current!,
});
return () => view.current?.destroy();
}, []);
useEffect(() => { /* swap the doc when `value` changes externally */ }, [value]);
return <div ref={host} />;
}
The wrapper stays host-specific (auth of state ownership, theming); the language behavior is entirely the package's.
Validation authority
The browser is syntax-only. The parse authority is the server's
DSLCompiler (root package) — editor surfaces should post sources to a
validate/sandbox endpoint rather than re-implementing the DSL client-side.
Versioning
The editor package bumps when the PROJECTIONS change (grammar edit or emitter upgrade); the root compiler package bumps independently. Both publish from the same tag in the repo's CI.
Dependencies
Peer Dependencies
| ID | Version |
|---|---|
| @codemirror/autocomplete | ^6 |
| @codemirror/commands | ^6 |
| @codemirror/language | ^6 |
| @codemirror/search | ^6 |
| @codemirror/state | ^6 |
| @codemirror/view | ^6 |
| @lezer/highlight | ^1 |