vzcode 1.10.0 → 1.12.0

package/src/client/vzReducer/index.ts

@@ -1,5 +1,7 @@
 import {
   FileId,
+  Pane,
+  PaneId,
   SearchFileVisibility,
   SearchResults,
   ShareDBDoc,
@@ -24,18 +26,18 @@ import {
   setSearchReducer,
   setSearchResultsReducer,
   setSearchFileVisibilityReducer,
+  toggleSearchFocusedReducer,
 } from './searchReducer';
 import { toggleAutoFollowReducer } from './toggleAutoFollowReducer';
 export { createInitialState } from './createInitialState';
 
 // The shape of the state managed by the reducer.
 export type VZState = {
-  // The list of open tabs.
-  tabList: Array<TabState>;
+  // The state of the split pane (tree data structure).
+  pane: Pane;
 
-  // The ID of the file that is currently active.
-  // Invariant: `activeFileId` is always in `tabList`.
-  activeFileId: FileId | null;
+  // The id of the currently active pane.
+  activePaneId: PaneId;
 
   // The theme that is currently active.
   theme: ThemeLabel;
@@ -86,7 +88,11 @@ export type VZAction =
 
   // `close_tabs`
   //  * Closes a set of tabs.
-  | { type: 'close_tabs'; fileIdsToClose: Array<FileId> }
+  | {
+      type: 'close_tabs';
+      fileIdsToClose: Array<FileId>;
+      // The pane id to close tabs from.
+    }
 
   // `set_theme`
   //  * Sets the theme.
@@ -121,6 +127,10 @@ export type VZAction =
       visibility: SearchFileVisibility;
     }
 
+  // `toggle_search_focused`
+  // * Toggles focused variable to trigger search input focus
+  | { type: 'toggle_search_focused' }
+
   // `editor_no_longer_wants_focus`
   //  * Sets `editorWantsFocus` to `false`.
   | { type: 'editor_no_longer_wants_focus' }
@@ -133,25 +143,6 @@ export type VZAction =
   //  * Toggles the auto-follow feature.
   | { type: 'toggle_auto_follow' };
 
-// Representation of an open tab.
-export type TabState = {
-  // `fileId`
-  // The ID of the file that the tab represents.
-  fileId: FileId;
-
-  // `isTransient`
-  // Represents whether the tab is temporary or persistent.
-  //  * `true` if the tab is temporary, meaning its text
-  //    appears as italic, and it will be automatically
-  //    closed when the user switches to another file.
-  //    If `true` and the tab is opened, the editor will not focus.
-  //  * `false` or `undefined` if the tab is persistent, meaning its text
-  //    appears as normal, and it will not be automatically
-  //    closed when the user switches to another file.
-  //    If `false` and the tab is opened, the editor will focus.
-  isTransient?: boolean;
-};
-
 const reducers = [
   setActiveFileIdReducer,
   setActiveFileLeftReducer,
@@ -162,6 +153,7 @@ const reducers = [
   setSearchReducer,
   setSearchResultsReducer,
   setSearchFileVisibilityReducer,
+  toggleSearchFocusedReducer,
   setIsSearchOpenReducer,
   setIsSettingsOpenReducer,
   setIsDocOpenReducer,

package/src/client/vzReducer/openTabReducer.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { assert, describe, expect, it } from 'vitest';
 import { openTabReducer } from './openTabReducer';
 import { VZAction, VZState, createInitialState } from '.';
 import { defaultTheme } from '../themes';
@@ -16,16 +16,22 @@ describe('openTabReducer', () => {
     };
     const newState = openTabReducer(initialState, action);
 
-    expect(newState.tabList.length).toBe(1);
-    expect(newState.tabList[0].fileId).toBe('file1');
-    expect(newState.tabList[0].isTransient).toBe(false);
-    expect(newState.activeFileId).toBe('file1');
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(1);
+    expect(newState.pane.tabList[0].fileId).toBe('file1');
+    expect(newState.pane.tabList[0].isTransient).toBe(
+      false,
+    );
+    expect(newState.pane.activeFileId).toBe('file1');
   });
 
   it('Replaces a transient tab', () => {
     const stateWithTransientTab = {
       ...initialState,
-      tabList: [{ fileId: 'file2', isTransient: true }],
+      pane: {
+        ...initialState.pane,
+        tabList: [{ fileId: 'file2', isTransient: true }],
+      },
     };
     const action: VZAction = {
       type: 'open_tab',
@@ -37,16 +43,20 @@ describe('openTabReducer', () => {
       action,
     );
 
-    expect(newState.tabList.length).toBe(1);
-    expect(newState.tabList[0].fileId).toBe('file1');
-    expect(newState.tabList[0].isTransient).toBe(true);
-    expect(newState.activeFileId).toBe('file1');
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(1);
+    expect(newState.pane.tabList[0].fileId).toBe('file1');
+    expect(newState.pane.tabList[0].isTransient).toBe(true);
+    expect(newState.pane.activeFileId).toBe('file1');
   });
 
   it('Does not modify a non-transient tab', () => {
     const stateWithNonTransientTab = {
       ...initialState,
-      tabList: [{ fileId: 'file1', isTransient: false }],
+      pane: {
+        ...initialState.pane,
+        tabList: [{ fileId: 'file1', isTransient: false }],
+      },
     };
     const action: VZAction = {
       type: 'open_tab',
@@ -58,19 +68,25 @@ describe('openTabReducer', () => {
       action,
     );
 
-    expect(newState.tabList.length).toBe(1);
-    expect(newState.tabList[0].fileId).toBe('file1');
-    expect(newState.tabList[0].isTransient).toBe(false); // should remain non-transient
-    expect(newState.activeFileId).toBe('file1');
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(1);
+    expect(newState.pane.tabList[0].fileId).toBe('file1');
+    expect(newState.pane.tabList[0].isTransient).toBe(
+      false,
+    ); // should remain non-transient
+    expect(newState.pane.activeFileId).toBe('file1');
   });
 
   it('Activates an already open tab', () => {
     const stateWithMultipleTabs = {
       ...initialState,
-      tabList: [
-        { fileId: 'file1', isTransient: false },
-        { fileId: 'file2', isTransient: false },
-      ],
+      pane: {
+        ...initialState.pane,
+        tabList: [
+          { fileId: 'file1', isTransient: false },
+          { fileId: 'file2', isTransient: false },
+        ],
+      },
     };
     const action: VZAction = {
       type: 'open_tab',
@@ -82,8 +98,9 @@ describe('openTabReducer', () => {
       action,
     );
 
-    expect(newState.tabList.length).toBe(2);
-    expect(newState.activeFileId).toBe('file1');
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(2);
+    expect(newState.pane.activeFileId).toBe('file1');
   });
 
   it('Sets editorWantsFocus to true for non-transient tabs', () => {

package/src/client/vzReducer/openTabReducer.ts

@@ -1,4 +1,7 @@
-import { TabState, VZAction, VZState } from '.';
+import { VZAction, VZState } from '.';
+import { Pane, TabState } from '../../types';
+import { findPane } from './findPane';
+import { updatePane } from './updatePane';
 
 export const openTabReducer = (
   state: VZState,
@@ -6,17 +9,26 @@ export const openTabReducer = (
 ): VZState => {
   if (action.type !== 'open_tab') return state;
 
+  const { pane, activePaneId } = state;
+  const activePane: Pane = findPane(pane, activePaneId);
+
+  if (activePane.type !== 'leafPane') {
+    throw new Error(
+      'closeTabsReducer: activePane is not a leafPane',
+    );
+  }
+
   // Check if the tab is already open and if it's transient.
-  const existingTabIndex = state.tabList.findIndex(
+  const existingTabIndex = activePane.tabList.findIndex(
     (tab) => tab.fileId === action.fileId,
   );
   const tabExists = existingTabIndex !== -1;
   const existingTabIsTransient =
     tabExists &&
-    state.tabList[existingTabIndex].isTransient;
+    activePane.tabList[existingTabIndex].isTransient;
 
   // Find if there's any other transient tab.
-  const transientTabIndex = state.tabList.findIndex(
+  const transientTabIndex = activePane.tabList.findIndex(
     (tab) =>
       tab.isTransient && tab.fileId !== action.fileId,
   );
@@ -31,25 +43,29 @@ export const openTabReducer = (
 
   if (tabExists) {
     if (existingTabIsTransient) {
-      newTabList = state.tabList.map((tabState) =>
+      newTabList = activePane.tabList.map((tabState) =>
         tabState.fileId === action.fileId
           ? newTabState
           : tabState,
       );
     } else {
-      newTabList = [...state.tabList];
+      newTabList = [...activePane.tabList];
     }
   } else if (transientTabIndex !== -1) {
-    newTabList = [...state.tabList];
+    newTabList = [...activePane.tabList];
     newTabList[transientTabIndex] = newTabState;
   } else {
-    newTabList = [...state.tabList, newTabState];
+    newTabList = [...activePane.tabList, newTabState];
   }
 
   return {
     ...state,
-    activeFileId: action.fileId,
-    tabList: newTabList,
+    pane: updatePane({
+      pane,
+      activePaneId,
+      newTabList,
+      newActiveFileId: action.fileId,
+    }),
 
     // If the tab is persistent, the editor should focus on the next render.
     editorWantsFocus: !action.isTransient,

package/src/client/vzReducer/searchReducer.ts

@@ -74,7 +74,11 @@ export const setSearchReducer = (
   action.type === 'set_search'
     ? {
         ...state,
-        search: { pattern: action.value, results: {} },
+        search: {
+          pattern: action.value,
+          results: {},
+          focused: true,
+        },
       }
     : state;
 
@@ -91,6 +95,7 @@ export const setSearchResultsReducer = (
             action.files,
             state.search.pattern,
           ),
+          focused: state.search.focused,
         },
       }
     : state;
@@ -109,6 +114,21 @@ export const setSearchFileVisibilityReducer = (
             action.id,
             action.visibility,
           ),
+          focused: state.search.focused,
+        },
+      }
+    : state;
+
+export const toggleSearchFocusedReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'toggle_search_focused'
+    ? {
+        ...state,
+        search: {
+          ...state.search,
+          focused: !state.search.focused,
         },
       }
     : state;

package/src/client/vzReducer/setActiveFileIdReducer.ts

@@ -1,9 +1,28 @@
 import { VZAction, VZState } from '.';
+import { Pane } from '../../types';
+import { findPane } from './findPane';
+import { updatePane } from './updatePane';
 
 export const setActiveFileIdReducer = (
   state: VZState,
   action: VZAction,
-): VZState =>
-  action.type === 'set_active_file_id'
-    ? { ...state, activeFileId: action.activeFileId }
-    : state;
+): VZState => {
+  if (action.type !== 'set_active_file_id') return state;
+
+  const { pane, activePaneId } = state;
+  const activePane: Pane = findPane(pane, activePaneId);
+
+  if (activePane.type !== 'leafPane') {
+    throw new Error(
+      'closeTabsReducer: activePane is not a leafPane',
+    );
+  }
+  return {
+    ...state,
+    pane: updatePane({
+      pane,
+      activePaneId,
+      newActiveFileId: action.activeFileId,
+    }),
+  };
+};

package/src/client/vzReducer/setActiveFileLeftRightReducer.ts

@@ -1,4 +1,7 @@
 import { VZAction, VZState } from '.';
+import { Pane } from '../../types';
+import { findPane } from './findPane';
+import { updatePane } from './updatePane';
 
 export const setActiveFileLeftReducer = (
   state: VZState,
@@ -8,18 +11,31 @@ export const setActiveFileLeftReducer = (
     return state;
   }
 
-  let index = state.tabList.findIndex(
-    (tab) => tab.fileId === state.activeFileId,
+  const { pane, activePaneId } = state;
+  const activePane: Pane = findPane(pane, activePaneId);
+
+  if (activePane.type !== 'leafPane') {
+    throw new Error(
+      'closeTabsReducer: activePane is not a leafPane',
+    );
+  }
+
+  let index = activePane.tabList.findIndex(
+    (tab) => tab.fileId === activePane.activeFileId,
   );
 
   index -= 1;
   if (index < 0) {
-    index = state.tabList.length - 1;
+    index = activePane.tabList.length - 1;
   }
 
   return {
     ...state,
-    activeFileId: state.tabList[index].fileId,
+    pane: updatePane({
+      pane,
+      activePaneId,
+      newActiveFileId: activePane.tabList[index].fileId,
+    }),
   };
 };
 
@@ -31,17 +47,30 @@ export const setActiveFileRightReducer = (
     return state;
   }
 
-  let index = state.tabList.findIndex(
-    (tab) => tab.fileId === state.activeFileId,
+  const { pane, activePaneId } = state;
+  const activePane: Pane = findPane(pane, activePaneId);
+
+  if (activePane.type !== 'leafPane') {
+    throw new Error(
+      'closeTabsReducer: activePane is not a leafPane',
+    );
+  }
+
+  let index = activePane.tabList.findIndex(
+    (tab) => tab.fileId === activePane.activeFileId,
   );
 
   index += 1;
-  if (index > state.tabList.length - 1) {
+  if (index > activePane.tabList.length - 1) {
     index = 0;
   }
 
   return {
     ...state,
-    activeFileId: state.tabList[index].fileId,
+    pane: updatePane({
+      pane,
+      activePaneId,
+      newActiveFileId: activePane.tabList[index].fileId,
+    }),
   };
 };

package/src/client/vzReducer/updatePane.ts

@@ -0,0 +1,44 @@
+import {
+  FileId,
+  Pane,
+  PaneId,
+  TabState,
+} from '../../types';
+
+// Immutable update pattern for updating a pane's tab list.
+export const updatePane = ({
+  pane,
+  activePaneId,
+  newTabList,
+  newActiveFileId,
+}: {
+  pane: Pane;
+  activePaneId: PaneId;
+  newTabList?: Array<TabState>;
+  newActiveFileId?: FileId | null;
+}): Pane =>
+  pane.type === 'splitPane'
+    ? {
+        ...pane,
+        children: pane.children.map((child) =>
+          updatePane({
+            pane: child,
+            activePaneId,
+            newTabList,
+            newActiveFileId,
+          }),
+        ),
+      }
+    : pane.id === activePaneId
+      ? {
+          ...pane,
+          tabList:
+            newTabList !== undefined
+              ? newTabList
+              : pane.tabList,
+          activeFileId:
+            newActiveFileId !== undefined
+              ? newActiveFileId
+              : pane.activeFileId,
+        }
+      : pane;

package/src/server/index.js

@@ -313,6 +313,7 @@ server.listen(port, async () => {
     // Sets the port to the one specified in the environment
     // variable (for development) or the default port.
     let livePort = process.env.EDITOR_PORT || port;
+    console.log(`EDITOR_PORT: ${process.env.EDITOR_PORT}`);
     console.log(
       `Editor is live at http://localhost:${livePort}`,
     );

package/src/types.ts

@@ -80,8 +80,70 @@ export interface SearchFile {
 export interface SearchResults {
   pattern: string;
   results: SearchResult;
+  focused: boolean;
 }
 
+// Representation of an open tab.
+export type TabState = {
+  // `fileId`
+  // The ID of the file that the tab represents.
+  fileId: FileId;
+
+  // `isTransient`
+  // Represents whether the tab is temporary or persistent.
+  //  * `true` if the tab is temporary, meaning its text
+  //    appears as italic, and it will be automatically
+  //    closed when the user switches to another file.
+  //    If `true` and the tab is opened, the editor will not focus.
+  //  * `false` or `undefined` if the tab is persistent, meaning its text
+  //    appears as normal, and it will not be automatically
+  //    closed when the user switches to another file.
+  //    If `false` and the tab is opened, the editor will focus.
+  isTransient?: boolean;
+};
+
+// PaneId
+//   * A unique ID for a pane.
+//   * This is a random string.
+export type PaneId = string;
+
+// The leaf node of the tree data structure
+export type LeafPane = {
+  type: 'leafPane';
+  // The list of tabs
+  // Mutually exclusive with `children`.
+  tabList: Array<TabState>;
+
+  // The ID of the file that is currently active
+  // within this leaf pane.
+  // Invariant: `activeFileId` is always in `tabList`.
+  activeFileId: FileId | null;
+};
+
+// Internal node of the tree data structure
+export type SplitPane = {
+  type: 'splitPane';
+
+  // Which orientation is it? Vertical split or horizontal split?
+  // Applies only to `children`
+  orientation: 'vertical' | 'horizontal';
+
+  // The children panels
+  // Mutually exclusive with `tabList`.
+  children: Array<Pane>;
+};
+
+// The node data structure of the split pane tree
+export type Pane = {
+  // Every pane gets a unique ID,
+  // so we can refer to it in actions.
+  id: PaneId;
+
+  // The type of the pane
+  // Either a leaf pane or a split pane.
+  type: 'leafPane' | 'splitPane';
+} & (LeafPane | SplitPane);
+
 export type JSONOp = any;
 
 // `ShareDBDoc`
@@ -115,57 +177,6 @@ export type ShareDBDoc<T> = {
 // Generated by the client.
 export type AIStreamId = string;
 
-// // TODO define this interface.
-// export type AIStreamStatus = {
-//   // This field is managed by the client.
-//   //  * `true` if the client wants the server to start the generation.
-//   //  * `false` if the client does not want the server to start the generation.
-//   clientWantsToStart: boolean;
-
-//   // This field is managed by the server.
-//   //  * `true` if the server is running the generation.
-//   //  * `false` if the server is not running the generation.
-//   serverIsRunning: boolean;
-
-//   text: string;
-
-//   startingInsertionCursor: number;
-//   fileId: FileId;
-// };
-
-/// Alternative universe
-
-// // // If the generation started yet or not
-// // //  * If not, the server will start it.
-// // started: boolean;
-
-// // Required?
-// // aiStreamId: AIStreamId
-
-// // The generation status
-// //  * "running" if the generation is running
-// //  * "finished" if the generation is finished
-// //  * "error" if the generation errored
-// //  * "stopped" if the generation was stopped
-// status:
-//   | 'unstarted'
-//   | 'running'
-//   | 'finished'
-//   | 'error'
-//   | 'stopped';
-
-// // Possible states:
-// //  * { started: 'unstarted' } - client added this,
-// //    It should trigger the server to start the generation.
-// //  * { status: 'running' } - server added this,
-// //    It indicates that the generation is running.
-// //  * { status: 'finished' } - server added this,
-// //    It indicates that the generation is finished.
-// //  * { status: 'stopped' } - server added this,
-// //    It indicates that the generation was stopped.
-// //
-// // After `status` transitions to `finished` or `stopped`,
-
 // The ShareDB document type for VZCode.
 export type VZCodeContent = {
   // `files`
@@ -179,25 +190,13 @@ export type VZCodeContent = {
   //   * `false` or `undefined` when they are not (e.g. normal typing)
   //     * Hot reloading is debounced when this is `false`.
   isInteracting?: boolean;
-
-  // `aiStreams`
-  //  * The AI streams in the VZCode instance.
-  //  * Keys are AI stream IDs.
-  //  * Values are AI streams.
-  // What is this for?
-  //  * Synchronize the status of streams between the
-  //    client and server.
-  //  * This can power the transition of the icon from
-  //    lightning bolt to stop sign and back (when stream finishes)
-  // aiStreams?: {
-  //   // These need to be removed at some point?
-  //   [aiStreamId: AIStreamId]: {
-  //     AIStreamStatus: AIStreamStatus;
-  //   };
-  // };
-
-  // TODO consider is there a way to replace the HTTP request to
-  // the AIAssist endpoint with a manipulation of the ShareDB document?
+};
+// Example Presence object, from ShareDB:
+// {"start":["files","69064344","text",183],"end":["files","69064344","text",183],"username":"Jim"}
+export type Presence = {
+  start: Array<string | number>;
+  end: Array<string | number>;
+  username: Username;
 };
 
 // An id used for presence.