vzcode 2.3.0 → 2.4.0

package/src/client/useActions.ts

@@ -0,0 +1,288 @@
+import { useCallback } from 'react';
+import { ThemeLabel } from './themes';
+import {
+  PresenceIndicator,
+  SearchFileVisibility,
+  ShareDBDoc,
+  TabState,
+  Username,
+} from '../types';
+import { VizFileId, VizContent } from '@vizhub/viz-types';
+import { VZAction } from './vzReducer';
+
+// This is a custom hook that returns a set of functions
+// that can be used to dispatch actions to the reducer.
+export const useActions = (
+  dispatch: (action: VZAction) => void,
+) => {
+  const setActiveFileId = useCallback(
+    (activeFileId: VizFileId) => {
+      dispatch({
+        type: 'set_active_file_id',
+        activeFileId,
+      });
+    },
+    [dispatch],
+  );
+
+  const setActiveFileLeft = useCallback(() => {
+    dispatch({ type: 'set_active_file_left' });
+  }, [dispatch]);
+
+  const setActiveFileRight = useCallback(() => {
+    dispatch({ type: 'set_active_file_right' });
+  }, [dispatch]);
+
+  const openTab = useCallback(
+    (tabState: TabState): void => {
+      dispatch({
+        type: 'open_tab',
+        fileId: tabState.fileId,
+        isTransient: tabState.isTransient,
+      });
+    },
+    [dispatch],
+  );
+
+  const closeTabs = useCallback(
+    (fileIdsToClose: Array<VizFileId>) => {
+      dispatch({
+        type: 'close_tabs',
+        fileIdsToClose,
+      });
+    },
+    [dispatch],
+  );
+
+  const setTheme = useCallback(
+    (themeLabel: ThemeLabel) => {
+      dispatch({
+        type: 'set_theme',
+        themeLabel: themeLabel,
+      });
+    },
+    [dispatch],
+  );
+
+  // True to show the visual editor
+  const setIsVisualEditorOpen = useCallback(
+    (value: boolean) => {
+      dispatch({
+        type: 'set_is_visual_editor_open',
+        value: value,
+      });
+    },
+    [dispatch],
+  );
+
+  // True to show the settings modal.
+  const setIsSearchOpen = useCallback(
+    (value: boolean) => {
+      dispatch({
+        type: 'set_is_search_open',
+        value: value,
+      });
+    },
+    [dispatch],
+  );
+
+  // Update search pattern
+  const setSearch = useCallback(
+    (pattern: string) => {
+      dispatch({
+        type: 'set_search',
+        value: pattern,
+      });
+    },
+    [dispatch],
+  );
+
+  // Update search results based on current pattern
+  const setSearchResults = useCallback(
+    (files: ShareDBDoc<VizContent>) => {
+      dispatch({
+        type: 'set_search_results',
+        files: files,
+      });
+    },
+    [dispatch],
+  );
+
+  // Update search results file visibility based on current pattern
+  const setSearchFileVisibility = useCallback(
+    (
+      files: ShareDBDoc<VizContent>,
+      id: string,
+      visibility: SearchFileVisibility,
+    ) => {
+      dispatch({
+        type: 'set_search_file_visibility',
+        files: files,
+        id: id,
+        visibility: visibility,
+      });
+    },
+    [dispatch],
+  );
+
+  // Update search results file matching line visibility to be
+  const setSearchLineVisibility = useCallback(
+    (
+      files: ShareDBDoc<VizContent>,
+      id: string,
+      line: number,
+    ) => {
+      dispatch({
+        type: 'hide_search_results_line',
+        files: files,
+        id: id,
+        line: line,
+      });
+    },
+    [dispatch],
+  );
+
+  // Update search results active element
+  const setSearchFocusedIndex = useCallback(
+    (focusedIndex: number, childIndex: number) => {
+      dispatch({
+        type: 'set_active_search_index',
+        focusedIndex: focusedIndex,
+        childIndex: childIndex,
+      });
+    },
+    [dispatch],
+  );
+
+  // Toggle the focused variable, which should focus the search input
+  const toggleSearchFocused = useCallback(() => {
+    dispatch({
+      type: 'toggle_search_focused',
+    });
+  }, [dispatch]);
+
+  // True to show the AI chat instead of files
+  const setIsAIChatOpen = useCallback(
+    (value: boolean) => {
+      dispatch({
+        type: 'set_is_ai_chat_open',
+        value: value,
+      });
+    },
+    [dispatch],
+  );
+
+  // Toggle the focused variable, which should focus the AI chat input
+  const toggleAIChatFocused = useCallback(() => {
+    dispatch({
+      type: 'toggle_ai_chat_focused',
+    });
+  }, [dispatch]);
+
+  // Set the AI chat mode (ask or edit)
+  const setAIChatMode = useCallback(
+    (mode: 'ask' | 'edit') => {
+      dispatch({
+        type: 'set_ai_chat_mode',
+        mode,
+      });
+    },
+    [dispatch],
+  );
+
+  // True to show the settings modal.
+  const setIsSettingsOpen = useCallback(
+    (value: boolean) => {
+      dispatch({
+        type: 'set_is_settings_open',
+        value: value,
+      });
+    },
+    [dispatch],
+  );
+
+  const setIsDocOpen = useCallback(
+    (value: boolean) => {
+      dispatch({
+        type: 'set_is_doc_open',
+        value: value,
+      });
+    },
+    [dispatch],
+  );
+
+  const closeSettings = useCallback(() => {
+    setIsSettingsOpen(false);
+  }, [setIsSettingsOpen]);
+
+  const closeDoc = useCallback(() => {
+    setIsDocOpen(false);
+  }, [setIsDocOpen]);
+
+  const editorNoLongerWantsFocus = useCallback(() => {
+    dispatch({
+      type: 'editor_no_longer_wants_focus',
+    });
+  }, [dispatch]);
+
+  const setUsername = useCallback(
+    (username: Username) => {
+      dispatch({
+        type: 'set_username',
+        username,
+      });
+    },
+    [dispatch],
+  );
+
+  const toggleAutoFollow = useCallback(() => {
+    dispatch({
+      type: 'toggle_auto_follow',
+    });
+  }, [dispatch]);
+
+  const updatePresenceIndicator = useCallback(
+    (presenceIndicator: PresenceIndicator) => {
+      dispatch({
+        type: 'update_presence_indicator',
+        presenceIndicator,
+      });
+    },
+    [dispatch],
+  );
+
+  const splitCurrentPane = useCallback(() => {
+    dispatch({
+      type: 'split_current_pane',
+    });
+  }, [dispatch]);
+
+  return {
+    setActiveFileId,
+    setActiveFileLeft,
+    setActiveFileRight,
+    openTab,
+    closeTabs,
+    setTheme,
+    setIsVisualEditorOpen,
+    setIsSearchOpen,
+    setSearch,
+    setSearchResults,
+    setSearchFileVisibility,
+    setSearchLineVisibility,
+    setSearchFocusedIndex,
+    toggleSearchFocused,
+    setIsAIChatOpen,
+    toggleAIChatFocused,
+    setAIChatMode,
+    setIsSettingsOpen,
+    setIsDocOpen,
+    closeSettings,
+    closeDoc,
+    editorNoLongerWantsFocus,
+    setUsername,
+    toggleAutoFollow,
+    updatePresenceIndicator,
+    splitCurrentPane,
+  };
+};

package/src/client/useESLint/index.ts

@@ -0,0 +1,72 @@
+import { useState, useEffect, useCallback } from 'react';
+import { EditorView } from '@codemirror/view';
+import { Diagnostic } from '@codemirror/lint';
+// @ts-ignore - Worker import
+import ESLintWorker from './worker?worker';
+import { enableESLint } from '../../server/featureFlags';
+import { fileNameStateField } from '../CodeEditor/getOrCreateEditor';
+
+let requestCounter = 0;
+const pendingRequests = new Map();
+
+export const useESLint = () => {
+  const [worker, setWorker] = useState(null);
+
+  // Initialize the work in an effect so it does not run during SSR.
+  useEffect(() => {
+    setWorker(new ESLintWorker());
+  }, []);
+
+  useEffect(() => {
+    // Wait for the worker to be initialized
+    if (!worker) return;
+
+    const handleMessage = (event: MessageEvent) => {
+      const { diagnostics, requestId, error } = event.data;
+
+      if (error) {
+        console.error('[ESLint] Error:', error);
+      }
+
+      const resolve = pendingRequests.get(requestId);
+      if (resolve) {
+        resolve(diagnostics);
+        pendingRequests.delete(requestId);
+      }
+    };
+
+    worker.addEventListener('message', handleMessage);
+
+    return () => {
+      worker.removeEventListener('message', handleMessage);
+      worker.terminate();
+    };
+  }, [worker]);
+
+  const esLintSource = useCallback(
+    async (
+      view: EditorView,
+    ): Promise<readonly Diagnostic[]> => {
+      if (!enableESLint) return [];
+
+      // Retrieve the file name from the editor's state
+      const fileName = view.state.field(fileNameStateField);
+
+      try {
+        const code = view.state.doc.toString();
+        const requestId = requestCounter++;
+
+        return new Promise<Diagnostic[]>((resolve) => {
+          pendingRequests.set(requestId, resolve);
+          worker.postMessage({ code, requestId, fileName });
+        });
+      } catch (e) {
+        console.error('[ESLint] Error in linter:', e);
+        return [];
+      }
+    },
+    [worker],
+  );
+
+  return { esLintSource };
+};

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

@@ -0,0 +1,35 @@
+import { useRef } from 'react';
+import { VizFileId } from '@vizhub/viz-types';
+import { PaneId } from '../types';
+import { EditorView } from 'codemirror';
+
+export type EditorCacheValue = {
+  editor: EditorView;
+  themeCompartment: any;
+  languageCompartment?: any;
+  scrollPosition?: number;
+};
+
+export type EditorCacheKey = string;
+
+export const editorCacheKey = (
+  fileId: VizFileId,
+  paneId: PaneId,
+): EditorCacheKey => fileId + '|' + paneId;
+
+export type EditorCache = Map<
+  EditorCacheKey,
+  EditorCacheValue
+>;
+
+export const useEditorCache = () => {
+  // Singleton cache of CodeMirror instances
+  // These are created, but never destroyed.
+  // TODO consider invalidating this cache at some point.
+  // Right now these editor instances just keep accumulating,
+  // and they all retain their connections to ShareDB.
+  // This has not been an issue so far, but it could become one.
+  const editorCacheRef = useRef<EditorCache>(new Map());
+
+  return editorCacheRef.current;
+};