vzcode 0.4.0 → 0.5.0

package/src/client/sortFileTree.js

@@ -0,0 +1,15 @@
+// Recursively sorts the file tree in-place.
+// Sorts first to group directories before files.
+// Sorts second alphabetically.
+// From https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/FileTree/sortFileTree.js
+export const sortFileTree = (fileTree) => {
+  if (fileTree.children) {
+    fileTree.children.sort((a, b) => {
+      const aIsFile = a.file ? 1 : 0;
+      const bIsFile = b.file ? 1 : 0;
+      return aIsFile - bIsFile || a.name.localeCompare(b.name);
+    });
+    fileTree.children.forEach(sortFileTree);
+  }
+  return fileTree;
+};

package/src/{style.css → client/style.css}

@@ -115,101 +115,6 @@ body {
   transition: all 0.5s ease;
 }
 
-.sidebar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 200px;
-  background: rgb(54, 65, 89);
-  z-index: 100;
-  transition: all 0.5s ease;
-}
-
-.link-name {
-  margin-top: 30px;
-  margin-left: 10px;
-  color: rgb(154, 160, 172);
-  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: rgb(219, 221, 225);
-  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;
-}
-
-/* TODO consistent naming "no-utils" */
-.noUtils {
-  display: none;
-}
-
-.settings {
-  position: absolute;
-  bottom: 0;
-  height: 30px;
-  /* TODO overhaul CSS to use Flexbox for entire sidebar */
-  width: 180px;
-  z-index: 100;
-  color: rgb(219, 221, 225);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 14px 0;
-  margin: 10px;
-  border-radius: 5px;
-}
-
-.file:hover,
-.settings:hover {
-  background-color: rgb(74, 84, 105);
-}
-
-/* TODO consistent naming new-btn */
-.newBTN {
-  justify-content: right;
-  margin-right: 10px;
-  cursor: pointer;
-}
-
 .themes {
   color: rgb(37, 37, 38);
 }
-
-.name,
-.hover-name {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.name {
-  max-width: 200px;
-}
-
-.hover-name {
-  max-width: 130px;
-}

package/src/server/computeInitialDocument.js

@@ -0,0 +1,69 @@
+import fs from 'fs';
+import path from 'path';
+import { randomId } from '../randomId.js';
+import { enableDirectories, debugDirectories } from './featureFlags.js';
+
+const isDirectory = (file) => file.endsWith('/');
+
+// Lists files from the file system,
+// converts them into the VZCode internal
+// ShareDB-compatible data structure.
+export const computeInitialDocument = ({ fullPath }) => {
+  // Isolate files, not directories.
+  // Inspired by https://stackoverflow.com/questions/41472161/fs-readdir-ignore-directories
+
+  const unsearchedDirectories = [''];
+
+  // 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 = {};
+
+  // Stack for recursively traversing directories.
+  let files = [];
+
+  while (unsearchedDirectories.length !== 0) {
+    const currentDirectory = unsearchedDirectories.pop();
+    const currentDirectoryPath = path.join(fullPath, currentDirectory);
+    const newFiles = fs
+      .readdirSync(currentDirectoryPath, { withFileTypes: true })
+      .filter((dirent) => (enableDirectories ? true : dirent.isFile()))
+
+      // Add a trailing slash for directories
+      .map((dirent) => {
+        const relativePath =
+          currentDirectory === ''
+            ? dirent.name
+            : currentDirectory + '/' + dirent.name;
+
+        if (dirent.isFile()) {
+          return relativePath;
+        }
+        unsearchedDirectories.push(relativePath);
+        return relativePath + '/';
+      });
+    // console.log(currentDirectory);
+
+    files = [...files, ...newFiles];
+  }
+
+  files.forEach((file) => {
+    const id = randomId();
+    initialDocument[id] = {
+      text: isDirectory(file)
+        ? null
+        : fs.readFileSync(path.join(fullPath, file), 'utf-8'),
+      name: file,
+    };
+  });
+
+  if (debugDirectories) {
+    console.log('files:');
+    console.log(files);
+    console.log('initialDocument:');
+    console.log(JSON.stringify(initialDocument, null, 2));
+  }
+  return initialDocument;
+};

package/src/server/featureFlags.js

@@ -0,0 +1,4 @@
+// Feature flag for directories, disabled until it's fully working.
+export const enableDirectories = true;
+
+export const debugDirectories = false;

package/{cli.js → src/server/index.js}

@@ -7,9 +7,13 @@ 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';
 import open from 'open';
+import ngrok from 'ngrok';
+import dotenv from 'dotenv';
+import { computeInitialDocument } from './computeInitialDocument.js';
+import { json1Presence } from '../ot.js';
+
+dotenv.config({ path: '../../.env' });
 
 // The time in milliseconds by which auto-saving is debounced.
 const autoSaveDebounceTimeMS = 800;
@@ -17,28 +21,9 @@ 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.
-// Inspired by https://stackoverflow.com/questions/41472161/fs-readdir-ignore-directories
-const files = fs
-  .readdirSync(fullPath, { withFileTypes: true })
-  .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 = randomId();
-  initialDocument[id] = {
-    text: fs.readFileSync(file, 'utf-8'),
-    name: file,
-  };
+const initialDocument = computeInitialDocument({
+  // Use the current working directory to look for files.
+  fullPath: process.cwd(),
 });
 
 // Register our custom OT type,
@@ -66,9 +51,9 @@ wss.on('connection', (ws) => {
 });
 
 // Serve static files
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const dir = path.join(__dirname, '/dist');
+const filename = fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+const dir = path.join(dirname, '..', '..', 'dist');
 app.use(express.static(dir));
 
 // Create the initial "document",
@@ -127,7 +112,16 @@ shareDBDoc.subscribe(() => {
   });
 });
 
-server.listen(port, () => {
-  console.log(`Editor is live at http://localhost:${port}`);
-  open(`http://localhost:${port}`);
+server.listen(port, async () => {
+  if (process.env.NGROK_TOKEN) {
+    (async function () {
+      await ngrok.authtoken(process.env.NGROK_TOKEN);
+      const url = await ngrok.connect(port);
+      console.log(`Editor is live at ${url}`);
+      open(url);
+    })();
+  } else {
+    console.log(`Editor is live at http://localhost:${port}`);
+    open(`http://localhost:${port}`);
+  }
 });

package/dist/assets/index-8d2d4b3b.css

@@ -1 +0,0 @@
-@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}::-webkit-scrollbar{width:10px;height:20px}::-webkit-scrollbar-track{background:rgb(41,44,52)}::-webkit-scrollbar-thumb{background:rgb(37,37,38)}::-webkit-scrollbar-thumb:hover{background:#555}: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;overflow-x:hidden}.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:relative;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}.name,.hover-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.name{max-width:200px}.hover-name{max-width:130px}