renderer - Handle children and nested jsx, render to markdown

src/renderer.ts

@@ -1,42 +1,50 @@
+import { root, text } from "mdast-builder";
 import { Children as ReactChildren } from "react";
+import * as stringify from "remark-stringify";
+import * as unified from "unified";
+import { Parent as MDASTParent } from "unist";
+
 import {
-  ReactElementSubset,
-  ReactElementSubsetWithPrimitive,
+  isClassComponent,
   isFunctionalComponent,
-  isClassComponent
+  ReactElementSubsetWithPrimitive
 } from "./helpers";
 
 function render(
   node: ReactElementSubsetWithPrimitive,
-  parentNode?: ReactElementSubset
-) {
-  // Skip null and undefined nodes
+  parentASTNode?: MDASTParent
+): string | null {
+  let parentASTNodeMod: MDASTParent;
+  if (parentASTNode === undefined) {
+    parentASTNodeMod = root([]);
+  } else {
+    parentASTNodeMod = parentASTNode;
+  }
+
   if (node === null || node === undefined) {
-    return;
-  }
+    // Handle (skip) null and undefined nodes
+  } else if (typeof node === "string" || typeof node === "number") {
+    // Handle (render) string and number nodes as string in markdown
 
-  // Render string and number nodes
-  if (typeof node === "string" || typeof node === "number") {
-    return;
-  }
-
-  // Render Fragment nodes
-  if (Array.isArray(node)) {
-    node.forEach(fragmentEle => render(fragmentEle));
-    return;
-  }
+    const currASTNode = text(node.toString());
+    parentASTNodeMod.children.push(currASTNode);
+  } else if (Array.isArray(node)) {
+    // Handle (render) Fragment nodes or arrays
 
+    node.forEach(fragmentEle => render(fragmentEle, parentASTNodeMod));
+  } else {
     const { props, type: elementType } = node;
-  const { children } = props;
 
+    // Handle nested function or class components
+    {
       if (isFunctionalComponent(elementType)) {
-    const renderOutput = elementType.call(
-      null,
-      props
-    ) as ReactElementSubsetWithPrimitive;
+        const renderOutputRaw = elementType.call(null, props);
+        const renderOutput = ReactChildren.toArray(
+          renderOutputRaw
+        ) as ReactElementSubsetWithPrimitive[];
 
-    render(renderOutput);
-    return;
+        // Render processed array of children
+        render(renderOutput, parentASTNodeMod);
       }
 
       if (isClassComponent(elementType)) {
@@ -46,15 +54,45 @@ function render(
           renderOutputRaw
         ) as ReactElementSubsetWithPrimitive[];
 
-    // Render array of children, just like fragments
-    render(renderOutput);
+        // Render processed array of children
+        render(renderOutput, parentASTNodeMod);
 
-    return;
+      }
     }
 
     // Handle intrinsic types of element like div, h1
     {
     }
+
+    {
+      // Handle children
+      const { children } = props;
+
+      // Render processed array of children
+      const renderOutput = ReactChildren.toArray(
+        children
+      ) as ReactElementSubsetWithPrimitive[];
+
+      render(renderOutput, parentASTNodeMod);
+    }
+  }
+
+  // Return stuff
+  {
+    // For root call, return string
+    if (parentASTNode === undefined && parentASTNodeMod.children.length > 0) {
+      const processor = unified().use(stringify, {
+        bullet: "-",
+        fence: "`",
+        fences: true,
+        incrementListMarker: false
+      });
+      const output = processor.stringify(parentASTNodeMod);
+
+      return output;
+    }
+    return null;
+  }
 }
 
 export { render };