@valtzu/codemirror-lang-el v1.0.0

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

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>

Contributing

Contributions are welcome.