Integrated snap.svg and starting to render content

gulpfile.js

@@ -68,7 +68,7 @@ gulp.task('browserify', function() {
 
       bundler.add([file.path, es6ify.runtime]);
       bundler.transform(require('./lib/canopy-transform'));
-      bundler.transform(es6ify);
+      bundler.transform(es6ify.configure(/^(?!.*node_modules)+.+\.js$/));
 
       file.contents = bundler.bundle();
     }))

karma.conf.js

@@ -23,7 +23,7 @@ module.exports = function(karma) {
 
         bundle.add([es6ify.runtime]);
         bundle.transform(require('./lib/canopy-transform'));
-        bundle.transform(es6ify);
+        bundle.transform(es6ify.configure(/^(?!.*node_modules)+.+\.js$/));
       }
     })
   });

package.json

@@ -28,6 +28,7 @@
     "karma-notify-reporter": "^0.1.1",
     "karma-phantomjs-launcher": "^0.1.4",
     "lodash": "^2.4.1",
+    "snapsvg": "git://github.com/adobe-webplatform/Snap.svg#dev",
     "through": "^2.3.6",
     "vinyl-transform": "^1.0.0"
   }

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;