Syntax

The Syntax to define plugin definitions inside the data-plugins Attribute is defined as formal parsing expression grammar. The Parser is generated with PEG.js from the following grammer:

start
  = Plugins

Plugins
  = PluginDefinitions
  / PluginDefinition

// multiple plugin definitions
PluginDefinitions
  = first:PluginDefinition
    rest:(ws "," ws chain:PluginDefinition { return chain; })+
    { return [].concat(first, rest); }

// single plugin definition. e.g.: p1|p2|(p3,p4|p5)| p6
PluginDefinition
  = Merge
  / Split
  / Group
  / Pipe
  / Plugin

// Group is like split, but can be used to start multiple streams
// allow: (p1,p2)
Group
  = ws "(" ws first:Pipe g:(ws "," ws p:Pipe { return p; })* ws ")" ws
    { return { group: [].concat(first, g) }; }

// allow: p1
// allow: p1|p2|p3 etc.
Pipe
  = ws p:PluginName g:(ws "|" ws name:PluginName { return name; })*
    { return pipe(p, g); }

// allow: p1|(p2,p3|p4)
// allow: p1|p2|p3|(p4,p5)
// not allowed: nesting splits: p1|(p2|(p3,p4),p5)
Split
  = s:Pipe ws "|" ws g:Group { return split(s, g); }

// allow merge: pipe after split: p1|(p2,p3)|p4
// allow merge: pipe after group: (p1,p2)|p3
Merge
  = s:Split ws "|" ws p:Merge { s.merge = p; return s; }
  / s:Split ws "|" ws p:Split { s.merge = p; return s; }
  / s:Split ws "|" ws p:Pipe  { s.merge = p; return s; }
  / g:Group ws "|" ws p:Merge { g.merge = p; return g; }
  / g:Group ws "|" ws p:Split { g.merge = p; return g; }
  / g:Group ws "|" ws p:Pipe  { g.merge = p; return g; }

Plugin
  = name:PluginName { return newPlugin(name); }

PluginName
  = first:[a-z] rest:[a-zA-Z0-9]* ws { return first + rest.join(''); }

ws "whitespace"
  = [ \t\n\r]*

Simple Plugin

The simplest plugin definition contains only a single plugin:

<div data-plugins="plugin"> ... </div>

The name has to start with a lowercase letter ([a-z]) followed by alphanumeric characters ([a-zA-Z0-9]*).

Pipes

<div data-plugins="p1 | p2 |         p3"> ... </div>

Whitespaces can be omitted:

<div data-plugins="p1|p2|p3"> ... </div>

Groups

<div data-plugins="(p1, p2)"> ... </div>

Groups an be used in combination with a pipe to split a stream:

<div data-plugins="p1 | (p2, p3) "> ... </div>

...or to merge a group to a single stream:

<div data-plugins="(p1, p2) | p3"> ... </div>

Multiple Plugin Definitions on an element

Multiple Plugins can be defined separated by a comma:

<div data-plugins="p1, p2"> ... </div>

Each definition can use Pipes and Groups:

<div data-plugins="p1 | p2 | p3, (x1, x2) | x3, z1 | z2 | (z3 | z4, z5)"> ... </div>