Ember 3.11 released


Today, the Ember project released version 3.11 of Ember.js, Ember Data, and Ember CLI. This version started the 3.12 test cycle of all sub-projects. We encourage our community (especially plugin authors) to help test these beta versions and report any bugs before they are released as the final version in six weeks.This Embers try Plugins are a great way to continuously test your project against the latest Ember version.

You can read more about our general publishing process here:


Ember.js

Ember.js is the core framework for building ambitious web applications.

Changes in Ember.js 3.11

Ember.js 3.11 is an incremental, backward compatible version of Ember with bug fixes, performance improvements, and a few deprecations. There are four (4) new features, one (1) deprecation and several bugfixes in this version.

New features (4)

Forward element modifier ...attributes (1 of 4)

The angle bracket component call was introduced in Ember.js 3.4.In addition to the grammatical differences, the angle bracket call syntax allows HTML attributes to be passed to the component, which can then be applied using the underlying HTML elements in the component layout ...attributes syntax. This is also informally called the “splattributes” feature.

This function clarifies how the “splattributes” function interacts with element modifiers.

For more information, please refer to RFC.

This {{fn}} Helpers (2 of 4)

This {{fn}} The helper provides a way to pass parameters to the operation.

This action The method creates an action from the function so that it can be passed to the event handler in the template.It ensures this Value in countUp The action will always be a component instance, which allows it to be freely passed to other components. When we need to pass parameters to these operations, this is where it falls short.

import Component from "@ember/component";
import { action } from '@ember/object';

export default Component.extend({
  count: 0,

  countUp: action(function() {
    this.incrementProperty("count");
  })
}
Current count: {{this.count}}

<MyButton @click={{this.countUp}}>Add One</MyButton>

This {{fn}} The helper provides a way to pass parameters to actions and “bundle” them so that they can be passed to other components and still retain the provided parameters when called:

Current count: {{this.count}}

{{!-- when not passing arguments, these are equivalent --}}
<MyButton @click={{this.countUp}}>Add One</MyButton>
<MyButton @click={{fn this.countUp}}>Add One</MyButton>

{{!-- calls this.countUp(10) when clicked --}}
<MyButton @click={{fn this.countUp 10}}>Add Ten</MyButton>

In addition to the basic use cases shown here, {{fn}} The helper supports other advanced use cases, such as adding more parameters to an existing function.

{{#let (fn this.log "hello") as |hello|}}
  {{!-- calls this.log("hello", "world") --}}
  <MyButton @click={{fn hello "world"}}>
    Hello World
  </MyButton>

  {{!-- calls this.log("hello", "Tomster", "Zoey") --}}
  <MyButton @click={{fn hello "Tomster" "Zoey"}}>
    Hello Tomster and Zoey
  </MyButton>
{{/let}}

It should also be noted that {{action}} Helper can be used to accomplish similar functions before, but due to some historical decisions, it may produce surprising results in some cases.Therefore, Ember users are encouraged to migrate to {{fn}} helper action Methods where possible and appropriate.reference RFC For more details and examples.

This {{on}} Modifiers (3 of 4)

This {{on}} Modifiers provide a direct way to listen to DOM events on any element.

import Component from "@ember/component";
import { action } from '@ember/object';

export default Component.extend({
  count: 0,

  countUp: action(function() {
    this.incrementProperty("count");
  })
}
Current count: {{this.count}}

<button {{on "click" this.countUp passive=true}}>Add One</button>

This {{on}} The modifier in this example attaches a passive “click” event listener to the button so that when the button is clicked, countUp The operation will be invoked.As before, wrap our function in a action Call to ensure countUp Action will have the right this The value at runtime.

By default, actions are passed to {{on}} The modifier will receive DOM events as parameters.This fn helper can interact with {{on}} Modifiers to change this behavior. In addition to the “Splattributes” function mentioned above, {{on}} Modifiers can also be applied to component elements.

Finally, it should be noted that {{action}} Modifiers, in some cases, DOM attributes such as onclick= It can be used to accomplish similar functions before. However, both methods have their own shortcomings.Therefore, Ember users are encouraged to migrate to {{on}} Modifier and action Methods where possible and appropriate.Look RFC For more details and examples.

Normalization of injection parameters (4 of 4)

Inject Parameter Normalization normalizes this contract for all Ember base classes (ie, the framework classes provided by Ember):

  • GlimmerComponent
  • EmberComponent
  • Service
  • Route
  • Controller
  • Helper

Together with the framework classes provided by Ember Data:

  • Model
  • Adapter
  • Serializer
  • Transform

For more information, see RFC.

Deprecated (1)

When the API will be removed in the future, a deprecation will be added to Ember.js. Each deprecation guide has an entry in the deprecation guide that describes the migration path to a more stable API. Before the major version of the framework is released, the deprecated public API will not be removed.

Consider using ember-cli-deprecated-workflow addon If you want to upgrade your application without immediately solving the deprecation issue.

For more details about the changes in Ember.js 3.11, please check Ember.js 3.11.0 release page.

Deprecated Function.prototype.observes (1 of 1)

Historically, Ember has expanded Function.prototype There are several functions (on, observes, property), as time goes by, we no longer use these prototype extension functions, and instead use APIs based on official ES modules.

See Deprecation guide Information on how to migrate Function.prototype.


Embers data

Ember Data is the official data persistence library for Ember.js applications.

Important note about Ember Data 3.11

Have a Known bugs in 3.11.0 meaning is ember generate model something Doesn’t work. We are currently patching for this.Similarly, there is a known bug when displaying the 3.11 API documentation api.emberjs.com, This will also be fixed in the patch. After these issues are resolved, this blog post will be updated.

Changes in Ember Data 3.11

New features (1)

Package function (1 of 1)

In addition to several bug fixes and small document fixes, this version is the first to provide ember-data as a collection of smaller packages. Over time, some of these packages will become optional.

The package function also introduces a new import syntax.

prior to:

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';

or:

import DS from 'ember-data';

const { Model, attr, belongsTo, hasMany } = DS;

It can now be implemented like this:

import Model, { attr, belongsTo, hasMany } from '@ember-data/model';

With the implementation of this feature, the previous imported styles will be deprecated in the upcoming version. Until then, Lint rules and codemod will be available to ensure a seamless transition to the new syntax.

You can read more about the new package syntax In RFC

Deprecated (0)

No new deprecations were introduced in Ember Data 3.11.

For more details about the changes in Ember Data 3.11, please check
Ember Data 3.11.0 release page.


Ember command line interface

Ember CLI is a command line interface for managing and packaging Ember.js applications.

Upgrade Ember CLI

You can use the ember-cli-update project to upgrade Ember CLI:

npm install -g ember-cli-update
ember-cli-update

This utility will help you update your application or add-on to the latest Ember CLI version. You may encounter merge conflicts, where the default behavior is to let you resolve the conflict yourself.For more information ember-cli-update Item, see github readme.

Although it is recommended to keep the Ember CLI version in sync with Ember and Ember Data, it is not required. After updating ember-cli, you can keep the current version of Ember or Ember Data by editing package.json Revert changes to contained lines ember-source with ember-data.

Changes in Ember CLI 3.11

Ember CLI 3.11 contains several bug fixes.Take a look Complete change log Overview.

New features (0)

There are no new features in Ember CLI 3.11.

Deprecated (0)

There are no new deprecations in Ember CLI 3.11.


For more details about the changes in Ember CLI 3.11 and detailed upgrade instructions, please check Ember CLI 3.11.0 release page.

thank you!

As an ambitious community-driven open source project, each of these releases reminds us that without your continued support, the Ember project is impossible to achieve. We are very grateful for the efforts of our contributors.

Leave a Reply

Your email address will not be published. Required fields are marked *