In the present day the Ember venture is releasing model 3.11 of Ember.js, Ember Information, and Ember CLI. This launch kicks off the three.12 beta cycle for all sub-projects. We encourage our neighborhood (particularly addon authors) to assist check these beta builds and report any bugs earlier than they’re printed as a remaining launch in six weeks’ time. The ember-try addon is an effective way to constantly check your initiatives in opposition to the newest Ember releases.
You’ll be able to learn extra about our basic launch course of right here:
Ember.js
Ember.js is the core framework for constructing formidable net purposes.
Adjustments in Ember.js 3.11
Ember.js 3.11 is an incremental, backwards suitable launch of Ember with bugfixes, efficiency enhancements, and minor deprecations. There are 4 (4) new options, one (1) deprecation, and a number of other bugfixes on this model.
New Options (4)
Forwarding Aspect Modifiers with ...attributes (1 of 4)
Angle bracket element invocation was launched in Ember.js 3.4. Except for the syntatic variations, the angle bracket invocation syntax enabled passing HTML attributes to elements, which might then be utilized the underlying HTML component(s) within the element’s structure utilizing the ...attributes syntax. That is additionally identified informally because the “splattributes” characteristic.
This options clarifies how the “splattributes” characteristic work together with component modifiers.
For extra info please consult with the RFC.
The {{fn}} helper (2 of 4)
The {{fn}} helper gives a technique to go arguments to actions.
The motion technique creates an motion from a perform in order that it may be handed to occasion handlers in templates. It ensures that the this worth within the countUp motion will all the time be the element occasion, which permits it to be freely handed to different elements. The place this falls brief is when we have to go arguments to those actions.
import Element from "@ember/element";
import { motion } from '@ember/object';
export default Element.prolong({
depend: 0,
countUp: motion(perform() {
this.incrementProperty("depend");
})
}
Present depend:
<MyButton @click on=>Add One</MyButton>
The {{fn}} helper gives a technique to go arguments into actions and “bundle” them up, in order that they are often handed round to different elements and nonetheless retain the supplied arguments when known as:
Present depend:
<MyButton @click on=>Add One</MyButton>
<MyButton @click on=>Add One</MyButton>
<MyButton @click on=>Add Ten</MyButton>
Along with the essential use case proven right here, the {{fn}} helper helps different superior use circumstances, corresponding to including extra arguments to an current perform.
<MyButton @click on=>
Whats up World
</MyButton>
<MyButton @click on=>
Whats up Tomster and Zoey
</MyButton>
It must also be famous that the {{motion}} helper can beforehand be used to perform related functionalities, however resulting from some historic choices, it could produce shocking leads to some circumstances. Subsequently, Ember customers are inspired emigrate to the {{fn}} helper together with the motion technique the place doable and applicable. Discuss with the RFC for extra particulars and examples.
The {{on}} modifier (3 of 4)
The {{on}} modifier gives a simple technique to hearken to DOM occasions on arbitrary parts.
import Element from "@ember/element";
import { motion } from '@ember/object';
export default Element.prolong({
depend: 0,
countUp: motion(perform() {
this.incrementProperty("depend");
})
}
Present depend:
<button >Add One</button>
The {{on}} modifier on this instance attaches a passive “click on” occasion listener on the button, such that when the button is clicked, the countUp motion will likely be known as. Like earlier than, wrapping our perform in an motion name ensures the countUp motion may have the best this worth at runtime.
By default, the motion handed to the {{on}} modifier will obtain the DOM occasion as an argument. The fn helper can be utilized together with the {{on}} modifier to change this habits. Together with the “Splattributes” characteristic talked about above, the {{on}} modifier may also be utilized to element parts as nicely.
Lastly, it needs to be famous that the {{motion}} modifier, and in some circumstances, DOM properties like onclick= may beforehand be used to perform related functionalities. Nevertheless, each of those approaches have their very own drawbacks. Subsequently, Ember customers are inspired emigrate to the {{on}} modifier together with the motion technique the place doable and applicable. See the RFC for extra particulars and examples.
Inject Parameter Normalization (4 of 4)
Inject Parameter Normalization normalizes this contract for all Ember base courses – that’s, framework courses which are supplied by Ember:
GlimmerComponentEmberComponentServiceRouteControllerHelper
Together with framework clases supplied by Ember Information:
MannequinAdapterSerializerRemodel
For more information please consult with the RFC.
Deprecations (1)
Deprecations are added to Ember.js when an API will likely be eliminated at a later date. Every deprecation has an entry within the deprecation information describing the migration path to a extra steady API. Deprecated public APIs are usually not eliminated till a serious launch of the framework.
Think about using the ember-cli-deprecation-workflow addon if you need to improve your utility with out instantly addressing deprecations.
For extra particulars on modifications in Ember.js 3.11, please assessment the Ember.js 3.11.0 launch web page.
Deprecate Operate.prototype.observes (1 of 1)
Traditionally, Ember has prolonged the Operate.prototype with a couple of capabilities (on, observes, property), over time we have now moved away from utilizing these prototype prolonged capabilities in favor of utilizing the official ES modules based mostly API.
Please consult with the deprecation guides for info on learn how to migrate away from Operate.prototype.
Ember Information
Ember Information is the official knowledge persistence library for Ember.js purposes.
Necessary observe about Ember Information 3.11
There’s a identified bug in 3.11.0 which implies ember generate mannequin one thing would not work. We’re at the moment working a patch for this.
Likewise there’s a identified bug for displaying the three.11 API documentation on api.emberjs.com, which may also be fastened in a patch.
This weblog publish will likely be up to date as soon as these points are resolved.
Adjustments in Ember Information 3.11
New Options (1)
Packages characteristic (1 of 1)
Along with a number of bug fixes and small documentation fixes, this launch is the primary launch that ships ember-data as a set of smaller packages. Over time, a few of these packages will develop into optionally available.
The packages characteristic additionally introduces a brand new import syntax.
Beforehand:
import Mannequin from 'ember-data/mannequin';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';
or:
import DS from 'ember-data';
const { Mannequin, attr, belongsTo, hasMany } = DS;
Can now be achieved like this:
import Mannequin, { attr, belongsTo, hasMany } from '@ember-data/mannequin';
With the touchdown of this characteristic, the earlier import types will develop into deprecated in an upcoming launch. Lint guidelines and a codemod will likely be obtainable earlier than that point to make sure a seamless transition to the brand new syntax.
You’ll be able to learn extra in regards to the new bundle syntax within the RFC
Deprecations (0)
No new deprecations launched in Ember Information 3.11.
For extra particulars on modifications in Ember Information 3.11, please assessment the
Ember Information 3.11.0 launch web page.
Ember CLI
Ember CLI is the command line interface for managing and packaging Ember.js purposes.
Upgrading Ember CLI
Chances are you’ll improve Ember CLI utilizing the ember-cli-update venture:
npm set up -g ember-cli-update
ember-cli-update
This utility will enable you to to replace your app or add-on to the newest Ember CLI model. You’ll most likely encounter merge conflicts, through which the default habits is to allow you to resolve conflicts by yourself. For extra info on the ember-cli-update venture, see the github README.
Whereas it’s endorsed to maintain Ember CLI variations in sync with Ember and Ember Information, this isn’t required. After updating ember-cli, you may preserve your present model(s) of Ember or Ember Information by modifying bundle.json to revert the modifications to the traces containing ember-source and ember-data.
Adjustments in Ember CLI 3.11
Ember CLI 3.11 accommodates a number of bug fixes. Take a look on the full changelog for an outline.
New Options (0)
No new options in Ember CLI 3.11.
Deprecations (0)
No new deprecations in Ember CLI 3.11.
For extra particulars on the modifications in Ember CLI 3.11 and detailed improve
directions, please assessment the Ember CLI 3.11.0 launch web page.
Thank You!
As a community-driven open-source venture with an formidable scope, every of those releases function a reminder that the Ember venture wouldn’t have been doable with out your continued assist. We’re extraordinarily grateful to our contributors for his or her efforts.
