Web socket + fill setup
This commit is contained in:
parent
14f91686c5
commit
24a86b81ba
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"name": "@coder/disposable",
|
||||
"main": "src/disposable.ts"
|
||||
"main": "src/index.ts"
|
||||
}
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"name": "@coder/events",
|
||||
"main": "./src/index.ts"
|
||||
}
|
|
@ -0,0 +1,4 @@
|
|||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||
# yarn lockfile v1
|
||||
|
||||
|
|
@ -29,7 +29,7 @@ export class Client {
|
|||
this.tasks = [];
|
||||
this.finishedTaskCount = 0;
|
||||
this.progressElement = typeof document !== "undefined"
|
||||
? document.querySelector("#status > #progress > #fill") as HTMLElement
|
||||
? document.querySelector("#fill") as HTMLElement
|
||||
: undefined;
|
||||
|
||||
this.mkDirs = this.wrapTask("Creating directories", 100, async () => {
|
||||
|
|
|
@ -115,7 +115,9 @@ class Connection implements ReadWriteConnection {
|
|||
*/
|
||||
private async openSocket(): Promise<WebSocket> {
|
||||
this.dispose();
|
||||
const socket = new WebSocket("websocket");
|
||||
const socket = new WebSocket(
|
||||
`${location.protocol === "https" ? "wss" : "ws"}://${location.host}/websocket`,
|
||||
);
|
||||
socket.binaryType = "arraybuffer";
|
||||
this.activeSocket = socket;
|
||||
|
||||
|
|
|
@ -8,11 +8,11 @@ export class CP {
|
|||
private readonly client: Client,
|
||||
) { }
|
||||
|
||||
public exec(
|
||||
public exec = (
|
||||
command: string,
|
||||
options?: { encoding?: BufferEncoding | string | "buffer" | null } & cp.ExecOptions | null | ((error: Error | null, stdout: string, stderr: string) => void) | ((error: Error | null, stdout: Buffer, stderr: Buffer) => void),
|
||||
callback?: ((error: Error | null, stdout: string, stderr: string) => void) | ((error: Error | null, stdout: Buffer, stderr: Buffer) => void),
|
||||
): cp.ChildProcess {
|
||||
): cp.ChildProcess => {
|
||||
const process = this.client.spawn(command);
|
||||
|
||||
let stdout = "";
|
||||
|
@ -41,11 +41,11 @@ export class CP {
|
|||
return process;
|
||||
}
|
||||
|
||||
public fork(modulePath: string): cp.ChildProcess {
|
||||
public fork = (modulePath: string): cp.ChildProcess => {
|
||||
return this.client.fork(modulePath);
|
||||
}
|
||||
|
||||
public spawn(command: string, args?: ReadonlyArray<string> | cp.SpawnOptions, _options?: cp.SpawnOptions): cp.ChildProcess {
|
||||
public spawn = (command: string, args?: ReadonlyArray<string> | cp.SpawnOptions, _options?: cp.SpawnOptions): cp.ChildProcess => {
|
||||
return this.client.spawn(command, args, options);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,32 +1,5 @@
|
|||
import * as net from "net";
|
||||
|
||||
/**
|
||||
* Implementation of Socket for the browser.
|
||||
*/
|
||||
class Socket extends net.Socket {
|
||||
|
||||
public connect(): this {
|
||||
throw new Error("not implemented");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Implementation of Server for the browser.
|
||||
*/
|
||||
class Server extends net.Server {
|
||||
|
||||
public listen(
|
||||
_port?: number | any | net.ListenOptions, // tslint:disable-line no-any so we can match the Node API.
|
||||
_hostname?: string | number | Function,
|
||||
_backlog?: number | Function,
|
||||
_listeningListener?: Function,
|
||||
): this {
|
||||
throw new Error("not implemented");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
type NodeNet = typeof net;
|
||||
|
||||
/**
|
||||
|
@ -35,11 +8,11 @@ type NodeNet = typeof net;
|
|||
export class Net implements NodeNet {
|
||||
|
||||
public get Socket(): typeof net.Socket {
|
||||
return Socket;
|
||||
throw new Error("not implemented");
|
||||
}
|
||||
|
||||
public get Server(): typeof net.Server {
|
||||
return Server;
|
||||
throw new Error("not implemented");
|
||||
}
|
||||
|
||||
public connect(): net.Socket {
|
||||
|
@ -65,8 +38,8 @@ export class Net implements NodeNet {
|
|||
public createServer(
|
||||
_options?: { allowHalfOpen?: boolean, pauseOnConnect?: boolean } | ((socket: net.Socket) => void),
|
||||
_connectionListener?: (socket: net.Socket) => void,
|
||||
): Server {
|
||||
return new Server();
|
||||
): net.Server {
|
||||
throw new Error("not implemented");
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -4,7 +4,7 @@ import { URI } from "vs/base/common/uri";
|
|||
import "./firefox";
|
||||
|
||||
const load = (): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
return new Promise((resolve, reject): void => {
|
||||
setUriFactory({
|
||||
// TODO: not sure why this is an error.
|
||||
// tslint:disable-next-line no-any
|
||||
|
@ -20,19 +20,22 @@ const load = (): Promise<void> => {
|
|||
],
|
||||
});
|
||||
|
||||
resolve();
|
||||
client.mkDirs.then(() => {
|
||||
resolve();
|
||||
});
|
||||
|
||||
// const importTime = time(1500);
|
||||
// import(/* webpackPrefetch: true */ "./workbench").then((module) => {
|
||||
// logger.info("Loaded workbench bundle", field("duration", importTime));
|
||||
// const initTime = time(1500);
|
||||
const importTime = time(1500);
|
||||
import(/* webpackPrefetch: true */ "./workbench").then((module) => {
|
||||
logger.info("Loaded workbench bundle", field("duration", importTime));
|
||||
const initTime = time(1500);
|
||||
|
||||
// return module.initialize(client).then(() => {
|
||||
// logger.info("Initialized workbench", field("duration", initTime));
|
||||
//
|
||||
// });
|
||||
// }).catch((error) => {
|
||||
// });
|
||||
return module.initialize(client).then(() => {
|
||||
logger.info("Initialized workbench", field("duration", initTime));
|
||||
resolve();
|
||||
});
|
||||
}).catch((error) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -30,18 +30,18 @@ html, body {
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
#overlay>.message {
|
||||
#overlay > .message {
|
||||
color: white;
|
||||
margin-top: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#overlay.error>.message {
|
||||
#overlay.error > .message {
|
||||
color: white;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#overlay>.activitybar {
|
||||
#overlay > .activitybar {
|
||||
background-color: rgb(44, 44, 44);
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
|
@ -51,14 +51,14 @@ html, body {
|
|||
width: 50px;
|
||||
}
|
||||
|
||||
#overlay>.activitybar svg {
|
||||
#overlay > .activitybar svg {
|
||||
fill: white;
|
||||
margin-left: 2px;
|
||||
margin-top: 2px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#overlay.error>#status {
|
||||
#overlay.error > #status {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
@ -76,7 +76,7 @@ html, body {
|
|||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
#logo>svg {
|
||||
#logo > svg {
|
||||
fill: rgb(0, 122, 204);
|
||||
opacity: 1;
|
||||
width: 100px;
|
||||
|
@ -94,7 +94,7 @@ html, body {
|
|||
transition: 300ms opacity ease;
|
||||
}
|
||||
|
||||
#status>#progress {
|
||||
#progress {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
|
@ -134,7 +134,7 @@ html, body {
|
|||
}
|
||||
}
|
||||
|
||||
#status>#progress>#fill {
|
||||
#fill {
|
||||
animation: statusProgress 2s ease infinite;
|
||||
background-size: 400% 400%;
|
||||
background: linear-gradient(270deg, #007acc, #0016cc);
|
||||
|
@ -142,3 +142,11 @@ html, body {
|
|||
transition: 500ms width ease;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
.reload-button {
|
||||
background-color: #007acc;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@ import { load } from "@coder/vscode";
|
|||
import "./index.scss";
|
||||
|
||||
const loadTime = time(2500);
|
||||
logger.info("Loading IDE...");
|
||||
logger.info("Loading IDE");
|
||||
|
||||
const overlay = document.getElementById("overlay");
|
||||
const logo = document.getElementById("logo");
|
||||
|
@ -33,11 +33,15 @@ load().then(() => {
|
|||
overlay.classList.add("error");
|
||||
}
|
||||
if (msgElement) {
|
||||
msgElement.innerText = `Failed to load: ${error.message}. Retrying in 3 seconds...`;
|
||||
const button = document.createElement("div");
|
||||
button.className = "reload-button";
|
||||
button.innerText = "Reload";
|
||||
button.addEventListener("click", () => {
|
||||
location.reload();
|
||||
});
|
||||
msgElement.innerText = `Failed to load: ${error.message}.`;
|
||||
msgElement.parentElement!.appendChild(button);
|
||||
}
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 3000);
|
||||
}).finally(() => {
|
||||
logger.info("Load completed", field("duration", loadTime));
|
||||
});
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
],
|
||||
"paths": {
|
||||
"@coder/*": [
|
||||
"./packages/*/src"
|
||||
"./packages/*"
|
||||
],
|
||||
"vs/*": [
|
||||
"./lib/vscode/src/vs/*"
|
||||
|
|
|
@ -21,7 +21,7 @@ const vscodeFills = path.join(root, "packages", "vscode", "src", "fill");
|
|||
|
||||
module.exports = {
|
||||
context: root,
|
||||
devtool: "source-map",
|
||||
devtool: "eval",
|
||||
entry: "./packages/web/src/index.ts",
|
||||
mode: isCi ? "production" : "development",
|
||||
output: {
|
||||
|
@ -111,6 +111,7 @@ module.exports = {
|
|||
devServer: {
|
||||
hot: true,
|
||||
port: 3000,
|
||||
disableHostCheck: true,
|
||||
stats: {
|
||||
all: false, // Fallback for options not defined.
|
||||
errors: true,
|
||||
|
|
Loading…
Reference in New Issue