vzcode 1.31.0 → 1.33.0

package/src/client/useESLint/worker.ts

@@ -0,0 +1,113 @@
+import * as eslint from 'eslint-linter-browserify';
+import globals from 'globals';
+
+// Feature flag to enable or disable JSX linting
+// It's disabled for now since it doesn't work.
+// See issue:
+// https://github.com/vizhub-core/vzcode/issues/921
+const enableJSXLinting = false;
+
+const linter = new eslint.Linter();
+
+const config = {
+  languageOptions: {
+    globals: {
+      ...globals.browser,
+      ...globals.es2021,
+    },
+    parserOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      ecmaFeatures: {
+        // Add this to enable JSX parsing
+        jsx: true,
+      },
+    },
+  },
+  rules: {
+    'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    'no-undef': 'error',
+    semi: 'off',
+  },
+};
+
+// Helper function to convert line/column to character offset
+function getOffset(
+  docLines: string[],
+  line: number,
+  column: number,
+): number {
+  let offset = 0;
+  for (let i = 0; i < line - 1; i++) {
+    offset += (docLines[i] ? docLines[i].length : 0) + 1; // +1 for newline
+  }
+  return offset + column - 1;
+}
+
+self.onmessage = (event) => {
+  const { code, requestId, fileName } = event.data;
+  if (typeof code !== 'string') {
+    self.postMessage({
+      diagnostics: [],
+      requestId,
+      error: 'Invalid code received',
+    });
+    return;
+  }
+
+  // Only lint .js files, and .jsx files if enableJSXLinting is true
+  if (!fileName) {
+    self.postMessage({ diagnostics: [], requestId });
+    return;
+  }
+
+  const isJsFile = /\.js$/i.test(fileName);
+  const isJsxFile = /\.jsx$/i.test(fileName);
+
+  if (!isJsFile && (!isJsxFile || !enableJSXLinting)) {
+    self.postMessage({ diagnostics: [], requestId });
+    return;
+  }
+
+  try {
+    const messages = linter.verify(code, config as any);
+    const docLines = code.split('\n');
+
+    const diagnostics = messages.map((msg) => {
+      const from = getOffset(
+        docLines,
+        msg.line,
+        msg.column,
+      );
+      // endLine and endColumn may not always exist
+      const to =
+        msg.endLine && msg.endColumn
+          ? getOffset(docLines, msg.endLine, msg.endColumn)
+          : from +
+            (msg.fix?.range[1] - msg.fix?.range[0] || 1);
+
+      return {
+        from,
+        to,
+        severity:
+          msg.severity === 2
+            ? 'error'
+            : msg.severity === 1
+              ? 'warning'
+              : 'info',
+        message: msg.message,
+        source: msg.ruleId
+          ? `eslint(${msg.ruleId})`
+          : 'eslint',
+      };
+    });
+    self.postMessage({ diagnostics, requestId });
+  } catch (e: any) {
+    console.error('Error linting in ESLint worker:', e);
+    self.postMessage({
+      error: e.message,
+      diagnostics: [],
+      requestId,
+    });
+  }
+};

package/src/client/useEditorCache.ts

@@ -6,6 +6,7 @@ import { EditorView } from 'codemirror';
 export type EditorCacheValue = {
   editor: EditorView;
   themeCompartment: any;
+  languageCompartment?: any;
   scrollPosition?: number;
 };
 

package/src/client/useFileCRUD.ts

@@ -2,6 +2,10 @@ import { useCallback } from 'react';
 import { FileTreePath } from '../types';
 import { VizFileId, VizContent } from '@vizhub/viz-types';
 import { randomId } from '../randomId';
+import { EditorCache } from './useEditorCache';
+import { getFileExtension } from './utils/fileExtension';
+import { getLanguageExtension } from './CodeEditor/getOrCreateEditor';
+import { editorCacheKey } from './useEditorCache';
 
 // CRUD operations for files and directories
 // CRUD = Create, Read, Update, Delete
@@ -9,6 +13,8 @@ export const useFileCRUD = ({
   submitOperation,
   closeTabs,
   openTab,
+  editorCache,
+  content,
 }: {
   submitOperation: (
     operation: (document: VizContent) => VizContent,
@@ -21,6 +27,8 @@ export const useFileCRUD = ({
     fileId: VizFileId;
     isTransient: boolean;
   }) => void;
+  editorCache: EditorCache;
+  content: VizContent;
 }) => {
   // Create a new file
   const createFile = useCallback(
@@ -78,6 +86,45 @@ export const useFileCRUD = ({
           },
         },
       }));
+
+      const oldName = content.files[fileId].name;
+      const oldExtension = getFileExtension(oldName);
+
+      const newExtension = getFileExtension(newName);
+
+      const didExtensionChange =
+        newExtension !== oldExtension;
+      if (didExtensionChange) {
+        // Update the language compartment of the corresponding CodeMirror editor
+        // with the new language, based on the new extension, only if it changed.
+        // Search through all cached editors for this file ID
+        for (const [
+          cacheKey,
+          cachedEditor,
+        ] of editorCache.entries()) {
+          // Check if this cache entry is for the current file
+          if (cacheKey.startsWith(fileId + '|')) {
+            if (
+              cachedEditor &&
+              cachedEditor.languageCompartment
+            ) {
+              const newLanguageExtension =
+                getLanguageExtension(newExtension);
+
+              // Reconfigure the language compartment with the new language extension
+              cachedEditor.editor.dispatch({
+                effects:
+                  cachedEditor.languageCompartment.reconfigure(
+                    newLanguageExtension
+                      ? [newLanguageExtension]
+                      : [],
+                  ),
+              });
+              // Continue to update all instances of this file in different panes
+            }
+          }
+        }
+      }
     },
     [submitOperation],
   );

package/src/client/useOpenDirectories.ts

@@ -1,26 +1,36 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
+import type { Pane } from '../types';
+import { VizContent } from '@vizhub/viz-types';
 
 // TODO bring this feature back
 // When a page is opened with an active file,
 // make sure all the directories leading to that file
 // are opened automatically.
-//export const initialOpenDirectories = (activeFile) => {
-//  const openDirectories = {};
-//  if (activeFile) {
-//    const path = activeFile.split('/');
-//    for (let i = 1; i < path.length; i++) {
-//      openDirectories[path.slice(0, i).join('/')] = true;
-//    }
-//  }
-//  return openDirectories;
-//};
+export const initialOpenDirectories = (
+  activeFile: string | null,
+): Set<VZPath> => {
+  const openDirectories = new Set<VZPath>();
+  if (activeFile) {
+    const path = activeFile.split('/');
+    for (let i = 1; i < path.length; i++) {
+      openDirectories.add(path.slice(0, i).join('/'));
+    }
+  }
+  return openDirectories;
+};
 
 type VZPath = string;
 
 // Inspired by
 // https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/useOpenDirectories.js
 // TODO move this into reducer
-export const useOpenDirectories = (): {
+export const useOpenDirectories = ({
+  activePane,
+  content,
+}: {
+  activePane: Pane;
+  content: VizContent;
+}): {
   isDirectoryOpen: (path: VZPath) => boolean;
   toggleDirectory: (path: VZPath) => void;
 } => {
@@ -29,6 +39,27 @@ export const useOpenDirectories = (): {
     Set<VZPath>
   >(new Set());
 
+  // (client-side only) initialize the open directories
+  // based on the open files from the URL params.
+  useEffect(() => {
+    if (
+      activePane.type === 'leafPane' &&
+      activePane?.activeFileId &&
+      content.files[activePane.activeFileId]
+    ) {
+      const activeFileId = activePane.activeFileId;
+      const fileName = content.files[activeFileId].name;
+      const dirsToOpen = initialOpenDirectories(fileName);
+      setOpenDirectories((prev) => {
+        const updated = new Set(prev);
+        for (const dir of dirsToOpen) {
+          updated.add(dir);
+        }
+        return updated;
+      });
+    }
+  }, [activePane]);
+
   // Whether a directory is open.
   const isDirectoryOpen: (path: VZPath) => boolean =
     useCallback(

package/src/client/utils/fileExtension.ts

@@ -0,0 +1,10 @@
+/**
+ * Utility function to extract file extension from a file name.
+ * @param fileName - The name of the file (e.g., "index.html", "script.js")
+ * @returns The file extension without the dot (e.g., "html", "js") or undefined if no extension
+ */
+export const getFileExtension = (
+  fileName: string,
+): string | undefined => {
+  return fileName.split('.').pop();
+};

package/src/client/vzReducer/aiChatReducer.ts

@@ -0,0 +1,31 @@
+import { VZState, VZAction } from '.';
+
+export const setIsAIChatOpenReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type === 'set_is_ai_chat_open') {
+    return {
+      ...state,
+      isAIChatOpen: action.value,
+      // When opening AI chat, close search
+      isSearchOpen: action.value
+        ? false
+        : state.isSearchOpen,
+    };
+  }
+  return state;
+};
+
+export const toggleAIChatFocusedReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type === 'toggle_ai_chat_focused') {
+    return {
+      ...state,
+      aiChatFocused: !state.aiChatFocused,
+    };
+  }
+  return state;
+};

package/src/client/vzReducer/createInitialState.ts

@@ -25,6 +25,8 @@ export const createInitialState = ({
     focusedChildIndex: null,
   },
   isSearchOpen: false,
+  isAIChatOpen: false,
+  aiChatFocused: false,
   isSettingsOpen: false,
   isDocOpen: false,
   editorWantsFocus: false,

package/src/client/vzReducer/index.ts

@@ -30,6 +30,10 @@ import {
   setSearchFocusedIndexReducer,
   toggleSearchFocusedReducer,
 } from './searchReducer';
+import {
+  setIsAIChatOpenReducer,
+  toggleAIChatFocusedReducer,
+} from './aiChatReducer';
 import { toggleAutoFollowReducer } from './toggleAutoFollowReducer';
 import { updatePresenceIndicatorReducer } from './updatePresenceIndicatorReducer';
 import { splitCurrentPaneReducer } from './splitCurrentPaneReducer';
@@ -52,6 +56,12 @@ export type VZState = {
   // True to show the search instead of files
   isSearchOpen: boolean;
 
+  // True to show the AI chat instead of files
+  isAIChatOpen: boolean;
+
+  // True if the AI chat input should focus on the next render.
+  aiChatFocused: boolean;
+
   // True to show the settings modal.
   isSettingsOpen: boolean;
 
@@ -115,6 +125,14 @@ export type VZAction =
   //  * Sets whether the search tab is open.
   | { type: 'set_is_search_open'; value: boolean }
 
+  // `set_is_ai_chat_open`
+  //  * Sets whether the AI chat tab is open.
+  | { type: 'set_is_ai_chat_open'; value: boolean }
+
+  // `toggle_ai_chat_focused`
+  // * Toggles focused variable to trigger AI chat input focus
+  | { type: 'toggle_ai_chat_focused' }
+
   // `set_search`
   //  * Sets the current search pattern
   | { type: 'set_search'; value: string }
@@ -192,6 +210,8 @@ const reducers = [
   setSearchFocusedIndexReducer,
   toggleSearchFocusedReducer,
   setIsSearchOpenReducer,
+  setIsAIChatOpenReducer,
+  toggleAIChatFocusedReducer,
   setIsSettingsOpenReducer,
   setIsDocOpenReducer,
   editorNoLongerWantsFocusReducer,

package/src/server/featureFlags.js

@@ -4,3 +4,5 @@ export const enableDirectories = true;
 export const debugDirectories = false;
 
 export const debugIgnore = false;
+
+export const enableESLint = true;