The Ember mission is happy to announce the discharge of Ember v7.2. It is a customary minor launch as a part of the Ember Launch Practice course of.
This launch takes two necessary steps in the direction of making Ember apps feel and look like plain JavaScript: a brand new built-in Strict Resolver that does away with modulePrefix, and ember-source lastly being revealed as a totally ESM package deal. It additionally fixes a few bugs within the rendering engine and continues the work of untangling the blueprint system from ember-cli 💪
Ember.js 7.2
Ember.js 7.2 introduces one new function, the built-in Strict Resolver proposed in RFC #1132, units kind: "module" on the ember-source package deal, and ships two bugfixes. There aren’t any new deprecations.
Constructed-in Strict Resolver
When you have ever opened the app/app.js file in an Ember software you’ll have seen one thing like this:
import Utility from '@ember/software';
import compatModules from '@embroider/digital/compat-modules';
import Resolver from 'ember-resolver';
import config from 'my-app/config/setting';
export default class App extends Utility {
modulePrefix = config.modulePrefix;
podModulePrefix = config.podModulePrefix;
Resolver = Resolver.withModules(compatModules);
}The Resolver is the a part of Ember that takes a string like service:current-user and finds the proper JavaScript module to again it. Traditionally that has meant trying up a module named my-app/companies/current-user, the place my-app is the modulePrefix. The idea of a modulePrefix (and its even weirder sibling podModulePrefix) has been with us because the very early days of ember-cli, and it has at all times been a little bit bit odd. It is not an idea that exists in another JavaScript software. Modules are merely modules, and also you import them by their path.
Ember 7.2 features a new Strict Resolver that’s constructed into Ember.js itself. Quite than counting on a modulePrefix and dynamic string-based lookups, you give your Utility an express map of modules utilizing the brand new modules property, and the Strict Resolver will solely ever resolve issues out of that map. Since Vite provides us import.meta.glob() you do not even want to write down the map out by hand:
import Utility from '@ember/software';
import Router from './router';
export default class App extends Utility {
modules = {
'./router': { default: Router },
...import.meta.glob('./companies/**/*', { keen: true }),
...import.meta.glob('./routes/**/*', { keen: true }),
...import.meta.glob('./controllers/**/*', { keen: true }),
...import.meta.glob('./templates/**/*', { keen: true }),
};
}No modulePrefix, no podModulePrefix, no ember-resolver dependency, and every little thing the resolver may probably return is statically seen in a single file. That is nice for tree-shaking and build-time optimisation, and it’s a lot simpler to clarify to somebody who’s new to Ember. Earlier than this launch you might get the identical behaviour by putting in the ember-strict-application-resolver polyfill, and Ember 7.2 is the primary model the place you should use it with out putting in something further.
Now for the trustworthy half 😅 This is a crucial step on the street to eradicating modulePrefix from Ember apps altogether, however it isn’t the tip of that street. Whereas import.meta.glob() is ideal for selecting up the recordsdata in your personal app, it would not know something in regards to the companies, elements, or templates which can be offered by the addons you might have put in. As we speak these come from @embroider/digital/compat-modules, and Embroider nonetheless prefixes each a kind of module names together with your modulePrefix. Till Embroider learns to detect if you end up utilizing modules in your Utility and omit that prefix, a real-world app that makes use of addons nonetheless wants ember-resolver and compatModules.
Due to that, the default app blueprint has not modified to make use of the Strict Resolver but, and ember-resolver is not deprecated. When the remainder of the items are in place we are going to replace the blueprint and allow you to know in a future launch weblog. Within the meantime, if you’re constructing one thing small (for instance a take a look at app or a minimal app that does not rely upon addons) you can begin utilizing the Strict Resolver at this time. You’ll be able to learn extra in regards to the motivation within the Default Strict Resolver RFC.
Launched in emberjs/ember.js PR #21303
ember-source is now kind: "module"
When you have ever puzzled why some recordsdata in an Ember mission finish in .mjs or .cjs, this part is for you.
Node.js has two module programs: the older CommonJS format (the module.exports = {} and require() that you will notice in a variety of older Node code) and the usual ECMAScript Modules format, or ESM (the import and export syntax that you simply use in your app code day-after-day). When Node.js seems to be at a .js file, it must determine which of the 2 codecs it’s coping with, and it makes use of the kind subject within the nearest package deal.json to make that call. If a package deal would not have a kind subject it’s assumed to be CommonJS, and any file that desires to make use of import and export must be renamed to .mjs in order that Node.js can inform it aside.
Setting "kind": "module" inverts that. Each .js file within the package deal is now assumed to be ESM, with no exceptions, and when you have any leftover CommonJS recordsdata you need to rename them to .cjs as an alternative. In Ember 7.2 we’ve set "kind": "module" on the ember-source package deal. That does not sound like a lot by itself, however it’s a flag within the sand: it tells each device that consumes ember-source that each file in there’s an ES module, which lets bundlers make a lot better assumptions about what they will safely drop out of your bundle. It is not sufficient by itself to shrink your bundle (there’s extra work approaching that entrance), however it’s a vital step that we’ve been working in the direction of for a very long time.
When you have been studying these launch blogs you’ll have seen us regularly changing particular person recordsdata to ESM over the previous few releases, from changing ember-cli-build.js to an ESM file in Ember 6.12 to including assist for blueprints written in ESM in ember-cli 7.1. We may have flipped this change a 12 months or two in the past, however we’d have needed to rename each remaining CommonJS file within the package deal to .cjs, which might have been messy for no good motive. As a substitute, we did the conversion work first in order that flipping the change was the very last thing left to do. As a part of this launch all the blueprints that ship with ember-source (those that again ember generate element, ember generate route, and so forth) have been rewritten as actual ESM modules. The one file that needed to be renamed to .cjs was the Prettier config.
Additionally, the broader ecosystem has been shifting in the identical route. Since Node.js added the power to require() an ESM module, and that functionality is now within the oldest model of Node.js that we assist, there’s little or no motive left for anybody to publish CommonJS. All people will get the advantages as soon as most packages have moved to ESM, and we’re completely happy to be doing our half.
What does this imply for you? If you’re an app developer the one factor to concentrate on is that Ember 7.2 requires ember-cli 7.0.1 or newer. The repair that ember-cli wanted as a way to load ESM blueprints was backported to ember-cli 7.0.1 so it is best to have already got it if you’re on Ember 7. Should you keep customized blueprints, nothing about them wants to vary, however you are actually free to write down them as ESM for those who like.
Launched in emberjs/ember.js PR #21371, with the blueprint conversion in PR #21427
Bug Fixes
Ember.js 7.2 introduces 2 bugfixes:
- #21458 Sanitization enhancements for uppercase supply, svg hrefs with
javascript:,<iframe>src withinformation:urls, and<object>information attributes withinformation:andjavascript:urls. - #21470 Re-render dynamic elements in append place when the definition adjustments.
The primary repair closes quite a few gaps in Ember’s built-in URL sanitizer, the factor that stops a user-provided worth like javascript:alert(1) from ending up in an href. Should you have been deliberately counting on any of the earlier behaviour you may decide again in with trustHTML from @ember/template.
The second repair is for a delicate reactivity bug in strict mode templates. Should you rendered a element in “append place” utilizing the inline {{if}} helper, for instance {{if @isOk Okay Ko}}, the template wouldn’t replace when the argument modified, though the block type {{#if @isOk}}<Okay />{{else}}<Ko />{{/if}} labored tremendous. Each kinds now behave the identical.
Documentation
Now that the {{factor}}, {{and}}, {{or}}, {{eq}} and associates have been constructed into Ember.js as of seven.1, all the template helpers have been organised into one checklist within the API documentation beneath @ember/helper, and the newly added key phrases are displayed. See emberjs/ember.js PR #21547 for the main points.
Ember CLI 7.2
Ember CLI 7.2 continues the work of pulling the blueprint system out of ember-cli in order that it may be utilized by extra fashionable tooling, improves an error message for blueprint authors, and provides a small nudge for addon authors to doc their public API.
Blueprint mannequin extracted into its personal package deal
Each ember generate command is powered by a Blueprint, and the code that is aware of how you can learn a blueprint, course of its templates, and write the outcomes into your mission has lived deep inside ember-cli because the starting. That has labored tremendous for a very long time, however ember-cli carries a variety of outdated, clunky equipment together with it, and we do not need each device that should run a blueprint to should rely upon all of ember-cli to do it.
Probably the most speedy motivation is the brand new ember-addon-blueprint. Fashionable v2 addons generated with that blueprint do not rely upon ember-cli in any respect, which is nice for set up measurement and ease, however it additionally signifies that for those who cd right into a freshly generated addon and run ember generate element there’s nothing there to generate it for you. In ember-cli 7.2 the core Blueprint mannequin has been moved right into a separate package deal, @ember-tooling/blueprint-model, that may be consumed by itself. This is step one in the direction of giving v2 addons their mills again while not having to pull ember-cli alongside for the trip.
This isn’t one thing that most individuals will work together with instantly, and ember-cli itself is now consuming the brand new package deal, so ember generate ought to behave precisely because it did earlier than. Should you do discover something completely different please open a problem.
Launched in ember-cli/ember-cli PR #10672
Higher error when a blueprint package deal is lacking the key phrase
For a package deal to be usable as a blueprint by ember new or ember set up, its package deal.json wants to incorporate ember-blueprint in its key phrases checklist. Beforehand, for those who forgot so as to add that key phrase, ember-cli would inform you that the package deal “shouldn’t be a legitimate Ember CLI blueprint” and go away you to determine why. The error message now tells you precisely what’s lacking. Not many individuals are writing customized blueprints, however for those who’re this can be a good little high quality of life enchancment.
Mounted in ember-cli/ember-cli PR #11027
Placeholder for documenting an addon’s public API
Increasingly addons are offering a top-level index.js so that customers can write import { MyComponent } from 'my-addon' reasonably than needing to know the interior path to each file. To encourage this, the README generated by the traditional addon blueprint now features a TODO part prompting you to doc every of your public exports: the import path, what it does, its parameters, and an instance of how you can use it.
Launched in ember-cli/ember-cli PR #11035
Inside enhancements
A big chunk of this launch was spent cleansing up ember-cli’s personal take a look at suite, together with updating fixturify-project throughout 5 main variations and fixing the assistance exams to cease counting on personal APIs. None of that adjustments something for folks utilizing ember-cli, however it makes the mission a lot more healthy for the following set of adjustments to the blueprint system.
Thank You!
As a community-driven open-source mission with an formidable scope, every of those releases serves as a reminder that the Ember mission wouldn’t have been doable with out your continued assist. We’re extraordinarily grateful to our contributors for his or her efforts.
