Ember optional features

app/components/dummy-app.js

@@ -65,7 +65,7 @@ export default Component.extend(ResizeMixin, {
     let offset = this.$().offset(), width = this.$().width(),
         height = this.$().height();
 
-    $('#root').css({
+    $('#main').css({
       top:    offset.top,
       left:   offset.left,
       width:  width,

app/services/ember-cli.js

@@ -286,9 +286,7 @@ export default Service.extend({
 
     let contentForBody = `${depScriptTags}\n${appScriptTag}\n${testStuff}\n`;
 
-    if (!testingEnabled(twiddleJSON) || legacyTesting(twiddleJSON)) {
-      contentForBody += '<div id="root"></div>';
-    }
+    contentForBody += '<div id="root"></div>';
 
     index = index.replace('{{content-for \'body\'}}', contentForBody);
 
@@ -579,7 +577,7 @@ function contentForAppBoot(content, config) {
  */
 function calculateAppConfig(config) {
   let appConfig = config.APP || {};
-  appConfig.rootElement="#root";
+  appConfig.rootElement="#main";
   return JSON.stringify(appConfig);
 }
 

app/styles/_main.scss

@@ -8,7 +8,7 @@ body {
   width: 100%;
 }
 
-#root {
+#main {
   position: absolute;
 }
 

blueprints/twiddle.json

@@ -1,7 +1,10 @@
 {
   "version": "0.17.0",
   "EmberENV": {
-    "FEATURES": {}
+    "FEATURES": {},
+    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
+    "_APPLICATION_TEMPLATE_WRAPPER": true,
+    "_JQUERY_INTEGRATION": true
   },
   "options": {
     "use_pods": false,

tests/acceptance/application-template-wrapper-test.js

@@ -0,0 +1,77 @@
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import runGist from '../helpers/run-gist';
+import outputPane from '../helpers/output-pane';
+
+let files = [
+  {
+    filename: "templates.application.hbs",
+    content: `<h1>Welcome to {{this.appName}}</h1>`
+  },
+  {
+    filename: "controllers.application.js",
+    content: `import Controller from '@ember/controller';
+
+              export default class ApplicationController extends Controller {
+                appName = 'Ember Twiddle';
+              }`
+  },
+  {
+    filename: "twiddle.json",
+    content: `{
+      "version": "0.17.0",
+      "EmberENV": {
+        "FEATURES": {},
+        "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
+        "_APPLICATION_TEMPLATE_WRAPPER": true,
+        "_JQUERY_INTEGRATION": true
+      },
+      "options": {
+        "use_pods": false,
+        "enable-testing": false
+      },
+      "dependencies": {
+        "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
+        "ember": "3.14.3",
+        "ember-template-compiler": "3.14.3",
+        "ember-testing": "3.14.3"
+      },
+      "addons": {
+        "ember-data": "3.14.1"
+      }
+    }`
+  }
+];
+
+function setFlag(state) {
+  let file = files.find(file => file.filename === 'twiddle.json');
+  let twiddleJSON = JSON.parse(file.content);
+  twiddleJSON.EmberENV["_APPLICATION_TEMPLATE_WRAPPER"] = state;
+  file.content = JSON.stringify(twiddleJSON);
+}
+
+module('Acceptance | application-template-wrapper', function(hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  test('application template wrapper off', async function(assert) {
+
+    setFlag(false);
+
+    await runGist(files);
+
+    assert.equal(outputPane().document.querySelector('h1').textContent.trim(), 'Welcome to Ember Twiddle', 'content loaded');
+    assert.equal(outputPane().document.querySelectorAll('.ember-application>.ember-view>h1').length, 0, 'content is not inside wrapper');
+  });
+
+  test('application template wrapper on', async function(assert) {
+
+    setFlag(true);
+
+    await runGist(files);
+
+    assert.equal(outputPane().document.querySelector('h1').textContent.trim(), 'Welcome to Ember Twiddle', 'content loaded');
+    assert.equal(outputPane().document.querySelectorAll('.ember-application>.ember-view>h1').length, 1, 'content is inside wrapper');
+  });
+});

tests/acceptance/jquery-integration-test.js

@@ -0,0 +1,56 @@
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import runGist from '../helpers/run-gist';
+import outputContents from '../helpers/output-contents';
+
+module('Acceptance | jquery-integration', function(hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  test('can turn jquery integration off', async function(assert) {
+
+    let files = [
+      {
+        filename: "templates.application.hbs",
+        content: `<h1>Welcome to {{this.appName}}</h1>`
+      },
+      {
+        filename: "controllers.application.js",
+        content: `import Controller from '@ember/controller';
+
+                  export default class ApplicationController extends Controller {
+                    appName = 'Ember Twiddle';
+                  }`
+      },
+      {
+        filename: "twiddle.json",
+        content: `{
+          "version": "0.17.0",
+          "EmberENV": {
+            "FEATURES": {},
+            "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
+            "_APPLICATION_TEMPLATE_WRAPPER": false,
+            "_JQUERY_INTEGRATION": false
+          },
+          "options": {
+            "use_pods": false,
+            "enable-testing": false
+          },
+          "dependencies": {
+            "ember": "3.14.3",
+            "ember-template-compiler": "3.14.3",
+            "ember-testing": "3.14.3"
+          },
+          "addons": {
+            "ember-data": "3.14.1"
+          }
+        }`
+      }
+    ];
+
+    await runGist(files);
+
+    assert.equal(outputContents(), 'Welcome to Ember Twiddle');
+  });
+});

tests/acceptance/template-only-glimmer-components-test.js

@@ -0,0 +1,84 @@
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import runGist from '../helpers/run-gist';
+import outputPane from '../helpers/output-pane';
+
+let files = [
+  {
+    filename: "templates.application.hbs",
+    content: `<h1>Welcome to {{this.appName}}</h1>
+              <div class="test-parent">
+                <MyComponent @appName={{this.appName}} />
+              </div>`
+  },
+  {
+    filename: "controllers.application.js",
+    content: `import Controller from '@ember/controller';
+
+              export default class ApplicationController extends Controller {
+                appName = 'Ember Twiddle';
+              }`
+  },
+  {
+    filename: "templates.components.my-component.hbs",
+    content: `{{@appName}}`
+  },
+  {
+    filename: "twiddle.json",
+    content: `{
+      "version": "0.17.0",
+      "EmberENV": {
+        "FEATURES": {},
+        "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
+        "_APPLICATION_TEMPLATE_WRAPPER": true,
+        "_JQUERY_INTEGRATION": true
+      },
+      "options": {
+        "use_pods": false,
+        "enable-testing": false
+      },
+      "dependencies": {
+        "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
+        "ember": "3.14.3",
+        "ember-template-compiler": "3.14.3",
+        "ember-testing": "3.14.3"
+      },
+      "addons": {
+        "ember-data": "3.14.1"
+      }
+    }`
+  }
+];
+
+function setFlag(state) {
+  let file = files.find(file => file.filename === 'twiddle.json');
+  let twiddleJSON = JSON.parse(file.content);
+  twiddleJSON.EmberENV["_TEMPLATE_ONLY_GLIMMER_COMPONENTS"] = state;
+  file.content = JSON.stringify(twiddleJSON);
+}
+
+module('Acceptance | template-only-glimmer-components', function(hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  test('template only glimmer components off', async function(assert) {
+
+    setFlag(false);
+
+    await runGist(files);
+
+    assert.equal(outputPane().document.querySelector('.test-parent').textContent.trim(), 'Ember Twiddle', 'content loaded');
+    assert.equal(outputPane().document.querySelectorAll('.test-parent>.ember-view').length, 1, 'content is inside wrapper div');
+  });
+
+  test('template only glimmer components on', async function(assert) {
+
+    setFlag(true);
+
+    await runGist(files);
+
+    assert.equal(outputPane().document.querySelector('.test-parent').textContent.trim(), 'Ember Twiddle', 'content loaded');
+    assert.equal(outputPane().document.querySelectorAll('.test-parent>.ember-view').length, 0, 'content is not inside wrapper div');
+  });
+});

tests/helpers/output-contents.js

@@ -2,7 +2,7 @@ import outputPane from './output-pane';
 
 export default function(selector) {
   let output = outputPane();
-  let outputDiv = output.document.querySelector('#root');
+  let outputDiv = output.document.querySelector('#main');
   if (selector) {
     return outputDiv.querySelector(selector).textContent.trim();
   }