Merge pull request #192 from habdelra/serialize-state

Fast Boot "Shoebox": A means to serialize application state into DOM for consumption by the browser

Author: tomdale

Brocfile.js

@@ -2,7 +2,7 @@
 import Ember from "ember";
 
 const { deprecate, computed, get } = Ember;
-const { alias, deprecatingAlias, readOnly } = computed;
+const { deprecatingAlias, readOnly } = computed;
 
 const RequestObject = Ember.Object.extend({
   init() {
@@ -18,18 +18,59 @@ const RequestObject = Ember.Object.extend({
     this.protocol = request.protocol;
     this._host = function() {
       return request.host();
-    }
+    };
   },
 
   host: computed(function() {
     return this._host();
   })
 });
 
+const Shoebox = Ember.Object.extend({
+  put(key, value) {
+    Ember.assert('shoebox.put is only invoked from the FastBoot rendered application', this.get('fastboot.isFastBoot'));
+    Ember.assert('the provided key is a string', typeof key === 'string');
+
+    let fastbootInfo = this.get('fastboot._fastbootInfo');
+    if (!fastbootInfo.shoebox) { fastbootInfo.shoebox = {}; }
+
+    fastbootInfo.shoebox[key] = value;
+  },
+
+  retrieve(key) {
+    if (this.get('fastboot.isFastBoot')) {
+      let shoebox = this.get('fastboot._fastbootInfo.shoebox');
+      if (!shoebox) { return; }
+
+      return shoebox[key];
+    }
+
+    let shoeboxItem = this.get(key);
+    if (shoeboxItem) { return shoeboxItem; }
+
+    let $el = Ember.$(`#shoebox-${key}`);
+    if (!$el.length) { return; }
+    let valueString = $el.text();
+    if (!valueString) { return; }
+
+    shoeboxItem = JSON.parse(valueString);
+    this.set(key, shoeboxItem);
+
+    return shoeboxItem;
+  }
+});
+
 export default Ember.Service.extend({
   cookies: deprecatingAlias('request.cookies', { id: 'fastboot.cookies-to-request', until: '0.9.9' }),
   headers: deprecatingAlias('request.headers', { id: 'fastboot.headers-to-request', until: '0.9.9' }),
 
+  init() {
+    this._super(...arguments);
+
+    let shoebox = Shoebox.create({ fastboot: this });
+    this.set('shoebox', shoebox);
+  },
+
   host: computed(function() {
     deprecate(
       'Usage of fastboot service\'s `host` property is deprecated.  Please use `request.host` instead.',

app/services/fastboot.js

@@ -5,10 +5,8 @@
     "ember": "canary",
     "ember-data": "canary",
     "ember-resolver": "~0.1.12",
-    "loader.js": "ember-cli/loader.js#3.2.0",
-    "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
-    "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
-    "ember-load-initializers": "ember-cli/ember-load-initializers#0.0.2",
+    "ember-cli-shims": "0.1.0",
+    "ember-cli-test-loader": "0.2.2",
     "ember-qunit": "0.2.8",
     "ember-qunit-notifications": "0.0.7",
     "qunit": "~1.17.1"

bower.json

@@ -0,0 +1,18 @@
+/*jshint node:true*/
+/* global require, module */
+var EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
+
+module.exports = function(defaults) {
+  var app = new EmberAddon(defaults, {
+    // Add options here
+  });
+
+  /*
+    This build file specifes the options for the dummy test app of this
+    addon, located in `/tests/dummy`
+    This build file does *not* influence how the addon or the app using it
+    behave. You most likely want to be modifying `./index.js` or app's build file
+  */
+
+  return app.toTree();
+};

ember-cli-build.js

@@ -10,7 +10,7 @@
   "scripts": {
     "start": "ember server",
     "build": "ember build",
-    "test": "mocha",
+    "test": "mocha && ember test",
     "test:precook": "node node_modules/ember-cli-addon-tests/scripts/precook-node-modules.js"
   },
   "engines": {
@@ -38,10 +38,13 @@
     "ember-cli-uglify": "^1.2.0",
     "ember-data": "1.13.8",
     "ember-export-application-global": "^1.0.3",
+    "ember-load-initializers": "^0.5.1",
+    "ember-resolver": "^2.0.3",
     "exists-sync": "0.0.3",
     "fs-extra": "^0.24.0",
     "fs-promise": "^0.3.1",
     "glob": "^7.0.0",
+    "loader.js": "^4.0.1",
     "mocha": "^2.2.4",
     "request": "^2.55.0",
     "symlink-or-copy": "^1.0.1",
@@ -62,7 +65,9 @@
     "broccoli-merge-trees": "^1.1.1",
     "broccoli-plugin": "^1.2.1",
     "broccoli-stew": "^1.2.0",
-    "fastboot-express-middleware": "1.0.0-beta.3",
+    "fastboot-express-middleware": "1.0.0-beta.5",
+    "ember-cli-babel": "^5.1.5",
+    "ember-test-helpers": "^0.5.22",
     "express": "^4.8.5",
     "fastboot-filter-initializers": "0.0.2",
     "lodash.clonedeep": "^4.3.1",

package.json

@@ -0,0 +1,15 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  fastboot: Ember.inject.service(),
+  shoebox: Ember.computed.readOnly('fastboot.shoebox'),
+
+  model() {
+    let fastboot = this.get('fastboot');
+    let shoebox = this.get('shoebox');
+    if (fastboot.get('isFastBoot')) {
+      shoebox.put('key1', { foo: 'bar' });
+      shoebox.put('key2', { zip: 'zap' });
+    }
+  }
+});

test/fixtures/shoebox/app/routes/application.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default function destroyApp(application) {
+  Ember.run(application, 'destroy');
+}

test/helpers/destroy-app.js

@@ -0,0 +1,18 @@
+import Ember from 'ember';
+import Application from '../fixtures/fanny-pack/app';
+import config from '../../config/environment';
+
+export default function startApp(attrs) {
+  let application;
+
+  let attributes = Ember.merge({}, config.APP);
+  attributes = Ember.merge(attributes, attrs); // use defaults, but you can override;
+
+  Ember.run(() => {
+    application = Application.create(attributes);
+    application.setupForTesting();
+    application.injectTestHelpers();
+  });
+
+  return application;
+}

test/helpers/start-app.js

@@ -0,0 +1,43 @@
+var expect           = require('chai').expect;
+var RSVP             = require('rsvp');
+var request          = RSVP.denodeify(require('request'));
+
+var AddonTestApp     = require('ember-cli-addon-tests').AddonTestApp;
+
+describe('shoebox - put', function() {
+  this.timeout(300000);
+
+  var app;
+
+  before(function() {
+    app = new AddonTestApp();
+
+    return app.create('shoebox')
+      .then(function() {
+        return app.startServer({
+          command: 'fastboot'
+        });
+      });
+  });
+
+  after(function() {
+    return app.stopServer();
+  });
+
+  it('put items into the shoebox', function() {
+    return request('http://localhost:49741/')
+      .then(function(response) {
+        expect(response.statusCode).to.equal(200);
+        expect(response.body).to.contain(
+          '<script type="fastboot/shoebox" id="shoebox-key1">' +
+            '{"foo":"bar"}' +
+          '</script>'
+        );
+        expect(response.body).to.contain(
+          '<script type="fastboot/shoebox" id="shoebox-key2">' +
+            '{"zip":"zap"}' +
+          '</script>'
+        );
+      });
+  });
+});

test/shoebox-put-test.js

@@ -1,19 +1,32 @@
 {
   "predef": [
+    "document",
+    "window",
+    "location",
+    "setTimeout",
+    "$",
+    "-Promise",
+    "define",
     "console",
-    "it",
-    "describe",
-    "beforeEach",
-    "afterEach",
-    "before",
-    "after",
-    "-Promise"
+    "visit",
+    "exists",
+    "fillIn",
+    "click",
+    "keyEvent",
+    "triggerEvent",
+    "find",
+    "findWithAssert",
+    "wait",
+    "DS",
+    "andThen",
+    "currentURL",
+    "currentPath",
+    "currentRouteName"
   ],
-  "unused": true,
-  "node": true,
+  "node": false,
   "browser": false,
   "boss": true,
-  "curly": false,
+  "curly": true,
   "debug": false,
   "devel": false,
   "eqeqeq": true,
@@ -34,5 +47,6 @@
   "strict": false,
   "white": false,
   "eqnull": true,
-  "esnext": true
+  "esnext": true,
+  "unused": true
 }