From 814e34c9ccfe0db80c8310af665f7dec3f2e45ae Mon Sep 17 00:00:00 2001 From: John Otander Date: Wed, 13 Mar 2019 13:51:50 -0600 Subject: [PATCH] Rename mdPlugins/hastPlugins to remarkPlugins/rehypePlugins Closes #465 --- .eslintignore | 4 ++++ docs/advanced/plugins.md | 12 ++++++------ docs/getting-started/index.md | 4 ++-- examples/vue/README.md | 16 +++++++++++----- packages/mdx/index.js | 27 +++++++++++++++++++++++---- packages/mdx/test/index.test.js | 16 ++++++++-------- packages/runtime/src/index.js | 8 ++++---- packages/runtime/test/index.test.js | 4 ++-- packages/vue-loader/package.json | 2 +- packages/vue/package.json | 2 +- 10 files changed, 62 insertions(+), 33 deletions(-) diff --git a/.eslintignore b/.eslintignore index 46678186a..1c104578c 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,3 +3,7 @@ dist build .next artifacts + +# tmp +examples/vue +packages/vue diff --git a/docs/advanced/plugins.md b/docs/advanced/plugins.md index 0977ecc06..a543531ef 100644 --- a/docs/advanced/plugins.md +++ b/docs/advanced/plugins.md @@ -22,10 +22,10 @@ that can be used in React/Preact/Vue/etc. ### Options -| Name | Type | Required | Description | -| ------------- | -------- | -------- | ------------------------------------------------- | -| `mdPlugins` | Array\[] | `false` | Array of remark plugins to manipulate the MDAST | -| `hastPlugins` | Array\[] | `false` | Array of rehype plugins to manipulate the MDXHAST | +| Name | Type | Required | Description | +| ----------------- | -------- | -------- | ------------------------------------------------- | +| `remarkPlugins` | Array\[] | `false` | Array of remark plugins to manipulate the MDAST | +| `rehypePlugins` | Array\[] | `false` | Array of rehype plugins to manipulate the MDXHAST | #### Specifying plugins @@ -48,7 +48,7 @@ module.exports = { { loader: '@mdx-js/loader', options: { - mdPlugins: [images, emoji] + remarkPlugins: [images, emoji] } } ] @@ -78,7 +78,7 @@ If a plugin needs specific options, use the `[plugin, pluginOptions]` syntax. ```js mdx.sync(mdxText, { - mdPlugins: [ + remarkPlugins: [ images, [emoji, { padSpaceAfter: true }] }) diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md index 167581018..6fdac27b7 100644 --- a/docs/getting-started/index.md +++ b/docs/getting-started/index.md @@ -285,8 +285,8 @@ If you would like to see more advanced usage, see the ##### Default exports -Sometimes from an MDX file you might want to override the wrapper. This is especially useful -when you want to override layout for a single entrypoint at the page level. To achieve this +Sometimes from an MDX file you might want to override the wrapper. This is especially useful +when you want to override layout for a single entrypoint at the page level. To achieve this you can use the ES default [export][] and it will wrap your MDX document _instead_ of the wrapper passed to MDXProvider. diff --git a/examples/vue/README.md b/examples/vue/README.md index 1125c701e..23de92f03 100644 --- a/examples/vue/README.md +++ b/examples/vue/README.md @@ -1,29 +1,35 @@ # vue ## Project setup -``` + +```sh yarn install ``` ### Compiles and hot-reloads for development -``` + +```sh yarn run serve ``` ### Compiles and minifies for production -``` + +```sh yarn run build ``` ### Run your tests -``` + +```sh yarn run test ``` ### Lints and fixes files -``` + +```sh yarn run lint ``` ### Customize configuration + See [Configuration Reference](https://cli.vuejs.org/config/). diff --git a/packages/mdx/index.js b/packages/mdx/index.js index 76767c965..6b7bc14da 100644 --- a/packages/mdx/index.js +++ b/packages/mdx/index.js @@ -10,13 +10,22 @@ const mdxHastToJsx = require('./mdx-hast-to-jsx') const DEFAULT_OPTIONS = { footnotes: true, - mdPlugins: [], - hastPlugins: [], + remarkPlugins: [], + rehypePlugins: [], compilers: [] } function createMdxAstCompiler(options) { const mdPlugins = options.mdPlugins + const remarkPlugins = options.remarkPlugins + const plugins = mdPlugins || remarkPlugins + + if (mdPlugins) { + console.error(` + @mdx-js/mdx: The mdPlugins option has been deprecated in favor of remarkPlugins + Support for mdPlugins will be removed in MDX v2 + `) + } const fn = unified() .use(toMDAST, options) @@ -24,7 +33,7 @@ function createMdxAstCompiler(options) { .use(squeeze, options) .use(toMDXAST, options) - mdPlugins.forEach(plugin => { + plugins.forEach(plugin => { // Handle [plugin, pluginOptions] syntax if (Array.isArray(plugin) && plugin.length > 1) { fn.use(plugin[0], plugin[1]) @@ -40,6 +49,16 @@ function createMdxAstCompiler(options) { function applyHastPluginsAndCompilers(compiler, options) { const hastPlugins = options.hastPlugins + const rehypePlugins = options.rehypePlugins + const plugins = hastPlugins || rehypePlugins + + if (hastPlugins) { + console.error(` + @mdx-js/mdx: The hastPlugins option has been deprecated in favor of rehypePlugins + Support for hastPlugins will be removed in MDX v2 + `) + } + const compilers = options.compilers // Convert raw nodes into HAST @@ -53,7 +72,7 @@ function applyHastPluginsAndCompilers(compiler, options) { }) }) - hastPlugins.forEach(plugin => { + plugins.forEach(plugin => { // Handle [plugin, pluginOptions] syntax if (Array.isArray(plugin) && plugin.length > 1) { compiler.use(plugin[0], plugin[1]) diff --git a/packages/mdx/test/index.test.js b/packages/mdx/test/index.test.js index 928ba0394..4c2ff4689 100644 --- a/packages/mdx/test/index.test.js +++ b/packages/mdx/test/index.test.js @@ -122,7 +122,7 @@ it('Should render blockquote correctly', async () => { it('Should properly expose comments', async () => { const result = await mdx('', { - hastPlugins: [ + rehypePlugins: [ () => tree => { tree.children[0].value = 'bar' } @@ -146,7 +146,7 @@ it('Should preserve newlines in code blocks', async () => { COPY start.sh /home/start.sh \`\`\` `, - {hastPlugins: [prism]} + {rehypePlugins: [prism]} ) expect(result).toContain('{`# Add main script`}{`\n`}') @@ -234,8 +234,8 @@ $$ $$ `, { - mdPlugins: [math], - hastPlugins: [katex] + remarkPlugins: [math], + rehypePlugins: [katex] } ) expect(result).not.toContain('"style":"') @@ -250,8 +250,8 @@ $$ $$ `, { - mdPlugins: [math], - hastPlugins: [katex] + remarkPlugins: [math], + rehypePlugins: [katex] } ) expect(result).toContain('"aria-hidden":"true"') @@ -298,7 +298,7 @@ it('Should render elements without wrapping blank new lines', async () => { test('Should await and render async plugins', async () => { const result = await mdx(fixtureBlogPost, { - hastPlugins: [ + rehypePlugins: [ _options => tree => { // eslint-disable-next-line require-await return (async () => { @@ -316,7 +316,7 @@ test('Should await and render async plugins', async () => { test('Should process filepath and pass it to the plugins', async () => { const result = await mdx(fixtureBlogPost, { filepath: 'hello.mdx', - hastPlugins: [ + rehypePlugins: [ _options => (tree, fileInfo) => { expect(fileInfo.path).toBe('hello.mdx') const headingNode = select('h1', tree) diff --git a/packages/runtime/src/index.js b/packages/runtime/src/index.js index 0deaf7ee0..94737b0e8 100644 --- a/packages/runtime/src/index.js +++ b/packages/runtime/src/index.js @@ -7,8 +7,8 @@ import {MDXProvider} from '@mdx-js/tag' export default ({ scope = {}, components = {}, - mdPlugins = [], - hastPlugins = [], + remarkPlugins = [], + rehypePlugins = [], children, ...props }) => { @@ -22,8 +22,8 @@ export default ({ const jsx = mdx .sync(children, { - mdPlugins, - hastPlugins, + remarkPlugins, + rehypePlugins, skipExport: true }) .trim() diff --git a/packages/runtime/test/index.test.js b/packages/runtime/test/index.test.js index d5f7150a0..ef93e2577 100644 --- a/packages/runtime/test/index.test.js +++ b/packages/runtime/test/index.test.js @@ -57,8 +57,8 @@ describe('renders MDX with the proper components', () => { it('supports remark and rehype plugins', () => { const result = render(