Allow visit to specify Rehydration/Serialization or default

ClientBuilder

Expose as a configurable option the `renderMode` option.  This option
would be to specify the clientBuilder to be used when Glimmer does it's
append run.

The serialization mode, used by SSR applications, is used to specify
additional markings necessary to get enough fidelity to accurately
rehydrate the DOM.  For example, it would provide additional comment
nodes with codes to ensure text nodes are separated when they are rather
than merged.

The rehydration mode is specifically designed to read DOM that is
produced by the serialization mode and accurately reproduce it.

A great description of how Rehydration works can be found in this
commit:

glimmerjs/glimmer-vm@316805b

This PR allows the appropriate ElementBuilder interface to be used via
the `visit` API.

Additional Work:

- Update Fastboot to pass the appropriate `renderMode` flag such that it
generates the serialization format DOM
- Update ember-cli-fastboot instance-initializer to not do a double boot
and instead configure it to use the rehydration `renderMode`
   - See more information here:
   https://github.com/ember-fastboot/ember-cli-fastboot/blob/master/addon/instance-initializers/clear-double-boot.js

Open Questions:

- Is the `renderMode` flag Public API
- Should this be put behind a feature flag
   - @rwjblue noted that this technically would be a bug fix as it would
   remove the double render problem with SSR ember apps

Author: rondale-sc

packages/ember-application/lib/system/application-instance.js

@@ -342,6 +342,14 @@ function BootOptions(options = {}) {
   */
   this.isInteractive = environment.hasDOM; // This default is overridable below
 
+  /**
+    @property renderMode
+    @type string
+    @default false
+    @public
+  */
+  this.renderMode = options.renderMode;
+
   /**
     Run in a full browser environment.
 
@@ -481,6 +489,7 @@ BootOptions.prototype.toEnvironment = function() {
   // For compatibility with existing code
   env.hasDOM = this.isBrowser;
   env.isInteractive = this.isInteractive;
+  env.renderMode = this.renderMode;
   env.options = this;
   return env;
 };

packages/ember-application/tests/system/visit_test.js

@@ -12,6 +12,7 @@ import Engine from '../../system/engine';
 import { Route } from 'ember-routing';
 import { Component, helper } from 'ember-glimmer';
 import { compile } from 'ember-template-compiler';
+import { ENV } from 'ember-environment';
 
 function expectAsyncError() {
   RSVP.off('error');
@@ -21,6 +22,7 @@ moduleFor('Application - visit()', class extends ApplicationTestCase {
 
   teardown() {
     RSVP.on('error', onerrorDefault);
+    ENV._APPLICATION_TEMPLATE_WRAPPER = false;
     super.teardown();
   }
 
@@ -35,6 +37,62 @@ moduleFor('Application - visit()', class extends ApplicationTestCase {
     );
   }
 
+  [`@test does not add serialize-mode markers by default`](assert) {
+    let templateContent = '<div class="foo">Hi, Mom!</div>';
+    this.addTemplate('index', templateContent);
+    let rootElement = document.createElement('div');
+
+    let bootOptions = {
+      isBrowser: false,
+      rootElement
+    };
+
+    ENV._APPLICATION_TEMPLATE_WRAPPER = false;
+    return this.visit('/', bootOptions).then(()=> {
+      assert.equal(rootElement.innerHTML, templateContent, 'without serialize flag renders as expected');
+    });
+  }
+
+  [`@test renderMode: rehydrate`](assert) {
+
+    let initialHTML = `<!--%+block:0%--><!--%+block:1%--><!--%+block:2%--><!--%+block:3%--><!--%+block:4%--><!--%+block:5%--><!--%+block:6%--><div class=\"foo\">Hi, Mom!</div><!--%-block:6%--><!--%-block:5%--><!--%-block:4%--><!--%-block:3%--><!--%-block:2%--><!--%-block:1%--><!--%-block:0%-->`;
+
+    this.addTemplate('index', '<div class="foo">Hi, Mom!</div>');
+    let rootElement = document.createElement('div');
+    rootElement.innerHTML = initialHTML;
+
+    let bootOptions = {
+      isBrowser: false,
+      rootElement,
+      renderMode: 'rehydrate'
+    };
+
+    ENV._APPLICATION_TEMPLATE_WRAPPER = false;
+    return this.visit('/', bootOptions).then(()=> {
+      // The exact contents of this may change when the underlying
+      // implementation changes in the glimmer vm
+      assert.equal(rootElement.innerHTML, '<div class="foo">Hi, Mom!</div>', 'precond - without serialize flag renders as expected');
+    });
+  }
+
+  [`@test renderMode: serialize`](assert) {
+    this.addTemplate('index', '<div class="foo">Hi, Mom!</div>');
+    let rootElement = document.createElement('div');
+
+    let bootOptions = {
+      isBrowser: false,
+      rootElement,
+      renderMode: 'serialize'
+    };
+
+    ENV._APPLICATION_TEMPLATE_WRAPPER = false;
+    return this.visit('/', bootOptions).then(()=> {
+      // The exact contents of this may change when the underlying
+      // implementation changes in the glimmer vm
+      let expectedTemplate = `<!--%+block:0%--><!--%+block:1%--><!--%+block:2%--><!--%+block:3%--><!--%+block:4%--><!--%+block:5%--><!--%+block:6%--><div class=\"foo\">Hi, Mom!</div><!--%-block:6%--><!--%-block:5%--><!--%-block:4%--><!--%-block:3%--><!--%-block:2%--><!--%-block:1%--><!--%-block:0%-->`;
+      assert.equal(rootElement.innerHTML, expectedTemplate, 'precond - without serialize flag renders as expected');
+    });
+  }
   // This tests whether the application is "autobooted" by registering an
   // instance initializer and asserting it never gets run. Since this is
   // inherently testing that async behavior *doesn't* happen, we set a

packages/ember-glimmer/lib/dom.ts

@@ -1,3 +1,11 @@
 ///<reference path="./simple-dom.d.ts" />
-export { DOMChanges, DOMTreeConstruction } from '@glimmer/runtime';
-export { NodeDOMTreeConstruction } from '@glimmer/node';
+export {
+  DOMChanges,
+  DOMTreeConstruction,
+  clientBuilder,
+  rehydrationBuilder
+} from '@glimmer/runtime';
+export {
+  NodeDOMTreeConstruction,
+  serializeBuilder
+} from '@glimmer/node';

packages/ember-glimmer/lib/renderer.ts

@@ -4,7 +4,9 @@ import {
   clientBuilder,
   CurriedComponentDefinition,
   curry,
+  Cursor,
   DynamicScope as GlimmerDynamicScope,
+  ElementBuilder,
   IteratorResult,
   renderMain,
   RenderResult,
@@ -35,6 +37,7 @@ import { UnboundReference } from './utils/references';
 import OutletView from './views/outlet';
 
 const { backburner } = run;
+export type IBuilder = (env: Environment, cursor: Cursor) => ElementBuilder;
 
 export class DynamicScope implements GlimmerDynamicScope {
   constructor(
@@ -79,7 +82,9 @@ class RootState {
     template: OwnedTemplate,
     self: VersionedPathReference<Opaque>,
     parentElement: Simple.Element,
-    dynamicScope: DynamicScope) {
+    dynamicScope: DynamicScope,
+    builder: IBuilder
+  ) {
     assert(`You cannot render \`${self.value()}\` without a template.`, template !== undefined);
 
     this.id = getViewId(root);
@@ -100,7 +105,7 @@ class RootState {
         env,
         self,
         dynamicScope,
-        clientBuilder(env, { element: parentElement, nextSibling: null}),
+        builder: builder(env, { element: parentElement, nextSibling: null}),
         handle
       );
       let iteratorResult: IteratorResult<RenderResult>;
@@ -249,8 +254,9 @@ export abstract class Renderer {
   private _lastRevision: number;
   private _isRenderingRoots: boolean;
   private _removedRoots: RootState[];
+  private _builder: IBuilder;
 
-  constructor(env: Environment, rootTemplate: OwnedTemplate, _viewRegistry = fallbackViewRegistry, destinedForDOM = false) {
+  constructor(env: Environment, rootTemplate: OwnedTemplate, _viewRegistry = fallbackViewRegistry, destinedForDOM = false, builder = clientBuilder) {
     this._env = env;
     this._rootTemplate = rootTemplate;
     this._viewRegistry = _viewRegistry;
@@ -260,6 +266,7 @@ export abstract class Renderer {
     this._lastRevision = -1;
     this._isRenderingRoots = false;
     this._removedRoots = [];
+    this._builder = builder;
   }
 
   // renderer HOOKS
@@ -280,7 +287,7 @@ export abstract class Renderer {
     target: Simple.Element) {
     let self = new UnboundReference(definition);
     let dynamicScope = new DynamicScope(null, UNDEFINED_REFERENCE);
-    let rootState = new RootState(root, this._env, this._rootTemplate, self, target, dynamicScope);
+    let rootState = new RootState(root, this._env, this._rootTemplate, self, target, dynamicScope, this._builder);
     this._renderRoot(rootState);
   }
 
@@ -489,8 +496,8 @@ export abstract class Renderer {
 }
 
 export class InertRenderer extends Renderer {
-  static create({ env, rootTemplate, _viewRegistry }: {env: Environment, rootTemplate: OwnedTemplate, _viewRegistry: any}) {
-    return new this(env, rootTemplate, _viewRegistry, false);
+  static create({ env, rootTemplate, _viewRegistry, builder }: {env: Environment, rootTemplate: OwnedTemplate, _viewRegistry: any, builder: any}) {
+    return new this(env, rootTemplate, _viewRegistry, false, builder);
   }
 
   getElement(_view: Opaque): Simple.Element | undefined {
@@ -499,8 +506,8 @@ export class InertRenderer extends Renderer {
 }
 
 export class InteractiveRenderer extends Renderer {
-  static create({ env, rootTemplate, _viewRegistry }: {env: Environment, rootTemplate: OwnedTemplate, _viewRegistry: any}) {
-    return new this(env, rootTemplate, _viewRegistry, true);
+  static create({ env, rootTemplate, _viewRegistry, builder}: {env: Environment, rootTemplate: OwnedTemplate, _viewRegistry: any, builder: any}) {
+    return new this(env, rootTemplate, _viewRegistry, true, builder);
   }
 
   getElement(view: Opaque): Simple.Element | undefined {

packages/ember-glimmer/lib/setup-registry.ts

@@ -6,9 +6,12 @@ import LinkToComponent from './components/link-to';
 import TextArea from './components/text_area';
 import TextField from './components/text_field';
 import {
+  clientBuilder,
   DOMChanges,
   DOMTreeConstruction,
   NodeDOMTreeConstruction,
+  rehydrationBuilder,
+  serializeBuilder,
 } from './dom';
 import Environment from './environment';
 import loc from './helpers/loc';
@@ -29,6 +32,20 @@ export function setupApplicationRegistry(registry: Registry) {
   registry.injection('service:-glimmer-environment', 'appendOperations', 'service:-dom-tree-construction');
   registry.injection('renderer', 'env', 'service:-glimmer-environment');
 
+  registry.register('service:-dom-builder', {
+    create({ bootOptions }: { bootOptions: { renderMode: string } }) {
+      let { renderMode } = bootOptions;
+
+      switch(renderMode) {
+        case 'serialize': return serializeBuilder;
+        case 'rehydrate': return rehydrationBuilder;
+        default: return clientBuilder;
+      }
+    }
+  });
+  registry.injection('service:-dom-builder', 'bootOptions', '-environment:main');
+  registry.injection('renderer', 'builder', 'service:-dom-builder');
+
   registry.register(P`template:-root`, RootTemplate);
   registry.injection('renderer', 'rootTemplate', P`template:-root`);