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`.
This commit is contained in:
Christopher Willis-Ford 2018-09-26 18:16:35 -07:00
parent 6adb950ef6
commit 3785f7070e
6 changed files with 1230 additions and 2905 deletions

5
electron-webpack.json5 Normal file
View file

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

4040
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -13,31 +13,24 @@
"source-map-support": "^0.5.9" "source-map-support": "^0.5.9"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^9.1.5", "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"babel-eslint": "^8.2.6", "@babel/preset-react": "^7.0.0",
"babel-plugin-react-intl": "^3.0.1", "babel-eslint": "^10.0.0",
"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",
"electron": "2.0.7", "electron": "2.0.7",
"electron-builder": "^20.28.1", "electron-builder": "^20.28.1",
"electron-webpack": "^2.1.2", "electron-webpack": "^2.1.2",
"eslint": "^4.19.1", "eslint": "^5.0.1",
"eslint-config-scratch": "^5.0.0", "eslint-config-scratch": "^5.0.0",
"eslint-plugin-import": "^2.14.0", "eslint-plugin-import": "^2.8.0",
"eslint-plugin-react": "^7.11.1", "eslint-plugin-react": "^7.5.1",
"html-webpack-plugin": "^3.2.0", "intl": "1.2.5",
"postcss-import": "^12.0.0",
"postcss-simple-vars": "^5.0.1",
"react": "16.2.0", "react": "16.2.0",
"react-dom": "16.2.0", "react-dom": "16.2.0",
"react-intl": "2.4.0",
"react-redux": "5.0.7", "react-redux": "5.0.7",
"redux": "3.7.2", "redux": "3.7.2",
"uglifyjs-webpack-plugin": "^2.0.1", "scratch-gui": "0.1.0-prerelease.20180927141400",
"webpack": "^4.16.5" "webpack": "^4.8.3"
}, },
"resolutions": { "resolutions": {
"upath": "^1.0.5" "upath": "^1.0.5"

View file

@ -1,2 +1 @@
// Initial welcome page. Delete the following line to remove it. import './index.jsx';
'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')}

29
src/renderer/index.jsx Normal file
View file

@ -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);

View file

@ -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'
]
}
}
]
}
};