wip

__tests__/transformers/readme-components.test.ts

@@ -0,0 +1,15 @@
+import { mdast } from '../../index';
+
+describe('Readme Components Transformer', () => {
+  const nodes = [
+    { md: '<Table />', type: 'table' },
+    { md: '<Image />', type: 'image' },
+    { md: '<CodeTabs />', type: 'code-tabs' },
+  ];
+
+  it.each(nodes)('transformss $md into a(n) $type node', ({ md, type }) => {
+    const tree = mdast(md);
+
+    expect(tree.children[0].type).toBe(type);
+  });
+});

index.tsx

@@ -16,7 +16,7 @@ import { GlossaryContext } from './components/GlossaryItem';
 import BaseUrlContext from './contexts/BaseUrl';
 import { options } from './options';
 
-import transformers from './processor/transform';
+import transformers, { readmeComponentsTransformer } from './processor/transform';
 import compilers from './processor/compile';
 import MdxSyntaxError from './errors/mdx-syntax-error';
 
@@ -103,7 +103,10 @@ export const html = (text: string, opts = {}) => {
   unimplemented('html export');
 };
 
-const astProcessor = (opts = {}) => remark().use(remarkMdx).use(remarkFrontmatter).use(remarkPlugins);
+const astProcessor = (opts = {}) =>
+  remark().use(remarkMdx).use(remarkFrontmatter).use(remarkPlugins).use(readmeComponentsTransformer, {
+    readmeComponents: Components,
+  });
 
 export const mdast: any = (text: string, opts = {}) => {
   const processor = astProcessor(opts);

processor/transform/index.ts

@@ -1,5 +1,8 @@
 import calloutTransformer from './callouts';
 import codeTabsTransfromer from './code-tabs';
 import gemojiTransformer from './gemoji+';
+import readmeComponentsTransformer from './readme-components';
+
+export { readmeComponentsTransformer };
 
 export default [calloutTransformer, codeTabsTransfromer, gemojiTransformer];

processor/transform/readme-components.ts

@@ -0,0 +1,26 @@
+import { Root } from 'mdast';
+import { visit } from 'unist-util-visit';
+
+const types = {
+  CodeTabs: 'code-tabs',
+  Image: 'image',
+  Table: 'table',
+};
+
+const readmeComponents =
+  ({ components, readmeComponents }) =>
+  (tree: Root) => {
+    visit(tree, 'mdxJsxFlowElement', (node, index, parent) => {
+      if (node.name in readmeComponents) {
+        const newNode = {
+          type: types[node.name],
+        };
+
+        parent.children[index] = newNode;
+      }
+    });
+
+    return tree;
+  };
+
+export default readmeComponents;