npm - vzcode - Versions diffs - 0.76.0 → 0.77.0 - Mend

vzcode 0.76.0 → 0.77.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/assets/{index-BpuOxvvE.css → index-B1DSqTuG.css} +1 -1
package/dist/assets/{index--cETBO9l.js → index-DVG2p8p3.js} +48 -48
package/dist/assets/{worker-BCgDdjKY.js → worker-CPGExEr5.js} +45 -45
package/dist/index.html +2 -2
package/package.json +8 -8
package/src/client/VZSidebar/index.tsx +104 -89
package/src/client/VZSidebar/styles.scss +11 -12
package/src/client/VZSidebar/{DragAndDrop.tsx → useDragAndDrop.tsx} +8 -12
package/src/client/useFileCRUD.ts +12 -2
package/src/client/useTypeScript/worker.ts +6 -1
package/src/server/computeInitialDocument.js +1 -2
package/src/server/index.js +82 -1
package/src/server/isDirectory.js +1 -0

package/dist/index.html CHANGED Viewed

@@ -20,8 +20,8 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index--cETBO9l.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BpuOxvvE.css">
+    <script type="module" crossorigin src="/assets/index-DVG2p8p3.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-B1DSqTuG.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.76.0",
+  "version": "0.77.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -71,9 +71,9 @@
     "@codemirror/lang-markdown": "^6.2.4",
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.25.1",
+    "@codemirror/view": "^6.26.0",
     "@lezer/highlight": "^1.2.0",
-    "@replit/codemirror-indentation-markers": "^6.5.0",
+    "@replit/codemirror-indentation-markers": "^6.5.1",
     "@replit/codemirror-interact": "^6.3.0",
     "@replit/codemirror-lang-svelte": "^6.0.0",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
@@ -100,10 +100,10 @@
     "json0-ot-diff": "^1.1.2",
     "ngrok": "^4.3.3",
     "open": "^10.1.0",
-    "openai": "^4.28.4",
+    "openai": "^4.29.1",
     "prettier-plugin-svelte": "^3.2.2",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.10.1",
+    "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "sharedb": "^4.1.2",
@@ -112,14 +112,14 @@
     "ws": "^8.16.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.65",
+    "@types/react": "^18.2.67",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.2.1",
     "concurrently": "^8.2.2",
     "prettier": "^3.2.5",
-    "sass": "^1.71.1",
+    "sass": "^1.72.0",
     "typescript": "^5.4.2",
     "vite": "^5.1.6",
-    "vitest": "^1.3.1"
+    "vitest": "^1.4.0"
   }
 }

package/src/client/VZSidebar/index.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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} RENAMED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/index.js CHANGED Viewed

@@ -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 ADDED Viewed

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