opencomponents · matteofigus · Mar 22, 2015 · Mar 22, 2015
diff --git a/cli/commands.js b/cli/commands.js
@@ -47,6 +47,19 @@ module.exports = {
 
     ls: { help: 'Shows the list of the available components for a linked oc registry' },
 
+    preview: {
+      help: 'Runs a test page consuming a component',
+      options: {
+        componentHref: {
+          help: 'The name of the component to preview'
+        },
+        port: {
+          help: 'The port where to start the server. Default 3000',
+          required: false
+        }
+      }
+    },
+
     publish: {
       help: 'Publish a component',
       options: {

diff --git a/cli/facade/preview.js b/cli/facade/preview.js
@@ -0,0 +1,34 @@
+'use strict';
+
+var colors = require('colors');
+var format = require('stringformat');
+var http = require('http');
+var opn = require('opn');
+var strings = require('../../resources/index');
+var urlParser = require('../../registry/domain/url-parser');
+
+module.exports = function(dependencies){
+
+  var logger = dependencies.logger;
+
+  return function(opts){
+
+    var port = opts.port || 3000;
+
+    urlParser.parse(opts.componentHref, function(err, parsed){
+      if(err){ return logger.log(strings.errors.cli.COMPONENT_HREF_NOT_FOUND.red); }
+
+      http.createServer(function(req, res){
+        res.writeHead(200, {'Content-Type': 'text/html'});
+        res.end(format('<html><body><oc-component href="{0}"></oc-component><script src="{1}"></script></body></html>', 
+                        opts.componentHref, parsed.clientHref));
+
+      }).listen(port, function(){
+        var previewUrl = 'http://localhost:' + port;
+        logger.log(format(strings.messages.cli.PREVIEW_STARTED_AT_URL, previewUrl).green);
+        opn(previewUrl);
+      });
+    });
+
+  };
+};
diff --git a/package.json b/package.json
@@ -61,13 +61,14 @@
     "nice-cache": "0.0.5",
     "node-dir": "0.1.5",
     "nomnom": "1.8.1",
+    "opn": "^1.0.1",
     "performance-now": "0.2.0",
     "read": "1.0.5",
     "semver": "4.0.3",
+    "stringformat": "0.0.5",
     "tar.gz": "0.1.1",
     "uglify-js": "2.4.13",
     "underscore": "1.8.1",
-    "watch": "0.13.0",
-    "stringformat": "0.0.5"
+    "watch": "0.13.0"
   }
 }
diff --git a/registry/domain/url-parser.js b/registry/domain/url-parser.js
@@ -0,0 +1,38 @@
+'use strict';
+
+var querystring = require('querystring');
+var request = require('../../utils/request');
+var semver = require('semver');
+var url = require('url');
+
+var removeFinalSlashes = function(s){
+  while(s.slice(-1) === '/'){
+    s = s.slice(0, -1);
+  }
+  return s;
+};
+
+module.exports = {
+  parse: function(componentHref, callback){
+    request(componentHref, function(err, res){
+      if(err){ return callback(err); }
+
+      var parsed = JSON.parse(res),
+          requestedVersion = parsed.requestVersion,
+          href = url.parse(componentHref),
+          relativePath = removeFinalSlashes(href.pathname),
+          withoutVersion = removeFinalSlashes(relativePath.replace(requestedVersion, '')),
+          componentName = withoutVersion.substr(withoutVersion.lastIndexOf('/') + 1),
+          withoutComponent = removeFinalSlashes(withoutVersion.replace(componentName, '')),
+          registryUrl = href.protocol + '//' + href.host + withoutComponent + '/';
+
+      callback(null, {
+        clientHref: registryUrl + 'oc-client/client.js',
+        componentName: componentName,
+        parameters: querystring.parse(href.query),
+        registryUrl: registryUrl,
+        version: requestedVersion
+      });
+    }); 
+  }
+};
diff --git a/resources/index.js b/resources/index.js
@@ -32,6 +32,7 @@ module.exports = {
       PARAMETER_WRONG_FORMAT_CODE: 'wrong type'
     },
     cli: {
+      COMPONENT_HREF_NOT_FOUND: 'The specified path is not a valid component\'s url',
       COMPONENTS_LINKED_NOT_FOUND: 'No components linked in the project',
       COMPONENTS_NOT_FOUND: 'no components found in specified path',
       DEV_FAIL: 'An error happened when initialising the dev runner: {0}',
@@ -63,6 +64,7 @@ module.exports = {
       ENTER_PASSWORD: 'Enter password:',
       ENTER_USERNAME: 'Enter username:',
       PACKAGING: 'Packaging -> {0}',
+      PREVIEW_STARTED_AT_URL: 'Component\'s preview started at url: {0}',
       PUBLISHED: 'Published -> {0}',
       PUBLISHING: 'Publishing -> {0}',
       REGISTRY_ADDED: 'oc registry added',

diff --git a/test/unit/registry-domain-url-parser.js b/test/unit/registry-domain-url-parser.js
@@ -0,0 +1,103 @@
+'use strict';
+
+var expect = require('chai').expect;
+var injectr = require('injectr');
+var sinon = require('sinon');
+
+describe('registry : domain : url-parser', function(){
+
+  var parsed;
+  var execute = function(url, returnVersion, callback){
+    var urlParser = injectr('../../registry/domain/url-parser.js', {
+      '../../utils/request': sinon.stub().yields(null, JSON.stringify({
+        requestVersion: returnVersion
+      }))
+    });
+
+    urlParser.parse(url, function(err, res){
+      parsed = res;
+      callback();
+    });
+  };
+
+  describe('when parsing http://www.registry.com/api/v2/component-name', function(){
+
+    before(function(done){
+      execute('http://www.registry.com/api/v2/component-name', '', done);
+    });
+
+    it('componentName should be component-name', function(){
+      expect(parsed.componentName).to.equal('component-name');
+    });
+
+    it('version should be blank', function(){
+      expect(parsed.version).to.equal('');
+    });
+
+    it('registryUrl should be http://www.registry.com/api/v2/', function(){
+      expect(parsed.registryUrl).to.equal('http://www.registry.com/api/v2/');
+    });
+
+    it('parameters should be {}', function(){
+      expect(parsed.parameters).to.eql({});
+    });
+
+    it('clientHref should be http://www.registry.com/api/v2/oc-client/client.js', function(){
+      expect(parsed.clientHref).to.equal('http://www.registry.com/api/v2/oc-client/client.js');
+    });
+  });
+
+  describe('when parsing http://www.registry.com/component-name/~1.0.0/?hello=world', function(){
+
+    before(function(done){
+      execute('http://www.registry.com/component-name/~1.0.0/?hello=world', '~1.0.0', done);
+    });
+
+    it('componentName should be component-name', function(){
+      expect(parsed.componentName).to.equal('component-name');
+    });
+
+    it('version should be blank', function(){
+      expect(parsed.version).to.equal('~1.0.0');
+    });
+
+    it('registryUrl should be http://www.registry.com/', function(){
+      expect(parsed.registryUrl).to.equal('http://www.registry.com/');
+    });
+
+    it('parameters should be { hello: \'world\'}', function(){
+      expect(parsed.parameters).to.eql({ hello: 'world' });
+    });
+
+    it('clientHref should be http://www.registry.com/oc-client/client.js', function(){
+      expect(parsed.clientHref).to.equal('http://www.registry.com/oc-client/client.js');
+    });
+  });
+
+  describe('when parsing http://www.registry.com/12345/~1.0.0?hello=world', function(){
+
+    before(function(done){
+      execute('http://www.registry.com/12345/~1.0.0?hello=world', '~1.0.0', done);
+    });
+
+    it('componentName should be 12345', function(){
+      expect(parsed.componentName).to.equal('12345');
+    });
+
+    it('version should be blank', function(){
+      expect(parsed.version).to.equal('~1.0.0');
+    });
+
+    it('registryUrl should be http://www.registry.com/', function(){
+      expect(parsed.registryUrl).to.equal('http://www.registry.com/');
+    });
+
+    it('parameters should be { hello: \'world\'}', function(){
+      expect(parsed.parameters).to.eql({ hello: 'world' });
+    });
+
+    it('clientHref should be http://www.registry.com/oc-client/client.js', function(){
+      expect(parsed.clientHref).to.equal('http://www.registry.com/oc-client/client.js');
+    });
+  });
+});