vzcode 0.0.5 → 0.1.0

package/README.md

@@ -2,6 +2,8 @@
 
 Multiplayer code editor system
 
+![image](https://user-images.githubusercontent.com/68416/219923570-75ef9f86-4a8d-47e9-8504-1e6c0290dc73.png)
+
 [Kanban](https://github.com/orgs/vizhub-core/projects/2/views/1)
 
 ## Project Description

package/cli.js

@@ -18,7 +18,6 @@ const files = fs
   .filter((dirent) => dirent.isFile())
   .map((dirent) => dirent.name);
 
-// Compute our initial document by reading the file system.
 const initialDocument = {};
 files.forEach((file) => {
   const id = Math.floor(Math.random() * 10000000000);
@@ -28,18 +27,15 @@ files.forEach((file) => {
   };
 });
 
-console.log('Welcome to VZCode!');
-
 ShareDB.types.register(json1.type);
 
 const app = express();
-const port = 5173;
+const port = 3030;
 
+// Use ShareDB over WebSocket
 const shareDBBackend = new ShareDB();
-const shareDBConnection = shareDBBackend.connect();
 const server = http.createServer(app);
 const wss = new WebSocketServer({ server });
-
 wss.on('connection', (ws) => {
   shareDBBackend.listen(new WebSocketJSONStream(ws));
 });
@@ -48,13 +44,54 @@ wss.on('connection', (ws) => {
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const dir = path.join(__dirname, '/dist');
-
 app.use(express.static(dir));
 
-// Create initial document
+// Create the initial "document",
+// which is a representation of files on disk.
+const shareDBConnection = shareDBBackend.connect();
 const shareDBDoc = shareDBConnection.get('documents', '1');
 shareDBDoc.create(initialDocument, json1.type.uri);
 
+// The time in milliseconds by which auto-saving is debounced.
+const autoSaveDebounceTimeMS = 800;
+
+// The state of the document when files were last auto-saved.
+let previousDocument = initialDocument;
+
+// Saves the files that changed.
+const save = () => {
+  const currentDocument = shareDBDoc.data;
+
+  // Take a look at each file that we have currently.
+  for (const key of Object.keys(currentDocument)) {
+    // Handle changing of text content.
+    if (previousDocument[key].text !== currentDocument[key].text) {
+      const { name, text } = currentDocument[key];
+      fs.writeFileSync(name, text);
+    }
+
+    // Handle renaming files.
+    const oldPath = previousDocument[key].name;
+    const newPath = currentDocument[key].name;
+    if (oldPath !== newPath) {
+      fs.renameSync(oldPath, newPath);
+    }
+
+    // TODO handle creating files
+    // TODO handle deleting files
+  }
+  previousDocument = currentDocument;
+};
+
+// Listen for when users modify files.
+let timeout;
+shareDBDoc.subscribe(() => {
+  shareDBDoc.on('op', (op) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(save, autoSaveDebounceTimeMS);
+  });
+});
+
 server.listen(port, () => {
   console.log(`Editor is live at http://localhost:${port}`);
 });

package/dist/assets/index-0b6fa7f4.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";@import"https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css";*{margin:0;padding:0;box-sizing:border-box}:root{--main-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace}body{background:rgb(41,44,52);font-family:Poppins,sans-serif}.tab{width:max-content;height:30px;background:rgb(45,45,45);text-align:center;color:#fff;font-family:var(--main-font-family);justify-content:center;align-items:center;display:flex;padding-left:10px;padding-right:10px;border-top-left-radius:10px;border-top-right-radius:10px;margin-top:5px;margin-left:2px;margin-right:2px;cursor:pointer}.tab.active{background-color:#292c34}.tab-close{display:flex;cursor:pointer;margin-left:5px;justify-content:center;align-items:center}.tab-close:hover{border-radius:30%;background-color:#252526}.Editor{position:fixed;margin-left:200px;width:100%;height:100%;top:30px;bottom:0;background-color:#292c34;color:#fff;font-family:var(--main-font-family)}.tabList{position:fixed;display:flex;flex-direction:row;top:0;left:200px;height:35px;width:100%;background:rgb(37,37,38);z-index:100;transition:all .5s ease}.bottomBar{position:absolute;bottom:0;left:0;height:20px;width:100%;background:rgb(45,45,45);z-index:100;transition:all .5s ease}.sidebar{position:fixed;top:0;left:0;height:100%;width:200px;background:rgb(92,92,92);z-index:100;transition:all .5s ease}.sidebar.close{width:78px}.sidebar .nav-links{height:100%;padding:0 0 150px;overflow:auto}.sidebar.close .nav-links{overflow:visible}.sidebar .nav-links::-webkit-scrollbar{display:none}.sidebar .nav-links li{position:relative;list-style:none;transition:all .4s ease}.sidebar .nav-links li:hover{background:rgb(92,92,92)}.sidebar .nav-links li .icon-link{display:flex;align-items:center;justify-content:space-between}.sidebar.close .nav-links li .icon-link{display:block}.sidebar .nav-links li i{height:50px;min-width:78px;text-align:center;line-height:50px;color:#fff;font-size:20px;cursor:pointer;transition:all .3s ease}.sidebar .nav-links li.showMenu i.arrow{transform:rotate(-180deg)}.sidebar.close .nav-links i.arrow{display:none}.sidebar .nav-links li a{display:flex;align-items:center;text-decoration:none}.sidebar .nav-links li a .link_name{font-size:18px;font-weight:400;color:#fff;transition:all .4s ease}.sidebar.close .nav-links li a .link_name{opacity:0;pointer-events:none}.sidebar .nav-links li .sub-menu{padding:6px 6px 14px 80px;margin-top:-10px;background:rgb(92,92,92);display:none}.sidebar .nav-links li.showMenu .sub-menu{display:block}.sidebar .nav-links li .sub-menu a{color:#fff;font-size:15px;padding:5px 0;white-space:nowrap;opacity:.6;transition:all .3s ease;cursor:pointer;user-select:none}.sidebar .nav-links li .sub-menu a:hover{opacity:1}.sidebar.close .nav-links li .sub-menu{position:absolute;left:100%;top:-10px;margin-top:0;padding:10px 20px;border-radius:0 6px 6px 0;opacity:0;display:block;pointer-events:none;transition:0s}.sidebar.close .nav-links li:hover .sub-menu{top:0;opacity:1;pointer-events:auto;transition:all .4s ease}.sidebar .nav-links li .sub-menu .link_name{display:none}.sidebar.close .nav-links li .sub-menu .link_name{font-size:18px;opacity:1;display:block}.sidebar .nav-links li .sub-menu.blank{opacity:1;pointer-events:auto;padding:3px 20px 6px 16px;opacity:0;pointer-events:none}.sidebar .nav-links li:hover .sub-menu.blank{top:50%;transform:translateY(-50%)}.sidebar .profile-details{position:fixed;bottom:0;width:200px;display:flex;align-items:center;justify-content:space-between;background:rgb(92,92,92);padding:12px 0;transition:all .5s ease}.sidebar.close .profile-details{background:none}.sidebar.close .profile-details{width:78px}.sidebar .profile-details .profile-content{display:flex;align-items:center}.sidebar .profile-details img{height:52px;width:52px;object-fit:cover;border-radius:16px;margin:0 14px 0 12px;background:rgb(92,92,92);transition:all .5s ease}.sidebar.close .profile-details img{padding:10px}.sidebar .profile-details .profile_name,.sidebar .profile-details .job{color:#fff;font-size:18px;font-weight:500;white-space:nowrap}.sidebar .profile-details .job{font-size:12px}.sidebar.close~.home-section{left:78px;width:calc(100% - 78px)}