feat: add usemdxcomponents

index.tsx

@@ -2,7 +2,7 @@ import debug from 'debug';
 import { remark } from 'remark';
 import remarkMdx from 'remark-mdx';
 
-import { createProcessor, compileSync, runSync } from '@mdx-js/mdx';
+import { createProcessor, compileSync, runSync, RunOptions } from '@mdx-js/mdx';
 import * as runtime from 'react/jsx-runtime';
 
 import Variable from '@readme/variable';
@@ -14,10 +14,13 @@ import { options } from './options';
 require('./styles/main.scss');
 
 import calloutTransformer from './processor/transform/callouts';
+import react from 'react';
 
 const unimplemented = debug('mdx:unimplemented');
 
-const { GlossaryItem } = Components;
+type RunOpts = Omit<RunOptions, 'Fragment'> & {
+  components?: Record<string, React.Component>;
+};
 
 export { Components };
 
@@ -28,14 +31,18 @@ export const utils = {
 
   BaseUrlContext,
   getHref,
-  GlossaryContext: GlossaryItem.GlossaryContext,
+  GlossaryContext: Components.GlossaryItem.GlossaryContext,
   VariablesContext: Variable.VariablesContext,
   calloutIcons: {},
 };
 
-const useMDXComponents = () => ({
-  ...Components,
-});
+const makeUseMDXComponents = (more: RunOpts['components']) => {
+  const components = { ...Components, ...more };
+
+  console.log({ components });
+
+  return () => components;
+};
 
 export const reactProcessor = (opts = {}) => {
   return createProcessor({ remarkPlugins: [calloutTransformer], ...opts });
@@ -45,22 +52,23 @@ export const compile = (text: string, opts = {}) => {
   return String(
     compileSync(text, {
       outputFormat: 'function-body',
-      providerImportSource: '@mdx-js/react',
       remarkPlugins: [calloutTransformer],
       ...opts,
-    }),
+    })
   );
 };
 
-export const run = (code: string, opts = {}) => {
+export const run = (code: string, _opts: RunOpts = {}) => {
   // @ts-ignore
   const Fragment = runtime.Fragment;
 
+  const { components, ...opts } = _opts;
+
   const file = runSync(code, {
     ...runtime,
     Fragment,
     baseUrl: '',
-    useMDXComponents,
+    useMDXComponents: makeUseMDXComponents(components),
     ...opts,
   });
 

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@readme/markdown",
+  "name": "@readme/mdx",
   "description": "ReadMe's React-based Markdown parser",
   "author": "Rafe Goldberg <rafe@readme.io>",
   "version": "6.75.0-beta.16",
@@ -75,6 +75,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.2",
     "@types/mdast": "^4.0.3",
+    "@types/mdx": "^2.0.12",
     "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "browserify-fs": "^1.0.0",