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", "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.tasks = [];
this.finishedTaskCount = 0; this.finishedTaskCount = 0;
this.progressElement = typeof document !== "undefined" this.progressElement = typeof document !== "undefined"
? document.querySelector("#status > #progress > #fill") as HTMLElement ? document.querySelector("#fill") as HTMLElement
: undefined; : undefined;
this.mkDirs = this.wrapTask("Creating directories", 100, async () => { this.mkDirs = this.wrapTask("Creating directories", 100, async () => {

View File

@ -115,7 +115,9 @@ class Connection implements ReadWriteConnection {
*/ */
private async openSocket(): Promise<WebSocket> { private async openSocket(): Promise<WebSocket> {
this.dispose(); this.dispose();
const socket = new WebSocket("websocket"); const socket = new WebSocket(
`${location.protocol === "https" ? "wss" : "ws"}://${location.host}/websocket`,
);
socket.binaryType = "arraybuffer"; socket.binaryType = "arraybuffer";
this.activeSocket = socket; this.activeSocket = socket;

View File

@ -8,11 +8,11 @@ export class CP {
private readonly client: Client, private readonly client: Client,
) { } ) { }
public exec( public exec = (
command: string, 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), 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), 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); const process = this.client.spawn(command);
let stdout = ""; let stdout = "";
@ -41,11 +41,11 @@ export class CP {
return process; return process;
} }
public fork(modulePath: string): cp.ChildProcess { public fork = (modulePath: string): cp.ChildProcess => {
return this.client.fork(modulePath); 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); return this.client.spawn(command, args, options);
} }

View File

@ -1,32 +1,5 @@
import * as net from "net"; 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; type NodeNet = typeof net;
/** /**
@ -35,11 +8,11 @@ type NodeNet = typeof net;
export class Net implements NodeNet { export class Net implements NodeNet {
public get Socket(): typeof net.Socket { public get Socket(): typeof net.Socket {
return Socket; throw new Error("not implemented");
} }
public get Server(): typeof net.Server { public get Server(): typeof net.Server {
return Server; throw new Error("not implemented");
} }
public connect(): net.Socket { public connect(): net.Socket {
@ -65,8 +38,8 @@ export class Net implements NodeNet {
public createServer( public createServer(
_options?: { allowHalfOpen?: boolean, pauseOnConnect?: boolean } | ((socket: net.Socket) => void), _options?: { allowHalfOpen?: boolean, pauseOnConnect?: boolean } | ((socket: net.Socket) => void),
_connectionListener?: (socket: net.Socket) => void, _connectionListener?: (socket: net.Socket) => void,
): Server { ): net.Server {
return new Server(); throw new Error("not implemented");
} }
} }

View File

@ -4,7 +4,7 @@ import { URI } from "vs/base/common/uri";
import "./firefox"; import "./firefox";
const load = (): Promise<void> => { const load = (): Promise<void> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject): void => {
setUriFactory({ setUriFactory({
// TODO: not sure why this is an error. // TODO: not sure why this is an error.
// tslint:disable-next-line no-any // tslint:disable-next-line no-any
@ -20,19 +20,22 @@ const load = (): Promise<void> => {
], ],
}); });
client.mkDirs.then(() => {
resolve(); resolve();
});
// const importTime = time(1500); const importTime = time(1500);
// import(/* webpackPrefetch: true */ "./workbench").then((module) => { import(/* webpackPrefetch: true */ "./workbench").then((module) => {
// logger.info("Loaded workbench bundle", field("duration", importTime)); logger.info("Loaded workbench bundle", field("duration", importTime));
// const initTime = time(1500); const initTime = time(1500);
// return module.initialize(client).then(() => { return module.initialize(client).then(() => {
// logger.info("Initialized workbench", field("duration", initTime)); logger.info("Initialized workbench", field("duration", initTime));
// resolve();
// }); });
// }).catch((error) => { }).catch((error) => {
// }); reject(error);
});
}); });
}; };

View File

@ -30,18 +30,18 @@ html, body {
z-index: 2; z-index: 2;
} }
#overlay>.message { #overlay > .message {
color: white; color: white;
margin-top: 10px; margin-top: 10px;
opacity: 0.5; opacity: 0.5;
} }
#overlay.error>.message { #overlay.error > .message {
color: white; color: white;
opacity: 0.3; opacity: 0.3;
} }
#overlay>.activitybar { #overlay > .activitybar {
background-color: rgb(44, 44, 44); background-color: rgb(44, 44, 44);
bottom: 0; bottom: 0;
height: 100%; height: 100%;
@ -51,14 +51,14 @@ html, body {
width: 50px; width: 50px;
} }
#overlay>.activitybar svg { #overlay > .activitybar svg {
fill: white; fill: white;
margin-left: 2px; margin-left: 2px;
margin-top: 2px; margin-top: 2px;
opacity: 0.3; opacity: 0.3;
} }
#overlay.error>#status { #overlay.error > #status {
opacity: 0; opacity: 0;
} }
@ -76,7 +76,7 @@ html, body {
transform-style: preserve-3d; transform-style: preserve-3d;
} }
#logo>svg { #logo > svg {
fill: rgb(0, 122, 204); fill: rgb(0, 122, 204);
opacity: 1; opacity: 1;
width: 100px; width: 100px;
@ -94,7 +94,7 @@ html, body {
transition: 300ms opacity ease; transition: 300ms opacity ease;
} }
#status>#progress { #progress {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
@ -134,7 +134,7 @@ html, body {
} }
} }
#status>#progress>#fill { #fill {
animation: statusProgress 2s ease infinite; animation: statusProgress 2s ease infinite;
background-size: 400% 400%; background-size: 400% 400%;
background: linear-gradient(270deg, #007acc, #0016cc); background: linear-gradient(270deg, #007acc, #0016cc);
@ -142,3 +142,11 @@ html, body {
transition: 500ms width ease; transition: 500ms width ease;
width: 0%; 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"; import "./index.scss";
const loadTime = time(2500); const loadTime = time(2500);
logger.info("Loading IDE..."); logger.info("Loading IDE");
const overlay = document.getElementById("overlay"); const overlay = document.getElementById("overlay");
const logo = document.getElementById("logo"); const logo = document.getElementById("logo");
@ -33,11 +33,15 @@ load().then(() => {
overlay.classList.add("error"); overlay.classList.add("error");
} }
if (msgElement) { if (msgElement) {
msgElement.innerText = `Failed to load: ${error.message}. Retrying in 3 seconds...`; const button = document.createElement("div");
} button.className = "reload-button";
setTimeout(() => { button.innerText = "Reload";
button.addEventListener("click", () => {
location.reload(); location.reload();
}, 3000); });
msgElement.innerText = `Failed to load: ${error.message}.`;
msgElement.parentElement!.appendChild(button);
}
}).finally(() => { }).finally(() => {
logger.info("Load completed", field("duration", loadTime)); logger.info("Load completed", field("duration", loadTime));
}); });

View File

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

View File

@ -21,7 +21,7 @@ const vscodeFills = path.join(root, "packages", "vscode", "src", "fill");
module.exports = { module.exports = {
context: root, context: root,
devtool: "source-map", devtool: "eval",
entry: "./packages/web/src/index.ts", entry: "./packages/web/src/index.ts",
mode: isCi ? "production" : "development", mode: isCi ? "production" : "development",
output: { output: {
@ -111,6 +111,7 @@ module.exports = {
devServer: { devServer: {
hot: true, hot: true,
port: 3000, port: 3000,
disableHostCheck: true,
stats: { stats: {
all: false, // Fallback for options not defined. all: false, // Fallback for options not defined.
errors: true, errors: true,