vzcode 1.30.1 → 1.31.0

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/useFileCRUD.ts

@@ -89,8 +89,6 @@ export const useFileCRUD = ({
       oldName: string,
       newName: string,
     ) => {
-      console.log(path);
-      console.log(oldName);
       submitOperation((document: VizContent) => {
         const updatedFiles = Object.keys(
           document.files,

package/src/server/featureFlags.js

@@ -1,10 +1,6 @@
 // Feature flag for directories, disabled until it's fully working.
 export const enableDirectories = true;
 
-export const debugDirectories = Boolean(
-  process.env.DEBUG_FILE_TREE,
-);
+export const debugDirectories = false;
 
-export const debugIgnore = Boolean(
-  process.env.DEBUG_IGNORE,
-);
+export const debugIgnore = false;

package/src/server/setupEnv.js

@@ -6,13 +6,3 @@ const dir = fileURLToPath(import.meta.url);
 dotenv.config({
   path: join(dir, '../../../.env'),
 });
-if (process.env.VZCODE_DEBUG_SETUP_ENV) {
-  console.log(
-    'environment variables set up',
-    Object.fromEntries(
-      Object.entries(process.env).filter(
-        (entry) => !entry[0].endsWith('PATH'),
-      ),
-    ),
-  );
-}