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

Allow visit to specify Rehydration/Serialization or default ClientBuilder

Author: rwjblue

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

@@ -343,6 +343,15 @@ class BootOptions {
     */
     this.isInteractive = environment.hasDOM; // This default is overridable below
 
+
+    /**
+      @property _renderMode
+      @type string
+      @default false
+      @private
+    */
+    this._renderMode = options._renderMode;
+
     /**
       Run in a full browser environment.
 
@@ -482,6 +491,7 @@ class BootOptions {
     // 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,66 @@ 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: rehydration`](assert) {
+    assert.expect(2);
+
+    let indexTemplate = '<div class="foo">Hi, Mom!</div>';
+    this.addTemplate('index', indexTemplate);
+    let rootElement = document.createElement('div');
+
+    let bootOptions = {
+      isBrowser: false,
+      rootElement,
+      _renderMode: 'serialize'
+    };
+
+    ENV._APPLICATION_TEMPLATE_WRAPPER = false;
+
+    return this.visit('/', bootOptions)
+      .then((instance) => {
+        assert.equal(
+          instance.rootElement.firstChild.nodeValue,
+          '%+b:0%',
+          'glimmer-vm comment node was not found'
+        );
+      }).then(() =>{
+        return this.runTask(()=>{
+          this.applicationInstance.destroy();
+          this.applicationInstance = null;
+        });
+      }).then(() => {
+        bootOptions = {
+          isBrowser: false,
+          rootElement,
+          _renderMode: 'rehydrate'
+        };
+
+        this.application.visit('/', bootOptions).then(instance => {
+          assert.equal(
+            instance.rootElement.innerHTML,
+            indexTemplate,
+            'was not properly rehydrated'
+          );
+        });
+      });
+  }
+
   // 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(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`);