DEV Community

Ember.js
Ember.js

Posted on • Originally published at blog.emberjs.com

Ember 3.25 Released

Today the Ember project is releasing version 3.25 of Ember.js, Ember Data, and Ember CLI.

This release kicks off the 3.26 beta cycle for all sub-projects. We encourage our community (especially addon authors) to help test these beta builds and report any bugs before they are published as a final release in six weeks' time. The ember-try addon is a great way to continuously test your projects against the latest Ember releases.

You can read more about our general release process here:


Ember.js

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

Changes in Ember.js 3.25

Ember.js 3.25 is an incremental, backwards compatible release of Ember with bug fixes, performance improvements, and minor deprecations.

Bug Fixes

Ember.js 3.25 contains several bug fixes, including:

  • Empty hmtmlSafe strings are now considered false. (#18148)
  • Template locals no longer clobber component invocations of the same name. (#19351)
  • Improved error message when invoking nested components, e.g. <Foo:Bar />. (#19336)
  • Improved error messages and stack traces for <LinkTo />. (#19342)

Features

Ember.js 3.25 introduced 2 features.

  1. Template strict mode (#19302, #19306, #19319)

While this feature won't have an impact for Ember developers quite yet, it is an important step towards allowing more experimental work in templates, like template imports and single-file components.

If these topics interest you, keep an eye on our RFCs repository for activity and a chance to participate!

  1. Named blocks (#19318)

This feature enables developers to yield distinct blocks from a component, unlocking powerful composition patterns for components.

This feature is useful when you want to render different things depending on passed-in data.
Let us implement a shopping cart that lists the items in it, or shows a message that says it is empty.
We will be using {{gt}} from ember-truth-helpers to help implement this.

First we write the component template:

// app/components/cart.hbs
{{#if (gt @list.length 0)}}
  <ul>
    {{#each @list as |item|}}
      <li>{{yield item}}</li>
    {{/each}}
  </ul>
{{else}}
  {{yield to="empty"}}
{{/if}}
Enter fullscreen mode Exit fullscreen mode

Which can be used like so:

<Cart @list={{this.shoppingList}}>
  <:default as |listItem|>
    <p>You have a {{listItem}}.</p>
  </:default>
  <:empty>
    <p>Your cart is empty.</p>
  </:empty>
</Cart>
Enter fullscreen mode Exit fullscreen mode

Then when shoppingList contains multiple elements, like [ "apple", "pear", "banana" ], it renders the following:

<ul>
  <li><p>apple</p</li>
  <li><p>pear</p</li>
  <li><p>banana</p</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

But if shoppingList is empty, it renders the following instead:

<p>Your cart is empty.</p>
Enter fullscreen mode Exit fullscreen mode

Named blocks are also useful if you want to ensure a certain structure to your HTML, but want to enable customization of the content.
An example of this would be an <Article> component, as shown in the yieldable named blocks RFC (#460).

You can find more information in the Component API documentation.

Deprecations

Ember.js 3.25 introduced 0 deprecations.

For more details on changes in Ember.js 3.25, please review the Ember.js 3.25.0 release page.


Ember Data

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

Changes in Ember Data 3.25

Apart from documentation fixes and internal cleanup of feature flags, there were no changes.

For more details on changes in Ember Data 3.25, please review the
Ember Data 3.25.0 release page.


Ember CLI

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

Upgrading Ember CLI

You may upgrade Ember CLI using the ember-cli-update project:

npx ember-cli-update
Enter fullscreen mode Exit fullscreen mode

This utility will help you to update your app or addon to the latest Ember CLI version. You will probably encounter merge conflicts, in which the default behavior is to let you resolve conflicts on your own. For more information on the ember-cli-update project, see the GitHub README.

While it is recommended to keep Ember CLI versions in sync with Ember and Ember Data, this is not required. After updating ember-cli, you can keep your current version(s) of Ember or Ember Data by editing package.json to revert the changes to the lines containing ember-source and ember-data.

Changes in Ember CLI 3.25

Apart from updated dependencies in the app and addon blueprints, there were no changes.

For more details on the changes in Ember CLI 3.25 and detailed upgrade
instructions, please review the Ember CLI 3.25.0 release page.

Thank You!

As a community-driven open-source project with an ambitious scope, each of these releases serves as a reminder that the Ember project would not have been possible without your continued support. We are extremely grateful to our contributors for their efforts.

Discussion (0)