next
Version:
The React Framework
119 lines (117 loc) • 6.39 kB
JavaScript
// TODO: Remove use of `any` type. Fix no-use-before-define violations.
/* eslint-disable @typescript-eslint/no-use-before-define */ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "default", {
enumerable: true,
get: function() {
return initializeBuildWatcher;
}
});
const _websocket = require("./error-overlay/websocket");
function initializeBuildWatcher(toggleCallback, position) {
if (position === void 0) position = "bottom-right";
const shadowHost = document.createElement("div");
const [verticalProperty, horizontalProperty] = position.split("-");
shadowHost.id = "__next-build-watcher";
// Make sure container is fixed and on a high zIndex so it shows
shadowHost.style.position = "fixed";
shadowHost.style[verticalProperty] = "10px";
shadowHost.style[horizontalProperty] = "20px";
shadowHost.style.width = 0;
shadowHost.style.height = 0;
shadowHost.style.zIndex = 99999;
document.body.appendChild(shadowHost);
let shadowRoot;
let prefix = "";
if (shadowHost.attachShadow) {
shadowRoot = shadowHost.attachShadow({
mode: "open"
});
} else {
// If attachShadow is undefined then the browser does not support
// the Shadow DOM, we need to prefix all the names so there
// will be no conflicts
shadowRoot = shadowHost;
prefix = "__next-build-watcher-";
}
// Container
const container = createContainer(prefix);
shadowRoot.appendChild(container);
// CSS
const css = createCss(prefix, {
horizontalProperty,
verticalProperty
});
shadowRoot.appendChild(css);
// State
let isVisible = false;
let isBuilding = false;
let timeoutId = null;
// Handle events
(0, _websocket.addMessageListener)((event)=>{
// This is the heartbeat event
if (event.data === "\uD83D\uDC93") {
return;
}
try {
handleMessage(event);
} catch (e) {}
});
function handleMessage(event) {
const obj = typeof event === "string" ? {
action: event
} : JSON.parse(event.data);
// eslint-disable-next-line default-case
switch(obj.action){
case "building":
timeoutId && clearTimeout(timeoutId);
isVisible = true;
isBuilding = true;
updateContainer();
break;
case "built":
case "sync":
isBuilding = false;
// Wait for the fade out transition to complete
timeoutId = setTimeout(()=>{
isVisible = false;
updateContainer();
}, 100);
updateContainer();
break;
}
}
toggleCallback(handleMessage);
function updateContainer() {
if (isBuilding) {
container.classList.add("" + prefix + "building");
} else {
container.classList.remove("" + prefix + "building");
}
if (isVisible) {
container.classList.add("" + prefix + "visible");
} else {
container.classList.remove("" + prefix + "visible");
}
}
}
function createContainer(prefix) {
const container = document.createElement("div");
container.id = "" + prefix + "container";
container.innerHTML = '\n <div id="' + prefix + 'icon-wrapper">\n <svg viewBox="0 0 226 200">\n <defs>\n <linearGradient\n x1="114.720775%"\n y1="181.283245%"\n x2="39.5399306%"\n y2="100%"\n id="' + prefix + 'linear-gradient"\n >\n <stop stop-color="#000000" offset="0%" />\n <stop stop-color="#FFFFFF" offset="100%" />\n </linearGradient>\n </defs>\n <g id="' + prefix + 'icon-group" fill="none" stroke="url(#' + prefix + 'linear-gradient)" stroke-width="18">\n <path d="M113,5.08219117 L4.28393801,197.5 L221.716062,197.5 L113,5.08219117 Z" />\n </g>\n </svg>\n </div>\n ';
return container;
}
function createCss(prefix, param) {
let { horizontalProperty , verticalProperty } = param;
const css = document.createElement("style");
css.textContent = "\n #" + prefix + "container {\n position: absolute;\n " + verticalProperty + ": 10px;\n " + horizontalProperty + ": 30px;\n\n border-radius: 3px;\n background: #000;\n color: #fff;\n font: initial;\n cursor: initial;\n letter-spacing: initial;\n text-shadow: initial;\n text-transform: initial;\n visibility: initial;\n\n padding: 7px 10px 8px 10px;\n align-items: center;\n box-shadow: 0 11px 40px 0 rgba(0, 0, 0, 0.25), 0 2px 10px 0 rgba(0, 0, 0, 0.12);\n\n display: none;\n opacity: 0;\n transition: opacity 0.1s ease, " + verticalProperty + " 0.1s ease;\n animation: " + prefix + "fade-in 0.1s ease-in-out;\n }\n\n #" + prefix + "container." + prefix + "visible {\n display: flex;\n }\n\n #" + prefix + "container." + prefix + "building {\n " + verticalProperty + ": 20px;\n opacity: 1;\n }\n\n #" + prefix + "icon-wrapper {\n width: 16px;\n height: 16px;\n }\n\n #" + prefix + "icon-wrapper > svg {\n width: 100%;\n height: 100%;\n }\n\n #" + prefix + "icon-group {\n animation: " + prefix + "strokedash 1s ease-in-out both infinite;\n }\n\n @keyframes " + prefix + "fade-in {\n from {\n " + verticalProperty + ": 10px;\n opacity: 0;\n }\n to {\n " + verticalProperty + ": 20px;\n opacity: 1;\n }\n }\n\n @keyframes " + prefix + "strokedash {\n 0% {\n stroke-dasharray: 0 226;\n }\n 80%,\n 100% {\n stroke-dasharray: 659 226;\n }\n }\n ";
return css;
}
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
Object.defineProperty(exports.default, '__esModule', { value: true });
Object.assign(exports.default, exports);
module.exports = exports.default;
}
//# sourceMappingURL=dev-build-watcher.js.map