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) // Text
@@ -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);
```
+[](https://codesandbox.io/s/lp7q9yj0lq)
+
### React usage
#### Component
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 = () => (
@@ -160,9 +172,33 @@ const MyComponent = () => (
render() //
```
+[](https://codesandbox.io/s/306pzr9k5p)
+
#### Render prop
+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 }) => (
+ {text}
+)
+
+render() // Super easy to render
+```
+
+[](https://codesandbox.io/s/x7w52lqmzz)
+
### PostHTML usage
### Create Plugin
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(``);
+ 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)) {