From 575c1bb93251b6f2d6a0014fccdab27ea9d14d5b Mon Sep 17 00:00:00 2001
From: Nikolay Kostyurin <JiLiZART@Gmail.com>
Date: Fri, 12 Oct 2018 00:43:20 +0200
Subject: [PATCH] feat: new @bbob/html api (#4)

---
 README.md                                     | 56 +++++++++++++++----
 package.json                                  |  2 +-
 packages/bbob-cli/package.json                |  1 -
 packages/bbob-core/package.json               |  3 -
 packages/bbob-core/test/index.test.js         |  5 +-
 packages/bbob-html/package.json               |  6 +-
 packages/bbob-html/src/index.js               |  5 +-
 packages/bbob-html/test/index.test.js         |  4 +-
 packages/bbob-preset-html5/package.json       |  1 -
 packages/bbob-preset-html5/test/index.test.js |  5 +-
 packages/bbob-react/src/Component.js          |  7 +--
 packages/bbob-react/src/render.js             | 16 ++----
 12 files changed, 66 insertions(+), 45 deletions(-)

diff --git a/README.md b/README.md
index 1c579ac..c897df5 100644
--- a/README.md
+++ b/README.md
@@ -118,8 +118,8 @@ export default createPreset({
 Also you can use predefined preset for HTML
 
 ```js
-import html5Preset from '@bbob/preset-html5'
-import { render } from '@bbob/html'
+import html5Preset from '@bbob/preset-html5/es'
+import { render } from '@bbob/html/es'
 import bbob from '@bbob/core'
 
 console.log(bbob(html5Preset()).process(`[quote]Text[/quote]`, { render }).html) // <blockquote><p>Text</p></blockquote>
@@ -130,27 +130,39 @@ console.log(bbob(html5Preset()).process(`[quote]Text[/quote]`, { render }).html)
 Also you can use predefined preset for React
 
 ```js
-import reactPreset from '@bbob/preset-react'
-import bbobRender from '@bbob/react/es/render'
+import reactPreset from "@bbob/preset-react";
+import reactRender from "@bbob/react/es/render";
 
-console.log(bbob(reactPreset()).process(`[quote]Text[/quote]`, { render }).html) 
-/* It produces a VDOM Nodes equal to
-  React.createElement('blockquote', React.createElement('p', 'Text'))
+const preset = reactPreset.extend((tags, options) => ({
+  quote: node => ({
+    tag: "blockquote",
+    content: node.content
+  })
+}));
+
+const result = reactRender(`[quote]Text[/quote]`, reactPreset());
+
+/* 
+It produces a VDOM Nodes equal to
+React.createElement('blockquote', 'Text')
 */
+document.getElementById("root").innerHTML = JSON.stringify(result, 4);
 ```
 
+[![Edit lp7q9yj0lq](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/lp7q9yj0lq)
+
 ### React usage <a name="react"></a>
 
 #### Component <a name="react-component"></a>
 
 Or you can use React Component
 
-```jsx
+```js
 import React from 'react'
 import { render } from 'react-dom'
 
-import BBCode from '@bbob/react'
-import reactPreset from '@bbob/preset-react'
+import BBCode from '@bbob/react/es/Component'
+import reactPreset from '@bbob/preset-react/es'
 
 const MyComponent = () => (
   <BBCode plugins={[reactPreset()]}>
@@ -160,9 +172,33 @@ const MyComponent = () => (
 
 render(<MyComponent />) // <div><blockquote><p>Text</p></blockquote></div>
 ```
+[![Edit 306pzr9k5p](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/306pzr9k5p)
+
 
 #### Render prop <a name="react-render"></a>
 
+Or pass result as render prop
+
+```js
+import React from "react";
+import { render } from 'react-dom'
+
+import reactRender from '@bbob/react/es/render'
+import reactPreset from '@bbob/preset-react/es'
+
+const toReact = input => reactRender(input, reactPreset())
+
+const text = toReact('[b]Super [i]easy[/i][/b] [u]to[/u] render')
+
+const App = ({ renderProp }) => (
+  <span>{text}</span>
+)
+
+render(<App />) // <span><span style="font-weight: bold;">Super <span style="font-style: italic;">easy</span></span> <span style="text-decoration: underline;">to</span> render</span>
+```
+
+[![Edit x7w52lqmzz](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/x7w52lqmzz)
+
 ### PostHTML usage <a name="posthtml"></a>
 
 ### Create Plugin <a name="plugin"></a>
diff --git a/package.json b/package.json
index abf8bab..854814c 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "scripts": {
     "prepublishOnly": "npm run test",
     "bootstrap": "lerna bootstrap",
-    "publish-all": "lerna run build && lerna publish --conventional-commits --changelog-preset=angular-bitbucket --registry=https://registry.npmjs.org/",
+    "publish-all": "lerna run build && lerna publish --conventional-commits --registry=https://registry.npmjs.org/",
     "test": "lerna run build && lerna run link && lerna run test",
     "cover": "lerna run cover",
     "lint": "lerna run build && lerna run link && lerna run lint"
diff --git a/packages/bbob-cli/package.json b/packages/bbob-cli/package.json
index 153b878..29f542d 100644
--- a/packages/bbob-cli/package.json
+++ b/packages/bbob-cli/package.json
@@ -10,7 +10,6 @@
     "lib": "lib"
   },
   "dependencies": {
-    "@bbob/core": "^2.1.0",
     "@bbob/html": "^2.1.1",
     "@bbob/preset-html5": "^2.1.2",
     "commander": "^2.15.1"
diff --git a/packages/bbob-core/package.json b/packages/bbob-core/package.json
index 4d02a94..b61a4e8 100644
--- a/packages/bbob-core/package.json
+++ b/packages/bbob-core/package.json
@@ -21,9 +21,6 @@
   "dependencies": {
     "@bbob/parser": "^2.2.0"
   },
-  "devDependencies": {
-    "@bbob/html": "^2.1.1"
-  },
   "peerDependencies": {
     "@bbob/html": "^1.x",
     "@bbob/preset-html5": "^1.x",
diff --git a/packages/bbob-core/test/index.test.js b/packages/bbob-core/test/index.test.js
index ceb9df0..18e3aff 100644
--- a/packages/bbob-core/test/index.test.js
+++ b/packages/bbob-core/test/index.test.js
@@ -1,17 +1,16 @@
-import render from '@bbob/html'
 import { TagNode } from '@bbob/parser'
 import core from '../src'
 
 const stringify = val => JSON.stringify(val);
 
-const process = (plugins, input) => core(plugins).process(input, { render });
+const process = (plugins, input) => core(plugins).process(input, { render: stringify });
 
 describe('@bbob/core', () => {
   test('parse bbcode string to ast and html', () => {
     const res = process([], '[style size="15px"]Large Text[/style]');
     const ast = res.tree;
 
-    expect(res.html).toBe(`<style size="15px">Large Text</style>`);
+    expect(res.html).toBe('[{"tag":"style","attrs":{"size":"15px"},"content":["Large"," ","Text"]}]');
     expect(ast).toBeInstanceOf(Array);
     expect(stringify(ast)).toEqual(stringify([
       {
diff --git a/packages/bbob-html/package.json b/packages/bbob-html/package.json
index 478d976..89eb7b6 100644
--- a/packages/bbob-html/package.json
+++ b/packages/bbob-html/package.json
@@ -4,10 +4,8 @@
   "description": "HTML renderer for BBCode pareser BBob",
   "keywords": [],
   "dependencies": {
-    "@bbob/plugin-helper": "^2.0.1"
-  },
-  "devDependencies": {
-    "@bbob/parser": "^2.2.0"
+    "@bbob/plugin-helper": "^2.0.1",
+    "@bbob/core": "^2.0.1"
   },
   "main": "lib/index.js",
   "module": "es/index.js",
diff --git a/packages/bbob-html/src/index.js b/packages/bbob-html/src/index.js
index a001fae..47cd1f4 100644
--- a/packages/bbob-html/src/index.js
+++ b/packages/bbob-html/src/index.js
@@ -1,3 +1,4 @@
+import core from '@bbob/core';
 import { attrValue } from '@bbob/plugin-helper';
 
 /**
@@ -48,5 +49,7 @@ const renderNodes = (nodes, { stripTags = false } = {}) => []
   .concat(nodes)
   .reduce((r, node) => r + renderNode(node, { stripTags }), '');
 
+const toHTML = (source, plugins) => core(plugins).process(source, { render: renderNodes }).html;
+
 export const render = renderNodes;
-export default renderNodes;
+export default toHTML;
diff --git a/packages/bbob-html/test/index.test.js b/packages/bbob-html/test/index.test.js
index 5cb53e9..4fad699 100644
--- a/packages/bbob-html/test/index.test.js
+++ b/packages/bbob-html/test/index.test.js
@@ -1,8 +1,8 @@
-import {parse} from '@bbob/parser'
+import core from '@bbob/core'
 import {render} from '../src';
 
 const process = (input, params) => {
-  const ast = parse(input);
+  const ast = core().process(input).tree;
 
   return render(ast, params)
 };
diff --git a/packages/bbob-preset-html5/package.json b/packages/bbob-preset-html5/package.json
index b34600d..3b2c08a 100644
--- a/packages/bbob-preset-html5/package.json
+++ b/packages/bbob-preset-html5/package.json
@@ -14,7 +14,6 @@
     "@bbob/preset": "^2.1.0"
   },
   "devDependencies": {
-    "@bbob/core": "^2.1.0",
     "@bbob/html": "^2.1.1"
   },
   "main": "lib/index.js",
diff --git a/packages/bbob-preset-html5/test/index.test.js b/packages/bbob-preset-html5/test/index.test.js
index 201bf43..ab5581f 100644
--- a/packages/bbob-preset-html5/test/index.test.js
+++ b/packages/bbob-preset-html5/test/index.test.js
@@ -1,8 +1,7 @@
-import core from '@bbob/core'
-import { render } from '@bbob/html'
+import html from '@bbob/html'
 import preset from '../src'
 
-const parse = input => core([preset()]).process(input, {render}).html;
+const parse = input => html(input, preset());
 
 describe('@bbob/preset-html5', () => {
   test('[b]bolded text[/b]', () => {
diff --git a/packages/bbob-react/src/Component.js b/packages/bbob-react/src/Component.js
index 03c6a95..8dfd942 100644
--- a/packages/bbob-react/src/Component.js
+++ b/packages/bbob-react/src/Component.js
@@ -1,7 +1,6 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-
-const { render } = require('./render');
+import React from 'react';
+import PropTypes from 'prop-types';
+import { render } from './render';
 
 const content = (children, plugins) => React.Children.map(children, child =>
   (typeof child === 'string' ? render(child, plugins) : child));
diff --git a/packages/bbob-react/src/render.js b/packages/bbob-react/src/render.js
index d645018..d9f9d00 100644
--- a/packages/bbob-react/src/render.js
+++ b/packages/bbob-react/src/render.js
@@ -1,33 +1,25 @@
 import React from 'react';
 import core from '@bbob/core';
-import html from '@bbob/html';
+import * as html from '@bbob/html';
 
 import { isTagNode, isStringNode } from '@bbob/plugin-helper';
 
 const toAST = (source, plugins) => core(plugins)
   .process(source, {
-    render: input => html(input, { stripTags: true }),
+    render: input => html.render(input, { stripTags: true }),
   }).tree;
 
 function tagToReactElement(node) {
-  if (node.content === null) {
-    return React.createElement(
-      node.tag,
-      node.attrs,
-      null,
-    );
-  }
-
   return React.createElement(
     node.tag,
     node.attrs,
     // eslint-disable-next-line no-use-before-define
-    renderToReactNodes(node.content),
+    node.content ? renderToReactNodes(node.content) : null,
   );
 }
 
 function renderToReactNodes(nodes) {
-  const els = nodes.reduce((arr, node) => {
+  const els = [].concat(nodes).reduce((arr, node) => {
     if (isTagNode(node)) {
       arr.push(tagToReactElement(node));
     } else if (isStringNode(node)) {