Fix #1345 - Improve developer experience when starting from webpack (#1663)

* Improve developer experience when laoding from webpack, and provide alternative launch mechanism

* Add webpack laoder scripts
This commit is contained in:
Bryan Phelps 2018-02-27 18:54:58 -08:00 committed by GitHub
parent 71b5891d93
commit b93c4dbaa8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 99 additions and 5 deletions

View File

@ -21,6 +21,15 @@
script {
display: none;
}
@keyframes spinner-rotate {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
.webpack-loading-image {
animation: spinner-rotate 2s linear infinite;
}
</style>
</head>
<body>
@ -29,10 +38,7 @@
console.timeStamp("browser.domloaded")
var path = "lib/browser/bundle.js"
if(process.env.ONI_WEBPACK_LOAD) {
path = "http://localhost:8191/bundle.js";
const hotReloadElement = document.createElement("div");
hotReloadElement.textContent = "Waiting for webpack compilation... You may need to reload the browser once webpack finishes compiling."
document.body.appendChild(hotReloadElement)
path = "scripts/dev_webpack_loader.js"
}
var scriptTag = document.createElement("script");
scriptTag.src = path

View File

@ -137,7 +137,7 @@
"precommit": "pretty-quick --staged",
"prepush": "npm run build && npm run lint",
"build": "npm run build:browser && npm run build:main && npm run build:plugins",
"build-debug": "npm run build:browser-debug && npm run build:plugins",
"build-debug": "npm run build:browser-debug && npm run build:main && npm run build:plugins",
"build:browser": "webpack --config browser/webpack.production.config.js",
"build:browser-debug": "webpack --config browser/webpack.debug.config.js",
"build:main": "cd main && tsc -p tsconfig.json",
@ -173,6 +173,7 @@
"ccov:remap:browser:lcov": "cd lib_test/browser/src && remap-istanbul --input ../../../coverage/coverage-final.json --output lcov.info --type lcovonly",
"ccov:clean": "rimraf coverage",
"ccov:upload": "codecov",
"launch": "electron lib/main/src/main.js",
"start": "concurrently --kill-others \"npm run start-hot\" \"npm run watch:browser\" \"npm run watch:plugins\"",
"start-hot": "cross-env ONI_WEBPACK_LOAD=1 NODE_ENV=development electron lib/main/src/main.js",
"start-not-dev": "cross-env electron main.js",

View File

@ -0,0 +1,87 @@
// Helper script to load webpack
const WEBPACK_BUNDLE_URL = "http://localhost:8191/bundle.js"
const hotReloadElement = document.createElement("div")
hotReloadElement.style.position = "absolute"
hotReloadElement.style.left = "0px"
hotReloadElement.style.right = "0px"
hotReloadElement.style.bottom = "0px"
hotReloadElement.style.top = "0px"
hotReloadElement.style.display = "flex"
hotReloadElement.style.backgroundColor = "black"
hotReloadElement.style.color = "white"
hotReloadElement.style.flexDirection = "column"
hotReloadElement.style.justifyContent = "center"
hotReloadElement.style.alignItems = "center"
const oniImage = document.createElement("img")
oniImage.className = "webpack-loading-image"
oniImage.src = "build/icons/128x128.png"
const textElement = document.createElement("span")
textElement.className = "webpack-loading-text"
textElement.textContent = "BUILD: Waiting for webpack initialization..."
const statusElement = document.createElement("span")
statusElement.className = "webpack-loading-status"
statusElement.textContent = ""
hotReloadElement.appendChild(oniImage)
hotReloadElement.appendChild(textElement)
hotReloadElement.appendChild(statusElement)
document.body.appendChild(hotReloadElement)
let attempt = 1
let initialized = false
const setStatus = statusText => {
console.log(statusText)
statusElement.textContent = statusText
}
const check = () => {
setStatus(
"Checking bundle - attempt " +
attempt.toString() +
". Check console where you ran `npm run start` for output / status...",
)
fetch(WEBPACK_BUNDLE_URL).then(
() => {
setStatus("Webpack initialized! Loading...")
start()
},
() => {
setStatus("Last fetch failed. Retrying...")
},
)
}
check()
let interval = window.setInterval(() => {
check()
attempt++
}, 1000)
const start = () => {
if (!initialized) {
initialized = true
window.clearInterval(interval)
document.body.removeChild(hotReloadElement)
const scriptTag = document.createElement("script")
scriptTag.src = WEBPACK_BUNDLE_URL
document.body.appendChild(scriptTag)
// Once the script comes in, it likely will have missed the 'init' event
scriptTag.onload = () => {
require("electron")
.remote.getCurrentWindow()
.send("init", { args: [], workingDirectory: process.cwd() })
}
}
}