fix(react): render words and spaces as single node in react (#226)

* fix(react): render words and spaces as single node in react

* chore: create metal-toys-heal.md

.changeset/metal-toys-heal.md

@@ -0,0 +1,7 @@
+---
+"@bbob/react": patch
+---
+
+fix(react): render words and spaces as single node in react
+
+Now React properly renders string nodes with spaces as single text node for react. Thanks @WLYau

packages/bbob-react/src/render.js

@@ -3,7 +3,7 @@ import React from 'react';
 import core from '@bbob/core';
 import * as html from '@bbob/html';
 
-import { isTagNode, isStringNode } from '@bbob/plugin-helper';
+import { isTagNode, isEOL } from '@bbob/plugin-helper';
 
 const toAST = (source, plugins, options) => core(plugins)
   .process(source, {
@@ -22,26 +22,28 @@ function tagToReactElement(node, index) {
 }
 
 function renderToReactNodes(nodes) {
-  let content = '';
   const els = [].concat(nodes).reduce((arr, node, index) => {
     if (isTagNode(node)) {
-      if (content !== '') {
-        arr.push(content);
-        content = '';
-      }
       arr.push(tagToReactElement(node, index));
-    } else if (isStringNode(node)) {
-      if (content === '') {
-        content = node;
-      } else {
-        content += node;
-      }
+      return arr;
     }
 
-    if (index === nodes.length - 1 && content !== '') {
-      arr.push(content);
+    if (isEOL(node)) {
+      arr.push(node);
+      return arr;
     }
 
+    const lastIdx = arr.length - 1;
+    const prevNode = lastIdx >= 0 ? arr[lastIdx] : null;
+
+    if (prevNode !== null && !isTagNode(prevNode) && !isEOL(prevNode)) {
+      const prevArr = arr; // stupid eslint
+      prevArr[lastIdx] += node;
+      return prevArr;
+    }
+
+    arr.push(node);
+
     return arr;
   }, []);
   return els;

packages/bbob-react/test/render.test.js

@@ -15,6 +15,13 @@ describe('@bbob/react render', () => {
   test('render simple text nodes', () => {
     const html = render('some example words');
 
+    expect(html[0]).toStrictEqual("some example words")
+  })
+  test('render simple text nodes with line break', () => {
+    const html = render(`some
+      example 
+      words`);
+
     expect(html[0]).toStrictEqual("some")
   })
 })