diff --git a/broccoli/features.js b/broccoli/features.js index ca74b1b810a..e1e69a7d230 100644 --- a/broccoli/features.js +++ b/broccoli/features.js @@ -22,6 +22,7 @@ function getFeatures(isDebug) { } features['descriptor-trap'] = isDebug; + features['mandatory-getter'] = isDebug; features['mandatory-setter'] = isDebug; features['ember-glimmer-detect-backtracking-rerender'] = isDebug; diff --git a/features.json b/features.json index 5befba38262..865f4ffdd39 100644 --- a/features.json +++ b/features.json @@ -6,7 +6,7 @@ "ember-glimmer-named-arguments": true, "ember-glimmer-remove-application-template-wrapper": null, "ember-glimmer-template-only-components": null, - "ember-metal-es5-getters": null, + "ember-metal-es5-getters": true, "ember-routing-router-service": true, "ember-engines-mount-params": true, "ember-module-unification": null, diff --git a/packages/ember-glimmer/lib/component.ts b/packages/ember-glimmer/lib/component.ts index 33e21d12ece..dffe49c9773 100644 --- a/packages/ember-glimmer/lib/component.ts +++ b/packages/ember-glimmer/lib/component.ts @@ -307,7 +307,7 @@ export const BOUNDS = symbol('BOUNDS'); representation. If the value becomes `false` or `undefined` the class name will be removed. Both `classNames` and `classNameBindings` are concatenated properties. See - [EmberObject](/api/classes/Ember.Object.html) documentation for more + [EmberObject](/api/ember/release/classes/EmberObject) documentation for more information about concatenated properties. ## HTML Attributes @@ -429,12 +429,12 @@ export const BOUNDS = symbol('BOUNDS'); Updates to the property of an attribute binding will result in automatic update of the HTML attribute in the component's rendered HTML representation. - `attributeBindings` is a concatenated property. See [EmberObject](/api/classes/Ember.Object.html) + `attributeBindings` is a concatenated property. See [EmberObject](/api/ember/release/classes/EmberObject) documentation for more information about concatenated properties. ## Layouts - See [Ember.Templates.helpers.yield](/api/classes/Ember.Templates.helpers.html#method_yield) + See [Ember.Templates.helpers.yield](/api/ember/release/classes/Ember.Templates.helpers/methods/yield?anchor=yield) for more information. Layout can be used to wrap content in a component. In addition @@ -490,14 +490,14 @@ export const BOUNDS = symbol('BOUNDS'); ### `{{action}}` Helper - See [Ember.Templates.helpers.action](/api/classes/Ember.Templates.helpers.html#method_action). + See [Ember.Templates.helpers.action](/api/ember/release/classes/Ember.Templates.helpers/methods/action?anchor=action). ### Event Names All of the event handling approaches described above respond to the same set of events. The names of the built-in events are listed below. (The hash of built-in events exists in `Ember.EventDispatcher`.) Additional, custom events - can be registered by using `Ember.Application.customEvents`. + can be registered by using `Application.customEvents`. Touch events: diff --git a/packages/ember-glimmer/lib/components/checkbox.ts b/packages/ember-glimmer/lib/components/checkbox.ts index e702f3e4e91..a19c547e6a4 100644 --- a/packages/ember-glimmer/lib/components/checkbox.ts +++ b/packages/ember-glimmer/lib/components/checkbox.ts @@ -10,7 +10,7 @@ import layout from '../templates/empty'; The internal class used to create text inputs when the `{{input}}` helper is used with `type` of `checkbox`. - See [Ember.Templates.helpers.input](/api/classes/Ember.Templates.helpers.html#method_input) for usage details. + See [Ember.Templates.helpers.input](/api/ember/release/classes/Ember.Templates.helpers/methods/input?anchor=input) for usage details. ## Direct manipulation of `checked` diff --git a/packages/ember-glimmer/lib/components/link-to.ts b/packages/ember-glimmer/lib/components/link-to.ts index 2b5c671e7fb..7883b562b3e 100644 --- a/packages/ember-glimmer/lib/components/link-to.ts +++ b/packages/ember-glimmer/lib/components/link-to.ts @@ -256,7 +256,7 @@ {{/link-to}} ``` - See [LinkComponent](/api/classes/Ember.LinkComponent.html) for a + See [LinkComponent](/api/ember/release/classes/LinkComponent) for a complete list of overrideable properties. Be sure to also check out inherited properties of `LinkComponent`. diff --git a/packages/ember-glimmer/lib/components/text_area.ts b/packages/ember-glimmer/lib/components/text_area.ts index b6888239c2a..7b8fd09e0d4 100644 --- a/packages/ember-glimmer/lib/components/text_area.ts +++ b/packages/ember-glimmer/lib/components/text_area.ts @@ -165,7 +165,7 @@ import layout from '../templates/empty'; {{textarea focus-out="alertMessage"}} ``` - See more about [Text Support Actions](/api/classes/Ember.TextArea.html) + See more about [Text Support Actions](/api/ember/release/classes/TextArea) ### Extension @@ -190,7 +190,7 @@ import layout from '../templates/empty'; itself extends `Component`. Expect isolated component semantics, not legacy 1.x view semantics (like `controller` being present). - See more about [Ember components](/api/classes/Ember.Component.html) + See more about [Ember components](/api/ember/release/classes/Component) @method textarea @for Ember.Templates.helpers @@ -202,7 +202,7 @@ import layout from '../templates/empty'; The internal class used to create textarea element when the `{{textarea}}` helper is used. - See [Ember.Templates.helpers.textarea](/api/classes/Ember.Templates.helpers.html#method_textarea) for usage details. + See [Ember.Templates.helpers.textarea](/api/ember/release/classes/Ember.Templates.helpers/methods/textarea?anchor=textarea) for usage details. ## Layout and LayoutName properties diff --git a/packages/ember-glimmer/lib/components/text_field.ts b/packages/ember-glimmer/lib/components/text_field.ts index 1ccc03ab1b7..77dadc09907 100644 --- a/packages/ember-glimmer/lib/components/text_field.ts +++ b/packages/ember-glimmer/lib/components/text_field.ts @@ -37,7 +37,7 @@ function canSetTypeOfInput(type: string) { The internal class used to create text inputs when the `{{input}}` helper is used with `type` of `text`. - See [Ember.Templates.helpers.input](/api/classes/Ember.Templates.helpers.html#method_input) for usage details. + See [Ember.Templates.helpers.input](/api/ember/release/classes/Ember.Templates.helpers/methods/input?anchor=input) for usage details. ## Layout and LayoutName properties diff --git a/packages/ember-glimmer/lib/helpers/action.ts b/packages/ember-glimmer/lib/helpers/action.ts index 4b4e079418a..605a3726dd8 100644 --- a/packages/ember-glimmer/lib/helpers/action.ts +++ b/packages/ember-glimmer/lib/helpers/action.ts @@ -94,7 +94,7 @@ export const ACTION = symbol('ACTION'); Closure actions curry both their scope and any arguments. When invoked, any additional arguments are added to the already curried list. - Actions should be invoked using the [sendAction](/api/classes/Ember.Component.html#method_sendAction) + Actions should be invoked using the [sendAction](/api/ember/release/classes/Component/methods/sendAction?anchor=sendAction) method. The first argument to `sendAction` is the action to be called, and additional arguments are passed to the action function. This has interesting properties combined with currying of arguments. For example: @@ -208,7 +208,7 @@ export const ACTION = symbol('ACTION'); If you need the default handler to trigger you should either register your own event handler, or use event methods on your view class. See - ["Responding to Browser Events"](/api/classes/Ember.Component#responding-to-browser-events) + ["Responding to Browser Events"](/api/ember/release/classes/Component) in the documentation for `Component` for more information. ### Specifying DOM event type @@ -223,7 +223,7 @@ export const ACTION = symbol('ACTION'); ``` - See ["Event Names"](/api/classes/Ember.Component#event-names) for a list of + See ["Event Names"](/api/ember/release/classes/Component) for a list of acceptable DOM event names. ### Specifying whitelisted modifier keys diff --git a/packages/ember-glimmer/lib/helpers/component.ts b/packages/ember-glimmer/lib/helpers/component.ts index 72d67530710..150c87bdcf1 100644 --- a/packages/ember-glimmer/lib/helpers/component.ts +++ b/packages/ember-glimmer/lib/helpers/component.ts @@ -18,7 +18,7 @@ import { CachedReference } from '../utils/references'; /** The `{{component}}` helper lets you add instances of `Component` to a - template. See [Component](/api/classes/Ember.Component.html) for + template. See [Component](/api/ember/release/classes/Component) for additional information on how a `Component` functions. `{{component}}`'s primary use is for cases where you want to dynamically change which type of component is rendered as the state of your application diff --git a/packages/ember-glimmer/lib/helpers/loc.ts b/packages/ember-glimmer/lib/helpers/loc.ts index 78b55d807de..f59100c4463 100644 --- a/packages/ember-glimmer/lib/helpers/loc.ts +++ b/packages/ember-glimmer/lib/helpers/loc.ts @@ -7,7 +7,7 @@ import { helper } from '../helper'; import { String as StringUtils } from 'ember-runtime'; /** - Calls [loc](/api/classes/Ember.String.html#method_loc) with the + Calls [loc](/api/ember/release/classes/String/methods/loc?anchor=loc) with the provided string. This is a convenient way to localize text within a template. For example: @@ -29,13 +29,13 @@ import { String as StringUtils } from 'ember-runtime'; ``` - See [Ember.String.loc](/api/classes/Ember.String.html#method_loc) for how to + See [String.loc](/api/ember/release/classes/String/methods/loc?anchor=loc) for how to set up localized string references. @method loc @for Ember.Templates.helpers @param {String} str The string to format. - @see {Ember.String#loc} + @see {String#loc} @public */ export default helper(function (params) { diff --git a/packages/ember-glimmer/lib/index.ts b/packages/ember-glimmer/lib/index.ts index b5cea5dd521..d85a81df820 100644 --- a/packages/ember-glimmer/lib/index.ts +++ b/packages/ember-glimmer/lib/index.ts @@ -63,14 +63,14 @@ )}}> ``` - Ember's built-in helpers are described under the [Ember.Templates.helpers](/api/classes/Ember.Templates.helpers.html) + Ember's built-in helpers are described under the [Ember.Templates.helpers](/api/ember/release/classes/Ember.Templates.helpers) namespace. Documentation on creating custom helpers can be found under - [Helper](/api/classes/Ember.Helper.html). + [Helper](/api/ember/release/classes/Helper). ### Invoking a Component Ember components represent state to the UI of an application. Further - reading on components can be found under [Component](/api/classes/Ember.Component.html). + reading on components can be found under [Component](/api/ember/release/classes/Component). @module @ember/component @main @ember/component diff --git a/packages/ember-glimmer/lib/syntax/input.ts b/packages/ember-glimmer/lib/syntax/input.ts index d1b7e519301..fdbab682796 100644 --- a/packages/ember-glimmer/lib/syntax/input.ts +++ b/packages/ember-glimmer/lib/syntax/input.ts @@ -15,7 +15,7 @@ function buildSyntax(type: string, params: any[], hash: any, builder: any) { /** The `{{input}}` helper lets you create an HTML `` component. It causes an `TextField` component to be rendered. For more info, - see the [TextField](/api/classes/Ember.TextField.html) docs and + see the [TextField](/api/ember/release/classes/TextField) docs and the [templates guide](https://emberjs.com/guides/templates/input-helpers/). ```handlebars @@ -83,7 +83,7 @@ function buildSyntax(type: string, params: any[], hash: any, builder: any) { ```handlebars {{input focus-out="alertMessage"}} ``` - See more about [Text Support Actions](/api/classes/Ember.TextField.html) + See more about [Text Support Actions](/api/ember/release/classes/TextField) ### Extending `TextField` @@ -103,7 +103,7 @@ function buildSyntax(type: string, params: any[], hash: any, builder: any) { Keep in mind when writing `TextField` subclasses that `TextField` itself extends `Component`. Expect isolated component semantics, not legacy 1.x view semantics (like `controller` being present). - See more about [Ember components](/api/classes/Ember.Component.html) + See more about [Ember components](/api/ember/release/classes/Component) ### Checkbox diff --git a/packages/ember-glimmer/tests/integration/components/curly-components-test.js b/packages/ember-glimmer/tests/integration/components/curly-components-test.js index 999d21e6d0e..b7295e6a889 100644 --- a/packages/ember-glimmer/tests/integration/components/curly-components-test.js +++ b/packages/ember-glimmer/tests/integration/components/curly-components-test.js @@ -889,9 +889,10 @@ moduleFor('Components test: curly components', class extends RenderingTest { // This is testing the scenario where you import a template and // set it to the layout property: // + // import Component from '@ember/component'; // import layout from './template'; // - // export default Ember.Component.extend({ + // export default Component.extend({ // layout // }); let hello = compile('Hello'); diff --git a/packages/ember-metal/lib/index.js b/packages/ember-metal/lib/index.js index b0ee3328499..6b72b075b08 100644 --- a/packages/ember-metal/lib/index.js +++ b/packages/ember-metal/lib/index.js @@ -30,6 +30,7 @@ export { } from './meta'; export { default as Cache } from './cache'; export { + PROXY_CONTENT, _getPath, get, getWithDefault diff --git a/packages/ember-metal/lib/property_events.js b/packages/ember-metal/lib/property_events.js index ada4d51a1a7..bc43e48af7d 100644 --- a/packages/ember-metal/lib/property_events.js +++ b/packages/ember-metal/lib/property_events.js @@ -101,7 +101,7 @@ function propertyDidChange(obj, keyName, _meta) { notifyObservers(obj, keyName, meta); } - if (obj[PROPERTY_DID_CHANGE]) { + if (PROPERTY_DID_CHANGE in obj) { obj[PROPERTY_DID_CHANGE](keyName); } diff --git a/packages/ember-metal/lib/property_get.js b/packages/ember-metal/lib/property_get.js index dd07bdc26f6..27f787a97bc 100644 --- a/packages/ember-metal/lib/property_get.js +++ b/packages/ember-metal/lib/property_get.js @@ -3,7 +3,8 @@ */ import { assert } from 'ember-debug'; -import { DESCRIPTOR_TRAP, EMBER_METAL_ES5_GETTERS } from 'ember/features'; +import { HAS_NATIVE_PROXY, symbol } from 'ember-utils'; +import { DESCRIPTOR_TRAP, EMBER_METAL_ES5_GETTERS, MANDATORY_GETTER } from 'ember/features'; import { isPath } from './path_cache'; import { isDescriptor, isDescriptorTrap, DESCRIPTOR, descriptorFor } from './meta'; @@ -13,6 +14,23 @@ const ALLOWABLE_TYPES = { string: true }; +export const PROXY_CONTENT = symbol('PROXY_CONTENT'); + +export function getPossibleMandatoryProxyValue(obj, keyName) { + if (MANDATORY_GETTER && EMBER_METAL_ES5_GETTERS && HAS_NATIVE_PROXY) { + let content = obj[PROXY_CONTENT]; + if (content === undefined) { + return obj[keyName]; + } else { + /* global Reflect */ + return Reflect.get(content, keyName, obj); + } + } else { + return obj[keyName]; + } +} + + // .......................................................... // GET AND SET // @@ -72,7 +90,7 @@ export function get(obj, keyName) { } if (!EMBER_METAL_ES5_GETTERS || descriptor === undefined) { - value = obj[keyName]; + value = getPossibleMandatoryProxyValue(obj, keyName); if (DESCRIPTOR_TRAP && isDescriptorTrap(value)) { descriptor = value[DESCRIPTOR]; diff --git a/packages/ember-metal/lib/property_set.js b/packages/ember-metal/lib/property_set.js index 4797ba10032..a1a9fdd9baa 100644 --- a/packages/ember-metal/lib/property_set.js +++ b/packages/ember-metal/lib/property_set.js @@ -1,6 +1,6 @@ import { toString } from 'ember-utils'; import { assert, Error as EmberError } from 'ember-debug'; -import { _getPath as getPath } from './property_get'; +import { getPossibleMandatoryProxyValue, _getPath as getPath } from './property_get'; import { propertyWillChange, propertyDidChange @@ -62,7 +62,7 @@ export function set(obj, keyName, value, tolerant) { } } - let currentValue = obj[keyName]; + let currentValue = getPossibleMandatoryProxyValue(obj, keyName); if (DESCRIPTOR_TRAP && isDescriptorTrap(currentValue)) { currentValue = currentValue[DESCRIPTOR]; diff --git a/packages/ember-runtime/lib/system/core_object.js b/packages/ember-runtime/lib/system/core_object.js index 1e94bf40eba..f98cb1a47b9 100644 --- a/packages/ember-runtime/lib/system/core_object.js +++ b/packages/ember-runtime/lib/system/core_object.js @@ -13,9 +13,11 @@ import { GUID_KEY_PROPERTY, symbol, NAME_KEY, - GUID_KEY + GUID_KEY, + HAS_NATIVE_PROXY } from 'ember-utils'; import { + PROXY_CONTENT, descriptorFor, get, meta, @@ -38,7 +40,7 @@ import { validatePropertyInjections } from '../inject'; import { assert } from 'ember-debug'; import { DEBUG } from 'ember-env-flags'; import { ENV } from 'ember-environment'; -import { MANDATORY_SETTER } from 'ember/features'; +import { MANDATORY_GETTER, MANDATORY_SETTER, EMBER_METAL_ES5_GETTERS } from 'ember/features'; const schedule = run.schedule; const applyMixin = Mixin._apply; @@ -56,6 +58,37 @@ function makeCtor() { class Class { constructor() { + let self = this; + + if (MANDATORY_GETTER && EMBER_METAL_ES5_GETTERS && HAS_NATIVE_PROXY && typeof self.unknownProperty === 'function') { + let messageFor = (obj, property) => { + return `You attempted to access the \`${String(property)}\` property (of ${obj}).\n` + + `Since Ember 3.1, this is usually fine as you no longer need to use \`.get()\`\n` + + `to access computed properties. However, in this case, the object in question\n` + + `is a special kind of Ember object (a proxy). Therefore, it is still necessary\n` + + `to use \`.get('${String(property)}')\` in this case.\n\n` + + `If you encountered this error because of third-party code that you don't control,\n` + + `there is more information at https://github.com/emberjs/ember.js/issues/16148, and\n` + + `you can help us improve this error message by telling us more about what happened in\n` + + `this situation.`; + }; + + /* globals Proxy Reflect */ + self = new Proxy(this, { + get(target, property, receiver) { + if (property === PROXY_CONTENT) { + return target; + } else if (typeof property === 'symbol' || property in target) { + return Reflect.get(target, property, receiver); + } + + let value = target.unknownProperty.call(receiver, property); + + assert(messageFor(receiver, property), value === undefined); + } + }); + } + if (!wasApplied) { Class.proto(); // prepare prototype... } @@ -64,10 +97,10 @@ function makeCtor() { initProperties = [arguments[0]]; } - this.__defineNonEnumerable(GUID_KEY_PROPERTY); - let m = meta(this); + self.__defineNonEnumerable(GUID_KEY_PROPERTY); + let m = meta(self); let proto = m.proto; - m.proto = this; + m.proto = self; if (initFactory) { FACTORY_FOR.set(this, initFactory); @@ -78,8 +111,8 @@ function makeCtor() { let props = initProperties; initProperties = null; - let concatenatedProperties = this.concatenatedProperties; - let mergedProperties = this.mergedProperties; + let concatenatedProperties = self.concatenatedProperties; + let mergedProperties = self.mergedProperties; let hasConcatenatedProps = concatenatedProperties && concatenatedProperties.length > 0; let hasMergedProps = mergedProperties && mergedProperties.length > 0; @@ -125,11 +158,11 @@ function makeCtor() { !((keyName === 'actions') && ActionHandler.detect(this)) ); - let possibleDesc = descriptorFor(this, keyName, m); + let possibleDesc = descriptorFor(self, keyName, m); let isDescriptor = possibleDesc !== undefined; if (!isDescriptor) { - let baseValue = this[keyName]; + let baseValue = self[keyName]; if (hasConcatenatedProps && concatenatedProperties.indexOf(keyName) > -1) { if (baseValue) { @@ -145,14 +178,14 @@ function makeCtor() { } if (isDescriptor) { - possibleDesc.set(this, keyName, value); - } else if (typeof this.setUnknownProperty === 'function' && !(keyName in this)) { - this.setUnknownProperty(keyName, value); + possibleDesc.set(self, keyName, value); + } else if (typeof self.setUnknownProperty === 'function' && !(keyName in self)) { + self.setUnknownProperty(keyName, value); } else { if (MANDATORY_SETTER) { - defineProperty(this, keyName, null, value); // setup mandatory setter + defineProperty(self, keyName, null, value); // setup mandatory setter } else { - this[keyName] = value; + self[keyName] = value; } } } @@ -160,16 +193,18 @@ function makeCtor() { } if (ENV._ENABLE_BINDING_SUPPORT) { - Mixin.finishPartial(this, m); + Mixin.finishPartial(self, m); } - this.init(...arguments); + self.init(...arguments); - this[POST_INIT](); + self[POST_INIT](); m.proto = proto; finishChains(m); - sendEvent(this, 'init', undefined, undefined, undefined, m); + sendEvent(self, 'init', undefined, undefined, undefined, m); + + return self; } static willReopen() { @@ -724,6 +759,7 @@ let ClassMixinProps = { if (args.length > 0) { this._initProperties(args); } + return new C(); }, diff --git a/packages/ember-runtime/tests/system/object_proxy_test.js b/packages/ember-runtime/tests/system/object_proxy_test.js index 9dcc826efad..409ac7ae086 100644 --- a/packages/ember-runtime/tests/system/object_proxy_test.js +++ b/packages/ember-runtime/tests/system/object_proxy_test.js @@ -1,10 +1,13 @@ import { addObserver, - removeObserver, computed, - isWatching + get, + isWatching, + removeObserver } from 'ember-metal'; +import { HAS_NATIVE_PROXY } from 'ember-utils'; import { testBoth } from 'internal-test-helpers'; +import { MANDATORY_GETTER, EMBER_METAL_ES5_GETTERS } from 'ember/features'; import ObjectProxy from '../../system/object_proxy'; QUnit.module('ObjectProxy'); @@ -58,6 +61,66 @@ testBoth('should proxy properties to content', function(get, set, assert) { assert.equal(get(proxy, 'lastName'), 'Katz', 'proxy should reflect updated content'); }); +QUnit.test('getting proxied properties with Ember.get should work', assert => { + let proxy = ObjectProxy.create({ + content: { + foo: 'FOO' + } + }); + + assert.equal(get(proxy, 'foo'), 'FOO'); +}); + + +QUnit.test(`JSON.stringify doens't assert`, assert => { + let proxy = ObjectProxy.create({ + content: { + foo: 'FOO' + } + }); + + assert.equal(JSON.stringify(proxy), JSON.stringify({ content: { foo: 'FOO' } })); +}); + +QUnit.test(`setting a property on the proxy avoids the assertion`, assert => { + let proxy = ObjectProxy.create({ + toJSON: undefined, + content: { + toJSON() { + return 'hello'; + } + } + }); + + assert.equal(JSON.stringify(proxy), JSON.stringify({ content: 'hello' })); +}); + +QUnit.test(`setting a property on the proxy's prototype avoids the assertion`, assert => { + let proxy = ObjectProxy.extend({ + toJSON: null + }).create({ + content: { + toJSON() { + return 'hello'; + } + } + }); + + assert.equal(JSON.stringify(proxy), JSON.stringify({ content: 'hello' })); +}); + +if (MANDATORY_GETTER && EMBER_METAL_ES5_GETTERS && HAS_NATIVE_PROXY) { + QUnit.test('getting proxied properties with [] should be an error', () => { + let proxy = ObjectProxy.create({ + content: { + foo: 'FOO' + } + }); + + expectAssertion(() => proxy.foo, /\.get\('foo'\)/); + }); +} + testBoth('should work with watched properties', function(get, set, assert) { let content1 = { firstName: 'Tom', lastName: 'Dale' }; let content2 = { firstName: 'Yehuda', lastName: 'Katz' }; diff --git a/packages/ember-views/lib/mixins/class_names_support.js b/packages/ember-views/lib/mixins/class_names_support.js index 729c071b3c5..cb02b6ae914 100644 --- a/packages/ember-views/lib/mixins/class_names_support.js +++ b/packages/ember-views/lib/mixins/class_names_support.js @@ -40,8 +40,9 @@ export default Mixin.create({ name. ```javascript + import Component from '@ember/component'; // Applies the 'high' class to the view element - Ember.Component.extend({ + Component.extend({ classNameBindings: ['priority'], priority: 'high' }); @@ -51,8 +52,9 @@ export default Mixin.create({ added as a dasherized class name. ```javascript + import Component from '@ember/component'; // Applies the 'is-urgent' class to the view element - Ember.Component.extend({ + Component.extend({ classNameBindings: ['isUrgent'], isUrgent: true }); @@ -62,8 +64,9 @@ export default Mixin.create({ property name, you can pass a binding like this: ```javascript + import Component from '@ember/component'; // Applies the 'urgent' class to the view element - Ember.Component.extend({ + Component.extend({ classNameBindings: ['isUrgent:urgent'], isUrgent: true }); diff --git a/packages/ember-views/lib/mixins/text_support.js b/packages/ember-views/lib/mixins/text_support.js index a15a0e8f5dd..088908da23c 100644 --- a/packages/ember-views/lib/mixins/text_support.js +++ b/packages/ember-views/lib/mixins/text_support.js @@ -15,8 +15,8 @@ const KEY_EVENTS = { }; /** - `TextSupport` is a shared mixin used by both `Ember.TextField` and - `Ember.TextArea`. `TextSupport` adds a number of methods that allow you to + `TextSupport` is a shared mixin used by both `TextField` and + `TextArea`. `TextSupport` adds a number of methods that allow you to specify a controller action to invoke when a certain event is fired on your text field or textarea. The specified controller action would get the current value of the field passed in as the only argument unless the value of @@ -34,9 +34,12 @@ const KEY_EVENTS = { ``` ```javascript - App = Ember.Application.create(); + import Application from '@ember/application'; + import Controller from '@ember/controller'; - App.ApplicationController = Ember.Controller.extend({ + App = Application.create(); + + App.ApplicationController = Controller.extend({ actions: { alertUser: function ( currentValue ) { alert( 'escape pressed, current value: ' + currentValue ); diff --git a/packages/ember-views/lib/mixins/view_support.js b/packages/ember-views/lib/mixins/view_support.js index 2e43127fd2e..31aac439d4f 100644 --- a/packages/ember-views/lib/mixins/view_support.js +++ b/packages/ember-views/lib/mixins/view_support.js @@ -85,7 +85,7 @@ export default Mixin.create({ @method nearestOfType @param {Class,Mixin} klass Subclass of Ember.View (or Ember.View itself), - or an instance of Ember.Mixin. + or an instance of Mixin. @return Ember.View @deprecated use `yield` and contextual components for composition instead. @private @@ -190,7 +190,7 @@ export default Mixin.create({ This is not typically a function that you will need to call directly when building your application. If you do need to use `appendTo`, be sure that - the target element you are providing is associated with an `Ember.Application` + the target element you are providing is associated with an `Application` and does not have an ancestor element that is associated with an Ember view. @method appendTo diff --git a/packages/ember-views/lib/system/event_dispatcher.js b/packages/ember-views/lib/system/event_dispatcher.js index ef14b53bc95..335d0f449d7 100644 --- a/packages/ember-views/lib/system/event_dispatcher.js +++ b/packages/ember-views/lib/system/event_dispatcher.js @@ -30,12 +30,13 @@ export default EmberObject.extend({ /** The set of events names (and associated handler function names) to be setup and dispatched by the `EventDispatcher`. Modifications to this list can be done - at setup time, generally via the `Ember.Application.customEvents` hash. + at setup time, generally via the `Application.customEvents` hash. To add new events to be listened to: ```javascript - let App = Ember.Application.create({ + import Application from '@ember/application'; + let App = Application.create({ customEvents: { paste: 'paste' } @@ -45,7 +46,8 @@ export default EmberObject.extend({ To prevent default events from being listened to: ```javascript - let App = Ember.Application.create({ + import Application from '@ember/application'; + let App = Application.create({ customEvents: { mouseenter: null, mouseleave: null diff --git a/packages/ember-views/lib/views/core_view.js b/packages/ember-views/lib/views/core_view.js index 46aa435c56f..ada2f6299b5 100644 --- a/packages/ember-views/lib/views/core_view.js +++ b/packages/ember-views/lib/views/core_view.js @@ -8,10 +8,10 @@ import { cloneStates, states } from './states'; /** `Ember.CoreView` is an abstract class that exists to give view-like behavior - to both Ember's main view class `Ember.Component` and other classes that don't need - the full functionality of `Ember.Component`. + to both Ember's main view class `Component` and other classes that don't need + the full functionality of `Component`. - Unless you have specific needs for `CoreView`, you will use `Ember.Component` + Unless you have specific needs for `CoreView`, you will use `Component` in your applications. @class CoreView @@ -58,7 +58,7 @@ const CoreView = FrameworkObject.extend(Evented, ActionHandler, { }, /** - Override the default event firing from `Ember.Evented` to + Override the default event firing from `Evented` to also call methods with the given name. @method trigger