use cache instead of hardcoding path (#310)

packages/gatsby-mdx/constants.js

@@ -1,11 +1,7 @@
-const path = require("path");
-
-const CACHE_LOCATION = path.join(".cache", "gatsby-mdx");
-const MDX_WRAPPERS_LOCATION = path.join(CACHE_LOCATION, "mdx-wrappers-dir");
-const MDX_SCOPES_LOCATION = path.join(CACHE_LOCATION, "mdx-scopes-dir");
+const MDX_WRAPPERS_LOCATION = "mdx-wrappers-dir";
+const MDX_SCOPES_LOCATION = "mdx-scopes-dir";
 
 module.exports = {
-  CACHE_LOCATION,
   MDX_WRAPPERS_LOCATION,
   MDX_SCOPES_LOCATION
 };

packages/gatsby-mdx/gatsby-node.js

@@ -45,15 +45,14 @@ exports.onCreateBabelConfig = ({ actions }) => {
   });
 };
 
-exports.onPreBootstrap = ({ store }) => {
-  const { directory } = store.getState().program;
-  mkdirp.sync(path.join(directory, MDX_SCOPES_LOCATION));
+exports.onPreBootstrap = ({ cache }) => {
+  mkdirp.sync(path.join(cache.directory, MDX_SCOPES_LOCATION));
 };
 
-exports.onPostBootstrap = (_, pluginOptions) => {
+exports.onPostBootstrap = ({ cache }, pluginOptions) => {
   if (pluginOptions.globalScope) {
     fs.writeFileSync(
-      `${MDX_SCOPES_LOCATION}/global-scope.js`,
+      path.join(cache.directory, MDX_SCOPES_LOCATION, `global-scope.js`),
       pluginOptions.globalScope
     );
   }

packages/gatsby-mdx/gatsby/create-webpack-config.js

@@ -3,7 +3,7 @@ const escapeStringRegexp = require("escape-string-regexp");
 const defaultOptions = require("../utils/default-options");
 
 module.exports = (
-  { stage, loaders, actions, plugins, ...other },
+  { stage, loaders, actions, plugins, cache, ...other },
   pluginOptions
 ) => {
   const options = defaultOptions(pluginOptions);
@@ -16,7 +16,7 @@ module.exports = (
       rules: [
         {
           test: /\.js$/,
-          include: path.resolve(__dirname, ".cache/gatsby-mdx"),
+          include: cache.directory,
           use: [loaders.js()]
         },
         {
@@ -38,6 +38,19 @@ module.exports = (
             }
           ]
         },
+        {
+          test: /mdx-scopes\.js$/,
+          include: path.dirname(require.resolve("gatsby-mdx")),
+          use: [
+            loaders.js(),
+            {
+              loader: path.join("gatsby-mdx", "loaders", "mdx-scopes"),
+              options: {
+                cache: cache
+              }
+            }
+          ]
+        },
         {
           test: /mdx-wrappers\.js$/,
           include: path.dirname(require.resolve("gatsby-mdx")),
@@ -58,6 +71,7 @@ module.exports = (
             {
               loader: path.join("gatsby-mdx", "loaders", "mdx-loader"),
               options: {
+                cache: cache,
                 ...other,
                 pluginOptions: options
               }

packages/gatsby-mdx/gatsby/on-create-node.js

@@ -22,7 +22,6 @@ module.exports = async (
     createNodeId,
     getNode,
     getNodes,
-    store,
     reporter,
     cache,
     pathPrefix
@@ -70,19 +69,19 @@ module.exports = async (
     options
   });
   await cacheScope({
+    cache,
     scopeIdentifiers,
     scopeImports,
     createContentDigest: contentDigest,
-    directory: store.getState().program.directory,
     parentNode: node
   });
 };
 
 async function cacheScope({
+  cache,
   scopeImports,
   scopeIdentifiers,
   createContentDigest,
-  directory,
   parentNode
 }) {
   // scope files are the imports from an MDX file pulled out and re-exported.
@@ -94,7 +93,8 @@ export default { ${scopeIdentifiers.join(", ")} }`;
   // relative to new .cache location
   if (parentNode.internal.type === "File") {
     const instance = new BabelPluginTransformRelativeImports({
-      parentFilepath: parentNode.dir
+      parentFilepath: parentNode.dir,
+      cache: cache
     });
     const result = babel.transform(scopeFileContent, {
       configFile: false,
@@ -104,7 +104,7 @@ export default { ${scopeIdentifiers.join(", ")} }`;
   }
 
   const filePath = path.join(
-    directory,
+    cache.directory,
     MDX_SCOPES_LOCATION,
     `${createContentDigest(scopeFileContent)}.js`
   );
@@ -115,7 +115,7 @@ export default { ${scopeIdentifiers.join(", ")} }`;
 const declare = require("@babel/helper-plugin-utils").declare;
 
 class BabelPluginTransformRelativeImports {
-  constructor({ parentFilepath }) {
+  constructor({ parentFilepath, cache }) {
     this.plugin = declare(api => {
       api.assertVersion(7);
 
@@ -125,7 +125,7 @@ class BabelPluginTransformRelativeImports {
             if (node.value.startsWith(".")) {
               const valueAbsPath = path.resolve(parentFilepath, node.value);
               const replacementPath = path.relative(
-                MDX_SCOPES_LOCATION,
+                path.join(cache.directory, MDX_SCOPES_LOCATION),
                 valueAbsPath
               );
               node.value = replacementPath;

packages/gatsby-mdx/loaders/mdx-scopes.js

@@ -1,19 +1,24 @@
 const fs = require("fs");
 const path = require("path");
 const slash = require("slash");
+const loaderUtils = require("loader-utils");
+const { MDX_SCOPES_LOCATION } = require("../constants");
 
-module.exports = () => {
-  const files = fs.readdirSync("./.cache/gatsby-mdx/mdx-scopes-dir");
-  const abs = path.resolve("./.cache/gatsby-mdx/mdx-scopes-dir");
+module.exports = function() {
+  const { cache } = loaderUtils.getOptions(this);
+  const abs = path.join(cache.directory, MDX_SCOPES_LOCATION);
+  const files = fs.readdirSync(abs);
   return (
     files
       .map(
         (file, i) =>
-          `const scope_${i} = require('${slash(path.join(abs, file))}').default;`
+          `const scope_${i} = require('${slash(
+            path.join(abs, file)
+          )}').default;`
       )
       .join("\n") +
-      `export default 
-        Object.assign({}, ${files.map((_, i) => 'scope_' + i).join(',\n')} )
+    `export default
+        Object.assign({}, ${files.map((_, i) => "scope_" + i).join(",\n")} )
     `
   );
 };

packages/gatsby-mdx/utils/wrap-root-render-html-entry.js

@@ -1,7 +1,7 @@
 /* global __MDX_CONTENT__ */
 import React from "react";
 import { renderToStaticMarkup } from "react-dom/server";
-import scopeContexts from "../loaders/mdx-scopes!";
+import scopeContexts from "../loaders/mdx-scopes";
 import MDXRenderer from "../mdx-renderer";
 import { plugins as wrappers } from "../loaders/mdx-wrappers";
 import { pipe } from "lodash/fp";

packages/gatsby-mdx/wrap-root-element.js

@@ -2,9 +2,7 @@ import React from "react";
 import { MDXProvider } from "@mdx-js/tag";
 import { withMDXComponents } from "@mdx-js/tag/dist/mdx-provider";
 import { MDXScopeProvider } from "./context";
-// this import, unlike the more complicated one below, executes the
-// mdx-scopes loader with no arguments. No funny-business.
-import scopeContexts from "./loaders/mdx-scopes!";
+
 /**
  * so, this import is weird right?
  *
@@ -27,6 +25,7 @@ import scopeContexts from "./loaders/mdx-scopes!";
  * Submit a PR
  */
 import { plugins as mdxPlugins } from "./loaders/mdx-components";
+import scopeContexts from "./loaders/mdx-scopes";
 
 const componentsAndGuards = {};