@hashicorp/remark-plugins - npm Package Compare versions

Comparing version 3.2.0-canary.0 to 3.2.0-canary.1

package.json

 {
   "name": "@hashicorp/remark-plugins",
   "description": "A potpourri of remark plugins used to process .mdx files",
-  "version": "3.2.0-canary.0",
+  "version": "3.2.0-canary.1",
   "author": "Jeff Escalante",
@@ -11,5 +11,6 @@ "bugs": "https://github.com/hashicorp/remark-plugins/issues",
   "dependencies": {
+    "@mdx-js/util": "1.6.22",
     "github-slugger": "^1.3.0",
-    "remark": "^12.0.1",
-    "remark-mdx": "^1.6.22",
+    "remark": "12.0.1",
+    "remark-mdx": "1.6.22",
     "to-vfile": "^6.1.0",
@@ -16,0 +17,0 @@ "unist-util-flatmap": "^1.0.0",

plugins/include-markdown/index.js

@@ -6,6 +6,7 @@ const path = require('path')
 const { readSync } = require('to-vfile')
+const mdAstToMdxAst = require('./md-ast-to-mdx-ast')
 
 module.exports = function includeMarkdownPlugin({
   resolveFrom,
-  mdxPartials,
+  resolveMdx,
 } = {}) {
@@ -40,10 +41,9 @@ return function transformer(tree, file) {
         // return the file contents in place of the @include
-        // this takes a couple steps because we process the file contents
-        // using remark
+        // (takes a couple steps because we're processing includes with remark)
         const processor = remark()
         // if the include is MDX, and the plugin consumer has confirmed their
-        // intent to stringify MDX nodes (eg "jsx"), then use remarkMdx to support
+        // ability to stringify MDX nodes (eg "jsx"), then use remarkMdx to support
         // custom components (which would otherwise appear as likely invalid HTML nodes)
         const isMdx = includePath.match(/\.mdx$/)
-        if (isMdx && mdxPartials) processor.use(remarkMdx)
+        if (isMdx && resolveMdx) processor.use(remarkMdx).use(mdAstToMdxAst)
         // use the includeMarkdown plugin to allow recursive includes
@@ -50,0 +50,0 @@ processor.use(includeMarkdownPlugin, { resolveFrom })

plugins/include-markdown/README.md

@@ -76,4 +76,8 @@ # Include Markdown Plugin
 
-This plugin accepts one optional config option: `resolveFrom`. If you pass this option along with a path, all partials will resolve from the path that was passed in. For example:
+This plugin accepts two optional config options: `resolveFrom` and `resolveMdx`.
 
+#### `resolveFrom`
+
+If you pass this option along with a path, all partials will resolve from the path that was passed in. For example:
+
 ```js
@@ -85,2 +89,43 @@ remark().use(includeMarkdown, { resolveFrom: path.join(__dirname, 'partials') })
 
+#### `resolveFrom`
+
+If you pass `true` for this option, `.mdx` partials will be processed using [`remark-mdx`](https://github.com/mdx-js/mdx/tree/main/packages/remark-mdx). This allows the use of custom components within partials. For example, with `next-mdx-remote`:
+
+```js
+import { serialize } from 'next-mdx-remote/serialize'
+import { MDXRemote } from 'next-mdx-remote'
+import { includeMarkdown } from '@hashicorp/remark-plugins'
+import CustomComponent from '../components/custom-component'
+
+const components = { CustomComponent }
+
+export default function TestPage({ source }) {
+  return (
+    <div className="wrapper">
+      <MDXRemote {...source} components={components} />
+    </div>
+  )
+}
+
+export async function getStaticProps() {
+  // Imagine "included-file.mdx" has <CustomComponent /> in it...
+  // it will render as expected, since the @include extension
+  // is .mdx and resolveMdx is true.
+  const source = 'Some **mdx** text.\n\n@include "included-file.mdx"'
+  const mdxSource = await serialize(source, {
+    mdxOptions: {
+      remarkPlugins: [[includeMarkdown, { resolveMdx: true }]],
+    },
+  })
+  return { props: { source: mdxSource } }
+}
+```
+
+**Note**: this option should only be used in MDX contexts. This option will likely break where `remark-stringify` is used as the stringify plugin, such as when using `remark` directly.
+
+```js
+// 🚨 DON'T DO THIS - it will likely just break.
+// remark().use(includeMarkdown, { resolveMdx: true })
+```
+
 ### Ordering
@@ -100,2 +145,2 @@
 
-...what will happen is that all your text will be capitalized _except_ for the text in includeed files. And on top of that, the include plugin wouldn't resolve the files properly, because it capitalized the word "include", which is the wrong syntax. So usually you want to make sure this plugin comes first in your plugin stack.
+...what will happen is that all your text will be capitalized _except_ for the text in included files. And on top of that, the include plugin wouldn't resolve the files properly, because it capitalized the word "include", which is the wrong syntax. So usually you want to make sure this plugin comes first in your plugin stack.

No alert changes

Improved metrics

Total package byte prevSize

40755

increased by4.91%

Number of package files

19

increased by5.56%

Lines of code

520

increased by2.16%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Added@mdx-js/util@1.6.22

• Updatedremark@12.0.1

• Updatedremark-mdx@1.6.22