Merge pull request #51 from akiran/rewrite

Upgrading to React16

Author: akiran

.gitignore

@@ -29,3 +29,4 @@ node_modules
 .sass-cache
 build
 lib
+package-lock.json

.npmignore

@@ -32,15 +32,27 @@ module.exports = function(config) {
 
     webpack: {
         module: {
-            loaders: [
-                {test: /\.(js|jsx)$/, loaders: ['babel']},
-            ]
+          rules: [
+            {
+              test: /\.(js|jsx)$/,
+              use: {
+                loader: 'babel-loader',
+                options: {
+                  presets: ['env'],
+                  plugins: [
+                    'transform-class-properties',
+                    'transform-react-jsx',
+                  ],
+                },
+              },
+            },
+          ],
         },
         externals: {
             react: 'React'
         },
         resolve: {
-          root: __dirname
+          modules: [__dirname, 'node_modules']
         }
     },
     webpackServer: {

docs/_default.scss

@@ -4,8 +4,7 @@
   "description": "React component for syntax highlighting",
   "main": "index.js",
   "scripts": {
-    "start": "gulp server",
-    "prepublish": "babel ./src --out-dir ./lib",
+    "prepublish": "babel ./src --out-dir ./lib --plugins=transform-class-properties,transform-react-jsx --presets=env",
     "test": "karma start --single-run",
     "dev-test": "karma start"
   },
@@ -27,21 +26,20 @@
   },
   "homepage": "https://github.com/akiran/react-highlight",
   "dependencies": {
-    "highlight.js": "^9.11.0",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4"
+    "highlight.js": "^9.11.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.7",
-    "babel": "^5.8.38",
-    "babel-core": "^5.8.38",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^6.1.2",
-    "babel-loader": "^5.4.2",
+    "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",
     "eslint": "^3.19.0",
     "eslint-plugin-react": "^6.10.3",
-    "gulp": "^3.9.1",
-    "gulp-ruby-sass": "^2.1.1",
     "html-loader": "^0.4.5",
     "jasmine-core": "^2.5.2",
     "jsx-loader": "^0.13.2",
@@ -54,7 +52,13 @@
     "node-libs-browser": "^2.0.0",
     "phantomjs-prebuilt": "^2.1.14",
     "raw-loader": "^0.5.1",
-    "webpack": "^1.15.0",
-    "webpack-dev-server": "^1.16.3"
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.9.1"
+  },
+  "peerDependencies": {
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
   }
 }

docs/docs.scss

@@ -1,6 +1,5 @@
 import hljs from 'highlight.js';
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 class Highlight extends React.Component {
     componentDidMount() {
@@ -12,32 +11,33 @@ class Highlight extends React.Component {
     }
 
     highlightCode() {
-        const domNode = ReactDOM.findDOMNode(this);
-        const nodes = domNode.querySelectorAll('pre code');
+        const nodes = this.el.querySelectorAll('pre code');
 
-        let i;
-        for (i = 0; i < nodes.length; i++) {
-            hljs.highlightBlock(nodes[i]);
+        for (let i = 0; i < nodes.length; i++) {
+            hljs.highlightBlock(nodes[i])
         }
     }
 
+    setEl = (el) => {
+        this.el = el;
+    };
+
     render() {
-        const {children, className, element, innerHTML} = this.props;
-        let Element = element ? React.DOM[element] : null;
+        const {children, className, element: Element, innerHTML} = this.props;
+        const props = { ref: this.setEl, className };
 
         if (innerHTML) {
-            if (!Element) {
-                Element = React.DOM.div
-            }
-
-            return Element({dangerouslySetInnerHTML: {__html: children}, className: className || null}, null);
-        } else {
+            props.dangerouslySetInnerHTML = { __html: children };
             if (Element) {
-                return Element({className}, children);
-            } else {
-                return <pre><code className={className}>{children}</code></pre>;
+                return <Element {...props} />;
             }
+            return <div {...props} />;
+        }
+
+        if (Element) {
+            return <Element {...props}>{children}</Element>;
         }
+        return <pre ref={this.setEl}><code className={className}>{children}</code></pre>;
     }
 }
 

docs/index.html

@@ -1,6 +1,5 @@
 import hljs from'highlight.js/lib/highlight';
 import React from'react';
-import ReactDOM from'react-dom';
 
 class Highlight extends React.Component {
     componentDidMount() {
@@ -13,8 +12,7 @@ class Highlight extends React.Component {
 
     highlightCode() {
         const {className, languages} = this.props;
-        const domNode = ReactDOM.findDOMNode(this);
-        const nodes = domNode.querySelectorAll('pre code');
+        const nodes = this.el.querySelectorAll('pre code');
 
         if ((languages.length === 0) && className) {
             languages.push(className);
@@ -24,29 +22,31 @@ class Highlight extends React.Component {
             hljs.registerLanguage(lang, require('highlight.js/lib/languages/' + lang));
         });
 
-        let i;
-        for (i = 0; i < nodes.length; i++) {
-            hljs.highlightBlock(nodes[i]);
+        for (let i = 0; i < nodes.length; i++) {
+            hljs.highlightBlock(nodes[i])
         }
     }
 
+    setEl = (el) => {
+        this.el = el;
+    };
+
     render() {
-        const {children, className, element, innerHTML} = this.props;
-        let Element = element ? React.DOM[element] : null;
+        const {children, className, element: Element, innerHTML} = this.props;
+        const props = { ref: this.setEl, className };
 
         if (innerHTML) {
-            if (!Element) {
-                Element = React.DOM.div
-            }
-
-            return Element({dangerouslySetInnerHTML: {__html: children}, className: className || null}, null);
-        } else {
+            props.dangerouslySetInnerHTML = { __html: children };
             if (Element) {
-                return Element({className}, children);
-            } else {
-                return <pre><code className={className}>{children}</code></pre>;
+                return <Element {...props} />;
             }
+            return <div {...props} />;
+        }
+
+        if (Element) {
+            return <Element {...props}>{children}</Element>;
         }
+        return <pre ref={this.setEl}><code className={className}>{children}</code></pre>;
     }
 }
 

docs/index.jsx

@@ -1,36 +1,32 @@
-var webpack = require('webpack');
-var path = require('path');
-var autoprefixer = require('autoprefixer');
+var webpack = require('webpack')
+var path = require('path')
+var autoprefixer = require('autoprefixer')
 
 module.exports = {
   devtool: '#inline-source-map',
-  entry: {
-    'docs.js': './docs/index'
-  },
+  entry: './src/index',
   output: {
     path: path.join(__dirname, 'build'),
-    filename: '[name]',
+    filename: '[name]'
   },
   module: {
     loaders: [
-      {test: /\.(js|jsx)$/, loaders: ['babel']},
+      { test: /\.(js|jsx)$/, loaders: ['babel'] },
       // {
       //   test: /\.scss$/,
-      //   loader: "style!css!postcss!sass?outputStyle=expanded&includePaths[]=" + 
+      //   loader: "style!css!postcss!sass?outputStyle=expanded&includePaths[]=" +
       //       (path.resolve(__dirname, './node_modules')) + "&includePaths[]=" + (path.resolve(__dirname, './bower_components'))
       // },
-      { test: /\.md$/, loader: 'raw!markdown' },
-    ],
+      { test: /\.md$/, loader: 'raw!markdown' }
+    ]
   },
-  postcss: [ autoprefixer({ browsers: ['last 2 version'] }) ],
-  resolve : {
-    alias: {
-
-    },
+  postcss: [autoprefixer({ browsers: ['last 2 version'] })],
+  resolve: {
+    alias: {},
     extensions: ['', '.js', '.jsx']
   },
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new webpack.IgnorePlugin(/vertx/)
   ]
-};
+}