Implement fs module (#3)
* Implements the fs module * Add stats object * Add not implemented to createWriteStream * Update mkdtemp to use tmp dir * Unexport Stats * Add client web socket for commands and restructure
This commit is contained in:
Kyle Carberry
48
packages/web/src/index.html
Normal file
48
packages/web/src/index.html
Normal file
@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>VS Code</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="overlay">
|
||||
<div id="logo">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 313.7 220.7">
|
||||
<g stroke="none">
|
||||
<path d="M303,96.2c-6.1,0-10.2-3.5-10.2-10.7V44c0-26.5-11.1-41.1-39.8-41.1h-13.3v28h4.1c11.3,0,16.7,6.1,16.7,17.1
|
||||
v36.7c0,15.9,4.8,22.4,15.4,25.8c-10.6,3.2-15.4,9.8-15.4,25.8c0,9.1,0,18.2,0,27.2c0,7.6,0,15-2,22.6c-2,7-5.4,13.7-10,19.5
|
||||
c-2.6,3.3-5.6,6.1-8.9,8.7v3.7h13.3c28.7,0,39.8-14.6,39.8-41.1v-41.5c0-7.4,3.9-10.7,10.2-10.7h7.6v-28h-7.4L303,96.2L303,96.2z" />
|
||||
<path d="M212.3,45.1H171c-0.9,0-1.7-0.7-1.7-1.7v-3.2c0-0.9,0.7-1.7,1.7-1.7h41.3c0.9,0,1.7,0.7,1.7,1.7v3.2
|
||||
C214,44.3,213.2,45.1,212.3,45.1z" />
|
||||
<path d="M219.2,85.1h-30c-0.9,0-1.7-0.7-1.7-1.7v-3.1c0-0.9,0.7-1.7,1.7-1.7h30c0.9,0,1.7,0.7,1.7,1.7v3.2
|
||||
C220.8,84.2,220.1,85.1,219.2,85.1z" />
|
||||
<path d="M231,65.1h-59.9c-0.9,0-1.7-0.7-1.7-1.7v-3.1c0-0.9,0.7-1.7,1.7-1.7H231c0.9,0,1.7,0.7,1.7,1.7v3.2
|
||||
C232.7,64.1,232,65.1,231,65.1z" />
|
||||
<path d="M123.4,54.1c4.1,0,8.2,0.4,12,1.3v-7.6c0-10.7,5.6-17.1,16.7-17.1h4.1v-28h-13.3c-28.7,0-39.8,14.6-39.8,41.1
|
||||
v13.7C109.5,55.4,116.3,54.1,123.4,54.1z" />
|
||||
|
||||
<path d="M243.6,155c-3-23.5-21.1-43.2-44.5-47.6c-6.5-1.3-13-1.5-19.3-0.4c-0.2,0-0.2-0.2-0.4-0.2
|
||||
c-10.2-21.3-32.1-35.4-55.8-35.4c-23.7,0-45.4,13.7-55.8,35c-0.2,0-0.2,0.2-0.4,0.2c-6.7-0.7-13.3-0.4-20,1.3
|
||||
c-23,5.6-40.4,24.8-43.6,48.2c-0.4,2.4-0.6,4.8-0.6,7c0,7,4.8,13.5,11.9,14.5c8.7,1.3,16.3-5.4,16.1-13.9c0-1.3,0-2.8,0.2-4.1
|
||||
c1.5-11.9,10.6-21.9,22.4-24.7c3.7-0.9,7.4-1.1,10.9-0.6C76,135.8,87.1,130,91.9,120c3.5-7.4,9.1-13.9,16.5-17.4
|
||||
c8.2-3.9,17.4-4.4,25.9-1.5c8.9,3.2,15.6,9.8,19.6,18.2c4.3,8.2,6.3,13.9,15.4,15c3.7,0.6,14.1,0.4,18,0.2c7.6,0,15.2,2.6,20.6,8
|
||||
c3.5,3.7,6.1,8.3,7.2,13.5c1.7,8.3-0.4,16.7-5.4,23c-3.5,4.4-8.3,7.8-13.7,9.3c-2.6,0.7-5.2,0.9-7.8,0.9c-1.5,0-3.5,0-5.9,0
|
||||
c-7.4,0-23.2,0-35,0c-8.2,0-14.6-6.5-14.6-14.6v-27.4v-26.9c0-2.2-1.9-4.1-4.1-4.1h-5.7c-11.3,0.2-20.4,12.8-20.4,26.1
|
||||
s0,48.7,0,48.7c0,14.5,11.7,26.1,26.1,26.1c0,0,64.3-0.2,65.2-0.2c14.8-1.5,28.5-9.1,37.8-20.8C241.2,185,245.5,170.2,243.6,155z" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="status">
|
||||
<div id="progress">
|
||||
<div id="fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statusbar"></div>
|
||||
<div class="message">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
144
packages/web/src/index.scss
Normal file
144
packages/web/src/index.scss
Normal file
@ -0,0 +1,144 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
align-items: center;
|
||||
background-color: #252526;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: 150ms opacity ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#overlay>.message {
|
||||
color: white;
|
||||
margin-top: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#overlay.error>.message {
|
||||
color: white;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#overlay>.activitybar {
|
||||
background-color: rgb(44, 44, 44);
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
#overlay>.activitybar svg {
|
||||
fill: white;
|
||||
margin-left: 2px;
|
||||
margin-top: 2px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#overlay.error>#status {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#overlay>.statusbar {
|
||||
background-color: rgb(0, 122, 204);
|
||||
bottom: 0;
|
||||
cursor: default;
|
||||
height: 22px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
#logo>svg {
|
||||
fill: rgb(0, 122, 204);
|
||||
opacity: 1;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#status {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.75);
|
||||
color: white;
|
||||
font-size: 0.9em;
|
||||
margin-top: 15px;
|
||||
min-width: 100px;
|
||||
position: relative;
|
||||
transition: 300ms opacity ease;
|
||||
}
|
||||
|
||||
#status>#progress {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@-moz-keyframes statusProgress {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes statusProgress {
|
||||
0% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%
|
||||
}
|
||||
}
|
||||
|
||||
#status>#progress>#fill {
|
||||
animation: statusProgress 2s ease infinite;
|
||||
background-size: 400% 400%;
|
||||
background: linear-gradient(270deg, #007acc, #0016cc);
|
||||
height: 100%;
|
||||
transition: 500ms width ease;
|
||||
width: 0%;
|
||||
}
|
||||
43
packages/web/src/index.ts
Normal file
43
packages/web/src/index.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import { logger, field, time } from "@coder/logger";
|
||||
import { load } from "@coder/vscode";
|
||||
import "./index.scss";
|
||||
|
||||
const loadTime = time(2500);
|
||||
logger.info("Loading IDE...");
|
||||
|
||||
const overlay = document.getElementById("overlay");
|
||||
const logo = document.getElementById("logo");
|
||||
const msgElement = overlay
|
||||
? overlay.querySelector(".message") as HTMLElement
|
||||
: undefined;
|
||||
|
||||
if (overlay && logo) {
|
||||
overlay.addEventListener("mousemove", (event) => {
|
||||
const xPos = ((event.clientX - logo.offsetLeft) / 24).toFixed(2);
|
||||
const yPos = ((logo.offsetTop - event.clientY) / 24).toFixed(2);
|
||||
|
||||
logo.style.transform = `perspective(200px) rotateX(${yPos}deg) rotateY(${xPos}deg)`;
|
||||
});
|
||||
}
|
||||
|
||||
load().then(() => {
|
||||
if (overlay) {
|
||||
overlay.style.opacity = "0";
|
||||
overlay.addEventListener("transitionend", () => {
|
||||
overlay.remove();
|
||||
});
|
||||
}
|
||||
}).catch((error: Error) => {
|
||||
logger.error(error.message);
|
||||
if (overlay) {
|
||||
overlay.classList.add("error");
|
||||
}
|
||||
if (msgElement) {
|
||||
msgElement.innerText = `Failed to load: ${error.message}. Retrying in 3 seconds...`;
|
||||
}
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 3000);
|
||||
}).finally(() => {
|
||||
logger.info("Load completed", field("duration", loadTime));
|
||||
});
|
||||
Reference in New Issue
Block a user