vzcode 1.30.1 → 1.32.0

package/src/client/VZCodeContext.tsx

@@ -34,7 +34,6 @@ import { useKeyboardShortcuts } from './useKeyboardShortcuts';
 import { useOpenDirectories } from './useOpenDirectories';
 import { usePrettier } from './usePrettier';
 import { useRunCode } from './useRunCode';
-import { useTypeScript } from './useTypeScript';
 import { useURLSync } from './useURLSync';
 import { createInitialState, vzReducer } from './vzReducer';
 import { findPane } from './vzReducer/findPane';
@@ -110,8 +109,6 @@ export type VZCodeContextValue = {
 
   errorMessage: string | null;
 
-  typeScriptWorker: Worker | null;
-
   search: SearchResults;
   isSearchOpen: boolean;
   setIsSearchOpen: (isSearchOpen: boolean) => void;
@@ -185,7 +182,6 @@ export const VZCodeProvider = ({
   localPresence,
   docPresence,
   prettierWorker,
-  typeScriptWorker,
   initialUsername,
   children,
   codeError = null,
@@ -204,18 +200,17 @@ export const VZCodeProvider = ({
   localPresence: any;
   docPresence: any;
   prettierWorker: Worker;
-  typeScriptWorker: Worker;
   initialUsername: Username;
   children: React.ReactNode;
   codeError?: string | null;
-  connected: boolean;
-  pending: boolean;
-  liveKitToken: string | undefined;
-  setLiveKitToken: (state: string) => void;
-  liveKitRoomName: string | undefined;
-  setLiveKitRoom: (state: string) => void;
-  liveKitConnection: boolean;
-  setLiveKitConnection: (state: boolean) => void;
+  connected?: boolean;
+  pending?: boolean;
+  liveKitToken?: string | undefined;
+  setLiveKitToken?: (state: string) => void;
+  liveKitRoomName?: string | undefined;
+  setLiveKitRoom?: (state: string) => void;
+  liveKitConnection?: boolean;
+  setLiveKitConnection?: (state: boolean) => void;
 }) => {
   // Auto-run Pretter after local changes.
   const { prettierError, runPrettierRef } = usePrettier({
@@ -240,16 +235,6 @@ export const VZCodeProvider = ({
     ? prettierError
     : codeError;
 
-  // Set up the TypeScript Language Server worker.
-  // This acts as a central "brain" for features powered
-  // by the TypeScript Language Server including:
-  //  * Completions
-  //  * Linting
-  useTypeScript({
-    content,
-    typeScriptWorker,
-  });
-
   // Set up the reducer that manages much of the application state.
   // See https://react.dev/reference/react/useReducer
   const [state, dispatch] = useReducer(
@@ -473,8 +458,6 @@ export const VZCodeProvider = ({
 
     errorMessage,
 
-    typeScriptWorker,
-
     isCreateFileModalOpen,
     handleOpenCreateFileModal,
     handleCloseCreateFileModal,

package/src/client/VZMiddle.tsx

@@ -8,6 +8,10 @@ import { AIAssistWidget } from './AIAssist/AIAssistWidget';
 import { VZCodeContext } from './VZCodeContext';
 import { RunCodeWidget } from './RunCodeWidget';
 import { InteractRule } from '@replit/codemirror-interact';
+import { EditorView } from '@codemirror/view';
+import { Diagnostic } from '@codemirror/lint';
+import { VizContent } from '@vizhub/viz-types';
+import { LeafPane } from '../types';
 
 // TODO modify this to handle the SplitPane type
 // Recursive structure?
@@ -17,13 +21,13 @@ const PaneView = ({
   pane,
   content,
   customInteractRules,
-  allowGlobals,
   enableAIAssist,
   aiAssistEndpoint,
   aiAssistOptions,
   aiAssistTooltipText,
   aiAssistClickOverride,
   aiCopilotEndpoint,
+  esLintSource,
 }) => {
   // This prevents the CodeEditor from rendering
   // during SSR.
@@ -49,8 +53,8 @@ const PaneView = ({
       {isClient && content && pane.activeFileId && (
         <CodeEditor
           customInteractRules={customInteractRules}
-          allowGlobals={allowGlobals}
           aiCopilotEndpoint={aiCopilotEndpoint}
+          esLintSource={esLintSource}
         />
       )}
       {isClient &&
@@ -86,7 +90,7 @@ export const VZMiddle = ({
   aiAssistClickOverride,
   aiCopilotEndpoint,
   customInteractRules,
-  allowGlobals = false,
+  esLintSource,
 }: {
   enableAIAssist?: boolean;
   aiAssistEndpoint?: string;
@@ -95,7 +99,9 @@ export const VZMiddle = ({
   aiAssistClickOverride?: () => void;
   aiCopilotEndpoint?: string;
   customInteractRules?: Array<InteractRule>;
-  allowGlobals?: boolean;
+  esLintSource: (
+    view: EditorView,
+  ) => Promise<readonly Diagnostic[]>;
 }) => {
   const { codeEditorWidth } = useContext(
     SplitPaneResizeContext,
@@ -126,13 +132,13 @@ export const VZMiddle = ({
         pane={pane}
         content={content}
         customInteractRules={customInteractRules}
-        allowGlobals={allowGlobals}
         enableAIAssist={enableAIAssist}
         aiAssistEndpoint={aiAssistEndpoint}
         aiAssistOptions={aiAssistOptions}
         aiAssistTooltipText={aiAssistTooltipText}
         aiAssistClickOverride={aiAssistClickOverride}
         aiCopilotEndpoint={aiCopilotEndpoint}
+        esLintSource={esLintSource}
       />
       <CodeErrorOverlay
         errorMessage={errorMessage}

package/src/client/VZSidebar/Search.tsx

@@ -64,6 +64,7 @@ export const Search = () => {
     setSearchFocusedIndex,
     shareDBDoc,
     editorCache,
+    openTab,
   } = useContext(VZCodeContext);
   const {
     pattern,
@@ -227,6 +228,9 @@ export const Search = () => {
       case 'Enter':
       case ' ':
         const fileId: VizFileId = files[focusedIndex][0];
+
+        openTab({ fileId, isTransient: true });
+
         setActiveFileId(fileId);
 
         if (focusedChildIndex !== null) {
@@ -441,6 +445,13 @@ export const Search = () => {
                                     childIndex,
                                   );
 
+                                  openTab({
+                                    fileId,
+                                    isTransient: true,
+                                  });
+
+                                  setActiveFileId(fileId);
+
                                   const cacheKey =
                                     editorCacheKey(
                                       fileId,

package/src/client/VZSidebar/index.tsx

@@ -32,9 +32,9 @@ import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import { VZCodeContext } from '../VZCodeContext';
 import { Listing } from './Listing';
 import { Search } from './Search';
-import './styles.scss';
 import { useDragAndDrop } from './useDragAndDrop';
 import { enableLiveKit } from '../featureFlags';
+import './styles.scss';
 
 // TODO turn this UI back on when we are actually detecting
 // the connection status.
@@ -252,10 +252,6 @@ export const VZSidebar = ({
     <div
       className="vz-sidebar"
       style={{ width: sidebarWidth + 'px' }}
-      onDragEnter={handleDragEnter}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onDrop={handleDrop}
     >
       <div
         className="full-box"
@@ -426,10 +422,6 @@ export const VZSidebar = ({
                 id="mic-icon"
                 className="icon-button icon-button-dark"
                 onClick={() => {
-                  console.log(
-                    'clicking',
-                    liveKitConnection,
-                  );
                   setVoiceChatModalOpen(true);
                 }}
               >
@@ -438,11 +430,23 @@ export const VZSidebar = ({
             </OverlayTrigger>
           )}
         </div>
-        <div className="files" id="sidebar-view-container">
+        <div
+          className="files"
+          id="sidebar-view-container"
+          onDragEnter={handleDragEnter}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
           {!isSearchOpen ? (
             <div className="sidebar-files">
               {isDragOver ? (
-                <div className="empty">
+                <div className="empty drag-over">
+                  <div className="empty-text">
+                    It looks like you don't have any files
+                    yet! Click the "Create file" button
+                    above to create your first file.
+                  </div>
                   <div className="empty-text">
                     Drop files here!
                   </div>
@@ -470,6 +474,9 @@ export const VZSidebar = ({
                     yet! Click the "Create file" button
                     above to create your first file.
                   </div>
+                  <div className="empty-text">
+                    Drop files here!
+                  </div>
                 </div>
               )}
             </div>

package/src/client/VZSidebar/styles.scss

@@ -228,21 +228,41 @@
     flex: 1;
     flex-direction: column;
     align-items: center;
-    justify-content: space-evenly;
+    justify-content: center;
     margin: 10px;
     padding: 20px;
-    border: 1px dashed rgba(255, 255, 255, 0.5); /* White dashed outline */
+    border: 1px dashed rgba(255, 255, 255, 0.5);
     border-radius: 10px;
-
-    /*
-     * This fixes some issues where the drop zone for files
-     * was flickering when dragging files over the sidebar.
-     */
+    min-height: 200px;
+    position: relative;
     pointer-events: none;
 
     .empty-text {
       font-size: 16px;
       font-weight: 500;
+      pointer-events: none;
+      position: absolute;
+      text-align: center;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 80%;
+      opacity: 1;
+      transition: opacity 0.2s ease;
+
+      &:not(:first-child) {
+        opacity: 0;
+      }
+    }
+
+    &.drag-over {
+      .empty-text {
+        opacity: 0;
+
+        &:last-child {
+          opacity: 1;
+        }
+      }
     }
   }
 

package/src/client/VZSidebar/useDragAndDrop.tsx

@@ -2,22 +2,42 @@ import { useState, useContext, useCallback } from 'react';
 import { VZCodeContext } from '../VZCodeContext';
 import './styles.scss';
 
-const debug = false;
+interface FileSystemEntry {
+  isFile: boolean;
+  isDirectory: boolean;
+  name: string;
+  createReader: () => FileSystemDirectoryReader;
+  file: (callback: (file: File) => void) => void;
+}
+
+interface FileSystemDirectoryReader {
+  readEntries: (
+    callback: (entries: FileSystemEntry[]) => void,
+  ) => void;
+}
+
+const DEBUG = false;
 
 export const useDragAndDrop = () => {
   const [isDragOver, setIsDragOver] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
   const { createFile } = useContext(VZCodeContext);
 
-  const handleDragEnter = useCallback((event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    setIsDragOver(true);
-  }, []);
+  const handleDragEnter = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      DEBUG && console.log('[useDragAndDrop] Drag Enter');
+      setIsDragOver(true);
+    },
+    [],
+  );
 
   const handleDragOver = useCallback(
-    (event) => {
+    (event: React.DragEvent) => {
       event.preventDefault();
       event.stopPropagation();
+      DEBUG && console.log('[useDragAndDrop] Drag Over');
       if (!isDragOver) setIsDragOver(true);
     },
     [isDragOver],
@@ -27,52 +47,234 @@ export const useDragAndDrop = () => {
     (event: React.DragEvent<HTMLDivElement>) => {
       event.preventDefault();
       event.stopPropagation();
+      DEBUG && console.log('[useDragAndDrop] Drag Leave');
       setIsDragOver(false);
     },
     [],
   );
 
+  const isTextFile = (file: File): boolean => {
+    // Add more text file types as needed
+    const textTypes = [
+      'text/',
+      'application/json',
+      'application/javascript',
+      'application/typescript',
+      'application/xml',
+      'application/x-httpd-php',
+    ];
+    const isText =
+      textTypes.some((type) =>
+        file.type.startsWith(type),
+      ) ||
+      file.name.match(
+        /\.(txt|js|jsx|ts|tsx|md|css|scss|html|xml|json|php|py|rb|java|c|cpp|h|hpp)$/i,
+      ) !== null;
+
+    DEBUG &&
+      console.log(
+        `[useDragAndDrop] File ${file.name} is${isText ? '' : ' not'} a text file`,
+      );
+    return isText;
+  };
+
+  const readFileAsText = (file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      DEBUG &&
+        console.log(
+          `[useDragAndDrop] Reading file: ${file.name}`,
+        );
+
+      if (!isTextFile(file)) {
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Rejected non-text file: ${file.name}`,
+          );
+        reject(
+          new Error(`File ${file.name} is not a text file`),
+        );
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        if (e.target?.result) {
+          DEBUG &&
+            console.log(
+              `[useDragAndDrop] Successfully read file: ${file.name}`,
+            );
+          resolve(e.target.result as string);
+        } else {
+          DEBUG &&
+            console.log(
+              `[useDragAndDrop] Failed to read file: ${file.name}`,
+            );
+          reject(
+            new Error(`Failed to read file ${file.name}`),
+          );
+        }
+      };
+      reader.onerror = () => {
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Error reading file: ${file.name}`,
+          );
+        reject(
+          new Error(`Error reading file ${file.name}`),
+        );
+      };
+      reader.readAsText(file);
+    });
+  };
+
+  const processEntry = async (
+    entry: FileSystemEntry,
+    path: string,
+  ): Promise<void> => {
+    try {
+      DEBUG &&
+        console.log(
+          `[useDragAndDrop] Processing entry: ${entry.name} at path: ${path}`,
+        );
+
+      if (entry.isFile) {
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Processing file: ${entry.name}`,
+          );
+        entry.file(async (file) => {
+          try {
+            const content = await readFileAsText(file);
+            DEBUG &&
+              console.log(
+                `[useDragAndDrop] Creating file: ${path}${file.name}`,
+              );
+            createFile(`${path}${file.name}`, content);
+          } catch (error) {
+            console.error(
+              `Error processing file ${file.name}:`,
+              error,
+            );
+          }
+        });
+      } else if (entry.isDirectory) {
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Processing directory: ${entry.name}`,
+          );
+        return new Promise<void>((resolve) => {
+          const dirReader = entry.createReader();
+          const readEntries = () => {
+            dirReader.readEntries(async (entries) => {
+              if (entries.length === 0) {
+                DEBUG &&
+                  console.log(
+                    `[useDragAndDrop] Finished reading directory: ${entry.name}`,
+                  );
+                resolve();
+                return;
+              }
+
+              const newPath = `${path}${entry.name}/`;
+              DEBUG &&
+                console.log(
+                  `[useDragAndDrop] Reading ${entries.length} entries in directory: ${newPath}`,
+                );
+              await Promise.all(
+                entries.map((entry) =>
+                  processEntry(entry, newPath),
+                ),
+              );
+              readEntries(); // Continue reading if there are more entries
+            });
+          };
+          readEntries();
+        });
+      }
+    } catch (error) {
+      console.error(
+        `Error processing entry ${entry.name}:`,
+        error,
+      );
+    }
+  };
+
   const handleDrop = useCallback(
-    (event: React.DragEvent<HTMLDivElement>) => {
+    async (event: React.DragEvent<HTMLDivElement>) => {
       event.preventDefault();
       event.stopPropagation();
+      DEBUG &&
+        console.log('[useDragAndDrop] Drop event started');
       setIsDragOver(false);
+      setIsProcessing(true);
 
-      const items = event.dataTransfer.items;
-
-      const processEntry = (entry, path) => {
-        if (entry.isFile) {
-          entry.file((file) => {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-              const content = e.target.result as string;
-              createFile(`${path}${file.name}`, content);
-            };
-            reader.readAsText(file);
-          });
-        } else if (entry.isDirectory) {
-          const dirReader = entry.createReader();
-          dirReader.readEntries((entries) => {
-            const newPath = `${path}${entry.name}/`;
-            for (const entry of entries) {
-              processEntry(entry, newPath);
+      try {
+        const items = event.dataTransfer.items;
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Processing ${items.length} dropped items`,
+          );
+        const entries: FileSystemEntry[] = [];
+
+        for (const item of Array.from(items)) {
+          // Try webkit first, then fallback to other methods
+          const entry =
+            item.webkitGetAsEntry?.() ||
+            (item as any).getAsEntry?.() ||
+            (item as any).createEntry?.();
+
+          if (entry) {
+            DEBUG &&
+              console.log(
+                `[useDragAndDrop] Got entry for: ${entry.name}`,
+              );
+            entries.push(entry as FileSystemEntry);
+          } else if (item.kind === 'file') {
+            const file = item.getAsFile();
+            if (file) {
+              DEBUG &&
+                console.log(
+                  `[useDragAndDrop] Processing dropped file: ${file.name}`,
+                );
+              try {
+                const content = await readFileAsText(file);
+                createFile(file.name, content);
+              } catch (error) {
+                console.error(
+                  `Error processing file ${file.name}:`,
+                  error,
+                );
+              }
             }
-          });
+          }
         }
-      };
-      const itemsArray = Array.from(items);
-      itemsArray.forEach((item) => {
-        const entry = item.webkitGetAsEntry();
-        if (entry) {
-          processEntry(entry, '');
-        }
-      });
+
+        DEBUG &&
+          console.log(
+            `[useDragAndDrop] Processing ${entries.length} entries`,
+          );
+        await Promise.all(
+          entries.map((entry) => processEntry(entry, '')),
+        );
+      } catch (error) {
+        console.error(
+          'Error processing dropped items:',
+          error,
+        );
+      } finally {
+        DEBUG &&
+          console.log(
+            '[useDragAndDrop] Drop processing completed',
+          );
+        setIsProcessing(false);
+      }
     },
     [createFile],
   );
 
   return {
     isDragOver,
+    isProcessing,
     handleDragEnter,
     handleDragOver,
     handleDragLeave,

package/src/client/main.jsx

@@ -4,9 +4,7 @@ import App from './App';
 import { BrowserRouter } from 'react-router-dom';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  // <React.StrictMode>
   <BrowserRouter>
     <App />
   </BrowserRouter>,
-  // </React.StrictMode>,
 );

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 };
+};