rvc.js output

rvc.md

This is a sample output from rvc.js to aid development of an equivalent browserify transform (see this GitHub thread). It's been commented and cleaned up slightly for readability - i.e. indenting etc.

The source file is this: https://github.com/RactiveJS/requirejs-ractive/blob/master/sample/rvc.js/js/views/Clock.html

define("rvc!views/Clock",["require","Ractive"],function(require,Ractive){

  // first, we get the parsed template, JSON.stringified css, and any
  // child components that this component uses
  var __options__={
    template:[{"t":7,"e":"div","a":{"class":["rvc-clock-demo"]},"f":[{"t":7,"e":"svg","a":{"viewBox":["0 0 100 100"]},"f":[{"t":7,"e":"g","a":{"transform":["translate(50,50)"]},"f":[{"t":7,"e":"circle","a":{"class":["clock-face"],"r":["48"]}}," ",{"t":4,"r":"minor","i":"i","f":[" ",{"t":7,"e":"line","a":{"class":["minor"],"y1":["42"],"y2":["45"],"transform":["rotate( ",{"t":2,"x":{"r":["i","minor.length"],"s":"360*${0}/${1}"}}," )"]}}," "]}," ",{"t":4,"r":"major","i":"i","f":[" ",{"t":7,"e":"line","a":{"class":["major"],"y1":["35"],"y2":["45"],"transform":["rotate( ",{"t":2,"x":{"r":["i","major.length"],"s":"360*${0}/${1}"}}," )"]}}," "]}," ",{"t":7,"e":"line","a":{"class":["hour"],"y1":["2"],"y2":["-20"],"transform":["rotate( ",{"t":2,"x":{"r":["date"],"s":"30*${0}.getHours()+${0}.getMinutes()/2"}}," )"]}}," ",{"t":7,"e":"line","a":{"class":["minute"],"y1":["4"],"y2":["-30"],"transform":["rotate( ",{"t":2,"x":{"r":["date"],"s":"6*${0}.getMinutes()+${0}.getSeconds()/10"}}," )"]}}," ",{"t":7,"e":"g","a":{"transform":["rotate( ",{"t":2,"x":{"r":["date"],"s":"6*${0}.getSeconds()"}}," )"]},"f":[{"t":7,"e":"line","a":{"class":["second"],"y1":["10"],"y2":["-38"]}}," ",{"t":7,"e":"line","a":{"class":["second-counterweight"],"y1":["10"],"y2":["2"]}}]}]}]}]}," "," "],
    css:"\n\t.rvc-clock-demo {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tpadding-bottom: 100%;\n\t}\n\n\t.rvc-clock-demo svg {\n\t\tposition: absolute;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.rvc-clock-demo .clock-face {\n\t\tstroke: #333;\n\t\tfill: white;\n\t}\n\n\t.rvc-clock-demo .minor {\n\t\tstroke: #999;\n\t\tstroke-width: 0.5;\n\t}\n\n\t.rvc-clock-demo .major {\n\t\tstroke: #333;\n\t\tstroke-width: 1;\n\t}\n\n\t.rvc-clock-demo .hour {\n\t\tstroke: #333;\n\t}\n\n\t.rvc-clock-demo .minute {\n\t\tstroke: #666;\n\t}\n\n\t.rvc-clock-demo .second, .second-counterweight {\n\t\tstroke: rgb(180,0,0);\n\t}\n\n\t.rvc-clock-demo .second-counterweight {\n\t\tstroke-width: 3;\n\t}\n",
    components:{}
  }, component={};

  // then we include the contents of the <script> block, if there is one...
  component.exports = {
    data: {
      minor: new Array( 60 ),
      major: new Array( 12 )
    },

    init: function () {
      var self = this, interval;

      this.set( 'date', new Date() );

      interval = setInterval( function () {
        self.set( 'date', new Date() );
      });

      this.on( 'teardown', function () {
        clearInterval( interval );
      });
    }
  };

  // If there's a script block and it exported an object, we augment
  // __options__ with its properties
  if(typeof component.exports === "object"){
    for(__prop__ in component.exports){
      if(component.exports.hasOwnProperty(__prop__)){
        __options__[__prop__]=component.exports[__prop__];
      }
    }
  }

  // then we're on the home straight
  return Ractive.extend(__options__);

});

A lot of the donkey work is done in modules that can be extracted out of the rvc.js source files, e.g. parseComponentDefinition.js which takes the string from an HTML file and extracts the links, requires, scripts, styles, whatever.