From 24a86b81ba7f66a8237fad20f72d0049bc72aeec Mon Sep 17 00:00:00 2001 From: Asher Date: Mon, 14 Jan 2019 17:19:29 -0600 Subject: [PATCH] Web socket + fill setup --- packages/disposable/package.json | 2 +- packages/events/package.json | 4 +++ packages/events/yarn.lock | 4 +++ packages/ide/src/client.ts | 2 +- packages/ide/src/fill/client.ts | 4 ++- .../src/browser/modules/child_process.ts | 8 ++--- packages/protocol/src/browser/modules/net.ts | 35 +++---------------- packages/vscode/src/index.ts | 27 +++++++------- packages/web/src/index.scss | 24 ++++++++----- packages/web/src/index.ts | 14 +++++--- tsconfig.json | 2 +- webpack.config.app.js | 3 +- 12 files changed, 64 insertions(+), 65 deletions(-) create mode 100644 packages/events/package.json create mode 100644 packages/events/yarn.lock diff --git a/packages/disposable/package.json b/packages/disposable/package.json index 28c7886a..87b23eb6 100644 --- a/packages/disposable/package.json +++ b/packages/disposable/package.json @@ -1,4 +1,4 @@ { "name": "@coder/disposable", - "main": "src/disposable.ts" + "main": "src/index.ts" } diff --git a/packages/events/package.json b/packages/events/package.json new file mode 100644 index 00000000..2c540440 --- /dev/null +++ b/packages/events/package.json @@ -0,0 +1,4 @@ +{ + "name": "@coder/events", + "main": "./src/index.ts" +} diff --git a/packages/events/yarn.lock b/packages/events/yarn.lock new file mode 100644 index 00000000..fb57ccd1 --- /dev/null +++ b/packages/events/yarn.lock @@ -0,0 +1,4 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + diff --git a/packages/ide/src/client.ts b/packages/ide/src/client.ts index 38400212..81928f0c 100644 --- a/packages/ide/src/client.ts +++ b/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 () => { diff --git a/packages/ide/src/fill/client.ts b/packages/ide/src/fill/client.ts index dd8ff765..a05f9f8c 100644 --- a/packages/ide/src/fill/client.ts +++ b/packages/ide/src/fill/client.ts @@ -115,7 +115,9 @@ class Connection implements ReadWriteConnection { */ private async openSocket(): Promise { 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; diff --git a/packages/protocol/src/browser/modules/child_process.ts b/packages/protocol/src/browser/modules/child_process.ts index 97c0f489..2061431f 100644 --- a/packages/protocol/src/browser/modules/child_process.ts +++ b/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 | cp.SpawnOptions, _options?: cp.SpawnOptions): cp.ChildProcess { + public spawn = (command: string, args?: ReadonlyArray | cp.SpawnOptions, _options?: cp.SpawnOptions): cp.ChildProcess => { return this.client.spawn(command, args, options); } diff --git a/packages/protocol/src/browser/modules/net.ts b/packages/protocol/src/browser/modules/net.ts index a545283c..34e48768 100644 --- a/packages/protocol/src/browser/modules/net.ts +++ b/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"); } } diff --git a/packages/vscode/src/index.ts b/packages/vscode/src/index.ts index 33e3ce82..d7021f0c 100644 --- a/packages/vscode/src/index.ts +++ b/packages/vscode/src/index.ts @@ -4,7 +4,7 @@ import { URI } from "vs/base/common/uri"; import "./firefox"; const load = (): Promise => { - 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 => { ], }); - 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); + }); }); }; diff --git a/packages/web/src/index.scss b/packages/web/src/index.scss index ae57f985..87924a46 100644 --- a/packages/web/src/index.scss +++ b/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,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; +} diff --git a/packages/web/src/index.ts b/packages/web/src/index.ts index 70b5b1da..49dd9e57 100644 --- a/packages/web/src/index.ts +++ b/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)); }); diff --git a/tsconfig.json b/tsconfig.json index 617fa64c..97f0d8a2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,7 +17,7 @@ ], "paths": { "@coder/*": [ - "./packages/*/src" + "./packages/*" ], "vs/*": [ "./lib/vscode/src/vs/*" diff --git a/webpack.config.app.js b/webpack.config.app.js index 5dfa11c2..0d3d8877 100644 --- a/webpack.config.app.js +++ b/webpack.config.app.js @@ -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,