misc upgrades and stuff for mdx-js/mdx v16 (gatsbyjs#194)

ChristopherBiscardi · Jun 27, 2019 · 42d26bf · 42d26bf
1 parent 837a2b0
commit 42d26bf
Show file tree

Hide file tree

Showing 3 changed files with 196 additions and 127 deletions.
diff --git a/packages/gatsby-plugin-mdx/loaders/__snapshots__/mdx-loader.test.js.snap b/packages/gatsby-plugin-mdx/loaders/__snapshots__/mdx-loader.test.js.snap
@@ -4,13 +4,26 @@ exports[`mdx-loader snapshot with body 1`] = `
 import React from "react";
 import { MDXTag } from "@mdx-js/tag";
 
-export default ({ components, ...props }) => (
-  <MDXTag name="wrapper" components={components}>
-    <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`a bit of a paragraph\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
-  </MDXTag>
-);
+export default class MDXContent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.layout = null;
+  }
+  render() {
+    const { components, ...props } = this.props;
+
+    return (
+      <MDXTag name="wrapper" components={components}>
+        <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
+        <MDXTag
+          name="p"
+          components={components}
+        >{\`a bit of a paragraph\`}</MDXTag>
+        <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
+      </MDXTag>
+    );
+  }
+}
 
 export const _frontmatter = {};
 
@@ -20,13 +33,26 @@ exports[`mdx-loader snapshot with frontmatter 1`] = `
 import React from "react";
 import { MDXTag } from "@mdx-js/tag";
 
-export default ({ components, ...props }) => (
-  <MDXTag name="wrapper" components={components}>
-    <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`a bit of a paragraph\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
-  </MDXTag>
-);
+export default class MDXContent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.layout = null;
+  }
+  render() {
+    const { components, ...props } = this.props;
+
+    return (
+      <MDXTag name="wrapper" components={components}>
+        <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
+        <MDXTag
+          name="p"
+          components={components}
+        >{\`a bit of a paragraph\`}</MDXTag>
+        <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
+      </MDXTag>
+    );
+  }
+}
 
 export const _frontmatter = { one: "two", three: 4, array: [1, 2, 3] };
 
@@ -36,18 +62,31 @@ exports[`mdx-loader snapshot with frontmatter-layout 1`] = `
 import React from "react";
 import { MDXTag } from "@mdx-js/tag";
 
-export default ({ components, ...props }) => (
-  <MDXTag
-    name="wrapper"
-    Layout={({ children, ...props }) => <div>{children}</div>}
-    layoutProps={props}
-    components={components}
-  >
-    <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`a bit of a paragraph\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
-  </MDXTag>
-);
+export default class MDXContent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.layout = ({ children, ...props }) => <div>{children}</div>;
+  }
+  render() {
+    const { components, ...props } = this.props;
+
+    return (
+      <MDXTag
+        name="wrapper"
+        Layout={this.layout}
+        layoutProps={props}
+        components={components}
+      >
+        <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
+        <MDXTag
+          name="p"
+          components={components}
+        >{\`a bit of a paragraph\`}</MDXTag>
+        <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
+      </MDXTag>
+    );
+  }
+}
 
 export const _frontmatter = { one: "two", three: 4, array: [1, 2, 3] };
 
@@ -58,18 +97,31 @@ import React from "react";
 import { MDXTag } from "@mdx-js/tag";
 
 export const meta = { author: "chris" };
-export default ({ components, ...props }) => (
-  <MDXTag
-    name="wrapper"
-    Layout={({ children, ...props }) => <div>{children}</div>}
-    layoutProps={props}
-    components={components}
-  >
-    <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`a bit of a paragraph\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
-  </MDXTag>
-);
+export default class MDXContent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.layout = ({ children, ...props }) => <div>{children}</div>;
+  }
+  render() {
+    const { components, ...props } = this.props;
+
+    return (
+      <MDXTag
+        name="wrapper"
+        Layout={this.layout}
+        layoutProps={props}
+        components={components}
+      >
+        <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
+        <MDXTag
+          name="p"
+          components={components}
+        >{\`a bit of a paragraph\`}</MDXTag>
+        <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
+      </MDXTag>
+    );
+  }
+}
 
 export const _frontmatter = { one: "two", three: 4, array: [1, 2, 3] };
 
@@ -80,13 +132,26 @@ import React from "react";
 import { MDXTag } from "@mdx-js/tag";
 
 export const meta = { author: "chris" };
-export default ({ components, ...props }) => (
-  <MDXTag name="wrapper" components={components}>
-    <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`a bit of a paragraph\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
-  </MDXTag>
-);
+export default class MDXContent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.layout = null;
+  }
+  render() {
+    const { components, ...props } = this.props;
+
+    return (
+      <MDXTag name="wrapper" components={components}>
+        <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
+        <MDXTag
+          name="p"
+          components={components}
+        >{\`a bit of a paragraph\`}</MDXTag>
+        <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
+      </MDXTag>
+    );
+  }
+}
 
 export const _frontmatter = { one: "two", three: 4, array: [1, 2, 3] };
 
@@ -96,18 +161,31 @@ exports[`mdx-loader snapshot with layout 1`] = `
 import React from "react";
 import { MDXTag } from "@mdx-js/tag";
 
-export default ({ components, ...props }) => (
-  <MDXTag
-    name="wrapper"
-    Layout={({ children, ...props }) => <div>{children}</div>}
-    layoutProps={props}
-    components={components}
-  >
-    <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`a bit of a paragraph\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
-  </MDXTag>
-);
+export default class MDXContent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.layout = ({ children, ...props }) => <div>{children}</div>;
+  }
+  render() {
+    const { components, ...props } = this.props;
+
+    return (
+      <MDXTag
+        name="wrapper"
+        Layout={this.layout}
+        layoutProps={props}
+        components={components}
+      >
+        <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
+        <MDXTag
+          name="p"
+          components={components}
+        >{\`a bit of a paragraph\`}</MDXTag>
+        <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
+      </MDXTag>
+    );
+  }
+}
 
 export const _frontmatter = {};
 
@@ -118,18 +196,31 @@ import React from "react";
 import { MDXTag } from "@mdx-js/tag";
 
 export const meta = { author: "chris" };
-export default ({ components, ...props }) => (
-  <MDXTag
-    name="wrapper"
-    Layout={({ children, ...props }) => <div>{children}</div>}
-    layoutProps={props}
-    components={components}
-  >
-    <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`a bit of a paragraph\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
-  </MDXTag>
-);
+export default class MDXContent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.layout = ({ children, ...props }) => <div>{children}</div>;
+  }
+  render() {
+    const { components, ...props } = this.props;
+
+    return (
+      <MDXTag
+        name="wrapper"
+        Layout={this.layout}
+        layoutProps={props}
+        components={components}
+      >
+        <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
+        <MDXTag
+          name="p"
+          components={components}
+        >{\`a bit of a paragraph\`}</MDXTag>
+        <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
+      </MDXTag>
+    );
+  }
+}
 
 export const _frontmatter = {};
 
@@ -140,13 +231,26 @@ import React from "react";
 import { MDXTag } from "@mdx-js/tag";
 
 export const meta = { author: "chris" };
-export default ({ components, ...props }) => (
-  <MDXTag name="wrapper" components={components}>
-    <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`a bit of a paragraph\`}</MDXTag>
-    <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
-  </MDXTag>
-);
+export default class MDXContent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.layout = null;
+  }
+  render() {
+    const { components, ...props } = this.props;
+
+    return (
+      <MDXTag name="wrapper" components={components}>
+        <MDXTag name="h1" components={components}>{\`Some title\`}</MDXTag>
+        <MDXTag
+          name="p"
+          components={components}
+        >{\`a bit of a paragraph\`}</MDXTag>
+        <MDXTag name="p" components={components}>{\`some content\`}</MDXTag>
+      </MDXTag>
+    );
+  }
+}
 
 export const _frontmatter = {};
 

diff --git a/packages/gatsby-plugin-mdx/mdx-renderer.js b/packages/gatsby-plugin-mdx/mdx-renderer.js
@@ -1,11 +1,18 @@
+const React = require("react");
+const { MDXTag } = require("@mdx-js/tag");
 const { withMDXComponents } = require("@mdx-js/tag/dist/mdx-provider");
 const { withMDXScope } = require("./context");
 
 module.exports = withMDXScope(
   withMDXComponents(({ scope = {}, components = {}, children, ...props }) => {
+    if (!children) {
+      return null;
+    }
     const fullScope = {
-      components,
-      props,
+      // React and MDXTag are here just in case the user doesn't pass them in
+      // in a manual usage of the renderer
+      React,
+      MDXTag,
       ...scope
     };
 
@@ -14,7 +21,7 @@ module.exports = withMDXScope(
     const values = keys.map(key => fullScope[key]);
     const fn = new Function("_fn", ...keys, `${children}`);
 
-    const end = fn({}, ...values)({ components, ...props });
-    return end;
+    const End = fn({}, ...values);
+    return React.createElement(End, { components, ...props });
   })
 );