boilerplate update

.babelrc

@@ -1,17 +1,23 @@
 {
-  "presets": ["es2015", "stage-0", "react"],
+  "presets": [
+    ["env", {
+      "targets": { "node": 7 },
+      "useBuiltIns": true
+    }],
+    "stage-0",
+    "react"
+  ],
   "plugins": ["add-module-exports"],
   "env": {
-		"production": {
-			"presets": ["react-optimize"],
-			"plugins": [
-				"babel-plugin-transform-remove-console",
-				"babel-plugin-transform-remove-debugger",
-				"babel-plugin-dev-expression"
-			]
-		},
-		"development": {
-			"presets": ["react-hmre"]
-		}
+    "production": {
+      "presets": ["react-optimize"],
+      "plugins": ["dev-expression"]
+    },
+    "development": {
+      "plugins": [
+        "transform-class-properties",
+        "transform-es2015-classes"
+      ]
+    }
   }
 }

.editorconfig

@@ -1,19 +1,12 @@
 root = true
 
 [*]
-indent_style = tab
+indent_style = space
+indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[*.{json,js,jsx,html,css,scss}]
-indent_style = space
-indent_size = 2
-
-[.eslintrc]
-indent_style = space
-indent_size = 2
-
 [*.md]
 trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,53 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+.eslintcache
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+app/node_modules
+
+# OSX
+.DS_Store
+
+# flow-typed
+flow-typed/npm/*
+!flow-typed/npm/module_vx.x.x.js
+
+# App packaged
+release
+app/main.prod.js
+app/main.prod.js.map
+app/renderer.prod.js
+app/renderer.prod.js.map
+app/style.css
+app/style.css.map
+dist
+dll
+main.js
+main.js.map
+
+.idea
+npm-debug.log.*
+__snapshots__

.eslintrc

@@ -1,24 +1,51 @@
 {
   "parser": "babel-eslint",
-  "extends": ["airbnb", "prettier"],
+  "parserOptions": {
+    "sourceType": "module",
+    "allowImportExportEverywhere": true
+  },
+  "extends": [
+    "airbnb",
+    "prettier"
+  ],
   "env": {
     "browser": true,
-    "mocha": true,
     "node": true
   },
   "rules": {
-    "prefer-template": 0,
-    "consistent-return": 0,
-    "comma-dangle": 0,
-    "no-use-before-define": 0,
-    "import/no-unresolved": [2, { ignore: ['electron'] }],
-    "react/jsx-no-bind": 0,
-    "react/prefer-stateless-function": 0,
-    "max-len": ["error", 120]
+    "arrow-parens": ["off"],
+    "compat/compat": "error",
+    "consistent-return": "off",
+    "comma-dangle": "off",
+    "generator-star-spacing": "off",
+    "import/no-unresolved": "error",
+    "import/no-extraneous-dependencies": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "no-console": "off",
+    "no-use-before-define": "off",
+    "no-multi-assign": "off",
+    "promise/param-names": "error",
+    "promise/always-return": "error",
+    "promise/catch-or-return": "error",
+    "promise/no-native": "off",
+    "react/sort-comp": ["error", {
+      "order": ["type-annotations", "static-methods", "lifecycle", "everything-else", "render"]
+    }],
+    "react/jsx-no-bind": "off",
+    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
+    "react/prefer-stateless-function": "off"
   },
   "plugins": [
     "import",
-    "react",
-    "prettier"
-  ]
+    "promise",
+    "compat",
+    "react"
+  ],
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "./webpack.config.eslint.js"
+      }
+    }
+  }
 }

.gitattributes

@@ -1 +1,6 @@
-* text=auto
+* text eol=lf
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.ico binary
+*.icns binary

.gitignore

@@ -21,14 +21,32 @@ coverage
 
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 build/Release
+.eslintcache
 
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+app/node_modules
 
 # OSX
 .DS_Store
 
+# flow-typed
+flow-typed/npm/*
+!flow-typed/npm/module_vx.x.x.js
+
 # App packaged
-dist
 release
+app/main.prod.js
+app/main.prod.js.map
+app/renderer.prod.js
+app/renderer.prod.js.map
+app/style.css
+app/style.css.map
+dist
+dll
+main.js
+main.js.map
+
+.idea
+npm-debug.log.*

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}

app/app.html

@@ -1,22 +1,46 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>FromScratch</title>
+    <script>
+      (function() {
+        if (!process.env.HOT) {
+          const link = document.createElement('link');
+          link.rel = 'stylesheet';
+          link.href = './dist/style.css';
+          // HACK: Writing the script path should be done with webpack
+          document.getElementsByTagName('head')[0].appendChild(link);
+        }
+      }());
+    </script>
   </head>
   <body>
-    <div id="react-root"></div>
+    <div id="root"></div>
     <script>
-      (function() {
+      {
+        const scripts = [];
+
+        // Dynamically insert the DLL script in development env in the
+        // renderer process
         if (process.env.NODE_ENV === 'development') {
-          const devtoolsInstaller = require('electron-devtools-installer');
-          devtoolsInstaller.default(devtoolsInstaller.REACT_DEVELOPER_TOOLS).catch(() => {});
+          scripts.push('../dll/renderer.dev.dll.js');
         }
 
-        const script = document.createElement('script');
-        script.src = (process.env.HOT) ? 'http://localhost:3000/dist/bundle.js' : '../dist/bundle.js';
-        document.write(script.outerHTML);
-      }());
+        // Dynamically insert the bundled app script in the renderer process
+        const port = process.env.PORT || 1212;
+        scripts.push(
+          (process.env.HOT)
+            ? 'http://localhost:' + port + '/dist/renderer.dev.js'
+            : './dist/renderer.prod.js'
+        );
+
+        document.write(
+          scripts
+            .map(script => `<script defer src="${script}"><\/script>`)
+            .join('')
+        );
+      }
     </script>
   </body>
 </html>

app/assets/style/app.scss

@@ -51,7 +51,7 @@ body[data-platform=darwin] {
   font-family: "FiraCode-Retina";
 }
 
-#react-root,
+#root,
 .ReactCodeMirror {
   position: absolute;
   top: 0;
@@ -63,18 +63,22 @@ body[data-platform=darwin] {
 }
 
 [data-platform=darwin] {
-  #react-root {
+  #root {
     background:transparent;
   }
   .ReactCodeMirror {
       background:transparentize($bgColor, 0.65);
   }
-
 }
-#react-root > div {
+
+#root > div {
   transition:0.4s ease filter;
 }
 
+.CodeMirror-sizer {
+  margin-left:0 !important;
+}
+
 .CodeMirror {
   padding: 3rem 0 4rem;
   width: 100%;

app/containers/FromScratch.jsx

@@ -17,6 +17,7 @@ require('../../node_modules/codemirror/addon/search/matchesonscrollbar.js');
 require('../../node_modules/codemirror/keymap/sublime.js');
 
 const { ipcRenderer: ipc, remote, shell } = require('electron');
+
 const handleContent = remote.getGlobal('handleContent');
 const nodeStorage = remote.getGlobal('nodeStorage');
 let latestVersion;

app/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+import FromScratch from './containers/FromScratch';
+import './assets/style/app.scss';
+
+render(
+  <AppContainer>
+    <FromScratch />
+  </AppContainer>,
+  document.getElementById('root')
+);
+
+if (module.hot) {
+  module.hot.accept('./containers/FromScratch', () => {
+    const NextRoot = require('./containers/FromScratch'); // eslint-disable-line global-require
+    render(
+      <AppContainer>
+        <NextRoot />
+      </AppContainer>,
+      document.getElementById('root')
+    );
+  });
+}

main.js → app/main.dev.js

@@ -1,6 +1,7 @@
 /* eslint no-path-concat: 0, func-names:0 */
 const electron = require('electron');
 const fs = require('fs');
+const path = require('path')
 const { JSONStorage } = require('node-localstorage');
 const APPVERSION = require('./package.json').version;
 const https = require('https');
@@ -98,7 +99,7 @@ app.on('ready', () => {
   const windowSettings = {
     show: false,
     title: app.getName(),
-    icon: __dirname + '/app/assets/img/icon.png',
+    icon: path.join(__dirname, 'assets/img/icon.png'),
     x: (windowState.bounds && windowState.bounds.x) || undefined,
     y: (windowState.bounds && windowState.bounds.y) || undefined,
     width: (windowState.bounds && windowState.bounds.width) || 550,
@@ -111,6 +112,8 @@ app.on('ready', () => {
     },
   };
 
+  console.log("ICON:", windowSettings.icon);
+
   if (process.platform === 'darwin') {
     ipc.on('setVibrancy', (event, lightTheme) => {
       if (lightTheme) {
@@ -124,9 +127,11 @@ app.on('ready', () => {
   }
 
   mainWindow = new BrowserWindow(windowSettings);
-  mainWindow.loadURL('file://' + __dirname + '/app/app.html');
+  mainWindow.loadURL(`file://${__dirname}/app.html`);
 
   mainWindow.on('ready-to-show', () => {
+
+
     mainWindow.show();
     // Restore maximised state if it is set. not possible via options so we do it here
     if (windowState.isMaximized) {