Implement a function to defer rendering via promise chaining (#169)

Service side of
ember-fastboot/fastboot#41

Author: danmcclain

README.md

@@ -110,6 +110,21 @@ check if you are running within FastBoot by checking
 `fastboot.request` which exposes details about the current request being
 handled by FastBoot
 
+### Delaying the server response
+
+By default, FastBoot waits for the `beforeModel`, `model`, and
+`afterModel` hooks to resolve before sending the response back to the
+client. If you have asynchrony that runs outside of those contexts, your
+response may not reflect the state that you want. To solve this, the
+`fastboot` service has `deferRendering` function that accepts a promise.
+It will chain all promises passed to it, and the FastBoot server will
+wait until all of these promises resolve before sending the response to
+the client. These promises must be chained before the rendering is
+complete after the model hooks. For example, if a component that is
+rendered into the page makes an async call for data, registering a
+promise to be resolved in its `init` hook would allow the component to
+defer the rendering of the page.
+
 ### Cookies
 
 You can access cookies for the current request via `fastboot.request`

app/services/fastboot.js

@@ -48,5 +48,10 @@ export default Ember.Service.extend({
 
   isFastBoot: computed(function() {
     return typeof FastBoot !== 'undefined';
-  })
+  }),
+
+  deferRendering(promise) {
+    Ember.assert('deferRendering requires a promise or thennable object', promise.then);
+    this._fastbootInfo.deferRendering(promise);
+  }
 });

tests/acceptance/async-content-test.js

@@ -0,0 +1,38 @@
+var chai = require('chai');
+var expect = chai.expect;
+var RSVP = require('rsvp');
+var AddonTestApp = require('ember-cli-addon-tests').AddonTestApp;
+var request = require('request');
+var get = RSVP.denodeify(request);
+
+describe('async content via deferred content', function() {
+  this.timeout(300000);
+
+  var app;
+
+  before(function() {
+
+    app = new AddonTestApp();
+
+    return app.create('async-content')
+      .then(function() {
+        return app.startServer({
+          command: 'fastboot',
+          additionalArguments: ['--serve-assets']
+        });
+      });
+  });
+
+  after(function() {
+    return app.stopServer();
+  });
+
+  it('waits for async content when using `fastboot.deferRendering`', function() {
+    return get({
+      url: 'http://localhost:49741/'
+    })
+      .then(function(response) {
+        expect(response.body).to.contain('Async content: foo');
+      });
+  });
+});

tests/fixtures/async-content/app/components/async-content.js

@@ -0,0 +1,35 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  fastboot: Ember.inject.service(),
+
+  init() {
+    this._super(...arguments);
+
+    let deferred = Ember.RSVP.defer();
+
+    let runLater = Ember.run.later(() => {
+      this.set('setLater', 'foo');
+      deferred.resolve()
+      this.set('runLater', null);
+      this.set('deferred', null);
+    }, 100);
+
+    this.runLater =  runLater;
+    this.deferred = deferred;
+
+    this.get('fastboot').deferRendering(deferred.promise);
+  },
+
+  destroy() {
+    let runLater = this.get('runLater');
+    let deferred = this.get('deferred');
+
+    if (runLater) {
+      Ember.run.cancel(runLater);
+      deferred.reject('cancelled');
+    }
+
+    this._super(...arguments);
+  }
+});

tests/fixtures/async-content/app/templates/application.hbs

@@ -0,0 +1 @@
+{{async-content}}

tests/fixtures/async-content/app/templates/components/async-content.hbs

@@ -0,0 +1 @@
+Async content: {{setLater}}