- Update dev depencies

- Update to React.Component class
- Fix SSR error where the id attribute would not match
- Update example

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    "env",
+    "react",
+    "stage-0"
+  ],
+  "plugins": [
+    "transform-class-properties",
+    "transform-decorators",
+    "transform-react-constant-elements",
+    "transform-react-inline-elements"
+  ]
+}

.eslintrc

@@ -1,38 +1,65 @@
 {
-  "parser": "babel-eslint",
   "env": {
     "browser": true,
     "node": true,
     "mocha": true
   },
-  "plugins": [
-    "react"
-  ],
-  "ecmaFeatures": {
-    "jsx": true
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "modules": true,
+      "forOf": true,
+      "jsx": true,
+      "es6": true,
+      "spread": true,
+      "experimentalObjectRestSpread": true,
+      "experimentalDecorators": true
+    }
   },
   "rules": {
-    "strict": [0],
-    "quotes": [2, "single"],
-    "eol-last": [0],
-    "no-mixed-requires": [0],
-    "no-underscore-dangle": [0],
-    "no-alert": [0],
-    "key-spacing": [0],
-    "camelcase": [0],
-    "no-multi-spaces": [0],
-    "react/display-name": 1,
-    "react/jsx-boolean-value": 1,
-    "react/jsx-quotes": 1,
-    "react/jsx-no-undef": 1,
-    "react/jsx-uses-react": 1,
-    "react/jsx-uses-vars": 1,
-    "react/no-did-mount-set-state": 1,
-    "react/no-did-update-set-state": 1,
-    "react/no-unknown-property": 1,
-    "react/prop-types": 1,
-    "react/react-in-jsx-scope": 1,
-    "react/self-closing-comp": 1,
-    "react/wrap-multilines": 1
-  }
-}
+    "padded-blocks": 0,
+    "react/no-multi-comp": 0,
+    "import/default": 0,
+    "import/no-duplicates": 0,
+    "import/named": 0,
+    "import/namespace": 0,
+    "import/no-unresolved": 0,
+    "import/no-named-as-default": 2,
+    "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
+    "indent": [2, 2, {"SwitchCase": 1}],
+    "no-console": 0,
+    "no-alert": 0,
+    "id-length": [2, {"min": 1, "properties": "never"}],
+    "object-curly-spacing": ["error", "never"],
+    "prefer-template": 0,
+    "max-len": ["error", 300, 2, {"ignoreUrls": true}],
+    "react/prefer-stateless-function": 0,
+    "consistent-return": 0,
+    "no-labels": 0,
+    "quote-props": 0,
+    "no-empty-label": 0,
+    "space-after-keywords": 0,
+    "space-return-throw-case": 0,
+    "no-return-assign": 0,
+    "react/jsx-indent-props": 0,
+    "react/jsx-space-before-closing": 0,
+    "arrow-body-style": 0,
+    "react/jsx-closing-bracket-location": 0,
+    "space-in-parens": 0,
+    "array-callback-return": 0,
+    "arrow-spacing": 0,
+    "no-param-reassign": 0,
+    "object-shorthand": 0,
+    "react/sort-comp": 0,
+    "array-bracket-spacing": 0,
+    "react/jsx-first-prop-new-line": 0,
+    "no-underscore-dangle": 0,
+    "global-require": 0,
+    "jsx-a11y/anchor-has-content": 0,
+    "react/forbid-prop-types": 0
+  },
+  "plugins": [
+    "react"
+  ]
+}

examples/Tiny.js

@@ -1,49 +1,59 @@
-var React = require('react')
-  , ReactDOM = require('react-dom')
-  , createReactClass = require('create-react-class')
-  , TinyMCEInput = require('../src/TinyMCEInput');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {hot} from 'react-hot-loader'
+import TinyMCEInput from '../src/TinyMCEInput';
 
 const TINYMCE_CONFIG = {
-  'language'  : 'en',
-  'theme'     : 'modern',
-  'toolbar'   : 'bold italic underline strikethrough hr | bullist numlist | link unlink | undo redo | spellchecker code',
-  'menubar'   : false,
-  'statusbar' : true,
-  'resize'    : true,
-  'plugins'   : 'link,spellchecker,paste',
-  'theme_modern_toolbar_location' : 'top',
+  'language': 'en',
+  'theme': 'modern',
+  'toolbar': 'bold italic underline strikethrough hr | bullist numlist | link unlink | undo redo | spellchecker code',
+  'menubar': false,
+  'statusbar': true,
+  'resize': true,
+  'plugins': 'link,spellchecker,paste',
+  'theme_modern_toolbar_location': 'top',
   'theme_modern_toolbar_align': 'left'
 };
 
 const INLINE_TINYMCE_CONFIG = {
   inline: true,
 };
 
-var Tiny = createReactClass({
-  displayName: 'TinyMCEExample',
-  getInitialState: function() {
-    return {
+class Tiny extends React.Component {
+  constructor() {
+    super();
+    this.state = {
       value: '',
       editMode: false
     };
-  },
-  onClick: function() {
-    this.setState({ editMode: !this.state.editMode });
-  },
-  onChange: function(newValue) {
-    this.setState({ value: newValue });
-  },
-  onTextAreaChange: function(e) {
-    this.setState({ value: e.target.value });
-  },
-  render: function() {
+    this.onClick = this.onClick.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.onTextAreaChange = this.onTextAreaChange.bind(this);
+  }
+
+  onClick() {
+    this.setState({editMode: !this.state.editMode});
+  }
+
+  onChange(newValue) {
+    this.setState({value: newValue});
+  }
+
+  onTextAreaChange(e) {
+    this.setState({value: e.target.value});
+  }
+
+  render() {
     return (
       <div>
         <h2>Main</h2>
         <TinyMCEInput value={this.state.value} onChange={this.onChange} tinymceConfig={TINYMCE_CONFIG} />
         <h2>Inline</h2>
-        <TinyMCEInput component="div" value={this.state.value} onChange={this.onChange}
-                      tinymceConfig={INLINE_TINYMCE_CONFIG} />
+        <TinyMCEInput
+          component="div"
+          value={this.state.value}
+          onChange={this.onChange}
+          tinymceConfig={INLINE_TINYMCE_CONFIG} />
         <hr />
         <h2>Raw</h2>
         <div>{this.state.value}</div>
@@ -52,11 +62,12 @@ var Tiny = createReactClass({
         <textarea value={this.state.value} onChange={this.onTextAreaChange} cols={80} rows={30} />
         <hr />
         <h2>Dangerous Set Inner...</h2>
-        <div dangerouslySetInnerHTML={{ __html: this.state.value }} />
+        <div dangerouslySetInnerHTML={{__html: this.state.value}} />
       </div>
     );
   }
-});
+}
 
-ReactDOM.render(<Tiny />, document.getElementById('root'));
+const SmokingHot = hot(module)(Tiny);
+ReactDOM.render(<SmokingHot />, document.getElementById('root'));
 

index.html

@@ -2,12 +2,12 @@
 <html>
   <head>
     <title>Tiny Test App</title>
-    <script type='text/javascript' src='http://localhost:8090/devassets/tinymce/tinymce.min.js' async></script>
+    <script type='text/javascript' src='/devassets/tinymce/tinymce.min.js' async></script>
   </head>
   <body>
     <div id='root'></div>
   </body>
 
-  <script src="http://localhost:8090/webpack-dev-server.js"></script>
-  <script type="text/javascript" src="http://localhost:8090/assets/tiny.bundle.js"></script>
-</html>
+  <script src="/webpack-dev-server.js"></script>
+  <script type="text/javascript" src="/assets/tiny.bundle.js"></script>
+</html>

package.json

@@ -5,9 +5,9 @@
   "main": "dist/TinyMCEInput.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "./scripts/build",
+    "build": "babel ./src --out-dir ./dist --presets es2015,react,stage-0",
     "prepublish": "npm run-script build",
-    "dev": "webpack-dev-server --progress --colors --port 8090"
+    "dev": "webpack-dev-server --progress --colors --port 8090 --hot"
   },
   "repository": {
     "type": "git",
@@ -23,27 +23,27 @@
     "url": "https://github.com/HurricaneJames/react-tinymce-input/issues"
   },
   "homepage": "https://github.com/HurricaneJames/react-tinymce-input",
-  "dependencies": {
-    "uuid": "^2.0.1"
-  },
   "devDependencies": {
-    "babel": "^5.4.7",
-    "babel-core": "^5.4.7",
-    "babel-eslint": "^3.1.11",
-    "babel-loader": "^5.1.3",
-    "babel-runtime": "^5.5.4",
-    "create-react-class": "^15.6.0",
-    "eslint": "^0.22.1",
-    "eslint-plugin-react": "^2.5.0",
-    "node-libs-browser": "^0.5.2",
-    "react": "~15.6.1",
-    "react-dom": "~15.6.1",
-    "prop-types": "^15.5.10",
-    "react-hot-loader": "^1.3.1",
-    "webpack": "^1.9.10",
-    "webpack-dev-server": "^1.9.0"
+    "babel-env": "^2.4.1",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.2.1",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "eslint": "^4.19.0",
+    "eslint-plugin-react": "^7.7.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "prop-types": "^15.6.1",
+    "react-hot-loader": "^4.0.0",
+    "webpack": "^4.1.1",
+    "webpack-cli": "^2.0.12",
+    "webpack-dev-server": "^3.1.1"
   },
   "peerDependencies": {
-    "react": "^0.13 || ^0.14 || ^15.x"
+    "react": "^0.13 || ^0.14 || ^15.x || ^16.x"
+  },
+  "dependencies": {
+    "babel-loader": "^7.1.4"
   }
 }

webpack.config.js

@@ -1,18 +1,26 @@
 module.exports = {
-  entry: {
-    tiny: './examples/Tiny.js'
-  },
+  mode: 'development',
+  entry: [
+    './examples/Tiny.js'
+  ],
   output: {
-      filename: '[name].bundle.js',
-      publicPath: 'http://localhost:8090/assets',
-      sourceMapFilename: '[name].bundle.map'
+    path: __dirname + '/dist',
+    publicPath: '/assets',
+    filename: 'tiny.bundle.js'
+  },
+  devServer: {
+    contentBase: '.'
   },
   module: {
-    loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?optional[]=runtime'}
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader']
+      }
     ]
   },
   resolve: {
-    extensions: ['', '.js', '.jsx']
-  }
+    extensions: ['*', '.js', '.jsx']
+  },
 };