fix: Update babel deps to babel 7 (#214)

* fix: Update babel deps to babel 7 * chore: Replaced @babel/transfor-umd-modules with a small custom babel transformer script * test: Added minimal integration test as smoke test for importing polyfill as es6 module
mozilla · Dec 12, 2019 · f85b5d8 · f85b5d8
1 parent 2005a2c
commit f85b5d8
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 13 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -60,7 +60,7 @@ module.exports = function(grunt) {
         options: {
           babelrc: false,
           comments: false,
-          presets: ["babili"],
+          presets: ["minify"],
           sourceMap: true,
         },
         files: {
@@ -72,11 +72,9 @@ module.exports = function(grunt) {
           babelrc: false,
           comments: true,
           plugins: [
-            ["transform-es2015-modules-umd", {
-              globals: {
-                "webextension-polyfill": "browser",
-              },
-              exactGlobals: true,
+            ["./scripts/babel-transform-to-umd-module", {
+              globalName: "browser",
+              amdModuleName: "webextension-polyfill",
             }],
           ],
           sourceMap: true,

diff --git a/package.json b/package.json
@@ -17,12 +17,12 @@
   },
   "homepage": "https://github.com/mozilla/webextension-polyfill",
   "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/register": "^7.0.0",
     "async-wait-until": "^1.1.5",
-    "babel-core": "^6.26.3",
     "babel-eslint": "^10.0.3",
-    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
-    "babel-preset-babili": "^0.0.10",
-    "babel-preset-es2017": "^6.24.1",
+    "babel-preset-minify": "^0.5.1",
     "browserify": "^16.2.2",
     "chai": "^4.2.0",
     "chromedriver": "^78.0.1",
@@ -32,7 +32,7 @@
     "geckodriver": "^1.11.2",
     "global-replaceify": "^1.0.0",
     "grunt": "^1.0.1",
-    "grunt-babel": "^6.0.0",
+    "grunt-babel": "^8.0.0",
     "grunt-contrib-concat": "^1.0.1",
     "grunt-coveralls": "^2.0.0",
     "grunt-replace": "^1.0.1",

diff --git a/scripts/babel-transform-to-umd-module.js b/scripts/babel-transform-to-umd-module.js
@@ -0,0 +1,61 @@
+const {template, types} = require("@babel/core");
+
+const buildWrapper = template(`
+  (function (global, factory) {
+    if (typeof define === "function" && define.amd) {
+      define(AMD_MODULE_NAME, ["module"], factory);
+    } else if (typeof exports !== "undefined") {
+      factory(module);
+    } else {
+      var mod = { exports: {} };
+      factory(mod);
+      global.GLOBAL = mod.exports;
+    }
+  })(
+    typeof globalThis !== "undefined" ? globalThis
+      : typeof self !== "undefined" ? self
+      : this,
+    function(module) {
+    }
+  )
+`);
+
+module.exports = (api, options = {}) => {
+  api.assertVersion(7);
+
+  if (typeof options.globalName != "string") {
+    throw new Error("globalName option is mandatory");
+  }
+
+  if (typeof options.amdModuleName != "string") {
+    throw new Error("amdModuleName is mandatory");
+  }
+
+  return {
+    name: "transform-to-umd-module",
+
+    visitor: {
+      Program: {
+        exit(path) {
+          const {body, directives} = path.node;
+          path.node.directives = [];
+          path.node.body = [];
+
+          const umdWrapper = path.pushContainer(
+            "body",
+            buildWrapper({
+              AMD_MODULE_NAME: types.stringLiteral(options.amdModuleName),
+              GLOBAL: options.globalName,
+            })
+          )[0];
+          const umdFactory = umdWrapper
+            .get("expression.arguments")[1]
+            .get("body");
+
+          umdFactory.pushContainer("directives", directives);
+          umdFactory.pushContainer("body", body);
+        },
+      },
+    },
+  };
+};
diff --git a/test/fixtures/import-as-es6-extension/background.html b/test/fixtures/import-as-es6-extension/background.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang='en'>
+  <head>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <script type='module' src='browser-polyfill.js'></script>
+    <script type='module' src='background.js'></script>
+  </body>
+</html>
diff --git a/test/fixtures/import-as-es6-extension/background.js b/test/fixtures/import-as-es6-extension/background.js
@@ -0,0 +1,3 @@
+browser.runtime.onMessage.addListener(async (msg, sender) => {
+  return {bgReceived: msg};
+});
diff --git a/test/fixtures/import-as-es6-extension/content.js b/test/fixtures/import-as-es6-extension/content.js
@@ -0,0 +1,5 @@
+test("Test browser.runtime.onMessage on polyfill loaded as es6 module", async (t) => {
+  const msg = "send-message-to-background-page";
+  const res = await browser.runtime.sendMessage(msg);
+  t.deepEqual(res, {bgReceived: msg}, "Got the expected reply");
+});
diff --git a/test/fixtures/import-as-es6-extension/manifest.json b/test/fixtures/import-as-es6-extension/manifest.json
@@ -0,0 +1,22 @@
+{
+  "manifest_version": 2,
+  "name": "test-import-as-es6-module",
+  "version": "0.1",
+  "description": "test-import-as-es6-module",
+  "content_scripts": [
+    {
+      "matches": [
+        "http://localhost/*"
+      ],
+      "js": [
+        "browser-polyfill.js",
+        "tape.js",
+        "content.js"
+      ]
+    }
+  ],
+  "permissions": [],
+  "background": {
+    "page": "background.html"
+  }
+}
diff --git a/test/integration/test-extensions-in-browser.js b/test/integration/test-extensions-in-browser.js
@@ -2,6 +2,11 @@
 
 const {defineExtensionTests} = require("./setup");
 
+defineExtensionTests({
+  description: "polyfill imported as an ES6 module",
+  extensions: ["import-as-es6-extension"],
+});
+
 defineExtensionTests({
   description: "browser.runtime.onMessage/sendMessage",
   extensions: ["runtime-messaging-extension"],

diff --git a/test/mocha-babel.js b/test/mocha-babel.js
@@ -1,3 +1,7 @@
-require("babel-core/register")({
-  presets: ["es2017"],
+require("@babel/register")({
+  presets: [["@babel/env", {
+    targets: {
+      node: "current",
+    },
+  }]],
 });