vzcode 0.1.1 → 0.2.1

package/README.md

@@ -1,18 +1,46 @@
 # VZCode
 
-Multiplayer code editor system
+Multiplayer code editor system | [Kanban](https://github.com/orgs/vizhub-core/projects/2/views/1)
 
-![image](https://user-images.githubusercontent.com/68416/219923570-75ef9f86-4a8d-47e9-8504-1e6c0290dc73.png)
+![image](https://user-images.githubusercontent.com/68416/224690259-293c75c5-5970-4066-80e4-b9dee568e10d.png)
 
-[Kanban](https://github.com/orgs/vizhub-core/projects/2/views/1)
+## Features
 
-## Project Description
+This project is nascent but has enough features to actually use, a minimum viable product (MVP):
 
-- Open source code editor for JavaScript, HTML, CSS, and Markdown
-- Support for real-time collaboration
-- Invite collaborators over LAN or HTTP Tunneing
-- Focus on instant feedback during development
-- Core component of [VizHub](https://vizhub.com/) next generation editor
+- Browser-based code editing environment
+- Sidebar listing files from the file system
+  - Note: directories are not yet supported
+- Real-time collaboration (multiplayer mode)
+  - Invite collaborators over LAN, or
+  - Use a service like [NGrok](https://ngrok.com/) for remote collaboration
+- Tabs on the top for managing open files
+- Operatons on files (create file, rename file, delete file)
+- Syntax highlighting for several Web languages
+- Auto-saves changes back to the file system
+
+## Usage
+
+One way to use this is as an editor on your system:
+
+- Install with `npm install -g vzcode`
+- Launch with `cd myProject; vzcode`
+
+Another way to use this is to set up this editor within your project by introducing a new npm script like this:
+
+```json
+{
+  "name": "example-project",
+  "scripts": {
+    "edit": "vzcode"
+  },
+  "dependencies": {
+    "vzcode": "^0.1.0"
+  }
+}
+```
+
+Then run `npm run edit` to start the editor.
 
 ## Stack
 
@@ -37,6 +65,7 @@ Multiplayer code editor system
 - Dogfood the product to identify ways it can be improved
 - Iterate based on feedback
 - Share the project with the world
+- Core component of [VizHub](https://vizhub.com/) next generation editor
 
 ## Prior Work
 

package/cli.js

@@ -2,13 +2,21 @@
 import http from 'http';
 import express from 'express';
 import ShareDB from 'sharedb';
-import json1 from 'ot-json1';
 import { WebSocketServer } from 'ws';
 import WebSocketJSONStream from '@teamwork/websocket-json-stream';
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { json1Presence } from './src/ot.js';
+import { randomId } from './src/randomId.js';
 
+// The time in milliseconds by which auto-saving is debounced.
+const autoSaveDebounceTimeMS = 800;
+
+// Server port.
+const port = 3030;
+
+// Use the current working directory to look for files.
 const fullPath = process.cwd();
 
 // Isolate files, not directories.
@@ -18,22 +26,33 @@ const files = fs
   .filter((dirent) => dirent.isFile())
   .map((dirent) => dirent.name);
 
+// Initialize the document using our data structure for representing files.
+//  * Keys are file ids, which are random numbers.
+//  * Values are objects with properties:
+//    * text - the text content of the file
+//    * name - the file name
 const initialDocument = {};
 files.forEach((file) => {
-  const id = Math.floor(Math.random() * 10000000000);
+  const id = randomId();
   initialDocument[id] = {
     text: fs.readFileSync(file, 'utf-8'),
     name: file,
   };
 });
 
-ShareDB.types.register(json1.type);
+// Register our custom OT type,
+// because it does not ship with ShareDB.
+ShareDB.types.register(json1Presence.type);
 
 const app = express();
-const port = 3030;
 
 // Use ShareDB over WebSocket
-const shareDBBackend = new ShareDB();
+const shareDBBackend = new ShareDB({
+  // Enable presence
+  // See https://github.com/share/sharedb/blob/master/examples/rich-text-presence/server.js#L9
+  presence: true,
+  doNotForwardSendPresenceErrorsToClient: true,
+});
 const server = http.createServer(app);
 const wss = new WebSocketServer({ server });
 wss.on('connection', (ws) => {
@@ -50,10 +69,7 @@ app.use(express.static(dir));
 // 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;
+shareDBDoc.create(initialDocument, json1Presence.type.uri);
 
 // The state of the document when files were last auto-saved.
 let previousDocument = initialDocument;
@@ -62,28 +78,41 @@ let previousDocument = initialDocument;
 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);
+  // Take a look at each file (key) previously and currently.
+  const allKeys = Object.keys({ ...currentDocument, ...previousDocument });
+  for (const key of allKeys) {
+    const previous = previousDocument[key];
+    const current = currentDocument[key];
+
+    // If this file was neither created nor deleted...
+    if (previous && current) {
+      // Handle changing of text content.
+      if (previous.text !== current.text) {
+        fs.writeFileSync(current.name, current.text);
+      }
+
+      // Handle renaming files.
+      if (previous.name !== current.name) {
+        fs.renamesync(previous.name, current.name);
+      }
     }
 
-    // Handle renaming files.
-    const oldPath = previousDocument[key].name;
-    const newPath = currentDocument[key].name;
-    if (oldPath !== newPath) {
-      fs.renameSync(oldPath, newPath);
+    // handle deleting files.
+    if (previous && !current) {
+      fs.unlinkSync(previous.name);
     }
 
-    // TODO handle creating files
-    // TODO handle deleting files
+    // Handle creating files.
+    if (!previous && current) {
+      fs.writeFileSync(current.name, current.text);
+    }
   }
   previousDocument = currentDocument;
 };
 
 // Listen for when users modify files.
+// Files get written to disk after `autoSaveDebounceTimeMS`
+// milliseconds of inactivity.
 let timeout;
 shareDBDoc.subscribe(() => {
   shareDBDoc.on('op', (op) => {

package/dist/assets/index-5c2f5f84.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";@import"https://unpkg.com/bootstrap@5.3.0-alpha1/dist/css/bootstrap.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)}.tab-list{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}.bottom-bar{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(54,65,89);z-index:100;transition:all .5s ease}.link-name{margin-top:30px;margin-left:10px;color:#9aa0ac;font-size:12px;text-decoration:none}.file{display:flex;flex-direction:row;align-items:center;justify-content:left;width:180px;cursor:pointer;margin-left:10px;color:#dbdde1;border-radius:5px}.full-Box{width:inherit;height:inherit;padding:7px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.utilities{justify-content:right;margin-right:3px}.noUtils{display:none}.settings{position:absolute;bottom:0;height:30px;width:180px;z-index:100;color:#dbdde1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:14px 0;margin:10px;border-radius:5px}.file:hover,.settings:hover{background-color:#4a5469}.newBTN{justify-content:right;margin-right:10px;cursor:pointer}.themes{color:#252526}