build react-highlight for node module and browser (#2)

- react-highlight.js
- react-highlight.browser.js

.gitignore

@@ -31,3 +31,6 @@ node_modules
 
 # Optional REPL history
 .node_repl_history
+
+# build files
+dist

package.json

@@ -2,9 +2,10 @@
   "name": "react-syntax-highlight",
   "version": "15.3.0",
   "description": "React component for syntax highlighting",
-  "main": "react-highlight.js",
+  "main": "dist/react-highlight.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "prepublish": "npm run build",
+    "build": "node ./scripts/build.js"
   },
   "repository": {
     "type": "git",

scripts/build.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+
+// create folder
+const dist = path.resolve(__dirname, '../dist');
+try {
+  fs.mkdirSync(dist);
+} catch (e) {
+  if (e.code !== 'EEXIST') {
+    throw e;
+  }
+}
+
+// read source file
+let file = path.resolve(__dirname, '../src/HighLight.js');
+const src = fs.readFileSync(file, 'utf8');
+
+// 1. node module
+file = path.resolve(__dirname, dist, 'react-highlight.js');
+let data = `const React = require('react');
+const ReactDOM = require('react-dom');
+const PropTypes = require('prop-types');
+const hljs = require('highlight.js');
+${src}
+module.exports = HighLight;
+`;
+fs.writeFileSync(file, data, 'utf8');
+console.log(`${file}`);
+
+// 2. browser
+file = path.resolve(__dirname, dist, 'react-highlight.browser.js');
+data = `(function () {
+${src}
+window.HighLight = window.HighLight || HighLight;
+})();
+`;
+fs.writeFileSync(file, data, 'utf8');
+console.log(`${file}`);

src/HighLight.js

@@ -0,0 +1,64 @@
+// React: 'react'
+// ReactDOM: 'react-dom'
+// PropTypes: 'prop-types'
+// hljs: 'highlight.js'
+
+class HighLight extends React.Component {
+  constructor(props) {
+    super(props);
+    this.componentDidMount = this.componentDidMount.bind(this);
+    this.componentDidUpdate = this.componentDidUpdate.bind(this);
+    this.updateCodeBlockDOM = this.updateCodeBlockDOM.bind(this);
+    this.render = this.render.bind(this);
+  }
+
+  componentDidMount () {
+    // this will only be called once after first time render
+    this.updateCodeBlockDOM();
+  }
+
+  componentDidUpdate () {
+    // whenever component is updated
+    this.updateCodeBlockDOM();
+  }
+
+  render () {
+    /*
+     * <pre inherit_all_the_props_from_parent >
+     *  <code ref='code' className={'hljs ' + this.props.lang}>
+     *    to_be_rendered_by_highlight.js
+     *  </code>
+     * </pre>
+     *
+     */
+    const props = Object.assign({}, this.props);
+    delete props.lang;
+    delete props.value;
+
+    return (
+      React.createElement('pre', props,
+        React.createElement('code', {
+          ref: 'code',
+          className: 'hljs ' + this.props.lang
+        })
+      )
+    );
+  }
+
+  updateCodeBlockDOM () {
+    // update real DOM element after component render
+    const ele = ReactDOM.findDOMNode(this.refs.code);
+
+    try {
+      ele.innerHTML = hljs.highlight(this.props.lang, this.props.value, true).value;
+    } catch (e) {
+      console.warn(e);
+      ele.innerHTML = this.props.value; // remove syntax highlight
+    }
+  }
+}
+
+HighLight.propTypes = {
+  lang: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired
+};