Merge pull request #9 from pronebird/fix/boilerplate-upgrade

Update and migrate all deps

Author: Jordan Schroter

.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015", "stage-0"]
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": ["transform-decorators-legacy"]
 }

app/client/containers/DevTools.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+// Exported from redux-devtools
+import { createDevTools } from 'redux-devtools';
+
+// Monitors are separate packages, and you can make a custom one
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+
+// createDevTools takes a monitor and produces a DevTools component
+const DevTools = createDevTools(
+  // Monitors are individually adjustable with props.
+  // Consult their repositories to learn about those props.
+  // Here, we put LogMonitor inside a DockMonitor.
+  // Note: DockMonitor is visible by default.
+  <DockMonitor toggleVisibilityKey='ctrl-h'
+               changePositionKey='ctrl-q'
+               defaultIsVisible={true}>
+    <LogMonitor theme='tomorrow' />
+  </DockMonitor>
+);
+
+export default DevTools;

app/client/main.js

@@ -1,27 +1,29 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { compose, createStore, combineReducers } from 'redux';
-import { devTools } from 'redux-devtools';
 import { Provider } from 'react-redux';
 import user from './reducers/user';
 import App from './containers/App';
+import DevTools from './containers/DevTools';
+
+const initialState = {};
 
 const isDevelopment = process.env.NODE_ENV === 'development';
-const appCreateStore = isDevelopment ? compose(devTools())(createStore) : createStore;
-const store = appCreateStore(combineReducers({ user }));
+
+const enhancer = isDevelopment ? compose(
+  // Required! Enable Redux DevTools with the monitors you chose
+  DevTools.instrument()
+) : undefined;
+
+const store = createStore(combineReducers({ user }), initialState, enhancer);
 const rootElement = document.querySelector(document.currentScript.getAttribute('data-container'));
 
 ReactDOM.render(
-  <div>
-    <Provider store={store}>
+  <Provider store={store}>
+    <div>
       <App />
-    </Provider>
-    { isDevelopment && do {
-      const { DevTools, DebugPanel, LogMonitor } = require('redux-devtools/lib/react');
-      <DebugPanel top right bottom>
-        <DevTools store={store} monitor={LogMonitor} />
-      </DebugPanel>;
-    } }
-  </div>,
+      { isDevelopment && <DevTools /> }
+    </div>
+  </Provider>,
   rootElement
 );

app/main.js

@@ -1,10 +1,16 @@
-import app from 'app';
-import BrowserWindow from 'browser-window';
-import crashReporter from 'crash-reporter';
-
-crashReporter.start();
+import {app, crashReporter, BrowserWindow, Menu} from 'electron';
+import path from 'path';
+import url from 'url';
 
 let mainWindow = null;
+let forceQuit = false;
+
+crashReporter.start({
+  productName: 'YourName',
+  companyName: 'YourCompany',
+  submitURL: 'https://your-domain.com/url-to-submit',
+  uploadToServer: false
+});
 
 app.on('window-all-closed', () => {
   // On OS X it is common for applications and their menu bar
@@ -15,15 +21,61 @@ app.on('window-all-closed', () => {
 });
 
 app.on('ready', () => {
-  mainWindow = new BrowserWindow({ width: 1200, height: 1000 });
+  mainWindow = new BrowserWindow({ 
+    width: 1000, 
+    height: 800,
+    minWidth: 640,
+    minHeight: 480,
+    show: false 
+  });
+  mainWindow.loadURL(url.format({
+    pathname: path.join(__dirname, 'client/index.html'),
+    protocol: 'file:',
+    slashes: true
+  }));
 
-  mainWindow.loadUrl(`file://${__dirname}/client/index.html`);
+  mainWindow.webContents.on('did-finish-load', () => {
+    mainWindow.show();
+    mainWindow.focus();
 
-  if (process.env.NODE_ENV === 'development') {
-    mainWindow.openDevTools();
-  }
+    // Handle window logic properly on macOS:
+    // 1. App should not terminate if window has been closed
+    // 2. Click on icon in dock should re-open the window
+    // 3. ⌘+Q should close the window and quit the app
+    if (process.platform === 'darwin') {
+      mainWindow.on('close', function (e) {
+        if (!forceQuit) {
+          e.preventDefault();
+          mainWindow.hide();
+        }
+      });
 
-  mainWindow.on('closed', () => {
-    mainWindow = null;
+      app.on('activate', () => {
+        mainWindow.show();
+      });
+      
+      app.on('before-quit', () => {
+        forceQuit = true;
+      });
+    } else {
+      mainWindow.on('closed', () => {
+        mainWindow = null;
+      });
+    }
   });
+
+  if (process.env.NODE_ENV === 'development') {
+    // auto-open dev tools
+    mainWindow.webContents.openDevTools();
+
+    // add inspect element on right click menu
+    mainWindow.webContents.on('context-menu', (e, props) => {
+      Menu.buildFromTemplate([{
+        label: 'Inspect element',
+        click() {
+          mainWindow.inspectElement(props.x, props.y);
+        }
+      }]).popup(mainWindow);
+    });
+  }
 });

app/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "app",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

init.js

@@ -1,15 +1,3 @@
 var path = require('path');
-var cacheDir = path.join(__dirname, 'cache');
-
-if (process.env.NODE_ENV === 'development') {
-  require('electron-compile').initWithOptions({
-    cacheDir: cacheDir,
-    js: {
-      stage: 2
-    }
-  });
-} else {
-  require('electron-compile').initForProduction(cacheDir);
-}
-require('./app/main');
 
+require('electron-compile').init(__dirname, './app/main');

package.json

@@ -7,29 +7,33 @@
   "repository": "https://github.com/jschr/electron-react-redux-boilerplate",
   "license": "MIT",
   "dependencies": {
-    "react": "^0.14.2",
-    "react-dom": "^0.14.2",
-    "react-redux": "^4.0.0",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-redux": "^5.0.2",
     "redux": "^3.0.0",
-    "redux-actions": "^0.8.0",
-    "electron-compile": "^1.0.0",
-    "redux-devtools": "^2.1.2"
+    "redux-actions": "^1.2.1",
+    "electron-compile": "^5.1.3",
+    "redux-devtools": "^3.3.2"
   },
   "devDependencies": {
-    "babel-cli": "^6.2.0",
+    "babel-cli": "^6.22.2",
     "babel-core": "^6.2.1",
-    "babel-eslint": "^4.1.1",
+    "babel-eslint": "^7.1.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-es2015": "^6.1.18",
+    "babel-preset-react": "^6.22.0",
     "babel-preset-stage-0": "^6.1.18",
     "browser-sync": "^2.9.3",
     "chai": "^3.4.1",
-    "electron-compilers": "^1.0.1",
-    "electron-packager": "^5.1.0",
-    "electron-prebuilt": "^0.34.2",
-    "eslint": "^1.4.1",
-    "eslint-config-airbnb": "0.1.0",
-    "eslint-plugin-react": "^3.3.2",
-    "mocha": "^2.3.4"
+    "electron": "^1.5.0",
+    "electron-compilers": "^5.1.3",
+    "electron-packager": "^8.5.1",
+    "eslint": "^3.14.1",
+    "eslint-config-airbnb": "^14.0.0",
+    "eslint-plugin-react": "^6.9.0",
+    "mocha": "^3.2.0",
+    "redux-devtools-dock-monitor": "^1.1.1",
+    "redux-devtools-log-monitor": "^1.2.0"
   },
   "scripts": {
     "serve": "babel-node scripts/serve.js",

scripts/pack.js

@@ -29,7 +29,7 @@ packager({
   name: packageJson.name,
   platform: 'darwin',
   arch: 'x64',
-  version: require('electron-prebuilt/package.json').version,
+  version: require('electron/package.json').version,
   overwrite: true,
   prune: true,
   ignore: new RegExp(`node_modules/(${nodeModuleIgnores.join('|')})`),

scripts/serve.js

@@ -1,5 +1,5 @@
 import { spawn } from 'child_process';
-import electron from 'electron-prebuilt';
+import electron from 'electron';
 import browserSync from 'browser-sync';
 import browserSyncConnectUtils from 'browser-sync/lib/connect-utils';
 
@@ -31,7 +31,7 @@ bsync.init({
 }, (err, bs) => {
   if (err) return console.error(err);
 
-  spawn(electron, ['.'], {
+  const proc = spawn(electron, ['.'], {
     env: {
       ...{
         NODE_ENV: 'development',
@@ -42,6 +42,10 @@ bsync.init({
     stdio: 'inherit'
   });
 
+  proc.on('close', (code) => {
+    process.exit();
+  });
+
   bsync
     .watch('app/client/**/*')
     .on('change', bsync.reload);