vzcode 2.2.0 → 2.3.0

package/src/client/useActions.ts

@@ -1,288 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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;
-};