From 71e4d1658ee8d13412c937210f17db5dba166ca2 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Tue, 19 Apr 2016 19:14:53 -0700 Subject: [PATCH] Update webpack and refactor response fetching --- .babelrc | 7 +++- app/app.html | 2 +- app/components/Sidebar.js | 2 +- app/containers/App.js | 29 ++------------ app/database/index.js | 1 + app/reducers/responses.js | 4 +- electron.js | 18 ++++----- package.json | 17 ++++---- scripts/package | 8 +++- webpack/dev.config.js | 29 -------------- webpack/prod.config.js | 5 --- webpack/server.js | 20 +++++----- ...{base.config.js => webpack.config.base.js} | 39 ++++++++----------- webpack/webpack.config.development.js | 29 ++++++++++++++ webpack/webpack.config.production.js | 12 ++++++ 15 files changed, 107 insertions(+), 115 deletions(-) delete mode 100644 webpack/dev.config.js delete mode 100644 webpack/prod.config.js rename webpack/{base.config.js => webpack.config.base.js} (79%) create mode 100644 webpack/webpack.config.development.js create mode 100644 webpack/webpack.config.production.js diff --git a/.babelrc b/.babelrc index 47c9aceb7..e5f52d4bb 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,9 @@ { "presets": ["es2015", "react"], - "plugins": ["transform-object-rest-spread"] + "plugins": ["transform-object-rest-spread", "add-module-exports"], + "env": { + "development": { + "presets": ["react-hmre"] + } + } } diff --git a/app/app.html b/app/app.html index 4253450b6..3e8f9d52e 100644 --- a/app/app.html +++ b/app/app.html @@ -9,7 +9,7 @@ diff --git a/app/components/Sidebar.js b/app/components/Sidebar.js index ba5e04581..41a1b24e8 100644 --- a/app/components/Sidebar.js +++ b/app/components/Sidebar.js @@ -136,7 +136,7 @@ class Sidebar extends Component { {this.renderRequestGroupRow(null)} {requestGroups.map(requestGroup => this.renderRequestGroupRow(requestGroup))} -
+
r._id === requests.active); - - if (this.state.activeRequest !== activeRequest) { - this.setState({activeRequest}); - - if (activeRequest) { - db.responseGetForRequest(activeRequest).then(response => { - const activeResponse = response.docs.length ? response.docs[0] : null; - this.setState({activeResponse}) - }); - } - } - } - - componentDidUpdate () { - this._findActiveRequestResponse(); - } - - componentDidMount () { - this._findActiveRequestResponse(); - } - render () { - const {actions, requests, requestGroups, tabs, modals} = this.props; - const {activeRequest, activeResponse} = this.state; + const {actions, requests, responses, requestGroups, tabs, modals} = this.props; + const activeRequest = requests.all.find(r => r._id === requests.active); + const activeResponse = activeRequest ? responses[activeRequest._id] : undefined; return (
diff --git a/app/database/index.js b/app/database/index.js index 957764e0d..bede9c99d 100644 --- a/app/database/index.js +++ b/app/database/index.js @@ -145,6 +145,7 @@ export function responseGetForRequest (request) { selector: { requestId: request._id }, + sort: [{requestId: 'desc'}], limit: 1 }) } diff --git a/app/reducers/responses.js b/app/reducers/responses.js index e3bf5bf16..85b0a2745 100644 --- a/app/reducers/responses.js +++ b/app/reducers/responses.js @@ -5,9 +5,9 @@ const initialState = {}; export default function (state = initialState, action) { switch (action.type) { - case types.RESPONSE_SET: + case types.RESPONSE_UPDATE: const newState = Object.assign({}, state); - newState[action.requestId] = action.response; + newState[action.response.requestId] = action.response; return newState; default: diff --git a/electron.js b/electron.js index af4edfc5c..9de59c9b0 100644 --- a/electron.js +++ b/electron.js @@ -1,6 +1,6 @@ // Don't npm install this (it breaks). Rely on the global one. -const electron = require('electron'); +import electron from 'electron'; const app = electron.app; // Module to control application life. const BrowserWindow = electron.BrowserWindow; // Module to create native browser window. @@ -9,13 +9,13 @@ const IS_MAC = process.platform === 'darwin'; var mainWindow = null; // Quit when all windows are closed. -app.on('window-all-closed', function () { +app.on('window-all-closed', () => { if (!IS_MAC) { app.quit(); } }); -app.on('ready', function () { +app.on('ready', () => { mainWindow = new BrowserWindow({ width: 1200, height: 600, @@ -28,13 +28,13 @@ app.on('ready', function () { // and load the app.html of the app. mainWindow.loadURL(`file://${__dirname}/app/app.html`); -// Open the DevTools. -// if (IS_DEV) { -// mainWindow.webContents.openDevTools(); -// } + // Open the DevTools. + // if (IS_DEV) { + // mainWindow.webContents.openDevTools(); + // } -// Emitted when the window is closed. - mainWindow.on('closed', function () { + // Emitted when the window is closed. + mainWindow.on('closed', () => { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. diff --git a/package.json b/package.json index 8b920089f..7432173a6 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,6 @@ "dependencies": { "classnames": "^2.2.3", "codemirror": "^5.12.0", - "htmlhint": "^0.9.12", - "jsonlint": "^1.6.2", "jsonschema": "^1.1.0", "nunjucks": "^1.3.4", "pouchdb": "^5.3.1", @@ -24,17 +22,18 @@ "redux": "^3.3.1", "redux-logger": "^2.6.1", "redux-thunk": "^2.0.1", - "request": "^2.71.0", - "webpack": "^1.12.14" + "request": "^2.71.0" }, "devDependencies": { "babel-core": "^6.7.2", "babel-jest": "^9.0.3", "babel-loader": "^6.2.4", + "babel-plugin-add-module-exports": "^0.1.2", "babel-plugin-transform-object-rest-spread": "^6.6.5", "babel-polyfill": "^6.7.2", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", + "babel-preset-react-hmre": "^1.1.1", "concurrently": "^2.0.0", "css-loader": "^0.23.1", "express": "latest", @@ -49,15 +48,15 @@ "sass-loader": "^3.2.0", "style-loader": "^0.13.0", "url-loader": "^0.5.7", + "webpack": "^1.12.14", "webpack-dev-middleware": "latest", "webpack-dev-server": "^1.14.1", "webpack-hot-middleware": "^2.10.0", "webpack-target-electron-renderer": "^0.4.0" }, "scripts": { - "start": "electron electron/main.js", - "start-hot": "HOT=1 NODE_ENV=development electron electron.js", - "hot-server": "node ./webpack/server.js", + "start-hot": "HOT=1 NODE_ENV=development electron -r babel-register ./electron.js", + "hot-server": "node -r babel-register ./webpack/server.js", "dev": "concurrently --kill-others \"npm run hot-server\" \"npm run start-hot\"", "test": "jest $@", "package": "./scripts/package" @@ -80,5 +79,9 @@ "electron.js", "chrome.js" ] + }, + "devEngines": { + "node": "4.x || 5.x", + "npm": "2.x || 3.x" } } diff --git a/scripts/package b/scripts/package index fd55dcf79..9cfe380ca 100755 --- a/scripts/package +++ b/scripts/package @@ -1,5 +1,9 @@ #!/bin/bash #? Package the app -webpack --config webpack/prod.config.js -cp -r node_modules electron.js package.json dist/ +rm -r dist/* +webpack --config webpack/webpack.config.production.js +# cp -r node_modules electron.js package.json dist/ +cp electron.js package.json dist/ +cd dist +NODE_ENV=production npm install diff --git a/webpack/dev.config.js b/webpack/dev.config.js deleted file mode 100644 index 4b333ca57..000000000 --- a/webpack/dev.config.js +++ /dev/null @@ -1,29 +0,0 @@ -var path = require('path'); -var webpack = require('webpack'); -var base = require('./base.config'); - -base.entry = [ - 'webpack-hot-middleware/client?path=http://localhost:3333/__webpack_hmr', - 'webpack/hot/only-dev-server' -].concat(base.entry); - -base.debug = true; -base.devtool = 'inline-source-map'; -base.output.path = path.join(base.output.path, '/dev'); -base.output.publicPath = 'http://localhost:3333/dist/'; - -for (var i = 0; i < base.module.loaders.length; i++) { - var loader = base.module.loaders[i]; - if (loader.id === 'babel') { - loader.loaders = ['react-hot'].concat(loader.loaders); - break; - } -} - -base.plugins = base.plugins.concat([ - new webpack.HotModuleReplacementPlugin(), - new webpack.NoErrorsPlugin() -]); - -module.exports = base; - diff --git a/webpack/prod.config.js b/webpack/prod.config.js deleted file mode 100644 index 0c8b01a42..000000000 --- a/webpack/prod.config.js +++ /dev/null @@ -1,5 +0,0 @@ -var path = require('path'); -var webpack = require('webpack'); -var base = require('./base.config'); - -module.exports = base; diff --git a/webpack/server.js b/webpack/server.js index 6c2481e84..e32e1a86d 100644 --- a/webpack/server.js +++ b/webpack/server.js @@ -1,24 +1,26 @@ -'use strict'; +import express from 'express'; +import webpack from 'webpack'; +import webpackDevMiddleware from 'webpack-dev-middleware'; +import webpackHotMiddleware from 'webpack-hot-middleware'; -const express = require('express'); -const webpack = require('webpack'); -const config = require('./dev.config.js'); +import config from './webpack.config.development'; const app = express(); const compiler = webpack(config); - const PORT = 3333; -app.use(require('webpack-dev-middleware')(compiler, { +app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath, - stats: {colors: true} + stats: { + colors: true + } })); -app.use(require('webpack-hot-middleware')(compiler)); +app.use(webpackHotMiddleware(compiler)); app.listen(PORT, 'localhost', err => { if (err) { - console.log(err); + console.error(err); return; } diff --git a/webpack/base.config.js b/webpack/webpack.config.base.js similarity index 79% rename from webpack/base.config.js rename to webpack/webpack.config.base.js index 2d881fbf8..91973ff26 100644 --- a/webpack/base.config.js +++ b/webpack/webpack.config.base.js @@ -1,8 +1,7 @@ -var path = require('path'); -var webpack = require('webpack'); +import path from 'path'; +import webpack from 'webpack'; -var config = { - target: 'web', +export default { devtool: 'source-map', context: path.join(__dirname, '../app'), entry: [ @@ -10,8 +9,9 @@ var config = { './app.html' ], output: { - path: path.join(__dirname, '../dist/app'), - filename: 'bundle.js' + path: path.join(__dirname, '../dist'), + filename: 'bundle.js', + libraryTarget: 'commonjs2' }, module: { loaders: [ @@ -33,6 +33,14 @@ var config = { test: /\.html$/, loader: "file?name=[name].[ext]" }, + { + test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, + loader: "file" + }, + { + test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, + loader: "url?limit=10000&mimetype=image/svg+xml" + }, { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" @@ -44,14 +52,6 @@ var config = { { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" - }, - { - test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, - loader: "file" - }, - { - test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, - loader: "url?limit=10000&mimetype=image/svg+xml" } ] }, @@ -60,20 +60,13 @@ var config = { packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main'] }, plugins: [ - new webpack.DefinePlugin({ - __DEV__: true, - 'process.env': { - NODE_ENV: JSON.stringify('development') - } - }), new webpack.ExternalsPlugin('commonjs', [ 'request', 'nunjucks', 'pouchdb', 'pouchdb-find' ]) - ] + ], + target: 'electron-renderer' }; -config.target = 'electron'; -module.exports = config; diff --git a/webpack/webpack.config.development.js b/webpack/webpack.config.development.js new file mode 100644 index 000000000..3f6c5ac50 --- /dev/null +++ b/webpack/webpack.config.development.js @@ -0,0 +1,29 @@ +import path from 'path' +import webpack from 'webpack' +import baseConfig from './webpack.config.base' + +export default { + ...baseConfig, + debug: true, + devtool: 'inline-source-map', + entry: [ + ...baseConfig.entry, + 'webpack-hot-middleware/client?path=http://localhost:3333/__webpack_hmr', + 'webpack/hot/only-dev-server' + ], + output: { + ...baseConfig.output, + publicPath: 'http://localhost:3333/dist/' + }, + plugins: [ + ...baseConfig.plugins, + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin(), + new webpack.DefinePlugin({ + __DEV__: true, + 'process.env': { + NODE_ENV: JSON.stringify('development') + } + }) + ] +} diff --git a/webpack/webpack.config.production.js b/webpack/webpack.config.production.js new file mode 100644 index 000000000..842e5d769 --- /dev/null +++ b/webpack/webpack.config.production.js @@ -0,0 +1,12 @@ +import * as base from './webpack.config.base' + +base.plugins = base.plugins.concat([ + new webpack.DefinePlugin({ + __DEV__: false, + 'process.env': { + NODE_ENV: JSON.stringify('production') + } + }) +]); + +module.exports = base;