Add @babel/plugin-proposal-dynamic-import to @babel/preset-env (#10109)

* Add proposal-dynamic-import to preset-env

* Use proper capitalization

packages/babel-plugin-proposal-dynamic-import/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@babel/plugin-proposal-dynamic-import",
-  "version": "7.4.0",
+  "version": "7.5.0",
   "description": "Transform import() expressions",
   "repository": "https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-dynamic-import",
   "license": "MIT",

packages/babel-preset-env-standalone/package.json

@@ -9,6 +9,7 @@
     "src"
   ],
   "devDependencies": {
+    "@babel/plugin-proposal-dynamic-import": "^7.5.0",
     "@babel/plugin-proposal-json-strings": "^7.0.0",
     "@babel/plugin-transform-named-capturing-groups-regex": "^7.4.5",
     "@babel/plugin-transform-new-target": "^7.4.4",

packages/babel-preset-env-standalone/src/available-plugins.js

@@ -4,6 +4,7 @@ const notIncludedPlugins = {
   "transform-named-capturing-groups-regex": require("@babel/plugin-transform-named-capturing-groups-regex"),
   "transform-new-target": require("@babel/plugin-transform-new-target"),
   "proposal-json-strings": require("@babel/plugin-proposal-json-strings"),
+  "proposal-dynamic-import": require("@babel/plugin-proposal-dynamic-import"),
 };
 
 Object.keys(notIncludedPlugins).forEach(pluginName => {

packages/babel-preset-env/package.json

@@ -17,11 +17,13 @@
     "@babel/helper-module-imports": "^7.0.0",
     "@babel/helper-plugin-utils": "^7.0.0",
     "@babel/plugin-proposal-async-generator-functions": "^7.2.0",
+    "@babel/plugin-proposal-dynamic-import": "^7.5.0",
     "@babel/plugin-proposal-json-strings": "^7.2.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
     "@babel/plugin-proposal-optional-catch-binding": "^7.2.0",
     "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
     "@babel/plugin-syntax-async-generators": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-syntax-json-strings": "^7.2.0",
     "@babel/plugin-syntax-object-rest-spread": "^7.2.0",
     "@babel/plugin-syntax-optional-catch-binding": "^7.2.0",

packages/babel-preset-env/src/available-plugins.js

@@ -2,11 +2,13 @@
 
 export default {
   "syntax-async-generators": require("@babel/plugin-syntax-async-generators"),
+  "syntax-dynamic-import": require("@babel/plugin-syntax-dynamic-import"),
   "syntax-json-strings": require("@babel/plugin-syntax-json-strings"),
   "syntax-object-rest-spread": require("@babel/plugin-syntax-object-rest-spread"),
   "syntax-optional-catch-binding": require("@babel/plugin-syntax-optional-catch-binding"),
   "transform-async-to-generator": require("@babel/plugin-transform-async-to-generator"),
   "proposal-async-generator-functions": require("@babel/plugin-proposal-async-generator-functions"),
+  "proposal-dynamic-import": require("@babel/plugin-proposal-dynamic-import"),
   "proposal-json-strings": require("@babel/plugin-proposal-json-strings"),
   "transform-arrow-functions": require("@babel/plugin-transform-arrow-functions"),
   "transform-block-scoped-functions": require("@babel/plugin-transform-block-scoped-functions"),

packages/babel-preset-env/src/index.js

@@ -60,6 +60,10 @@ function supportsStaticESM(caller) {
   return !!(caller && caller.supportsStaticESM);
 }
 
+function supportsDynamicImport(caller) {
+  return !!(caller && caller.supportsDynamicImport);
+}
+
 export default declare((api, opts) => {
   api.assertVersion(7);
 
@@ -124,16 +128,37 @@ export default declare((api, opts) => {
   const plugins = [];
   const pluginUseBuiltIns = useBuiltIns !== false;
 
-  if (
-    modules !== false &&
-    moduleTransformations[modules] &&
+  if (modules !== false && moduleTransformations[modules]) {
     // TODO: Remove the 'api.caller' check eventually. Just here to prevent
     // unnecessary breakage in the short term for users on older betas/RCs.
-    (modules !== "auto" || !api.caller || !api.caller(supportsStaticESM))
-  ) {
-    // NOTE: not giving spec here yet to avoid compatibility issues when
-    // transform-modules-commonjs gets its spec mode
-    plugins.push([getPlugin(moduleTransformations[modules]), { loose }]);
+    const shouldTransformESM =
+      modules !== "auto" || !api.caller || !api.caller(supportsStaticESM);
+    const shouldTransformDynamicImport =
+      modules !== "auto" || !api.caller || !api.caller(supportsDynamicImport);
+
+    if (shouldTransformESM) {
+      // NOTE: not giving spec here yet to avoid compatibility issues when
+      // transform-modules-commonjs gets its spec mode
+      plugins.push([getPlugin(moduleTransformations[modules]), { loose }]);
+    }
+
+    if (
+      shouldTransformDynamicImport &&
+      shouldTransformESM &&
+      modules !== "umd"
+    ) {
+      plugins.push([getPlugin("proposal-dynamic-import"), { loose }]);
+    } else {
+      if (shouldTransformDynamicImport) {
+        console.warn(
+          "Dynamic import can only be supported when transforming ES modules" +
+            " to AMD, CommonJS or SystemJS. Only the parser plugin will be enabled.",
+        );
+      }
+      plugins.push(getPlugin("syntax-dynamic-import"));
+    }
+  } else {
+    plugins.push(getPlugin("syntax-dynamic-import"));
   }
 
   transformations.forEach(pluginName =>

packages/babel-preset-env/test/fixtures/dynamic-import/auto-esm-supported-import-supported/input.mjs

@@ -0,0 +1 @@
+import("foo");

packages/babel-preset-env/test/fixtures/dynamic-import/auto-esm-supported-import-supported/options.json

@@ -0,0 +1,8 @@
+{
+  "caller": {
+    "name": "test-fixture",
+    "supportsStaticESM": true,
+    "supportsDynamicImport": true
+  },
+  "presets": ["env"]
+}

packages/babel-preset-env/test/fixtures/dynamic-import/auto-esm-supported-import-supported/output.mjs

@@ -0,0 +1 @@
+import("foo");

packages/babel-preset-env/test/fixtures/dynamic-import/auto-esm-supported-import-unsupported/input.mjs

@@ -0,0 +1 @@
+import("foo"); // warns

packages/babel-preset-env/test/fixtures/dynamic-import/auto-esm-supported-import-unsupported/options.json

@@ -0,0 +1,8 @@
+{
+  "caller": {
+    "name": "test-fixture",
+    "supportsStaticESM": true,
+    "supportsDynamicImport": false
+  },
+  "presets": ["env"]
+}

packages/babel-preset-env/test/fixtures/dynamic-import/auto-esm-supported-import-unsupported/output.mjs

@@ -0,0 +1 @@
+import("foo"); // warns

packages/babel-preset-env/test/fixtures/dynamic-import/auto-esm-unsupported-import-unsupported/input.mjs

@@ -0,0 +1 @@
+import("foo");

packages/babel-preset-env/test/fixtures/dynamic-import/auto-esm-unsupported-import-unsupported/options.json

@@ -0,0 +1,8 @@
+{
+  "caller": {
+    "name": "test-fixture",
+    "supportsStaticESM": false,
+    "supportsSynamicImport": false
+  },
+  "presets": ["env"]
+}

packages/babel-preset-env/test/fixtures/dynamic-import/auto-esm-unsupported-import-unsupported/output.js

@@ -0,0 +1,7 @@
+"use strict";
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+
+Promise.resolve().then(function () {
+  return _interopRequireWildcard(require("foo"));
+});

packages/babel-preset-env/test/fixtures/dynamic-import/modules-amd/input.js

@@ -0,0 +1 @@
+import("foo");

packages/babel-preset-env/test/fixtures/dynamic-import/modules-amd/options.json

@@ -0,0 +1,3 @@
+{
+  "presets": [["env", { "modules": "amd" }]]
+}

packages/babel-preset-env/test/fixtures/dynamic-import/modules-amd/output.js

@@ -0,0 +1,9 @@
+define(["require"], function (_require) {
+  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+
+  new Promise(function (_resolve, _reject) {
+    return _require(["foo"], function (imported) {
+      return _resolve(_interopRequireWildcard(imported));
+    }, _reject);
+  });
+});

packages/babel-preset-env/test/fixtures/dynamic-import/modules-cjs/input.mjs

@@ -0,0 +1 @@
+import("foo");

packages/babel-preset-env/test/fixtures/dynamic-import/modules-cjs/options.json

@@ -0,0 +1,3 @@
+{
+  "presets": [["env", { "modules": "cjs" }]]
+}

packages/babel-preset-env/test/fixtures/dynamic-import/modules-cjs/output.js

@@ -0,0 +1,7 @@
+"use strict";
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+
+Promise.resolve().then(function () {
+  return _interopRequireWildcard(require("foo"));
+});

packages/babel-preset-env/test/fixtures/dynamic-import/modules-false/input.mjs

@@ -0,0 +1 @@
+import("foo");

packages/babel-preset-env/test/fixtures/dynamic-import/modules-false/options.json

@@ -0,0 +1,3 @@
+{
+  "presets": [["env", { "modules": false }]]
+}

packages/babel-preset-env/test/fixtures/dynamic-import/modules-false/output.mjs

@@ -0,0 +1 @@
+import("foo");

packages/babel-preset-env/test/fixtures/dynamic-import/modules-systemjs/input.mjs

@@ -0,0 +1 @@
+import("foo");

packages/babel-preset-env/test/fixtures/dynamic-import/modules-systemjs/options.json

@@ -0,0 +1,3 @@
+{
+  "presets": [["env", { "modules": "systemjs" }]]
+}

packages/babel-preset-env/test/fixtures/dynamic-import/modules-systemjs/output.mjs

@@ -0,0 +1,10 @@
+System.register([], function (_export, _context) {
+  "use strict";
+
+  return {
+    setters: [],
+    execute: function () {
+      _context["import"]("foo");
+    }
+  };
+});

packages/babel-preset-env/test/fixtures/dynamic-import/modules-umd/input.mjs

@@ -0,0 +1 @@
+import("foo"); // warns

packages/babel-preset-env/test/fixtures/dynamic-import/modules-umd/options.json

@@ -0,0 +1,3 @@
+{
+  "presets": [["env", { "modules": "umd" }]]
+}

packages/babel-preset-env/test/fixtures/dynamic-import/modules-umd/output.js

@@ -0,0 +1,17 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define([], factory);
+  } else if (typeof exports !== "undefined") {
+    factory();
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory();
+    global.input = mod.exports;
+  }
+})(this, function () {
+  "use strict";
+
+  import("foo"); // warns
+});