Avoid using Fragment for plain strings

Author: sibiraj-s

.eslintrc.yml

@@ -1,5 +1,7 @@
 root: true
 
+parser: '@babel/eslint-parser'
+
 extends:
   - pegasus
   - plugin:react/recommended
@@ -8,6 +10,7 @@ extends:
 rules:
   react/react-in-jsx-scope: off
   react/prop-types: off
+  class-methods-use-this: off # TODO: Remove after pegasus update to v3
 
 overrides:
   - files:

package-lock.json

@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
+    "@babel/eslint-parser": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",

package.json

@@ -1,9 +1,7 @@
-import { createElement, Fragment } from 'react';
+import { createElement } from 'react';
 
 class ReactRenderer {
-  constructor() {
-    this.elementId = 0;
-  }
+  elementId = 0;
 
   crel(el, children, props) {
     const elProps = {
@@ -14,18 +12,14 @@ class ReactRenderer {
     return createElement(el, { ...props, ...elProps }, children);
   }
 
-  heading(text, level) {
-    return this.crel(`h${level}`, text);
+  heading(children, level) {
+    return this.crel(`h${level}`, children);
   }
 
   paragraph(children) {
     return this.crel('p', children);
   }
 
-  text(text) {
-    return this.crel(Fragment, text);
-  }
-
   link(href, text, openLinksInNewTab) {
     const target = openLinksInNewTab ? '_blank' : null;
     return this.crel('a', text, { href, target });
@@ -43,22 +37,22 @@ class ReactRenderer {
     return this.crel('pre', this.codespan(code, lang));
   }
 
-  blockquote(quote) {
-    return this.crel('blockquote', quote);
+  blockquote(children) {
+    return this.crel('blockquote', children);
   }
 
   list(ordered, children) {
     return this.crel(ordered ? 'ol' : 'ul', children);
   }
 
-  checkbox(checked = false) {
-    return this.crel('input', null, { type: 'checkbox', disabled: true, checked });
-  }
-
   listItem(children) {
     return this.crel('li', children);
   }
 
+  checkbox(checked = false) {
+    return this.crel('input', null, { type: 'checkbox', disabled: true, checked });
+  }
+
   table(children) {
     return this.crel('table', children);
   }
@@ -92,8 +86,12 @@ class ReactRenderer {
     return this.crel('del', children);
   }
 
+  text(text) {
+    return text;
+  }
+
   html(html) {
-    return this.crel(Fragment, html);
+    return html;
   }
 
   hr() {