vzcode 0.24.0 → 0.26.0

package/src/client/themes/vizhubTheme/index.ts

@@ -0,0 +1,166 @@
+// A CodeMirror 6 theme for the VizHub syntax highlighting colors.
+
+// Inspired by https://github.com/uiwjs/react-codemirror/blob/master/themes/vscode/src/index.ts
+
+import { tags as t } from '@lezer/highlight';
+import {
+  createTheme,
+  CreateThemeOptions,
+} from '@uiw/codemirror-themes';
+
+import {
+  // Colors for various things outside the code itself
+  backgroundColor,
+  lineHighlight,
+  light,
+  dark,
+  lineNumbers,
+  lineNumbersActive,
+  selectionBackground,
+  selectionBackgroundMatch,
+  caretColor,
+
+  // Syntax highlighting colors
+  MINT,
+  AQUA,
+  SKY,
+  LAVENDER,
+  SALMON,
+  GOLDENROD,
+  PANIC,
+} from './colors';
+
+const defaultSettingsVizhubTheme: CreateThemeOptions['settings'] =
+  {
+    background: backgroundColor,
+    foreground: light,
+    caret: caretColor,
+    selection: selectionBackground,
+    selectionMatch: selectionBackgroundMatch,
+    lineHighlight,
+    gutterBackground: backgroundColor,
+    gutterForeground: lineNumbers,
+    gutterActiveForeground: lineNumbersActive,
+  };
+
+function vizhubThemeInit(
+  options?: Partial<CreateThemeOptions>,
+) {
+  const {
+    theme = 'dark',
+    settings = {},
+    styles = [],
+  } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      ...defaultSettingsVizhubTheme,
+      ...settings,
+    },
+    styles: [
+      {
+        tag: [
+          t.keyword,
+          t.operatorKeyword,
+          t.modifier,
+          t.color,
+          t.constant(t.name),
+          t.standard(t.name),
+          t.standard(t.tagName),
+          t.special(t.brace),
+          t.atom,
+          t.bool,
+          t.special(t.variableName),
+        ],
+        color: MINT,
+      },
+      {
+        tag: [t.controlKeyword, t.moduleKeyword],
+        color: MINT,
+      },
+      {
+        tag: [
+          t.name,
+          t.deleted,
+          t.character,
+          t.macroName,
+
+          t.variableName,
+          t.labelName,
+          t.definition(t.name),
+        ],
+        color: AQUA,
+      },
+      {
+        tag: [t.propertyName],
+        color: GOLDENROD,
+      },
+      {
+        tag: t.heading,
+        fontWeight: 'bold',
+        color: SKY,
+      },
+      {
+        tag: [
+          t.typeName,
+          t.className,
+          t.tagName,
+          t.number,
+          t.changed,
+          t.annotation,
+          t.self,
+          t.namespace,
+        ],
+        color: AQUA,
+      },
+      {
+        tag: [
+          t.function(t.variableName),
+          t.function(t.propertyName),
+        ],
+        color: AQUA,
+      },
+      { tag: [t.number], color: SALMON },
+      {
+        tag: [
+          t.operator,
+          t.punctuation,
+          t.separator,
+          t.url,
+          t.escape,
+          t.regexp,
+        ],
+        color: light,
+      },
+      {
+        tag: [t.regexp],
+        color: LAVENDER,
+      },
+      {
+        tag: [t.special(t.string), t.string, t.inserted],
+        color: LAVENDER,
+      },
+      {
+        tag: [t.processingInstruction],
+        color: AQUA,
+      },
+      { tag: [t.angleBracket], color: AQUA },
+      { tag: t.strong, fontWeight: 'bold' },
+      { tag: t.emphasis, fontStyle: 'italic' },
+      {
+        tag: t.strikethrough,
+        textDecoration: 'line-through',
+      },
+      { tag: [t.meta, t.comment], color: dark },
+      {
+        tag: t.link,
+        color: GOLDENROD,
+        textDecoration: 'underline',
+      },
+      { tag: t.invalid, color: PANIC },
+      ...styles,
+    ],
+  });
+}
+
+export const vizhubTheme = vizhubThemeInit();

package/src/client/useActions.ts

@@ -0,0 +1,74 @@
+import { useCallback } from 'react';
+import { ThemeLabel } from './themes';
+import { FileId } from '../types';
+import { VZAction } from './vzReducer';
+
+// This is a custom hook that returns a set of functions
+// that can be used to dispatch actions to the reducer.
+export const useActions = (
+  dispatch: (action: VZAction) => void,
+) => {
+  const setActiveFileId = useCallback(
+    (activeFileId: FileId) => {
+      dispatch({
+        type: 'set_active_file_id',
+        activeFileId,
+      });
+    },
+    [dispatch],
+  );
+
+  const openTab = useCallback(
+    (fileId: FileId) => {
+      dispatch({
+        type: 'open_tab',
+        fileId,
+      });
+    },
+    [dispatch],
+  );
+
+  const closeTabs = useCallback(
+    (idsToDelete: Array<FileId>) => {
+      dispatch({
+        type: 'close_tabs',
+        idsToDelete,
+      });
+    },
+    [dispatch],
+  );
+
+  const setTheme = useCallback(
+    (themeLabel: ThemeLabel) => {
+      dispatch({
+        type: 'set_theme',
+        themeLabel: themeLabel,
+      });
+    },
+    [dispatch],
+  );
+
+  // True to show the settings modal.
+  const setIsSettingsOpen = useCallback(
+    (value: boolean) => {
+      dispatch({
+        type: 'set_is_settings_open',
+        value: value,
+      });
+    },
+    [dispatch],
+  );
+
+  const closeSettings = useCallback(() => {
+    setIsSettingsOpen(false);
+  }, [setIsSettingsOpen]);
+
+  return {
+    setActiveFileId,
+    openTab,
+    closeTabs,
+    setTheme,
+    setIsSettingsOpen,
+    closeSettings,
+  };
+};

package/src/client/useFileCRUD.ts

@@ -0,0 +1,101 @@
+import { useCallback } from 'react';
+import { FileId, VZCodeContent } from '../types';
+import { randomId } from '../randomId';
+
+// CRUD operations for files and directories
+// CRUD = Create, Read, Update, Delete
+export const useFileCRUD = ({
+  submitOperation,
+  closeTabs,
+}) => {
+  // Create a new file
+  const createFile = useCallback(() => {
+    // TODO use Bootstrap modals not native prompts
+    // See https://github.com/vizhub-core/vzcode/issues/252
+    const name = prompt('Enter new file name');
+    if (name) {
+      submitOperation((document: VZCodeContent) => ({
+        ...document,
+        files: {
+          ...document.files,
+          [randomId()]: { name, text: '' },
+        },
+      }));
+    }
+  }, [submitOperation]);
+
+  // Called when a file in the sidebar is renamed.
+  const handleRenameFileClick = useCallback(
+    (fileId: FileId, newName: string) => {
+      submitOperation((document) => ({
+        ...document,
+        files: {
+          ...document.files,
+          [fileId]: {
+            ...document.files[fileId],
+            name: newName,
+          },
+        },
+      }));
+    },
+    [submitOperation],
+  );
+
+  // Deletes a file
+  const deleteFile = useCallback(
+    (fileId: FileId) => {
+      closeTabs([fileId]);
+      submitOperation((document) => {
+        const updatedFiles = { ...document.files };
+        delete updatedFiles[fileId];
+        return { ...document, files: updatedFiles };
+      });
+    },
+    [submitOperation, closeTabs],
+  );
+
+  // Deletes a directory and all files within it
+  const deleteDirectory = useCallback(
+    (path: FileId) => {
+      const tabsToClose: Array<FileId> = [];
+      submitOperation((document: VZCodeContent) => {
+        const updatedFiles = { ...document.files };
+        for (const key in updatedFiles) {
+          if (updatedFiles[key].name.includes(path)) {
+            tabsToClose.push(key);
+            delete updatedFiles[key];
+          }
+        }
+        return { ...document, files: updatedFiles };
+      });
+      closeTabs(tabsToClose);
+    },
+    [submitOperation, closeTabs],
+  );
+
+  // Generic delete function that calls either deleteFile or deleteDirectory
+  // TODO consider if there is a cleaner way to do this
+  //  - Ideally we would have a separate function for deleting files and directories
+  //  - When we click the delete button, we should be able to tell if it is a file or directory
+  const handleDeleteClick = useCallback(
+    (key: string) => {
+      // Regex to identify if the key is a file path or a file id.
+      if (/^[0-9]*$/.test(key)) {
+        if (key.length == 8) {
+          deleteFile(key);
+        } else {
+          deleteDirectory(key);
+        }
+      } else {
+        deleteDirectory(key);
+      }
+    },
+    [deleteFile, deleteDirectory],
+  );
+
+  return {
+    createFile,
+    handleRenameFileClick,
+    handleDeleteClick,
+  };
+};

package/src/client/useOpenDirectories.ts

@@ -17,6 +17,7 @@ import { useState, useCallback } from 'react';
 
 // Inspired by
 // https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/useOpenDirectories.js
+// TODO move this into reducer
 export const useOpenDirectories = () => {
   // The set of open directories by path/
   const [openDirectories, setOpenDirectories] = useState<
@@ -30,14 +31,31 @@ export const useOpenDirectories = () => {
       [openDirectories],
     );
 
-  // Toggle whether a directory is open.
+  /**
+   * Toggles the state of a directory (open/close).
+   * If the directory is currently open, it will close it.
+   * If it's closed, it will open it.
+   */
   const toggleDirectory = useCallback(
-    (path) => {
-      const newOpenDirectories = new Set(openDirectories);
-      newOpenDirectories[
-        isDirectoryOpen(path) ? 'delete' : 'add'
-      ](path);
-      setOpenDirectories(newOpenDirectories);
+    (directoryPath: string) => {
+      // Create a copy of the currently open directories
+      const updatedOpenDirectories = new Set(
+        openDirectories,
+      );
+
+      // Check if the directory is currently open
+      const directoryIsOpen =
+        isDirectoryOpen(directoryPath);
+
+      // Toggle the directory's state
+      if (directoryIsOpen) {
+        updatedOpenDirectories.delete(directoryPath);
+      } else {
+        updatedOpenDirectories.add(directoryPath);
+      }
+
+      // Update the state with the modified set of open directories
+      setOpenDirectories(updatedOpenDirectories);
     },
     [openDirectories, isDirectoryOpen],
   );

package/src/client/useSubmitOperation.ts

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { ShareDBDoc, VZCodeContent } from '../types';
+import { diff } from './diff';
+
+// A helper function to submit diff-based operations to ShareDB
+export const useSubmitOperation = (
+  shareDBDoc: ShareDBDoc<VZCodeContent>,
+): ((
+  next: (content: VZCodeContent) => VZCodeContent,
+) => void) => {
+  const submitOperation: (
+    next: (content: VZCodeContent) => VZCodeContent,
+  ) => void = useCallback(
+    (next) => {
+      const content: VZCodeContent = shareDBDoc.data;
+      const op = diff(content, next(content));
+      if (op && shareDBDoc) {
+        shareDBDoc.submitOp(op);
+      }
+    },
+    [shareDBDoc],
+  );
+
+  return submitOperation;
+};

package/src/client/vzReducer.ts

@@ -0,0 +1,118 @@
+import { FileId } from '../types';
+import { ThemeLabel } from './themes';
+
+export type VZState = {
+  tabList: Array<FileId>;
+  activeFileId: FileId | null;
+  theme: ThemeLabel;
+  isSettingsOpen: boolean;
+};
+
+export type VZAction =
+  | { type: 'set_active_file_id'; activeFileId: FileId }
+  | { type: 'open_tab'; fileId: FileId }
+  | { type: 'close_tab'; fileIdToRemove: FileId }
+  | { type: 'close_tabs'; idsToDelete: Array<FileId> }
+  | { type: 'set_theme'; themeLabel: ThemeLabel }
+  | { type: 'set_is_settings_open'; value: boolean };
+
+export const vzReducer = (
+  state: VZState,
+  action: VZAction,
+) => {
+  switch (action.type) {
+    case 'set_active_file_id': {
+      return {
+        ...state,
+        activeFileId: action.activeFileId,
+      };
+    }
+    case 'open_tab': {
+      if (!state.tabList.includes(action.fileId)) {
+        return {
+          ...state,
+          activeFileId: action.fileId,
+          tabList: [...state.tabList, action.fileId],
+        };
+      } else {
+        return {
+          ...state,
+          activeFileId: action.fileId,
+        };
+      }
+    }
+    case 'close_tab': {
+      const i = state.tabList.findIndex(
+        (fileId: FileId) =>
+          fileId === action.fileIdToRemove,
+      );
+      if (i != -1) {
+        const newTabList = [
+          ...state.tabList.slice(0, i),
+          ...state.tabList.slice(i + 1),
+        ];
+        if (state.activeFileId === action.fileIdToRemove) {
+          // set the new active file to the next tab over,
+          if (newTabList.length > 0) {
+            return {
+              ...state,
+              activeFileId:
+                i === 0 ? newTabList[i] : newTabList[i - 1],
+              tabList: newTabList,
+            };
+          } else {
+            // or clear out the active file
+            // if we've closed the last tab.
+            return {
+              ...state,
+              activeFileId: null,
+              tabList: newTabList,
+            };
+          }
+        }
+        return {
+          ...state,
+          tabList: newTabList,
+        };
+      }
+      return {
+        ...state,
+      };
+    }
+    case 'close_tabs': {
+      const newTabList = state.tabList.filter(
+        (fileId: FileId) =>
+          !action.idsToDelete.includes(fileId),
+      );
+
+      let newActiveFileId: FileId | null =
+        state.activeFileId;
+
+      if (action.idsToDelete.includes(newActiveFileId)) {
+        const index =
+          state.tabList.indexOf(newActiveFileId);
+        newActiveFileId = newTabList[index]
+          ? newTabList[index]
+          : newTabList[index - 1] || null;
+      }
+
+      return {
+        ...state,
+        tabList: newTabList,
+        activeFileId: newActiveFileId,
+      };
+    }
+    case 'set_theme': {
+      return {
+        ...state,
+        theme: action.themeLabel,
+      };
+    }
+    case 'set_is_settings_open': {
+      return {
+        ...state,
+        isSettingsOpen: action.value,
+      };
+    }
+  }
+};

package/src/index.ts

@@ -0,0 +1,34 @@
+export type {
+  FileId,
+  Files,
+  File,
+  FileTree,
+  FileTreeFile,
+  ShareDBDoc,
+  VZCodeContent,
+} from './types';
+export type { EditorCache } from './client/useEditorCache';
+export type {
+  ThemeLabel,
+  ThemeOption,
+} from './client/themes';
+
+export { VZSidebar } from './client/VZSidebar';
+export { VZSettings } from './client/VZSettings';
+export { SplitPaneResizeContext } from './client/SplitPaneResizeContext';
+export { Resizer } from './client/Resizer';
+export { TabList } from './client/TabList';
+export { CodeEditor } from './client/CodeEditor';
+export { usePrettier } from './client/usePrettier';
+export { PrettierErrorOverlay } from './client/PrettierErrorOverlay';
+export { PresenceNotifications } from './client/PresenceNotifications';
+export { useFileCRUD } from './client/useFileCRUD';
+export { useSubmitOperation } from './client/useSubmitOperation';
+export { vzReducer } from './client/vzReducer';
+export { useActions } from './client/useActions';
+export { useOpenDirectories } from './client/useOpenDirectories';
+export {
+  defaultTheme,
+  useDynamicTheme,
+} from './client/themes';
+export { useEditorCache } from './client/useEditorCache';

package/src/server/index.js

@@ -22,8 +22,19 @@ const autoSaveDebounceTimeMS = 800;
 // when the user is interacting with the widgets in the editor.
 const throttleTimeMS = 100;
 
+// Helper function to get the port from command line arguments or use default.
+function getPortFromArgs(defaultPort = 3030) {
+  const portArg = process.argv.find((arg) =>
+    arg.startsWith('--port='),
+  );
+  if (portArg) {
+    return parseInt(portArg.split('=')[1], 10);
+  }
+  return defaultPort;
+}
+
 // Server port.
-const port = 3030;
+const port = getPortFromArgs();
 
 const initialDocument = computeInitialDocument({
   // Use the current working directory to look for files.
@@ -109,7 +120,7 @@ const save = () => {
 
       // Handle renaming files.
       if (previous.name !== current.name) {
-        fs.renamesync(previous.name, current.name);
+        fs.renameSync(previous.name, current.name);
       }
     }
 

package/dist/assets/index-cf19de3b.css

@@ -1 +0,0 @@
-.vz-code-editor{flex:1;display:flex;font-family:var(--vzcode-font-family);overflow-x:auto}.vz-code-editor .cm-editor{flex:1}.vz-sidebar{height:100%;background:rgb(54,65,89);display:flex;flex-direction:column;justify-content:space-between}.vz-sidebar .full-box{padding:7px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.vz-sidebar .files{overflow:auto}.vz-sidebar .file-or-directory{display:flex;flex-direction:row;align-items:center;justify-content:space-between;cursor:pointer;margin:0 10px;color:#dbdde1;border-radius:5px}.vz-sidebar .link-name{margin-top:30px;margin-left:10px;color:#9aa0ac;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 .file-or-directory:hover,.vz-sidebar .settings:hover{background-color:#4a5469}.vz-sidebar .name{display:flex;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.vz-sidebar .indentation{margin-left:20px}.vz-sidebar .arrow-wrapper{margin-right:4px}.vz-sidebar .settings{height:30px;color:#dbdde1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:14px 0;margin:10px;border-radius:5px}.vz-tab-list{display:flex;background-color:#252526;overflow-x:auto}.vz-tab-list .tab{background:rgb(45,45,45);color:#fff;font-family:var(--vzcode-font-family);align-items:center;display:flex;padding-top:2px;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;white-space:nowrap}.vz-tab-list .tab .tab-close{margin-left:5px}.vz-tab-list .tab .tab-close:hover{border-radius:30%;background-color:#252526}.vz-tab-list .tab.active{background-color:#292c34}.vz-resizer{position:absolute;top:0;left:0;bottom:0}.vz-resizer:hover{cursor:col-resize}.vz-resizer .vz-resizer-thumb{position:absolute;top:0;bottom:0;transition:background-color .15s .25s}.vz-resizer:hover .vz-resizer-thumb{background-color:#0078d4}.vz-notification{position:fixed;display:flex;flex-direction:column;gap:10px;bottom:20px;right:20px;color:#9aa0ac;padding:15px}.vz-notification .vz-notification-item{background-color:#364159;padding:5px;border-radius:5px}:root{--vzcode-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;--vz-bg-color: rgb( 41, 44, 52 )}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--app-bg-color)}::-webkit-scrollbar-thumb{background:rgb(37,37,38)}::-webkit-scrollbar-thumb:hover{background:#555}html,body,#root,.app{height:100%}.app{background-color:var(--vz-bg-color);font-family:Poppins,sans-serif;display:flex;position:relative}.app .left,.app .right{display:flex;position:relative}.app .right{flex:1;flex-direction:column;min-width:0}.prettier-error-overlay{color:#ff3535;background-color:#0009;position:absolute;bottom:0;left:0;right:0;pointer-events:none}