Symfony Expression Language support for CodeMirror 6

Features

Linting

1. Lint variable & function names
2. Lint object properties & methods, even on expression result
3. Lint argument count
4. Lint argument types

Autocompletion

1. Complete variables & functions
2. Complete object properties & methods, even on expression result
3. Complete operator keywords (like starts with)
4. Show list of all available keywords (using Ctrl+space by default)

Hover tooltip

1. Show description about a variable / function / object member / keyword

Function argument hints

1. Show function argument name when the editor cursor is exactly at starting position of the argument

Installation

Web Component

If you're using Bootstrap UI, check the Web Component to hide all CodeMirror stuff.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script type="module" src="https://esm.sh/symfony-expression-editor"></script>
<textarea class="form-control" is="expression-editor" rows="1">'foobar' starts with 'foo'</textarea>

Symfony AssetMapper

bin/console importmap:require @valtzu/codemirror-lang-el

npm

npm install @valtzu/codemirror-lang-el

Yarn

yarn add @valtzu/codemirror-lang-el

Configuration

See CONFIGURATION.md

Example

Live demo

<div id="editor"></div>
<script type="module">
    import { EditorView, basicSetup } from "codemirror";
    import { acceptCompletion } from "@codemirror/autocomplete";
    import { keymap } from "@codemirror/view";
    import { expressionlanguage } from "@valtzu/codemirror-lang-el";
    import { defaultKeymap } from "@codemirror/commands";

    let editor = new EditorView({
        extensions: [
            basicSetup,
            keymap.of([...defaultKeymap, {key: "Tab", run: acceptCompletion}]),
            expressionlanguage({
                types: {
                    "User": {
                        identifiers: [
                            { name: "self", type: ["User"], info: 'Self-reference for property-access demonstration purposes' },
                            { name: "name", type: ["string"] },
                            { name: "age", type: ["int"], info: "Years since birthday", detail: "years" },
                        ],
                        functions: [
                            { name: "isActive", returnType: ["bool"] },
                            { name: "getGroup", args: [], returnType: ["Group"], info: 'Get the user group' },
                        ],
                    },
                    "Group": {
                        identifiers: [{ name: "name", type: ["string"] }]
                    }
                },
                identifiers: [
                    { name: "user", type: ["User"], info: 'This is the user' },
                ],
                functions: [
                    { name: "is_granted", args: [{name: "attributes", type: ["string"]}, {name: "object", type: ["object"], optional: true}], info: 'Check if subject has permission to the object', returnType: ['bool'] },
                ],
            })
        ],
        parent: document.getElementById('editor'),
        doc: 'is_granted(user, user.self.getGroup())',
    });
</script>

Using OpenAI codex

Create .env file with

OPENAI_API_KEY="..."

Then use docker compose run --rm codex to develop with AI.

Contributing

Contributions are welcome.