From 687690ba818b100410a40dc6e128997f419c2f33 Mon Sep 17 00:00:00 2001 From: Heather Booker Date: Fri, 10 May 2019 15:36:20 -0400 Subject: [PATCH 1/6] Webpack can build and start --- .gitignore | 7 +++---- package.json | 34 ++++++++++++++++++++-------------- webpack.config.js | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 56 insertions(+), 18 deletions(-) create mode 100644 webpack.config.js 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/package.json b/package.json index 1e1756958..042251cd0 100644 --- a/package.json +++ b/package.json @@ -2,39 +2,45 @@ "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", + "build": "webpack", "clean": "nwb clean-module && nwb clean-demo", "lint": "eslint src demo/src", - "start": "nwb serve-react-demo", + "start": "./node_modules/.bin/webpack-dev-server", "gh:publish": "nwb build-demo && gh-pages -d demo/dist" }, "dependencies": { + "@babel/polyfill": "^7.4.4", "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" + "socket.io-client": "2.0.3", + "webpack": "^4.31.0", + "webpack-dev-server": "^3.3.1" }, "peerDependencies": { "react": "15.x" }, "devDependencies": { + "@babel/cli": "^7.4.4", + "@babel/core": "^7.4.4", + "@babel/plugin-proposal-class-properties": "^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" + "css-loader": "^2.1.1", + "file-loader": "^3.0.1", + "react": "^15.6.1", + "react-dom": "^15.6.1", + "style-loader": "^0.23.1", + "webpack-cli": "^3.3.2" }, "author": "kingofthestack", "homepage": "https://kingofthestack.github.io/react-chat-window/", diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 000000000..b2d2e4ce7 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,33 @@ +const path = require('path') + +module.exports = { + entry: './src/index.js', + 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' + ] + }] + } +} From 70f48f6cb0a8242ab6fcefa73cc89abf59722c5e Mon Sep 17 00:00:00 2001 From: Heather Booker Date: Fri, 19 Jul 2019 11:23:14 -0400 Subject: [PATCH 2/6] Update package.json - move all non-dependency fields to top - move webpack etc to devDependencies - add keywords - set webpack mode to production --- package.json | 43 +++++++++++++++++++++++-------------------- webpack.config.js | 1 + 2 files changed, 24 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 042251cd0..eee8cc00f 100644 --- a/package.json +++ b/package.json @@ -5,21 +5,29 @@ "main": "dist/index.js", "scripts": { "build": "webpack", - "clean": "nwb clean-module && nwb clean-demo", + "clean": "rm -rf demo/dist ; rm -rf dist", "lint": "eslint src demo/src", - "start": "./node_modules/.bin/webpack-dev-server", + "start": "webpack-dev-server --mode development", "gh:publish": "nwb build-demo && gh-pages -d demo/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": { - "@babel/polyfill": "^7.4.4", "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", - "webpack": "^4.31.0", - "webpack-dev-server": "^3.3.1" + "socket.io-client": "2.0.3" }, "peerDependencies": { "react": "15.x" @@ -28,6 +36,7 @@ "@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", @@ -37,19 +46,13 @@ "eslint-plugin-react": "^7.12.4", "css-loader": "^2.1.1", "file-loader": "^3.0.1", + "gh-pages": "^1.2.0", + "prop-types": "^15.5.10", "react": "^15.6.1", "react-dom": "^15.6.1", "style-loader": "^0.23.1", - "webpack-cli": "^3.3.2" - }, - "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" - ] + "webpack": "^4.36.1", + "webpack-cli": "^3.3.2", + "webpack-dev-server": "^3.7.2" + } } diff --git a/webpack.config.js b/webpack.config.js index b2d2e4ce7..89eec3d77 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,6 +2,7 @@ const path = require('path') module.exports = { entry: './src/index.js', + mode: 'production', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') From 55cebeda752b9d3729486baa0a3f5d935b80d134 Mon Sep 17 00:00:00 2001 From: Heather Booker Date: Fri, 19 Jul 2019 13:46:47 -0400 Subject: [PATCH 3/6] Remove react-highlight because its not used --- demo/src/index.js | 2 -- package.json | 1 - 2 files changed, 3 deletions(-) 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 eee8cc00f..0752a0f47 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ ], "dependencies": { "emoji-js": "3.2.2", - "react-highlight.js": "1.0.5", "react-linkify": "^0.2.1", "socket.io-client": "2.0.3" }, From bee451ab8db9adab78298e717d9eaf7675be8a44 Mon Sep 17 00:00:00 2001 From: Heather Booker Date: Fri, 19 Jul 2019 14:45:47 -0400 Subject: [PATCH 4/6] Split out webpack config for dev vs prod --- package.json | 8 +++++--- webpack.config.dev.js | 34 ++++++++++++++++++++++++++++++++++ webpack.config.js | 2 +- 3 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 webpack.config.dev.js diff --git a/package.json b/package.json index 0752a0f47..558a6090e 100644 --- a/package.json +++ b/package.json @@ -5,10 +5,12 @@ "main": "dist/index.js", "scripts": { "build": "webpack", - "clean": "rm -rf demo/dist ; rm -rf dist", + "build-demo": "npm run build && webpack --config webpack.config.dev.js", "lint": "eslint src demo/src", - "start": "webpack-dev-server --mode development", - "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/", diff --git a/webpack.config.dev.js b/webpack.config.dev.js new file mode 100644 index 000000000..db1166ae5 --- /dev/null +++ b/webpack.config.dev.js @@ -0,0 +1,34 @@ +const path = require('path'); + +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' + ] + }] + } +} diff --git a/webpack.config.js b/webpack.config.js index 89eec3d77..69546fc14 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,4 +1,4 @@ -const path = require('path') +const path = require('path'); module.exports = { entry: './src/index.js', From e234b1e6d634e603c8067348a9e647c698226644 Mon Sep 17 00:00:00 2001 From: Heather Booker Date: Fri, 19 Jul 2019 14:46:17 -0400 Subject: [PATCH 5/6] Use HtmlWebpackPlugin --- demo/assets/index-template.html | 10 ++++++++++ package.json | 1 + webpack.config.dev.js | 8 +++++++- 3 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 demo/assets/index-template.html 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/package.json b/package.json index 558a6090e..27917e094 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "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", diff --git a/webpack.config.dev.js b/webpack.config.dev.js index db1166ae5..d238650ae 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -1,4 +1,5 @@ const path = require('path'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './demo/src/index.js', @@ -30,5 +31,10 @@ module.exports = { 'file-loader' ] }] - } + }, + plugins: [ + new HtmlWebpackPlugin({ + template: 'demo/assets/index-template.html' + }) + ] } From c5bd424f5a7180347fa6a56e184f8aa583f8c423 Mon Sep 17 00:00:00 2001 From: Heather Booker Date: Fri, 19 Jul 2019 14:57:32 -0400 Subject: [PATCH 6/6] Update readme according to removal of nwb --- CONTRIBUTING.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) 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.