diff --git a/README.md b/README.md index 0ab9cafb..4fb9cd4e 100644 --- a/README.md +++ b/README.md @@ -23,8 +23,7 @@ $ brew cask install hyperterm 1. If you are running Linux, install "icnsutils", "graphicsmagick" and "xz-utils" 2. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device 3. Install the dependencies: `npm install` -4. Build the code and watch for changes: `npm run dev` -5. In a new tab, start the application: `npm start` +4. Build the code, watch for changes and run app: `npm run dev` To make sure that your code works in the finished application, you can generate the binaries like that: diff --git a/app/index.js b/app/index.js index 4c87a746..e00ac7b8 100644 --- a/app/index.js +++ b/app/index.js @@ -64,7 +64,7 @@ const url = 'file://' + resolve( console.log('electron will open', url); -app.on('ready', () => { +app.on('ready', () => installDevExtensions(isDev).then(() => { function createWindow(fn) { let cfg = plugins.getDecoratedConfig(); @@ -375,7 +375,9 @@ app.on('ready', () => { load(); plugins.subscribe(load); -}); +}).catch(err => { + console.error('Error while loading devtools extensions', err); +})); function initSession(opts, fn) { fn(uuid.v4(), new Session(opts)); @@ -394,3 +396,18 @@ app.on('open-file', (event, path) => { app.windowCallback = callback; } }); + +function installDevExtensions(isDev) { + if (!isDev) { + return Promise.resolve(); + } + const installer = require('electron-devtools-installer'); // eslint-disable-line global-require + + const extensions = [ + 'REACT_DEVELOPER_TOOLS', + 'REDUX_DEVTOOLS' + ]; + const forceDownload = Boolean(process.env.UPGRADE_EXTENSIONS); + + return Promise.all(extensions.map(name => installer.default(installer[name], forceDownload))); +} diff --git a/lib/index.js b/lib/index.js index 70b25826..50700fa1 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,35 +1,24 @@ -import {createStore, applyMiddleware} from 'redux'; import forceUpdate from 'react-deep-force-update'; import {Provider} from 'react-redux'; import React from 'react'; import {render} from 'react-dom'; -import thunk from 'redux-thunk'; import {webFrame} from 'electron'; import rpc from './rpc'; import {init} from './actions/index'; -import effects from './utils/effects'; import * as config from './utils/config'; -import rootReducer from './reducers/index'; import * as plugins from './utils/plugins'; import * as uiActions from './actions/ui'; import * as updaterActions from './actions/updater'; import * as sessionActions from './actions/sessions'; import HyperTermContainer from './containers/hyperterm'; import {loadConfig, reloadConfig} from './actions/config'; +import configureStore from './store/configureStore'; // Disable pinch zoom webFrame.setZoomLevelLimits(1, 1); -const store_ = createStore( - rootReducer, - applyMiddleware( - thunk, - plugins.middleware, - thunk, - effects - ) -); +const store_ = configureStore(); window.__defineGetter__('store', () => store_); window.__defineGetter__('rpc', () => rpc); diff --git a/lib/store/configure-store.dev.js b/lib/store/configure-store.dev.js new file mode 100644 index 00000000..a00e8ff1 --- /dev/null +++ b/lib/store/configure-store.dev.js @@ -0,0 +1,29 @@ +import {createStore, applyMiddleware, compose} from 'redux'; +import thunk from 'redux-thunk'; +import createLogger from 'redux-logger'; +import rootReducer from '../reducers/index'; +import effects from '../utils/effects'; +import * as plugins from '../utils/plugins'; + +export default () => { + const logger = createLogger({ + level: 'info', + collapsed: true + }); + + const enhancer = compose( + applyMiddleware( + thunk, + plugins.middleware, + thunk, + effects, + logger + ), + window.devToolsExtension() + ); + + return createStore( + rootReducer, + enhancer + ); +}; diff --git a/lib/store/configure-store.js b/lib/store/configure-store.js new file mode 100644 index 00000000..8bae0d38 --- /dev/null +++ b/lib/store/configure-store.js @@ -0,0 +1,10 @@ +import configureStoreForProduction from './configureStore.prod'; +import configureStoreForDevelopment from './configureStore.dev'; + +export default () => { + if (process.env.NODE_ENV === 'production') { + return configureStoreForProduction(); + } + + return configureStoreForDevelopment(); +}; diff --git a/lib/store/configure-store.prod.js b/lib/store/configure-store.prod.js new file mode 100644 index 00000000..af230840 --- /dev/null +++ b/lib/store/configure-store.prod.js @@ -0,0 +1,16 @@ +import {createStore, applyMiddleware} from 'redux'; +import thunk from 'redux-thunk'; +import rootReducer from '../reducers/index'; +import effects from '../utils/effects'; +import * as plugins from '../utils/plugins'; + +export default () => + createStore( + rootReducer, + applyMiddleware( + thunk, + plugins.middleware, + thunk, + effects + ) + ); diff --git a/package.json b/package.json index a0529f31..8f0354d2 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "babel-core": "^6.11.4", "babel-loader": "^6.2.4", "babel-preset-react": "^6.11.1", + "concurrently": "^2.2.0", "copy-webpack-plugin": "^3.0.1", "electron-builder": "^7.0.1", "electron": "1.4.0", @@ -45,7 +46,8 @@ "eslint-plugin-react": "^6.2.2", "husky": "^0.11.6", "webpack": "^2.1.0-beta.15", - "xo": "^0.16.0" + "xo": "^0.16.0", + "electron-devtools-installer": "^2.0.0" }, "xo": { "extends": "xo-react", @@ -102,6 +104,8 @@ }, "scripts": { "dev": "webpack --watch", + "dev": "concurrently --kill-others \"npm run dev-build\" \"npm run start\"", + "dev-build": "webpack --watch", "lint": "xo", "build": "NODE_ENV=production webpack", "test": "npm run lint && electron-mocha test/*",