feat(umi-plugin): support to transform normal md to page component (#2)

packages/umi-plugin-father-doc/package.json

@@ -20,7 +20,13 @@
     "PeachScript <scdzwyxst@gmail.com> (https://github.com/PeachScript)"
   ],
   "dependencies": {
-    "umi-types": "^0.5.4"
+    "@mapbox/rehype-prism": "^0.3.1",
+    "rehype-stringify": "^6.0.0",
+    "remark-parse": "^7.0.1",
+    "remark-rehype": "^5.0.0",
+    "umi-types": "^0.5.4",
+    "unified": "^8.4.1",
+    "unist-util-visit": "^2.0.0"
   },
   "license": "MIT"
 }

packages/umi-plugin-father-doc/src/fixtures/layout.jsx

@@ -1 +1,3 @@
+import './layout.less';
+
 export default ({ children }) => children;

packages/umi-plugin-father-doc/src/fixtures/layout.less

@@ -0,0 +1 @@
+@import 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.css';

packages/umi-plugin-father-doc/src/routes/distComponentFromRoutes.ts

@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import { IRoute, IApi } from 'umi-types';
+import transformer from '../transformer';
 
 const DIST_DIR = '.father-doc';
 
@@ -31,8 +32,8 @@ export default (paths: IApi['paths'], routes: IRoute[]) => {
 
     switch (cPathParsed.ext) {
       case '.md':
-        // todo: parse markdown file content
-        componentContent = `export default () => 'Hello father-doc! (${cPath})';`;
+        // todo: handle YAML config
+        componentContent = transformer.markdown(componentContent).content;
         break;
       default:
     }

packages/umi-plugin-father-doc/src/transformer/index.ts

@@ -0,0 +1,19 @@
+import remark from './remark';
+
+export interface TransformResult {
+  content: string;
+  config: { [key: string]: any };
+}
+
+export default {
+  markdown(raw: string): TransformResult {
+    return {
+      content: `export default function () {
+        return (
+          <div>${remark(raw)}</div>
+        )
+      }`,
+      config: {},
+    };
+  }
+}

packages/umi-plugin-father-doc/src/transformer/remark/index.ts

@@ -0,0 +1,15 @@
+import unified from 'unified';
+import parse from 'remark-parse';
+import rehype from 'remark-rehype';
+import stringify from 'rehype-stringify';
+import prism from '@mapbox/rehype-prism';
+import jsx from './jsx';
+
+const processor = unified()
+  .use(parse)
+  .use(rehype)
+  .use(stringify, { allowDangerousHTML: true })
+  .use(prism)
+  .use(jsx);
+
+export default (raw: string) => processor.processSync(raw).contents as string;

packages/umi-plugin-father-doc/src/transformer/remark/jsx.ts

@@ -0,0 +1,38 @@
+import { Node } from 'unist';
+import visit from 'unist-util-visit';
+
+function hasSubClassName(className: string[], subCls: string) {
+  return (className || []).find(cls => cls.indexOf(subCls) > -1);
+}
+
+const visitor = (node, i, parent) => {
+  // escape { & } for JSX
+  node.value = node.value.replace(/([{}])/g, '{\'$1\'}');
+
+  // convert \n to <br> in code block for JSX
+  if (
+    parent
+    && parent.tagName === 'code'
+    && hasSubClassName(parent.properties.className, 'language-')
+    && node.type === 'text'
+  ) {
+    const replace = node.value.split('\n').reduce((result, str, isNotFirst) => {
+      if (isNotFirst) {
+        result.push({ type: 'raw', value: '<br />' });
+      }
+
+      if (str) {
+        result.push({ type: 'text', value: str });
+      }
+
+      return result;
+    }, []);
+
+    // replace original children
+    parent.children.splice(i, 1, ...replace);
+  }
+}
+
+export default () => (tree: Node) => {
+  visit(tree, 'text', visitor);
+}