npm - vzcode - Versions diffs - 1.10.0 → 1.12.0 - Mend

vzcode 1.10.0 → 1.12.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 (35) hide show

package/README.md +1 -1
package/dist/assets/{index-DXNuoOqQ.js → index-4cYZN5Uf.js} +57 -57
package/dist/assets/{index--bvX81xc.js → index-CvSVuMne.js} +57 -57
package/dist/assets/worker-CJWrLBN2.js +286 -0
package/dist/index.html +1 -1
package/package.json +13 -12
package/src/client/AIAssist/AIAssistCodeMirrorKeyMap.ts +5 -2
package/src/client/AIAssist/startAIAssist.ts +1 -1
package/src/client/CodeEditor/getOrCreateEditor.ts +4 -0
package/src/client/CodeEditor/index.tsx +2 -0
package/src/client/CodeEditor/json1PresenceDisplay.ts +128 -90
package/src/client/TabList/Tab.tsx +1 -2
package/src/client/TabList/index.tsx +1 -1
package/src/client/VZCodeContext.tsx +17 -14
package/src/client/VZKeyboardShortcutsDoc.tsx +2 -1
package/src/client/VZSidebar/Search.tsx +7 -2
package/src/client/VZSidebar/index.tsx +87 -24
package/src/client/tabsSearchParameters.ts +1 -2
package/src/client/useActions.ts +10 -1
package/src/client/useKeyboardShortcuts.ts +31 -1
package/src/client/useURLSync.ts +1 -2
package/src/client/vzReducer/closeTabReducer.test.ts +49 -33
package/src/client/vzReducer/closeTabsReducer.ts +51 -19
package/src/client/vzReducer/createInitialState.ts +8 -3
package/src/client/vzReducer/findPane.ts +19 -0
package/src/client/vzReducer/index.ts +17 -25
package/src/client/vzReducer/openTabReducer.test.ts +38 -21
package/src/client/vzReducer/openTabReducer.ts +26 -10
package/src/client/vzReducer/searchReducer.ts +21 -1
package/src/client/vzReducer/setActiveFileIdReducer.ts +23 -4
package/src/client/vzReducer/setActiveFileLeftRightReducer.ts +37 -8
package/src/client/vzReducer/updatePane.ts +44 -0
package/src/server/index.js +1 -0
package/src/types.ts +69 -70
package/dist/assets/worker-Cs0ZU3m1.js +0 -291

package/dist/index.html CHANGED Viewed

@@ -20,7 +20,7 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-DXNuoOqQ.js"></script>
+    <script type="module" crossorigin src="/assets/index-4cYZN5Uf.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-BKRpkJER.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -14,7 +14,7 @@
     "test-interactive": "cd test/sampleDirectories/kitchenSink && node ../../../src/server/index.js",
     "prettier": "prettier {*.*,**/*.*} --write",
     "tsc": "tsc --noEmit",
-    "dev": "set EDITOR_PORT=5173 && concurrently \"npm run test-interactive\" \"vite\"",
+    "dev": "cross-env EDITOR_PORT=5173 concurrently \"npm run test-interactive\" \"vite\"",
     "build": "vite build",
     "build-release": "vite build --mode release",
     "preview": "concurrently \"npm run test-interactive\" \"vite preview\"",
@@ -111,14 +111,14 @@
     "@codemirror/lang-markdown": "^6.2.5",
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.28.4",
+    "@codemirror/view": "^6.28.6",
     "@lezer/highlight": "^1.2.0",
-    "@replit/codemirror-indentation-markers": "^6.5.2",
+    "@replit/codemirror-indentation-markers": "^6.5.3",
     "@replit/codemirror-interact": "^6.3.1",
     "@replit/codemirror-lang-svelte": "^6.0.0",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@teamwork/websocket-json-stream": "^2.0.0",
-    "@typescript/vfs": "^1.5.3",
+    "@typescript/vfs": "^1.6.0",
     "@uiw/codemirror-theme-abcdef": "^4.23.0",
     "@uiw/codemirror-theme-dracula": "^4.23.0",
     "@uiw/codemirror-theme-eclipse": "^4.23.0",
@@ -140,12 +140,12 @@
     "json0-ot-diff": "^1.1.2",
     "ngrok": "^4.3.3",
     "open": "^10.1.0",
-    "openai": "^4.52.4",
-    "prettier-plugin-svelte": "^3.2.5",
+    "openai": "^4.52.7",
+    "prettier-plugin-svelte": "^3.2.6",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.24.1",
+    "react-router-dom": "^6.25.1",
     "sharedb": "^5.0.2",
     "sharedb-client-browser": "^5.0.2",
     "vizhub-ui": "^3.23.0",
@@ -156,11 +156,12 @@
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "concurrently": "^8.2.2",
-    "prettier": "^3.3.2",
-    "sass": "^1.77.6",
+    "cross-env": "^7.0.3",
+    "prettier": "^3.3.3",
+    "sass": "^1.77.8",
     "typescript": "^5.5.3",
-    "vite": "^5.3.3",
-    "vitest": "^2.0.1"
+    "vite": "^5.3.4",
+    "vitest": "^2.0.3"
   },
   "optionalDependencies": {
     "@rollup/rollup-darwin-arm64": "^4.18.1",

package/src/client/AIAssist/AIAssistCodeMirrorKeyMap.ts CHANGED Viewed

@@ -1,6 +1,9 @@
 import { EditorView, keymap } from '@codemirror/view';
-import { ShareDBDoc, VZCodeContent } from '../../types';
-import { TabState } from '../vzReducer';
+import {
+  ShareDBDoc,
+  TabState,
+  VZCodeContent,
+} from '../../types';
 export const AIAssistCodeMirrorKeyMap = ({
   shareDBDoc,

package/src/client/AIAssist/startAIAssist.ts CHANGED Viewed

@@ -3,9 +3,9 @@ import {
   File,
   FileId,
   ShareDBDoc,
+  TabState,
   VZCodeContent,
 } from '../../types';
-import { TabState } from '../vzReducer';
 import { RequestId } from '../generateRequestId';
 import { formatFile } from './formatFile';

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

@@ -19,6 +19,7 @@ import { json1Presence, textUnicode } from '../../ot';
 import {
   FileId,
   ShareDBDoc,
+  TabState,
   Username,
   VZCodeContent,
 } from '../../types';
@@ -115,6 +116,7 @@ export const getOrCreateEditor = ({
   customInteractRules,
   allowGlobals,
   enableAutoFollowRef,
+  openTab,
 }: {
   fileId: FileId;
@@ -148,6 +150,7 @@ export const getOrCreateEditor = ({
   // Ref to a boolean that determines whether to
   // enable auto-following the cursors of remote users.
   enableAutoFollowRef: React.MutableRefObject<boolean>;
+  openTab: (tabState: TabState) => void;
 }): EditorCacheValue => {
   // Cache hit
   if (editorCache.has(fileId)) {
@@ -202,6 +205,7 @@ export const getOrCreateEditor = ({
           path: textPath,
           docPresence,
           enableAutoFollowRef,
+          openTab,
         }),
       );
     }

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

@@ -38,6 +38,7 @@ export const CodeEditor = ({
     theme,
     codeEditorRef,
     enableAutoFollow,
+    openTab,
   } = useContext(VZCodeContext);
   // Set `doc.data.isInteracting` to `true` when the user is interacting
@@ -97,6 +98,7 @@ export const CodeEditor = ({
         customInteractRules,
         allowGlobals,
         enableAutoFollowRef,
+        openTab,
       }),
     [
       activeFileId,

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

@@ -6,7 +6,13 @@ import {
 } from '@codemirror/view';
 import { Annotation, RangeSet } from '@codemirror/state';
 import ColorHash from 'color-hash';
-import { Username } from '../../types';
+import {
+  FileId,
+  Presence,
+  PresenceId,
+  TabState,
+  Username,
+} from '../../types';
 const debug = false;
@@ -26,6 +32,12 @@ export const json1PresenceDisplay = ({
   path,
   docPresence,
   enableAutoFollowRef,
+  openTab,
+}: {
+  path: Array<string>;
+  docPresence: any;
+  enableAutoFollowRef: React.MutableRefObject<boolean>;
+  openTab: (tabState: TabState) => void;
 }) => [
   ViewPlugin.fromClass(
     class {
@@ -44,113 +56,139 @@ export const json1PresenceDisplay = ({
         // Mutable state local to this closure representing aggregated presence.
         //  * Keys are presence ids
         //  * Values are presence objects as defined by ot-json1-presence
-        const presenceState = {};
+        const presenceState: Record<PresenceId, Presence> =
+          {};
         // Add the scroll event listener
         //This runs for the arrow key scrolling, it should result in the users scrolling to eachother's location.
-        view.dom.addEventListener('scroll', () => {
-          this.scrollToCursor(view);
-        });
+        // view.dom.addEventListener('scroll', () => {
+        //   this.scrollToCursor(view);
+        // });
         // Receive remote presence changes.
-        docPresence.on('receive', (id, presence) => {
-          if (debug) {
-            console.log(
-              `Received presence for id ${id}`,
+        docPresence.on(
+          'receive',
+          (id: PresenceId, presence: Presence) => {
+            if (debug) {
+              console.log(
+                `Received presence for id ${id}`,
+                presence,
+              ); // Debug statement
+            }
+            // If presence === null, the user has disconnected / exited
+            if (!presence) {
+              delete presenceState[id];
+              return;
+            }
+            // Check if the presence is for the current file or not.
+            const isPresenceInCurrentFile = pathMatches(
+              path,
               presence,
-            ); // Debug statement
-          }
-          // If presence === null, the user has disconnected / exited
-          // We also check if the presence is for the current file or not.
-          if (presence && pathMatches(path, presence)) {
-            presenceState[id] = presence;
-          } else {
-            delete presenceState[id];
-          }
-          // Update decorations to reflect new presence state.
-          // TODO consider mutating this rather than recomputing it on each change.
+            );
+            // If the presence is in the current file, update the presence state.
+            if (isPresenceInCurrentFile) {
+              presenceState[id] = presence;
+            } else if (presence) {
+              // Otherwise, delete the presence state.
+              delete presenceState[id];
-          const presenceDecorations = [];
+              // If auto-follow is enabled, and the presence is NOT
+              // in the current file, then open the tab of the other user.
+              if (enableAutoFollowRef.current) {
+                openTab({
+                  fileId: presence.start[1] as FileId,
+                  isTransient: true,
+                });
+              }
+            }
+            // Update decorations to reflect new presence state.
+            // TODO consider mutating this rather than recomputing it on each change.
-          // Object.keys(presenceState).map((id) => {
-          for (const id of Object.keys(presenceState)) {
-            const presence = presenceState[id];
-            const { start, end } = presence;
-            const from = start[start.length - 1];
-            const to = end[end.length - 1];
-            const userColor = new ColorHash({
-              lightness: 0.75,
-            }).rgb(id);
-            const { username } = presence;
+            const presenceDecorations = [];
-            presenceDecorations.push({
-              from,
-              to: from,
-              value: Decoration.widget({
-                side: -1,
-                block: false,
-                widget: new PresenceWidget(
-                  // TODO see if we can figure out why
-                  // updateDOM was not being called when passing
-                  // the presence id as the id
-                  // id,
-                  '' + Math.random(),
-                  userColor,
-                  username,
-                ),
-              }),
-            });
+            // Object.keys(presenceState).map((id) => {
+            for (const id of Object.keys(presenceState)) {
+              const presence: Presence = presenceState[id];
+              const { start, end } = presence;
+              const from = +start[start.length - 1];
+              const to = +end[end.length - 1];
+              const userColor = new ColorHash({
+                lightness: 0.75,
+              }).rgb(id);
+              const { username } = presence;
-            // This is `true` when the presence is a cursor,
-            // with no selection.
-            if (from !== to) {
-              // This is the case when the presence is a selection.
               presenceDecorations.push({
                 from,
-                to,
-                value: Decoration.mark({
-                  class: 'cm-json1-presence',
-                  attributes: {
-                    style: `
+                to: from,
+                value: Decoration.widget({
+                  side: -1,
+                  block: false,
+                  widget: new PresenceWidget(
+                    // TODO see if we can figure out why
+                    // updateDOM was not being called when passing
+                    // the presence id as the id
+                    // id,
+                    '' + Math.random(),
+                    userColor,
+                    username,
+                  ),
+                }),
+              });
+              // This is `true` when the presence is a cursor,
+              // with no selection.
+              if (from !== to) {
+                // This is the case when the presence is a selection.
+                presenceDecorations.push({
+                  from,
+                  to,
+                  value: Decoration.mark({
+                    class: 'cm-json1-presence',
+                    attributes: {
+                      style: `
                       background-color: rgba(${userColor}, 0.75);
                       mix-blend-mode: luminosity;
                       `,
-                  },
-                }),
-              });
+                    },
+                  }),
+                });
+              }
+              if (view.state.doc.length >= from) {
+                // Ensure position is valid
+                this.cursorPosition[id] = from; // Store the cursor position, important to run if we cant get the regular scroll to work
+                // console.log(`Stored cursor position for id ${id}: ${from}`); // Debug statement
+              } else {
+                // console.warn(`Invalid cursor position for id ${id}: ${from}`); // Debug statement
+              }
             }
-            if (view.state.doc.length >= from) {
-              // Ensure position is valid
-              this.cursorPosition[id] = from; // Store the cursor position, important to run if we cant get the regular scroll to work
-              // console.log(`Stored cursor position for id ${id}: ${from}`); // Debug statement
-            } else {
-              // console.warn(`Invalid cursor position for id ${id}: ${from}`); // Debug statement
-            }
-          }
-          this.decorations = Decoration.set(
-            presenceDecorations,
-            // Without this argument, we get the following error:
-            // Uncaught Error: Ranges must be added sorted by `from` position and `startSide`
-            true,
-          );
+            this.decorations = Decoration.set(
+              presenceDecorations,
+              // Without this argument, we get the following error:
+              // Uncaught Error: Ranges must be added sorted by `from` position and `startSide`
+              true,
+            );
-          // Somehow this triggers re-rendering of the Decorations.
-          // Not sure if this is the correct usage of the API.
-          // Inspired by https://github.com/yjs/y-codemirror.next/blob/main/src/y-remote-selections.js
-          // Set timeout so that the current CodeMirror update finishes
-          // before the next ones that render presence begin.
-          setTimeout(() => {
-            view.dispatch({
-              annotations: [presenceAnnotation.of(true)],
-            });
-          }, 0);
+            // Somehow this triggers re-rendering of the Decorations.
+            // Not sure if this is the correct usage of the API.
+            // Inspired by https://github.com/yjs/y-codemirror.next/blob/main/src/y-remote-selections.js
+            // Set timeout so that the current CodeMirror update finishes
+            // before the next ones that render presence begin.
+            setTimeout(() => {
+              view.dispatch({
+                annotations: [presenceAnnotation.of(true)],
+              });
+            }, 0);
-          // Auto-follow all users when their presence is broadcast
-          // by scrolling them into view.
-          if (enableAutoFollowRef.current) {
-            this.scrollToCursor(view);
-          }
-        });
+            // Auto-follow all users when their presence is broadcast
+            // by scrolling them into view.
+            if (enableAutoFollowRef.current) {
+              this.scrollToCursor(view);
+            }
+          },
+        );
       }
       // Method to scroll the view to keep the cursor in view
       scrollToCursor(view) {

package/src/client/TabList/Tab.tsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import type { FileId } from '../../types';
-import type { TabState } from '../vzReducer';
+import type { FileId, TabState } from '../../types';
 import { CloseSVG } from '../Icons';
 // Supports adding the file's containing folder to the tab name

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

@@ -1,8 +1,8 @@
 import { useContext } from 'react';
 import { VZCodeContext } from '../VZCodeContext';
-import { TabState } from '../vzReducer';
 import { Tab } from './Tab';
 import './style.scss';
+import { TabState } from '../../types';
 // Displays the list of tabs above the code editor.
 export const TabList = () => {

package/src/client/VZCodeContext.tsx CHANGED Viewed

@@ -14,14 +14,11 @@ import {
   VZCodeContent,
   SearchResults,
   SearchFileVisibility,
+  TabState,
 } from '../types';
 import { usePrettier } from './usePrettier';
 import { useTypeScript } from './useTypeScript';
-import {
-  TabState,
-  createInitialState,
-  vzReducer,
-} from './vzReducer';
+import { createInitialState, vzReducer } from './vzReducer';
 import {
   ThemeLabel,
   defaultTheme,
@@ -52,7 +49,9 @@ export type VZCodeContextValue = {
   submitOperation: (
     next: (content: VZCodeContent) => VZCodeContent,
   ) => void;
+  // TODO pull in this type from ShareDB if possible
   localPresence: any;
+  // TODO pull in this type from ShareDB if possible
   docPresence: any;
   files: Files | null;
@@ -76,13 +75,7 @@ export type VZCodeContextValue = {
   setActiveFileRight: () => void;
   tabList: Array<TabState>;
-  openTab: ({
-    fileId,
-    isTransient,
-  }: {
-    fileId: string;
-    isTransient?: boolean;
-  }) => void;
+  openTab: (tabState: TabState) => void;
   closeTabs: (fileIds: string[]) => void;
   isSettingsOpen: boolean;
@@ -125,6 +118,7 @@ export type VZCodeContextValue = {
     id: string,
     visibility: SearchFileVisibility,
   ) => void;
+  toggleSearchFocused: () => void;
   isCreateFileModalOpen: boolean;
   handleOpenCreateFileModal: () => void;
@@ -230,8 +224,7 @@ export const VZCodeProvider = ({
   // Unpack state.
   const {
-    tabList,
-    activeFileId,
+    pane,
     theme,
     search,
     isSearchOpen,
@@ -242,6 +235,13 @@ export const VZCodeProvider = ({
     enableAutoFollow,
   } = state;
+  // TODO support splitPane type
+  if (pane.type !== 'leafPane') {
+    throw new Error('Expected leafPane');
+  }
+  const tabList = pane.tabList;
+  const activeFileId = pane.activeFileId;
   // Functions for dispatching actions to the reducer.
   const {
     setActiveFileId,
@@ -254,6 +254,7 @@ export const VZCodeProvider = ({
     setSearch,
     setSearchResults,
     setSearchFileVisibility,
+    toggleSearchFocused,
     setIsSettingsOpen,
     setIsDocOpen,
     closeSettings,
@@ -348,6 +349,7 @@ export const VZCodeProvider = ({
     handleOpenCreateFileModal,
     setActiveFileLeft,
     setActiveFileRight,
+    toggleSearchFocused,
     runPrettierRef,
     runCodeRef,
     sidebarRef,
@@ -390,6 +392,7 @@ export const VZCodeProvider = ({
     setSearch,
     setSearchResults,
     setSearchFileVisibility,
+    toggleSearchFocused,
     isSettingsOpen,
     setIsSettingsOpen,

package/src/client/VZKeyboardShortcutsDoc.tsx CHANGED Viewed

@@ -69,7 +69,8 @@ export const VZKeyboardShortcutsDoc = ({
               <span>Close the current tab</span>
             </li>
             <li>
-              <strong>Alt + n</strong> <br />
+              <strong>Alt + n or Ctrl + Shift + n</strong>{' '}
+              <br />
               <span>Open the create file modal</span>
             </li>
             <li>

package/src/client/VZSidebar/Search.tsx CHANGED Viewed

@@ -46,7 +46,7 @@ export const Search = () => {
     shareDBDoc,
     editorCache,
   } = useContext(VZCodeContext);
-  const { pattern, results } = search;
+  const { pattern, results, focused } = search;
   useEffect(() => {
     if (isMounted) {
@@ -67,10 +67,15 @@ export const Search = () => {
       return () => clearTimeout(delaySearch);
     } else {
       setIsMounted(true);
-      inputRef.current.focus();
     }
   }, [pattern]);
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [focused]);
   return (
     <div>
       <Form.Group