#1 - 0.0.2

Author: Sal Niro

.gitignore

@@ -1,3 +1,2 @@
 .idea
-node_modules
-demo/bundle.js
+node_modules

demo/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {render} from 'react-dom';
-import CodeMirror from '../index.jsx';
+import CodeMirror from '../src/react-codemirror2.jsx';
 
 require('./index.scss');
 

demo/server.js

@@ -1,23 +1,30 @@
-let express = require('express');
-let app = express();
+import express from 'express';
+import webpack from 'webpack';
+import path from 'path';
+import config from './webpack.config.js';
+import open from 'open';
 
-app.set('port', 5000);
+const app = express();
+const compiler = webpack(config);
 
-app.use(express.static('.'));
+app.set('port', 8000);
 
-app.use(function (req, res, next) {
-  if (req.path.substr(-1) === '/' && req.path.length > 1) {
-    let query = req.url.slice(req.path.length);
-    res.redirect(301, req.path.slice(0, -1) + query);
-  } else {
-    next();
-  }
-});
+app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo: true,
+  publicPath: config.output.publicPath
+}));
 
-app.all('/*', function (req, res, next) {
-  res.sendFile(`${__dirname}/index.html`)
+app.use(require('webpack-hot-middleware')(compiler));
+
+app.all('/*', function (req, res) {
+  res.sendFile(path.join(__dirname, './index.html'));
 });
 
-app.listen(app.get('port'), function () {
-  console.log(`react-codemirror2 demo listening on port ${app.get('port')}`);
+app.listen(app.get('port'), function (err) {
+  if (err) {
+    console.log(err);
+  } else {
+    console.log(`react-codemirror2 demo listening on port ${app.get('port')}`);
+    open(`http://localhost:${app.get('port')}`);
+  }
 });

demo/webpack.config.js

@@ -1,13 +1,24 @@
-let path = require('path');
-let context = path.resolve(__dirname, '..');
+import webpack from 'webpack';
+import path from 'path';
 
-let config = {
-
-  entry: path.normalize(`${context}/demo/index.jsx`),
+export default {
+  devtool: 'eval',
+  entry: [
+    'webpack-hot-middleware/client?reload=true',
+    path.resolve(__dirname, 'index.jsx')
+  ],
+  target: 'web',
   output: {
-    path: path.normalize(`${context}/demo/`),
+    path: __dirname + '/demo',
+    publicPath: '/',
     filename: 'bundle.js'
   },
+  devServer: {
+    contentBase: path.resolve(__dirname, 'demo')
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin()
+  ],
   module: {
     rules: [{
       test: /\.jsx?/,
@@ -25,8 +36,12 @@ let config = {
       }, {
         loader: 'sass-loader'
       }]
+    }, {
+      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+      exclude: /(node_modules)/,
+      use: [{
+        loader: 'file-loader'
+      }]
     }]
-  }
+  },
 };
-
-module.exports = config;

index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+let codemirror = require('codemirror');
+
+export default class CodeMirror extends React.Component {
+
+  componentDidMount() {
+
+    this.editor = codemirror(this.ref);
+    this.editor.on('change', () => this.props.onChange(this.editor.getValue()));
+
+    this.hydrate(this.props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+
+    this.hydrate(nextProps);
+  }
+
+  hydrate(props) {
+
+    Object.keys(props.options || {}).forEach(key => this.editor.setOption(key, props.options[key]));
+    this.editor.setValue(props.value || '');
+  }
+
+  render() {
+    return React.createElement('div', { ref: self => this.ref = self });
+  }
+}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "react-codemirror2",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "a tiny react codemirror component wrapper",
   "main": "index.js",
   "scripts": {
-    "prestart": "npm run webpack",
-    "start": "cd demo && node server.js",
-    "webpack": "webpack --config ./demo/webpack.config.js"
+    "start": "babel-node demo/server.js",
+    "build": "node scripts/build.js",
+    "prepublish": "npm run build"
   },
   "repository": {
     "type": "git",
@@ -18,23 +18,36 @@
     "url": "https://github.com/scniro/react-codemirror2/issues"
   },
   "homepage": "https://github.com/scniro/react-codemirror2#readme",
+  "keywords": [
+    "react",
+    "codemirror",
+    "editor",
+    "code"
+  ],
   "dependencies": {
-    "codemirror": "^5.26.0",
-    "react": "^15.5.4"
+    "codemirror": "5.26.0"
+  },
+  "peerDependencies": {
+    "react": ">=15.5 <16"
   },
   "devDependencies": {
     "babel-cli": "6.24.1",
     "babel-core": "6.24.1",
     "babel-loader": "7.0.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-react": "6.24.1",
     "babel-register": "6.24.1",
-    "css-loader": "^0.28.4",
-    "express": "^4.15.3",
-    "node-sass": "^4.5.3",
-    "react-dom": "^15.5.4",
-    "sass-loader": "^6.0.5",
-    "style-loader": "^0.18.1",
-    "webpack": "^2.6.1"
+    "css-loader": "0.28.4",
+    "express": "4.15.3",
+    "node-sass": "4.5.3",
+    "open": "0.0.5",
+    "react": "15.5.4",
+    "react-dom": "15.5.4",
+    "sass-loader": "6.0.5",
+    "style-loader": "0.18.1",
+    "webpack": "2.6.1",
+    "webpack-dev-middleware": "1.10.2",
+    "webpack-hot-middleware": "2.18.0"
   }
 }

package.json

@@ -0,0 +1,21 @@
+const fs = require('fs');
+const babel = require('babel-core');
+const path = require('path');
+const root = path.resolve(__dirname, '..');
+const {Transform} = require('stream');
+
+const transpile = new Transform({
+  transform(chunk, encoding, cb) {
+
+    let transformed = babel.transform(chunk.toString(), {plugins: ['transform-react-jsx']})
+
+    this.push(transformed.code)
+    cb();
+  }
+});
+
+let rs = fs.createReadStream(`${root}/src/react-codemirror2.jsx`);
+let ws = fs.createWriteStream(`${root}/index.js`);
+
+rs.pipe(transpile).pipe(ws);
+