syntax-based-completion

• What is this?
• BNF
• Installation
• Usage
• Utils
  • Parser
  • Node
• TODO

What is this?

syntax-based-completion is a React Component (Form Input) that allows you to define a BNF syntax to validate the input value and suggest anything based on the syntax.

Check the demo.

BNF

In computer science, Backus–Naur form or Backus normal form (BNF) is a notation technique for context-free grammars, often used to describe the syntax of languages used in computing, such as computer programming languages, document formats, instruction sets and communication protocols. They are applied wherever exact descriptions of languages are needed: for instance, in official language specifications, in manuals, and in textbooks on programming language theory. Source Wikipedia

Installation

The component is available trought npm and depends of ebnf:

npm install --save ebnf
npm install --save syntax-based-completion

Usage

<SuggestionInput
  placeholder="Start typing..."
  syntax={`
  <SYNTAX>    ::= <equation>
  <equation>  ::= <number> <operation> <number>
  <operation> ::= "+" | "-" | "/" | "*"
  <number>    ::= <DIGITS>
  <DIGITS>    ::= <DIGIT> <DIGITS> | <DIGIT>
  <DIGIT>     ::= "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
  `}
  fetchSuggestions={({ type }) => new Promise((resolve) => resolve(type === 'operation' ? ["+", "-", "/", "*"] || []))}
/>

By default, the component accepts the same properties of a input, with some extras:

Properties

syntax

A string with the BNF syntax description

  <SYNTAX>    ::= <equation>
  <equation>  ::= <number> <operation> <number>
  <operation> ::= "+" | "-" | "/" | "*"
  <number>    ::= <DIGITS>
  <DIGITS>    ::= <DIGIT> <DIGITS> | <DIGIT>
  <DIGIT>     ::= "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"

Obs: UPPER_SNAKE_CASES definitions will be ignored on parser, improving performance.

onChange()

onChange(newValue, currentNode)

fetchSuggestions()

fetchSuggestions(currentNode) => Promise

The property fetchSuggestions is called when the cursor position or the value changes. The function expects a promise that should resolve a list of suggestions or reject with a error message.

Utils

Parser

Parser is a helper class that allows you to work with the BNF parser without the component:

import { Parser } from 'syntax-based-completion';

const parser = new Parser(SYNTAX)
const output = parser.parse(text)

constructor()

Respects ebnf Parser constructor.

parse()

new Parser(SYNTAX).parse("My Text");

Returns a Node.

Node

Node is a helper class that allows you to traverse a BNF node and its parents/children.

constructor()

Respects ebnf IToken constructor.

findChildByPosition()

node.findChildByPosition(12)

Returns the child Node matching the length position in the string or itself.

findChildByType()

node.findChildByType('operator')

Returns the first child Node (or its children) matching the specified type or false.

findParentByType()

node.findParentByType('word')

Returns the first parent Node (or its parent) matching the specified type or itself.

TODO

• Allow node deletion with Shift+backspace;
• Allow selection replacement;
• Text styling;