Web socket + fill setup

Author: code-asher

packages/disposable/package.json

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

packages/events/package.json

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

packages/events/yarn.lock

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

packages/ide/src/client.ts

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

packages/ide/src/fill/client.ts

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

packages/protocol/src/browser/modules/child_process.ts

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

packages/protocol/src/browser/modules/net.ts

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

packages/vscode/src/index.ts

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

packages/web/src/index.scss

@@ -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,11 +134,19 @@ html, body {
 	}
 }
 
-#status>#progress>#fill {
+#fill {
 	animation: statusProgress 2s ease infinite;
 	background-size: 400% 400%;
 	background: linear-gradient(270deg, #007acc, #0016cc);
 	height: 100%;
 	transition: 500ms width ease;
 	width: 0%;
 }
+
+.reload-button {
+	background-color: #007acc;
+	border-radius: 2px;
+	cursor: pointer;
+	margin-top: 10px;
+	padding: 6px 10px;
+}

packages/web/src/index.ts

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