vzcode 0.75.0 → 0.77.0

package/src/client/VZSidebar/index.tsx

@@ -17,7 +17,7 @@ import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import { BugSVG, GearSVG, NewSVG } from '../Icons';
 import { Listing } from './Listing';
 import { VZCodeContext } from '../VZCodeContext';
-import { DragAndDrop } from './DragAndDrop';
+import { useDragAndDrop } from './useDragAndDrop';
 import './styles.scss';
 
 // TODO turn this UI back on when we are actually detecting
@@ -84,116 +84,131 @@ export const VZSidebar = ({
     fileTree.children &&
     fileTree.children.length > 0;
 
+  const {
+    isDragOver,
+    handleDragEnter,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+  } = useDragAndDrop();
+
   return (
     <div
-      className="vz-sidebar"
-      style={{ width: sidebarWidth + 'px' }}
+      className={`drop-zone ${isDragOver ? 'dragover' : ''}`}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
     >
-      <div className="files">
-        <div className="full-box">
-          <div className="sidebar-section-hint">
-            Project Files
-          </div>
-          <div className="sidebar-section-buttons">
-            <OverlayTrigger
-              placement="left"
-              overlay={
-                <Tooltip id="report-bug-tooltip">
-                  {reportBugTooltipText}
-                </Tooltip>
-              }
-            >
-              <a
-                href="https://github.com/vizhub-core/vzcode/issues/new"
-                target="_blank"
-                rel="noopener noreferrer"
+      <div
+        className="vz-sidebar"
+        style={{ width: sidebarWidth + 'px' }}
+      >
+        <div className="files">
+          <div className="full-box">
+            <div className="sidebar-section-hint">
+              Project Files
+            </div>
+            <div className="sidebar-section-buttons">
+              <OverlayTrigger
+                placement="left"
+                overlay={
+                  <Tooltip id="report-bug-tooltip">
+                    {reportBugTooltipText}
+                  </Tooltip>
+                }
               >
-                <i className="icon-button icon-button-dark">
-                  <BugSVG />
-                </i>
-              </a>
-            </OverlayTrigger>
-            {disableSettings ? null : (
+                <a
+                  href="https://github.com/vizhub-core/vzcode/issues/new"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <i className="icon-button icon-button-dark">
+                    <BugSVG />
+                  </i>
+                </a>
+              </OverlayTrigger>
+              {disableSettings ? null : (
+                <OverlayTrigger
+                  placement="left"
+                  overlay={
+                    <Tooltip id="open-settings-tooltip">
+                      {openSettingsTooltipText}
+                    </Tooltip>
+                  }
+                >
+                  <i
+                    onClick={handleSettingsClick}
+                    className="icon-button icon-button-dark"
+                  >
+                    <GearSVG />
+                  </i>
+                </OverlayTrigger>
+              )}
               <OverlayTrigger
                 placement="left"
                 overlay={
-                  <Tooltip id="open-settings-tooltip">
-                    {openSettingsTooltipText}
+                  <Tooltip id="create-file-tooltip">
+                    {createFileTooltipText}
                   </Tooltip>
                 }
               >
                 <i
-                  onClick={handleSettingsClick}
+                  onClick={handleOpenCreateFileModal}
                   className="icon-button icon-button-dark"
                 >
-                  <GearSVG />
+                  <NewSVG />
                 </i>
               </OverlayTrigger>
-            )}
-            <OverlayTrigger
-              placement="left"
-              overlay={
-                <Tooltip id="create-file-tooltip">
-                  {createFileTooltipText}
-                </Tooltip>
-              }
-            >
-              <i
-                onClick={handleOpenCreateFileModal}
-                className="icon-button icon-button-dark"
-              >
-                <NewSVG />
-              </i>
-            </OverlayTrigger>
+            </div>
           </div>
+          {filesExist ? (
+            fileTree.children.map((entity) => {
+              const { fileId } = entity as FileTreeFile;
+              const { path } = entity as FileTree;
+              const key = fileId ? fileId : path;
+              return (
+                <Listing
+                  key={key}
+                  entity={entity}
+                  renameFile={renameFile}
+                  deleteFile={deleteFile}
+                  renameDirectory={renameDirectory}
+                  deleteDirectory={deleteDirectory}
+                  handleFileClick={handleFileClick}
+                  handleFileDoubleClick={
+                    handleFileDoubleClick
+                  }
+                  isDirectoryOpen={isDirectoryOpen}
+                  toggleDirectory={toggleDirectory}
+                  activeFileId={activeFileId}
+                />
+              );
+            })
+          ) : (
+            <div className="empty">
+              <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>
+          )}
         </div>
-        <DragAndDrop />
-        {filesExist ? (
-          fileTree.children.map((entity) => {
-            const { fileId } = entity as FileTreeFile;
-            const { path } = entity as FileTree;
-            const key = fileId ? fileId : path;
-            return (
-              <Listing
-                key={key}
-                entity={entity}
-                renameFile={renameFile}
-                deleteFile={deleteFile}
-                renameDirectory={renameDirectory}
-                deleteDirectory={deleteDirectory}
-                handleFileClick={handleFileClick}
-                handleFileDoubleClick={
-                  handleFileDoubleClick
-                }
-                isDirectoryOpen={isDirectoryOpen}
-                toggleDirectory={toggleDirectory}
-                activeFileId={activeFileId}
+
+        {enableConnectionStatus && (
+          <div className="connection-status">
+            {connected ? 'Connected' : 'Connection Lost'}
+            <div className="connection">
+              <div
+                className={`connection-status-indicator ${
+                  connected ? 'connected' : 'disconnected'
+                }`}
               />
-            );
-          })
-        ) : (
-          <div className="empty">
-            <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>
         )}
       </div>
-
-      {enableConnectionStatus && (
-        <div className="connection-status">
-          {connected ? 'Connected' : 'Connection Lost'}
-          <div className="connection">
-            <div
-              className={`connection-status-indicator ${
-                connected ? 'connected' : 'disconnected'
-              }`}
-            />
-          </div>
-        </div>
-      )}
     </div>
   );
 };

package/src/client/VZSidebar/styles.scss

@@ -154,18 +154,17 @@
       }
     }
   }
+}
 
-  .drop-zone {
-    border: 3px dashed #bdc7dc;
-    width: auto;
-    padding: 20px;
-    color: #bdc7dc;
-    text-align: center;
-    font-family: var(--vzcode-font-family);
-    font-weight: 500;
-  }
+.drop-zone {
+  border: 3px solid #0a1731;
+  width: auto;
+  color: #bdc7dc;
+  text-align: center;
+  font-family: var(--vzcode-font-family);
+  font-weight: 500;
+}
 
-  .drop-zone.dragover {
-    border-color: #009639;
-  }
+.drop-zone.dragover {
+  border-color: #009639;
 }

package/src/client/VZSidebar/{DragAndDrop.tsx → useDragAndDrop.tsx}

@@ -4,7 +4,7 @@ import './styles.scss';
 
 const debug = false;
 
-export const DragAndDrop = () => {
+export const useDragAndDrop = () => {
   const [isDragOver, setIsDragOver] = useState(false);
   const { createFile } = useContext(VZCodeContext);
 
@@ -60,15 +60,11 @@ export const DragAndDrop = () => {
     [createFile],
   );
 
-  return (
-    <div
-      className={`drop-zone ${isDragOver ? 'dragover' : ''}`}
-      onDragEnter={handleDragEnter}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onDrop={handleDrop}
-    >
-      Drag files here
-    </div>
-  );
+  return {
+    isDragOver,
+    handleDragEnter,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+  };
 };

package/src/client/useFileCRUD.ts

@@ -75,20 +75,30 @@ export const useFileCRUD = ({
       oldName: string,
       newName: string,
     ) => {
+      console.log(path);
+      console.log(oldName);
       submitOperation((document: VZCodeContent) => {
         const updatedFiles = Object.keys(
           document.files,
         ).reduce((acc, key) => {
           const file = document.files[key];
           const fileName = file.name;
-          if (fileName.includes(path)) {
-            const oldNamePos = fileName.indexOf(oldName);
+          //See if it's actually in directory
+          if (fileName.includes(path + '/')) {
+            //Create New Name for System
+            const pathPart = fileName.substring(
+              0,
+              fileName.indexOf(path) + path.length,
+            );
+            const oldNamePos =
+              pathPart.lastIndexOf(oldName);
             const fileNewName =
               fileName.substring(0, oldNamePos) +
               newName +
               fileName.substring(
                 oldNamePos + oldName.length,
               );
+            //Return with new names
             acc[key] = { ...file, name: fileNewName };
           } else {
             acc[key] = file;

package/src/client/useTypeScript/worker.ts

@@ -260,6 +260,10 @@ onmessage = async ({ data }) => {
       // Not valid in TypeScript, but common in JavaScript.
       const LINT_ERROR_CODE_NON_EXISTENT_PROPERTY = 2339;
 
+      // "Type 'Set<unknown>' can only be iterated through when using the '--downlevelIteration'
+      // flag or with a '--target' of 'es2015' or higher."
+      const LINT_ERROR_CODE_ITERATED_THROUGH = 2802;
+
       if (debug) {
         console.log(tsErrors);
       }
@@ -271,7 +275,8 @@ onmessage = async ({ data }) => {
           error.code !== LINT_ERROR_CODE_ANY_TYPE &&
           error.code !== LINT_ERROR_CODE_ANY_TYPE_KEYS &&
           error.code !==
-            LINT_ERROR_CODE_NON_EXISTENT_PROPERTY,
+            LINT_ERROR_CODE_NON_EXISTENT_PROPERTY &&
+          error.code !== LINT_ERROR_CODE_ITERATED_THROUGH,
       );
       // }
       tsErrors = convertToCodeMirrorDiagnostic(tsErrors);

package/src/server/computeInitialDocument.js

@@ -8,8 +8,7 @@ import {
 } from './featureFlags.js';
 import createIgnore from 'ignore';
 import { ignoreFilePattern, baseIgnore } from './config.js';
-
-const isDirectory = (file) => file.endsWith('/');
+import { isDirectory } from './isDirectory.js';
 
 /**
  * @param {string} fullPath - absolut path of the workspace root

package/src/server/generateAIResponse.js

@@ -100,10 +100,9 @@ export const generateAIResponse = async ({
 
     shareDBDoc.submitOp(op, { source: AISourceName });
 
-    // Wait for 500ms
     if (slowdown) {
       await new Promise((resolve) => {
-        setTimeout(resolve, 1000);
+        setTimeout(resolve, 2000);
       });
     }
 

package/src/server/index.js

@@ -14,6 +14,7 @@ import bodyParser from 'body-parser';
 import { json1Presence } from '../ot.js';
 import { computeInitialDocument } from './computeInitialDocument.js';
 import { handleAIAssist } from './handleAIAssist.js';
+import { isDirectory } from './isDirectory.js';
 
 // The time in milliseconds by which auto-saving is debounced.
 const autoSaveDebounceTimeMS = 800;
@@ -114,6 +115,9 @@ const save = () => {
     ...currentDocument.files,
     ...previousDocument.files,
   });
+
+  const directoriesToDelete = [];
+
   for (const key of allKeys) {
     const previous = previousDocument.files[key];
     const current = currentDocument.files[key];
@@ -125,9 +129,69 @@ const save = () => {
         fs.writeFileSync(current.name, current.text);
       }
 
+      // // Handle renaming files.
+      // if (previous.name !== current.name) {
+
+      //   const previousPath = previous.name.split('/');
+      //   const currentPath = current.name.split('/');
+
+      //   // - If the path is length 1 for previous and current,
+      //   //   then this should be true.
+      //   // - If the path length is the sane for previous and current,
+      //   //   AND all the entries leading up to the last one are the same
+      //   //   between previous and current, AND the last entry in the arrays
+      //   //   (the file name itself) is different between previous and current
+      //   const onlyFileNameChanged =
+      //     (previousPath.length === 1 &&
+      //       currentPath.length === 1) ||
+      //     (previousPath.length === currentPath.length &&
+      //       previousPath
+      //         .slice(0, -1)
+      //         .every(
+      //           (val, index) => val === currentPath[index],
+      //         ) &&
+      //       previousPath.at(-1) !== currentPath.at(-1));
+
+      //   // This logic works if only the file name itself changes.
+      //   if (onlyFileNameChanged) {
+      //     fs.renameSync(previous.name, current.name);
+      //   }
+      //   {
+      //     // If we get here, then the directory may have been renamed,
+      //     // or the file has been moved between directories.
+      //     // If we get here, then the directory may have been renamed,
+      //     // or the file has been moved between directories.
+      //     const newDir = path.dirname(current.name);
+
+      //     // Check if the new directory exists, if not, create it
+      //     if (!fs.existsSync(newDir)) {
+      //       fs.mkdirSync(newDir, { recursive: true });
+      //     }
+
+      //     // Move the file to the new directory
+      //     fs.renameSync(previous.name, current.name);
+      //   }
+      // }
       // Handle renaming files.
       if (previous.name !== current.name) {
-        fs.renameSync(previous.name, current.name);
+        if (isDirectory(previous.name)) {
+          // If the directory itself is being renamed,
+          // Phase I: Ignore it, and get the files moved
+          // Phase II: Keep track of these, and delete them after
+          //           all the files moved.
+          // directoriesToDelete.push(previous.name)
+          directoriesToDelete.push(previous.name);
+        } else {
+          const newDir = path.dirname(current.name);
+
+          // Check if the new directory exists, if not, create it
+          if (!fs.existsSync(newDir)) {
+            fs.mkdirSync(newDir, { recursive: true });
+          }
+
+          // Move the file to the new directory
+          fs.renameSync(previous.name, current.name);
+        }
       }
     }
 
@@ -158,6 +222,23 @@ const save = () => {
       fs.writeFileSync(current.name, current.text);
     }
   }
+  // TODO deleted all directories under directoriesToDelete
+
+  for (const dir of directoriesToDelete) {
+    //Performs directory deletion.
+    fs.rm(
+      dir,
+      {
+        recursive: true, //Makes sure that all files in directory are deleted.
+      },
+      (error) => {
+        if (error) {
+          console.log(error);
+        }
+      },
+    );
+  }
+
   previousDocument = currentDocument;
 };
 

package/src/server/isDirectory.js

@@ -0,0 +1 @@
+export const isDirectory = (file) => file.endsWith('/');