diff --git a/README.md b/README.md index a64fb5867..0ace6a411 100644 --- a/README.md +++ b/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 diff --git a/index.js b/index.js index aab2e30cf..2234d48f1 100644 --- a/index.js +++ b/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; diff --git a/package.json b/package.json index 4b7849e42..fe0243714 100644 --- a/package.json +++ b/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", diff --git a/vendor/experimental-render-mode-rehydrate.js b/vendor/experimental-render-mode-rehydrate.js new file mode 100644 index 000000000..0ade42e5c --- /dev/null +++ b/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); + } + } +})(); diff --git a/yarn.lock b/yarn.lock index 79aa8fdfe..f9ed6632a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2865,9 +2865,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"