feat: plain (#898)

| [![PR App][icn]][demo] | RM-9817 |
| :--------------------: | :-----: |

## 🧰 Changes

Updates `plain` and `hast`.

These are used in the main app for indexing.

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].

[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

__tests__/lib/hast.test.ts

@@ -0,0 +1,24 @@
+import { hast } from '../../lib';
+import { h } from 'hastscript';
+
+describe('hast transformer', () => {
+  it('parses components into the tree', () => {
+    const md = `
+## Test
+
+<Example />
+    `;
+    const components = {
+      Example: "## It's coming from within the component!",
+    };
+
+    const expected = h(
+      undefined,
+      h('h2', undefined, 'Test'),
+      '\n',
+      h('h2', undefined, "It's coming from within the component!"),
+    );
+
+    expect(hast(md, { components })).toStrictEqualExceptPosition(expected);
+  });
+});

__tests__/lib/plain.test.ts

@@ -0,0 +1,56 @@
+import { hast, plain } from '../../index';
+
+describe('plain compiler', () => {
+  it('returns plain text of markdown components', () => {
+    const md = `
+## Hello!
+
+Is it _me_ you're looking for?
+`;
+
+    const tree = hast(md);
+    expect(plain(tree)).toEqual("Hello! Is it me you're looking for?");
+  });
+
+  it("compiles br's to ''", () => {
+    const txt = '<br />';
+
+    expect(plain(hast(txt))).toBe('');
+  });
+
+  it("compiles hr's to ''", () => {
+    const txt = '<hr />';
+
+    expect(plain(hast(txt))).toBe('');
+  });
+
+  it('compiles callouts', () => {
+    const txt = `
+> 📘 Title
+>
+> Some body
+    `;
+    const tree = hast(txt);
+
+    expect(plain(tree)).toBe('Title Some body');
+  });
+
+  it('compiles markdown tables', () => {
+    const txt = `
+| Header 1 | Header 2 |
+| :------- | :------- |
+| Cell 1   | Cell 2   |
+    `;
+
+    expect(plain(hast(txt))).toBe('Header 1 Header 2 Cell 1 Cell 2');
+  });
+
+  it('compiles images to their title', () => {
+    const txt = `
+![image **label**](http://placekitten.com/600/600 "entitled kittens")
+    `;
+    const tree = hast(txt);
+
+    expect(plain(tree)).toBe('entitled kittens');
+  });
+});

index.tsx

@@ -1,23 +1,17 @@
 import debug from 'debug';
-import remarkRehype from 'remark-rehype';
 
 import { createProcessor } from '@mdx-js/mdx';
 
 import * as Components from './components';
 import { getHref } from './components/Anchor';
 import { options } from './options';
 
-import { readmeComponentsTransformer } from './processor/transform';
-import { compile, run, mdx, astProcessor, remarkPlugins } from './lib';
+import { compile, hast, run, mdast, mdx, plain, remarkPlugins } from './lib';
 
 import './styles/main.scss';
 
 const unimplemented = debug('mdx:unimplemented');
 
-type MdastOpts = {
-  components?: Record<string, string>;
-};
-
 const utils = {
   get options() {
     return { ...options };
@@ -27,8 +21,6 @@ const utils = {
   calloutIcons: {},
 };
 
-export { compile, run, mdx, Components, utils };
-
 export const reactProcessor = (opts = {}) => {
   return createProcessor({ remarkPlugins, ...opts });
 };
@@ -37,24 +29,8 @@ export const html = (text: string, opts = {}) => {
   unimplemented('html export');
 };
 
-export const mdast: any = (text: string, opts: MdastOpts = {}) => {
-  const processor = astProcessor(opts).use(readmeComponentsTransformer({ components: opts.components }));
-
-  const tree = processor.parse(text);
-  return processor.runSync(tree);
-};
-
-export const hast = (text: string, opts = {}) => {
-  const processor = astProcessor(opts).use(remarkRehype);
-
-  const tree = processor.parse(text);
-  return processor.runSync(tree);
-};
-
 export const esast = (text: string, opts = {}) => {
   unimplemented('esast export');
 };
 
-export const plain = (text: string, opts = {}) => {
-  unimplemented('plain export');
-};
+export { compile, hast, run, mdast, mdx, plain, Components, utils };

lib/hast.ts

@@ -0,0 +1,22 @@
+import astProcessor from './ast-processor';
+import remarkRehype from 'remark-rehype';
+import { injectComponents } from '../processor/transform';
+import { MdastComponents } from '../types';
+import mdast from './mdast';
+
+interface Options {
+  components?: Record<string, string>;
+}
+
+const hast = (text: string, opts: Options = {}) => {
+  const components: MdastComponents = Object.entries(opts.components || {}).reduce((memo, [name, doc]) => {
+    memo[name] = mdast(doc);
+    return memo;
+  }, {});
+
+  const processor = astProcessor(opts).use(injectComponents({ components })).use(remarkRehype);
+
+  return processor.runSync(processor.parse(text));
+};
+
+export default hast;

lib/index.ts

@@ -1,7 +1,10 @@
 import astProcessor, { MdastOpts, remarkPlugins } from './ast-processor';
-import compile from './compile'
+import compile from './compile';
+import hast from './hast';
+import mdast from './mdast';
 import mdx from './mdx';
+import plain from './plain';
 import run from './run';
 
 export type { MdastOpts };
-export { astProcessor, compile, mdx, run, remarkPlugins }
+export { astProcessor, compile, hast, mdast, mdx, plain, run, remarkPlugins };

lib/mdast.ts

@@ -0,0 +1,11 @@
+import { readmeComponentsTransformer } from '../processor/transform';
+import astProcessor, { MdastOpts } from './ast-processor';
+
+const mdast: any = (text: string, opts: MdastOpts = {}) => {
+  const processor = astProcessor(opts).use(readmeComponentsTransformer({ components: opts.components }));
+
+  const tree = processor.parse(text);
+  return processor.runSync(tree);
+};
+
+export default mdast;

processor/plugin/plain-text.js → lib/plain.ts

@@ -1,11 +1,13 @@
+import { Node } from 'hast-util-to-text';
+
 /* @note: copied from https://github.com/rehypejs/rehype-minify/blob/main/packages/hast-util-to-string/index.js
  */
-function toString(node) {
-  // eslint-disable-next-line no-use-before-define
+
+const plain = (node: Node, opts = {}) => {
   return 'children' in node ? all(node) || one(node) : one(node);
-}
+};
 
-function one(node) {
+const one = (node: Node) => {
   if (node.tagName === 'img') {
     return node.properties?.title || '';
   }
@@ -20,9 +22,9 @@ function one(node) {
 
   // eslint-disable-next-line no-use-before-define
   return 'children' in node ? all(node) : ' ';
-}
+};
 
-function all(node) {
+const all = (node: Node) => {
   let index = -1;
   const result = [];
 
@@ -31,15 +33,7 @@ function all(node) {
     result[index] = one(node.children[index]);
   }
 
-  return result.join(' ').trim().replace(/ +/, ' ');
-}
-
-const Compiler = node => {
-  return toString(node);
-};
-
-const toPlainText = function () {
-  Object.assign(this, { Compiler });
+  return result.join(' ').replaceAll(/\s+/g, ' ').trim();
 };
 
-module.exports = toPlainText;
+export default plain;

package.json

@@ -99,6 +99,7 @@
     "codemirror": "^5.54.0",
     "css-loader": "^6.7.3",
     "eslint": "^8.37.0",
+    "hast-util-to-text": "^4.0.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",

processor/transform/index.ts

@@ -2,10 +2,11 @@ import calloutTransformer from './callouts';
 import codeTabsTransfromer from './code-tabs';
 import embedTransformer from './embeds';
 import gemojiTransformer from './gemoji+';
+import injectComponents from './inject-components';
 import readmeComponentsTransformer from './readme-components';
-import rehypeToc from './rehype-toc';
 import readmeToMdx from './readme-to-mdx';
+import rehypeToc from './rehype-toc';
 
-export { readmeComponentsTransformer, rehypeToc, readmeToMdx };
+export { readmeComponentsTransformer, rehypeToc, readmeToMdx, injectComponents };
 
 export default [calloutTransformer, codeTabsTransfromer, embedTransformer, gemojiTransformer];