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

vzcode 0.77.0 → 0.79.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 (11) hide show

package/dist/assets/{index-DVG2p8p3.js → index-DZXcjW4O.js} +51 -51
package/dist/assets/{index-B1DSqTuG.css → index-WtPPom-d.css} +1 -1
package/dist/assets/{worker-CPGExEr5.js → worker-Bp-D5zJz.js} +63 -63
package/dist/assets/{worker-Cy8ajBgn.js → worker-DHoGVnSk.js} +190 -190
package/dist/index.html +2 -2
package/package.json +5 -5
package/src/client/CodeEditor/getOrCreateEditor.ts +41 -25
package/src/client/CodeEditor/index.tsx +24 -56
package/src/client/VZCodeContext.tsx +3 -3
package/src/client/VZMiddle.tsx +1 -15
package/src/client/VZSidebar/styles.scss +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-DVG2p8p3.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-B1DSqTuG.css">
+    <script type="module" crossorigin src="/assets/index-DZXcjW4O.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-WtPPom-d.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.77.0",
+  "version": "0.79.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -95,12 +95,12 @@
     "d3-array": "^3.2.4",
     "diff-match-patch": "^1.0.5",
     "dotenv": "^16.4.5",
-    "express": "^4.18.3",
+    "express": "^4.19.1",
     "ignore": "^5.3.1",
     "json0-ot-diff": "^1.1.2",
     "ngrok": "^4.3.3",
     "open": "^10.1.0",
-    "openai": "^4.29.1",
+    "openai": "^4.29.2",
     "prettier-plugin-svelte": "^3.2.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
@@ -118,8 +118,8 @@
     "concurrently": "^8.2.2",
     "prettier": "^3.2.5",
     "sass": "^1.72.0",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.6",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.3",
     "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;
@@ -121,7 +124,6 @@ export const VZCodeProvider = ({
   initialUsername,
   children,
   codeError = null,
-  enableManualPretter = true,
   connected,
 }: {
   content: VZCodeContent;
@@ -134,7 +136,6 @@ export const VZCodeProvider = ({
   initialUsername: Username;
   children: React.ReactNode;
   codeError?: string | null;
-  enableManualPretter?: boolean;
   connected: boolean;
 }) => {
   // Auto-run Pretter after local changes.
@@ -150,7 +151,6 @@ export const VZCodeProvider = ({
     shareDBDoc,
     submitOperation,
     prettierWorker,
-    enableManualPretter,
   });
   const runCodeRef = useRunCode(submitOperation);

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/styles.scss CHANGED Viewed

@@ -157,6 +157,7 @@
 }
 .drop-zone {
+  height: 100%;
   border: 3px solid #0a1731;
   width: auto;
   color: #bdc7dc;