Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

syntax highlighting in action logger #118

Merged
merged 4 commits into from
Apr 19, 2016
Merged

syntax highlighting in action logger #118

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0d1b471
feat(highlight):added syntax highlighting in the action logger
ritz078 Apr 18, 2016
90ce5c4
fix lint error
ritz078 Apr 18, 2016
555f103
fixed tests
ritz078 Apr 18, 2016
3e2d64f
added tests for highlight
ritz078 Apr 19, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions dist/client/ui/foldable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ var _jsonStringifySafe = require('json-stringify-safe');

var _jsonStringifySafe2 = _interopRequireDefault(_jsonStringifySafe);

var _highlight = require('./highlight');

var _highlight2 = _interopRequireDefault(_highlight);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var folderStyle = {
Expand Down Expand Up @@ -124,11 +128,9 @@ var Foldable = function (_React$Component) {
this.state.collapsed ? '►' : '▼'
)
),
_react2.default.createElement(
'div',
{ ref: 'foldable-content', style: folderContentStyle },
content
)
_react2.default.createElement('div', { ref: 'foldable-content', style: folderContentStyle,
dangerouslySetInnerHTML: { __html: (0, _highlight2.default)(content) }
})
);
}
}]);
Expand Down
32 changes: 32 additions & 0 deletions dist/client/ui/highlight.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
'use strict';

Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = highlight;
function highlight(data) {
var json = data.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
var regex = /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g; // eslint-disable-line
return json.replace(regex, function (match) {
var className = 'number';
var style = void 0;
var result = match;
if (/^"/.test(result)) {
if (/:$/.test(result)) {
className = 'key';
style = 'color:#800080';
result = match.replace(/"/g, '');
} else {
className = 'string';
style = 'color:#a31515';
}
} else if (/true|false/.test(result)) {
className = 'boolean';
style = 'color:#066066';
} else if (/null|undefined/.test(result)) {
className = 'null';
style = 'color:#a31515';
}
return '<span class="' + className + '" style="' + style + '">' + result + '</span>';
});
}
4 changes: 2 additions & 2 deletions src/client/ui/__tests__/foldable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ describe('<Foldable />', function () {
args: 'things',
};

const compactString = '{"name":"test action","args":"things"}';
const compactString = '{name:"test action",args:"things"}';

const wrap = mount(<Foldable action={data} />);
const content = wrap.ref('foldable-content');
Expand All @@ -25,7 +25,7 @@ describe('<Foldable />', function () {
args: 'things',
};

const fullString = '{\n "name": "test action",\n "args": "things"\n}';
const fullString = '{\n name: "test action",\n args: "things"\n}';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we write an additional test case targetted for syntax highlighting.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure


const wrap = mount(<Foldable action={data} />);
const toggle = wrap.ref('foldable-toggle');
Expand Down
6 changes: 4 additions & 2 deletions src/client/ui/foldable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import stringify from 'json-stringify-safe';
import highlight from './highlight';

const folderStyle = {
display: 'block',
Expand Down Expand Up @@ -71,8 +72,9 @@ class Foldable extends React.Component {
</span>
</div>

<div ref="foldable-content" style={ folderContentStyle }>
{ content }
<div ref="foldable-content" style={ folderContentStyle }
dangerouslySetInnerHTML={ { __html: highlight(content) } }
>
</div>
</div>
);
Expand Down
26 changes: 26 additions & 0 deletions src/client/ui/highlight.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
export default function highlight(data) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a way we can use a NPM module for this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

couldn't find a module that did only this. Most of them were overkill as they had separate CSS and were made to parse different languages.

Copy link
Member

@arunoda arunoda Apr 19, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay. Then that's fine.
Try to make some comments(on the file) on why we are using it and so on.

const json = data.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
const regex = /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g; // eslint-disable-line
return json.replace(regex, (match) => {
let className = 'number';
let style;
let result = match;
if (/^"/.test(result)) {
if (/:$/.test(result)) {
className = 'key';
style = 'color:#800080';
result = match.replace(/"/g, '');
} else {
className = 'string';
style = 'color:#a31515';
}
} else if (/true|false/.test(result)) {
className = 'boolean';
style = 'color:#066066';
} else if (/null|undefined/.test(result)) {
className = 'null';
style = 'color:#a31515';
}
return `<span class="${className}" style="${style}">${result}</span>`;
});
}