[FEATURE ember-glimmer-remove-application-template-wrapper]

Implement RFC emberjs/rfcs#280
emberjs · Dec 14, 2017 · cb77ef9 · cb77ef9
1 parent 37ceda1
commit cb77ef9
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 24 deletions.
diff --git a/FEATURES.md b/FEATURES.md
@@ -32,6 +32,11 @@ for a detailed explanation.
   Add `{{@foo}}` syntax to access named arguments in component templates per
   [RFC](https://github.com/emberjs/rfcs/pull/276).
 
+* `ember-glimmer-remove-application-template-wrapper`
+
+  Remvoe the `<div>` wrapper around the application template per
+  [RFC](https://github.com/emberjs/rfcs/pull/280).
+
 * `ember-glimmer-template-only-components`
 
   Use Glimmer Components semantics for template-only components per

diff --git a/features.json b/features.json
@@ -4,6 +4,7 @@
     "ember-libraries-isregistered": null,
     "ember-improved-instrumentation": null,
     "ember-glimmer-named-arguments": null,
+    "ember-glimmer-remove-application-template-wrapper": null,
     "ember-glimmer-template-only-components": null,
     "ember-routing-router-service": true,
     "ember-engines-mount-params": true,

diff --git a/packages/ember-glimmer/externs.d.ts b/packages/ember-glimmer/externs.d.ts
@@ -3,6 +3,7 @@ declare module 'ember/features' {
   export const GLIMMER_CUSTOM_COMPONENT_MANAGER: boolean | null;
   export const EMBER_ENGINES_MOUNT_PARAMS: boolean | null;
   export const EMBER_GLIMMER_DETECT_BACKTRACKING_RERENDER: boolean | null;
+  export const EMBER_GLIMMER_REMOVE_APPLICATION_TEMPLATE_WRAPPER: boolean | null;
   export const EMBER_GLIMMER_TEMPLATE_ONLY_COMPONENTS: boolean | null;
   export const MANDATORY_SETTER: boolean | null;
 }

diff --git a/packages/ember-glimmer/lib/component-managers/outlet.ts b/packages/ember-glimmer/lib/component-managers/outlet.ts
@@ -9,6 +9,7 @@ import { Destroyable } from '@glimmer/util/dist/types';
 import { DEBUG } from 'ember-env-flags';
 import { _instrumentStart } from 'ember-metal';
 import { generateGuid, guidFor } from 'ember-utils';
+import { EMBER_GLIMMER_REMOVE_APPLICATION_TEMPLATE_WRAPPER } from 'ember/features';
 import EmberEnvironment from '../environment';
 import {
   OwnedTemplate,
@@ -92,13 +93,35 @@ class TopLevelOutletComponentManager extends OutletComponentManager {
     }
     return new StateBucket(dynamicScope.outletState.value());
   }
-
-  layoutFor(definition: OutletComponentDefinition, _bucket: StateBucket, env: Environment) {
-    return (env as EmberEnvironment).getCompiledBlock(TopLevelOutletLayoutCompiler, definition.template);
-  }
 }
 
-const TOP_LEVEL_MANAGER = new TopLevelOutletComponentManager();
+const TOP_LEVEL_MANAGER = (() => {
+  if (EMBER_GLIMMER_REMOVE_APPLICATION_TEMPLATE_WRAPPER) {
+    return new TopLevelOutletComponentManager();
+  } else {
+    class WrappedTopLevelOutletLayoutCompiler {
+      static id = 'wrapped-top-level-outlet';
+
+      constructor(public template: WrappedTemplateFactory) {
+      }
+
+      compile(builder: any) {
+        builder.wrapLayout(this.template);
+        builder.tag.static('div');
+        builder.attrs.static('id', guidFor(this));
+        builder.attrs.static('class', 'ember-view');
+      }
+    }
+
+    class WrappedTopLevelOutletComponentManager extends TopLevelOutletComponentManager {
+      layoutFor(definition: OutletComponentDefinition, _bucket: StateBucket, env: Environment) {
+        return (env as EmberEnvironment).getCompiledBlock(WrappedTopLevelOutletLayoutCompiler, definition.template);
+      }
+    }
+
+    return new WrappedTopLevelOutletComponentManager();
+  }
+})();
 
 export class TopLevelOutletComponentDefinition extends ComponentDefinition<StateBucket> {
   public template: WrappedTemplateFactory;
@@ -109,23 +132,6 @@ export class TopLevelOutletComponentDefinition extends ComponentDefinition<State
   }
 }
 
-class TopLevelOutletLayoutCompiler {
-  static id: string;
-  public template: WrappedTemplateFactory;
-  constructor(template: WrappedTemplateFactory) {
-    this.template = template;
-  }
-
-  compile(builder: any) {
-    builder.wrapLayout(this.template);
-    builder.tag.static('div');
-    builder.attrs.static('id', guidFor(this));
-    builder.attrs.static('class', 'ember-view');
-  }
-}
-
-TopLevelOutletLayoutCompiler.id = 'top-level-outlet';
-
 export class OutletComponentDefinition extends ComponentDefinition<StateBucket> {
   public outletName: string;
   public template: OwnedTemplate;

diff --git a/packages/ember-glimmer/tests/integration/application/rendering-test.js b/packages/ember-glimmer/tests/integration/application/rendering-test.js
@@ -6,11 +6,19 @@ import { Component } from 'ember-glimmer';
 
 moduleFor('Application test: rendering', class extends ApplicationTest {
 
-  ['@test it can render the application template'](assert) {
+  ['@feature(!ember-glimmer-remove-application-template-wrapper) it can render the application template'](assert) {
     this.addTemplate('application', 'Hello world!');
 
     return this.visit('/').then(() => {
-      this.assertText('Hello world!');
+      this.assertComponentElement(this.firstChild, { content: 'Hello world!' });
+    });
+  }
+
+  ['@feature(ember-glimmer-remove-application-template-wrapper) it can render the application template'](assert) {
+    this.addTemplate('application', 'Hello world!');
+
+    return this.visit('/').then(() => {
+      this.assertHTML('Hello world!');
     });
   }