feat: support vfile input (#179)

* feat: support vfile input * handle vfile without path * improve type * fix: handle relative vfile path Co-authored-by: Kent C. Dodds <[email protected]>
kentcdodds · Dec 24, 2022 · 7a572bf · 7a572bf
1 parent 8f0b681
commit 7a572bf
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -46,7 +46,8 @@
     "gray-matter": "^4.0.3",
     "remark-frontmatter": "^4.0.1",
     "remark-mdx-frontmatter": "^1.1.1",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "vfile": "^5.3.2"
   },
   "peerDependencies": {
     "esbuild": "0.*"

diff --git a/src/__tests__/index.js b/src/__tests__/index.js
@@ -6,6 +6,7 @@ import React from 'react'
 import rtl from '@testing-library/react'
 import leftPad from 'left-pad'
 import {remarkMdxImages} from 'remark-mdx-images'
+import {VFile} from 'vfile'
 import {bundleMDX} from '../index.js'
 import {getMDXComponent, getMDXExport} from '../client.js'
 
@@ -469,6 +470,61 @@ Local Content
   )
 })
 
+test('should support mdx from VFile', async () => {
+  const mdxSource = `# Heading`
+
+  const vfile = new VFile({value: mdxSource, path: '/data/mdx/my-post.mdx'})
+
+  const {code} = await bundleMDX({source: vfile})
+
+  const Component = getMDXComponent(code)
+
+  const {container} = render(React.createElement(Component))
+
+  assert.is(container.innerHTML, '<h1>Heading</h1>')
+})
+
+test('should support mdx from VFile without path', async () => {
+  const mdxSource = `# Heading`
+
+  const vfile = new VFile({value: mdxSource})
+
+  const {code} = await bundleMDX({source: vfile})
+
+  const Component = getMDXComponent(code)
+
+  const {container} = render(React.createElement(Component))
+
+  assert.is(container.innerHTML, '<h1>Heading</h1>')
+})
+
+test('should provide VFile path to plugins', async () => {
+  const mdxSource = `# Heading`
+
+  const vfile = new VFile({value: mdxSource, path: '/data/mdx/my-post.mdx'})
+
+  /** @type {import('unified').Plugin} */
+  function plugin() {
+    return function transformer(tree, file) {
+      assert.is(file.path, '/data/mdx/my-post.mdx' )
+    }
+  }
+
+  const {code} = await bundleMDX({
+    source: vfile,
+    mdxOptions(options) {
+      options.remarkPlugins = [plugin]
+      return options
+    },
+  })
+
+  const Component = getMDXComponent(code)
+
+  const {container} = render(React.createElement(Component))
+
+  assert.is(container.innerHTML, '<h1>Heading</h1>')
+})
+
 test('should work with react-dom api', async () => {
   const mdxSource = `
 import Demo from './demo'

diff --git a/src/index.js b/src/index.js
@@ -56,13 +56,29 @@ async function bundleMDX({
     )
   }
 
+  /** @type {(vfile: unknown) => vfile is import('vfile').VFile} */
+  function isVFile(vfile) {
+    return typeof vfile === 'object' && vfile !== null && 'value' in vfile
+  }
+
   if (typeof source === 'string') {
     // The user has supplied MDX source.
     /** @type any */ // Slight type hack to get the graymatter front matter typed correctly.
     const gMatter = grayMatter(source, grayMatterOptions({}))
     matter = gMatter
     entryPath = path.join(cwd, `./_mdx_bundler_entry_point-${uuid()}.mdx`)
     absoluteFiles[entryPath] = source
+  } else if (isVFile(source)) {
+    const value = String(source.value)
+    /** @type any */ // Slight type hack to get the graymatter front matter typed correctly.
+    const gMatter = grayMatter(value, grayMatterOptions({}))
+    matter = gMatter
+    entryPath = source.path
+      ? path.isAbsolute(source.path)
+        ? source.path
+        : path.join(source.cwd, source.path)
+      : path.join(cwd, `./_mdx_bundler_entry_point-${uuid()}.mdx`)
+    absoluteFiles[entryPath] = value
   } else if (typeof file === 'string') {
     // The user has supplied a file.
     /** @type any */ // Slight type hack to get the graymatter front matter typed correctly.

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -8,6 +8,7 @@ import type {Plugin, BuildOptions, Loader} from 'esbuild'
 import type {ModuleInfo} from '@fal-works/esbuild-plugin-global-externals'
 import type {ProcessorOptions} from '@mdx-js/esbuild/lib'
 import type {GrayMatterOption, Input, GrayMatterFile} from 'gray-matter'
+import type {VFile,VFileOptions} from 'vfile'
 
 type ESBuildOptions = BuildOptions
 
@@ -19,7 +20,7 @@ export type BundleMDXSource<Frontmatter> = {
   /**
    * Your MDX source.
    */
-  source: string
+  source: string | VFile | VFileOptions
   file?: undefined
 } & BundleMDXOptions<Frontmatter>