From c978d7ff657b1792cc71651f7229f7e30974b9a7 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 13 Dec 2022 16:45:17 +0100
Subject: [PATCH] refactor to transpile JSX at the end of the process, ensuring
 a single JSX runtime.

default jsxRuntime = 'automatic'
---
 .github/ISSUE_TEMPLATE/bug_report.md      |    2 +-
 .github/ISSUE_TEMPLATE/feature_request.md |    1 -
 .github/workflows/release.yml             |    2 +-
 .github/workflows/test.yml                |    1 -
 .storybook/preview.js                     |    4 +-
 .vscode/settings.json                     |    2 +-
 src/index.test.ts                         | 1090 ++++++++++++++-------
 src/index.ts                              |   89 +-
 src/jsx.ts                                |   34 +
 src/sb-mdx-plugin.ts                      |    4 -
 src/types.ts                              |   19 +
 tsconfig.json                             |    6 +-
 12 files changed, 886 insertions(+), 368 deletions(-)
 create mode 100644 src/jsx.ts
 create mode 100644 src/types.ts

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 891c617..8786bfe 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -4,7 +4,6 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
@@ -12,6 +11,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
index bbcbbe7..2f28cea 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 2b0f6e2..969bdb4 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -25,4 +25,4 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          yarn release
\ No newline at end of file
+          yarn release
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 040e39d..ffb9b94 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -19,4 +19,3 @@ jobs:
       - name: Run tests
         run: |
           yarn test
-
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 48afd56..d391458 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,9 +1,9 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
\ No newline at end of file
+};
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 66d2c07..6534f37 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
   "deepscan.enable": true
-}
\ No newline at end of file
+}
diff --git a/src/index.test.ts b/src/index.test.ts
index 654367e..d105acc 100644
--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -1,7 +1,6 @@
 import { dedent } from 'ts-dedent';
 import prettier from 'prettier';
-import * as t from '@babel/types';
-import { compileSync, compile, genBabel, SEPARATOR, wrapperJs } from './index';
+import { compileSync, compile, SEPARATOR, wrapperJs } from './index';
 
 // @ts-ignore
 expect.addSnapshotSerializer({
@@ -25,38 +24,6 @@ const clean = (mdx: string) => {
     .trim();
 };
 
-const mockProcess = (root: t.File): t.ExpressionStatement[] => {
-  const statements: t.ExpressionStatement[] = [];
-
-  root.program.body.forEach((statement) => {
-    if (t.isExpressionStatement(statement) && t.isJSXFragment(statement.expression)) {
-      statements.push(statement);
-    }
-  });
-
-  return statements;
-};
-
-const mockPlugin = (store: any) => (root: any) => {
-  const babel = genBabel(store, root);
-
-  store.exports = mockProcess(babel);
-
-  return root;
-};
-
-const mockMdxSync = (mdx: string) => {
-  const { compileSync } = require('@mdx-js/mdx');
-  const { toEstree } = require('hast-util-to-estree');
-
-  const store = { exports: [] as t.ExpressionStatement[], toEstree };
-  compileSync(mdx, {
-    rehypePlugins: [[mockPlugin, store]],
-  });
-
-  return store.exports;
-};
-
 describe('mdx2', () => {
   it('works', () => {
     const input = dedent`
@@ -70,11 +37,24 @@ describe('mdx2', () => {
     `;
     // @ts-ignore
     expect(clean(input)).toMatchInlineSnapshot(`
-      export const foo = () => 'bar';
-      foo.storyName = 'foo';
-      foo.parameters = { storySource: { source: '"bar"' } };
+      const foo = () => 'bar';
 
-      const componentMeta = { title: 'foobar', tags: ['mdx'], includeStories: ['foo'] };
+      exports.foo = foo;
+      foo.storyName = 'foo';
+      foo.parameters = {
+        storySource: {
+          source: '"bar"',
+        },
+      };
+      const componentMeta = {
+        title: 'foobar',
+        tags: ['mdx'],
+        includeStories: ['foo'],
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -85,7 +65,15 @@ describe('mdx2', () => {
 
         {3 + 3}
       `)
-    ).toMatchInlineSnapshot(`const componentMeta = { includeStories: [] };`);
+    ).toMatchInlineSnapshot(`
+      const componentMeta = {
+        includeStories: [],
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
+    `);
   });
 });
 
@@ -102,54 +90,79 @@ describe('full snapshots', () => {
     `;
     // @ts-ignore
     expect(compileSync(input)).toMatchInlineSnapshot(`
-/*@jsxRuntime automatic @jsxImportSource react*/
-import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
-function MDXContent(props = {}) {
-  const {wrapper: MDXLayout} = props.components || ({});
-  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
-    children: _jsx(_createMdxContent, {})
-  })) : _createMdxContent();
-  function _createMdxContent() {
-    const _components = Object.assign({
-      h1: "h1",
-      p: "p"
-    }, props.components), {Meta, Story} = _components;
-    if (!Meta) _missingMdxReference("Meta", true);
-    if (!Story) _missingMdxReference("Story", true);
-    return _jsxs(_Fragment, {
-      children: [_jsx(_components.h1, {
-        children: "hello"
-      }), "\\n", _jsx(Meta, {
-        title: "foobar"
-      }), "\\n", _jsxs(_components.p, {
-        children: ["world ", 2 + 1]
-      }), "\\n", _jsx(Story, {
-        name: "foo",
-        children: "bar"
-      })]
-    });
-  }
-}
-function _missingMdxReference(id, component) {
-  throw new Error("Expected " + (component ? "component" : "object") + " \`" + id + "\` to be defined: you likely forgot to import, pass, or provide it.");
-}
-// =========
-export const foo = () => (
-          "bar"
-        );
-foo.storyName = 'foo';
-foo.parameters = { storySource: { source: '\\"bar\\"' } };
-
-const componentMeta = { title: 'foobar', tags: ['mdx'], includeStories: ["foo"],  };
-
-componentMeta.parameters = componentMeta.parameters || {};
-componentMeta.parameters.docs = {
-  ...(componentMeta.parameters.docs || {}),
-  page: MDXContent,
-};
+      "use strict";
 
-export default componentMeta;
-`);
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.default = exports.foo = void 0;
+
+      var _react = require("@mdx-js/react");
+
+      var _jsxRuntime = require("react/jsx-runtime");
+
+      function MDXContent(props = {}) {
+        const {
+          wrapper: MDXLayout
+        } = Object.assign({}, (0, _react.useMDXComponents)(), props.components);
+        return MDXLayout ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MDXLayout, { ...props,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_createMdxContent, {})
+        }) : _createMdxContent();
+
+        function _createMdxContent() {
+          const _components = Object.assign({
+            h1: "h1",
+            p: "p"
+          }, (0, _react.useMDXComponents)(), props.components),
+                {
+            Meta,
+            Story
+          } = _components;
+
+          if (!Meta) _missingMdxReference("Meta", true);
+          if (!Story) _missingMdxReference("Story", true);
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.h1, {
+              children: "hello"
+            }), "\\n", /*#__PURE__*/(0, _jsxRuntime.jsx)(Meta, {
+              title: "foobar"
+            }), "\\n", /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.p, {
+              children: ["world ", 2 + 1]
+            }), "\\n", /*#__PURE__*/(0, _jsxRuntime.jsx)(Story, {
+              name: "foo",
+              children: "bar"
+            })]
+          });
+        }
+      }
+
+      function _missingMdxReference(id, component) {
+        throw new Error("Expected " + (component ? "component" : "object") + " \`" + id + "\` to be defined: you likely forgot to import, pass, or provide it.");
+      }
+      /* ========= */
+
+
+      const foo = () => "bar";
+
+      exports.foo = foo;
+      foo.storyName = 'foo';
+      foo.parameters = {
+        storySource: {
+          source: '\\"bar\\"'
+        }
+      };
+      const componentMeta = {
+        title: 'foobar',
+        tags: ['mdx'],
+        includeStories: ["foo"]
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}),
+        page: MDXContent
+      };
+      var _default = componentMeta;
+      exports.default = _default;
+    `);
   });
   it('compile', async () => {
     const input = dedent`
@@ -163,55 +176,95 @@ export default componentMeta;
     `;
     // @ts-ignore
     expect(await compile(input)).toMatchInlineSnapshot(`
-/*@jsxRuntime automatic @jsxImportSource react*/
-import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
-import {useMDXComponents as _provideComponents} from "@mdx-js/react";
-function MDXContent(props = {}) {
-  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
-  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
-    children: _jsx(_createMdxContent, {})
-  })) : _createMdxContent();
-  function _createMdxContent() {
-    const _components = Object.assign({
-      h1: "h1",
-      p: "p"
-    }, _provideComponents(), props.components), {Meta, Story} = _components;
-    if (!Meta) _missingMdxReference("Meta", true);
-    if (!Story) _missingMdxReference("Story", true);
-    return _jsxs(_Fragment, {
-      children: [_jsx(_components.h1, {
-        children: "hello"
-      }), "\\n", _jsx(Meta, {
-        title: "foobar"
-      }), "\\n", _jsxs(_components.p, {
-        children: ["world ", 2 + 1]
-      }), "\\n", _jsx(Story, {
-        name: "foo",
-        children: "bar"
-      })]
-    });
-  }
-}
-function _missingMdxReference(id, component) {
-  throw new Error("Expected " + (component ? "component" : "object") + " \`" + id + "\` to be defined: you likely forgot to import, pass, or provide it.");
-}
-// =========
-export const foo = () => (
-          "bar"
-        );
-foo.storyName = 'foo';
-foo.parameters = { storySource: { source: '\\"bar\\"' } };
-
-const componentMeta = { title: 'foobar', tags: ['mdx'], includeStories: ["foo"],  };
-
-componentMeta.parameters = componentMeta.parameters || {};
-componentMeta.parameters.docs = {
-  ...(componentMeta.parameters.docs || {}),
-  page: MDXContent,
-};
+      "use strict";
 
-export default componentMeta;
-`);
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.default = exports.foo = void 0;
+
+      var _react = require("@mdx-js/react");
+
+      var _jsxRuntime = require("react/jsx-runtime");
+
+      function MDXContent(props = {}) {
+        const {
+          wrapper: MDXLayout
+        } = Object.assign({}, (0, _react.useMDXComponents)(), props.components);
+        return MDXLayout ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MDXLayout, { ...props,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_createMdxContent, {})
+        }) : _createMdxContent();
+
+        function _createMdxContent() {
+          const _components = Object.assign({
+            h1: "h1",
+            p: "p"
+          }, (0, _react.useMDXComponents)(), props.components),
+                {
+            Meta,
+            Story
+          } = _components;
+
+          if (!Meta) _missingMdxReference("Meta", true);
+          if (!Story) _missingMdxReference("Story", true);
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.h1, {
+              children: "hello"
+            }), "\\n", /*#__PURE__*/(0, _jsxRuntime.jsx)(Meta, {
+              title: "foobar"
+            }), "\\n", /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.p, {
+              children: ["world ", 2 + 1]
+            }), "\\n", /*#__PURE__*/(0, _jsxRuntime.jsx)(Story, {
+              name: "foo",
+              children: "bar"
+            })]
+          });
+        }
+      }
+
+      function _missingMdxReference(id, component) {
+        throw new Error("Expected " + (component ? "component" : "object") + " \`" + id + "\` to be defined: you likely forgot to import, pass, or provide it.");
+      }
+      /* ========= */
+
+
+      const foo = () => "bar";
+
+      exports.foo = foo;
+      foo.storyName = 'foo';
+      foo.parameters = {
+        storySource: {
+          source: '\\"bar\\"'
+        }
+      };
+      const componentMeta = {
+        title: 'foobar',
+        tags: ['mdx'],
+        includeStories: ["foo"]
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}),
+        page: MDXContent
+      };
+      var _default = componentMeta;
+      exports.default = _default;
+    `);
+  });
+  it('sync & async should match', async () => {
+    const input = dedent`
+    # hello
+
+    <Meta title="foobar" />
+
+    world {2 + 1}
+
+    <Story name="foo">bar</Story>
+  `;
+    // @ts-ignore
+    const ou1 = compileSync(input);
+    const ou2 = await compile(input);
+
+    expect(ou1).toEqual(ou2);
   });
 
   it('canvas with story', () => {
@@ -227,46 +280,68 @@ export default componentMeta;
       </Canvas>
     `;
     expect(compileSync(input)).toMatchInlineSnapshot(`
-/*@jsxRuntime automatic @jsxImportSource react*/
-import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
-import {Canvas, Meta, Story} from '@storybook/addon-docs';
-function MDXContent(props = {}) {
-  const {wrapper: MDXLayout} = props.components || ({});
-  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
-    children: _jsx(_createMdxContent, {})
-  })) : _createMdxContent();
-  function _createMdxContent() {
-    return _jsxs(_Fragment, {
-      children: [_jsx(Meta, {
-        title: "MDX/Badge"
-      }), "\\n", _jsx(Canvas, {
-        children: _jsx(Story, {
-          name: "foo",
-          children: _jsx("div", {
-            children: "I'm a story"
-          })
-        })
-      })]
-    });
-  }
-}
-// =========
-export const foo = () => (
-          <div>{"I'm a story"}</div>
-        );
-foo.storyName = 'foo';
-foo.parameters = { storySource: { source: '<div>{\\"I\\'m a story\\"}</div>' } };
-
-const componentMeta = { title: 'MDX/Badge', tags: ['mdx'], includeStories: ["foo"],  };
-
-componentMeta.parameters = componentMeta.parameters || {};
-componentMeta.parameters.docs = {
-  ...(componentMeta.parameters.docs || {}),
-  page: MDXContent,
-};
+      "use strict";
 
-export default componentMeta;
-`);
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.default = exports.foo = void 0;
+
+      var _react = require("@mdx-js/react");
+
+      var _addonDocs = require("@storybook/addon-docs");
+
+      var _jsxRuntime = require("react/jsx-runtime");
+
+      function MDXContent(props = {}) {
+        const {
+          wrapper: MDXLayout
+        } = Object.assign({}, (0, _react.useMDXComponents)(), props.components);
+        return MDXLayout ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MDXLayout, { ...props,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_createMdxContent, {})
+        }) : _createMdxContent();
+
+        function _createMdxContent() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_addonDocs.Meta, {
+              title: "MDX/Badge"
+            }), "\\n", /*#__PURE__*/(0, _jsxRuntime.jsx)(_addonDocs.Canvas, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_addonDocs.Story, {
+                name: "foo",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: "I'm a story"
+                })
+              })
+            })]
+          });
+        }
+      }
+      /* ========= */
+
+
+      const foo = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: "I'm a story"
+      });
+
+      exports.foo = foo;
+      foo.storyName = 'foo';
+      foo.parameters = {
+        storySource: {
+          source: '<div>{\\"I\\'m a story\\"}</div>'
+        }
+      };
+      const componentMeta = {
+        title: 'MDX/Badge',
+        tags: ['mdx'],
+        includeStories: ["foo"]
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}),
+        page: MDXContent
+      };
+      var _default = componentMeta;
+      exports.default = _default;
+    `);
   });
 
   it('canvas without story children', () => {
@@ -278,34 +353,49 @@ export default componentMeta;
       </Canvas>
     `;
     expect(compileSync(input)).toMatchInlineSnapshot(`
-/*@jsxRuntime automatic @jsxImportSource react*/
-import {jsx as _jsx} from "react/jsx-runtime";
-import {Canvas} from '@storybook/addon-docs';
-function MDXContent(props = {}) {
-  const {wrapper: MDXLayout} = props.components || ({});
-  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
-    children: _jsx(_createMdxContent, {})
-  })) : _createMdxContent();
-  function _createMdxContent() {
-    return _jsx(Canvas, {
-      mdxSource: "<h2>{\\"Some here\\"}</h2>",
-      children: _jsx("h2", {
-        children: "Some here"
-      })
-    });
-  }
-}
-// =========
-const componentMeta = { includeStories: [],  };
-
-componentMeta.parameters = componentMeta.parameters || {};
-componentMeta.parameters.docs = {
-  ...(componentMeta.parameters.docs || {}),
-  page: MDXContent,
-};
+      "use strict";
+
+      Object.defineProperty(exports, "__esModule", {
+        value: true
+      });
+      exports.default = void 0;
+
+      var _react = require("@mdx-js/react");
+
+      var _addonDocs = require("@storybook/addon-docs");
+
+      var _jsxRuntime = require("react/jsx-runtime");
+
+      function MDXContent(props = {}) {
+        const {
+          wrapper: MDXLayout
+        } = Object.assign({}, (0, _react.useMDXComponents)(), props.components);
+        return MDXLayout ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MDXLayout, { ...props,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_createMdxContent, {})
+        }) : _createMdxContent();
+
+        function _createMdxContent() {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_addonDocs.Canvas, {
+            mdxSource: "<h2>{\\"Some here\\"}</h2>",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+              children: "Some here"
+            })
+          });
+        }
+      }
+      /* ========= */
+
 
-export default componentMeta;
-`);
+      const componentMeta = {
+        includeStories: []
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}),
+        page: MDXContent
+      };
+      var _default = componentMeta;
+      exports.default = _default;
+    `);
   });
 });
 
@@ -325,10 +415,18 @@ describe('docs-mdx-compiler-plugin', () => {
         </Story>
       `)
     ).toMatchInlineSnapshot(`
-      export const componentNotes = () => <Button>{'Component notes'}</Button>;
-      componentNotes.storyName = 'component notes';
-      componentNotes.parameters = { storySource: { source: '<Button>{"Component notes"}</Button>' } };
+      const componentNotes = () =>
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, {
+          children: 'Component notes',
+        });
 
+      exports.componentNotes = componentNotes;
+      componentNotes.storyName = 'component notes';
+      componentNotes.parameters = {
+        storySource: {
+          source: '<Button>{"Component notes"}</Button>',
+        },
+      };
       const componentMeta = {
         title: 'Button',
         args: {
@@ -346,6 +444,10 @@ describe('docs-mdx-compiler-plugin', () => {
         tags: ['mdx'],
         includeStories: ['componentNotes'],
       };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -362,17 +464,29 @@ describe('docs-mdx-compiler-plugin', () => {
         </Story>
       `)
     ).toMatchInlineSnapshot(`
-      export const componentNotes = () => <Button>{'Component notes'}</Button>;
-      componentNotes.storyName = 'component notes';
-      componentNotes.parameters = { storySource: { source: '<Button>{"Component notes"}</Button>' } };
+      const componentNotes = () =>
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, {
+          children: 'Component notes',
+        });
 
+      exports.componentNotes = componentNotes;
+      componentNotes.storyName = 'component notes';
+      componentNotes.parameters = {
+        storySource: {
+          source: '<Button>{"Component notes"}</Button>',
+        },
+      };
       const componentMeta = {
         title: 'Button',
         id: 'button-id',
-        component: Button,
+        component: _demo.Button,
         tags: ['mdx'],
         includeStories: ['componentNotes'],
       };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -397,18 +511,22 @@ describe('docs-mdx-compiler-plugin', () => {
         <Story name="renamed" story={MyStories.Foo} />
       `)
     ).toMatchInlineSnapshot(`
-      export const _Basic_ = MyStories.Basic;
-
-      export const _Other_ = Other;
-
-      export const _Foo_ = MyStories.Foo;
+      const _Basic_ = MyStories.Basic;
+      exports._Basic_ = _Basic_;
+      const _Other_ = _Other.Other;
+      exports._Other_ = _Other_;
+      const _Foo_ = MyStories.Foo;
+      exports._Foo_ = _Foo_;
       _Foo_.storyName = 'renamed';
-
       const componentMeta = {
         title: 'MDX/CSF imports',
         tags: ['mdx'],
         includeStories: ['_Basic_', '_Other_', '_Foo_'],
       };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -430,27 +548,43 @@ describe('docs-mdx-compiler-plugin', () => {
         </Story>
       `)
     ).toMatchInlineSnapshot(`
-      export const one = () => <Button>{'One'}</Button>;
-      one.storyName = 'one';
-      one.parameters = { storySource: { source: '<Button>{"One"}</Button>' } };
-      one.decorators = [(storyFn) => <div className="local">{storyFn()}</div>];
+      const one = () =>
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, {
+          children: 'One',
+        });
 
+      exports.one = one;
+      one.storyName = 'one';
+      one.parameters = {
+        storySource: {
+          source: '<Button>{"One"}</Button>',
+        },
+      };
+      one.decorators = [
+        (storyFn) =>
+          /*#__PURE__*/ (0, _jsxRuntime.jsx)('div', {
+            className: 'local',
+            children: storyFn(),
+          }),
+      ];
       const componentMeta = {
         title: 'Button',
         decorators: [
-          (storyFn) => (
-            <div
-              style={{
+          (storyFn) =>
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)('div', {
+              style: {
                 backgroundColor: 'yellow',
-              }}
-            >
-              {storyFn()}
-            </div>
-          ),
+              },
+              children: storyFn(),
+            }),
         ],
         tags: ['mdx'],
         includeStories: ['one'],
       };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -466,13 +600,23 @@ describe('docs-mdx-compiler-plugin', () => {
         This is a documentation-only MDX file which cleans a dummy 'docsOnly: true' story.
       `)
     ).toMatchInlineSnapshot(`
-      export const __page = () => {
+      const __page = () => {
         throw new Error('Docs-only story');
       };
 
-      __page.parameters = { docsOnly: true };
-
-      const componentMeta = { title: 'docs-only', tags: ['mdx'], includeStories: ['__page'] };
+      exports.__page = __page;
+      __page.parameters = {
+        docsOnly: true,
+      };
+      const componentMeta = {
+        title: 'docs-only',
+        tags: ['mdx'],
+        includeStories: ['__page'],
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -491,15 +635,23 @@ describe('docs-mdx-compiler-plugin', () => {
         </Story>
       `)
     ).toMatchInlineSnapshot(`
-      export const one = () => <Button>{'One'}</Button>;
+      const one = () =>
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, {
+          children: 'One',
+        });
+
+      exports.one = one;
       one.storyName = 'one';
-      one.parameters = { storySource: { source: '<Button>{"One"}</Button>' } };
+      one.parameters = {
+        storySource: {
+          source: '<Button>{"One"}</Button>',
+        },
+      };
       one.loaders = [
         async () => ({
           bar: 2,
         }),
       ];
-
       const componentMeta = {
         title: 'Button',
         loaders: [
@@ -510,6 +662,10 @@ describe('docs-mdx-compiler-plugin', () => {
         tags: ['mdx'],
         includeStories: ['one'],
       };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -521,17 +677,23 @@ describe('docs-mdx-compiler-plugin', () => {
         <Meta title="Addons/Docs/what's in a title?" />
       `)
     ).toMatchInlineSnapshot(`
-      export const __page = () => {
+      const __page = () => {
         throw new Error('Docs-only story');
       };
 
-      __page.parameters = { docsOnly: true };
-
+      exports.__page = __page;
+      __page.parameters = {
+        docsOnly: true,
+      };
       const componentMeta = {
         title: "Addons/Docs/what's in a title?",
         tags: ['mdx'],
         includeStories: ['__page'],
       };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -556,15 +718,40 @@ describe('docs-mdx-compiler-plugin', () => {
         </Story>
       `)
     ).toMatchInlineSnapshot(`
-      export const one = () => <Button>{'One'}</Button>;
+      const one = () =>
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, {
+          children: 'One',
+        });
+
+      exports.one = one;
       one.storyName = 'one';
-      one.parameters = { storySource: { source: '<Button>{"One"}</Button>' } };
+      one.parameters = {
+        storySource: {
+          source: '<Button>{"One"}</Button>',
+        },
+      };
 
-      export const helloStory = () => <Button>{'Hello button'}</Button>;
-      helloStory.storyName = 'hello story';
-      helloStory.parameters = { storySource: { source: '<Button>{"Hello button"}</Button>' } };
+      const helloStory = () =>
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, {
+          children: 'Hello button',
+        });
 
-      const componentMeta = { title: 'Button', tags: ['mdx'], includeStories: ['one', 'helloStory'] };
+      exports.helloStory = helloStory;
+      helloStory.storyName = 'hello story';
+      helloStory.parameters = {
+        storySource: {
+          source: '<Button>{"Hello button"}</Button>',
+        },
+      };
+      const componentMeta = {
+        title: 'Button',
+        tags: ['mdx'],
+        includeStories: ['one', 'helloStory'],
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -585,28 +772,47 @@ describe('docs-mdx-compiler-plugin', () => {
         </Story>
       `)
     ).toMatchInlineSnapshot(`
-      export const componentNotes = () => <Button>{'Component notes'}</Button>;
+      const componentNotes = () =>
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, {
+          children: 'Component notes',
+        });
+
+      exports.componentNotes = componentNotes;
       componentNotes.storyName = 'component notes';
-      componentNotes.parameters = { storySource: { source: '<Button>{"Component notes"}</Button>' } };
+      componentNotes.parameters = {
+        storySource: {
+          source: '<Button>{"Component notes"}</Button>',
+        },
+      };
+
+      const storyNotes = () =>
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, {
+          children: 'Story notes',
+        });
 
-      export const storyNotes = () => <Button>{'Story notes'}</Button>;
+      exports.storyNotes = storyNotes;
       storyNotes.storyName = 'story notes';
       storyNotes.parameters = {
-        storySource: { source: '<Button>{"Story notes"}</Button>' },
+        storySource: {
+          source: '<Button>{"Story notes"}</Button>',
+        },
         ...{
           notes: 'story notes',
         },
       };
-
       const componentMeta = {
         title: 'Button',
         parameters: {
           notes: 'component notes',
         },
-        component: Button,
+        component: _demo.Button,
         tags: ['mdx'],
         includeStories: ['componentNotes', 'storyNotes'],
       };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -640,23 +846,44 @@ describe('docs-mdx-compiler-plugin', () => {
         </Canvas>
       `)
     ).toMatchInlineSnapshot(`
-      export const helloButton = () => <Button>{'Hello button'}</Button>;
+      const helloButton = () =>
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, {
+          children: 'Hello button',
+        });
+
+      exports.helloButton = helloButton;
       helloButton.storyName = 'hello button';
-      helloButton.parameters = { storySource: { source: '<Button>{"Hello button"}</Button>' } };
+      helloButton.parameters = {
+        storySource: {
+          source: '<Button>{"Hello button"}</Button>',
+        },
+      };
 
-      export const two = () => <Button>{'Two'}</Button>;
-      two.storyName = 'two';
-      two.parameters = { storySource: { source: '<Button>{"Two"}</Button>' } };
+      const two = () =>
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, {
+          children: 'Two',
+        });
 
+      exports.two = two;
+      two.storyName = 'two';
+      two.parameters = {
+        storySource: {
+          source: '<Button>{"Two"}</Button>',
+        },
+      };
       const componentMeta = {
         title: 'Button',
         parameters: {
           notes: 'component notes',
         },
-        component: Button,
+        component: _demo.Button,
         tags: ['mdx'],
         includeStories: ['helloButton', 'two'],
       };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -681,7 +908,8 @@ describe('docs-mdx-compiler-plugin', () => {
         </Story>
       `)
     ).toMatchInlineSnapshot(`
-      export const componentNotes = Template.bind({});
+      const componentNotes = Template.bind({});
+      exports.componentNotes = componentNotes;
       componentNotes.storyName = 'component notes';
       componentNotes.argTypes = {
         a: {
@@ -695,9 +923,20 @@ describe('docs-mdx-compiler-plugin', () => {
         a: 1,
         b: 2,
       };
-      componentNotes.parameters = { storySource: { source: 'args => <Button>Component notes</Button>' } };
-
-      const componentMeta = { title: 'Button', tags: ['mdx'], includeStories: ['componentNotes'] };
+      componentNotes.parameters = {
+        storySource: {
+          source: 'args => <Button>Component notes</Button>',
+        },
+      };
+      const componentMeta = {
+        title: 'Button',
+        tags: ['mdx'],
+        includeStories: ['componentNotes'],
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -710,7 +949,15 @@ describe('docs-mdx-compiler-plugin', () => {
 
         <Story id="." />
       `)
-    ).toMatchInlineSnapshot(`const componentMeta = { includeStories: [] };`);
+    ).toMatchInlineSnapshot(`
+      const componentMeta = {
+        includeStories: [],
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
+    `);
   });
 
   it('story-def-text-only.mdx', () => {
@@ -725,11 +972,24 @@ describe('docs-mdx-compiler-plugin', () => {
         <Story name="text">Plain text</Story>
       `)
     ).toMatchInlineSnapshot(`
-      export const text = () => 'Plain text';
-      text.storyName = 'text';
-      text.parameters = { storySource: { source: '"Plain text"' } };
+      const text = () => 'Plain text';
 
-      const componentMeta = { title: 'Text', tags: ['mdx'], includeStories: ['text'] };
+      exports.text = text;
+      text.storyName = 'text';
+      text.parameters = {
+        storySource: {
+          source: '"Plain text"',
+        },
+      };
+      const componentMeta = {
+        title: 'Text',
+        tags: ['mdx'],
+        includeStories: ['text'],
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -760,27 +1020,66 @@ describe('docs-mdx-compiler-plugin', () => {
         </Story>
       `)
     ).toMatchInlineSnapshot(`
-      export const one = () => <Button>{'One'}</Button>;
+      const one = () =>
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, {
+          children: 'One',
+        });
+
+      exports.one = one;
       one.storyName = 'one';
-      one.parameters = { storySource: { source: '<Button>{"One"}</Button>' } };
+      one.parameters = {
+        storySource: {
+          source: '<Button>{"One"}</Button>',
+        },
+      };
 
-      export const helloStory = () => <Button>{'Hello button'}</Button>;
+      const helloStory = () =>
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, {
+          children: 'Hello button',
+        });
+
+      exports.helloStory = helloStory;
       helloStory.storyName = 'hello story';
-      helloStory.parameters = { storySource: { source: '<Button>{"Hello button"}</Button>' } };
+      helloStory.parameters = {
+        storySource: {
+          source: '<Button>{"Hello button"}</Button>',
+        },
+      };
 
-      export const wPunctuation = () => <Button>{'with punctuation'}</Button>;
+      const wPunctuation = () =>
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, {
+          children: 'with punctuation',
+        });
+
+      exports.wPunctuation = wPunctuation;
       wPunctuation.storyName = 'w/punctuation';
-      wPunctuation.parameters = { storySource: { source: '<Button>{"with punctuation"}</Button>' } };
+      wPunctuation.parameters = {
+        storySource: {
+          source: '<Button>{"with punctuation"}</Button>',
+        },
+      };
 
-      export const _1FineDay = () => <Button>{'starts with number'}</Button>;
-      _1FineDay.storyName = '1 fine day';
-      _1FineDay.parameters = { storySource: { source: '<Button>{"starts with number"}</Button>' } };
+      const _1FineDay = () =>
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, {
+          children: 'starts with number',
+        });
 
+      exports._1FineDay = _1FineDay;
+      _1FineDay.storyName = '1 fine day';
+      _1FineDay.parameters = {
+        storySource: {
+          source: '<Button>{"starts with number"}</Button>',
+        },
+      };
       const componentMeta = {
         title: 'Button',
         tags: ['mdx'],
         includeStories: ['one', 'helloStory', 'wPunctuation', '_1FineDay'],
       };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -800,11 +1099,23 @@ describe('docs-mdx-compiler-plugin', () => {
         <Story name="basic">{basicFn}</Story>
       `)
     ).toMatchInlineSnapshot(`
-      export const basic = assertIsFn(basicFn);
+      const basic = assertIsFn(basicFn);
+      exports.basic = basic;
       basic.storyName = 'basic';
-      basic.parameters = { storySource: { source: 'basicFn' } };
-
-      const componentMeta = { title: 'story-function-var', tags: ['mdx'], includeStories: ['basic'] };
+      basic.parameters = {
+        storySource: {
+          source: 'basicFn',
+        },
+      };
+      const componentMeta = {
+        title: 'story-function-var',
+        tags: ['mdx'],
+        includeStories: ['basic'],
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -821,12 +1132,14 @@ describe('docs-mdx-compiler-plugin', () => {
         </Story>
       `)
     ).toMatchInlineSnapshot(`
-      export const functionStory = () => {
+      const functionStory = () => {
         const btn = document.createElement('button');
         btn.innerHTML = 'Hello Button';
         btn.addEventListener('click', action('Click'));
         return btn;
       };
+
+      exports.functionStory = functionStory;
       functionStory.storyName = 'function';
       functionStory.parameters = {
         storySource: {
@@ -834,8 +1147,13 @@ describe('docs-mdx-compiler-plugin', () => {
             '() => {\\n  const btn = document.createElement("button");\\n  btn.innerHTML = "Hello Button";\\n  btn.addEventListener("click", action("Click"));\\n  return btn;\\n}',
         },
       };
-
-      const componentMeta = { includeStories: ['functionStory'] };
+      const componentMeta = {
+        includeStories: ['functionStory'],
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -854,19 +1172,35 @@ describe('docs-mdx-compiler-plugin', () => {
         </Story>
       `)
     ).toMatchInlineSnapshot(`
-      export const multipleChildren = () => (
-        <>
-          <p>{'Hello Child #1'}</p>
-          "\\n"
-          <p>{'Hello Child #2'}</p>
-        </>
-      );
+      const multipleChildren = () =>
+        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)('p', {
+              children: 'Hello Child #1',
+            }),
+            '"\\\\n"',
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)('p', {
+              children: 'Hello Child #2',
+            }),
+          ],
+        });
+
+      exports.multipleChildren = multipleChildren;
       multipleChildren.storyName = 'multiple children';
       multipleChildren.parameters = {
-        storySource: { source: '<p>{"Hello Child #1"}</p>\\n"\\\\n"\\n<p>{"Hello Child #2"}</p>' },
+        storySource: {
+          source: '<p>{"Hello Child #1"}</p>\\n"\\\\n"\\n<p>{"Hello Child #2"}</p>',
+        },
       };
-
-      const componentMeta = { title: 'Multiple', tags: ['mdx'], includeStories: ['multipleChildren'] };
+      const componentMeta = {
+        title: 'Multiple',
+        tags: ['mdx'],
+        includeStories: ['multipleChildren'],
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -894,15 +1228,17 @@ describe('docs-mdx-compiler-plugin', () => {
         </Story>
       `)
     ).toMatchInlineSnapshot(`
-      export const toStorybook = () => ({
+      const toStorybook = () => ({
         template: '<storybook-welcome-component (showApp)="showApp()"></storybook-welcome-component>',
         props: {
-          showApp: linkTo('Button'),
+          showApp: (0, _addonLinks.linkTo)('Button'),
         },
         moduleMetadata: {
-          declarations: [Welcome],
+          declarations: [_demo.Welcome],
         },
       });
+
+      exports.toStorybook = toStorybook;
       toStorybook.storyName = 'to storybook';
       toStorybook.parameters = {
         storySource: {
@@ -910,8 +1246,15 @@ describe('docs-mdx-compiler-plugin', () => {
             '{\\n  template: "<storybook-welcome-component (showApp)=\\\\"showApp()\\\\"></storybook-welcome-component>",\\n  props: {\\n    showApp: linkTo("Button")\\n  },\\n  moduleMetadata: {\\n    declarations: [Welcome]\\n  }\\n}',
         },
       };
-
-      const componentMeta = { title: 'MDX|Welcome', tags: ['mdx'], includeStories: ['toStorybook'] };
+      const componentMeta = {
+        title: 'MDX|Welcome',
+        tags: ['mdx'],
+        includeStories: ['toStorybook'],
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -924,7 +1267,15 @@ describe('docs-mdx-compiler-plugin', () => {
 
         <Story id="welcome--welcome" />
       `)
-    ).toMatchInlineSnapshot(`const componentMeta = { includeStories: [] };`);
+    ).toMatchInlineSnapshot(`
+      const componentMeta = {
+        includeStories: [],
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
+    `);
   });
 
   it('title-template-string.mdx', () => {
@@ -939,17 +1290,23 @@ describe('docs-mdx-compiler-plugin', () => {
         ].join('\n')
       )
     ).toMatchInlineSnapshot(`
-      export const __page = () => {
+      const __page = () => {
         throw new Error('Docs-only story');
       };
 
-      __page.parameters = { docsOnly: true };
-
+      exports.__page = __page;
+      __page.parameters = {
+        docsOnly: true,
+      };
       const componentMeta = {
-        title: \`\${titleFunction('template')}\`,
+        title: \`\${(0, _titleGenerators.titleFunction)('template')}\`,
         tags: ['mdx'],
         includeStories: ['__page'],
       };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 
@@ -964,7 +1321,15 @@ describe('docs-mdx-compiler-plugin', () => {
 
         <Button>Hello button</Button>
       `)
-    ).toMatchInlineSnapshot(`const componentMeta = { includeStories: [] };`);
+    ).toMatchInlineSnapshot(`
+      const componentMeta = {
+        includeStories: [],
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
+    `);
   });
 
   it('errors on missing story props', async () => {
@@ -997,13 +1362,22 @@ describe('docs-mdx-compiler-plugin', () => {
           Spme **markdown** here!
         `)
       ).toMatchInlineSnapshot(`
-        export const __page = () => {
+        const __page = () => {
           throw new Error('Docs-only story');
         };
 
-        __page.parameters = { docsOnly: true };
-
-        const componentMeta = { tags: ['mdx'], includeStories: ['__page'] };
+        exports.__page = __page;
+        __page.parameters = {
+          docsOnly: true,
+        };
+        const componentMeta = {
+          tags: ['mdx'],
+          includeStories: ['__page'],
+        };
+        componentMeta.parameters = componentMeta.parameters || {};
+        componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+        var _default = componentMeta;
+        exports.default = _default;
       `);
     });
 
@@ -1020,11 +1394,27 @@ describe('docs-mdx-compiler-plugin', () => {
           </Story>
         `)
       ).toMatchInlineSnapshot(`
-        export const basic = () => <Button>{'Basic'}</Button>;
-        basic.storyName = 'Basic';
-        basic.parameters = { storySource: { source: '<Button>{"Basic"}</Button>' } };
+        const basic = () =>
+          /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, {
+            children: 'Basic',
+          });
 
-        const componentMeta = { component: Button, tags: ['mdx'], includeStories: ['basic'] };
+        exports.basic = basic;
+        basic.storyName = 'Basic';
+        basic.parameters = {
+          storySource: {
+            source: '<Button>{"Basic"}</Button>',
+          },
+        };
+        const componentMeta = {
+          component: _demo.Button,
+          tags: ['mdx'],
+          includeStories: ['basic'],
+        };
+        componentMeta.parameters = componentMeta.parameters || {};
+        componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+        var _default = componentMeta;
+        exports.default = _default;
       `);
     });
 
@@ -1039,16 +1429,24 @@ describe('docs-mdx-compiler-plugin', () => {
           <Story name="Basic" />
         `)
       ).toMatchInlineSnapshot(`
-        export const basic = {};
+        const basic = {};
+        exports.basic = basic;
         basic.storyName = 'Basic';
-        basic.parameters = { storySource: { source: '{}' } };
-
+        basic.parameters = {
+          storySource: {
+            source: '{}',
+          },
+        };
         const componentMeta = {
           title: 'Button',
-          component: Button,
+          component: _demo.Button,
           tags: ['mdx'],
           includeStories: ['basic'],
         };
+        componentMeta.parameters = componentMeta.parameters || {};
+        componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+        var _default = componentMeta;
+        exports.default = _default;
       `);
     });
 
@@ -1063,17 +1461,25 @@ describe('docs-mdx-compiler-plugin', () => {
           <Story name="Basic" />
         `)
       ).toMatchInlineSnapshot(`
-        export const basic = {};
+        const basic = {};
+        exports.basic = basic;
         basic.storyName = 'Basic';
-        basic.parameters = { storySource: { source: '{}' } };
-
+        basic.parameters = {
+          storySource: {
+            source: '{}',
+          },
+        };
         const componentMeta = {
           title: 'Button',
-          component: Button,
-          render: (args) => <Button {...args} />,
+          component: _demo.Button,
+          render: (args) => /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, { ...args }),
           tags: ['mdx'],
           includeStories: ['basic'],
         };
+        componentMeta.parameters = componentMeta.parameters || {};
+        componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+        var _default = componentMeta;
+        exports.default = _default;
       `);
     });
 
@@ -1088,17 +1494,27 @@ describe('docs-mdx-compiler-plugin', () => {
           <Story name="Basic" render={(args) => <Button {...args} />} />
         `)
       ).toMatchInlineSnapshot(`
-        export const basic = {};
+        const basic = {};
+        exports.basic = basic;
         basic.storyName = 'Basic';
-        basic.parameters = { storySource: { source: '{}' } };
-        basic.render = (args) => <Button {...args} />;
+        basic.parameters = {
+          storySource: {
+            source: '{}',
+          },
+        };
+
+        basic.render = (args) => /*#__PURE__*/ (0, _jsxRuntime.jsx)(_demo.Button, { ...args });
 
         const componentMeta = {
           title: 'Button',
-          component: Button,
+          component: _demo.Button,
           tags: ['mdx'],
           includeStories: ['basic'],
         };
+        componentMeta.parameters = componentMeta.parameters || {};
+        componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+        var _default = componentMeta;
+        exports.default = _default;
       `);
     });
 
@@ -1113,17 +1529,27 @@ describe('docs-mdx-compiler-plugin', () => {
           <Story name="Basic" play={() => console.log('play')} />
         `)
       ).toMatchInlineSnapshot(`
-        export const basic = {};
+        const basic = {};
+        exports.basic = basic;
         basic.storyName = 'Basic';
-        basic.parameters = { storySource: { source: '{}' } };
+        basic.parameters = {
+          storySource: {
+            source: '{}',
+          },
+        };
+
         basic.play = () => console.log('play');
 
         const componentMeta = {
           title: 'Button',
-          component: Button,
+          component: _demo.Button,
           tags: ['mdx'],
           includeStories: ['basic'],
         };
+        componentMeta.parameters = componentMeta.parameters || {};
+        componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+        var _default = componentMeta;
+        exports.default = _default;
       `);
     });
   });
@@ -1156,13 +1582,23 @@ describe('docs-mdx-compiler-plugin', () => {
         \`}</style>
       `)
     ).toMatchInlineSnapshot(`
-      export const __page = () => {
+      const __page = () => {
         throw new Error('Docs-only story');
       };
 
-      __page.parameters = { docsOnly: true };
-
-      const componentMeta = { title: 'Example/Introduction', tags: ['mdx'], includeStories: ['__page'] };
+      exports.__page = __page;
+      __page.parameters = {
+        docsOnly: true,
+      };
+      const componentMeta = {
+        title: 'Example/Introduction',
+        tags: ['mdx'],
+        includeStories: ['__page'],
+      };
+      componentMeta.parameters = componentMeta.parameters || {};
+      componentMeta.parameters.docs = { ...(componentMeta.parameters.docs || {}), page: MDXContent };
+      var _default = componentMeta;
+      exports.default = _default;
     `);
   });
 });
diff --git a/src/index.ts b/src/index.ts
index dae96ea..3b0e213 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-import { compile as mdxCompile, compileSync } from '@mdx-js/mdx';
+import { compile as mdxCompile, compileSync as mdxCompileSync } from '@mdx-js/mdx';
 import generate from '@babel/generator';
 import * as t from '@babel/types';
 import cloneDeep from 'lodash/cloneDeep';
@@ -16,8 +16,10 @@ import {
   wrapperJs,
   stringifyMeta,
 } from './sb-mdx-plugin';
+import { CompileOptions, MdxCompileOptions } from './types';
+import { transformJSXAsync, transformJSXSync } from './jsx';
 
-export const SEPARATOR = '// =========';
+export const SEPARATOR = '/* ========= */';
 
 export { wrapperJs };
 
@@ -40,7 +42,7 @@ function extractExports(root: t.File, options: CompilerOptions) {
   const storyExports = [];
   const includeStories = [];
   let metaExport: MetaExport | null = null;
-  const { code } = generate(root, {});
+
   let contents: t.ExpressionStatement;
   root.program.body.forEach((child) => {
     if (t.isExpressionStatement(child) && t.isJSXFragment(child.expression)) {
@@ -148,37 +150,72 @@ export const postprocess = (code: string, extractedExports: string) => {
   const first = lines.shift();
 
   return [
-    first,
     ...lines.filter((line) => !line.match(/^export default/)),
     SEPARATOR,
     extractedExports,
   ].join('\n');
 };
 
-export const mdxSync = (code: string) => {
-  const store = { exports: '', toEstree };
-  const output = compileSync(code, {
-    rehypePlugins: [[plugin, store]],
-  });
-  return postprocess(output.toString(), store.exports);
-};
+export const compile = async (
+  input: string,
+  { skipCsf = false, mdxCompileOptions = {}, jsxOptions = {} }: CompileOptions = {}
+) => {
+  const { options, context } = getCompilerOptionsAndContext(mdxCompileOptions, skipCsf);
 
-export { mdxSync as compileSync };
+  if (skipCsf) {
+    const mdxResult = await mdxCompile(input, options);
 
-export interface CompileOptions {
-  skipCsf?: boolean;
-  mdxCompileOptions?: Parameters<typeof mdxCompile>[1];
-}
+    return mdxResult.toString();
+  }
 
-export const compile = async (
-  code: string,
-  { skipCsf, mdxCompileOptions }: CompileOptions = {}
+  const mdxResult = await mdxCompile(input, options);
+
+  return transformJSXAsync(postprocess(mdxResult.toString(), context.exports), jsxOptions);
+};
+
+export const compileSync = (
+  input: string,
+  { skipCsf = false, mdxCompileOptions = {}, jsxOptions = {} }: CompileOptions = {}
 ) => {
-  const store = { exports: '', toEstree };
-  const output = await mdxCompile(code, {
-    providerImportSource: '@mdx-js/react',
-    rehypePlugins: skipCsf ? [] : [[plugin, store]],
-    ...mdxCompileOptions,
-  });
-  return skipCsf ? output.toString() : postprocess(output.toString(), store.exports);
+  const { options, context } = getCompilerOptionsAndContext(mdxCompileOptions, skipCsf);
+
+  if (skipCsf) {
+    const mdxResult = mdxCompileSync(input, options);
+
+    return mdxResult.toString();
+  }
+
+  const mdxResult = mdxCompileSync(input, options);
+
+  return transformJSXSync(postprocess(mdxResult.toString(), context.exports), jsxOptions);
 };
+
+function getCompilerOptionsAndContext(
+  mdxCompileOptions: MdxCompileOptions,
+  skipCsf: boolean = false
+): { options: MdxCompileOptions; context: any } {
+  if (skipCsf) {
+    return {
+      options: {
+        providerImportSource: '@mdx-js/react',
+        rehypePlugins: [],
+        ...mdxCompileOptions,
+      },
+      context: {},
+    };
+  }
+
+  const context = { exports: '', toEstree };
+
+  return {
+    options: {
+      providerImportSource: '@mdx-js/react',
+      rehypePlugins: [[plugin, context]],
+      ...mdxCompileOptions,
+
+      // preserve the JSX, we'll deal with it using babel
+      jsx: true,
+    },
+    context,
+  };
+}
diff --git a/src/jsx.ts b/src/jsx.ts
new file mode 100644
index 0000000..91e623d
--- /dev/null
+++ b/src/jsx.ts
@@ -0,0 +1,34 @@
+import { transformAsync, transformSync } from '@babel/core';
+// @ts-expect-error (no types, but perfectly valid)
+import presetReact from '@babel/preset-react';
+import type { JSXOptions, BabelOptions } from './types';
+
+function getBabelOptions(jsxOptions: JSXOptions): BabelOptions {
+  return {
+    filename: 'file.js',
+    sourceType: 'module',
+    presets: [
+      [
+        presetReact,
+        {
+          runtime: 'automatic',
+          ...jsxOptions,
+        },
+      ],
+    ],
+  };
+}
+
+export const transformJSXAsync = async (input: string, jsxOptions: JSXOptions) => {
+  const babelOptions = getBabelOptions(jsxOptions);
+  const { code } = await transformAsync(input, babelOptions);
+
+  return code;
+};
+
+export const transformJSXSync = (input: string, jsxOptions: JSXOptions) => {
+  const babelOptions = getBabelOptions(jsxOptions);
+  const { code } = transformSync(input, babelOptions);
+
+  return code;
+};
diff --git a/src/sb-mdx-plugin.ts b/src/sb-mdx-plugin.ts
index 08d929f..aa0cbc3 100644
--- a/src/sb-mdx-plugin.ts
+++ b/src/sb-mdx-plugin.ts
@@ -1,4 +1,3 @@
-import { parse } from '@babel/parser';
 import * as t from '@babel/types';
 import generate from '@babel/generator';
 import camelCase from 'lodash/camelCase';
@@ -34,9 +33,6 @@ export type MetaExport = Record<string, any>;
 // Generate the MDX as is, but append named exports for every
 // story in the contents
 
-const STORY_REGEX = /^<Story[\s>]/;
-const CANVAS_REGEX = /^<(Preview|Canvas)[\s>]/;
-const META_REGEX = /^<Meta[\s>]/;
 const RESERVED =
   /^(?:do|if|in|for|let|new|try|var|case|else|enum|eval|false|null|this|true|void|with|await|break|catch|class|const|super|throw|while|yield|delete|export|import|public|return|static|switch|typeof|default|extends|finally|package|private|continue|debugger|function|arguments|interface|protected|implements|instanceof)$/;
 
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..63d2a62
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,19 @@
+import { compile as mdxCompile } from '@mdx-js/mdx';
+import { transformAsync } from '@babel/core';
+
+export interface JSXOptions {
+  pragma?: string;
+  pragmaFrag?: string;
+  throwIfNamespace?: false;
+  runtime?: 'classic' | 'automatic';
+  importSource?: string;
+}
+
+export type MdxCompileOptions = Parameters<typeof mdxCompile>[1];
+export type BabelOptions = Parameters<typeof transformAsync>[1];
+
+export interface CompileOptions {
+  skipCsf?: boolean;
+  mdxCompileOptions?: MdxCompileOptions;
+  jsxOptions?: JSXOptions;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 01f4ce3..5e8ad84 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,8 +17,6 @@
     "types": ["jest", "node"],
     "moduleResolution": "node"
   },
-  "include": [
-    "src/**/*.ts"
-  ],
+  "include": ["src/**/*.ts"],
   "exclude": ["src/**/*.test.ts"]
-}
\ No newline at end of file
+}