codemirror-lezer

codemirror-lezer

The application demonstrates how to create custom Query Language for CodeMirror using the Lezer Parser System.

My goal was to create query language that is unbound from an application domain. So the grammar part defines just a syntax for queries, but does not contains any properties or values. Thus, domain specific data can be defined independently of grammar.

Commands

Start:

pnpm run dev

Rebuild grammar:

pnpm run grammar

Run tests:

pnpm test

File Structure

1. main.ts is an entrypoint. It finds the root DOM element and render the app.
2. Universal query language: language contains a set of CodeMirror plugins that implement work with the query language defined in Grammar
   1. grammar contains everything about parsing a text to an AST
      1. QueryLanguage.grammar grammar definition in terms of The Lezer Parser System. The parser itself is autogenerated based on the grammar file.
   2. query a helper to transform AST to query tree, it helps to visualize the parsing result and test the parser
   3. highlighter highlights different semantic tokens with different colors
   4. linter shows errors for improper tokens
   5. decorator shows user-defined widgets for some tokens
   6. autocomplete suggests related tokens to a user
   7. language combines them all
3. Domain Specific Data
   1. data contains some data and declarations that are related to a specific app (e.g. task manager)
      1. properties describes possible properties and its values available for QL
      2. persons contains some imaginable “users” that could be used for filtering by an author
   2. decorator defines how to replace query tokens with rich HTML widgets, e.g. it replaces usernames of authors with their names