From e7ea583fef6a3f5d369d2355bc58d47a3a74229e Mon Sep 17 00:00:00 2001 From: Avi Goldman Date: Thu, 6 Sep 2018 17:51:44 -0700 Subject: [PATCH] gatsby methods clean up (#111) --- packages/gatsby-plugin-mdx/gatsby-node.js | 105 ++---------------- .../gatsby/create-webpack-config.js | 69 ++++++++++++ .../{ => gatsby}/extend-node-type.js | 8 +- .../{ => gatsby}/on-create-node.js | 4 +- .../gatsby/on-create-page.js | 34 ++++++ packages/gatsby-plugin-mdx/index.js | 6 +- 6 files changed, 121 insertions(+), 105 deletions(-) create mode 100644 packages/gatsby-plugin-mdx/gatsby/create-webpack-config.js rename packages/gatsby-plugin-mdx/{ => gatsby}/extend-node-type.js (97%) rename packages/gatsby-plugin-mdx/{ => gatsby}/on-create-node.js (91%) create mode 100644 packages/gatsby-plugin-mdx/gatsby/on-create-page.js diff --git a/packages/gatsby-plugin-mdx/gatsby-node.js b/packages/gatsby-plugin-mdx/gatsby-node.js index 54aa53a2beb4d..3437b58625d46 100644 --- a/packages/gatsby-plugin-mdx/gatsby-node.js +++ b/packages/gatsby-plugin-mdx/gatsby-node.js @@ -1,120 +1,26 @@ const path = require("path"); -const fs = require("fs-extra"); -const merge = require("lodash/merge"); -const escapeStringRegexp = require("escape-string-regexp"); const defaultOptions = require("./utils/default-options"); -const extractExports = require("./utils/extract-exports"); const mdx = require("./utils/mdx"); /** * Create Mdx nodes from MDX files. */ -exports.onCreateNode = require("./on-create-node"); +exports.onCreateNode = require("./gatsby/on-create-node"); /** * Add additional fields to MDX nodes */ -exports.setFieldsOnGraphQLNodeType = require("./extend-node-type"); +exports.setFieldsOnGraphQLNodeType = require("./gatsby/extend-node-type"); /** * Add frontmatter as page context for MDX pages */ -exports.onCreatePage = async ({ page, actions }, pluginOptions) => { - const { createPage, deletePage } = actions; - const { extensions, ...options } = defaultOptions(pluginOptions); - const ext = path.extname(page.component); - - if (extensions.includes(ext)) { - const content = await fs.readFile(page.component, "utf8"); - const code = await mdx(content, options); - - // grab the exported frontmatter - const { frontmatter } = extractExports(code); - - deletePage(page); - createPage( - merge( - { - context: { - frontmatter: { - ...frontmatter - } - } - }, - page - ) - ); - } -}; +exports.onCreatePage = require("./gatsby/on-create-page"); /** * Add the webpack config for loading MDX files */ -exports.onCreateWebpackConfig = ( - { stage, loaders, plugins, actions, getNodes }, - pluginOptions -) => { - const options = defaultOptions(pluginOptions); - const testPattern = new RegExp( - options.extensions.map(ext => `${escapeStringRegexp(ext)}$`).join("|") - ); - const mdxTestPattern = new RegExp( - options.extensions - .concat(".deck-mdx") - .map(ext => `${escapeStringRegexp(ext)}$`) - .join("|") - ); - - const decks = options.decks.map(ext => `${escapeStringRegexp(ext)}`); - - actions.setWebpackConfig({ - module: { - rules: [ - { - test: /\.js$/, - include: path.resolve(__dirname, ".cache/gatsby-mdx"), - use: [loaders.js()] - }, - { - test: testPattern, - exclude: decks, - use: [ - loaders.js(), - { - loader: "gatsby-mdx/mdx-loader", - options: { - getNodes, - pluginOptions: options - } - } - ] - }, - { - test: mdxTestPattern, - include: decks, - use: [ - loaders.js(), - { loader: "gatsby-mdx/mdx-deck-post-loader" }, - { loader: "mdx-deck/loader" } - ] - }, - { - test: /.deck-mdx$/, - use: [ - loaders.js(), - { loader: "gatsby-mdx/mdx-deck-post-loader" }, - { loader: "mdx-deck/loader" } - ] - } - ] - }, - plugins: [ - plugins.define({ - __DEVELOPMENT__: stage === `develop` || stage === `develop-html` - }) - ] - }); -}; +exports.onCreateWebpackConfig = require("./gatsby/create-webpack-config"); /** * Add the MDX extensions as resolvable. This is how the page creator @@ -140,6 +46,9 @@ exports.preprocessSource = async function preprocessSource( return null; }; +/** + * Required config for mdx to function + */ exports.onCreateBabelConfig = ({ actions }) => { actions.setBabelPlugin({ name: `@babel/plugin-proposal-object-rest-spread` diff --git a/packages/gatsby-plugin-mdx/gatsby/create-webpack-config.js b/packages/gatsby-plugin-mdx/gatsby/create-webpack-config.js new file mode 100644 index 0000000000000..9bbec5ac68beb --- /dev/null +++ b/packages/gatsby-plugin-mdx/gatsby/create-webpack-config.js @@ -0,0 +1,69 @@ +const path = require("path"); +const escapeStringRegexp = require("escape-string-regexp"); +const defaultOptions = require("../utils/default-options"); + +module.exports = ( + { stage, loaders, plugins, actions, getNodes }, + pluginOptions +) => { + const options = defaultOptions(pluginOptions); + const testPattern = new RegExp( + options.extensions.map(ext => `${escapeStringRegexp(ext)}$`).join("|") + ); + const mdxTestPattern = new RegExp( + options.extensions + .concat(".deck-mdx") + .map(ext => `${escapeStringRegexp(ext)}$`) + .join("|") + ); + + const decks = options.decks.map(ext => `${escapeStringRegexp(ext)}`); + + actions.setWebpackConfig({ + module: { + rules: [ + { + test: /\.js$/, + include: path.resolve(__dirname, ".cache/gatsby-mdx"), + use: [loaders.js()] + }, + { + test: testPattern, + exclude: decks, + use: [ + loaders.js(), + { + loader: "gatsby-mdx/mdx-loader", + options: { + getNodes, + pluginOptions: options + } + } + ] + }, + { + test: mdxTestPattern, + include: decks, + use: [ + loaders.js(), + { loader: "gatsby-mdx/mdx-deck-post-loader" }, + { loader: "mdx-deck/loader" } + ] + }, + { + test: /.deck-mdx$/, + use: [ + loaders.js(), + { loader: "gatsby-mdx/mdx-deck-post-loader" }, + { loader: "mdx-deck/loader" } + ] + } + ] + }, + plugins: [ + plugins.define({ + __DEVELOPMENT__: stage === `develop` || stage === `develop-html` + }) + ] + }); +}; diff --git a/packages/gatsby-plugin-mdx/extend-node-type.js b/packages/gatsby-plugin-mdx/gatsby/extend-node-type.js similarity index 97% rename from packages/gatsby-plugin-mdx/extend-node-type.js rename to packages/gatsby-plugin-mdx/gatsby/extend-node-type.js index 811da0333cfaf..5f272e802dc2c 100644 --- a/packages/gatsby-plugin-mdx/extend-node-type.js +++ b/packages/gatsby-plugin-mdx/gatsby/extend-node-type.js @@ -27,10 +27,10 @@ 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 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; /* diff --git a/packages/gatsby-plugin-mdx/on-create-node.js b/packages/gatsby-plugin-mdx/gatsby/on-create-node.js similarity index 91% rename from packages/gatsby-plugin-mdx/on-create-node.js rename to packages/gatsby-plugin-mdx/gatsby/on-create-node.js index 05034690ab272..0de7603050ad0 100644 --- a/packages/gatsby-plugin-mdx/on-create-node.js +++ b/packages/gatsby-plugin-mdx/gatsby/on-create-node.js @@ -1,8 +1,8 @@ const { isFunction } = require("lodash"); const debug = require("debug")("gatsby-mdx:on-create-node"); -const defaultOptions = require("./utils/default-options"); -const createMDXNode = require("./utils/create-mdx-node"); +const defaultOptions = require("../utils/default-options"); +const createMDXNode = require("../utils/create-mdx-node"); module.exports = async ( { node, getNode, loadNodeContent, actions, createNodeId }, diff --git a/packages/gatsby-plugin-mdx/gatsby/on-create-page.js b/packages/gatsby-plugin-mdx/gatsby/on-create-page.js new file mode 100644 index 0000000000000..74389722d4e75 --- /dev/null +++ b/packages/gatsby-plugin-mdx/gatsby/on-create-page.js @@ -0,0 +1,34 @@ +const path = require("path"); +const fs = require("fs-extra"); +const merge = require("lodash/merge"); +const defaultOptions = require("../utils/default-options"); +const extractExports = require("../utils/extract-exports"); +const mdx = require("../utils/mdx"); + +module.exports = async ({ page, actions }, pluginOptions) => { + const { createPage, deletePage } = actions; + const { extensions, ...options } = defaultOptions(pluginOptions); + const ext = path.extname(page.component); + + if (extensions.includes(ext)) { + const content = await fs.readFile(page.component, "utf8"); + const code = await mdx(content, options); + + // grab the exported frontmatter + const { frontmatter } = extractExports(code); + + deletePage(page); + createPage( + merge( + { + context: { + frontmatter: { + ...frontmatter + } + } + }, + page + ) + ); + } +}; diff --git a/packages/gatsby-plugin-mdx/index.js b/packages/gatsby-plugin-mdx/index.js index 172f1ae6a468c..42bd453dfd7e5 100644 --- a/packages/gatsby-plugin-mdx/index.js +++ b/packages/gatsby-plugin-mdx/index.js @@ -1 +1,5 @@ -// noop +/** + * Welcome to gastby-mdx! + * + * Start reading in gatsby-node.js + */