From f85b5d8e5b42b4faf4a2f350f648a214fdba46a5 Mon Sep 17 00:00:00 2001 From: Luca Greco Date: Thu, 12 Dec 2019 19:00:46 +0100 Subject: [PATCH] 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 --- Gruntfile.js | 10 ++- package.json | 10 +-- scripts/babel-transform-to-umd-module.js | 61 +++++++++++++++++++ .../import-as-es6-extension/background.html | 10 +++ .../import-as-es6-extension/background.js | 3 + .../import-as-es6-extension/content.js | 5 ++ .../import-as-es6-extension/manifest.json | 22 +++++++ .../integration/test-extensions-in-browser.js | 5 ++ test/mocha-babel.js | 8 ++- 9 files changed, 121 insertions(+), 13 deletions(-) create mode 100644 scripts/babel-transform-to-umd-module.js create mode 100644 test/fixtures/import-as-es6-extension/background.html create mode 100644 test/fixtures/import-as-es6-extension/background.js create mode 100644 test/fixtures/import-as-es6-extension/content.js create mode 100644 test/fixtures/import-as-es6-extension/manifest.json diff --git a/Gruntfile.js b/Gruntfile.js index c21e55d1..c3b34e09 100644 --- 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 index 1dd5e28e..f32aeace 100644 --- 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 new file mode 100644 index 00000000..8058cb6a --- /dev/null +++ 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 new file mode 100644 index 00000000..9b14a462 --- /dev/null +++ b/test/fixtures/import-as-es6-extension/background.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/test/fixtures/import-as-es6-extension/background.js b/test/fixtures/import-as-es6-extension/background.js new file mode 100644 index 00000000..69093aa5 --- /dev/null +++ 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 new file mode 100644 index 00000000..2662987f --- /dev/null +++ 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 new file mode 100644 index 00000000..2fd368f4 --- /dev/null +++ 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 index f675eb3c..68f5f44d 100644 --- 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 index a8c29691..d5a70123 100644 --- 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", + }, + }]], });