[FEATURE ...] Enable emberjs/rfcs#278, emberjs/rfcs#280

These features are enabled by turning them into a runtime flag. These
flags are intended to be set by @ember/optional-features. In
the future, these runtime flags might be removed in favor of build-time
flags once the infrastructure is in place.

FEATURES.md

@@ -32,16 +32,6 @@ 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`
-
-  Remove 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
-  [RFC](https://github.com/emberjs/rfcs/pull/278).
-
 * `ember-metal-es5-getters`
 
   Define ES5 getters for computed properties, eliminating the need to access them

features.json

@@ -4,8 +4,6 @@
     "ember-libraries-isregistered": null,
     "ember-improved-instrumentation": null,
     "ember-glimmer-named-arguments": true,
-    "ember-glimmer-remove-application-template-wrapper": null,
-    "ember-glimmer-template-only-components": null,
     "ember-metal-es5-getters": true,
     "ember-routing-router-service": true,
     "ember-engines-mount-params": true,

packages/ember-environment/lib/index.d.ts

@@ -9,5 +9,7 @@ export const environment: {
 }
 
 export const ENV: {
+  _APPLICATION_TEMPLATE_WRAPPER: boolean;
   _ENABLE_RENDER_SUPPORT: boolean;
+  _TEMPLATE_ONLY_GLIMMER_COMPONENTS: boolean;
 };

packages/ember-environment/lib/index.js

@@ -78,9 +78,38 @@ ENV.LOG_VERSION = defaultTrue(ENV.LOG_VERSION);
 */
 ENV.LOG_BINDINGS = defaultFalse(ENV.LOG_BINDINGS);
 
-
 ENV.RAISE_ON_DEPRECATION = defaultFalse(ENV.RAISE_ON_DEPRECATION);
 
+/**
+  Whether to insert a `<div class="ember-view" />` wrapper around the
+  application template. See RFC #280.
+
+  This is not intended to be set directly, as the implementation may change in
+  the future. Use `@ember/optional-features` instead.
+
+  @property _APPLICATION_TEMPLATE_WRAPPER
+  @for EmberENV
+  @type Boolean
+  @default true
+  @private
+*/
+ENV._APPLICATION_TEMPLATE_WRAPPER = defaultTrue(ENV._APPLICATION_TEMPLATE_WRAPPER);
+
+/**
+  Whether to use Glimmer Component semantics (as opposed to the classic "Curly"
+  components semantics) for template-only components. See RFC #278.
+
+  This is not intended to be set directly, as the implementation may change in
+  the future. Use `@ember/optional-features` instead.
+
+  @property _TEMPLATE_ONLY_GLIMMER_COMPONENTS
+  @for EmberENV
+  @type Boolean
+  @default false
+  @private
+*/
+ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS = defaultFalse(ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS);
+
 // check if window exists and actually is the global
 const hasDOM = typeof window !== 'undefined' && window === global &&
                window.document && window.document.createElement &&

packages/ember-glimmer/externs.d.ts

@@ -4,8 +4,6 @@ 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;
 }
 

packages/ember-glimmer/lib/component-managers/outlet.ts

@@ -6,10 +6,10 @@ import {
   Environment,
 } from '@glimmer/runtime';
 import { Destroyable } from '@glimmer/util/dist/types';
+import { ENV } from 'ember-environment';
 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,
@@ -86,42 +86,38 @@ class OutletComponentManager extends AbstractManager<StateBucket> {
 
 const MANAGER = new OutletComponentManager();
 
+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 TopLevelOutletComponentManager extends OutletComponentManager {
   create(environment: Environment, definition: OutletComponentDefinition, _args: Arguments, dynamicScope: OutletDynamicScope) {
     if (DEBUG) {
       this._pushToDebugStack(`template:${definition.template.meta.moduleName}`, environment);
     }
     return new StateBucket(dynamicScope.outletState.value());
   }
-}
-
-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);
-      }
+  layoutFor(definition: OutletComponentDefinition, bucket: StateBucket, env: Environment) {
+    if (ENV._APPLICATION_TEMPLATE_WRAPPER) {
+      return (env as EmberEnvironment).getCompiledBlock(WrappedTopLevelOutletLayoutCompiler, definition.template);
+    } else {
+      return super.layoutFor(definition, bucket, env);
     }
-
-    return new WrappedTopLevelOutletComponentManager();
   }
-})();
+}
+
+const TOP_LEVEL_MANAGER = new TopLevelOutletComponentManager();
 
 export class TopLevelOutletComponentDefinition extends ComponentDefinition<StateBucket> {
   public template: WrappedTemplateFactory;

packages/ember-glimmer/lib/environment.ts

@@ -23,6 +23,7 @@ import {
   Destroyable, Opaque,
 } from '@glimmer/util';
 import { warn } from 'ember-debug';
+import { ENV } from 'ember-environment';
 import { DEBUG } from 'ember-env-flags';
 import { _instrumentStart, Cache } from 'ember-metal';
 import { guidFor, OWNER } from 'ember-utils';
@@ -76,7 +77,6 @@ import installPlatformSpecificProtocolForURL from './protocol-for-url';
 
 import {
   EMBER_MODULE_UNIFICATION,
-  EMBER_GLIMMER_TEMPLATE_ONLY_COMPONENTS,
   GLIMMER_CUSTOM_COMPONENT_MANAGER,
 } from 'ember/features';
 import { Container, OwnedTemplate, WrappedTemplateFactory } from './template';
@@ -134,7 +134,7 @@ export default class Environment extends GlimmerEnvironment {
     this._definitionCache = new Cache(2000, ({ name, source, owner }) => {
       let { component: componentFactory, layout } = lookupComponent(owner, name, { source });
       let customManager: any;
-      if (EMBER_GLIMMER_TEMPLATE_ONLY_COMPONENTS && layout && !componentFactory) {
+      if (ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS && layout && !componentFactory) {
         return new TemplateOnlyComponentDefinition(name, layout);
       } else if (componentFactory || layout) {
         if (GLIMMER_CUSTOM_COMPONENT_MANAGER) {

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

@@ -1,5 +1,5 @@
 import { privatize as P } from 'container';
-import { environment } from 'ember-environment';
+import { ENV, environment } from 'ember-environment';
 import Component from './component';
 import Checkbox from './components/checkbox';
 import LinkToComponent from './components/link-to';
@@ -17,7 +17,6 @@ import OutletTemplate from './templates/outlet';
 import RootTemplate from './templates/root';
 import OutletView from './views/outlet';
 import loc from './helpers/loc';
-import { EMBER_GLIMMER_TEMPLATE_ONLY_COMPONENTS } from 'ember/features';
 
 interface Registry {
   injection(name: string, name2: string, name3: string): void;
@@ -75,7 +74,7 @@ export function setupEngineRegistry(registry: Registry) {
   registry.register('component:-checkbox', Checkbox);
   registry.register('component:link-to', LinkToComponent);
 
-  if (!EMBER_GLIMMER_TEMPLATE_ONLY_COMPONENTS) {
+  if (!ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS) {
     registry.register(P`component:-default`, Component);
   }
 }

packages/ember-glimmer/tests/integration/application/rendering-test.js

@@ -1,20 +1,34 @@
+import { ENV } from 'ember-environment';
 import { Controller } from 'ember-runtime';
 import { moduleFor, ApplicationTest } from '../../utils/test-case';
 import { strip } from '../../utils/abstract-test-case';
 import { Route } from 'ember-routing';
 import { Component } from 'ember-glimmer';
 
 moduleFor('Application test: rendering', class extends ApplicationTest {
+  constructor() {
+    super();
+    this._APPLICATION_TEMPLATE_WRAPPER = ENV._APPLICATION_TEMPLATE_WRAPPER;
+  }
+
+  teardown() {
+    super.teardown();
+    ENV._APPLICATION_TEMPLATE_WRAPPER = this._APPLICATION_TEMPLATE_WRAPPER;
+  }
+
+  ['@test it can render the application template with a wrapper']() {
+    ENV._APPLICATION_TEMPLATE_WRAPPER = true;
 
-  ['@feature(!ember-glimmer-remove-application-template-wrapper) it can render the application template']() {
     this.addTemplate('application', 'Hello world!');
 
     return this.visit('/').then(() => {
       this.assertComponentElement(this.element, { content: 'Hello world!' });
     });
   }
 
-  ['@feature(ember-glimmer-remove-application-template-wrapper) it can render the application template']() {
+  ['@test it can render the application template without a wrapper']() {
+    ENV._APPLICATION_TEMPLATE_WRAPPER = false;
+
     this.addTemplate('application', 'Hello world!');
 
     return this.visit('/').then(() => {