babel-plugin-ember-modules-api-polyfill

What is babel-plugin-ember-modules-api-polyfill?

The babel-plugin-ember-modules-api-polyfill package is a Babel plugin that allows developers to use the new JavaScript module API for Ember.js. It automatically transforms the new module syntax into the older global API, making it easier to adopt modern JavaScript practices while maintaining compatibility with existing Ember.js codebases.

What are babel-plugin-ember-modules-api-polyfill's main functionalities?

Transforming new module syntax to global API

This feature allows developers to use the new ES6 module syntax for importing Ember.js components, which the plugin then transforms into the older global API syntax. This makes it easier to write modern JavaScript while ensuring compatibility with older Ember.js versions.

import Component from '@ember/component';

export default Component.extend({
  // component logic
});

Automatic polyfilling

The plugin automatically polyfills the new module API, allowing developers to use modern import statements for Ember services, components, and other modules. This reduces boilerplate and improves code readability.

import { inject as service } from '@ember/service';

export default Component.extend({
  myService: service(),
  // component logic
});

Other packages similar to babel-plugin-ember-modules-api-polyfill

babel-plugin-transform-es2015-modules-commonjs

This Babel plugin transforms ES6 module syntax into CommonJS, which is widely used in Node.js environments. While it doesn't specifically target Ember.js, it provides similar functionality in terms of transforming modern JavaScript module syntax into a format compatible with older environments.

babel-plugin-module-resolver

This plugin allows developers to customize the resolution of module paths, making it easier to manage imports in large projects. While it doesn't specifically polyfill Ember.js modules, it offers similar benefits in terms of improving code organization and readability.

README

babel-plugin-ember-modules-api-polyfill

This plugin transforms Javscript modules API import statements back to the legacy "global" ember object syntax

Example

import { inject } from "@ember/service"

back to the legacy

const inject = Ember.inject.service

Installation

npm install --save babel-plugin-ember-modules-api-polyfill

Why

This plugin provides an API polyfill to allow ember addon authors to adopt the new JavaScript modules API whilst still maintaining backwards compatibility with older versions of Ember that do not support the new modules API.

The intention of this Babel plugin is to also allow for a transition period and allow applications to exist in a mixed state whilst transitioning from the old "global" ember object pattern, into the new modular pattern.

How

Using the ember-rfc176-data package, that contains the official mapping of old global object names to the new JS modules API import statements, addons that adopt the new API can be transpiled back to the legacy format if Ember-CLI detects that the host application ember version does not support the new modules API.

The plugin supports both default import Component from "@ember/component" and named import { inject } from "@ember/service" import statements, converting their syntax back to separate const variables within the source file. This transpilation is done at compile time by Ember CLI.

In order for ember addon developers to adopt this new API syntax, they must declare a dependency on ember-cli-babel:v6.6.0 or above in their package.json:

{
  "dependencies": {
    "ember-cli-babel": "^6.6.0"
  }
}