Merge pull request #37 from rondale-sc/use-glimmer-in-element

rwjblue · web-flow · commit 17b1e576e19c · 2017-09-19T09:15:52.000-04:00
Use `-in-element` to render at appropriate time
diff --git a/.travis.yml b/.travis.yml
@@ -10,8 +10,7 @@ cache:
 
 env:
   # we recommend testing LTS's and latest stable release (bonus points to beta/canary)
-  - EMBER_TRY_SCENARIO=ember-lts-2.4
-  - EMBER_TRY_SCENARIO=ember-lts-2.8
+  - EMBER_TRY_SCENARIO=ember-lts-2.12
   - EMBER_TRY_SCENARIO=ember-release
   - EMBER_TRY_SCENARIO=ember-beta
   - EMBER_TRY_SCENARIO=ember-canary
diff --git a/README.md b/README.md
@@ -17,6 +17,8 @@ Install by running
 ember install ember-cli-head
 ```
 
+And add `{{head-layout}}` to the top of your application template.
+
 #### Version
 Take into account that version >= 0.3 of this addon require Ember 2.10+ and fastboot >=1.0.rc1
 Please use 0.2.X if you don't fulfull both requirements.
@@ -117,4 +119,12 @@ module.exports = function(environment) {
 }
 ```
 
+### Upgrade to 0.4.x
+
+As mentioned above you need to add the `{{head-layout}}` component once and only once in an application wide template.  This template is usually `app/templates/application.hbs`, but could be different in your case.  Previously, in ember-cli-head 0.3.x and below the component was appended to the document inside an instance initializer.  This prevented the need for the `{{head-layout}}` component as it was automatically injected and used inside that initializer.  Unfortunately, this approach needed to change so that we could render the component with the rest of the application rendering.
+
+If you care to read more about the details of render please see the PR that introduced these changes https://github.com/ronco/ember-cli-head/pull/37
+
+But for now, if you are upgrading to 0.4.x, you simply need to add `{{head-layout}}` component to your application wide template.
+
 If you make use of this mode the content of `<head>` will be the static FastBoot rendered content through the life of your App.
diff --git a/addon/templates/components/head-layout.hbs b/addon/templates/components/head-layout.hbs
@@ -1 +1,3 @@
-<meta name="ember-cli-head-start">{{head-content}}<meta name="ember-cli-head-end">
+{{#-in-element headElement}}
+  <meta name="ember-cli-head-start">{{head-content}}<meta name="ember-cli-head-end">
+{{/-in-element}}
diff --git a/app/components/head-layout.js b/app/components/head-layout.js
@@ -3,5 +3,9 @@ import layout from 'ember-cli-head/templates/components/head-layout';
 
 export default Ember.Component.extend({
   tagName: '',
+  headElement: Ember.computed(function() {
+    let documentService = Ember.getOwner(this).lookup('service:-document');
+    return documentService.head;
+  }),
   layout
 });
diff --git a/app/instance-initializers/head-browser.js b/app/instance-initializers/head-browser.js
@@ -1,6 +1,6 @@
 import ENV from '../config/environment';
 
-export function initialize(owner) {
+export function initialize() {
   if (ENV['ember-cli-head'] && ENV['ember-cli-head']['suppressBrowserRender']) { return true; }
 
   // clear fast booted head (if any)
@@ -15,9 +15,6 @@ export function initialize(owner) {
     document.head.removeChild(startMeta);
     document.head.removeChild(endMeta);
   }
-
-  const component = owner.lookup('component:head-layout');
-  component.appendTo(document.head);
 }
 
 export default {
diff --git a/blueprints/ember-cli-head/index.js b/blueprints/ember-cli-head/index.js
@@ -1,7 +1,27 @@
 /*jshint node:true*/
+let fs = require('fs');
+let path = require('path');
+let chalk = require('chalk');
+
 module.exports = {
   description: '',
-  normalizeEntityName: function() { }
+  normalizeEntityName: function() { },
+  afterInstall() {
+    let fullPath = path.join(this.project.root, 'app/templates/application.hbs');
+
+    if (fs.existsSync(fullPath)) {
+      let contents = fs.readFileSync(fullPath, { encoding: 'utf-8' });
+      let toWrite = `{{head-layout}}\n${contents}`;
+
+      fs.writeFileSync(fullPath, toWrite, { encoding: 'utf-8' });
+    } else {
+      let str = `You must add {{head-layout}} component to your topmost UI.
+This is usually your app/templates/application.hbs, but was not found on your system.
+Please see the README for more instructions https://github.com/ronco/ember-cli-head#upgrade-to-04x.`
+
+      this.ui.writeLine(chalk.yellow(str));
+    }
+  }
 
   // locals: function(options) {
   //   // Return custom template variables here.
diff --git a/config/ember-try.js b/config/ember-try.js
@@ -2,34 +2,10 @@
 module.exports = {
   scenarios: [
     {
-      name: 'ember-lts-2.4',
-      bower: {
-        dependencies: {
-          'ember': 'components/ember#lts-2-4'
-        },
-        resolutions: {
-          'ember': 'lts-2-4'
-        }
-      },
-      npm: {
-        devDependencies: {
-          'ember-source': null
-        }
-      }
-    },
-    {
-      name: 'ember-lts-2.8',
-      bower: {
-        dependencies: {
-          'ember': 'components/ember#lts-2-8'
-        },
-        resolutions: {
-          'ember': 'lts-2-8'
-        }
-      },
+      name: 'ember-lts-2.12',
       npm: {
         devDependencies: {
-          'ember-source': null
+          'ember-source': '~2.12.0'
         }
       }
     },
diff --git a/fastboot-tests/fixtures/fastboot/app/templates/application.hbs b/fastboot-tests/fixtures/fastboot/app/templates/application.hbs
@@ -0,0 +1,2 @@
+{{head-layout}}
+{{outlet}}
diff --git a/fastboot/instance-initializers/head-fastboot.js b/fastboot/instance-initializers/head-fastboot.js
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "ember-cli-app-version": "^1.0.0",
     "ember-cli-dependency-checker": "^1.3.0",
     "ember-cli-eslint": "^3.0.0",
+    "ember-cli-fastboot": "^1.0.2",
     "ember-cli-htmlbars": "^1.1.1",
     "ember-cli-htmlbars-inline-precompile": "^0.4.0",
     "ember-cli-inject-live-reload": "^1.4.1",
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -1,3 +1,5 @@
+{{head-layout}}
+
 <h2 id="title">Welcome to Ember</h2>
 
 {{outlet}}
diff --git a/tests/integration/components/head-layout-test.js b/tests/integration/components/head-layout-test.js
@@ -6,10 +6,11 @@ moduleForComponent('head-layout', 'Integration | Component | head layout', {
 });
 
 test('it renders', function(assert) {
+  let fragment = document.createDocumentFragment();
+  this.set('stuff', fragment);
+  this.render(hbs`{{head-layout headElement=stuff}}`);
 
-  this.render(hbs`{{head-layout}}`);
-
-  assert.equal(this.$('meta[name="ember-cli-head-start"]').length, 1);
-  assert.equal(this.$('meta[name="ember-cli-head-end"]').length, 1);
+  assert.equal(fragment.querySelectorAll('meta[name="ember-cli-head-start"]').length, 1);
+  assert.equal(fragment.querySelectorAll('meta[name="ember-cli-head-end"]').length, 1);
 
 });
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import ENV from '../config/environment';`
`2`	`2`
`3`		`-export function initialize(owner) {`
	`3`	`+export function initialize() {`
`4`	`4`	`if (ENV['ember-cli-head'] && ENV['ember-cli-head']['suppressBrowserRender']) { return true; }`
`5`	`5`
`6`	`6`	`// clear fast booted head (if any)`
`@@ -15,9 +15,6 @@ export function initialize(owner) {`
`15`	`15`	`document.head.removeChild(startMeta);`
`16`	`16`	`document.head.removeChild(endMeta);`
`17`	`17`	`}`
`18`		`-`
`19`		`- const component = owner.lookup('component:head-layout');`
`20`		`- component.appendTo(document.head);`
`21`	`18`	`}`
`22`	`19`
`23`	`20`	`export default {`