vzcode 0.4.0 → 0.5.0

package/dist/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>VZCode</title>
-    <script type="module" crossorigin src="/assets/index-48dbd5c3.js"></script>
-    <link rel="stylesheet" href="/assets/index-8d2d4b3b.css">
+    <script type="module" crossorigin src="/assets/index-523ecad7.js"></script>
+    <link rel="stylesheet" href="/assets/index-29b6a606.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "vzcode",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Multiplayer code editor system",
   "main": "index.js",
   "type": "module",
-  "bin": "cli.js",
+  "bin": "src/server/index.js",
   "files": [
     "dist/**",
     "src/**"
   ],
   "scripts": {
-    "test": "npm run build; cd test; node ../cli.js",
+    "test": "vitest",
+    "test-interactive": "npm run build; cd test/sampleDirectories/kitchenSink; node ../../../src/server/index.js",
     "prettier": "prettier {*.*,**/*.*} --write",
     "dev": "vite",
     "build": "vite build",
@@ -52,9 +53,12 @@
     "@teamwork/websocket-json-stream": "^2.0.0",
     "codemirror": "^6.0.1",
     "codemirror-ot": "^4.0.0",
+    "d3-array": "^3.2.3",
     "diff-match-patch": "^1.0.5",
+    "dotenv": "^16.0.3",
     "express": "^4.18.2",
     "json0-ot-diff": "^1.1.2",
+    "ngrok": "^4.3.3",
     "open": "^9.0.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.2",
@@ -69,6 +73,7 @@
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
     "prettier": "^2.8.6",
-    "vite": "^4.2.1"
+    "vite": "^4.2.1",
+    "vitest": "^0.30.1"
   }
 }

package/src/{App.jsx → client/App.jsx}

@@ -1,10 +1,11 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import ShareDBClient from 'sharedb-client-browser/dist/sharedb-client-umd.cjs';
-import { json1Presence } from './ot';
+import { json1Presence } from '../ot';
+import { randomId } from '../randomId';
 import { CodeEditor } from './CodeEditor';
 import { diff } from './diff';
-import { randomId } from './randomId';
 import { Settings } from './settings';
+import { Sidebar } from './Sidebar';
 import './style.css';
 
 // Register our custom JSON1 OT type that supports presence.
@@ -18,10 +19,6 @@ const wsProtocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
 const socket = new WebSocket(wsProtocol + window.location.host + '/ws');
 const connection = new Connection(socket);
 
-// A feature flag to disable settings for release, until it's completed.
-// See https://vitejs.dev/guide/env-and-mode.html
-const disableSettings = import.meta.env.VITE_DISABLE_SETTINGS === 'true';
-
 function App() {
   // The ShareDB document.
   const [shareDBDoc, setShareDBDoc] = useState(null);
@@ -51,10 +48,6 @@ function App() {
   // The current theme.
   const [theme, setTheme] = useState('OneDark');
 
-  // The currently hovered over file, for showing
-  // "utils", meaning buttons for rename and delete.
-  const [utils, setUtils] = useState(false);
-
   // True to show the settings modal.
   const [settings, setSettings] = useState(false);
 
@@ -144,7 +137,7 @@ function App() {
   );
 
   // Called when a file in the sidebar is double-clicked.
-  const renameFile = useCallback(
+  const handleRenameFileClick = useCallback(
     (key) => {
       const newName = prompt('Enter new name');
       if (newName) {
@@ -176,6 +169,16 @@ function App() {
     [shareDBDoc, closeTab]
   );
 
+  const handleFileClick = useCallback(
+    (fileId) => {
+      setActiveFileId(fileId);
+      if (!tabList.includes(fileId)) {
+        setTabList([...tabList, fileId]);
+      }
+    },
+    [tabList]
+  );
+
   // TODO prompt the user "Are you sure?"
   const handleDeleteFileClick = useCallback(
     (fileId) => (event) => {
@@ -205,6 +208,11 @@ function App() {
     setSettings(false);
   }, []);
 
+  const fileNameSplit = (fileName) => {
+    const split = fileName.split('/');
+    return split[split.length - 1];
+  };
+
   return (
     <>
       <Settings
@@ -223,7 +231,7 @@ function App() {
               setActiveFileId(fileId);
             }}
           >
-            {tabValid ? data[fileId].name : ''}
+            {tabValid ? fileNameSplit(data[fileId].name) : ''}
             <div
               className={activeFileId ? 'bx bx-x tab-close' : ''}
               onClick={handleCloseTabClick(fileId)}
@@ -231,74 +239,15 @@ function App() {
           </div>
         ))}
       </div>
-      <div className="sidebar show">
-        <div className="nav-links">
-          <div className="show-menu">
-            <div className="sub-menu">
-              <div className="files">
-                <div className="full-Box">
-                  <div>
-                    <a className="link-name" href="#">
-                      Files
-                    </a>
-                  </div>
-                  <div>
-                    <i
-                      className="bx bxs-file-plus newBTN"
-                      style={{ color: '#dbdde1' }}
-                      onClick={createFile}
-                    ></i>
-                  </div>
-                </div>
-              </div>
-              {data
-                ? Object.keys(data).map((key) => (
-                    <div className="file" key={key}>
-                      <div
-                        className="full-Box"
-                        onClick={() => {
-                          setActiveFileId(key);
-                          if (!tabList.includes(key)) {
-                            setTabList([...tabList, key]);
-                          }
-                        }}
-                        onMouseEnter={() => {
-                          setUtils(key);
-                        }}
-                        onMouseLeave={() => {
-                          setUtils(null);
-                        }}
-                      >
-                        <div className={utils === key ? 'hover-name' : 'name'}>
-                          {data[key].name}
-                        </div>
-                        <div className={utils === key ? 'utils' : 'noUtils'}>
-                          <i
-                            className="bx bxs-edit utilities"
-                            style={{ color: '#abdafb' }}
-                            onClick={() => {
-                              renameFile(key);
-                            }}
-                          ></i>
-                          <i
-                            className="bx bx-trash"
-                            style={{ color: '#eb336c' }}
-                            onClick={handleDeleteFileClick(key)}
-                          ></i>
-                        </div>
-                      </div>
-                    </div>
-                  ))
-                : null}
-            </div>
-          </div>
-          {disableSettings ? null : (
-            <div className="settings" onClick={() => setSettings(!settings)}>
-              Settings
-            </div>
-          )}
-        </div>
-      </div>
+      <Sidebar
+        createFile={createFile}
+        data={data}
+        handleRenameFileClick={handleRenameFileClick}
+        handleDeleteFileClick={handleDeleteFileClick}
+        handleFileClick={handleFileClick}
+        setSettings={setSettings}
+        settings={settings}
+      />
       {data && activeFileId ? (
         <CodeEditor
           className="editor"

package/src/client/Sidebar/Directory.jsx

@@ -0,0 +1,62 @@
+import { useCallback } from 'react';
+import { Item } from './Item';
+import { FileOrDirectory } from './FileOrDirectory';
+import { DirectoryArrowSVG } from './DirectoryArrowSVG';
+
+export const Directory = ({
+  name,
+  path,
+  children,
+  handleRenameFileClick,
+  handleDeleteFileClick,
+  handleFileClick,
+  openDirectories,
+  toggleDirectory,
+}) => {
+  const handleClick = useCallback(() => {
+    toggleDirectory(path);
+  }, [toggleDirectory]);
+
+  const handleDeleteClick = useCallback(() => {
+    console.log('TODO handleDeleteDirectoryClick');
+  }, []);
+
+  const handleRenameClick = useCallback(() => {
+    console.log('TODO handleRenameDirectoryClick');
+  }, []);
+
+  const isOpen = openDirectories[path];
+  return (
+    <>
+      <Item
+        name={name}
+        handleClick={handleClick}
+        handleDeleteClick={handleDeleteClick}
+        handleRenameClick={handleRenameClick}
+      >
+        <div
+          className="arrow-wrapper"
+          style={{ transform: `rotate(${isOpen ? 90 : 0}deg)` }}
+        >
+          <DirectoryArrowSVG />
+        </div>
+        {name}
+      </Item>
+      {children && isOpen ? (
+        <div className="indentation">
+          {children.map((entity) => (
+            <FileOrDirectory
+              entity={entity}
+              key={entity.fileId || entity.path}
+              handleRenameFileClick={handleRenameFileClick}
+              handleDeleteFileClick={handleDeleteFileClick}
+              handleFileClick={handleFileClick}
+              openDirectories={openDirectories}
+              toggleDirectory={toggleDirectory}
+            />
+          ))}
+        </div>
+      ) : null}
+    </>
+  );
+};

package/src/client/Sidebar/DirectoryArrowSVG.jsx

@@ -0,0 +1,5 @@
+export const DirectoryArrowSVG = ({ height = 10, fill = 'currentcolor' }) => (
+  <svg height={height} viewBox={'4 4 16 16'}>
+    <path fill={fill} d="M8 17l9-5-9-5v10z" />
+  </svg>
+);

package/src/client/Sidebar/File.jsx

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+import { Item } from './Item';
+
+export const File = ({
+  name,
+  fileId,
+  handleRenameFileClick,
+  handleDeleteFileClick,
+  handleFileClick,
+}) => {
+  const handleClick = useCallback(() => {
+    handleFileClick(fileId);
+  }, [fileId, handleFileClick]);
+
+  const handleDeleteClick = useCallback(() => {
+    handleDeleteFileClick(fileId);
+  }, [fileId]);
+
+  const handleRenameClick = useCallback(() => {
+    handleRenameFileClick(fileId);
+  }, [fileId]);
+
+  return (
+    <Item
+      handleClick={handleClick}
+      handleDeleteClick={handleDeleteClick}
+      handleRenameClick={handleRenameClick}
+    >
+      {name}
+    </Item>
+  );
+};

package/src/client/Sidebar/FileOrDirectory.jsx

@@ -0,0 +1,33 @@
+import { File } from './File';
+import { Directory } from './Directory';
+
+export const FileOrDirectory = ({
+  entity,
+  handleRenameFileClick,
+  handleDeleteFileClick,
+  handleFileClick,
+  openDirectories,
+  toggleDirectory,
+}) => {
+  const { name, path, fileId, file, children } = entity;
+  return file ? (
+    <File
+      fileId={fileId}
+      name={name}
+      handleRenameFileClick={handleRenameFileClick}
+      handleDeleteFileClick={handleDeleteFileClick}
+      handleFileClick={handleFileClick}
+    />
+  ) : (
+    <Directory
+      name={name}
+      path={path}
+      children={children}
+      handleRenameFileClick={handleRenameFileClick}
+      handleDeleteFileClick={handleDeleteFileClick}
+      handleFileClick={handleFileClick}
+      openDirectories={openDirectories}
+      toggleDirectory={toggleDirectory}
+    />
+  );
+};

package/src/client/Sidebar/Item.jsx

@@ -0,0 +1,43 @@
+import { useState, useCallback } from 'react';
+
+export const Item = ({
+  children,
+  handleClick,
+  handleRenameClick,
+  handleDeleteClick,
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+
+  return (
+    <div
+      className="full-box file-or-directory"
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className="name">{children}</div>
+      {isHovered ? (
+        <div className="utils">
+          <i
+            className="bx bxs-edit utilities"
+            style={{ color: '#abdafb' }}
+            onClick={handleRenameClick}
+          ></i>
+          <i
+            className="bx bx-trash"
+            style={{ color: '#eb336c' }}
+            onClick={handleDeleteClick}
+          ></i>
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/src/client/Sidebar/index.jsx

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+import { getFileTree } from '../getFileTree';
+import { sortFileTree } from '../sortFileTree';
+import { disableSettings } from '../featureFlags';
+import { FileOrDirectory } from './FileOrDirectory';
+import { useOpenDirectories } from './useOpenDirectories';
+
+import './styles.css';
+
+export const Sidebar = ({
+  createFile,
+  data,
+  handleRenameFileClick,
+  handleDeleteFileClick,
+  handleFileClick,
+  setSettings,
+  settings,
+}) => {
+  const fileTree = useMemo(
+    () => (data ? sortFileTree(getFileTree(data)) : null),
+    [data]
+  );
+
+  const { openDirectories, toggleDirectory } = useOpenDirectories();
+
+  return (
+    <div className="vz-sidebar">
+      <div className="files">
+        <div className="full-box">
+          <div>
+            <a className="link-name" href="#">
+              Files
+            </a>
+          </div>
+          <div>
+            <i
+              className="bx bxs-file-plus new-btn"
+              style={{ color: '#dbdde1' }}
+              onClick={createFile}
+            ></i>
+          </div>
+        </div>
+      </div>
+      {fileTree
+        ? fileTree.children.map((entity) => (
+            <FileOrDirectory
+              entity={entity}
+              key={entity.fileId || entity.path}
+              handleRenameFileClick={handleRenameFileClick}
+              handleDeleteFileClick={handleDeleteFileClick}
+              handleFileClick={handleFileClick}
+              openDirectories={openDirectories}
+              toggleDirectory={toggleDirectory}
+            />
+          ))
+        : null}
+      {disableSettings ? null : (
+        <div className="settings" onClick={() => setSettings(!settings)}>
+          Settings
+        </div>
+      )}
+    </div>
+  );
+};

package/src/client/Sidebar/styles.css

@@ -0,0 +1,88 @@
+.vz-sidebar {
+  /* TODO remove position: fixed, overhaul CSS to use Flexbox for entire app */
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 200px;
+  background: rgb(54, 65, 89);
+}
+
+.vz-sidebar .full-box {
+  padding: 7px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.vz-sidebar .file-or-directory {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  margin: 0 10px;
+  color: rgb(219, 221, 225);
+  border-radius: 5px;
+}
+
+.vz-sidebar .link-name {
+  margin-top: 30px;
+  margin-left: 10px;
+  color: rgb(154, 160, 172);
+  font-size: 12px;
+  text-decoration: none;
+}
+
+.vz-sidebar .new-btn {
+  justify-content: right;
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+.vz-sidebar .utils {
+  display: flex;
+}
+
+.vz-sidebar .utilities {
+  margin-right: 3px;
+}
+
+.vz-sidebar .settings {
+  position: absolute;
+  bottom: 0;
+  height: 30px;
+  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;
+}
+
+.vz-sidebar .file-or-directory:hover,
+.vz-sidebar .settings:hover {
+  background-color: rgb(74, 84, 105);
+}
+
+.vz-sidebar .name {
+  display: flex;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/* Responsible for indenting directories */
+.vz-sidebar .indentation {
+  margin-left: 20px;
+}
+
+.vz-sidebar .arrow-wrapper {
+  margin-right: 4px;
+}

package/src/client/Sidebar/useOpenDirectories.js

@@ -0,0 +1,39 @@
+import { useState, useCallback } from 'react';
+
+// TODO bring this feature back
+// When a page is opened with an active file,
+// make sure all the directories leading to that file
+// are opened automatically.
+//export const initialOpenDirectories = (activeFile) => {
+//  const openDirectories = {};
+//  if (activeFile) {
+//    const path = activeFile.split('/');
+//    for (let i = 1; i < path.length; i++) {
+//      openDirectories[path.slice(0, i).join('/')] = true;
+//    }
+//  }
+//  return openDirectories;
+//};
+
+// Inspired by
+// https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/useOpenDirectories.js
+export const useOpenDirectories = (activeFile) => {
+  //const [openDirectories, setOpenDirectories] = useState(
+  //  initialOpenDirectories(activeFile)
+  //);
+  const [openDirectories, setOpenDirectories] = useState({});
+
+  // TODO consider useReducer to avoid event listener churn
+  const toggleDirectory = useCallback(
+    (path) => {
+      console.log(openDirectories[path], 'here');
+      setOpenDirectories(
+        Object.assign({}, openDirectories, {
+          [path]: !openDirectories[path],
+        })
+      );
+    },
+    [openDirectories]
+  );
+  return { openDirectories, toggleDirectory };
+};

package/src/{diff.js → client/diff.js}

@@ -1,6 +1,6 @@
 import jsondiff from 'json0-ot-diff';
 import diffMatchPatch from 'diff-match-patch';
-import { json1Presence, textUnicode } from './ot';
+import { json1Presence, textUnicode } from '../ot';
 
 export const diff = (a, b) =>
   jsondiff(a, b, diffMatchPatch, json1Presence, textUnicode);

package/src/client/featureFlags.js

@@ -0,0 +1,3 @@
+// A feature flag to disable settings for release, until it's completed.
+// See https://vitejs.dev/guide/env-and-mode.html
+export const disableSettings = import.meta.env.VITE_DISABLE_SETTINGS === 'true';

package/src/client/getFileTree.js

@@ -0,0 +1,49 @@
+// Inspired by
+// https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/FileTree/getFileTree.js
+export const getFileTree = (files) => {
+  const tree = { name: 'files' };
+  for (const fileId of Object.keys(files)) {
+    const file = files[fileId];
+    const path = file.name.split('/');
+    const n = path.length;
+    let node = tree;
+
+    // Walk the path.
+    for (let i = 0; i < n - 1; i++) {
+      // Search for an existing child.
+      let child;
+      const name = path[i];
+      if (node.children) {
+        for (let j = 0; j < node.children.length; j++) {
+          const nodeChild = node.children[j];
+          if (nodeChild.name === name) {
+            child = nodeChild;
+            break;
+          }
+        }
+      }
+
+      // Create a child if none with matching name exists.
+      if (!child) {
+        child = {
+          name: path[i],
+          path: path.slice(0, i + 1).join('/'),
+        };
+        (node.children || (node.children = [])).push(child);
+      }
+
+      node = child;
+    }
+
+    // file.text being `null` signifies
+    // that this is a directory.
+    if (file.text !== null) {
+      (node.children || (node.children = [])).push({
+        name: path[n - 1],
+        file,
+        fileId,
+      });
+    }
+  }
+  return tree;
+};

package/src/{getOrCreateEditor.js → client/getOrCreateEditor.js}

@@ -6,7 +6,7 @@ import { html } from '@codemirror/lang-html';
 import { css } from '@codemirror/lang-css';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { json1Sync } from 'codemirror-ot';
-import { json1Presence, textUnicode } from './ot';
+import { json1Presence, textUnicode } from '../ot';
 import { json1PresenceBroadcast } from './json1PresenceBroadcast';
 import { json1PresenceDisplay } from './json1PresenceDisplay';
 
@@ -23,7 +23,6 @@ export const getOrCreateEditor = ({
   shareDBDoc,
   localPresence,
   docPresence,
-  theme,
 }) => {
   const data = shareDBDoc.data;
 

package/src/{json1PresenceDisplay.js → client/json1PresenceDisplay.js}

@@ -5,7 +5,6 @@ import {
   Decoration,
 } from '@codemirror/view';
 import { Annotation, RangeSet } from '@codemirror/state';
-import { randomId } from './randomId';
 
 // Deals with receiving the broadcasted presence cursor locations
 // from other clients and displaying them.

package/src/{settings.jsx → client/settings.jsx}

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useCallback } from 'react';
 import Modal from 'react-bootstrap/Modal';
 import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';