Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use -in-element to render at appropriate time #37

Merged
merged 7 commits into from
Sep 19, 2017
Merged

Use -in-element to render at appropriate time #37

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
51ac068
Use `-in-element` to render at appropriate time
rondale-sc Aug 3, 2017
6efeccf
Fix fastboot tests
rondale-sc Aug 7, 2017
c3168d4
Remove support for 2.4 & 2.8
rondale-sc Aug 7, 2017
d6402c0
Remove ember-try scenario invocations from .travis.yml
rondale-sc Aug 7, 2017
1fc2703
Update readme with instrunctions on how to use new style
rondale-sc Aug 7, 2017
9b1fad8
Add afterInstall to automatically add {{head-layout}} to application.hbs
rondale-sc Aug 28, 2017
5dc82a3
Add readme entry around upgrade to 0.4.x
rondale-sc Aug 31, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion addon/templates/components/head-layout.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
<meta name="ember-cli-head-start">{{head-content}}<meta name="ember-cli-head-end">
{{#-in-element headElement}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI - We have started taking steps to make this public API from the Glimmer VM perspective (see glimmerjs/glimmer-vm#619). It is unclear what Ember version that PR will correspond to, but it is a good step forward for our use case (and shows a future where we can drop the private - prefix).

<meta name="ember-cli-head-start">{{head-content}}<meta name="ember-cli-head-end">
{{/-in-element}}
4 changes: 4 additions & 0 deletions app/components/head-layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
5 changes: 1 addition & 4 deletions app/instance-initializers/head-browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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 {
Expand Down
11 changes: 0 additions & 11 deletions fastboot/instance-initializers/head-fastboot.js
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this is added as a devDependnecy?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Primarily to ensure this approach worked in fastboot. Means that we can run ember s and disable JS then inspect the head element. I can remove if that is a problem

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Definitely makes for easier local testing. Not sure if there are any ramifications to the ember-cli-addon-tests?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not an issue but I think you could write the tests in fastboot-tests? If it is more against the dummy app, it's fine too.

"ember-cli-htmlbars": "^1.1.1",
"ember-cli-htmlbars-inline-precompile": "^0.4.0",
"ember-cli-inject-live-reload": "^1.4.1",
Expand Down
2 changes: 2 additions & 0 deletions tests/dummy/app/templates/application.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{{head-layout}}

<h2 id="title">Welcome to Ember</h2>

{{outlet}}
9 changes: 5 additions & 4 deletions tests/integration/components/head-layout-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

});