npm - vzcode - Versions diffs - 1.9.0 → 1.11.0 - Mend

vzcode 1.9.0 → 1.11.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-BRLn2sA_.js → index-BSuijdti.js} +56 -56
package/dist/index.html +1 -1
package/package.json +7 -7
package/src/client/CodeEditor/getOrCreateEditor.ts +50 -13
package/src/client/CodeEditor/index.tsx +2 -0
package/src/client/CodeEditor/json1PresenceDisplay.ts +128 -90
package/src/client/Icons/index.tsx +0 -1
package/src/client/VZCodeContext.tsx +3 -7
package/src/client/VZSidebar/FileListing.tsx +38 -4
package/src/client/VZSidebar/Item.tsx +2 -1
package/src/client/VZSidebar/Search.tsx +4 -40
package/src/types.ts +7 -70
package/src/client/Icons/SearchFileSVG.tsx +0 -19

package/dist/index.html CHANGED Viewed

@@ -20,7 +20,7 @@
       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-BRLn2sA_.js"></script>
+    <script type="module" crossorigin src="/assets/index-BSuijdti.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-BKRpkJER.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -140,14 +140,14 @@
     "json0-ot-diff": "^1.1.2",
     "ngrok": "^4.3.3",
     "open": "^10.1.0",
-    "openai": "^4.52.3",
+    "openai": "^4.52.5",
     "prettier-plugin-svelte": "^3.2.5",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.1",
     "sharedb": "^5.0.2",
-    "sharedb-client-browser": "^5.0.1",
+    "sharedb-client-browser": "^5.0.2",
     "vizhub-ui": "^3.23.0",
     "ws": "^8.18.0"
   },
@@ -157,13 +157,13 @@
     "@vitejs/plugin-react": "^4.3.1",
     "concurrently": "^8.2.2",
     "prettier": "^3.3.2",
-    "sass": "^1.77.6",
+    "sass": "^1.77.7",
     "typescript": "^5.5.3",
     "vite": "^5.3.3",
-    "vitest": "^1.6.0"
+    "vitest": "^2.0.2"
   },
   "optionalDependencies": {
-    "@rollup/rollup-darwin-arm64": "^4.18.0",
-    "@rollup/rollup-win32-x64-msvc": "^4.18.0"
+    "@rollup/rollup-darwin-arm64": "^4.18.1",
+    "@rollup/rollup-win32-x64-msvc": "^4.18.1"
   }
 }

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

@@ -40,6 +40,9 @@ import { keymap } from '@codemirror/view';
 import { basicSetup } from './basicSetup';
 import { InteractRule } from '@replit/codemirror-interact';
 import rainbowBrackets from '../CodeEditor/rainbowBrackets';
+import { TabState } from '../vzReducer';
+import { cssLanguage } from '@codemirror/lang-css';
+import { javascriptLanguage } from '@codemirror/lang-javascript';
 // Feature flag to enable TypeScript completions & TypeScript Linter.
 const enableTypeScriptCompletions = true;
@@ -49,6 +52,26 @@ const enableTypeScriptLinter = true;
 const tsx = () =>
   javascript({ jsx: true, typescript: true });
+const htmlConfig = {
+  matchClosingTags: true,
+  selfClosingTags: false,
+  autoCloseTags: true,
+  extraTags: {},
+  extraGlobalAttributes: {},
+  nestedLanguages: [
+    {
+      tag: 'script',
+      language: javascript,
+      parser: javascriptLanguage.parser,
+    },
+    {
+      tag: 'style',
+      language: css,
+      parser: cssLanguage.parser,
+    },
+  ],
+  nestedAttributes: [],
+};
 // Language extensions for CodeMirror.
 // Keys are file extensions.
 // Values are CodeMirror extensions.
@@ -59,7 +82,7 @@ const languageExtensions = {
   js: tsx,
   jsx: tsx,
   ts: tsx,
-  html,
+  html: () => html(htmlConfig),
   css,
   md: markdown,
   svelte,
@@ -93,6 +116,7 @@ export const getOrCreateEditor = ({
   customInteractRules,
   allowGlobals,
   enableAutoFollowRef,
+  openTab,
 }: {
   fileId: FileId;
@@ -126,6 +150,7 @@ export const getOrCreateEditor = ({
   // Ref to a boolean that determines whether to
   // enable auto-following the cursors of remote users.
   enableAutoFollowRef: React.MutableRefObject<boolean>;
+  openTab: (tabState: TabState) => void;
 }): EditorCacheValue => {
   // Cache hit
   if (editorCache.has(fileId)) {
@@ -146,6 +171,7 @@ export const getOrCreateEditor = ({
   let themeCompartment = new Compartment();
   // The CodeMirror extensions to use.
+  // const extensions = [autocompletion(), html(htmlConfig)]
   const extensions = [];
   // This plugin implements multiplayer editing,
@@ -179,6 +205,7 @@ export const getOrCreateEditor = ({
           path: textPath,
           docPresence,
           enableAutoFollowRef,
+          openTab,
         }),
       );
     }
@@ -266,18 +293,28 @@ export const getOrCreateEditor = ({
   // );
   // Add the extension that provides TypeScript completions.
-  if (enableTypeScriptCompletions) {
-    extensions.push(
-      autocompletion({
-        override: [
-          typeScriptCompletions({
-            typeScriptWorker,
-            fileName: name,
-          }),
-        ],
-      }),
-    );
-  }
+  // only add this if it's TS-compatible (.js, .jsx, .ts, .tsx)
+  const isTypeScript =
+    fileExtension === 'js' ||
+    fileExtension === 'jsx' ||
+    fileExtension === 'ts' ||
+    fileExtension === 'tsx';
+  extensions.push(
+    autocompletion(
+      isTypeScript
+        ? {
+            override: [
+              typeScriptCompletions({
+                typeScriptWorker,
+                fileName: name,
+              }),
+            ],
+          }
+        : undefined,
+    ),
+  );
   if (shareDBDoc && enableTypeScriptLinter) {
     extensions.push(
       linter(

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

@@ -38,6 +38,7 @@ export const CodeEditor = ({
     theme,
     codeEditorRef,
     enableAutoFollow,
+    openTab,
   } = useContext(VZCodeContext);
   // Set `doc.data.isInteracting` to `true` when the user is interacting
@@ -97,6 +98,7 @@ export const CodeEditor = ({
         customInteractRules,
         allowGlobals,
         enableAutoFollowRef,
+        openTab,
       }),
     [
       activeFileId,

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

@@ -6,7 +6,13 @@ import {
 } from '@codemirror/view';
 import { Annotation, RangeSet } from '@codemirror/state';
 import ColorHash from 'color-hash';
-import { Username } from '../../types';
+import {
+  FileId,
+  Presence,
+  PresenceId,
+  Username,
+} from '../../types';
+import { TabState } from '../vzReducer';
 const debug = false;
@@ -26,6 +32,12 @@ export const json1PresenceDisplay = ({
   path,
   docPresence,
   enableAutoFollowRef,
+  openTab,
+}: {
+  path: Array<string>;
+  docPresence: any;
+  enableAutoFollowRef: React.MutableRefObject<boolean>;
+  openTab: (tabState: TabState) => void;
 }) => [
   ViewPlugin.fromClass(
     class {
@@ -44,113 +56,139 @@ export const json1PresenceDisplay = ({
         // Mutable state local to this closure representing aggregated presence.
         //  * Keys are presence ids
         //  * Values are presence objects as defined by ot-json1-presence
-        const presenceState = {};
+        const presenceState: Record<PresenceId, Presence> =
+          {};
         // Add the scroll event listener
         //This runs for the arrow key scrolling, it should result in the users scrolling to eachother's location.
-        view.dom.addEventListener('scroll', () => {
-          this.scrollToCursor(view);
-        });
+        // view.dom.addEventListener('scroll', () => {
+        //   this.scrollToCursor(view);
+        // });
         // Receive remote presence changes.
-        docPresence.on('receive', (id, presence) => {
-          if (debug) {
-            console.log(
-              `Received presence for id ${id}`,
+        docPresence.on(
+          'receive',
+          (id: PresenceId, presence: Presence) => {
+            if (debug) {
+              console.log(
+                `Received presence for id ${id}`,
+                presence,
+              ); // Debug statement
+            }
+            // If presence === null, the user has disconnected / exited
+            if (!presence) {
+              delete presenceState[id];
+              return;
+            }
+            // Check if the presence is for the current file or not.
+            const isPresenceInCurrentFile = pathMatches(
+              path,
               presence,
-            ); // Debug statement
-          }
-          // If presence === null, the user has disconnected / exited
-          // We also check if the presence is for the current file or not.
-          if (presence && pathMatches(path, presence)) {
-            presenceState[id] = presence;
-          } else {
-            delete presenceState[id];
-          }
-          // Update decorations to reflect new presence state.
-          // TODO consider mutating this rather than recomputing it on each change.
+            );
+            // If the presence is in the current file, update the presence state.
+            if (isPresenceInCurrentFile) {
+              presenceState[id] = presence;
+            } else if (presence) {
+              // Otherwise, delete the presence state.
+              delete presenceState[id];
-          const presenceDecorations = [];
+              // If auto-follow is enabled, and the presence is NOT
+              // in the current file, then open the tab of the other user.
+              if (enableAutoFollowRef.current) {
+                openTab({
+                  fileId: presence.start[1] as FileId,
+                  isTransient: true,
+                });
+              }
+            }
+            // Update decorations to reflect new presence state.
+            // TODO consider mutating this rather than recomputing it on each change.
-          // Object.keys(presenceState).map((id) => {
-          for (const id of Object.keys(presenceState)) {
-            const presence = presenceState[id];
-            const { start, end } = presence;
-            const from = start[start.length - 1];
-            const to = end[end.length - 1];
-            const userColor = new ColorHash({
-              lightness: 0.75,
-            }).rgb(id);
-            const { username } = presence;
+            const presenceDecorations = [];
-            presenceDecorations.push({
-              from,
-              to: from,
-              value: Decoration.widget({
-                side: -1,
-                block: false,
-                widget: new PresenceWidget(
-                  // TODO see if we can figure out why
-                  // updateDOM was not being called when passing
-                  // the presence id as the id
-                  // id,
-                  '' + Math.random(),
-                  userColor,
-                  username,
-                ),
-              }),
-            });
+            // Object.keys(presenceState).map((id) => {
+            for (const id of Object.keys(presenceState)) {
+              const presence: Presence = presenceState[id];
+              const { start, end } = presence;
+              const from = +start[start.length - 1];
+              const to = +end[end.length - 1];
+              const userColor = new ColorHash({
+                lightness: 0.75,
+              }).rgb(id);
+              const { username } = presence;
-            // This is `true` when the presence is a cursor,
-            // with no selection.
-            if (from !== to) {
-              // This is the case when the presence is a selection.
               presenceDecorations.push({
                 from,
-                to,
-                value: Decoration.mark({
-                  class: 'cm-json1-presence',
-                  attributes: {
-                    style: `
+                to: from,
+                value: Decoration.widget({
+                  side: -1,
+                  block: false,
+                  widget: new PresenceWidget(
+                    // TODO see if we can figure out why
+                    // updateDOM was not being called when passing
+                    // the presence id as the id
+                    // id,
+                    '' + Math.random(),
+                    userColor,
+                    username,
+                  ),
+                }),
+              });
+              // This is `true` when the presence is a cursor,
+              // with no selection.
+              if (from !== to) {
+                // This is the case when the presence is a selection.
+                presenceDecorations.push({
+                  from,
+                  to,
+                  value: Decoration.mark({
+                    class: 'cm-json1-presence',
+                    attributes: {
+                      style: `
                       background-color: rgba(${userColor}, 0.75);
                       mix-blend-mode: luminosity;
                       `,
-                  },
-                }),
-              });
+                    },
+                  }),
+                });
+              }
+              if (view.state.doc.length >= from) {
+                // Ensure position is valid
+                this.cursorPosition[id] = from; // Store the cursor position, important to run if we cant get the regular scroll to work
+                // console.log(`Stored cursor position for id ${id}: ${from}`); // Debug statement
+              } else {
+                // console.warn(`Invalid cursor position for id ${id}: ${from}`); // Debug statement
+              }
             }
-            if (view.state.doc.length >= from) {
-              // Ensure position is valid
-              this.cursorPosition[id] = from; // Store the cursor position, important to run if we cant get the regular scroll to work
-              // console.log(`Stored cursor position for id ${id}: ${from}`); // Debug statement
-            } else {
-              // console.warn(`Invalid cursor position for id ${id}: ${from}`); // Debug statement
-            }
-          }
-          this.decorations = Decoration.set(
-            presenceDecorations,
-            // Without this argument, we get the following error:
-            // Uncaught Error: Ranges must be added sorted by `from` position and `startSide`
-            true,
-          );
+            this.decorations = Decoration.set(
+              presenceDecorations,
+              // Without this argument, we get the following error:
+              // Uncaught Error: Ranges must be added sorted by `from` position and `startSide`
+              true,
+            );
-          // Somehow this triggers re-rendering of the Decorations.
-          // Not sure if this is the correct usage of the API.
-          // Inspired by https://github.com/yjs/y-codemirror.next/blob/main/src/y-remote-selections.js
-          // Set timeout so that the current CodeMirror update finishes
-          // before the next ones that render presence begin.
-          setTimeout(() => {
-            view.dispatch({
-              annotations: [presenceAnnotation.of(true)],
-            });
-          }, 0);
+            // Somehow this triggers re-rendering of the Decorations.
+            // Not sure if this is the correct usage of the API.
+            // Inspired by https://github.com/yjs/y-codemirror.next/blob/main/src/y-remote-selections.js
+            // Set timeout so that the current CodeMirror update finishes
+            // before the next ones that render presence begin.
+            setTimeout(() => {
+              view.dispatch({
+                annotations: [presenceAnnotation.of(true)],
+              });
+            }, 0);
-          // Auto-follow all users when their presence is broadcast
-          // by scrolling them into view.
-          if (enableAutoFollowRef.current) {
-            this.scrollToCursor(view);
-          }
-        });
+            // Auto-follow all users when their presence is broadcast
+            // by scrolling them into view.
+            if (enableAutoFollowRef.current) {
+              this.scrollToCursor(view);
+            }
+          },
+        );
       }
       // Method to scroll the view to keep the cursor in view
       scrollToCursor(view) {

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

@@ -13,7 +13,6 @@ export { QuestionMarkSVG } from './QuestionMarkSVG';
 export { PinSVG } from './PinSVG';
 export { FolderSVG } from './FolderSVG';
 export { SearchSVG } from './SearchSVG';
-export { SearchFileSVG } from './SearchFileSVG';
 export { JavaScriptSVG } from './JavaScriptSVG';
 export { TypeScriptSVG } from './TypeScriptSVG';
 export { ReactSVG } from './ReactSVG';

package/src/client/VZCodeContext.tsx CHANGED Viewed

@@ -52,7 +52,9 @@ export type VZCodeContextValue = {
   submitOperation: (
     next: (content: VZCodeContent) => VZCodeContent,
   ) => void;
+  // TODO pull in this type from ShareDB if possible
   localPresence: any;
+  // TODO pull in this type from ShareDB if possible
   docPresence: any;
   files: Files | null;
@@ -76,13 +78,7 @@ export type VZCodeContextValue = {
   setActiveFileRight: () => void;
   tabList: Array<TabState>;
-  openTab: ({
-    fileId,
-    isTransient,
-  }: {
-    fileId: string;
-    isTransient?: boolean;
-  }) => void;
+  openTab: (tabState: TabState) => void;
   closeTabs: (fileIds: string[]) => void;
   isSettingsOpen: boolean;

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

@@ -1,9 +1,45 @@
 import { useCallback, useContext } from 'react';
 import { Item } from './Item';
 import { FileId } from '../../types';
-import { FileSVG } from '../Icons';
+import {
+  FileSVG,
+  JavaScriptSVG,
+  TypeScriptSVG,
+  ReactSVG,
+  SvelteSVG,
+  JsonSVG,
+  MarkdownSVG,
+  HtmlSVG,
+  CssSVG,
+} from '../Icons';
 import { VZCodeContext } from '../VZCodeContext';
+export function getExtensionIcon(fileName: string) {
+  const extension = fileName.split('.');
+  switch (extension[extension.length - 1]) {
+    case 'jsx':
+    case 'tsx':
+      return <ReactSVG />;
+    case 'js':
+      return <JavaScriptSVG />;
+    case 'ts':
+      return <TypeScriptSVG />;
+    case 'json':
+      return <JsonSVG />;
+    case 'md':
+      return <MarkdownSVG />;
+    case 'html':
+      return <HtmlSVG />;
+    case 'css':
+      return <CssSVG />;
+    case 'svelte':
+      return <SvelteSVG />;
+    default:
+      return <FileSVG />;
+  }
+}
 export const FileListing = ({
   name,
   fileId,
@@ -49,9 +85,7 @@ export const FileListing = ({
       handleRenameClick={handleRenameClick}
       isActive={isActive}
     >
-      <i className="file-icon">
-        <FileSVG />
-      </i>
+      <i className="file-icon">{getExtensionIcon(name)}</i>
       {name}
     </Item>
   );

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

@@ -12,6 +12,7 @@ import { Tooltip, OverlayTrigger } from '../bootstrap';
 import { DeleteConfirmationModal } from './DeleteConfirmationModal';
 import { VZCodeContext } from '../VZCodeContext';
 import { ItemId } from '../../types';
+import { getExtensionIcon } from './FileListing';
 // TODO support renaming directories
 // See https://github.com/vizhub-core/vzcode/issues/103
@@ -169,7 +170,7 @@ export const Item = ({
         {isRenaming ? (
           <>
             <i className="file-icon">
-              <FileSVG />
+              {getExtensionIcon(renameValue)}
             </i>
             <input
               className="rename-input"

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

@@ -1,16 +1,3 @@
-import {
-  JavaScriptSVG,
-  TypeScriptSVG,
-  ReactSVG,
-  SvelteSVG,
-  JsonSVG,
-  MarkdownSVG,
-  HtmlSVG,
-  CssSVG,
-  SearchFileSVG,
-  DirectoryArrowSVG,
-  CloseSVG,
-} from '../Icons';
 import {
   useRef,
   useEffect,
@@ -21,30 +8,8 @@ import { Form } from '../bootstrap';
 import { VZCodeContext } from '../VZCodeContext';
 import { SearchFile } from '../../types';
 import { EditorView } from 'codemirror';
-function getExtensionIcon(extension: string) {
-  switch (extension) {
-    case 'jsx':
-    case 'tsx':
-      return <ReactSVG />;
-    case 'js':
-      return <JavaScriptSVG />;
-    case 'ts':
-      return <TypeScriptSVG />;
-    case 'json':
-      return <JsonSVG />;
-    case 'md':
-      return <MarkdownSVG />;
-    case 'html':
-      return <HtmlSVG />;
-    case 'css':
-      return <CssSVG />;
-    case 'svelte':
-      return <SvelteSVG />;
-    default:
-      return <SearchFileSVG />;
-  }
-}
+import { getExtensionIcon } from './FileListing';
+import { CloseSVG, DirectoryArrowSVG } from '../Icons';
 function jumpToPattern(
   editor: EditorView,
@@ -102,6 +67,7 @@ export const Search = () => {
       return () => clearTimeout(delaySearch);
     } else {
       setIsMounted(true);
+      inputRef.current.focus();
     }
   }, [pattern]);
@@ -151,9 +117,7 @@ export const Search = () => {
                       <DirectoryArrowSVG />
                     </div>
                     <div className="search-file-name">
-                      {getExtensionIcon(
-                        file.name.split('.')[1],
-                      )}
+                      {getExtensionIcon(file.name)}
                       <h5>{file.name}</h5>
                     </div>
                   </div>