diff --git a/__tests__/renderer-spec.tsx b/__tests__/renderer-spec.tsx index abcc16d..5774854 100644 --- a/__tests__/renderer-spec.tsx +++ b/__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(some text) as string).trim()).toBe( + 'some text' + ); +}); diff --git a/package-lock.json b/package-lock.json index 56db809..28a388f 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 9076396..201c975 100644 --- a/package.json +++ b/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" diff --git a/src/renderer.ts b/src/renderer.ts index 2af1401..89e487f 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -48,30 +48,24 @@ function render( let processChildren = true; // Handle nested function or class components - { - if (isFunctionalComponent(elementType)) { - const renderOutputRaw = elementType.call(null, props); - const renderOutput = ReactChildren.toArray( - renderOutputRaw - ) as ReactElementSubsetWithPrimitive[]; + if (isFunctionalComponent(elementType)) { + const renderOutputRaw = elementType.call(null, props); + const renderOutput = ReactChildren.toArray( + renderOutputRaw + ) as ReactElementSubsetWithPrimitive[]; - // Render processed array of children - render(renderOutput, parentASTNodeMod); - } + // Render processed array of children + render(renderOutput, parentASTNodeMod); + } else if (isClassComponent(elementType)) { + const elementInstance = new elementType(props); + const renderOutputRaw = elementInstance.render(); + const renderOutput = ReactChildren.toArray( + renderOutputRaw + ) as ReactElementSubsetWithPrimitive[]; - if (isClassComponent(elementType)) { - const elementInstance = new elementType(props); - const renderOutputRaw = elementInstance.render(); - const renderOutput = ReactChildren.toArray( - renderOutputRaw - ) as ReactElementSubsetWithPrimitive[]; - - // Render processed array of children - render(renderOutput, parentASTNodeMod); - } - } - - { + // 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) { diff --git a/src/tagHandler.ts b/src/tagHandler.ts index 1ffa689..5fcb880 100644 --- a/src/tagHandler.ts +++ b/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); }