diff --git a/README.md b/README.md
index 8d1cd508..80bc8422 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,23 @@
> react-log
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
> React for the Console
## Install
diff --git a/dist/Log.js b/dist/Log.js
new file mode 100644
index 00000000..c03715c1
--- /dev/null
+++ b/dist/Log.js
@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _parser = require('./parser');
+
+var _parser2 = _interopRequireDefault(_parser);
+
+var _styleObjectSerializer = require('./utils/styleObjectSerializer');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Log = function (_React$Component) {
+ _inherits(Log, _React$Component);
+
+ function Log() {
+ _classCallCheck(this, Log);
+
+ return _possibleConstructorReturn(this, Object.getPrototypeOf(Log).apply(this, arguments));
+ }
+
+ _createClass(Log, [{
+ key: 'componentDidMount',
+ value: function componentDidMount() {
+ var _console;
+
+ var children = this.props.children;
+ var type = children.type;
+ var props = children.props;
+
+
+ var body = _react2.default.createElement('body', null, children);
+ var parsedData = (0, _parser2.default)(body);
+ var logMarkup = parsedData.map(function (item) {
+ return item.markup;
+ }).join('');
+ var logStyles = parsedData.map(function (item) {
+ return (0, _styleObjectSerializer.serializeStyleObject)(item.style);
+ });
+
+ (_console = console).log.apply(_console, [logMarkup].concat(_toConsumableArray(logStyles)));
+ }
+ }, {
+ key: 'render',
+ value: function render() {
+ return false;
+ }
+ }]);
+
+ return Log;
+}(_react2.default.Component);
+
+exports.default = Log;
\ No newline at end of file
diff --git a/dist/index.js b/dist/index.js
new file mode 100644
index 00000000..a40ab3f0
--- /dev/null
+++ b/dist/index.js
@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = undefined;
+
+var _Log = require('./Log.jsx');
+
+var _Log2 = _interopRequireDefault(_Log);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _Log2.default;
\ No newline at end of file
diff --git a/dist/parser/elements/a.js b/dist/parser/elements/a.js
new file mode 100644
index 00000000..23004b2f
--- /dev/null
+++ b/dist/parser/elements/a.js
@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.default = a;
+function a(parser, node) {
+ var defaultStyles = {
+ color: 'blue',
+ text_decoration: 'underline'
+ };
+
+ var children = [];
+
+ if (node.props) {
+ children = node.props.children;
+ children = Array.isArray(children) ? children : [children];
+ }
+
+ if (children[0]) {
+ var parsedElement = parser(children[0], _extends({}, defaultStyles, node.props));
+
+ if (parsedElement.style.display && parsedElement.style.display == 'block') {
+ parsedElement.markup += '\n';
+ }
+
+ parsedElement.markup += ' - ' + node.props.href;
+
+ return parsedElement;
+ } else {
+ return {
+ markup: '%c' + node.props.href,
+ style: _extends({}, defaultStyles, node.props)
+ };
+ }
+}
\ No newline at end of file
diff --git a/dist/parser/elements/body.js b/dist/parser/elements/body.js
new file mode 100644
index 00000000..fe4a9a25
--- /dev/null
+++ b/dist/parser/elements/body.js
@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = body;
+function body(parser, node) {
+ var children = [];
+
+ if (node.props) {
+ children = node.props.children;
+ children = Array.isArray(children) ? children : [children];
+ }
+
+ return children.map(function (item) {
+ return parser(item, {});
+ });
+}
\ No newline at end of file
diff --git a/dist/parser/elements/div.js b/dist/parser/elements/div.js
new file mode 100644
index 00000000..efdb8e87
--- /dev/null
+++ b/dist/parser/elements/div.js
@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.default = div;
+function div(parser, node) {
+ var defaultStyles = {
+ display: 'block',
+ color: 'black'
+ };
+
+ var children = [];
+
+ if (node.props) {
+ children = node.props.children;
+ children = Array.isArray(children) ? children : [children];
+ }
+
+ var parsedElement = parser(children[0], _extends({}, defaultStyles, node.props));
+
+ if (parsedElement.style.display && parsedElement.style.display == 'block') {
+ parsedElement.markup += '\n';
+ }
+
+ return parsedElement;
+}
\ No newline at end of file
diff --git a/dist/parser/elements/h1.js b/dist/parser/elements/h1.js
new file mode 100644
index 00000000..7182159a
--- /dev/null
+++ b/dist/parser/elements/h1.js
@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.default = h1;
+function h1(parser, node) {
+ var defaultStyles = {
+ display: 'block',
+ color: 'black',
+ font_weight: 'bold',
+ font_size: '2em'
+ };
+
+ var children = [];
+
+ if (node.props) {
+ children = node.props.children;
+ children = Array.isArray(children) ? children : [children];
+ }
+
+ var parsedElement = parser(children[0], _extends({}, defaultStyles, node.props));
+
+ if (parsedElement.style.display && parsedElement.style.display == 'block') {
+ parsedElement.markup += '\n';
+ }
+
+ return parsedElement;
+}
\ No newline at end of file
diff --git a/dist/parser/elements/h2.js b/dist/parser/elements/h2.js
new file mode 100644
index 00000000..6c387206
--- /dev/null
+++ b/dist/parser/elements/h2.js
@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.default = h2;
+function h2(parser, node) {
+ var defaultStyles = {
+ display: 'block',
+ color: 'black',
+ font_weight: 'bold',
+ font_size: '1.5em'
+ };
+
+ var children = [];
+
+ if (node.props) {
+ children = node.props.children;
+ children = Array.isArray(children) ? children : [children];
+ }
+
+ var parsedElement = parser(children[0], _extends({}, defaultStyles, node.props));
+
+ if (parsedElement.style.display && parsedElement.style.display == 'block') {
+ parsedElement.markup += '\n';
+ }
+
+ return parsedElement;
+}
\ No newline at end of file
diff --git a/dist/parser/elements/h3.js b/dist/parser/elements/h3.js
new file mode 100644
index 00000000..54611a9c
--- /dev/null
+++ b/dist/parser/elements/h3.js
@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.default = h1;
+function h1(parser, node) {
+ var defaultStyles = {
+ display: 'block',
+ color: 'black',
+ font_weight: 'bold',
+ font_size: '1.17em'
+ };
+
+ var children = [];
+
+ if (node.props) {
+ children = node.props.children;
+ children = Array.isArray(children) ? children : [children];
+ }
+
+ var parsedElement = parser(children[0], _extends({}, defaultStyles, node.props));
+
+ if (parsedElement.style.display && parsedElement.style.display == 'block') {
+ parsedElement.markup += '\n';
+ }
+
+ return parsedElement;
+}
\ No newline at end of file
diff --git a/dist/parser/elements/h4.js b/dist/parser/elements/h4.js
new file mode 100644
index 00000000..54611a9c
--- /dev/null
+++ b/dist/parser/elements/h4.js
@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.default = h1;
+function h1(parser, node) {
+ var defaultStyles = {
+ display: 'block',
+ color: 'black',
+ font_weight: 'bold',
+ font_size: '1.17em'
+ };
+
+ var children = [];
+
+ if (node.props) {
+ children = node.props.children;
+ children = Array.isArray(children) ? children : [children];
+ }
+
+ var parsedElement = parser(children[0], _extends({}, defaultStyles, node.props));
+
+ if (parsedElement.style.display && parsedElement.style.display == 'block') {
+ parsedElement.markup += '\n';
+ }
+
+ return parsedElement;
+}
\ No newline at end of file
diff --git a/dist/parser/elements/h5.js b/dist/parser/elements/h5.js
new file mode 100644
index 00000000..524c2741
--- /dev/null
+++ b/dist/parser/elements/h5.js
@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.default = h1;
+function h1(parser, node) {
+ var defaultStyles = {
+ display: 'block',
+ color: 'black',
+ font_weight: 'bold',
+ font_size: '.83em'
+ };
+
+ var children = [];
+
+ if (node.props) {
+ children = node.props.children;
+ children = Array.isArray(children) ? children : [children];
+ }
+
+ var parsedElement = parser(children[0], _extends({}, defaultStyles, node.props));
+
+ if (parsedElement.style.display && parsedElement.style.display == 'block') {
+ parsedElement.markup += '\n';
+ }
+
+ return parsedElement;
+}
\ No newline at end of file
diff --git a/dist/parser/elements/h6.js b/dist/parser/elements/h6.js
new file mode 100644
index 00000000..ebf53dac
--- /dev/null
+++ b/dist/parser/elements/h6.js
@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.default = h1;
+function h1(parser, node) {
+ var defaultStyles = {
+ display: 'block',
+ color: 'black',
+ font_weight: 'bold',
+ font_size: '.67em'
+ };
+
+ var children = [];
+
+ if (node.props) {
+ children = node.props.children;
+ children = Array.isArray(children) ? children : [children];
+ }
+
+ var parsedElement = parser(children[0], _extends({}, defaultStyles, node.props));
+
+ if (parsedElement.style.display && parsedElement.style.display == 'block') {
+ parsedElement.markup += '\n';
+ }
+
+ return parsedElement;
+}
\ No newline at end of file
diff --git a/dist/parser/elements/index.js b/dist/parser/elements/index.js
new file mode 100644
index 00000000..6658b0f0
--- /dev/null
+++ b/dist/parser/elements/index.js
@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _body = require('./body');
+
+var _body2 = _interopRequireDefault(_body);
+
+var _div = require('./div');
+
+var _div2 = _interopRequireDefault(_div);
+
+var _span = require('./span');
+
+var _span2 = _interopRequireDefault(_span);
+
+var _h = require('./h1');
+
+var _h2 = _interopRequireDefault(_h);
+
+var _h3 = require('./h2');
+
+var _h4 = _interopRequireDefault(_h3);
+
+var _h5 = require('./h3');
+
+var _h6 = _interopRequireDefault(_h5);
+
+var _h7 = require('./h4');
+
+var _h8 = _interopRequireDefault(_h7);
+
+var _h9 = require('./h5');
+
+var _h10 = _interopRequireDefault(_h9);
+
+var _h11 = require('./h6');
+
+var _h12 = _interopRequireDefault(_h11);
+
+var _p = require('./p');
+
+var _p2 = _interopRequireDefault(_p);
+
+var _a = require('./a');
+
+var _a2 = _interopRequireDefault(_a);
+
+var _text = require('./text');
+
+var _text2 = _interopRequireDefault(_text);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = {
+ body: _body2.default, div: _div2.default, span: _span2.default, h1: _h2.default, h2: _h4.default, h3: _h6.default, h4: _h8.default, h5: _h10.default, h6: _h12.default, p: _p2.default, a: _a2.default, text: _text2.default
+};
\ No newline at end of file
diff --git a/dist/parser/elements/p.js b/dist/parser/elements/p.js
new file mode 100644
index 00000000..ec0a9259
--- /dev/null
+++ b/dist/parser/elements/p.js
@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.default = p;
+function p(parser, node) {
+ var defaultStyles = {
+ display: 'block',
+ color: 'black',
+ margin_left: '8px'
+ };
+
+ var children = [];
+
+ if (node.props) {
+ children = node.props.children;
+ children = Array.isArray(children) ? children : [children];
+ }
+
+ var parsedElement = parser(children[0], _extends({}, defaultStyles, node.props));
+
+ if (parsedElement.style.display && parsedElement.style.display == 'block') {
+ parsedElement.markup += '\n';
+ }
+
+ return parsedElement;
+}
\ No newline at end of file
diff --git a/dist/parser/elements/span.js b/dist/parser/elements/span.js
new file mode 100644
index 00000000..732b3c25
--- /dev/null
+++ b/dist/parser/elements/span.js
@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.default = span;
+function span(parser, node) {
+ var defaultStyles = {
+ color: 'black'
+ };
+
+ var children = [];
+
+ if (node.props) {
+ children = node.props.children;
+ children = Array.isArray(children) ? children : [children];
+ }
+
+ var parsedElement = parser(children[0], _extends({}, defaultStyles, node.props));
+
+ if (parsedElement.style.display && parsedElement.style.display == 'block') {
+ parsedElement.markup += '\n';
+ }
+
+ return parsedElement;
+}
\ No newline at end of file
diff --git a/dist/parser/elements/text.js b/dist/parser/elements/text.js
new file mode 100644
index 00000000..47d9c804
--- /dev/null
+++ b/dist/parser/elements/text.js
@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = text;
+function text(parser, node) {
+ return {
+ markup: '%c' + node.markup,
+ style: node.style
+ };
+}
\ No newline at end of file
diff --git a/dist/parser/index.js b/dist/parser/index.js
new file mode 100644
index 00000000..b7185f86
--- /dev/null
+++ b/dist/parser/index.js
@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = undefined;
+
+var _parser = require('./parser.js');
+
+var _parser2 = _interopRequireDefault(_parser);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _parser2.default;
\ No newline at end of file
diff --git a/dist/parser/parser.js b/dist/parser/parser.js
new file mode 100644
index 00000000..30ea30a7
--- /dev/null
+++ b/dist/parser/parser.js
@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = parser;
+
+var _elements = require('./elements');
+
+var _elements2 = _interopRequireDefault(_elements);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function parser(node, style) {
+ if (typeof node == 'string') {
+ node = { type: 'text', markup: node, style: style };
+ }
+
+ if (!_elements2.default[node.type]) {
+ throw new TypeError(node.type);
+ }
+
+ return _elements2.default[node.type](parser, node);
+}
\ No newline at end of file
diff --git a/dist/utils/styleObjectSerializer.js b/dist/utils/styleObjectSerializer.js
new file mode 100644
index 00000000..d9fdd423
--- /dev/null
+++ b/dist/utils/styleObjectSerializer.js
@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.serializeStyleObject = serializeStyleObject;
+
+var _paramCase = require('param-case');
+
+var _paramCase2 = _interopRequireDefault(_paramCase);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function serializeStyleObject(styleObject) {
+ var serializedObject = '';
+
+ for (var key in styleObject) {
+ if (styleObject.hasOwnProperty(key)) {
+ serializedObject += (0, _paramCase2.default)(key) + ':' + styleObject[key] + ';';
+ }
+ }
+
+ return serializedObject.replace('_', '-');
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 76980cd1..522f450e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-log",
- "version": "1.1.0",
+ "version": "1.1.1",
"description": "React for the Console",
"main": "dist/index.js",
"files": [