react-highlight - npm Package Compare versions

Comparing version 0.11.1 to 0.12.0

lib/index.js

@@ -28,16 +28,9 @@ 'use strict';
 
-    function Highlight() {
-        var _ref;
-
-        var _temp, _this, _ret;
-
+    function Highlight(props) {
         _classCallCheck(this, Highlight);
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-        }
+        var _this = _possibleConstructorReturn(this, (Highlight.__proto__ || Object.getPrototypeOf(Highlight)).call(this, props));
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Highlight.__proto__ || Object.getPrototypeOf(Highlight)).call.apply(_ref, [this].concat(args))), _this), _this.setEl = function (el) {
-            _this.el = el;
-        }, _temp), _possibleConstructorReturn(_this, _ret);
+        _this.setEl = _this.setEl.bind(_this);
+        return _this;
     }
@@ -65,2 +58,7 @@
     }, {
+        key: 'setEl',
+        value: function setEl(el) {
+            this.el = el;
+        }
+    }, {
         key: 'render',
@@ -67,0 +65,0 @@ value: function render() {

package.json

 {
   "name": "react-highlight",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "React component for syntax highlighting",
@@ -8,4 +8,3 @@ "main": "index.js",
     "prepublish": "babel ./src --out-dir ./lib --plugins=transform-class-properties,transform-react-jsx --presets=env",
-    "test": "karma start --single-run",
-    "dev-test": "karma start"
+    "test": "BABEL_ENV=test jest"
   },
@@ -37,23 +36,23 @@ "repository": {
     "babel-eslint": "^6.1.2",
+    "babel-jest": "^22.4.3",
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-env": "^1.6.0",
-    "es5-shim": "^4.5.9",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
     "eslint": "^3.19.0",
     "eslint-plugin-react": "^6.10.3",
     "html-loader": "^0.4.5",
-    "jasmine-core": "^2.5.2",
+    "jest": "^22.4.2",
     "jsx-loader": "^0.13.2",
-    "karma": "^1.6.0",
-    "karma-jasmine": "^1.1.0",
-    "karma-phantomjs-launcher": "^1.0.4",
-    "karma-webpack": "^2.0.3",
     "markdown-loader": "^2.0.0",
     "multiline": "^1.0.2",
     "node-libs-browser": "^2.0.0",
-    "phantomjs-prebuilt": "^2.1.14",
     "raw-loader": "^0.5.1",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
+    "react-test-renderer": "^16.2.0",
+    "regenerator-runtime": "^0.11.1",
     "webpack": "^3.6.0",
@@ -60,0 +59,0 @@ "webpack-dev-server": "^2.9.1"

README.md

 # react-highlight
+
 React component for syntax highlighting using highlight.js
@@ -6,3 +7,14 @@
 
+### Latest version
+
+`0.11.1`
+
+## [Documentation](https://react-highlight.neostack.com/)
+
+### CodeSandbox Example
+
+[![Edit new](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/5kz6kyprxp)
+
 ### Installation
+
 ```bash
@@ -13,9 +25,13 @@ npm install react-highlight --save
 ### Usage
+
 #### Importing component
+
 ```js
-  var Highlight = require('react-highlight');
+import Highlight from 'react-highlight'
 ```
 
 #### Adding styles
+
 Choose the [theme](https://highlightjs.org/static/demo/) for syntax highlighting and add corresponding styles of highlight.js
+
 ```css
@@ -28,7 +44,9 @@ <link rel="stylesheet" href="/path/to/styles/theme-name.css">
 Props:
+
 * className: custom class name
 * innerHTML: enable to render markup with dangerouslySetInnerHTML
-* element:  render code snippet inside specified element
+* element: render code snippet inside specified element
 
 #### Syntax highlighting of single code snippet
+
 Code snippet that requires syntax highlighting should be passed as children to Highlight component in string format. Language name of code snippet should be specified as className.
@@ -43,2 +61,3 @@
 #### Syntax highlighting of mutiple code snippets
+
 Set `innerHTML=true` to highlight multiple code snippets at a time.
@@ -54,5 +73,1 @@ This is especially usefull if html with multiple code snippets is generated from preprocesser tools like markdown.
 ```
-
-### Sponsor
-
-

src/index.js

@@ -5,2 +5,6 @@ import hljs from 'highlight.js';
 class Highlight extends React.Component {
+    constructor(props) {
+      super(props)
+      this.setEl = this.setEl.bind(this)
+    }
     componentDidMount() {
@@ -22,3 +26,3 @@ this.highlightCode();
 
-    setEl = (el) => {
+    setEl(el) {
         this.el = el;
@@ -25,0 +29,0 @@ };

test/highlight.test.js

@@ -1,54 +0,55 @@
-import Highlight from '../src';
-import ReactDOM from 'react-dom';
-import TestUtils from 'react-dom/test-utils';
-import ReactDOMServer from 'react-dom/server';
+import Highlight from '../src'
+import ReactDOM from 'react-dom'
+import TestUtils from 'react-dom/test-utils'
+import ReactDOMServer from 'react-dom/server'
+import React from 'react'
 
 describe('highlight', () => {
-    it('should display test inside it', () => {
-        const text = TestUtils.renderIntoDocument(
-            <Highlight>Some text</Highlight>
-        );
+  test('should display text inside it', () => {
+    const text = TestUtils.renderIntoDocument(<Highlight>Some text</Highlight>)
 
-        expect(ReactDOM.findDOMNode(text).textContent).toBe('Some text');
-    });
+    expect(ReactDOM.findDOMNode(text).textContent).toBe('Some text')
+  })
 
-    it('should have pre and code tags in markup', () => {
-        const text = ReactDOMServer.renderToStaticMarkup(
-            <Highlight>Some text</Highlight>
-        );
+  test('should have pre and code tags in markup', () => {
+    const text = ReactDOMServer.renderToStaticMarkup(
+      <Highlight>Some text</Highlight>
+    )
 
-        expect(text).toBe('<pre><code>Some text</code></pre>');
-    });
+    expect(text).toBe('<pre><code>Some text</code></pre>')
+  })
 
-    it('should assign className prop', () => {
-        const text = ReactDOMServer.renderToStaticMarkup(
-            <Highlight className='html'>Some text</Highlight>
-        );
+  test('should assign className prop', () => {
+    const text = ReactDOMServer.renderToStaticMarkup(
+      <Highlight className="html">Some text</Highlight>
+    )
 
-        expect(text).toBe('<pre><code class="html">Some text</code></pre>');
-    });
+    expect(text).toBe('<pre><code class="html">Some text</code></pre>')
+  })
 
-    it('should render children in span', () => {
-        const text = ReactDOMServer.renderToStaticMarkup(
-            <Highlight element='span'>Some text</Highlight>
-        );
+  test('should render children in span', () => {
+    const text = ReactDOMServer.renderToStaticMarkup(
+      <Highlight element="span">Some text</Highlight>
+    )
 
-        expect(text).toBe('<span>Some text</span>');
-    });
+    expect(text).toBe('<span>Some text</span>')
+  })
 
-    it('should render innerHTML in span', () => {
-        const text = ReactDOMServer.renderToStaticMarkup(
-            <Highlight innerHTML={true} element='span'>Some text</Highlight>
-        );
+  test('should render innerHTML in span', () => {
+    const text = ReactDOMServer.renderToStaticMarkup(
+      <Highlight innerHTML={true} element="span">
+        Some text
+      </Highlight>
+    )
 
-        expect(text).toBe('<span>Some text</span>');
-    });
+    expect(text).toBe('<span>Some text</span>')
+  })
 
-    it('should accept innerHTML prop', () => {
-        const text = TestUtils.renderIntoDocument(
-            <Highlight innerHTML={true}>{"<div>Sometext</div>"}</Highlight>
-        );
+  test('should accept innerHTML prop', () => {
+    const text = TestUtils.renderIntoDocument(
+      <Highlight innerHTML={true}>{'<div>Sometext</div>'}</Highlight>
+    )
 
-        expect(ReactDOM.findDOMNode(text).textContent).toBe('Sometext');
-    });
-});
+    expect(ReactDOM.findDOMNode(text).textContent).toBe('Sometext')
+  })
+})

No alert changes

Improved metrics

Number of lines in readme file

69

increased by27.78%

Worsened metrics

Total package byte prevSize

18518

decreased by-14.44%

Number of package files

12

decreased by-7.69%

Lines of code

317

decreased by-23.43%

No dependency changes