Web socket + fill setup

This commit is contained in:
Asher 2019-01-14 17:19:29 -06:00 committed by Kyle Carberry
parent 14f91686c5
commit 24a86b81ba
No known key found for this signature in database
GPG Key ID: A0409BDB6B0B3EDB
12 changed files with 64 additions and 65 deletions

View File

@ -1,4 +1,4 @@
{
"name": "@coder/disposable",
"main": "src/disposable.ts"
"main": "src/index.ts"
}

View File

@ -0,0 +1,4 @@
{
"name": "@coder/events",
"main": "./src/index.ts"
}

View File

@ -0,0 +1,4 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1

View File

@ -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 () => {

View File

@ -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;

View File

@ -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);
}

View File

@ -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");
}
}

View File

@ -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);
});
});
};

View File

@ -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;
}

View File

@ -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));
});

View File

@ -17,7 +17,7 @@
],
"paths": {
"@coder/*": [
"./packages/*/src"
"./packages/*"
],
"vs/*": [
"./lib/vscode/src/vs/*"

View File

@ -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,