vzcode 0.25.0 → 0.27.0

package/src/client/vzReducer/index.ts

@@ -0,0 +1,107 @@
+import { FileId, Username } from '../../types';
+import { ThemeLabel } from '../themes';
+import { closeTabsReducer } from './closeTabsReducer';
+import { openTabReducer } from './openTabReducer';
+import { setActiveFileIdReducer } from './setActiveFileIdReducer';
+import { setIsSettingsOpenReducer } from './setIsSettingsOpenReducer';
+import { setThemeReducer } from './setThemeReducer';
+import { editorNoLongerWantsFocusReducer } from './editorNoLongerWantsFocusReducer';
+import { setUsernameReducer } from './setUsernameReducer';
+
+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 ID of the file that is currently active.
+  // Invariant: `activeFileId` is always in `tabList`.
+  activeFileId: FileId | null;
+
+  // The theme that is currently active.
+  theme: ThemeLabel;
+
+  // True to show the settings modal.
+  isSettingsOpen: boolean;
+
+  // True if the editor should focus on the next render.
+  editorWantsFocus: boolean;
+
+  // The username of the current user.
+  username: Username;
+};
+
+// The shape of the actions that can be dispatched to the reducer.
+export type VZAction =
+  // `set_active_file_id`
+  //  * Sets the active file ID.
+  | { type: 'set_active_file_id'; activeFileId: FileId }
+
+  // `open_tab`
+  //  * Opens a tab.
+  //  * Also serves to change an already open transient tab to persistent.
+  | {
+      type: 'open_tab';
+      fileId: FileId;
+      isTransient: boolean;
+    }
+
+  // `close_tabs`
+  //  * Closes a set of tabs.
+  | { type: 'close_tabs'; fileIdsToClose: Array<FileId> }
+
+  // `set_theme`
+  //  * Sets the theme.
+  | { type: 'set_theme'; themeLabel: ThemeLabel }
+
+  // `set_is_settings_open`
+  //  * Sets whether the settings modal is open.
+  | { type: 'set_is_settings_open'; value: boolean }
+
+  // `editor_no_longer_wants_focus`
+  //  * Sets `editorWantsFocus` to `false`.
+  | { type: 'editor_no_longer_wants_focus' }
+
+  // `set_username`
+  //  * Sets the username.
+  | { type: 'set_username'; username: Username };
+
+// 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` 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,
+  openTabReducer,
+  closeTabsReducer,
+  setThemeReducer,
+  setIsSettingsOpenReducer,
+  editorNoLongerWantsFocusReducer,
+  setUsernameReducer,
+];
+
+export const vzReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  reducers.reduce(
+    (currentState, currentReducer) =>
+      currentReducer(currentState, action),
+    state,
+  );

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

@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest';
+import { openTabReducer } from './openTabReducer';
+import { VZAction, VZState, createInitialState } from '.';
+import { defaultTheme } from '../themes';
+
+const initialState: VZState = createInitialState({
+  defaultTheme,
+});
+
+describe('openTabReducer', () => {
+  it('Opens a new tab', () => {
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file1',
+      isTransient: false,
+    };
+    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');
+  });
+
+  it('Replaces a transient tab', () => {
+    const stateWithTransientTab = {
+      ...initialState,
+      tabList: [{ fileId: 'file2', isTransient: true }],
+    };
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file1',
+      isTransient: true,
+    };
+    const newState = openTabReducer(
+      stateWithTransientTab,
+      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');
+  });
+
+  it('Does not modify a non-transient tab', () => {
+    const stateWithNonTransientTab = {
+      ...initialState,
+      tabList: [{ fileId: 'file1', isTransient: false }],
+    };
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file1',
+      isTransient: true,
+    };
+    const newState = openTabReducer(
+      stateWithNonTransientTab,
+      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');
+  });
+
+  it('Activates an already open tab', () => {
+    const stateWithMultipleTabs = {
+      ...initialState,
+      tabList: [
+        { fileId: 'file1', isTransient: false },
+        { fileId: 'file2', isTransient: false },
+      ],
+    };
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file1',
+      isTransient: false,
+    };
+    const newState = openTabReducer(
+      stateWithMultipleTabs,
+      action,
+    );
+
+    expect(newState.tabList.length).toBe(2);
+    expect(newState.activeFileId).toBe('file1');
+  });
+
+  it('Sets editorWantsFocus to true for non-transient tabs', () => {
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file3',
+      isTransient: false, // This tab is persistent
+    };
+    const newState = openTabReducer(initialState, action);
+
+    expect(newState.editorWantsFocus).toBe(true);
+  });
+
+  it('Sets editorWantsFocus to false for transient tabs', () => {
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file4',
+      isTransient: true, // This tab is transient
+    };
+    const newState = openTabReducer(initialState, action);
+
+    expect(newState.editorWantsFocus).toBe(false);
+  });
+});

package/src/client/vzReducer/openTabReducer.ts

@@ -0,0 +1,57 @@
+import { TabState, VZAction, VZState } from '.';
+
+export const openTabReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type !== 'open_tab') return state;
+
+  // Check if the tab is already open and if it's transient.
+  const existingTabIndex = state.tabList.findIndex(
+    (tab) => tab.fileId === action.fileId,
+  );
+  const tabExists = existingTabIndex !== -1;
+  const existingTabIsTransient =
+    tabExists &&
+    state.tabList[existingTabIndex].isTransient;
+
+  // Find if there's any other transient tab.
+  const transientTabIndex = state.tabList.findIndex(
+    (tab) =>
+      tab.isTransient && tab.fileId !== action.fileId,
+  );
+
+  // The new tab state.
+  const newTabState: TabState = {
+    fileId: action.fileId,
+    isTransient: action.isTransient,
+  };
+
+  let newTabList: Array<TabState>;
+
+  if (tabExists) {
+    if (existingTabIsTransient) {
+      newTabList = state.tabList.map((tabState) =>
+        tabState.fileId === action.fileId
+          ? newTabState
+          : tabState,
+      );
+    } else {
+      newTabList = [...state.tabList];
+    }
+  } else if (transientTabIndex !== -1) {
+    newTabList = [...state.tabList];
+    newTabList[transientTabIndex] = newTabState;
+  } else {
+    newTabList = [...state.tabList, newTabState];
+  }
+
+  return {
+    ...state,
+    activeFileId: action.fileId,
+    tabList: newTabList,
+
+    // If the tab is persistent, the editor should focus on the next render.
+    editorWantsFocus: !action.isTransient,
+  };
+};

package/src/client/vzReducer/setActiveFileIdReducer.ts

@@ -0,0 +1,9 @@
+import { VZAction, VZState } from '.';
+
+export const setActiveFileIdReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_active_file_id'
+    ? { ...state, activeFileId: action.activeFileId }
+    : state;

package/src/client/vzReducer/setIsSettingsOpenReducer.ts

@@ -0,0 +1,9 @@
+import { VZAction, VZState } from '.';
+
+export const setIsSettingsOpenReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_is_settings_open'
+    ? { ...state, isSettingsOpen: action.value }
+    : state;

package/src/client/vzReducer/setThemeReducer.ts

@@ -0,0 +1,9 @@
+import { VZAction, VZState } from '.';
+
+export const setThemeReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_theme'
+    ? { ...state, theme: action.themeLabel }
+    : state;

package/src/client/vzReducer/setUsernameReducer.ts

@@ -0,0 +1,9 @@
+import { VZAction, VZState } from '.';
+
+export const setUsernameReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_username'
+    ? { ...state, username: action.username }
+    : state;

package/src/index.ts

@@ -0,0 +1,40 @@
+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 {
+  SplitPaneResizeProvider,
+  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 { CodeErrorOverlay } from './client/CodeErrorOverlay';
+export { PresenceNotifications } from './client/PresenceNotifications';
+export { useFileCRUD } from './client/useFileCRUD';
+export { useSubmitOperation } from './client/useSubmitOperation';
+export {
+  vzReducer,
+  createInitialState,
+} 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/src/types.ts

@@ -30,6 +30,11 @@ export interface File {
   text: string;
 }
 
+// FileTreePath
+//  * The path to the directory, e.g. "src/components", OR
+//  * The path to the file e.g. "src/components/HelloWorld.js".
+export type FileTreePath = string;
+
 // FileTree
 //  * A tree of files.
 //  * Each node in the tree is either a directory or a file.
@@ -38,13 +43,9 @@ export interface File {
 //  * Each file has a `fileId` string.
 //  * Each directory has a `name` string.
 //  * Each directory has a `path` string.
-//  * The `path` string is the path to the directory.
-//    e.g. "src/components".
-//  * The `path` string is the path to the file.
-//    e.g. "src/components/HelloWorld.js".
 export interface FileTree {
   name: string;
-  path?: string;
+  path?: FileTreePath;
   children?: Array<FileTree | FileTreeFile>;
 }
 
@@ -93,3 +94,9 @@ export type VZCodeContent = {
   //     * Hot reloading is debounced when this is `false`.
   isInteracting?: boolean;
 };
+
+// An id used for presence.
+export type PresenceId = string;
+
+// A user name for display in presence.
+export type Username = string;