Merge pull request marko-js#734 from marko-js/655-renderToString-browser

Fixes marko-js#655 - Implement renderToString in the browser.

src/runtime/vdom/AsyncVDOMBuilder.js

@@ -311,7 +311,17 @@ var proto = AsyncVDOMBuilder.prototype = {
     },
 
     toString: function() {
-        return this.___getNode().outerHTML;
+        var docFragment = this.___getNode();
+        var html = '';
+
+        if (docFragment.hasChildNodes()) {
+            var children = docFragment.childNodes;
+            for (var i = 0; i < children.length; i++) {
+                html += children[i].outerHTML;
+            }
+        }
+
+        return html;
     },
 
     then: function(fn, fnErr) {

test/autotests/components-browser/component-renderToString-callback-sync/component.js

@@ -0,0 +1,16 @@
+var helloComponent = require('./components/hello');
+
+module.exports = {
+    onMount: function() {
+        var self = this;
+        helloComponent.renderToString({
+            name: this.input.name
+        }, function (error, html) {
+            if (error) {
+                self.emit('renderError', error);
+            } else {
+                self.emit('html', html);
+            }
+        });
+    }
+};

test/autotests/components-browser/component-renderToString-callback-sync/components/hello/index.marko

@@ -0,0 +1,3 @@
+<div>
+    <test-async name=input.name/>
+</div>

test/autotests/components-browser/component-renderToString-callback-sync/components/test-async/renderer.js

@@ -0,0 +1,7 @@
+module.exports = function(input, out) {
+    var asyncOut = out.beginAsync();
+    setTimeout(function() {
+        asyncOut.write('[async] ' + input.name);
+        asyncOut.end();
+    }, 10);
+};

test/autotests/components-browser/component-renderToString-callback-sync/index.marko

@@ -0,0 +1,3 @@
+<div>
+    <div name=input.name/>
+</div>

test/autotests/components-browser/component-renderToString-callback-sync/test.js

@@ -0,0 +1,16 @@
+var expect = require('chai').expect;
+
+module.exports = function(helpers, done) {
+    var component = helpers.mount(require('./index'), {
+        name: 'john'
+    });
+
+    component.on('html', function(renderedHtml) {
+        expect(renderedHtml).to.equal('<div>[async] john</div>');
+        done();
+    });
+
+    component.on('error', function (error) {
+        done(error);
+    });
+};

test/autotests/components-browser/component-renderToString/component.js

@@ -0,0 +1,9 @@
+var helloComponent = require('./components/hello');
+
+module.exports = {
+    onMount: function() {
+        this.renderedHtml = helloComponent.renderToString({
+            name: this.input.name
+        });
+    }
+};

test/autotests/components-browser/component-renderToString/components/hello.marko

@@ -0,0 +1,3 @@
+<div class="hello">
+    <div>${input.name}</div>
+</div>

test/autotests/components-browser/component-renderToString/index.marko

@@ -0,0 +1,3 @@
+<div>
+    <hello name=input.name/>
+</div>

test/autotests/components-browser/component-renderToString/test.js

@@ -0,0 +1,9 @@
+var expect = require('chai').expect;
+
+module.exports = function(helpers) {
+    var component = helpers.mount(require('./index'), {
+        name: 'john'
+    });
+
+    expect(component.renderedHtml).to.equal('<div class="hello"><div>john</div></div>');
+};