feat(*): react render support, move some helper functions to plugin-helper

packages/bbob-react/lib/Component.js

@@ -0,0 +1,39 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const core = require('@bbob/core');
+const render = require('./render');
+
+class Component extends React.Component {
+  content() {
+    return React.Children.map(this.props.children, (child) => {
+      if (typeof child === 'string') {
+        // eslint-disable-next-line react/no-danger
+        return render(this.renderBBCodeToAST(child));
+      }
+      return child;
+    });
+  }
+
+  renderBBCodeToAST(source) {
+    return core(this.props.plugins).process(source).tree;
+  }
+
+  render() {
+    const Container = this.props.container;
+
+    return (<Container>{this.content()}</Container>);
+  }
+}
+
+Component.propTypes = {
+  container: PropTypes.node,
+  children: PropTypes.node.isRequired,
+  plugins: PropTypes.arrayOf(Function),
+};
+
+Component.defaultProps = {
+  container: 'span',
+  plugins: [],
+};
+
+module.exports = Component;

packages/bbob-react/lib/index.js

@@ -0,0 +1,2 @@
+module.exports = require('./Component');
+

packages/bbob-react/lib/preset-html5.js

@@ -0,0 +1,33 @@
+const presetHTML5 = require('@bbob/preset-html5');
+
+module.exports = presetHTML5.extend(tags => ({
+  ...tags,
+
+  b: (...args) => ({
+    ...tags.b(...args),
+    attrs: {
+      style: { fontWeight: 'bold' },
+    },
+  }),
+
+  i: (...args) => ({
+    ...tags.b(...args),
+    attrs: {
+      style: { fontStyle: 'italic' },
+    },
+  }),
+
+  u: (...args) => ({
+    ...tags.b(...args),
+    attrs: {
+      style: { textDecoration: 'underline' },
+    },
+  }),
+
+  s: (...args) => ({
+    ...tags.b(...args),
+    attrs: {
+      style: { textDecoration: 'line-through' },
+    },
+  }),
+}));

packages/bbob-react/lib/render.js

@@ -0,0 +1,35 @@
+const React = require('react');
+const { isTagNode, isStringNode } = require('@bbob/plugin-helper');
+
+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
+    render(node.content),
+  );
+}
+
+function render(nodes) {
+  const els = nodes.reduce((arr, node) => {
+    if (isTagNode(node)) {
+      arr.push(tagToReactElement(node));
+    } else if (isStringNode(node)) {
+      arr.push(node);
+    }
+
+    return arr;
+  }, []);
+
+  return els;
+}
+
+module.exports = render;