npm - vzcode - Versions diffs - 0.78.0 → 0.80.0 - Mend

vzcode 0.78.0 → 0.80.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 (14) hide show

package/dist/assets/{index-Cv26Z85N.js → index-FsyJOC4a.js} +38 -38
package/dist/assets/{index-WtPPom-d.css → index-J8-kRnnE.css} +1 -1
package/dist/assets/{worker-RqaVTR5D.js → worker-DHoGVnSk.js} +190 -190
package/dist/assets/{worker-CPGExEr5.js → worker-DrXASJTP.js} +66 -66
package/dist/index.html +2 -2
package/package.json +14 -14
package/src/client/CodeEditor/getOrCreateEditor.ts +41 -25
package/src/client/CodeEditor/index.tsx +24 -56
package/src/client/VZCodeContext.tsx +3 -0
package/src/client/VZMiddle.tsx +1 -15
package/src/client/VZSidebar/index.tsx +93 -91
package/src/client/VZSidebar/styles.scss +10 -18
package/src/client/useFileCRUD.ts +1 -1
package/src/client/useTypeScript/worker.ts +3 -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-Cv26Z85N.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-WtPPom-d.css">
+    <script type="module" crossorigin src="/assets/index-FsyJOC4a.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-J8-kRnnE.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.78.0",
+  "version": "0.80.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -79,15 +79,15 @@
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@teamwork/websocket-json-stream": "^2.0.0",
     "@typescript/vfs": "^1.5.0",
-    "@uiw/codemirror-theme-abcdef": "^4.21.24",
-    "@uiw/codemirror-theme-dracula": "^4.21.24",
-    "@uiw/codemirror-theme-eclipse": "^4.21.24",
-    "@uiw/codemirror-theme-github": "^4.21.24",
-    "@uiw/codemirror-theme-material": "^4.21.24",
-    "@uiw/codemirror-theme-nord": "^4.21.24",
-    "@uiw/codemirror-theme-okaidia": "^4.21.24",
-    "@uiw/codemirror-theme-xcode": "^4.21.24",
-    "@uiw/codemirror-themes": "^4.21.24",
+    "@uiw/codemirror-theme-abcdef": "^4.21.25",
+    "@uiw/codemirror-theme-dracula": "^4.21.25",
+    "@uiw/codemirror-theme-eclipse": "^4.21.25",
+    "@uiw/codemirror-theme-github": "^4.21.25",
+    "@uiw/codemirror-theme-material": "^4.21.25",
+    "@uiw/codemirror-theme-nord": "^4.21.25",
+    "@uiw/codemirror-theme-okaidia": "^4.21.25",
+    "@uiw/codemirror-theme-xcode": "^4.21.25",
+    "@uiw/codemirror-themes": "^4.21.25",
     "body-parser": "^1.20.2",
     "codemirror": "^6.0.1",
     "codemirror-ot": "^4.4.0",
@@ -95,7 +95,7 @@
     "d3-array": "^3.2.4",
     "diff-match-patch": "^1.0.5",
     "dotenv": "^16.4.5",
-    "express": "^4.19.0",
+    "express": "^4.19.1",
     "ignore": "^5.3.1",
     "json0-ot-diff": "^1.1.2",
     "ngrok": "^4.3.3",
@@ -112,14 +112,14 @@
     "ws": "^8.16.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.67",
+    "@types/react": "^18.2.69",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.2.1",
     "concurrently": "^8.2.2",
     "prettier": "^3.2.5",
     "sass": "^1.72.0",
-    "typescript": "^5.4.2",
-    "vite": "^5.2.2",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.6",
     "vitest": "^1.4.0"
   }
 }

package/src/client/CodeEditor/getOrCreateEditor.ts CHANGED Viewed

@@ -80,6 +80,7 @@ const getAtPath = (obj, path) => {
 export const getOrCreateEditor = ({
   fileId,
   shareDBDoc,
+  content,
   filesPath,
   localPresence,
   docPresence,
@@ -98,7 +99,13 @@ export const getOrCreateEditor = ({
   //    based on the file extension.
   // It's also passed into the `json1Sync` extension,
   // which is used for multiplayer editing.
-  shareDBDoc: ShareDBDoc<VZCodeContent>;
+  // This can be `undefined` in the case where we are
+  // viewing files read-only, in which case multiplayer
+  // editing is not enabled.
+  shareDBDoc: ShareDBDoc<VZCodeContent> | undefined;
+  // The initial content to present.
+  content: VZCodeContent;
   filesPath: string[];
   localPresence: any;
@@ -118,11 +125,10 @@ export const getOrCreateEditor = ({
   // Cache miss
   // Compute `text` and `fileExtension` from the ShareDB document.
-  const data = shareDBDoc.data;
   const textPath = [...filesPath, fileId, 'text'];
   const namePath = [...filesPath, fileId, 'name'];
-  const text = getAtPath(data, textPath);
-  const name = getAtPath(data, namePath);
+  const text = getAtPath(content, textPath);
+  const name = getAtPath(content, namePath);
   const fileExtension = name.split('.').pop();
   // Create a compartment for the theme so that it can be changed dynamically.
@@ -135,31 +141,41 @@ export const getOrCreateEditor = ({
   // This plugin implements multiplayer editing,
   // real-time synchronozation of changes across clients.
   // Does not deal with showing others' cursors.
-  extensions.push(
-    json1Sync({
-      shareDBDoc,
-      path: textPath,
-      json1: json1Presence,
-      textUnicode,
-    }),
-  );
-  // Deals with broadcasting changes in cursor location and selection.
-  if (localPresence) {
+  if (shareDBDoc) {
     extensions.push(
-      json1PresenceBroadcast({
+      json1Sync({
+        shareDBDoc,
         path: textPath,
-        localPresence,
-        usernameRef,
+        json1: json1Presence,
+        textUnicode,
       }),
     );
-  }
-  // Deals with receiving the broadcas from other clients and displaying them.
-  if (docPresence)
-    extensions.push(
-      json1PresenceDisplay({ path: textPath, docPresence }),
-    );
+    // Deals with broadcasting changes in cursor location and selection.
+    if (localPresence) {
+      extensions.push(
+        json1PresenceBroadcast({
+          path: textPath,
+          localPresence,
+          usernameRef,
+        }),
+      );
+    }
+    // Deals with receiving the broadcas from other clients and displaying them.
+    if (docPresence) {
+      extensions.push(
+        json1PresenceDisplay({
+          path: textPath,
+          docPresence,
+        }),
+      );
+    }
+  } else {
+    // If the ShareDB document is not provided,
+    // then we do not allow editing.
+    extensions.push(EditorView.editable.of(false));
+  }
   extensions.push(colorsInTextPlugin);
@@ -247,7 +263,7 @@ export const getOrCreateEditor = ({
       }),
     );
   }
-  if (enableTypeScriptLinter) {
+  if (shareDBDoc && enableTypeScriptLinter) {
     extensions.push(
       linter(
         typeScriptLinter({

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

@@ -3,66 +3,33 @@ import {
   useLayoutEffect,
   useCallback,
   useMemo,
+  useContext,
 } from 'react';
-import {
-  FileId,
-  ShareDBDoc,
-  Username,
-  VZCodeContent,
-} from '../../types';
-import { ThemeLabel, defaultTheme } from '../themes';
-import {
-  EditorCache,
-  EditorCacheValue,
-} from '../useEditorCache';
+import { Username } from '../../types';
+import { EditorCacheValue } from '../useEditorCache';
 import { getOrCreateEditor } from './getOrCreateEditor';
+import { VZCodeContext } from '../VZCodeContext';
 import './style.scss';
-export const CodeEditor = ({
-  activeFileId,
-  shareDBDoc,
-  submitOperation,
-  localPresence,
-  docPresence,
-  theme = defaultTheme,
-  filesPath = ['files'],
-  editorCache,
-  editorWantsFocus,
-  editorNoLongerWantsFocus,
-  username,
-  typeScriptWorker,
-}: {
-  activeFileId: FileId;
-  shareDBDoc: ShareDBDoc<VZCodeContent> | null;
-  submitOperation: (
-    next: (content: VZCodeContent) => VZCodeContent,
-  ) => void;
-  localPresence?: any;
-  docPresence?: any;
-  theme?: ThemeLabel;
-  // The path of the files object in the ShareDB document.
-  // Defaults to `files` if not provided.
-  filesPath?: string[];
-  editorCache: EditorCache;
-  // Whether the editor should be focused.
-  editorWantsFocus: boolean;
-  // Signals that the editor no longer wants focus.
-  editorNoLongerWantsFocus: () => void;
-  username: Username;
-  // The server endpoint for the AI Assist service.
-  aiAssistEndpoint?: string;
+// The path in the ShareDB document where the files live.
+const filesPath = ['files'];
+export const CodeEditor = () => {
+  const {
+    activeFileId,
+    shareDBDoc,
+    content,
+    submitOperation,
+    localPresence,
+    docPresence,
+    username,
+    editorCache,
+    editorWantsFocus,
+    editorNoLongerWantsFocus,
+    typeScriptWorker,
+    theme,
+  } = useContext(VZCodeContext);
-  // Additional options to pass to the AI Assist service,
-  // an object with string values.
-  aiAssistOptions?: {
-    [key: string]: string;
-  };
-  typeScriptWorker: Worker;
-}) => {
   const ref = useRef<HTMLDivElement>(null);
   // Set `doc.data.isInteracting` to `true` when the user is interacting
@@ -103,6 +70,7 @@ export const CodeEditor = ({
       getOrCreateEditor({
         fileId: activeFileId,
         shareDBDoc,
+        content,
         filesPath,
         localPresence,
         docPresence,
@@ -132,7 +100,7 @@ export const CodeEditor = ({
   useLayoutEffect(() => {
     // Guard against cases where page is still loading.
     if (!ref.current) return;
-    if (!shareDBDoc) return;
+    if (!content) return;
     // Add the editor to the DOM.
     ref.current.appendChild(editorCacheValue.editor.dom);

package/src/client/VZCodeContext.tsx CHANGED Viewed

@@ -91,7 +91,10 @@ export type VZCodeContextValue = {
   toggleDirectory: (path: string) => void;
   editorCache: EditorCache;
+  // Whether the editor should be focused.
   editorWantsFocus: boolean;
+  // Signals that the editor no longer wants focus.
   editorNoLongerWantsFocus: () => void;
   errorMessage: string | null;

package/src/client/VZMiddle.tsx CHANGED Viewed

@@ -76,21 +76,7 @@ export const VZMiddle = ({
         createFile={createFile}
       />
       {isClient && content && activeFileId && (
-        <CodeEditor
-          shareDBDoc={shareDBDoc}
-          submitOperation={submitOperation}
-          localPresence={localPresence}
-          docPresence={docPresence}
-          activeFileId={activeFileId}
-          theme={theme}
-          editorCache={editorCache}
-          editorWantsFocus={editorWantsFocus}
-          editorNoLongerWantsFocus={
-            editorNoLongerWantsFocus
-          }
-          username={username}
-          typeScriptWorker={typeScriptWorker}
-        />
+        <CodeEditor />
       )}
       {isClient &&
       enableAIAssist &&

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

@@ -94,121 +94,123 @@ export const VZSidebar = ({
   return (
     <div
-      className={`drop-zone ${isDragOver ? 'dragover' : ''}`}
+      className="vz-sidebar"
+      style={{ width: sidebarWidth + 'px' }}
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      <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>
-                }
+      <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"
               >
-                <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>
-              )}
+                <i className="icon-button icon-button-dark">
+                  <BugSVG />
+                </i>
+              </a>
+            </OverlayTrigger>
+            {disableSettings ? null : (
               <OverlayTrigger
                 placement="left"
                 overlay={
-                  <Tooltip id="create-file-tooltip">
-                    {createFileTooltipText}
+                  <Tooltip id="open-settings-tooltip">
+                    {openSettingsTooltipText}
                   </Tooltip>
                 }
               >
                 <i
-                  onClick={handleOpenCreateFileModal}
+                  onClick={handleSettingsClick}
                   className="icon-button icon-button-dark"
                 >
-                  <NewSVG />
+                  <GearSVG />
                 </i>
               </OverlayTrigger>
-            </div>
+            )}
+            <OverlayTrigger
+              placement="left"
+              overlay={
+                <Tooltip id="create-file-tooltip">
+                  {createFileTooltipText}
+                </Tooltip>
+              }
+            >
+              <i
+                onClick={handleOpenCreateFileModal}
+                className="icon-button icon-button-dark"
+              >
+                <NewSVG />
+              </i>
+            </OverlayTrigger>
           </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>
-        {enableConnectionStatus && (
-          <div className="connection-status">
-            {connected ? 'Connected' : 'Connection Lost'}
-            <div className="connection">
-              <div
-                className={`connection-status-indicator ${
-                  connected ? 'connected' : 'disconnected'
-                }`}
+        {isDragOver ? (
+          <div className="empty">
+            <div className="empty-text">
+              Drop files here!
+            </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>
+      {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

@@ -127,11 +127,17 @@
     padding: 20px;
     border: 1px dashed rgba(255, 255, 255, 0.5); /* White dashed outline */
     border-radius: 10px;
-  }
-  .empty-text {
-    margin-bottom: 10px;
-    font-size: 14px;
+    /*
+     * This fixes some issues where the drop zone for files
+     * was flickering when dragging files over the sidebar.
+     */
+    pointer-events: none;
+    .empty-text {
+      font-size: 16px;
+      font-weight: 500;
+    }
   }
   .connection-status {
@@ -155,17 +161,3 @@
     }
   }
 }
-.drop-zone {
-  height: 100%;
-  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;
-}

package/src/client/useFileCRUD.ts CHANGED Viewed

@@ -132,7 +132,7 @@ export const useFileCRUD = ({
       submitOperation((document: VZCodeContent) => {
         const updatedFiles = { ...document.files };
         for (const key in updatedFiles) {
-          if (updatedFiles[key].name.includes(path)) {
+          if (updatedFiles[key].name.includes(path + '/')) {
             tabsToClose.push(key);
             delete updatedFiles[key];
           }

package/src/client/useTypeScript/worker.ts CHANGED Viewed

@@ -53,6 +53,9 @@ const initializeFileSystem = async () => {
     // Skip type checking of declaration files
     skipLibCheck: true,
+    // Support React JSX
+    jsx: ts.JsxEmit.React,
   };
   // `true` breaks in a Web Worker because