Merge pull request #252 from jaredwray/adding-in-renderReact-and-rend…

…erReactSync-for-JSX-Element

Adding in render react and render react sync for jsx element

README.md

@@ -7,6 +7,7 @@
 [![GitHub license](https://img.shields.io/github/license/jaredwray/writr)](https://github.com/jaredwray/writr/blob/master/LICENSE)
 [![codecov](https://codecov.io/gh/jaredwray/writr/branch/master/graph/badge.svg?token=1YdMesM07X)](https://codecov.io/gh/jaredwray/writr)
 [![npm](https://img.shields.io/npm/dm/writr)](https://npmjs.com/package/writr)
+[![npm](https://img.shields.io/npm/v/writr)](https://npmjs.com/package/writr)
 
 ---
 ## Table of Contents
@@ -17,6 +18,7 @@
 ## Features
 * Takes the complexity of Remark and makes it easy to use.
 * Up and Rendering in seconds with a simple API.
+* Easily Render to `React` or `HTML`.
 * Generates a Table of Contents for your markdown files (remark-toc).
 * Slug generation for your markdown files (rehype-slug).
 * Code Highlighting (rehype-highlight).
@@ -136,6 +138,28 @@ const markdown = `# Hello World ::-):\n\n This is a test.`;
 const html = writr.renderSync(markdown); // <h1>Hello World 🙂</h1><p>This is a test.</p>
 ```
 
+### '.renderReact(markdown: string, options?: RenderOptions, reactOptions?: HTMLReactParserOptions): Promise<React.JSX.Element>'
+
+Rendering markdown to React. The options are based on RenderOptions and now HTMLReactParserOptions from `html-react-parser`.
+
+```javascript
+import { Writr } from 'writr';
+const writr = new Writr();
+const markdown = `# Hello World ::-):\n\n This is a test.`;
+const reactElement = await writr.renderReact(markdown); // Will return a React.JSX.Element
+```
+
+### '.renderReactSync(markdown: string, options?: RenderOptions, reactOptions?: HTMLReactParserOptions): React.JSX.Element'
+
+Rendering markdown to React. The options are based on RenderOptions and now HTMLReactParserOptions from `html-react-parser`.
+
+```javascript
+import { Writr } from 'writr';
+const writr = new Writr();
+const markdown = `# Hello World ::-):\n\n This is a test.`;
+const reactElement = writr.renderReactSync(markdown); // Will return a React.JSX.Element
+```
+
 ## Code of Conduct and Contributing
 [Code of Conduct](CODE_OF_CONDUCT.md) and [Contributing](CONTRIBUTING.md) guidelines.
 

package.json

@@ -33,7 +33,11 @@
     "seo-friendly",
     "markdown-anchors",
     "remark",
-    "rehype"
+    "rehype",
+    "react",
+    "react-component",
+    "react-markdown",
+    "markdown-to-react"
   ],
   "scripts": {
     "clean": "rimraf ./dist ./coverage ./node_modules ./package-lock.json ./yarn.lock ./site/README.md ./site-output",
@@ -44,6 +48,8 @@
     "prepare": "yarn run build"
   },
   "dependencies": {
+    "html-react-parser": "^5.1.8",
+    "react": "^18.2.0",
     "rehype-highlight": "^7.0.0",
     "rehype-katex": "^7.0.0",
     "rehype-slug": "^6.0.0",
@@ -59,6 +65,7 @@
   },
   "devDependencies": {
     "@types/node": "^20.10.5",
+    "@types/react": "^18.2.61",
     "@vitest/coverage-v8": "^1.1.0",
     "docula": "^0.4.0",
     "rimraf": "^5.0.5",

src/writr.ts

@@ -9,6 +9,8 @@ import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkEmoji from 'remark-emoji';
+import parse, {type HTMLReactParserOptions} from 'html-react-parser';
+import type React from 'react';
 
 type WritrOptions = {
 	openai?: string; // Openai api key (default: undefined)
@@ -95,6 +97,17 @@ class Writr {
 		}
 	}
 
+	async renderReact(markdown: string, options?: RenderOptions, reactParseOptions?: HTMLReactParserOptions): Promise<string | React.JSX.Element | React.JSX.Element[]> {
+		const html = await this.render(markdown, options);
+
+		return parse(html, reactParseOptions);
+	}
+
+	renderReactSync(markdown: string, options?: RenderOptions, reactParseOptions?: HTMLReactParserOptions): string | React.JSX.Element | React.JSX.Element[] {
+		const html = this.renderSync(markdown, options);
+		return parse(html, reactParseOptions);
+	}
+
 	private createProcessor(options: RenderOptions): any {
 		const processor = unified().use(remarkParse);
 

test/writr.test.ts

@@ -1,5 +1,6 @@
 
 import {it, describe, expect} from 'vitest';
+import {e} from 'vitest/dist/reporters-1evA5lom.js';
 import {Writr} from '../src/writr.js';
 
 describe('writr', () => {
@@ -144,4 +145,18 @@ describe('writr', () => {
 		const result = await writr.render('$$\n\\frac{1}{2}\n$$');
 		expect(result).toContain('<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"');
 	});
+	it('should be able to render react components', async () => {
+		const writr = new Writr();
+		const markdownString = '## Hello World\n\n';
+
+		const result = await writr.renderReact(markdownString) as React.JSX.Element;
+		expect(result.type).toEqual('h2');
+	});
+	it('should be able to render react components sync', async () => {
+		const writr = new Writr();
+		const markdownString = '## Hello World\n\n';
+
+		const result = writr.renderReactSync(markdownString) as React.JSX.Element;
+		expect(result.type).toEqual('h2');
+	});
 });