ANTLR Editor

ANTLR Typescript editor.

Usage

Install

yarn add @making-sense/antlr-editor

Example: VTL 2.1

yarn add @making-sense/antlr-editor @making-sense/vtl-2-1-antlr-tools-ts @making-sense/vtl-2-1-monaco-tools-ts

import { AntlrEditor as VTLEditor } from "@making-sense/antlr-editor";
import * as VTLTools from "@making-sense/vtl-2-1-antlr-tools-ts";
import { getSuggestionsFromRange, monarchDefinition } from "@making-sense/vtl-2-1-monaco-tools-ts";

const customTools = { ...VTLTools, getSuggestionsFromRange, monarchDefinition };

const Editor = () => {
    return <VTLEditor tools={customTools} />;
};

export default Editor;

Developement mode

Storybook

yarn storybook

Linked app

git clone https://github.com/Making-Sense-Info/ANTLR-Editor
cd ANTLR-Editor
yarn

# Start the test app in watch mode
yarn start-test-app

# Link in an external project in watch mode
yarn link-in-app test-app # ../YOUR-APP is supposed to exist

AntlrEditor Props

Name	Type	Default value
script	string	-
setScript	Function	-
customFetcher	Function *	-
tools	Tools *	-
variables	Variables *	{ }
variablesInputURLs	VariableURLs *	[ ]
onListErrors	Function	undefined
height	string	"50vh"
width	string	"100%"
theme	string	"vs-dark"
options	IStandaloneEditorConstructionOptions	{}

See details about * props below

Props details

tools

tools has to be Antlr4 auto-generated Lexer & Parser.

Name	Type	Default value
id	string	-
initialRule	string	-
grammar	string	-
Lexer	Antlr4 Lexer	-
Parser	Antlr4 Parser	-

Have a look to VTL 2.0 Antlr Tools for example.

getSuggestionsFromRange & monarchDefinition

Have a look to VTL 2.0 Monaco Tools for autosuggestion & highlighting example.

customFetcher

customFetcher enable to provide a custom fetch, adding Authorization header for instance:

u => fetch(u, headers:{ Authorization: 'Bearer XXX'})

This function will be used to fetch variableURLs & sdmxResultURL props.

variables

variables enable to pass an object to provide auto-suggestion.

The shape of this object is:

const obj = {
    "var1": {"type": "STRING", "role": "IDENTIFIER"},
    "var2": {"type": "INTEGER", "role": "MEASURE"},
}

variableURLs

variableURLs enable to pass an array of string to fetch to provide auto-suggestion:

["http://metadata/1", "http://metadata/2"]

The shape of each fetched resources has to be:

[
    { "name": "var1", "type": "STRING", "role": "IDENTIFIER" },
    { "name": "var2", "type": "INTEGER", "role": "MEASURE" }
]