mirror of https://github.com/onivim/oni.git
* Improve developer experience when laoding from webpack, and provide alternative launch mechanism * Add webpack laoder scripts
This commit is contained in:
parent
71b5891d93
commit
b93c4dbaa8
14
index.html
14
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;
|
||||
}
|
||||
</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
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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() })
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue