feat: updates, and override entryPoints (#54)

* docs: change image bundling wording to make it clear that each _bundle_ needs its own output directory, closes #52

* fix: update esbuild (and dev deps)

* fix: move uvu to devDependencies

* chore: fix my website address in all contributors

* feat: add a test to check overriding `entryPoints` as described in #51, allow overwriting when using `write: true`

* docs: document replacing the entry point

* tests: swap to dirname for input path

* tests: swap to contributing and improve the match

* fix(ts): improve the typings

Author: Arcath

.all-contributorsrc

@@ -37,7 +37,7 @@
       "login": "Arcath",
       "name": "Adam Laycock",
       "avatar_url": "https://avatars.githubusercontent.com/u/19609?v=4",
-      "profile": "https://arcath.net",
+      "profile": "https://www.arcath.net",
       "contributions": [
         "code",
         "test",

README.md

@@ -498,7 +498,7 @@ import {remarkMdxImages} from 'remark-mdx-images'
 
 const {code} = await bundleMDX(mdxSource, {
   cwd: '/users/you/site/_content/pages',
-  xdmOptions: (vFile, options) => {
+  xdmOptions: options => {
     options.remarkPlugins = [remarkMdxImages]
 
     return options
@@ -519,24 +519,30 @@ The `file` loader requires a little more configuration to get working. With the
 be set to write files and needs to know where to put them plus the url of the
 folder to be used in image sources.
 
+> Each call to `bundleMDX` is isloated from the others. If you set the directory
+> the same for everything `bundleMDX` will overwrite images without warning. As
+> a result each _bundle_ needs its own output directory.
+
 ```js
+// For the file `_content/pages/about.mdx`
+
 const {code} = await bundleMDX(mdxSource, {
   cwd: '/users/you/site/_content/pages',
-  xdmOptions: (vFile, options) => {
+  xdmOptions: options => {
     options.remarkPlugins = [remarkMdxImages]
 
     return options
   },
   esbuildOptions: options => {
-    // Set the `outdir` to your public directory.
-    options.outdir = '/users/you/site/public/img'
+    // Set the `outdir` to a public location for this bundle.
+    options.outdir = '/users/you/site/public/img/about'
     options.loader = {
       ...options.loader,
       // Tell esbuild to use the `file` loader for pngs
       '.png': 'file',
     }
-    // Set the public path to /img/ so image sources start /img/
-    options.publicPath = '/img/'
+    // Set the public path to /img/about
+    options.publicPath = '/img/about'
 
     // Set write to true so that esbuild will output the files.
     options.write = true
@@ -546,6 +552,23 @@ const {code} = await bundleMDX(mdxSource, {
 })
 ```
 
+### Replacing the entry point
+
+If your MDX file is on your disk you can save some time and code by having
+`esbuild` read the file for you. To do this you can override the `entryPoints`
+settings in `esbuildOptions` with the path to your mdx source.
+
+```js
+const {code, frontmatter} = await bundleMDX('', {
+  cwd: '/users/you/site/_content/pages',
+  esbuildOptions: options => {
+    options.entryPoints = ['/users/you/site/_content/pages/file.mdx']
+
+    return options
+  },
+})
+```
+
 ### Known Issues
 
 #### Cloudflare Workers
@@ -647,7 +670,7 @@ Thanks goes to these people ([emoji key][emojis]):
   <tr>
     <td align="center"><a href="https://kentcdodds.com"><img src="https://avatars.githubusercontent.com/u/1500684?v=3?s=100" width="100px;" alt=""/><br /><sub><b>Kent C. Dodds</b></sub></a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=kentcdodds" title="Code">💻</a> <a href="https://github.com/kentcdodds/mdx-bundler/commits?author=kentcdodds" title="Documentation">📖</a> <a href="#infra-kentcdodds" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/kentcdodds/mdx-bundler/commits?author=kentcdodds" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://github.com/benwis"><img src="https://avatars.githubusercontent.com/u/6953353?v=4?s=100" width="100px;" alt=""/><br /><sub><b>benwis</b></sub></a><br /><a href="https://github.com/kentcdodds/mdx-bundler/issues?q=author%3Abenwis" title="Bug reports">🐛</a> <a href="https://github.com/kentcdodds/mdx-bundler/pulls?q=is%3Apr+reviewed-by%3Abenwis" title="Reviewed Pull Requests">👀</a></td>
-    <td align="center"><a href="https://arcath.net"><img src="https://avatars.githubusercontent.com/u/19609?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Adam Laycock</b></sub></a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=Arcath" title="Code">💻</a> <a href="https://github.com/kentcdodds/mdx-bundler/commits?author=Arcath" title="Tests">⚠️</a> <a href="#ideas-Arcath" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/kentcdodds/mdx-bundler/pulls?q=is%3Apr+reviewed-by%3AArcath" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/kentcdodds/mdx-bundler/commits?author=Arcath" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://www.arcath.net"><img src="https://avatars.githubusercontent.com/u/19609?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Adam Laycock</b></sub></a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=Arcath" title="Code">💻</a> <a href="https://github.com/kentcdodds/mdx-bundler/commits?author=Arcath" title="Tests">⚠️</a> <a href="#ideas-Arcath" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/kentcdodds/mdx-bundler/pulls?q=is%3Apr+reviewed-by%3AArcath" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/kentcdodds/mdx-bundler/commits?author=Arcath" title="Documentation">📖</a></td>
     <td align="center"><a href="http://wooorm.com"><img src="https://avatars.githubusercontent.com/u/944406?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Titus</b></sub></a><br /><a href="#ideas-wooorm" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/kentcdodds/mdx-bundler/pulls?q=is%3Apr+reviewed-by%3Awooorm" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/kentcdodds/mdx-bundler/commits?author=wooorm" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/ChristianMurphy"><img src="https://avatars.githubusercontent.com/u/3107513?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Christian Murphy</b></sub></a><br /><a href="#ideas-ChristianMurphy" title="Ideas, Planning, & Feedback">🤔</a></td>
     <td align="center"><a href="https://ped.ro"><img src="https://avatars.githubusercontent.com/u/372831?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pedro Duarte</b></sub></a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=peduarte" title="Documentation">📖</a></td>

package.json

@@ -43,27 +43,27 @@
     "@babel/runtime": "^7.14.0",
     "@esbuild-plugins/node-resolve": "^0.1.4",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.1",
-    "esbuild": "^0.11.20",
+    "esbuild": "^0.12.8",
     "gray-matter": "^4.0.3",
     "remark-frontmatter": "^3.0.0",
     "remark-mdx-frontmatter": "^1.0.1",
-    "uvu": "^0.5.1",
     "xdm": "^1.11.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^11.2.6",
-    "@types/jsdom": "^16.2.10",
+    "@testing-library/react": "^11.2.7",
+    "@types/jsdom": "^16.2.11",
     "@types/react": "^17.0.5",
-    "@types/react-dom": "^17.0.3",
+    "@types/react-dom": "^17.0.7",
     "cross-env": "^7.0.3",
-    "jsdom": "^16.5.3",
-    "kcd-scripts": "^10.0.0",
+    "jsdom": "^16.6.0",
+    "kcd-scripts": "^11.1.0",
     "left-pad": "^1.3.0",
     "mdx-test-data": "^1.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "remark-mdx-images": "^1.0.2",
-    "typescript": "^4.2.4"
+    "typescript": "^4.3.2",
+    "uvu": "^0.5.1"
   },
   "eslintConfig": {
     "extends": "./node_modules/kcd-scripts/eslint.js",

src/__tests__/index.js

@@ -1,5 +1,6 @@
 import './setup-tests.js'
 import path from 'path'
+import {fileURLToPath} from 'url'
 import {test} from 'uvu'
 import * as assert from 'uvu/assert'
 import React from 'react'
@@ -411,4 +412,30 @@ Local Content
   )
 })
 
+test('should support over-riding the entry point', async () => {
+  const {code} = await bundleMDX('', {
+    cwd: process.cwd(),
+    esbuildOptions: options => {
+      options.entryPoints = [
+        path.join(
+          path.dirname(fileURLToPath(import.meta.url)),
+          '..',
+          '..',
+          'CONTRIBUTING.md',
+        ),
+      ]
+      options.outdir = path.join(process.cwd(), 'output')
+      options.write = true
+
+      return options
+    },
+  })
+
+  const Component = getMDXComponent(code)
+
+  const {container} = render(React.createElement(Component))
+
+  assert.match(container.innerHTML, 'Thanks for being willing to contribute')
+})
+
 test.run()

src/index.js

@@ -170,11 +170,15 @@ async function bundleMDX(
   }
 
   if (buildOptions.outdir && buildOptions.write) {
-    const code = await readFile(
-      path.join(buildOptions.outdir, '_mdx_bundler_entry_point.js'),
-    )
+    // We know that this has to be an array of entry point strings, with a single entry
+    const entryFile = /** @type {{entryPoints: string[]}} */ (buildOptions)
+      .entryPoints[0]
+
+    const fileName = path.basename(entryFile).replace(/\.[^/.]+$/, '.js')
+
+    const code = await readFile(path.join(buildOptions.outdir, fileName))
 
-    await unlink(path.join(buildOptions.outdir, '_mdx_bundler_entry_point.js'))
+    await unlink(path.join(buildOptions.outdir, fileName))
 
     return {
       code: `${code};return Component.default;`,