feat(moduleFormat): added new option

americanexpress · Feb 8, 2022 · 6c05915 · 6c05915
1 parent 277b5d5
commit 6c05915
Show file tree

Hide file tree

Showing 4 changed files with 169 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -37,7 +37,7 @@ npm install --save-dev babel-preset-amex
 
 #### Options
 
-By default `babel-preset-amex` will transpile for the "last 2 versions" and "not dead" browsers.
+By default `babel-preset-amex` will transpile for the "last 2 versions", "not dead" browsers, and CommonJS module syntax.
 
 ```json
 {
@@ -46,13 +46,15 @@ By default `babel-preset-amex` will transpile for the "last 2 versions" and "not
     {
       "serverOnly": true,
       "modern": true,
+      "moduleFormat": "esm"
     }
   ]]
 }
 ```
 
 `serverOnly` - Will transpile only for node.
 `modern` - Will transpile for [common browsers](./browserlist.js) n-1.
+`moduleFormat` - Will transpile to ECMAScript module syntax. Any string other than `"esm"` will transpile to CommonJS module syntax.
 
 #### Customizing Babel Config
 

diff --git a/__tests__/__snapshots__/index.spec.js.snap b/__tests__/__snapshots__/index.spec.js.snap
@@ -37,6 +37,148 @@ Object {
 }
 `;
 
+exports[`babel-preset-amex moduleFormat allows an esm option 1`] = `
+Object {
+  "plugins": Array [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-optional-chaining",
+    "babel-plugin-transform-react-remove-prop-types",
+  ],
+  "presets": Array [
+    Array [
+      Object {
+        "default": "@babel/preset-env",
+      },
+      Object {
+        "modules": false,
+        "targets": Object {
+          "browsers": Array [
+            "last 2 versions",
+            "not dead",
+          ],
+          "node": "current",
+        },
+      },
+    ],
+    Array [
+      Object {
+        "default": "@babel/preset-react",
+      },
+      Object {},
+    ],
+  ],
+}
+`;
+
+exports[`babel-preset-amex moduleFormat allows other options to be passed to preset-env while allowing esm option 1`] = `
+Object {
+  "plugins": Array [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-optional-chaining",
+    "babel-plugin-transform-react-remove-prop-types",
+  ],
+  "presets": Array [
+    Array [
+      Object {
+        "default": "@babel/preset-env",
+      },
+      Object {
+        "exclude": Array [
+          "@babel/plugin-transform-regenerator",
+        ],
+        "modules": false,
+        "targets": Object {
+          "browsers": Array [
+            "last 2 versions",
+            "not dead",
+          ],
+          "node": "current",
+        },
+      },
+    ],
+    Array [
+      Object {
+        "default": "@babel/preset-react",
+      },
+      Object {},
+    ],
+  ],
+}
+`;
+
+exports[`babel-preset-amex moduleFormat does nothing when an unknown option is provided 1`] = `
+Object {
+  "plugins": Array [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-optional-chaining",
+    "babel-plugin-transform-react-remove-prop-types",
+  ],
+  "presets": Array [
+    Array [
+      Object {
+        "default": "@babel/preset-env",
+      },
+      Object {
+        "targets": Object {
+          "browsers": Array [
+            "last 2 versions",
+            "not dead",
+          ],
+          "node": "current",
+        },
+      },
+    ],
+    Array [
+      Object {
+        "default": "@babel/preset-react",
+      },
+      Object {},
+    ],
+  ],
+}
+`;
+
+exports[`babel-preset-amex moduleFormat overrides an existing modules setting when esm option is used 1`] = `
+Object {
+  "plugins": Array [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-optional-chaining",
+    "babel-plugin-transform-react-remove-prop-types",
+  ],
+  "presets": Array [
+    Array [
+      Object {
+        "default": "@babel/preset-env",
+      },
+      Object {
+        "modules": false,
+        "targets": Object {
+          "browsers": Array [
+            "last 2 versions",
+            "not dead",
+          ],
+          "node": "current",
+        },
+      },
+    ],
+    Array [
+      Object {
+        "default": "@babel/preset-react",
+      },
+      Object {},
+    ],
+  ],
+}
+`;
+
 exports[`babel-preset-amex returns modern preset for env and option 1`] = `
 Object {
   "plugins": Array [

diff --git a/__tests__/index.spec.js b/__tests__/index.spec.js
@@ -74,4 +74,26 @@ describe('babel-preset-amex', () => {
     expect(preset().plugins).toEqual(expect.any(Array));
     expect(preset().plugins.length).toEqual(4);
   });
+
+  describe('moduleFormat', () => {
+    it('allows an esm option', () => {
+      process.env.NODE_ENV = 'production';
+      expect(preset({}, { moduleFormat: 'esm' })).toMatchSnapshot();
+    });
+
+    it('overrides an existing modules setting when esm option is used', () => {
+      process.env.NODE_ENV = 'production';
+      expect(preset({}, { 'preset-env': { modules: true }, moduleFormat: 'esm' })).toMatchSnapshot();
+    });
+
+    it('allows other options to be passed to preset-env while allowing esm option', () => {
+      process.env.NODE_ENV = 'production';
+      expect(preset({}, { 'preset-env': { exclude: ['@babel/plugin-transform-regenerator'] }, moduleFormat: 'esm' })).toMatchSnapshot();
+    });
+
+    it('does nothing when an unknown option is provided', () => {
+      process.env.NODE_ENV = 'production';
+      expect(preset({}, { moduleFormat: 'cjs' })).toMatchSnapshot();
+    });
+  });
 });
diff --git a/index.js b/index.js
@@ -47,7 +47,8 @@ module.exports = (api = {}, opts = {}) => {
   const presetEnvOptions = Object.assign(
     {},
     { targets },
-    opts['preset-env']
+    opts['preset-env'],
+    opts.moduleFormat === 'esm' && { modules: false }
   );
 
   const reactPresetOptions = Object.assign({}, opts['react-preset']);