Integrated snap.svg and starting to render content

src/index.html

@@ -20,5 +20,7 @@
 
   <div id="error"></div>
 
-  <div id="regexp-render"></div>
+  <div id="regexp-render">
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
+  </div>
 </div>

src/js/main.js

@@ -1,3 +1,17 @@
 import parser from './parser/javascript.js';
+import Snap from 'snapsvg';
 
-window.parser = parser;
+// Testing code
+(function() {
+  var result = parser.parse('test expr'),
+      container = Snap('#regexp-render svg');
+
+  if (container) {
+    document.body.className = 'has-results';
+    result.render(container);
+
+    setTimeout(() => {
+      result.position();
+    });
+  }
+}());

src/js/parser/javascript/grammar.peg

@@ -1,6 +1,6 @@
 grammar JavascriptRegexp
   root <- ( ( "/" regexp "/" fl:[igm]* ) / regexp ) <Root>
-  regexp <- match ( "|" regexp )? <Regexp>
+  regexp <- match ( "|" match )* <Regexp>
   match <- anchor_start? ( ( subexp / charset / terminal ) repeat? )* anchor_end?
   anchor_start <- "^"
   anchor_end <- "$"

src/js/parser/javascript/root.js

@@ -1,4 +1,37 @@
 export default {
+  render(container) {
+    this.rect = this.container.rect().attr({
+      x: 5,
+      y: 5,
+      rx: 10,
+      ry: 10,
+      fill: '#f00'
+    });
+    this.text = this.container.text(0, 0, this.textValue).attr({
+      fill: '#fff',
+      fontWeight: 'bold'
+    });
+  },
+
+  position() {
+    var box = this.text.getBBox();
+
+    this.container.attr({
+      width: box.width + 20,
+      height: box.height + 20
+    });
+
+    this.text.attr({
+      x: 10,
+      y: box.height + 5
+    });
+
+    this.rect.attr({
+      width: box.width + 10,
+      height: box.height + 10
+    });
+  },
+
   flags() {
     var flags;