Add new transformer for MDX v2

packages/core/integration-tests/test/mdx-2-config.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/config-default",
+  "optimizers": {
+    "*.mdx": ["@parcel/transformer-mdx-2"]
+  }
+}

packages/core/integration-tests/test/mdx-2.js

@@ -0,0 +1,30 @@
+// @flow
+
+const assert = require('assert');
+const path = require('path');
+const {bundle, run} = require('@parcel/test-utils');
+
+describe('mdx', function () {
+  it('should support bundling MDX', async function () {
+    let b = await bundle(path.join(__dirname, '/integration/mdx/index.mdx'), {
+      config: require.resolve('./mdx-2-config.json'),
+    });
+
+    let output = await run(b);
+    assert.equal(typeof output.default, 'function');
+    assert(output.default.isMDXComponent);
+  });
+
+  it('should support bundling MDX with React 17', async function () {
+    let b = await bundle(
+      path.join(__dirname, '/integration/mdx-react-17/index.mdx'),
+      {
+        config: require.resolve('./mdx-2-config.json'),
+      },
+    );
+
+    let output = await run(b);
+    assert.equal(typeof output.default, 'function');
+    assert(output.default.isMDXComponent);
+  });
+});

packages/transformers/mdx-2/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@parcel/transformer-mdx-2",
+  "version": "2.8.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/parcel"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/parcel-bundler/parcel.git"
+  },
+  "main": "lib/MDXTransformer.js",
+  "source": "src/MDXTransformer.js",
+  "engines": {
+    "node": ">= 12.0.0",
+    "parcel": "2.0.0 - 2.7.0"
+  },
+  "dependencies": {
+    "@mdx-js/mdx": "^2.1.5",
+    "@parcel/plugin": "2.8.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  }
+}

packages/transformers/mdx-2/src/MDXTransformer.js

@@ -0,0 +1,41 @@
+const {Transformer} = require('@parcel/plugin');
+
+module.exports = new Transformer({
+  async loadConfig({config}) {
+    // config.getConfig only works with CJS
+    let configFile = await config.getConfig(['.mdxrc.js', '.mdxrc.cjs'], {
+      packageKey: 'mdx',
+    });
+    if (!configFile) {
+      return () => {};
+    }
+
+    config.invalidateOnFileChange(configFile.filePath);
+    // .mdxrc can either exports an object (MDX config), or a function that returns the config
+    if (typeof configFile.contents === 'function') {
+      return configFile.contents;
+    }
+    return () => configFile.contents;
+  },
+
+  async transform({asset, config}) {
+    let code = await asset.getCode();
+
+    const {compile} = await import('@mdx-js/mdx');
+
+    // @mdx-js/mdx is a ESM package, so we need to use `import()` to make it work in CJS envs
+    let compiled = await compile(code, {
+      ...(await config()),
+
+      // Those don't have to be configurable
+      useDynamicImport: false,
+      format: 'mdx',
+      outputFormat: 'program',
+    });
+
+    asset.setCode(compiled.toString('utf-8'));
+    asset.type = 'js';
+
+    return [asset];
+  },
+});