Get scratch-gui working, kinda, sorta...

CSS isn't loaded and it takes a LONG time to compile, but it does load
the GUI. It also requires using `npm ln` for `scratch-gui`.

electron-webpack.json5

@@ -0,0 +1,5 @@
+{
+    "renderer": {
+        "webpackConfig": "webpack.renderer.additions.js"
+    }
+}

package.json

@@ -13,31 +13,24 @@
     "source-map-support": "^0.5.9"
   },
   "devDependencies": {
-    "autoprefixer": "^9.1.5",
-    "babel-eslint": "^8.2.6",
-    "babel-plugin-react-intl": "^3.0.1",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-plugin-transform-async-to-generator": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "copy-webpack-plugin": "^4.5.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.0",
     "electron": "2.0.7",
     "electron-builder": "^20.28.1",
     "electron-webpack": "^2.1.2",
-    "eslint": "^4.19.1",
+    "eslint": "^5.0.1",
     "eslint-config-scratch": "^5.0.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-react": "^7.11.1",
-    "html-webpack-plugin": "^3.2.0",
-    "postcss-import": "^12.0.0",
-    "postcss-simple-vars": "^5.0.1",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-react": "^7.5.1",
+    "intl": "1.2.5",
     "react": "16.2.0",
     "react-dom": "16.2.0",
+    "react-intl": "2.4.0",
     "react-redux": "5.0.7",
     "redux": "3.7.2",
-    "uglifyjs-webpack-plugin": "^2.0.1",
-    "webpack": "^4.16.5"
+    "scratch-gui": "0.1.0-prerelease.20180927141400",
+    "webpack": "^4.8.3"
   },
   "resolutions": {
     "upath": "^1.0.5"

src/renderer/index.js

@@ -1,2 +1 @@
-// Initial welcome page. Delete the following line to remove it.
-'use strict';const styles=document.createElement('style');styles.innerText=`@import url(https://unpkg.com/spectre.css/dist/spectre.min.css);.empty{display:flex;flex-direction:column;justify-content:center;height:100vh;position:relative}.footer{bottom:0;font-size:13px;left:50%;opacity:.9;position:absolute;transform:translateX(-50%);width:100%}`;const vueScript=document.createElement('script');vueScript.setAttribute('type','text/javascript'),vueScript.setAttribute('src','https://unpkg.com/vue'),vueScript.onload=init,document.head.appendChild(vueScript),document.head.appendChild(styles);function init(){Vue.config.devtools=false,Vue.config.productionTip=false,new Vue({data:{versions:{electron:process.versions.electron,electronWebpack:require('electron-webpack/package.json').version}},methods:{open(b){require('electron').shell.openExternal(b)}},template:`<div><div class=empty><p class="empty-title h5">Welcome to your new project!<p class=empty-subtitle>Get started now and take advantage of the great documentation at hand.<div class=empty-action><button @click="open('https://webpack.electron.build')"class="btn btn-primary">Documentation</button> <button @click="open('https://electron.atom.io/docs/')"class="btn btn-primary">Electron</button><br><ul class=breadcrumb><li class=breadcrumb-item>electron-webpack v{{ versions.electronWebpack }}</li><li class=breadcrumb-item>electron v{{ versions.electron }}</li></ul></div><p class=footer>This intitial landing page can be easily removed from <code>src/renderer/index.js</code>.</p></div></div>`}).$mount('#app')}
+import './index.jsx';

src/renderer/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import GUI, {AppStateHOC} from 'scratch-gui/src/index';
+
+// Register "base" page view
+// analytics.pageview('/');
+
+const appTarget = document.createElement('div');
+// appTarget.className = styles.app;
+document.body.appendChild(appTarget);
+
+GUI.setAppElement(appTarget);
+const WrappedGui = AppStateHOC(GUI);
+
+// TODO a hack for testing the backpack, allow backpack host to be set by url param
+const backpackHostMatches = window.location.href.match(/[?&]backpack_host=([^&]*)&?/);
+const backpackHost = backpackHostMatches ? backpackHostMatches[1] : null;
+
+const backpackOptions = {
+    visible: true,
+    host: backpackHost
+};
+if (process.env.NODE_ENV === 'production' && typeof window === 'object') {
+    // Warn before navigating away
+    window.onbeforeunload = () => true;
+}
+
+ReactDOM.render(<WrappedGui backpackOptions={backpackOptions} />, appTarget);

webpack.renderer.additions.js

@@ -0,0 +1,31 @@
+const path = require('path');
+
+module.exports = {
+    module: {
+        rules: [
+            {
+                test: /\.jsx?$/,
+                loader: 'babel-loader',
+                // include: [path.resolve(__dirname, 'src', 'renderer'), /node_modules[\\/]scratch-[^\\/]+[\\/]src/],
+                options: {
+                    // Explicitly disable babelrc so we don't catch various config
+                    // in much lower dependencies.
+                    babelrc: false,
+                    plugins: [
+                        '@babel/proposal-object-rest-spread'
+                        // 'syntax-dynamic-import',
+                        // 'transform-async-to-generator',
+                        // 'transform-object-rest-spread',
+                        // ['react-intl', {
+                        //     messagesDir: './translations/messages/'
+                        // }]
+                    ],
+                    presets: [
+                    //     ['env', {targets: {electron: '2.0.7'}}],
+                        '@babel/react'
+                    ]
+                }
+            }
+        ]
+    }
+};