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

packages/bbob-html/lib/index.js

@@ -1,19 +1,4 @@
-function escapeQuote(value) {
-  return value.replace(/"/g, '"');
-}
-
-function attrValue(name, value) {
-  const type = typeof value;
-
-  const types = {
-    boolean: () => (value ? `${name}` : ''),
-    number: () => `${name}="${value}"`,
-    string: () => `${name}="${escapeQuote(value)}"`,
-    object: () => `${name}="${escapeQuote(JSON.stringify(value))}"`,
-  };
-
-  return types[type] ? types[type]() : '';
-}
+const { attrValue } = require('@bbob/plugin-helper');
 
 /**
  * Transforms attrs to html params string

packages/bbob-html/package.json

@@ -3,6 +3,9 @@
   "version": "1.0.7",
   "description": "HTML renderer for BBCode pareser BBob",
   "main": "lib/index.js",
+  "dependencies": {
+    "@bbob/plugin-helper": "^1.0.0"
+  },
   "devDependencies": {
     "@bbob/parser": "^1.1.0"
   },

packages/bbob-plugin-helper/.eslintignore

@@ -0,0 +1,2 @@
+dist
+test

packages/bbob-plugin-helper/lib/TagNode.js

@@ -29,8 +29,9 @@ class TagNode {
   toString() {
     const OB = getChar(OPEN_BRAKET);
     const CB = getChar(CLOSE_BRAKET);
+    const SL = getChar(SLASH);
 
-    return OB + this.tag + CB + this.content.reduce((r, node) => r + node.toString(), '') + OB + getChar(SLASH) + this.tag + CB;
+    return OB + this.tag + CB + this.content.reduce((r, node) => r + node.toString(), '') + OB + SL + this.tag + CB;
   }
 }
 

packages/bbob-plugin-helper/lib/index.js

@@ -1,6 +1,6 @@
 const { getChar, N } = require('./char');
 
-const isTagNode = el => typeof el === 'object' && el.tag;
+const isTagNode = el => typeof el === 'object' && !!el.tag;
 const isStringNode = el => typeof el === 'string';
 
 const EOL = getChar(N);
@@ -20,7 +20,23 @@ const appendToNode = (node, value) => {
   node.content.push(value);
 };
 
+const escapeQuote = value => value.replace(/"/g, '"');
+
+const attrValue = (name, value) => {
+  const type = typeof value;
+
+  const types = {
+    boolean: () => (value ? `${name}` : ''),
+    number: () => `${name}="${value}"`,
+    string: () => `${name}="${escapeQuote(value)}"`,
+    object: () => `${name}="${escapeQuote(JSON.stringify(value))}"`,
+  };
+
+  return types[type] ? types[type]() : '';
+};
+
 module.exports = {
+  attrValue,
   appendToNode,
   getNodeLength,
   isTagNode,

packages/bbob-plugin-helper/test/TagNode.test.js

@@ -0,0 +1,21 @@
+const TagNode = require('../lib/TagNode');
+
+describe('@bbob/plugin-helper/lib/TagNode', () => {
+  test('create', () => {
+    const tagNode = TagNode.create('test', {test: 1}, ['Hello']);
+
+    expect(tagNode).toBeInstanceOf(TagNode)
+  });
+
+  test('isOf', () => {
+    const tagNode = TagNode.create('test', {test: 1}, ['Hello']);
+
+    expect(TagNode.isOf(tagNode, 'test')).toBe(true);
+  });
+
+  test('toString', () => {
+    const tagNode = TagNode.create('test', {test: 1}, ['Hello']);
+
+    expect(String(tagNode)).toBe('[test]Hello[/test]');
+  });
+});

packages/bbob-plugin-helper/test/index.test.js

@@ -1,6 +1,68 @@
+const {
+  attrValue,
+  appendToNode,
+  getNodeLength,
+  isTagNode,
+  isStringNode,
+} = require('../lib');
 
 describe('@bbob/plugin-helper', () => {
-  test('one', () => {
-    expect(1 + 2).toBe(3);
+  test('appendToNode', () => {
+    const value = 'test';
+    const node = { content: [] };
+
+    appendToNode(node, value);
+    expect(node.content.pop()).toBe(value);
+  });
+
+  test('getNodeLength', () => {
+    const node = {
+      tag: 'test',
+      content: [
+        '123',
+        {
+          tag: 'test2',
+          content: ['123']
+        }
+      ]
+    };
+
+    expect(getNodeLength(node)).toBe(6)
+  });
+
+  test('isTagNode', () => {
+    const node = {
+      tag: 'test',
+      content: []
+    };
+
+    expect(isTagNode(node)).toBe(true)
+  });
+
+  test('isStringNode', () => {
+    const node = {
+      tag: 'test',
+      content: ['123']
+    };
+
+    expect(isStringNode(node.content[0])).toBe(true);
+  });
+
+  test('attrValue boolean', () => {
+    expect(attrValue('test', true)).toBe('test');
+  });
+
+  test('attrValue number', () => {
+    expect(attrValue('test', 123)).toBe('test="123"');
+  });
+
+  test('attrValue string', () => {
+    expect(attrValue('test', 'hello')).toBe('test="hello"');
+  });
+
+  test('attrValue object', () => {
+    const attrs = { tag: 'test'};
+
+    expect(attrValue('test', attrs)).toBe('test="{"tag":"test"}"');
   });
 });

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

@@ -1,12 +1,24 @@
+/* eslint-disable indent */
 const { isTagNode } = require('@bbob/plugin-helper');
-const defaultProcessors = require('./default');
+const defaultTags = require('./default');
 
-module.exports = function html5Preset(opts = {}) {
-  const processors = Object.assign({}, defaultProcessors, opts.processors || {});
-
-  return function process(tree, core) {
-    tree.walk(node => (isTagNode(node) && processors[node.tag]
-      ? processors[node.tag](node, core)
+function process(tags, tree, core) {
+  tree.walk(node => (isTagNode(node) && tags[node.tag]
+      ? tags[node.tag](node, core)
       : node));
-  };
-};
+}
+
+function html5Preset(opts = {}) {
+  const tags = Object.assign({}, defaultTags, opts.tags || {});
+
+  return (tree, core) => process(tags, tree, core);
+}
+
+function extend(callback) {
+  const tags = callback(defaultTags);
+
+  return () => (tree, core) => process(tags, tree, core);
+}
+
+module.exports = html5Preset;
+module.exports.extend = extend;

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>')
+  });
+});