Merge pull request #580 from rondale-sc/utilize-rehydration-serialization-from-glimmer

Utilize rehydration serialization from glimmer

Author: kratiahuja

README.md

@@ -399,6 +399,43 @@ export default  Ember.Route.extend({
 ```
 And they still take advantage of caching in the `shoebox`. No more redundant AJAX for already acquired data. Installation details are available in the addon [README](https://github.com/appchance/ember-cached-shoe#ember-cached-shoe).
 
+### Rehydration
+
+What is Rehydration?
+
+The rehydration feature means that the Glimmer VM can take a DOM tree
+created using Server Side Rendering (SSR) and use it as the starting
+point for the append pass.
+
+See details here:
+
+https://github.com/glimmerjs/glimmer-vm/commit/316805b9175e01698120b9566ec51c88d075026a
+
+In order to utilize rehydration in Ember.js applications we need to ensure that
+both server side renderers (like fastboot) properly encode the DOM they send to
+the browser with the serialization format (introduced in the commit above) AND
+that the browser instantiated Ember.js application knows to use the rehydration
+builder to consume that DOM.
+
+Rehydration is 100% opt-in, if you do not specify the environment flag your
+application will behave as it did before!
+
+We can opt-in to the rehydration filter by setting the following environment
+flag:
+
+```
+EXPERIMENTAL_RENDER_MODE_SERIALIZE=true
+```
+
+This flag is read by Ember CLI Fastboot's dependency; fastboot to alert it to
+produce DOM with the glimmer-vm's serialization element builder.  This addon
+(Ember CLI Fastboot) then uses a utility function from glimmer-vm that allows
+it to know whether or not the DOM it received in the browser side was generated
+by the serialization builder.  If it was, it tells the Ember.js Application to
+use the rehydration builder and your application will be using rehydration.
+
+Rehydration is only compatible with fastboot > 1.1.4-beta.1, and Ember.js > 3.2.
+
 ## Build Hooks for FastBoot
 
 ### Disabling incompatible dependencies

index.js

@@ -58,6 +58,7 @@ module.exports = {
       app.options.fingerprint.generateAssetMap = true;
     }
 
+    app.import('vendor/experimental-render-mode-rehydrate.js');
     // get the app registry object and app name so that we can build the fastboot
     // tree
     this._appRegistry = app.registry;

package.json

@@ -29,7 +29,7 @@
     "ember-cli-lodash-subset": "2.0.1",
     "ember-cli-preprocess-registry": "^3.1.0",
     "ember-cli-version-checker": "^2.1.0",
-    "fastboot": "^1.1.3",
+    "fastboot": "^1.1.4-beta.1",
     "fastboot-express-middleware": "^1.1.0",
     "fastboot-transform": "^0.1.2",
     "fs-extra": "^4.0.2",

vendor/experimental-render-mode-rehydrate.js

@@ -0,0 +1,29 @@
+(function() {
+  if (typeof FastBoot === 'undefined') {
+    var current = document.getElementById('fastboot-body-start');
+
+    if (
+      current &&
+      typeof Ember.ViewUtils.isSerializationFirstNode === 'function' &&
+      Ember.ViewUtils.isSerializationFirstNode(current.nextSibling)
+    ) {
+      Ember.ApplicationInstance.reopen({
+        _bootSync: function(options) {
+          if (options === undefined) {
+            options = {
+              _renderMode: 'rehydrate'
+            };
+          }
+
+          return this._super(options);
+        }
+      });
+
+      // Prevent clearRender  by removing `fastboot-body-start` which is already
+      // guarded for
+      current.parentNode.removeChild(current);
+      var end = document.getElementById('fastboot-body-end');
+      end.parentNode.removeChild(end);
+    }
+  }
+})();

yarn.lock

@@ -2869,9 +2869,9 @@ fastboot@^1.1.2:
     simple-dom "^1.0.0"
     source-map-support "^0.5.0"
 
-fastboot@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/fastboot/-/fastboot-1.1.3.tgz#56c5f56415c5ae8de2db539c0d3ecbcd65538f8b"
+fastboot@^1.1.4-beta.1:
+  version "1.1.4-beta.1"
+  resolved "https://registry.yarnpkg.com/fastboot/-/fastboot-1.1.4-beta.1.tgz#860f8af2bd032b3a7477fdf6e1a64b034a02829f"
   dependencies:
     chalk "^2.0.1"
     cookie "^0.3.1"