Skip to content

Commit f90e0eb

Browse files
akiranakiran
authored
Merge pull request #31 from MichaelDeBoey/react-15.5
Migrate to React 15.5
2 parents d11510d + 60319e6 commit f90e0eb

File tree

5 files changed

+187
-186
lines changed

5 files changed

+187
-186
lines changed

‎package.json‎

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
"description": "React component for syntax highlighting",
55
"main": "index.js",
66
"scripts": {
7-
"start": "./node_modules/.bin/gulp server",
8-
"prepublish": "./node_modules/.bin/babel ./src --out-dir ./lib",
9-
"test": "./node_modules/.bin/karma start --single-run",
10-
"dev-test": "./node_modules/.bin/karma start"
7+
"start": "gulp server",
8+
"prepublish": "babel ./src --out-dir ./lib",
9+
"test": "karma start --single-run",
10+
"dev-test": "karma start"
1111
},
1212
"repository": {
1313
"type": "git",
@@ -27,36 +27,34 @@
2727
},
2828
"homepage": "https://github.com/akiran/react-highlight",
2929
"dependencies": {
30-
"highlight.js": "^9.6.0",
31-
"react": "^0.14.0 || ^15.0.0",
32-
"react-dom": "^0.14.0 || ^15.0.0"
30+
"highlight.js": "^9.11.0",
31+
"react": "^15.5.4",
32+
"react-dom": "^15.5.4"
3333
},
3434
"devDependencies": {
35-
"autoprefixer-core": "^4.0.2",
36-
"babel": "^5.6.14",
37-
"babel-core": "^5.6.18",
38-
"babel-eslint": "^6.0.2",
39-
"babel-loader": "^5.3.1",
40-
"es5-shim": "^4.1.7",
41-
"eslint": "^2.8.0",
42-
"eslint-plugin-react": "^4.3.0",
43-
"gulp": "^3.8.10",
44-
"gulp-ruby-sass": "^0.7.1",
45-
"html-loader": "^0.2.3",
46-
"jasmine-core": "^2.3.4",
47-
"jsx-loader": "^0.12.2",
48-
"karma": "^0.13.3",
49-
"karma-jasmine": "^0.3.6",
50-
"karma-phantomjs-launcher": "^0.2.1",
51-
"karma-webpack": "^1.7.0",
52-
"markdown-loader": "^0.1.2",
53-
"multiline": "^1.0.1",
54-
"node-libs-browser": "^0.5.2",
55-
"phantomjs": "^1.9.17",
35+
"autoprefixer": "^6.7.7",
36+
"babel": "^5.8.38",
37+
"babel-core": "^5.8.38",
38+
"babel-eslint": "^6.1.2",
39+
"babel-loader": "^5.4.2",
40+
"es5-shim": "^4.5.9",
41+
"eslint": "^3.19.0",
42+
"eslint-plugin-react": "^6.10.3",
43+
"gulp": "^3.9.1",
44+
"gulp-ruby-sass": "^2.1.1",
45+
"html-loader": "^0.4.5",
46+
"jasmine-core": "^2.5.2",
47+
"jsx-loader": "^0.13.2",
48+
"karma": "^1.6.0",
49+
"karma-jasmine": "^1.1.0",
50+
"karma-phantomjs-launcher": "^1.0.4",
51+
"karma-webpack": "^2.0.3",
52+
"markdown-loader": "^2.0.0",
53+
"multiline": "^1.0.2",
54+
"node-libs-browser": "^2.0.0",
55+
"phantomjs-prebuilt": "^2.1.14",
5656
"raw-loader": "^0.5.1",
57-
"react": "^0.14.0",
58-
"react-addons-test-utils": "^0.14.3",
59-
"webpack": "^1.12.2",
60-
"webpack-dev-server": "^1.6.6"
57+
"webpack": "^1.15.0",
58+
"webpack-dev-server": "^1.16.3"
6159
}
6260
}

‎src/index.js‎

Lines changed: 47 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,50 @@
1-
var hljs = require('highlight.js');
2-
var React = require('react');
3-
var ReactDOM = require('react-dom');
4-
5-
var Highlight = React.createClass({
6-
getDefaultProps: function () {
7-
return {
8-
innerHTML: false,
9-
className: null,
10-
element: null,
11-
};
12-
},
13-
componentDidMount: function () {
14-
this.highlightCode();
15-
},
16-
componentDidUpdate: function () {
17-
this.highlightCode();
18-
},
19-
highlightCode: function () {
20-
var domNode = ReactDOM.findDOMNode(this);
21-
var nodes = domNode.querySelectorAll('pre code');
22-
if (nodes.length > 0) {
23-
for (var i = 0; i < nodes.length; i=i+1) {
24-
hljs.highlightBlock(nodes[i]);
25-
}
1+
import hljs from 'highlight.js';
2+
import React from 'react';
3+
import ReactDOM from 'react-dom';
4+
5+
class Highlight extends React.Component {
6+
componentDidMount() {
7+
this.highlightCode();
8+
}
9+
10+
componentDidUpdate() {
11+
this.highlightCode();
12+
}
13+
14+
highlightCode() {
15+
const domNode = ReactDOM.findDOMNode(this);
16+
const nodes = domNode.querySelectorAll('pre code');
17+
18+
let i;
19+
for (i = 0; i < nodes.length; i++) {
20+
hljs.highlightBlock(nodes[i]);
21+
}
2622
}
27-
},
28-
render: function () {
29-
var Element = this.props.element ? React.DOM[this.props.element]: null;
30-
31-
if (this.props.innerHTML) {
32-
if (!Element) {
33-
Element = React.DOM.div
34-
}
35-
return Element({
36-
dangerouslySetInnerHTML: {__html: this.props.children},
37-
className: this.props.className || null
38-
}, null);
39-
} else {
40-
if (Element) {
41-
return Element({
42-
className:this.props.className
43-
}, this.props.children);
44-
} else {
45-
return <pre><code className={this.props.className}>{this.props.children}</code></pre>;
46-
}
23+
24+
render() {
25+
const {children, className, element, innerHTML} = this.props;
26+
let Element = element ? React.DOM[element] : null;
27+
28+
if (innerHTML) {
29+
if (!Element) {
30+
Element = React.DOM.div
31+
}
32+
33+
return Element({dangerouslySetInnerHTML: {__html: children}, className: className || null}, null);
34+
} else {
35+
if (Element) {
36+
return Element({className}, children);
37+
} else {
38+
return <pre><code className={className}>{children}</code></pre>;
39+
}
40+
}
4741
}
48-
}
49-
});
42+
}
43+
44+
Highlight.defaultProps = {
45+
innerHTML: false,
46+
className: null,
47+
element: null,
48+
};
5049

51-
module.exports = Highlight;
50+
export default Highlight;

‎src/optimized.js‎

Lines changed: 55 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,59 @@
1-
var hljs = require('highlight.js/lib/highlight');
2-
var React = require('react');
3-
var ReactDOM = require('react-dom');
4-
5-
var Highlight = React.createClass({
6-
getDefaultProps: function () {
7-
return {
8-
innerHTML: false,
9-
className: "",
10-
languages: []
11-
};
12-
},
13-
componentDidMount: function () {
14-
this.highlightCode();
15-
},
16-
componentDidUpdate: function () {
17-
this.highlightCode();
18-
},
19-
highlightCode: function () {
20-
var languages = this.props.languages;
21-
if ((languages.length === 0) && this.props.className) {
22-
languages.push(this.props.className);
1+
import hljs from'highlight.js/lib/highlight';
2+
import React from'react';
3+
import ReactDOM from'react-dom';
4+
5+
class Highlight extends React.Component {
6+
componentDidMount() {
7+
this.highlightCode();
238
}
24-
this.props.languages.forEach(function (lang) {
25-
hljs.registerLanguage(lang, require('highlight.js/lib/languages/' + lang));
26-
});
27-
var domNode = ReactDOM.findDOMNode(this);
28-
var nodes = domNode.querySelectorAll('pre code');
29-
if (nodes.length > 0) {
30-
for (var i = 0; i < nodes.length; i=i+1) {
31-
hljs.highlightBlock(nodes[i]);
32-
}
9+
10+
componentDidUpdate() {
11+
this.highlightCode();
3312
}
34-
},
35-
render: function () {
36-
var Element = this.props.element ? React.DOM[this.props.element]: null;
37-
38-
if (this.props.innerHTML) {
39-
if (!Element) {
40-
Element = React.DOM.div
41-
}
42-
return Element({
43-
dangerouslySetInnerHTML: {__html: this.props.children},
44-
className: this.props.className || null
45-
}, null);
46-
} else {
47-
if (Element) {
48-
return Element({
49-
className:this.props.className
50-
}, this.props.children);
51-
} else {
52-
return <pre><code className={this.props.className}>{this.props.children}</code></pre>;
53-
}
13+
14+
highlightCode() {
15+
const {className, languages} = this.props;
16+
const domNode = ReactDOM.findDOMNode(this);
17+
const nodes = domNode.querySelectorAll('pre code');
18+
19+
if ((languages.length === 0) && className) {
20+
languages.push(className);
21+
}
22+
23+
languages.forEach(lang => {
24+
hljs.registerLanguage(lang, require('highlight.js/lib/languages/' + lang));
25+
});
26+
27+
let i;
28+
for (i = 0; i < nodes.length; i++) {
29+
hljs.highlightBlock(nodes[i]);
30+
}
5431
}
55-
}
56-
});
5732

58-
module.exports = Highlight;
33+
render() {
34+
const {children, className, element, innerHTML} = this.props;
35+
let Element = element ? React.DOM[element] : null;
36+
37+
if (innerHTML) {
38+
if (!Element) {
39+
Element = React.DOM.div
40+
}
41+
42+
return Element({dangerouslySetInnerHTML: {__html: children}, className: className || null}, null);
43+
} else {
44+
if (Element) {
45+
return Element({className}, children);
46+
} else {
47+
return <pre><code className={className}>{children}</code></pre>;
48+
}
49+
}
50+
}
51+
}
52+
53+
Highlight.defaultProps = {
54+
innerHTML: false,
55+
className: '',
56+
languages: [],
57+
};
58+
59+
export default Highlight;

‎test/highlight.test.js‎

Lines changed: 53 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,54 @@
1-
var Highlight = require('../src');
2-
var ReactDOM = require('react-dom');
3-
var TestUtils = require('react-addons-test-utils');
4-
var ReactDOMServer = require('react-dom/server');
5-
describe('highlight', function() {
6-
7-
it('should display test inside it', function() {
8-
var text = TestUtils.renderIntoDocument(
9-
<Highlight>Some text</Highlight>
10-
);
11-
expect(ReactDOM.findDOMNode(text).textContent).toBe('Some text');
12-
});
13-
14-
it('should have pre and code tags in markup', function() {
15-
var text = ReactDOMServer.renderToStaticMarkup(
16-
<Highlight>Some text</Highlight>
17-
);
18-
expect(text).toBe('<pre><code>Some text</code></pre>');
19-
});
20-
21-
it('should assign className prop', function() {
22-
var text = ReactDOMServer.renderToStaticMarkup(
23-
<Highlight className='html'>Some text</Highlight>
24-
);
25-
expect(text).toBe('<pre><code class="html">Some text</code></pre>');
26-
});
27-
28-
it('should render children in span', function() {
29-
var text = ReactDOMServer.renderToStaticMarkup(
30-
<Highlight element='span'>Some text</Highlight>
31-
);
32-
expect(text).toBe('<span>Some text</span>');
33-
});
34-
35-
it('should render innerHTML in span', function() {
36-
var text = ReactDOMServer.renderToStaticMarkup(
37-
<Highlight innerHTML={true} element='span'>Some text</Highlight>
38-
);
39-
expect(text).toBe('<span>Some text</span>');
40-
});
41-
42-
it('should accept innerHTML prop', function() {
43-
var text = TestUtils.renderIntoDocument(
44-
<Highlight innerHTML={true}>{"<div>Sometext</div>"}</Highlight>
45-
);
46-
expect(ReactDOM.findDOMNode(text).textContent).toBe('Sometext');
47-
});
48-
49-
50-
1+
import Highlight from '../src';
2+
import ReactDOM from 'react-dom';
3+
import TestUtils from 'react-dom/test-utils';
4+
import ReactDOMServer from 'react-dom/server';
5+
6+
describe('highlight', () => {
7+
it('should display test inside it', () => {
8+
const text = TestUtils.renderIntoDocument(
9+
<Highlight>Some text</Highlight>
10+
);
11+
12+
expect(ReactDOM.findDOMNode(text).textContent).toBe('Some text');
13+
});
14+
15+
it('should have pre and code tags in markup', () => {
16+
const text = ReactDOMServer.renderToStaticMarkup(
17+
<Highlight>Some text</Highlight>
18+
);
19+
20+
expect(text).toBe('<pre><code>Some text</code></pre>');
21+
});
22+
23+
it('should assign className prop', () => {
24+
const text = ReactDOMServer.renderToStaticMarkup(
25+
<Highlight className='html'>Some text</Highlight>
26+
);
27+
28+
expect(text).toBe('<pre><code class="html">Some text</code></pre>');
29+
});
30+
31+
it('should render children in span', () => {
32+
const text = ReactDOMServer.renderToStaticMarkup(
33+
<Highlight element='span'>Some text</Highlight>
34+
);
35+
36+
expect(text).toBe('<span>Some text</span>');
37+
});
38+
39+
it('should render innerHTML in span', () => {
40+
const text = ReactDOMServer.renderToStaticMarkup(
41+
<Highlight innerHTML={true} element='span'>Some text</Highlight>
42+
);
43+
44+
expect(text).toBe('<span>Some text</span>');
45+
});
46+
47+
it('should accept innerHTML prop', () => {
48+
const text = TestUtils.renderIntoDocument(
49+
<Highlight innerHTML={true}>{"<div>Sometext</div>"}</Highlight>
50+
);
51+
52+
expect(ReactDOM.findDOMNode(text).textContent).toBe('Sometext');
53+
});
5154
});

0 commit comments

Comments
 (0)