Skip to content

Application class: convert docs to ES6 syntax #20113

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

Merged
chancancode merged 1 commit into from
Jun 21, 2022
Merged

Application class: convert docs to ES6 syntax #20113

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions packages/@ember/application/lib/application.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,11 @@ import type { SimpleDocument, SimpleElement } from '@simple-dom/interface';
initialized.

```app/app.js
const App = Application.extend({
export default class App extends Application {
ready() {
// your code here
}
})
}
```

Because `Application` ultimately inherits from `Ember.Namespace`, any classes
Copy link
Member

@chancancode chancancode Jun 21, 2022

Choose a reason for hiding this comment

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

@tniezurawski if you are interested in doing more edits for this class, I feel like most of this Ember.Namespace and "Application as a container that holds the other classes in your application" stuff should be deleted.

It was referring to to globals resolver which is deprecated/removed at this point. I thought we had deprecated Ember.Namespace as well but apparently we didn't. In any case, it doesn't really do anything useful at this point so we don't need to mention it here.

Copy link
Member

@chancancode chancancode Jun 21, 2022

Choose a reason for hiding this comment

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

The "Event Delegation" stuff probably should go as well though it requires slightly more thoughts on what to do with the content (straight up delete it, or moving it somewhere else, etc).

Most idiomatic Ember apps uses {{on}} which doesn't go through event delegation at all and is equivalent to addEventListener directly on the element. The event delegation stuff is still used by classic components (@ember/components) so it's not completely gone, per se, but definitely doesn't need to be mentioned so front and center here, and setting it largely has no effect at all for a lot of modern apps.

Maybe we can keep it as a @property level documentation, or maybe it's more appropriate to talk about this in details in the docs for @ember/component.

cc @emberjs/learning-team-managers

Expand Down Expand Up @@ -84,12 +84,12 @@ import type { SimpleDocument, SimpleElement } from '@simple-dom/interface';
```app/app.js
import Application from '@ember/application';

let App = Application.extend({
customEvents: {
export default class App extends Application {
customEvents = {
// add support for the paste event
paste: 'paste'
}
});
}
```

To prevent Ember from setting up a listener for a default event,
Expand All @@ -99,13 +99,13 @@ import type { SimpleDocument, SimpleElement } from '@simple-dom/interface';
```app/app.js
import Application from '@ember/application';

let App = Application.extend({
customEvents: {
export default class App extends Application {
customEvents = {
// prevent listeners for mouseenter/mouseleave events
mouseenter: null,
mouseleave: null
}
});
}
```

By default, the application sets up these event listeners on the document
Expand All @@ -119,9 +119,9 @@ import type { SimpleDocument, SimpleElement } from '@simple-dom/interface';
```app/app.js
import Application from '@ember/application';

let App = Application.extend({
rootElement: '#ember-app'
});
export default class App extends Application {
rootElement = '#ember-app'
}
```

The `rootElement` can be either a DOM element or a CSS selector
Expand Down