diff --git a/.gitignore b/.gitignore
index 13a6c1a10..08aa8fe65 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,14 +1,13 @@
coverage/
-demo/dist/
# Generated build files
-es/
-lib/
-umd/
+dist/
+demo/dist/
# Node
node_modules/
npm-debug.log*
package-lock.json
+# Editors
.DS_Store
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f34ca5edd..6838b623f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -8,11 +8,13 @@
## Demo Development Server
-- `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
+- `npm start` will run a development server with the component's demo app at [http://localhost:8080](http://localhost:8080) with hot module reloading.
## Building
-- `npm run build` will build the component for publishing to npm and also bundle the demo app.
+- `npm run build` will build the component for publishing to npm.
+
+- `npm run build-demo` will build the demo for publishing to github-pages.
- `npm run clean` will delete built resources.
diff --git a/demo/assets/index-template.html b/demo/assets/index-template.html
new file mode 100644
index 000000000..76777e5c8
--- /dev/null
+++ b/demo/assets/index-template.html
@@ -0,0 +1,10 @@
+
+
+
+
+ react-chat-window
+
+
+
+
+
diff --git a/demo/src/index.js b/demo/src/index.js
index dedcf9090..e7d0b9e13 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -8,8 +8,6 @@ import Footer from './Footer';
import monsterImgUrl from './../assets/monster.png';
import './../assets/styles';
-
-
class Demo extends Component {
constructor() {
diff --git a/package.json b/package.json
index 1e1756958..27917e094 100644
--- a/package.json
+++ b/package.json
@@ -2,26 +2,31 @@
"name": "react-chat-window",
"version": "1.2.0",
"description": "react-chat-window React component",
- "main": "lib/index.js",
- "module": "es/index.js",
- "files": [
- "css",
- "es",
- "lib",
- "umd"
- ],
+ "main": "dist/index.js",
"scripts": {
- "build": "nwb build-react-component --copy-files",
- "clean": "nwb clean-module && nwb clean-demo",
+ "build": "webpack",
+ "build-demo": "npm run build && webpack --config webpack.config.dev.js",
"lint": "eslint src demo/src",
- "start": "nwb serve-react-demo",
- "gh:publish": "nwb build-demo && gh-pages -d demo/dist"
+ "start": "npm run build && webpack-dev-server --config webpack.config.dev.js",
+ "prepublish": "npm run build",
+ "gh:publish": "npm run build-demo && gh-pages -d demo/dist",
+ "clean": "rm -rf demo/dist ; rm -rf dist"
},
+ "author": "kingofthestack",
+ "homepage": "https://kingofthestack.github.io/react-chat-window/",
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/kingofthestack/react-chat-window.git"
+ },
+ "keywords": [
+ "react-component",
+ "react",
+ "messenger",
+ "chat"
+ ],
"dependencies": {
"emoji-js": "3.2.2",
- "gh-pages": "^1.2.0",
- "prop-types": "15.5.10",
- "react-highlight.js": "1.0.5",
"react-linkify": "^0.2.1",
"socket.io-client": "2.0.3"
},
@@ -29,21 +34,27 @@
"react": "15.x"
},
"devDependencies": {
+ "@babel/cli": "^7.4.4",
+ "@babel/core": "^7.4.4",
+ "@babel/plugin-proposal-class-properties": "^7.4.4",
+ "@babel/polyfill": "^7.4.4",
+ "@babel/preset-env": "^7.4.4",
+ "@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
+ "babel-loader": "^8.0.5",
+ "babel-plugin-transform-object-rest-spread": "^6.26.0",
"eslint": "^5.13.0",
"eslint-plugin-react": "^7.12.4",
- "nwb": "^0.23.0",
- "react": "15.6.1",
- "react-dom": "15.6.1"
- },
- "author": "kingofthestack",
- "homepage": "https://kingofthestack.github.io/react-chat-window/",
- "license": "MIT",
- "repository": {
- "type": "git",
- "url": "https://github.com/kingofthestack/react-chat-window.git"
- },
- "keywords": [
- "react-component"
- ]
+ "css-loader": "^2.1.1",
+ "file-loader": "^3.0.1",
+ "gh-pages": "^1.2.0",
+ "html-webpack-plugin": "^3.2.0",
+ "prop-types": "^15.5.10",
+ "react": "^15.6.1",
+ "react-dom": "^15.6.1",
+ "style-loader": "^0.23.1",
+ "webpack": "^4.36.1",
+ "webpack-cli": "^3.3.2",
+ "webpack-dev-server": "^3.7.2"
+ }
}
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
new file mode 100644
index 000000000..d238650ae
--- /dev/null
+++ b/webpack.config.dev.js
@@ -0,0 +1,40 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+ entry: './demo/src/index.js',
+ mode: 'development',
+ output: {
+ filename: 'main.js',
+ path: path.resolve(__dirname, 'demo/dist')
+ },
+ module: {
+ rules: [{
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: ['@babel/preset-env', '@babel/preset-react'],
+ plugins: ["@babel/plugin-proposal-class-properties"]
+ }
+ }
+ }, {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }, {
+ test: /\.(png|svg|jpg|gif|mp3)$/,
+ use: [
+ 'file-loader'
+ ]
+ }]
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: 'demo/assets/index-template.html'
+ })
+ ]
+}
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 000000000..69546fc14
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,34 @@
+const path = require('path');
+
+module.exports = {
+ entry: './src/index.js',
+ mode: 'production',
+ output: {
+ filename: 'main.js',
+ path: path.resolve(__dirname, 'dist')
+ },
+ module: {
+ rules: [{
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: ['@babel/preset-env', '@babel/preset-react'],
+ plugins: ["@babel/plugin-proposal-class-properties"]
+ }
+ }
+ }, {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }, {
+ test: /\.(png|svg|jpg|gif|mp3)$/,
+ use: [
+ 'file-loader'
+ ]
+ }]
+ }
+}