From b93c4dbaa83b99a4416ca2edfccb85c06d882a48 Mon Sep 17 00:00:00 2001 From: Bryan Phelps Date: Tue, 27 Feb 2018 18:54:58 -0800 Subject: [PATCH] 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 --- index.html | 14 ++++-- package.json | 3 +- scripts/dev_webpack_loader.js | 87 +++++++++++++++++++++++++++++++++++ 3 files changed, 99 insertions(+), 5 deletions(-) create mode 100644 scripts/dev_webpack_loader.js diff --git a/index.html b/index.html index f66e41bb1..f96c0605e 100644 --- a/index.html +++ b/index.html @@ -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; + } @@ -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 diff --git a/package.json b/package.json index 3bd767fdd..95105ec97 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/scripts/dev_webpack_loader.js b/scripts/dev_webpack_loader.js new file mode 100644 index 000000000..a730d0eb8 --- /dev/null +++ b/scripts/dev_webpack_loader.js @@ -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() }) + } + } +}