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

packages/bbob-react/.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": [
+        "react"
+    ]
+}

packages/bbob-react/index.js

@@ -1,47 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const parse = require('@bbob/html');
-
-class BBCode extends React.Component {
-  content() {
-    if (this.props.source) {
-      // eslint-disable-next-line react/no-danger
-      return <span dangerouslySetInnerHTML={{ __html: this.renderBBCode(this.props.source) }} />;
-    }
-
-    return React.Children.map(this.props.children, (child) => {
-      if (typeof child === 'string') {
-        // eslint-disable-next-line react/no-danger
-        return <span dangerouslySetInnerHTML={{ __html: this.renderBBCode(child) }} />;
-      }
-      return child;
-    });
-  }
-
-  renderBBCode(source) {
-    return parse(source, this.props.options);
-  }
-
-  render() {
-    const Container = this.props.container;
-
-    return (<Container>{this.content()}</Container>);
-  }
-}
-
-BBCode.propTypes = {
-  container: PropTypes.node,
-  children: PropTypes.element.isRequired,
-  source: PropTypes.string,
-  options: PropTypes.shape({
-    prop: PropTypes.bool,
-  }),
-};
-
-BBCode.defaultProps = {
-  container: 'div',
-  options: {},
-  source: null,
-};
-
-module.exports = BBCode;

packages/bbob-react/index.test.js

@@ -1,5 +0,0 @@
-describe('React BBCode', () => {
-  test('render markup properly', () => {
-
-  });
-});

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;

packages/bbob-react/package.json

@@ -2,7 +2,23 @@
   "name": "@bbob/react",
   "version": "1.0.7",
   "description": "",
-  "main": "index.js",
+  "main": "lib/index.js",
+  "directories": {
+    "lib": "lib"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JiLiZART/bbob.git"
+  },
+  "keywords": [
+    "bbob",
+    "react",
+    "helper"
+  ],
+  "bugs": {
+    "url": "https://github.com/JiLiZART/bbob/issues"
+  },
+  "homepage": "https://github.com/JiLiZART/bbob#readme",
   "scripts": {
     "test": "../../node_modules/.bin/jest --",
     "cover": "../../node_modules/.bin/jest --coverage",
@@ -14,11 +30,20 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@bbob/html": "^1.0.7",
-    "prop-types": "^15.6.1",
-    "react": "^15.6.2"
+    "@bbob/core": "^1.x",
+    "@bbob/plugin-helper": "^1.x",
+    "@bbob/preset-html5": "^1.0.5",
+    "prop-types": "^15.6.1"
   },
   "peerDependencies": {
     "react": "15.x"
+  },
+  "devDependencies": {
+    "babel-preset-react": "^6.24.1",
+    "enzyme": "^3.4.0",
+    "enzyme-adapter-react-15": "^1.0.6",
+    "react": "15.x",
+    "react-dom": "^15.6.2",
+    "react-test-renderer": "^15.6.2"
   }
 }

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

@@ -0,0 +1,44 @@
+const React = require('react');
+const { shallow } = require('enzyme');
+const BBCode = require('../lib');
+const presetHTML5 = require('../lib/preset-html5');
+const Enzyme = require('enzyme');
+const Adapter = require('enzyme-adapter-react-15');
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const renderBBCode = input => shallow(
+    <BBCode plugins={[presetHTML5()]}>{input}</BBCode>
+).html();
+
+describe('@bbob/react', () => {
+  test('[b]bolded text[/b]', () => {
+    const html = renderBBCode('[b]bolded text[/b]');
+
+    expect(html).toBe('<span><span style="font-weight:bold;">bolded text</span></span>')
+  });
+
+  test('[i]italicized text[/i]', () => {
+    const html = renderBBCode('[i]italicized text[/i]');
+
+    expect(html).toBe('<span><span style="font-style:italic;">italicized text</span></span>')
+  });
+
+  test('[u]underlined text[/u]', () => {
+    const html = renderBBCode('[u]underlined text[/u]');
+
+    expect(html).toBe('<span><span style="text-decoration:underline;">underlined text</span></span>')
+  });
+
+  test('[s]strikethrough text[/s]', () => {
+    const html = renderBBCode('[s]strikethrough text[/s]');
+
+    expect(html).toBe('<span><span style="text-decoration:line-through;">strikethrough text</span></span>')
+  });
+
+  test('[url]https://en.wikipedia.org[/url]', () => {
+    const html = renderBBCode('[url]https://en.wikipedia.org[/url]');
+
+    expect(html).toBe('<span><a href="https://en.wikipedia.org">https://en.wikipedia.org</a></span>')
+  });
+});