Skip to content

Commit 4ad282a

Browse files
mansonamansona
authored
Merge pull request #2117 from ember-learn/gjs
Tracking branch for GJS migration
2 parents 93162d1 + e59d0f5 commit 4ad282a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+5386
-3955
lines changed

‎.local.dic‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,3 +252,4 @@ websocket
252252
working-with-html-css-and-javascript
253253
yay
254254
ZEIT
255+
userQuestion

‎config/environment.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ module.exports = function (environment) {
4848
guidemaker: {
4949
title: 'Ember Guides',
5050
sourceRepo: 'https://github.com/ember-learn/guides-source',
51+
gjsVersions: ['v6.7.0'],
52+
gjsLink: '/release/components/template-tag-format/',
5153
},
5254

5355
algolia: {

‎guides/release/accessibility/page-template-considerations.md‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,29 +17,32 @@ Consider this format:
1717

1818
Note that the unique page title is first. This is because it is the most important piece of information from a contextual perspective. Since a user with a screen reader can interrupt the screen reader as they wish, it introduces less fatigue when the unique page title is first, but provides the additional guidance if it is desired.
1919

20-
A simple way to add page titles is to use the `page-title` helper which comes from the [ember-page-title](https://github.com/ember-cli/ember-page-title) addon that is installed by default in new apps. We can use this helper to set the page title at any point in any template.
20+
A simple way to add page titles is to use the `pageTitle` helper which comes from the [ember-page-title](https://github.com/ember-cli/ember-page-title) addon that is installed by default in new apps. We can use this helper to set the page title at any point in any template.
2121

2222
For example, if we have a “posts” route, we can set the page title for it like so:
2323

24+
```gjs {data-filename=app/routes/posts.gjs}
25+
import { pageTitle } from 'ember-page-title';
2426
25-
```handlebars {data-filename=app/routes/posts.hbs}
26-
{{page-title "Posts - Site Title"}}
27-
28-
{{outlet}}
27+
<template>
28+
{{pageTitle "Posts"}}
29+
{{outlet}}
30+
</template>
2931
```
3032

3133
Extending the example, if we have a “post” route that lives within the “posts” route, we could set its page title like so:
3234

33-
```handlebars {data-filename=app/routes/posts/post.hbs}
34-
{{page-title (concat @model.title " - Site Title")}}
35+
```gjs {data-filename=app/routes/posts/post.gjs}
36+
import { pageTitle } from 'ember-page-title';
3537
36-
<h1>{{@model.title}}</h1>
37-
```
38+
<template>
39+
{{pageTitle @model.title}} {{! e.g., "My Title" }}
3840
39-
When your needs become more complex, the following addons facilitate page titles in a more dynamic and maintainable way.
41+
<h1>{{@model.title}}</h1>
42+
</template>
43+
```
4044

41-
- [ember-cli-head](https://github.com/ronco/ember-cli-head)
42-
- [ember-cli-document-title](https://github.com/kimroen/ember-cli-document-title)
45+
Each call to the `{{pageTitle}}` helper will prepend the title string to the existing title all the way up to the root title in `application.gts`. So, if your application is titled "My App", then the full title for the above example would be "My Title | Posts | My App".
4346

4447
To evaluate more addons to add/manage content in the `<head>` of a page, view this category on [Ember Observer](https://emberobserver.com/categories/header-content).
4548

@@ -48,14 +51,14 @@ You can test that page titles are generated correctly by asserting on the value
4851
```javascript {data-filename=tests/acceptance/posts-test.js}
4952
import { module, test } from 'qunit';
5053
import { visit, currentURL } from '@ember/test-helpers';
51-
import { setupApplicationTest } from 'my-app-name/tests/helpers';
54+
import { setupApplicationTest } from 'my-app/tests/helpers';
5255

53-
module('Acceptance | posts', function(hooks) {
56+
module('Acceptance | posts', function (hooks) {
5457
setupApplicationTest(hooks);
5558

56-
test('visiting /posts', async function(assert) {
59+
test('visiting /posts', async function (assert) {
5760
await visit('/posts');
58-
assert.equal(document.title, 'Posts - Site Title');
61+
assert.equal(document.title, 'Posts | My App');
5962
});
6063
});
6164
```

‎guides/release/applications/run-loop.md‎

Lines changed: 44 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,22 @@
1-
**Note:**
2-
* _For basic Ember app development scenarios, you don't need to understand the run loop or use it directly. All common paths are paved nicely for you and don't require working with the run loop._
3-
* _However, the run loop will be helpful to understand the internals of Ember and to assist in customized performance tuning by manually batching costly work._
1+
<div class="cta">
2+
<div class="cta-note">
3+
<div class="cta-note-body">
4+
<div class="cta-note-heading" data-test-es-note-heading="">Zoey says...</div>
5+
<div class="cta-note-message">
6+
7+
<p>
8+
For basic Ember app development scenarios, you don't need to understand the run loop or use it directly. All common paths are paved nicely for you and don't require working with the run loop.
9+
</p>
10+
11+
<p>
12+
However, the run loop will be helpful to understand the internals of Ember and to assist in customized performance tuning by manually batching costly work.
13+
</p>
14+
15+
</div>
16+
</div>
17+
<img src="/images/mascots/zoey.png" role="presentation" alt="">
18+
</div>
19+
</div>
420

521
Ember's internals and most of the code you will write in your applications takes place in a run loop.
622
The run loop is used to batch, and order (or reorder) work in a way that is most effective and efficient.
@@ -83,9 +99,13 @@ class Image {
8399
84100
and a template to display its attributes:
85101
86-
```handlebars
87-
{{this.width}}
88-
{{this.aspectRatio}}
102+
```gjs
103+
let profilePhoto = new Image({ width: 250, height: 500 });
104+
105+
<template>
106+
{{profilePhoto.width}}
107+
{{profilePhoto.aspectRatio}}
108+
</template>
89109
```
90110
91111
If we execute the following code without the run loop:
@@ -169,13 +189,15 @@ which will make you a better Ember developer.
169189
170190
You should begin a run loop when the callback fires.
171191
172-
The `Ember.run` method can be used to create a run loop.
173-
In this example, `Ember.run` is used to handle an online
192+
The `run()` method, imported from `@ember/runloop`, can be used to create a run loop.
193+
In this example, `run()` is used to handle an online
174194
event (browser gains internet access) and run some Ember code.
175195
176196
```javascript
197+
import { run } from '@ember/runloop';
198+
177199
window.addEventListener('online', () => {
178-
Ember.run(() => { // begin loop
200+
run(() => { // begin loop
179201
// Code that results in jobs being scheduled goes here
180202
}); // end loop, jobs are flushed and executed
181203
});
@@ -185,15 +207,17 @@ window.addEventListener('online', () => {
185207
186208
## What happens if I forget to start a run loop in an async handler?
187209
188-
As mentioned above, you should wrap any non-Ember async callbacks in `Ember.run`.
210+
As mentioned above, you should wrap any non-Ember async callbacks in `run()`.
189211
If you don't, Ember will try to approximate a beginning and end for you.
190212
Consider the following callback:
191213
192214
```javascript
215+
import { run } from '@ember/runloop';
216+
193217
window.addEventListener('online', () => {
194218
console.log('Doing things...');
195219

196-
Ember.run.schedule('actions', () => {
220+
run.schedule('actions', () => {
197221
// Do more things
198222
});
199223
});
@@ -207,40 +231,42 @@ These automatically created run loops we call _autoruns_.
207231
Here is some pseudocode to describe what happens using the example above:
208232
209233
```javascript
234+
import { run } from '@ember/runloop';
235+
210236
window.addEventListener('online', () => {
211237
// 1. autoruns do not change the execution of arbitrary code in a callback.
212238
// This code is still run when this callback is executed and will not be
213239
// scheduled on an autorun.
214240
console.log('Doing things...');
215241

216-
Ember.run.schedule('actions', () => {
242+
run.schedule('actions', () => {
217243
// 2. schedule notices that there is no currently available run loop so it
218244
// creates one. It schedules it to close and flush queues on the next
219245
// turn of the JS event loop.
220-
if (! Ember.run.hasOpenRunLoop()) {
221-
Ember.run.begin();
246+
if (! run.hasOpenRunLoop()) {
247+
run.begin();
222248
nextTick(() => {
223-
Ember.run.end()
249+
run.end()
224250
}, 0);
225251
}
226252

227253
// 3. There is now a run loop available so schedule adds its item to the
228254
// given queue
229-
Ember.run.schedule('actions', () => {
255+
run.schedule('actions', () => {
230256
// Do more things
231257
});
232258

233259
});
234260

235261
// 4. This schedule sees the autorun created by schedule above as an available
236262
// run loop and adds its item to the given queue.
237-
Ember.run.schedule('afterRender', () => {
263+
run.schedule('afterRender', () => {
238264
// Do yet more things
239265
});
240266
});
241267
```
242268
243269
## Where can I find more information?
244270
245-
Check out the [Ember.run](https://api.emberjs.com/ember/release/classes/@ember%2Frunloop) API documentation,
271+
Check out the [`@ember/runloop`](https://api.emberjs.com/ember/release/classes/@ember%2Frunloop) API documentation,
246272
as well as the [Backburner library](https://github.com/ebryn/backburner.js/) that powers the run loop.

0 commit comments

Comments
 (0)