Web socket + fill setup
This commit is contained in:
parent
14f91686c5
commit
24a86b81ba
@ -1,4 +1,4 @@
|
|||||||
{
|
{
|
||||||
"name": "@coder/disposable",
|
"name": "@coder/disposable",
|
||||||
"main": "src/disposable.ts"
|
"main": "src/index.ts"
|
||||||
}
|
}
|
||||||
|
4
packages/events/package.json
Normal file
4
packages/events/package.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"name": "@coder/events",
|
||||||
|
"main": "./src/index.ts"
|
||||||
|
}
|
4
packages/events/yarn.lock
Normal file
4
packages/events/yarn.lock
Normal file
@ -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.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 () => {
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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");
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -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);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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));
|
||||||
});
|
});
|
||||||
|
@ -17,7 +17,7 @@
|
|||||||
],
|
],
|
||||||
"paths": {
|
"paths": {
|
||||||
"@coder/*": [
|
"@coder/*": [
|
||||||
"./packages/*/src"
|
"./packages/*"
|
||||||
],
|
],
|
||||||
"vs/*": [
|
"vs/*": [
|
||||||
"./lib/vscode/src/vs/*"
|
"./lib/vscode/src/vs/*"
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user