tagHandler - Handle fallback html tag + basic test

Also added preact dep.
Fixed class or function component flowing into tagHandler

__tests__/renderer-spec.tsx

@@ -251,3 +251,9 @@ test('should render strike (strike, s, del)', () => {
     ) as string).trim()
   ).toBe('This ~~is~~ some ~~text~~');
 });
+
+test('should render fallback as html tag', () => {
+  expect((render(<span>some text</span>) as string).trim()).toBe(
+    '<span>some text</span>'
+  );
+});

package-lock.json

@@ -4254,6 +4254,26 @@
       "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
       "dev": true
     },
+    "preact": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.1.1.tgz",
+      "integrity": "sha512-mKW7Cdn68XMhdes0FjyIbA8+IVPsj3aIuAEQlZVkj9E2VhujWcXZEfwirBoXK6qZYfj1djaTBDCFKjAu1sK93w=="
+    },
+    "preact-render-to-string": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.1.3.tgz",
+      "integrity": "sha512-fVCd/qidYNiVSvN4cP5TVwI5VklMdrHMvcz0Z5mvwrYSKCrX0azInroBrKc5x6N9VtqMViMkYWaYh54cO6psIA==",
+      "requires": {
+        "pretty-format": "^3.8.0"
+      },
+      "dependencies": {
+        "pretty-format": {
+          "version": "3.8.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
+          "integrity": "sha1-v77VbV6ad2ZF9LH/eqGjrE+jw4U="
+        }
+      }
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",

package.json

@@ -31,6 +31,8 @@
   },
   "dependencies": {
     "mdast-builder": "^1.1.1",
+    "preact": "^10.1.1",
+    "preact-render-to-string": "^5.1.3",
     "react": "^16.12.0",
     "remark-stringify": "^7.0.4",
     "unified": "^8.4.2"

src/renderer.ts

@@ -48,7 +48,6 @@ function render(
     let processChildren = true;
 
     // Handle nested function or class components
-    {
     if (isFunctionalComponent(elementType)) {
       const renderOutputRaw = elementType.call(null, props);
       const renderOutput = ReactChildren.toArray(
@@ -57,9 +56,7 @@ function render(
 
       // Render processed array of children
       render(renderOutput, parentASTNodeMod);
-      }
-
-      if (isClassComponent(elementType)) {
+    } else if (isClassComponent(elementType)) {
       const elementInstance = new elementType(props);
       const renderOutputRaw = elementInstance.render();
       const renderOutput = ReactChildren.toArray(
@@ -68,10 +65,7 @@ function render(
 
       // Render processed array of children
       render(renderOutput, parentASTNodeMod);
-      }
-    }
-
-    {
+    } else {
       // Handle intrinsic types of element like div, h1
       const newParentASTNode = handleTag(node, parentASTNodeMod);
       if (newParentASTNode === undefined) {

src/tagHandler.ts

@@ -4,6 +4,7 @@ import {
   code,
   emphasis,
   heading,
+  html,
   image,
   inlineCode,
   link,
@@ -14,6 +15,7 @@ import {
   strike,
   strong,
 } from 'mdast-builder';
+import {render as renderToHTML} from 'preact-render-to-string';
 import {
   AnchorHTMLAttributes,
   Children as ReactChildren,
@@ -23,6 +25,7 @@ import {
 // tslint:disable-next-line: no-implicit-dependencies
 import { Node as MDASTNode, Parent as MDASTParent } from 'unist';
 
+import { VNode } from 'preact';
 import {
   IReactElementSubset,
   ReactElementSubsetWithPrimitive,
@@ -178,6 +181,7 @@ export default function handleTag(
 
     // START - Handle pre.code
     case 'pre': {
+      isHandled = false;
       //  If structure looks like pre.code, call handleTag again on code tag with extraProps having inline:false
       const childrenArray = ReactChildren.toArray(node.props.children);
       if (childrenArray.length === 1) {
@@ -189,6 +193,8 @@ export default function handleTag(
           onlyChild = onlyChild as IReactElementSubset;
 
           handleTag(onlyChild, parentASTNode, { inline: false });
+
+          isHandled = true;
         }
       }
       break;
@@ -196,10 +202,19 @@ export default function handleTag(
     // END - Handle blockquote
 
     default:
-      newParentASTNode = parentASTNode;
+      isHandled = false;
       break;
   }
 
+
+  if (!isHandled) {
+    // Handle as html
+    let htmlText = '';
+    htmlText = renderToHTML(node as VNode);
+
+    childASTNode = html(htmlText);
+  }
+
   if (childASTNode !== undefined) {
     parentASTNode.children.push(childASTNode);
   }