old gatsby-remark-plugin support (#68)

ChristopherBiscardi · web-flow · commit 4b85f9b51dda · 2018-08-28T22:14:21.000-07:00
* enable default options in mdx-loader
* html to jsx plugins work
* remove mdx-deck from kitchen-sink
diff --git a/packages/gatsby-plugin-mdx/extend-node-type.js b/packages/gatsby-plugin-mdx/extend-node-type.js
@@ -26,14 +26,44 @@ const objRestSpread = require("@babel/plugin-proposal-object-rest-spread");
 const babel = require("@babel/core");
 const rawMDX = require("@mdx-js/mdx");
 
+const debug = require("debug")("gatsby-mdx:extend-node-type");
 const mdx = require("./utils/mdx");
 const getTableOfContents = require("./utils/get-table-of-content");
 const defaultOptions = require("./utils/default-options");
+const getSourcePluginsAsRemarkPlugins = require("./utils/get-source-plugins-as-remark-plugins");
 
 const stripFrontmatter = source => grayMatter(source).content;
+/* 
+ * function mutateNode({
+ *   pluginOptions,
+ *   mdxNode,
+ *   getNode,
+ *   files,
+ *   reporter,
+ *   cache
+ * }) {
+ *   return Promise.each(pluginOptions.gatsbyRemarkPlugins, plugin => {
+ *     const requiredPlugin = require(plugin.resolve);
+ *     if (_.isFunction(requiredPlugin.mutateSource)) {
+ *       return requiredPlugin.mutateSource(
+ *         {
+ *           mdxNode,
+ *           files: fileNodes,
+ *           getNode,
+ *           reporter,
+ *           cache
+ *         },
+ *         plugin.pluginOptions
+ *       );
+ *     } else {
+ *       return Promise.resolve();
+ *     }
+ *   });
+ * }
+ *  */
 
 module.exports = (
-  { type /*store, pathPrefix, getNode, getNodes, cache, reporter*/ },
+  { type /*store*/, pathPrefix, getNode, getNodes, cache, reporter },
   pluginOptions
 ) => {
   if (!type.name.endsWith(`Mdx`)) {
@@ -43,6 +73,33 @@ module.exports = (
   const options = defaultOptions(pluginOptions);
   const compiler = createMdxAstCompiler(options);
 
+  for (let plugin of options.gatsbyRemarkPlugins) {
+    if (!plugin.resolve) {
+      throw new Error(
+        'gatsby-remark plugins must be configured in the form {resolve: "plugin", options: {}}'
+      );
+    }
+    debug("requiring", plugin.resolve);
+    const requiredPlugin = require(plugin.resolve);
+    debug("required", plugin);
+    if (_.isFunction(requiredPlugin.setParserPlugins)) {
+      for (let parserPlugin of requiredPlugin.setParserPlugins(
+        plugin.pluginOptions
+      )) {
+        if (_.isArray(parserPlugin)) {
+          const [parser, parserPluginOptions] = parserPlugin;
+          debug("adding mdPlugin with options", plugin, parserPluginOptions);
+          options.mdPlugins.push([parser, parserPluginOptions]);
+          //          remark = remark.use(parser, options);
+        } else {
+          debug("adding mdPlugin", plugin);
+          options.mdPlugins.push(parserPlugin);
+          //          remark = remark.use(parserPlugin);
+        }
+      }
+    }
+  }
+
   return new Promise((resolve /*, reject*/) => {
     async function getAST(mdxNode) {
       return compiler.parse(stripFrontmatter(mdxNode.rawBody));
@@ -66,6 +123,15 @@ module.exports = (
     }
 
     async function getCode(mdxNode, overrideOptions) {
+      /* await mutateNode({
+       *   pluginOptions,
+       *   mdxNode,
+       *   files: getNodes().filter(n => n.internal.type === `File`),
+       *   getNode,
+       *   reporter,
+       *   cache
+       * }); */
+
       const code = await mdx(mdxNode.rawBody, {
         ...options,
         ...overrideOptions
@@ -106,6 +172,26 @@ ${code}`;
       }
     });
 
+    async function rawMDXWithGatsbyRemarkPlugins(content, opts, mdxNode) {
+      const gatsbyRemarkPluginsAsMDPlugins = await getSourcePluginsAsRemarkPlugins(
+        {
+          gatsbyRemarkPlugins: options.gatsbyRemarkPlugins,
+          mdxNode,
+          //          files,
+          getNode,
+          getNodes,
+          reporter,
+          cache,
+          pathPrefix
+        }
+      );
+
+      return rawMDX(content, {
+        ...options,
+        mdPlugins: options.mdPlugins.concat(gatsbyRemarkPluginsAsMDPlugins)
+      });
+    }
+
     return resolve({
       code: {
         resolve(mdxNode) {
@@ -123,10 +209,24 @@ ${code}`;
             body: {
               type: GraphQLString,
               async resolve(mdxNode) {
+                /* await mutateNode({
+                 *   pluginOptions,
+                 *   mdxNode,
+                 *   files: getNodes().filter(n => n.internal.type === `File`),
+                 *   getNode,
+                 *   reporter,
+                 *   cache
+                 * }); */
+
                 const { content } = grayMatter(mdxNode.rawBody);
-                let code = await rawMDX(content, {
-                  ...options
-                });
+
+                let code = await rawMDXWithGatsbyRemarkPlugins(
+                  content,
+                  {
+                    ...options
+                  },
+                  mdxNode
+                );
 
                 const instance = new BabelPluginPluckImports();
                 const result = babel.transform(code, {
@@ -146,6 +246,7 @@ ${code}`;
                 const CACHE_DIR = `.cache`;
                 const PLUGIN_DIR = `gatsby-mdx`;
                 const REMOTE_MDX_DIR = `remote-mdx-dir`;
+
                 mkdirp.sync(
                   path.join(options.root, CACHE_DIR, PLUGIN_DIR, REMOTE_MDX_DIR)
                 );
@@ -165,9 +266,14 @@ ${code}`;
                     .digest(`hex`);
 
                 const { content } = grayMatter(mdxNode.rawBody);
-                let code = await rawMDX(content, {
-                  ...options
-                });
+
+                let code = await rawMDXWithGatsbyRemarkPlugins(
+                  content,
+                  {
+                    ...options
+                  },
+                  mdxNode
+                );
 
                 const instance = new BabelPluginPluckImports();
                 babel.transform(code, {
diff --git a/packages/gatsby-plugin-mdx/mdx-loader.js b/packages/gatsby-plugin-mdx/mdx-loader.js
@@ -14,6 +14,8 @@ const toMDAST = require("remark-parse");
 const squeeze = require("remark-squeeze-paragraphs");
 
 const mdx = require("./utils/mdx");
+const getSourcePluginsAsRemarkPlugins = require("./utils/get-source-plugins-as-remark-plugins");
+const withDefaultOptions = require("./utils/default-options");
 const debug = require("debug")("gatsby-mdx:mdx-loader");
 
 const DEFAULT_OPTIONS = {
@@ -78,7 +80,16 @@ const hasDefaultExport = (str, options) => {
 
 module.exports = async function(content) {
   const callback = this.async();
-  const { getNodes, pluginOptions } = getOptions(this);
+  const {
+    getNode,
+    getNodes,
+    reporter,
+    cache,
+    pathPrefix,
+    pluginOptions
+  } = getOptions(this);
+
+  const options = withDefaultOptions(pluginOptions);
 
   const fileNode = getNodes().find(
     node =>
@@ -90,9 +101,9 @@ module.exports = async function(content) {
   // get the default layout for the file source group, or if it doesn't
   // exist, the overall default layout
   const defaultLayout = _.get(
-    pluginOptions.defaultLayouts,
+    options.defaultLayouts,
     source,
-    _.get(pluginOptions.defaultLayouts, "default")
+    _.get(options.defaultLayouts, "default")
   );
 
   let code = content;
@@ -110,7 +121,21 @@ export default DefaultLayout
 ${contentWithoutFrontmatter}`;
   }
 
-  code = await mdx(code, pluginOptions);
+  const gatsbyRemarkPluginsAsMDPlugins = await getSourcePluginsAsRemarkPlugins({
+    gatsbyRemarkPlugins: options.gatsbyRemarkPlugins,
+    markdownNode: undefined,
+    //          files,
+    getNode,
+    getNodes,
+    reporter,
+    cache,
+    pathPrefix
+  });
+
+  code = await mdx(code, {
+    ...options,
+    mdPlugins: options.mdPlugins.concat(gatsbyRemarkPluginsAsMDPlugins)
+  });
 
   return callback(
     null,
diff --git a/packages/gatsby-plugin-mdx/package.json b/packages/gatsby-plugin-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gatsby-mdx",
-  "version": "0.0.15",
+  "version": "0.1.0",
   "description": "mdx integration for gatsby",
   "main": "index.js",
   "license": "MIT",
@@ -20,6 +20,7 @@
     "escape-string-regexp": "^1.0.5",
     "fs-extra": "^7.0.0",
     "gray-matter": "^4.0.1",
+    "htmltojsx": "^0.3.0",
     "json5": "^1.0.1",
     "lodash": "^4.17.10",
     "mdast-util-to-string": "^1.0.4",
@@ -28,6 +29,7 @@
     "retext": "^5.0.0",
     "strip-markdown": "^3.0.1",
     "underscore.string": "^3.3.4",
+    "unist-util-map": "^1.0.4",
     "unist-util-remove": "^1.0.1",
     "unist-util-visit": "^1.4.0"
   },
diff --git a/packages/gatsby-plugin-mdx/utils/default-options.js b/packages/gatsby-plugin-mdx/utils/default-options.js
@@ -14,7 +14,8 @@ module.exports = pluginOptions => {
       hastPlugins: [],
       mdPlugins: [],
       transformers: {},
-      root: process.cwd()
+      root: process.cwd(),
+      gatsbyRemarkPlugins: []
     },
     pluginOptions
   );
diff --git a/packages/gatsby-plugin-mdx/utils/get-source-plugins-as-remark-plugins.js b/packages/gatsby-plugin-mdx/utils/get-source-plugins-as-remark-plugins.js
@@ -0,0 +1,99 @@
+const visit = require("unist-util-visit");
+const _ = require("lodash");
+const HTMLtoJSX = require("htmltojsx");
+const map = require("unist-util-map");
+const debug = require("debug")("get-source-plugins-as-remark-plugins");
+
+let fileNodes;
+
+const htmlToJSXConverter = new HTMLtoJSX({
+  createClass: false
+});
+
+// ensure only one `/` in new url
+const withPathPrefix = (url, pathPrefix) =>
+  (pathPrefix + url).replace(/\/\//, `/`);
+
+const isJSXRegex = /<[A-Z]/g;
+const htmlToJSXPlugin = () =>
+  function transformer(ast) {
+    const astMapped = map(ast, node => {
+      if (node.type === "html" && !isJSXRegex.test(node.value)) {
+        return { ...node, value: htmlToJSXConverter.convert(node.value) };
+      } else {
+        return node;
+      }
+    });
+    return astMapped;
+  };
+
+module.exports = async function getSourcePluginsAsRemarkPlugins({
+  gatsbyRemarkPlugins,
+  mdxNode,
+  getNode,
+  getNodes,
+  reporter,
+  cache,
+  pathPrefix
+}) {
+  debug("getSourcePluginsAsRemarkPlugins");
+  let pathPlugin = undefined;
+  if (pathPrefix) {
+    pathPlugin = () =>
+      async function transformer(markdownAST) {
+        // Ensure relative links include `pathPrefix`
+        visit(markdownAST, `link`, node => {
+          if (
+            node.url &&
+            node.url.startsWith(`/`) &&
+            !node.url.startsWith(`//`)
+          ) {
+            // TODO: where does withPathPrefix
+            node.url = withPathPrefix(node.url, pathPrefix);
+          }
+        });
+        return markdownAST;
+      };
+  }
+
+  if (process.env.NODE_ENV !== `production` || !fileNodes) {
+    fileNodes = getNodes().filter(n => n.internal.type === `File`);
+  }
+
+  // return list of mdPlugins
+  const userPlugins = gatsbyRemarkPlugins
+    .filter(plugin => {
+      if (_.isFunction(require(plugin.resolve))) {
+        return true;
+      } else {
+        debug("userPlugins: filtering out", plugin);
+        return false;
+      }
+    })
+    .map(plugin => {
+      debug("userPlugins: contructing remark plugin for ", plugin);
+      const requiredPlugin = require(plugin.resolve);
+      return () =>
+        async function transformer(markdownAST) {
+          requiredPlugin(
+            {
+              markdownAST,
+              markdownNode: mdxNode,
+              getNode,
+              files: fileNodes,
+              pathPrefix,
+              reporter,
+              cache
+            },
+            plugin.pluginOptions || {}
+          );
+          return markdownAST;
+        };
+    });
+
+  if (pathPlugin) {
+    return [pathPlugin, ...userPlugins, htmlToJSXPlugin];
+  } else {
+    return [...userPlugins, htmlToJSXPlugin];
+  }
+};
