npm - vzcode - Versions diffs - 0.26.0 → 0.27.0 - Mend

vzcode 0.26.0 → 0.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/dist/assets/index-5f9f376e.css +1 -0
package/dist/assets/index-70b6d947.js +111 -0
package/dist/index.html +2 -2
package/package.json +4 -4
package/src/client/App.tsx +86 -43
package/src/client/CodeEditor/getOrCreateEditor.ts +6 -1
package/src/client/CodeEditor/index.tsx +60 -12
package/src/client/CodeEditor/json1PresenceBroadcast.ts +6 -2
package/src/client/CodeEditor/json1PresenceDisplay.ts +0 -45
package/src/client/CodeEditor/style.scss +5 -1
package/src/client/CodeErrorOverlay/index.tsx +27 -0
package/src/client/CodeErrorOverlay/style.scss +30 -0
package/src/client/PresenceNotifications/PresenceNotifications.test.ts +134 -0
package/src/client/PresenceNotifications/index.tsx +118 -103
package/src/client/SplitPaneResizeContext.tsx +12 -7
package/src/client/TabList/Tab.tsx +20 -6
package/src/client/TabList/index.tsx +18 -8
package/src/client/TabList/style.scss +5 -0
package/src/client/VZSettings.tsx +33 -20
package/src/client/VZSidebar/{ConfirmationBox.tsx → DeleteConfirmationModal.tsx} +17 -14
package/src/client/VZSidebar/DirectoryListing.tsx +27 -26
package/src/client/VZSidebar/FileListing.tsx +16 -19
package/src/client/VZSidebar/Item.tsx +83 -37
package/src/client/VZSidebar/Listing.tsx +17 -14
package/src/client/VZSidebar/index.tsx +43 -24
package/src/client/style.scss +3 -0
package/src/client/useActions.ts +25 -6
package/src/client/useEditorCache.ts +2 -1
package/src/client/useFileCRUD.ts +29 -27
package/src/client/usernameLocalStorage.ts +43 -0
package/src/client/vzReducer/closeTabReducer.test.ts +177 -0
package/src/client/vzReducer/closeTabsReducer.ts +68 -0
package/src/client/vzReducer/createInitialState.ts +19 -0
package/src/client/vzReducer/editorNoLongerWantsFocusReducer.ts +9 -0
package/src/client/vzReducer/index.ts +107 -0
package/src/client/vzReducer/openTabReducer.test.ts +110 -0
package/src/client/vzReducer/openTabReducer.ts +57 -0
package/src/client/vzReducer/setActiveFileIdReducer.ts +9 -0
package/src/client/vzReducer/setIsSettingsOpenReducer.ts +9 -0
package/src/client/vzReducer/setThemeReducer.ts +9 -0
package/src/client/vzReducer/setUsernameReducer.ts +9 -0
package/src/index.ts +9 -3
package/src/types.ts +12 -5
package/dist/assets/index-284b7339.js +0 -111
package/dist/assets/index-e160f758.css +0 -1
package/src/client/PrettierErrorOverlay/index.tsx +0 -9
package/src/client/PrettierErrorOverlay/style.scss +0 -9
package/src/client/vzReducer.ts +0 -118

package/dist/index.html CHANGED Viewed

@@ -24,8 +24,8 @@
       href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-284b7339.js"></script>
-    <link rel="stylesheet" href="/assets/index-e160f758.css">
+    <script type="module" crossorigin src="/assets/index-70b6d947.js"></script>
+    <link rel="stylesheet" href="/assets/index-5f9f376e.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -51,7 +51,7 @@
     "@codemirror/lang-markdown": "^6.2.2",
     "@codemirror/state": "^6.3.1",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.21.3",
+    "@codemirror/view": "^6.21.4",
     "@lezer/highlight": "^1.1.6",
     "@replit/codemirror-interact": "^6.3.0",
     "@teamwork/websocket-json-stream": "^2.0.0",
@@ -83,11 +83,11 @@
     "ws": "^8.14.2"
   },
   "devDependencies": {
-    "@types/react": "^18.2.31",
+    "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
     "@vitejs/plugin-react": "^4.1.0",
     "prettier": "^3.0.3",
-    "sass": "^1.69.4",
+    "sass": "^1.69.5",
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
     "vitest": "^0.34.6"

package/src/client/App.tsx CHANGED Viewed

@@ -1,33 +1,39 @@
-import {
-  useState,
-  useEffect,
-  useCallback,
-  useRef,
-  useReducer,
-} from 'react';
+import { useState, useEffect, useReducer } from 'react';
 import ShareDBClient from 'sharedb-client-browser/dist/sharedb-client-umd.cjs';
 import { json1Presence } from '../ot';
 import { randomId } from '../randomId';
 import { CodeEditor } from './CodeEditor';
 import { VZSettings } from './VZSettings';
 import { VZSidebar } from './VZSidebar';
-import { Files, ShareDBDoc, VZCodeContent } from '../types';
+import {
+  Files,
+  ShareDBDoc,
+  Username,
+  VZCodeContent,
+} from '../types';
 import { TabList } from './TabList';
 import { useOpenDirectories } from './useOpenDirectories';
 import { defaultTheme, useDynamicTheme } from './themes';
-import { useEditorCache } from './useEditorCache';
+import {
+  EditorCache,
+  useEditorCache,
+} from './useEditorCache';
 import { usePrettier } from './usePrettier';
 // @ts-ignore
 import PrettierWorker from './usePrettier/worker?worker';
 import { SplitPaneResizeProvider } from './SplitPaneResizeContext';
 import { Resizer } from './Resizer';
 import { PresenceNotifications } from './PresenceNotifications';
-import { PrettierErrorOverlay } from './PrettierErrorOverlay';
-import { vzReducer } from './vzReducer';
+import { CodeErrorOverlay } from './CodeErrorOverlay';
+import { vzReducer, createInitialState } from './vzReducer';
 import { useActions } from './useActions';
 import { useFileCRUD } from './useFileCRUD';
-import './style.scss';
 import { useSubmitOperation } from './useSubmitOperation';
+import {
+  useInitialUsername,
+  usePersistUsername,
+} from './usernameLocalStorage';
+import './style.scss';
 // Instantiate the Prettier worker.
 const prettierWorker = new PrettierWorker();
@@ -53,17 +59,6 @@ function App() {
   const [shareDBDoc, setShareDBDoc] =
     useState<ShareDBDoc<VZCodeContent> | null>(null);
-  const submitOperation: (
-    next: (content: VZCodeContent) => VZCodeContent,
-  ) => void = useSubmitOperation(shareDBDoc);
-  // Auto-run Pretter after local changes.
-  const { prettierError } = usePrettier(
-    shareDBDoc,
-    submitOperation,
-    prettierWorker,
-  );
   // Local ShareDB presence, for broadcasting our cursor position
   // so other clients can see it.
   // See https://share.github.io/sharedb/api/local-presence
@@ -127,7 +122,14 @@ function App() {
       });
       // Set up our local presence for broadcasting this client's presence.
-      setLocalPresence(docPresence.create(randomId()));
+      const generateTimestampedId = () => {
+        const timestamp = Date.now().toString(36);
+        const randomPart = randomId();
+        return `${timestamp}-${randomPart}`;
+      };
+      setLocalPresence(
+        docPresence.create(generateTimestampedId()),
+      );
       // Store docPresence so child components can listen for changes.
       setDocPresence(docPresence);
@@ -141,17 +143,40 @@ function App() {
     };
   }, []);
+  // Get the initial username from localStorage.
+  const initialUsername: Username = useInitialUsername();
+  const submitOperation: (
+    next: (content: VZCodeContent) => VZCodeContent,
+  ) => void = useSubmitOperation(shareDBDoc);
+  // Auto-run Pretter after local changes.
+  const {
+    prettierError,
+  }: {
+    prettierError: string | null;
+  } = usePrettier(
+    shareDBDoc,
+    submitOperation,
+    prettierWorker,
+  );
   // https://react.dev/reference/react/useReducer
-  const [state, dispatch] = useReducer(vzReducer, {
-    tabList: [],
-    activeFileId: null,
-    theme: defaultTheme,
-    isSettingsOpen: false,
-  });
+  const [state, dispatch] = useReducer(
+    vzReducer,
+    { defaultTheme, initialUsername },
+    createInitialState,
+  );
   // Unpack state.
-  const { tabList, activeFileId, theme, isSettingsOpen } =
-    state;
+  const {
+    tabList,
+    activeFileId,
+    theme,
+    isSettingsOpen,
+    editorWantsFocus,
+    username,
+  } = state;
   // Functions for dispatching actions to the reducer.
   const {
@@ -161,6 +186,8 @@ function App() {
     setTheme,
     setIsSettingsOpen,
     closeSettings,
+    editorNoLongerWantsFocus,
+    setUsername,
   } = useActions(dispatch);
   // The set of open directories.
@@ -168,8 +195,10 @@ function App() {
   const { isDirectoryOpen, toggleDirectory } =
     useOpenDirectories();
+  usePersistUsername(username);
   // Cache of CodeMirror editors by file id.
-  const editorCache = useEditorCache();
+  const editorCache: EditorCache = useEditorCache();
   // Handle dynamic theme changes.
   useDynamicTheme(editorCache, theme);
@@ -177,9 +206,14 @@ function App() {
   // Handle file CRUD operations.
   const {
     createFile,
-    handleRenameFileClick,
-    handleDeleteClick,
-  } = useFileCRUD({ submitOperation, closeTabs });
+    renameFile,
+    deleteFile,
+    deleteDirectory,
+  } = useFileCRUD({
+    submitOperation,
+    closeTabs,
+    openTab,
+  });
   // Isolate the files object from the document.
   const files: Files | null = content
@@ -191,11 +225,12 @@ function App() {
       <div className="app">
         <div className="left">
           <VZSidebar
-            createFile={createFile}
             files={files}
-            handleRenameFileClick={handleRenameFileClick}
-            handleDeleteFileClick={handleDeleteClick}
-            handleFileClick={openTab}
+            createFile={createFile}
+            renameFile={renameFile}
+            deleteFile={deleteFile}
+            deleteDirectory={deleteDirectory}
+            openTab={openTab}
             setIsSettingsOpen={setIsSettingsOpen}
             isDirectoryOpen={isDirectoryOpen}
             toggleDirectory={toggleDirectory}
@@ -206,6 +241,8 @@ function App() {
             onClose={closeSettings}
             theme={theme}
             setTheme={setTheme}
+            username={username}
+            setUsername={setUsername}
           />
         </div>
         <div className="right">
@@ -214,7 +251,9 @@ function App() {
             tabList={tabList}
             activeFileId={activeFileId}
             setActiveFileId={setActiveFileId}
+            openTab={openTab}
             closeTabs={closeTabs}
+            createFile={createFile}
           />
           {content && activeFileId ? (
             <CodeEditor
@@ -225,13 +264,17 @@ function App() {
               activeFileId={activeFileId}
               theme={theme}
               editorCache={editorCache}
+              editorWantsFocus={editorWantsFocus}
+              editorNoLongerWantsFocus={
+                editorNoLongerWantsFocus
+              }
+              username={username}
             />
           ) : null}
-          <PrettierErrorOverlay
-            prettierError={prettierError}
-          />
+          <CodeErrorOverlay errorMessage={prettierError} />
           <PresenceNotifications
             docPresence={docPresence}
+            localPresence={localPresence}
           />
         </div>
         <Resizer />

package/src/client/CodeEditor/getOrCreateEditor.ts CHANGED Viewed

@@ -12,6 +12,7 @@ import { json1Presence, textUnicode } from '../../ot';
 import {
   FileId,
   ShareDBDoc,
+  Username,
   VZCodeContent,
 } from '../../types';
 import { json1PresenceBroadcast } from './json1PresenceBroadcast';
@@ -64,6 +65,7 @@ export const getOrCreateEditor = ({
   theme,
   onInteract,
   editorCache,
+  usernameRef,
 }: {
   fileId: FileId;
@@ -82,6 +84,7 @@ export const getOrCreateEditor = ({
   theme: ThemeLabel;
   onInteract?: () => void;
   editorCache: EditorCache;
+  usernameRef: React.MutableRefObject<Username>;
 }): EditorCacheValue => {
   // Cache hit
   if (editorCache.has(fileId)) {
@@ -118,13 +121,15 @@ export const getOrCreateEditor = ({
   );
   // Deals with broadcasting changes in cursor location and selection.
-  if (localPresence)
+  if (localPresence) {
     extensions.push(
       json1PresenceBroadcast({
         path: textPath,
         localPresence,
+        usernameRef,
       }),
     );
+  }
   // Deals with receiving the broadcas from other clients and displaying them.
   if (docPresence)

package/src/client/CodeEditor/index.tsx CHANGED Viewed

@@ -2,10 +2,12 @@ import {
   useRef,
   useLayoutEffect,
   useCallback,
+  useMemo,
 } from 'react';
 import {
   FileId,
   ShareDBDoc,
+  Username,
   VZCodeContent,
 } from '../../types';
 import { ThemeLabel, defaultTheme } from '../themes';
@@ -25,6 +27,9 @@ export const CodeEditor = ({
   theme = defaultTheme,
   filesPath = ['files'],
   editorCache,
+  editorWantsFocus,
+  editorNoLongerWantsFocus,
+  username,
 }: {
   activeFileId: FileId;
   shareDBDoc: ShareDBDoc<VZCodeContent> | null;
@@ -39,6 +44,13 @@ export const CodeEditor = ({
   // Defaults to `files` if not provided.
   filesPath?: string[];
   editorCache: EditorCache;
+  // Whether the editor should be focused.
+  editorWantsFocus: boolean;
+  // Signals that the editor no longer wants focus.
+  editorNoLongerWantsFocus: () => void;
+  username: Username;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
@@ -67,17 +79,15 @@ export const CodeEditor = ({
     }, 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;
-    if (!shareDBDoc) return;
+  // Track username on a ref, so that we can use it in the
+  // presence object's `username` property.
+  const usernameRef = useRef<Username>(username);
+  usernameRef.current = username;
-    // Get the editor corresponding to the active file.
-    // Looks in `editorCache` first, and if not found, creates a new editor.
-    const editorCacheValue: EditorCacheValue =
+  // Get the editor corresponding to the active file.
+  // Looks in `editorCache` first, and if not found, creates a new editor.
+  const editorCacheValue: EditorCacheValue = useMemo(
+    () =>
       getOrCreateEditor({
         fileId: activeFileId,
         shareDBDoc,
@@ -87,7 +97,28 @@ export const CodeEditor = ({
         theme,
         onInteract,
         editorCache,
-      });
+        usernameRef,
+      }),
+    [
+      activeFileId,
+      shareDBDoc,
+      filesPath,
+      localPresence,
+      docPresence,
+      theme,
+      onInteract,
+      editorCache,
+      usernameRef,
+    ],
+  );
+  // 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;
+    if (!shareDBDoc) return;
     // Add the editor to the DOM.
     ref.current.appendChild(editorCacheValue.editor.dom);
@@ -97,7 +128,24 @@ export const CodeEditor = ({
       // This happens every time `activeFileId` changes.
       ref.current.removeChild(editorCacheValue.editor.dom);
     };
-  }, [shareDBDoc, activeFileId, onInteract]);
+  }, [shareDBDoc, editorCacheValue]);
+  // useEffect(() => {
+  //   if (editorWantsFocus) {
+  //     editorCacheValue.editor.focus();
+  //   }
+  // Focus the editor
+  useLayoutEffect(() => {
+    if (editorWantsFocus) {
+      editorCacheValue.editor.focus();
+      editorNoLongerWantsFocus();
+    }
+  }, [
+    editorWantsFocus,
+    editorCacheValue,
+    editorNoLongerWantsFocus,
+  ]);
   return <div className="vz-code-editor" ref={ref}></div>;
 };

package/src/client/CodeEditor/json1PresenceBroadcast.ts CHANGED Viewed

@@ -5,11 +5,13 @@ import { EditorView } from 'codemirror';
 export const json1PresenceBroadcast = ({
   path,
   localPresence,
+  usernameRef,
 }) =>
   // See https://discuss.codemirror.net/t/codemirror-6-proper-way-to-listen-for-changes/2395/10
   EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
     // If this update modified the cursor / selection,
     // we broadcast the selection update via ShareDB presence.
     if (viewUpdate.selectionSet) {
       // Isolate the single selection to use for presence.
       // Unfortunately JSON1 with presence does not yet
@@ -24,8 +26,10 @@ export const json1PresenceBroadcast = ({
         start: [...path, from],
         end: [...path, to],
-        // TODO fill this in with the user's actual username.
-        username: 'anonymous',
+        // We use a ref here so that the presence always broadcasts
+        // the latest username, in the case that it has been changed
+        // in the Settings mid-session.
+        username: usernameRef.current,
       };
       // Broadcast presence to remote clients!

package/src/client/CodeEditor/json1PresenceDisplay.ts CHANGED Viewed

@@ -37,10 +37,6 @@ export const json1PresenceDisplay = ({
         // Receive remote presence changes.
         docPresence.on('receive', (id, presence) => {
           // If presence === null, the user has disconnected / exited
-          // notification(presence);
-          // console.log('docPresence in presenceDisplay:',docPresence);
-          // console.log('presence in presenceDisplay:', presence);
           // We also check if the presence is for the current file or not.
           if (presence && pathMatches(path, presence)) {
             presenceState[id] = presence;
@@ -107,47 +103,6 @@ export const json1PresenceDisplay = ({
   presenceTheme,
 ];
-// const notification = (presence) => {
-//   const notif = document.createElement('div');
-//   notif.className = 'notification-presence';
-//   if (presence === null){
-//     notif.textContent = 'User asdfgasdfgasdfg left the collaboration session.';
-//     notif.style.display = 'block';
-//   }
-//   // The following causes the popup to show every time the remote cursor moves
-//   // to a different location on the file and not when the user first joins
-//   // else {
-//   //   notif.textContent = presence + 'joined the collaboration session.';
-//   //   notif.style.display = 'block';
-//   // }
-//   document.body.appendChild(notif);
-//   const notifStyle = document.createElement('style');
-//   notifStyle.innerText = `
-//     .notification-presence {
-//       position: fixed;
-//       display: none;
-//       bottom: 20px;
-//       right: 20px;
-//       max-width: 300px;
-//       overflow-x: hidden;
-//       white-space: nowrap;
-//       background-color: rgb(54, 65, 89);
-//       color: rgb(154, 160, 172);
-//       padding: 15px;
-//     }
-//     .notification-presence:hover {
-//       overflow-x: auto;
-//     }`;
-//   document.head.appendChild(notifStyle);
-//   setTimeout(() => {
-//     notif.style.display = 'none';
-//   }, 10000);
-//   return notif;
-// };
 const presenceAnnotation = Annotation.define();
 // Checks that the path of this file

package/src/client/CodeEditor/style.scss CHANGED Viewed

@@ -4,8 +4,12 @@
   font-family: var(--vzcode-font-family);
   overflow-x: auto;
-  /* TODO QA this */
   .cm-editor {
     flex: 1;
   }
+  .cm-scroller {
+    font-family: var(--vzcode-font-family);
+    font-size: var(--vzcode-font-size);
+  }
 }

package/src/client/CodeErrorOverlay/index.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+import './style.scss';
+// Feature flag for the button that dismisses the error.
+const enableErrorDismiss = false;
+export const CodeErrorOverlay = ({
+  errorMessage,
+}: {
+  errorMessage: string | null;
+}) => {
+  const handleCloseClick = useCallback(() => {
+    console.log('TODO dismiss the error');
+  }, []);
+  return errorMessage !== null ? (
+    <pre className="vz-code-error-overlay">
+      {errorMessage}
+      {enableErrorDismiss ? (
+        <div
+          className={'bx bx-x error-dismiss-button'}
+          onClick={handleCloseClick}
+        ></div>
+      ) : null}
+    </pre>
+  ) : null;
+};

package/src/client/CodeErrorOverlay/style.scss ADDED Viewed

@@ -0,0 +1,30 @@
+.vz-code-error-overlay {
+  color: rgb(255, 35, 35);
+  font-family: var(--vzcode-font-family);
+  font-size: var(--vzcode-font-size);
+  background-color: rgba(0, 0, 0, 0.6);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  // pointer-events: none;
+  margin: 0;
+  padding: 8px;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  // TODO unify with styles in tab close button
+  .error-dismiss-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 5px;
+    cursor: pointer;
+    color: white;
+  }
+  .error-dismiss-button:hover {
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+}