vzcode 0.25.0 → 0.26.0

package/src/client/App.tsx

@@ -9,22 +9,12 @@ import ShareDBClient from 'sharedb-client-browser/dist/sharedb-client-umd.cjs';
 import { json1Presence } from '../ot';
 import { randomId } from '../randomId';
 import { CodeEditor } from './CodeEditor';
-import { diff } from './diff';
-import { Settings } from './Settings';
-import { Sidebar } from './Sidebar';
-import {
-  FileId,
-  Files,
-  ShareDBDoc,
-  VZCodeContent,
-} from '../types';
+import { VZSettings } from './VZSettings';
+import { VZSidebar } from './VZSidebar';
+import { Files, ShareDBDoc, VZCodeContent } from '../types';
 import { TabList } from './TabList';
 import { useOpenDirectories } from './useOpenDirectories';
-import {
-  ThemeLabel,
-  defaultTheme,
-  useDynamicTheme,
-} from './themes';
+import { defaultTheme, useDynamicTheme } from './themes';
 import { useEditorCache } from './useEditorCache';
 import { usePrettier } from './usePrettier';
 // @ts-ignore
@@ -32,9 +22,12 @@ import PrettierWorker from './usePrettier/worker?worker';
 import { SplitPaneResizeProvider } from './SplitPaneResizeContext';
 import { Resizer } from './Resizer';
 import { PresenceNotifications } from './PresenceNotifications';
-import { reducer } from './reducer';
-import './style.scss';
 import { PrettierErrorOverlay } from './PrettierErrorOverlay';
+import { vzReducer } from './vzReducer';
+import { useActions } from './useActions';
+import { useFileCRUD } from './useFileCRUD';
+import './style.scss';
+import { useSubmitOperation } from './useSubmitOperation';
 
 // Instantiate the Prettier worker.
 const prettierWorker = new PrettierWorker();
@@ -60,20 +53,9 @@ function App() {
   const [shareDBDoc, setShareDBDoc] =
     useState<ShareDBDoc<VZCodeContent> | null>(null);
 
-  // A helper function to submit operations to the ShareDB document
-
   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],
-  );
+  ) => void = useSubmitOperation(shareDBDoc);
 
   // Auto-run Pretter after local changes.
   const { prettierError } = usePrettier(
@@ -82,8 +64,6 @@ function App() {
     prettierWorker,
   );
 
-  console.log('prettierError', prettierError);
-
   // Local ShareDB presence, for broadcasting our cursor position
   // so other clients can see it.
   // See https://share.github.io/sharedb/api/local-presence
@@ -125,6 +105,12 @@ function App() {
       // This decouples rendering logic from ShareDB.
       // This callback gets called on each change.
       shareDBDoc.on('op', () => {
+        // TODO consider excluding file contents from this,
+        // because currently we are re-rendering the entire
+        // document on each file change (each keystroke while editing).
+        // This is not required, because no part of the app outside
+        // of the CodeMirror integration uses those file contents.
+        // The Sidebar only needs to know file names, not contents.
         setContent(shareDBDoc.data);
       });
 
@@ -156,91 +142,31 @@ function App() {
   }, []);
 
   // https://react.dev/reference/react/useReducer
-  const [state, dispatch] = useReducer(reducer, {
+  const [state, dispatch] = useReducer(vzReducer, {
     tabList: [],
     activeFileId: null,
     theme: defaultTheme,
     isSettingsOpen: false,
   });
 
-  //Reducer states
-  const tabList = state.tabList;
-  const activeFileId = state.activeFileId;
-  const theme = state.theme;
-  const isSettingsOpen = state.isSettingsOpen;
-  // TODO phase this out as we complete the refactoring
-  // It's here now for backwards compatibility
-
-  const setTabList = useCallback(
-    (tabList) => {
-      dispatch({
-        type: 'set_tab_list',
-        tabList,
-      });
-    },
-    [dispatch],
-  );
-
-  const setActiveFileId = useCallback(
-    (activeFileId) => {
-      dispatch({
-        type: 'set_active_fileId',
-        activeFileId,
-      });
-    },
-    [dispatch],
-  );
-
-  const openTab = useCallback(
-    (fileId: FileId) => {
-      dispatch({
-        type: 'open_tab',
-        fileId,
-      });
-    },
-    [dispatch],
-  );
-
-  const closeTab = useCallback(
-    (fileIdToRemove: FileId) => {
-      dispatch({
-        type: 'close_tab',
-        fileIdToRemove,
-      });
-    },
-    [dispatch],
-  );
-
-  const multiCloseTab = useCallback(
-    (idsToDelete: Array<FileId>) => {
-      dispatch({
-        type: 'multi_close_tab',
-        idsToDelete,
-      });
-    },
-    [dispatch],
-  );
+  // Unpack state.
+  const { tabList, activeFileId, theme, isSettingsOpen } =
+    state;
 
-  const setTheme = useCallback(
-    (themeLabel: ThemeLabel) => {
-      dispatch({
-        type: 'set_Theme',
-        themeLabel: themeLabel,
-      });
-    },
-    [dispatch],
-  );
+  // Functions for dispatching actions to the reducer.
+  const {
+    setActiveFileId,
+    openTab,
+    closeTabs,
+    setTheme,
+    setIsSettingsOpen,
+    closeSettings,
+  } = useActions(dispatch);
 
-  // True to show the settings modal.
-  const setIsSettingsOpen = useCallback(
-    (value: boolean) => {
-      dispatch({
-        type: 'set_Is_Settings_Open',
-        value: value,
-      });
-    },
-    [dispatch],
-  );
+  // The set of open directories.
+  // TODO move this into reducer/useActions
+  const { isDirectoryOpen, toggleDirectory } =
+    useOpenDirectories();
 
   // Cache of CodeMirror editors by file id.
   const editorCache = useEditorCache();
@@ -248,119 +174,12 @@ function App() {
   // Handle dynamic theme changes.
   useDynamicTheme(editorCache, theme);
 
-  // The set of open directories.
-  const { isDirectoryOpen, toggleDirectory } =
-    useOpenDirectories();
-
-  // TODO move this logic to a hook called `useFileCRUD`
-  // Include
-  //  - `createFile`
-  //  - `handleRenameFileClick`
-  //  - `deleteFile`
-  //  - `handleDeleteFileClick`
-  const createFile = useCallback(() => {
-    const name = prompt('Enter new file name');
-    if (name) {
-      submitOperation((document) => ({
-        ...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],
-  );
-
-  const deleteFile = useCallback(
-    (fileId: FileId) => {
-      submitOperation((document) => {
-        const updatedFiles = { ...document.files };
-        delete updatedFiles[fileId];
-        return { ...document, files: updatedFiles };
-      });
-      closeTab(fileId);
-    },
-    [submitOperation, closeTab],
-  );
-
-  const deleteDirectory = useCallback(
-    (path: FileId) => {
-      let tabsToDelete: Array<FileId> = [];
-      submitOperation((document) => {
-        const updatedFiles = { ...document.files };
-        for (const key in updatedFiles) {
-          if (updatedFiles[key].name.includes(path)) {
-            tabsToDelete.push(key);
-            delete updatedFiles[key];
-          }
-        }
-        return { ...document, files: updatedFiles };
-      });
-      multiCloseTab(tabsToDelete);
-    },
-    [submitOperation, multiCloseTab],
-  );
-
-  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],
-  );
-
-  const handleSettingsClose = useCallback(() => {
-    setIsSettingsOpen(false);
-  }, []);
-
-  // Set `doc.data.isInteracting` to `true` when the user is interacting
-  // via interactive code widgets (e.g. Alt+drag), and `false` when they are not.
-  const interactTimeoutRef = useRef(null);
-  const handleInteract = useCallback(() => {
-    // Set `isInteracting: true` if not already set.
-    if (!interactTimeoutRef.current) {
-      submitOperation((document) => ({
-        ...document,
-        isInteracting: true,
-      }));
-    } else {
-      clearTimeout(interactTimeoutRef.current);
-    }
-
-    // Set `isInteracting: false` after a delay.
-    interactTimeoutRef.current = setTimeout(() => {
-      interactTimeoutRef.current = null;
-      submitOperation((document) => ({
-        ...document,
-        isInteracting: false,
-      }));
-    }, 800);
-  }, [submitOperation]);
+  // Handle file CRUD operations.
+  const {
+    createFile,
+    handleRenameFileClick,
+    handleDeleteClick,
+  } = useFileCRUD({ submitOperation, closeTabs });
 
   // Isolate the files object from the document.
   const files: Files | null = content
@@ -371,7 +190,7 @@ function App() {
     <SplitPaneResizeProvider>
       <div className="app">
         <div className="left">
-          <Sidebar
+          <VZSidebar
             createFile={createFile}
             files={files}
             handleRenameFileClick={handleRenameFileClick}
@@ -380,10 +199,11 @@ function App() {
             setIsSettingsOpen={setIsSettingsOpen}
             isDirectoryOpen={isDirectoryOpen}
             toggleDirectory={toggleDirectory}
+            activeFileId={activeFileId}
           />
-          <Settings
+          <VZSettings
             show={isSettingsOpen}
-            onClose={handleSettingsClose}
+            onClose={closeSettings}
             theme={theme}
             setTheme={setTheme}
           />
@@ -394,16 +214,16 @@ function App() {
             tabList={tabList}
             activeFileId={activeFileId}
             setActiveFileId={setActiveFileId}
-            closeTab={closeTab}
+            closeTabs={closeTabs}
           />
           {content && activeFileId ? (
             <CodeEditor
               shareDBDoc={shareDBDoc}
+              submitOperation={submitOperation}
               localPresence={localPresence}
               docPresence={docPresence}
               activeFileId={activeFileId}
               theme={theme}
-              onInteract={handleInteract}
               editorCache={editorCache}
             />
           ) : null}

package/src/client/CodeEditor/index.tsx

@@ -1,4 +1,8 @@
-import { useRef, useLayoutEffect, useContext } from 'react';
+import {
+  useRef,
+  useLayoutEffect,
+  useCallback,
+} from 'react';
 import {
   FileId,
   ShareDBDoc,
@@ -11,20 +15,22 @@ import {
 } from '../useEditorCache';
 import { getOrCreateEditor } from './getOrCreateEditor';
 import './style.scss';
-// import { usePrettier } from '../usePrettier';
 
 export const CodeEditor = ({
   activeFileId,
   shareDBDoc,
+  submitOperation,
   localPresence,
   docPresence,
   theme = defaultTheme,
   filesPath = ['files'],
-  onInteract,
   editorCache,
 }: {
   activeFileId: FileId;
   shareDBDoc: ShareDBDoc<VZCodeContent> | null;
+  submitOperation: (
+    next: (content: VZCodeContent) => VZCodeContent,
+  ) => void;
   localPresence?: any;
   docPresence?: any;
   theme?: ThemeLabel;
@@ -32,14 +38,38 @@ export const CodeEditor = ({
   // The path of the files object in the ShareDB document.
   // Defaults to `files` if not provided.
   filesPath?: string[];
-  onInteract?: () => void;
   editorCache: EditorCache;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
+
+  // Set `doc.data.isInteracting` to `true` when the user is interacting
+  // via interactive code widgets (e.g. Alt+drag), and `false` when they are not.
+  const interactTimeoutRef = useRef(null);
+
+  const onInteract = useCallback(() => {
+    // Set `isInteracting: true` if not already set.
+    if (!interactTimeoutRef.current) {
+      submitOperation((document) => ({
+        ...document,
+        isInteracting: true,
+      }));
+    } else {
+      clearTimeout(interactTimeoutRef.current);
+    }
+
+    // Set `isInteracting: false` after a delay.
+    interactTimeoutRef.current = setTimeout(() => {
+      interactTimeoutRef.current = null;
+      submitOperation((document) => ({
+        ...document,
+        isInteracting: false,
+      }));
+    }, 800);
+  }, [submitOperation]);
+
   // Every time the active file switches from one file to another,
   // the editor corresponding to the old file is removed from the DOM,
   // and the editor corresponding to the new file is added to the DOM.
-
   useLayoutEffect(() => {
     // Guard against cases where page is still loading.
     if (!ref.current) return;
@@ -67,7 +97,7 @@ export const CodeEditor = ({
       // This happens every time `activeFileId` changes.
       ref.current.removeChild(editorCacheValue.editor.dom);
     };
-  }, [shareDBDoc, activeFileId]);
+  }, [shareDBDoc, activeFileId, onInteract]);
 
   return <div className="vz-code-editor" ref={ref}></div>;
 };

package/src/client/CodeEditor/{json1PresenceBroadcast.js → json1PresenceBroadcast.ts}

@@ -1,5 +1,5 @@
+import { ViewUpdate } from '@codemirror/view';
 import { EditorView } from 'codemirror';
-import { username } from '../Settings.tsx';
 
 // Deals with broadcasting changes in cursor location and selection.
 export const json1PresenceBroadcast = ({
@@ -7,7 +7,7 @@ export const json1PresenceBroadcast = ({
   localPresence,
 }) =>
   // See https://discuss.codemirror.net/t/codemirror-6-proper-way-to-listen-for-changes/2395/10
-  EditorView.updateListener.of((viewUpdate) => {
+  EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
     // If this update modified the cursor / selection,
     // we broadcast the selection update via ShareDB presence.
     if (viewUpdate.selectionSet) {
@@ -23,7 +23,9 @@ export const json1PresenceBroadcast = ({
       const presence = {
         start: [...path, from],
         end: [...path, to],
-        username: username,
+
+        // TODO fill this in with the user's actual username.
+        username: 'anonymous',
       };
 
       // Broadcast presence to remote clients!

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

@@ -20,7 +20,12 @@ export const json1PresenceDisplay = ({
 }) => [
   ViewPlugin.fromClass(
     class {
-      constructor(view) {
+      // The decorations to display.
+      // This is a RangeSet of Decoration objects.
+      // See https://codemirror.net/6/docs/ref/#view.Decoration
+      decorations: RangeSet<Decoration>;
+
+      constructor(view: EditorView) {
         // Initialize decorations to empty array so CodeMirror doesn't crash.
         this.decorations = RangeSet.of([]);
 
@@ -161,12 +166,13 @@ const pathMatches = (path, presence) => {
 
 // Displays a single remote presence cursor.
 class PresenceWidget extends WidgetType {
-  constructor(id) {
+  id: string;
+  constructor(id: string) {
     super();
     this.id = id;
   }
 
-  eq(other) {
+  eq(other: PresenceWidget) {
     return other.id === this.id;
   }
 

package/src/client/PresenceNotifications/index.tsx

@@ -66,8 +66,6 @@ export const PresenceNotifications = ({
         // `false` means user has left the session.
         const join = update !== null;
 
-        console.log('join', join);
-
         // Figure out if we have ever seen this user before.
 
         // if (join && docPresence.remotePresences[presenceId] === undefined){

package/src/client/TabList/Tab.tsx

@@ -0,0 +1,56 @@
+import { useCallback, useMemo } from 'react';
+import { FileId } from '../../types';
+
+// Supports adding the file's containing folder to the tab name
+const fileNameSplit = (fileName: string) => {
+  const split = fileName.split('/');
+  if (split.length === 1) return split[split.length - 1];
+  return (
+    split[split.length - 2] + '/' + split[split.length - 1]
+  );
+};
+
+export const Tab = ({
+  fileId,
+  isActive,
+  setActiveFileId,
+  closeTabs,
+  fileName,
+}: {
+  fileId: FileId;
+  isActive: boolean;
+  setActiveFileId: (fileId: FileId) => void;
+  closeTabs: (fileIds: FileId[]) => void;
+  fileName: string;
+}) => {
+  const handleCloseClick = useCallback(
+    (event: React.MouseEvent) => {
+      // Stop propagation so that the outer listener doesn't fire.
+      event.stopPropagation();
+
+      closeTabs([fileId]);
+    },
+    [closeTabs, fileId],
+  );
+
+  const tabName = useMemo(
+    () => fileNameSplit(fileName),
+    [fileName],
+  );
+
+  return (
+    <div
+      className={isActive ? 'tab active' : 'tab'}
+      onClick={() => {
+        setActiveFileId(fileId);
+      }}
+    >
+      {tabName}
+      <div
+        // className={isActive ? 'bx bx-x tab-close' : ''}
+        className={'bx bx-x tab-close'}
+        onClick={handleCloseClick}
+      ></div>
+    </div>
+  );
+};

package/src/client/TabList/index.tsx

@@ -1,89 +1,37 @@
-import { useCallback, useMemo, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { FileId, Files } from '../../types';
+import { Tab } from './Tab';
 import './style.scss';
 
-// Supports adding the file's containing folder to the tab name
-const fileNameSplit = (fileName) => {
-  const split = fileName.split('/');
-  if (split.length === 1) return split[split.length - 1];
-  return (
-    split[split.length - 2] + '/' + split[split.length - 1]
-  );
-};
-
-const Tab = ({
-  fileId,
-  isActive,
-  setActiveFileId,
-  closeTab,
-  fileName,
-}: {
-  fileId: FileId;
-  isActive: boolean;
-  setActiveFileId: (fileId: FileId) => void;
-  closeTab: (fileId: FileId) => void;
-  fileName: string;
-}) => {
-  const handleCloseClick = useCallback(
-    (event: React.MouseEvent) => {
-      // Stop propagation so that the outer listener doesn't fire.
-      event.stopPropagation();
-
-      closeTab(fileId);
-    },
-    [closeTab, fileId],
-  );
-
-  const tabName = useMemo(
-    () => fileNameSplit(fileName),
-    [fileName],
-  );
-
-  return (
-    <div
-      className={isActive ? 'tab active' : 'tab'}
-      onClick={() => {
-        setActiveFileId(fileId);
-      }}
-    >
-      {tabName}
-      <div
-        className={isActive ? 'bx bx-x tab-close' : ''}
-        onClick={handleCloseClick}
-      ></div>
-    </div>
-  );
-};
-
 // Displays the list of tabs above the code editor.
 export const TabList = ({
   files,
   tabList,
   activeFileId,
   setActiveFileId,
-  closeTab,
+  closeTabs,
 }: {
   files: Files;
   tabList: FileId[];
   activeFileId: FileId;
   setActiveFileId: (fileId: FileId) => void;
-  closeTab: (fileId: FileId) => void;
+  closeTabs: (fileIds: FileId[]) => void;
 }) => {
-  //Create a function to perform the logic to delete the current tab
+  // Close the active tab on alt+w
   const handleKeyPress = useCallback(
     (event: { altKey: boolean; key: string }) => {
       if (event.altKey == true) {
         if (event.key == 'w') {
-          closeTab(activeFileId);
+          closeTabs([activeFileId]);
         }
       }
     },
-    [closeTab, activeFileId],
+    [closeTabs, activeFileId],
   );
+
+  // Add the global keydown event listener
   useEffect(() => {
-    // attach the event listener
     document.addEventListener('keydown', handleKeyPress);
-    // remove the event listener
     return () => {
       document.removeEventListener(
         'keydown',
@@ -91,6 +39,7 @@ export const TabList = ({
       );
     };
   }, [handleKeyPress]);
+
   return (
     <div className="vz-tab-list">
       {files &&
@@ -100,7 +49,7 @@ export const TabList = ({
             fileId={fileId}
             isActive={fileId === activeFileId}
             setActiveFileId={setActiveFileId}
-            closeTab={closeTab}
+            closeTabs={closeTabs}
             fileName={files[fileId].name}
           />
         ))}