compileReact function added

constants/index.js

@@ -0,0 +1,17 @@
+const BOLD = "bold";
+const TEXT = "text";
+const ITALICS = "italics";
+const STRIKETHROUGH = "strikethrough";
+const UNDERLINE = "underline";
+const URL = "url";
+const PARAGRAPH = "paragraph";
+
+module.exports = {
+	BOLD,
+	TEXT,
+	ITALICS,
+	STRIKETHROUGH,
+	UNDERLINE,
+	URL,
+	PARAGRAPH,
+};

lib/compileHTML.js

@@ -1,12 +1,21 @@
+const {
+	BOLD,
+	TEXT,
+	ITALICS,
+	STRIKETHROUGH,
+	UNDERLINE,
+	URL,
+} = require("../constants");
+
 function CompileHTML(ast) {
 	let str = "<p>";
 	const OpenTags = {
-		bold: () => `<span class="bold">`,
+		bold: () => `<span class="${BOLD}">`,
-		text: () => `<span class="text">`,
+		text: () => `<span class="${TEXT}">`,
-		italics: () => `<span class="italics">`,
+		italics: () => `<span class="${ITALICS}">`,
-		strikethrough: () => `<span class="strikethrough">`,
+		strikethrough: () => `<span class="${STRIKETHROUGH}">`,
-		underline: () => `<span class="underline">`,
+		underline: () => `<span class="${UNDERLINE}">`,
-		url: url => `<a href="${url}" class="url">`,
+		url: url => `<a href="${url}" class="${URL}">`,
 	};
 
 	const CloseTags = {
@@ -17,6 +26,7 @@ function CompileHTML(ast) {
 		underline: "</span>",
 		url: "</a>",
 	};
+
 	const mapper = node => {
 		node.forEach(element => {
 			if (typeof element === "string") {

lib/compileReact.js

@@ -0,0 +1,59 @@
+const h = require("react").createElement;
+const {
+	BOLD,
+	TEXT,
+	ITALICS,
+	STRIKETHROUGH,
+	UNDERLINE,
+	URL,
+	PARAGRAPH,
+} = require("../constants");
+
+function CompileReact(ast) {
+	const OpenTags = {
+		bold: "span",
+		text: "span",
+		italics: "span",
+		strikethrough: "span",
+		underline: "span",
+		url: "a",
+		paragraph: "p",
+	};
+
+	const classNames = {
+		bold: BOLD,
+		text: TEXT,
+		italics: ITALICS,
+		strikethrough: STRIKETHROUGH,
+		underline: UNDERLINE,
+		url: URL,
+		paragraph: PARAGRAPH,
+	};
+
+	const mapper = node =>
+		node.map((element, index) => {
+			if (typeof element === "string") {
+				return element;
+			} else if (typeof element === "object") {
+				const makeProps = () => {
+					let props = {};
+					if (element.type === "url") {
+						props.href = element.url;
+					}
+					props.className = classNames[element.type];
+					props.key = element.type + "-" + index;
+					return props;
+				};
+
+				return h(
+					OpenTags[element.type],
+					makeProps(),
+					element.children && mapper(element.children),
+				);
+			}
+		});
+
+	return h("p", { className: PARAGRAPH }, mapper(ast));
+}
+
+module.exports = CompileReact;

package-lock.json

@@ -414,6 +414,12 @@
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
       "dev": true
     },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
     "js-yaml": {
       "version": "3.14.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
@@ -442,6 +448,15 @@
         "chalk": "^4.0.0"
       }
     },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -502,6 +517,12 @@
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -568,6 +589,16 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "react": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
+      "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "readdirp": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",

package.json

@@ -10,7 +10,10 @@
 	"license": "ISC",
 	"devDependencies": {
 		"chai": "^4.2.0",
-		"html-format": "^1.0.1",
+		"mocha": "^8.2.1",
-		"mocha": "^8.2.1"
+		"react": "*"
+	},
+	"peerDependencies": {
+		"react": "*"
 	}
 }