Readme added + tests

Author: danez

README.md

@@ -0,0 +1,75 @@
+# react-fast-highlight
+###### A fast react component wrapper for highlight.js
+
+[![Build Status](https://travis-ci.org/chili-labs/react-fast-highlight.svg?branch=master)](https://travis-ci.org/chili-labs/react-fast-highlight)
+
+## Usage
+
+`npm install --save react-fast-highlight`
+
+```js
+import React from 'react';
+import Highlight from 'react-fast-highlight';
+
+class App extends React.Component {
+
+  render() {
+    const code = 'let t = 0.5 * 5 * 4;';
+
+    return (
+      {/*
+            `languages` is an optional property to set the languages that highlight.js should pick from.
+            By default it is empty, which means highlight.js will pick from all available languages.
+            If only one language is provided, this language will be used without doing checks beforehand.
+            (Be aware that automatic language detection is not as fast as when specifing a language.)
+
+            `worker` is used to take advantage of the possibility to do the highlighting work in a
+            web-worker. As different module-bundlers use different ways to load web-workers, it is up
+            to you to load the webworker and supply it to the highlight component. (see example)
+            Currently every instance of the highlight component needs its own web-worker.
+
+            `className` sets additional class names on the generated html markup.
+       */}
+      <Highlight
+        languages={['js']}
+        className="my-class"
+      >
+        {code}
+      </Highlight>
+    );
+}
+```
+
+### Webworker
+
+#### Webpack
+
+To make web-workers working with webpack you additionally need to install `worker-loader`.
+
+`npm install --save worker-loader react-fast-highlight`
+
+```js
+import React from 'react';
+import Highlight from 'react-fast-highlight';
+import Worker from 'worker!react-fast-highlight/lib/worker';
+
+class App extends React.Component {
+
+  render() {
+    const code = 'let t = 0.5 * 5 * 4;';
+
+    return (
+      <Highlight
+        languages={['js']}
+        worker={new Worker}
+      >
+        {code}
+      </Highlight>
+    );
+}
+```
+
+
+## License
+
+react-fast-highlight is licensed under the MIT license.

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "check": "npm run lint && npm run flow && npm test",
     "clean": "rimraf lib",
-    "build": "cross-env NODE_ENV=production babel src --out-dir lib",
+    "build": "cross-env NODE_ENV=production babel src --out-dir lib --ignore __tests__",
     "flow": "flow",
     "lint": "eslint src",
     "prepublish": "npm run check && npm run clean && npm run build",
@@ -51,7 +51,8 @@
     "jsdom": "^7.2.2",
     "mocha": "^2.3.4",
     "react": "^0.14.0",
-    "react-addons-test-utils": "^0.14.6",
+    "react-addons-test-utils": "^0.14.0",
+    "react-dom": "^0.14.0",
     "rimraf": "^2.5.0",
     "sinon": "^1.17.2",
     "sinon-chai": "^2.8.0"

src/components/Highlight.js

@@ -40,7 +40,7 @@ export default class Highlight extends Component<void, Props, State> {
   get initialCode(): ?string {
     const type = typeof this.props.children;
     if (type !== 'string') {
-      throw new Error(`Children of <Highlight> must be a string. ${type} supplied`);
+      throw new Error(`Children of <Highlight> must be a string. '${type}' supplied`);
     }
 
     return this.props.children;

src/components/__tests__/Highlight.spec.js

@@ -2,22 +2,62 @@
 /* eslint-disable no-unused-expressions */
 
 import React from 'react';
+import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
 import Highlight from '../Highlight';
 import { expect } from 'chai';
 import hjs from 'highlight.js';
 import sinon from 'sinon';
 
-describe('Button', () => {
-  it('has correct label', () => {
-    const highlightAuto = sinon.spy(hjs, 'highlightAuto');
-    TestUtils.renderIntoDocument(
-      <Highlight>test</Highlight>
-    );
+describe('Highlight', () => {
+  describe('no languages', () => {
+    it('calls correct highlightCall', () => {
+      const highlightAuto = sinon.spy(hjs, 'highlightAuto');
+      TestUtils.renderIntoDocument(
+        <Highlight>test</Highlight>
+      );
+
+      expect(highlightAuto).to.have.been.calledOnce;
+      expect(highlightAuto).to.have.been.calledWith('test');
+
+      highlightAuto.restore();
+    });
+  });
 
-    expect(highlightAuto).to.have.been.calledOnce;
-    expect(highlightAuto).to.have.been.calledWith('test');
+  describe('one language', () => {
+    it('calls correct highlightCall', () => {
+      const highlight = sinon.spy(hjs, 'highlight');
+      TestUtils.renderIntoDocument(
+        <Highlight languages={['js']}>test</Highlight>
+      );
+
+      expect(highlight).to.have.been.calledOnce;
+      expect(highlight).to.have.been.calledWith('js', 'test');
+
+      highlight.restore();
+    });
+  });
+
+  describe('multiple languages', () => {
+    it('calls correct highlightCall', () => {
+      const highlightAuto = sinon.spy(hjs, 'highlightAuto');
+      TestUtils.renderIntoDocument(
+        <Highlight languages={['js', 'html']}>test</Highlight>
+      );
+
+      expect(highlightAuto).to.have.been.calledOnce;
+      expect(highlightAuto).to.have.been.calledWith('test', ['js', 'html']);
+
+      highlightAuto.restore();
+    });
+  });
+
+  it('className is passed through', () => {
+    const component = TestUtils.renderIntoDocument(
+      <Highlight className="foobla">test</Highlight>
+    );
+    const domElement = ReactDOM.findDOMNode(component);
 
-    highlightAuto.restore();
+    expect(domElement.children[0].classList.contains('foobla')).to.equal.true;
   });
 });

src/index.js

@@ -1 +1,2 @@
-export Highlight from './components/Highlight';
+import Highlight from './components/Highlight';
+export default Highlight;