babel-plugin-jsm-to-esmodules
v0.6.0
Published
Transforms imports and exports in Firefox .jsm to ES module syntax
Downloads
7,391
Readme
JSM to ES Module Babel Plugin
This module converts import and export statements in .jsm modules to ES modules. For example:
Source:
const {utils: Cu} = Components;
const {Bar, Baz} = Cu.import("resource://activity-stream/addon/barbaz.jsm", {});
function Stuff() {
return 123;
}
this.Whatever = {};
this.Stuff = Stuff;
var EXPORTED_SYMBOLS = ["Stuff", "Whatever"];Compiles to:
import {Bar, Baz} from "addon/barbaz.js";
export function Stuff() {
return 123;
}
export var Whatever = {};Caveats / Limitations
Use top-level imports and exports only
Because import and export statements in ES modules must be statically analyzable, this plugin will only transform
top level Cu.import / EXPORTED_SYMBOLS. Example:
Good:
const {utils: Cu} = Components;
const {Bar} = Cu.import("resource://foo/Bar.jsm", {});
this.Baz = 123;
this.EXPORTED_SYMBOLS = ["Baz"];Bad:
const {utils: Cu} = Components;
const root = this;
function innerFunction() {
// This won't get converted because it's inside innerFunction
const {Bar} = Cu.import("resource://foo/Bar.jsm", {});
// Don't do this either
root.Baz = 123;
}
var EXPORTED_SYMBOLS = ["Baz"];Don't alias this or dynamically add items to var EXPORTED_SYMBOLS when exporting
You should only declare this.EXPORTED_SYMBOLS once in the top-level scope, and it should not be modified.
Good:
function Foo() {...}
this.Foo = Foo;
this.Bar = 123;
this.EXPORTED_SYMBOLS = ["Foo", "Bar"];Bad:
const root = this;
const Foo = 123;
root.EXPORTED_SYMBOLS = ["Foo"]; // Don't alias this when exporting
root.Bar = 456;
root.EXPORTED_SYMBOLS.push("Bar"); // Don't do this
Don't reassign Components.utils.import
Assigning variables to Components or Components.utils is OK, but don't assign the .import;
const C = Components; // OK
const {utils: Cu} = Components; // OK
const u = Components.utils // OK
const {import} = Cu; // Don't do this
const i = Components.utils.import // Don't do this
Options
basePath
Defaults to /^resource:\/\/. A RegEx or String that tests for which import paths to rewrite.
replace
Defaults to false. Remove the basePath component of the import string?
e.g. If the basePath is /^resource:\/\/, resource://activity-stream/foo.js will be rewritten to activity-stream/foo.js.
"plugins": ["transform-react-jsx", {basePath: "resource://activity-stream/"}],removeOtherImports
Defaults to false. Should we remove non-matching imports?
