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

vzcode 0.80.0 → 0.82.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 (21) hide show

package/dist/assets/{index-FsyJOC4a.js → index-BKQfM_WG.js} +52 -52
package/dist/assets/{worker-DrXASJTP.js → worker-1ri6mpan.js} +52 -52
package/dist/index.html +1 -1
package/package.json +4 -4
package/src/client/AIAssist/AIAssistWidget/index.tsx +16 -17
package/src/client/CodeEditor/getOrCreateEditor.ts +9 -1
package/src/client/CodeEditor/index.tsx +10 -1
package/src/client/CodeEditor/typeScriptLinter.ts +2 -0
package/src/client/CodeEditor/widgets.ts +176 -168
package/src/client/TabList/index.tsx +13 -19
package/src/client/VZCodeContext.tsx +12 -0
package/src/client/VZMiddle.tsx +10 -29
package/src/client/VZSettings.tsx +43 -9
package/src/client/VZSidebar/DirectoryListing.tsx +12 -32
package/src/client/VZSidebar/FileListing.tsx +6 -5
package/src/client/VZSidebar/Item.tsx +30 -10
package/src/client/VZSidebar/Listing.tsx +6 -30
package/src/client/VZSidebar/index.tsx +0 -7
package/src/client/useTypeScript/requestTypes.ts +3 -0
package/src/client/useTypeScript/worker.ts +23 -3
package/src/types.ts +5 -1

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-FsyJOC4a.js"></script>
+    <script type="module" crossorigin src="/assets/index-BKQfM_WG.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-J8-kRnnE.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.80.0",
+  "version": "0.82.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -74,7 +74,7 @@
     "@codemirror/view": "^6.26.0",
     "@lezer/highlight": "^1.2.0",
     "@replit/codemirror-indentation-markers": "^6.5.1",
-    "@replit/codemirror-interact": "^6.3.0",
+    "@replit/codemirror-interact": "^6.3.1",
     "@replit/codemirror-lang-svelte": "^6.0.0",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@teamwork/websocket-json-stream": "^2.0.0",
@@ -95,7 +95,7 @@
     "d3-array": "^3.2.4",
     "diff-match-patch": "^1.0.5",
     "dotenv": "^16.4.5",
-    "express": "^4.19.1",
+    "express": "^4.19.2",
     "ignore": "^5.3.1",
     "json0-ot-diff": "^1.1.2",
     "ngrok": "^4.3.3",
@@ -112,7 +112,7 @@
     "ws": "^8.16.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.69",
+    "@types/react": "^18.2.72",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.2.1",
     "concurrently": "^8.2.2",

package/src/client/AIAssist/AIAssistWidget/index.tsx CHANGED Viewed

@@ -1,12 +1,6 @@
 import { useCallback, useContext, useState } from 'react';
-import {
-  FileId,
-  ShareDBDoc,
-  VZCodeContent,
-} from '../../../types';
 import { OverlayTrigger, Tooltip } from '../../bootstrap';
-import { EditorCache } from '../../useEditorCache';
-import { TabState } from '../../vzReducer';
+import { VZCodeContext } from '../../VZCodeContext';
 import {
   RequestId,
   generateRequestId,
@@ -14,30 +8,24 @@ import {
 import { SparklesSVG } from '../../Icons';
 import { startAIAssist } from '../startAIAssist';
 import { Spinner } from '../Spinner';
-import { VZCodeContext } from '../../VZCodeContext';
 import './style.scss';
 const enableStopGeneration = false;
 export const AIAssistWidget = ({
-  activeFileId,
-  shareDBDoc,
-  editorCache,
-  tabList,
   aiAssistEndpoint,
   aiAssistOptions,
   aiAssistTooltipText = 'Start AI Assist',
   aiAssistClickOverride,
 }: {
-  activeFileId: FileId;
-  shareDBDoc: ShareDBDoc<VZCodeContent>;
-  editorCache: EditorCache;
-  tabList: Array<TabState>;
   aiAssistEndpoint: string;
   aiAssistOptions: { [key: string]: string };
   aiAssistTooltipText?: string;
   aiAssistClickOverride?: () => void;
 }) => {
+  const { shareDBDoc, activeFileId, tabList, editorCache } =
+    useContext(VZCodeContext);
   // The stream ID of the most recent request.
   //  * If `null`, no request has been made yet.
   //  * If non-null, a request has been made, and the
@@ -67,6 +55,17 @@ export const AIAssistWidget = ({
         aiAssistOptions,
       });
+      // Introduce a delay before running Prettier
+      // and the code, to give the ShareDB ops a chance
+      // to be applied and to propagate via WebSockets
+      // to the client. This is necessary because sometimes
+      // the ShareDB ops from the AI assist actually don't
+      // reach the client until AFTER the response comes back
+      // from `await startAIAssist`.
+      await new Promise((resolve) =>
+        setTimeout(resolve, 1000),
+      );
       // Trigger a Prettier run after the AI Assist.
       const runPrettier = runPrettierRef.current;
       if (runPrettier !== null) {
@@ -81,7 +80,7 @@ export const AIAssistWidget = ({
       // Handles the case that the user has started,
       // stopped, and started again before the first request
-      // has finished, bu comparing the current stream ID
+      // has finished, by comparing the current stream ID
       // with the stream ID that was active when the request
       // was started.
       setAiStreamId((currentAIStreamId) =>

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

@@ -39,6 +39,7 @@ import { typeScriptCompletions } from './typeScriptCompletions';
 import { typeScriptLinter } from './typeScriptLinter';
 import { keymap } from '@codemirror/view';
 import { basicSetup } from './basicSetup';
+import { InteractRule } from '@replit/codemirror-interact';
 // Feature flag to enable TypeScript completions & TypeScript Linter.
 const enableTypeScriptCompletions = true;
@@ -89,6 +90,8 @@ export const getOrCreateEditor = ({
   editorCache,
   usernameRef,
   typeScriptWorker,
+  customInteractRules,
+  allowGlobals,
 }: {
   fileId: FileId;
@@ -116,6 +119,8 @@ export const getOrCreateEditor = ({
   usernameRef: React.MutableRefObject<Username>;
   aiAssistEndpoint?: string;
   typeScriptWorker: Worker;
+  customInteractRules?: Array<InteractRule>;
+  allowGlobals: boolean;
 }): EditorCacheValue => {
   // Cache hit
   if (editorCache.has(fileId)) {
@@ -234,7 +239,9 @@ export const getOrCreateEditor = ({
   // the boolean checkboxes. The color pickers are also tricky,
   // as they would also need to be able to handle `onInteractEnd`.
   // See https://github.com/replit/codemirror-interact/issues/14
-  extensions.push(widgets({ onInteract }));
+  extensions.push(
+    widgets({ onInteract, customInteractRules }),
+  );
   extensions.push(highlightWidgets);
@@ -271,6 +278,7 @@ export const getOrCreateEditor = ({
           fileName: name,
           shareDBDoc,
           fileId,
+          allowGlobals,
         }) as unknown as () => Diagnostic[],
         //Needs the unknown because we are returning a Promise<Diagnostic>
       ),

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

@@ -9,12 +9,19 @@ import { Username } from '../../types';
 import { EditorCacheValue } from '../useEditorCache';
 import { getOrCreateEditor } from './getOrCreateEditor';
 import { VZCodeContext } from '../VZCodeContext';
+import { InteractRule } from '@replit/codemirror-interact';
 import './style.scss';
 // The path in the ShareDB document where the files live.
 const filesPath = ['files'];
-export const CodeEditor = () => {
+export const CodeEditor = ({
+  customInteractRules,
+  allowGlobals,
+}: {
+  customInteractRules?: Array<InteractRule>;
+  allowGlobals: boolean;
+}) => {
   const {
     activeFileId,
     shareDBDoc,
@@ -79,6 +86,8 @@ export const CodeEditor = () => {
         editorCache,
         usernameRef,
         typeScriptWorker,
+        customInteractRules,
+        allowGlobals,
       }),
     [
       activeFileId,

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

@@ -10,6 +10,7 @@ export const typeScriptLinter = ({
   fileName,
   shareDBDoc,
   fileId,
+  allowGlobals,
 }) => {
   return async () => {
     const requestId = generateRequestId();
@@ -20,6 +21,7 @@ export const typeScriptLinter = ({
       fileName,
       fileContent,
       requestId,
+      allowGlobals,
     };
     typeScriptWorker.postMessage(linterRequest);

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

@@ -1,7 +1,11 @@
 // TODO move back to this way of importing when this PR is merged:
 // https://github.com/replit/codemirror-interact/pull/19/files
-// import interact from '@replit/codemirror-interact';
-import interact from './codemirror-interact';
+import interact, {
+  InteractRule,
+} from '@replit/codemirror-interact';
+// import interact, {
+//   InteractRule,
+// } from './codemirror-interact';
 import {
   ViewPlugin,
@@ -11,6 +15,9 @@ import {
 import { Extension, RangeSet } from '@codemirror/state';
 import { EditorView } from 'codemirror';
+// Regular expression for hex colors.
+const colorRegex = /#[0-9A-Fa-f]{6}/g;
 // Interactive code widgets.
 //  * Number dragger
 //  * Boolean toggler
@@ -21,181 +28,181 @@ import { EditorView } from 'codemirror';
 // `onInteract` is called when the user interacts with a widget.
 export const widgets = ({
   onInteract,
+  customInteractRules,
 }: {
   onInteract?: () => void;
-}) =>
-  interact({
-    rules: [
-      // hex color picker
-      // Inspired by https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L71
-      // Extended to support single and double quotes
-      {
-        regexp: /["']\#([0-9]|[A-F]|[a-f]){6}["']/g,
-        cursor: 'pointer',
-        onClick(text, setText, e) {
-          const res =
-            /(?<quote>["'])(?<hex>\#([0-9]|[A-F]|[a-f]){6})\k<quote>/.exec(
-              text,
+  customInteractRules?: Array<InteractRule>;
+}) => {
+  const rules: Array<InteractRule> = [
+    // hex color picker
+    // Inspired by https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L71
+    // Works without quotes to support CSS.
+    {
+      regexp: colorRegex,
+      cursor: 'pointer',
+      onClick(
+        text: string,
+        setText: (newText: string) => void,
+      ) {
+        const startingColor: string = text;
+        const sel: HTMLInputElement =
+          document.createElement('input');
+        sel.type = 'color';
+        sel.value = startingColor.toLowerCase();
+        // valueIsUpper maintains the style of the user's code. It keeps the case of a-f the same case as the original.
+        const valueIsUpper: boolean =
+          startingColor.toUpperCase() === startingColor;
+        const updateHex = (e: Event) => {
+          const el: HTMLInputElement =
+            e.target as HTMLInputElement;
+          if (el.value) {
+            setText(
+              valueIsUpper
+                ? el.value.toUpperCase()
+                : el.value,
             );
-          const startingColor = res.groups?.hex;
-          const quoteType = res.groups?.quote;
-          const sel = document.createElement('input');
-          sel.type = 'color';
-          sel.value = startingColor.toLowerCase();
-          //valueIsUpper maintains style of user's code. It keeps the case of a-f the same case as the original."
-          const valueIsUpper =
-            startingColor.toUpperCase() === startingColor;
-          const updateHex = (e: Event) => {
-            const el = e.target as HTMLInputElement;
-            if (onInteract) onInteract();
-            if (el.value) {
-              setText(
-                `${quoteType}${
-                  valueIsUpper
-                    ? el.value.toUpperCase()
-                    : el.value
-                }${quoteType}`,
-              );
-            }
-          };
-          sel.addEventListener('input', updateHex);
-          sel.click();
-        },
+          }
+        };
+        sel.addEventListener('input', updateHex);
+        sel.click();
       },
+    },
-      // a rule for a number dragger
-      {
-        // the regexp matching the value
-        regexp: /(?<!\#)-?\b\d+\.?\d*\b/g,
-        // set cursor to "ew-resize" on hover
-        cursor: 'ew-resize',
-        // change number value based on mouse X movement on drag
-        onDrag: (text, setText, e) => {
-          if (onInteract) onInteract();
-          const newVal = Number(text) + e.movementX;
-          if (isNaN(newVal)) return;
-          setText(newVal.toString());
-        },
+    // a rule for a number dragger
+    {
+      // the regexp matching the value
+      regexp: /(?<!\#)-?\b\d+\.?\d*\b/g,
+      // set cursor to "ew-resize" on hover
+      cursor: 'ew-resize',
+      // change number value based on mouse X movement on drag
+      onDrag: (text, setText, e) => {
+        if (onInteract) onInteract();
+        const newVal = Number(text) + e.movementX;
+        if (isNaN(newVal)) return;
+        setText(newVal.toString());
       },
-      // bool toggler
-      {
-        regexp: /true|false/g,
-        cursor: 'pointer',
-        onClick: (text, setText) => {
-          if (onInteract) onInteract();
-          switch (text) {
-            case 'true':
-              return setText('false');
-            case 'false':
-              return setText('true');
-          }
-        },
+    },
+    // bool toggler
+    {
+      regexp: /true|false/g,
+      cursor: 'pointer',
+      onClick: (text, setText) => {
+        if (onInteract) onInteract();
+        switch (text) {
+          case 'true':
+            return setText('false');
+          case 'false':
+            return setText('true');
+        }
       },
-      // vec2 slider
-      // Inspired by: https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L61
-      {
-        regexp:
-          /vec2\(-?\b\d+\.?\d*\b\s*(,\s*-?\b\d+\.?\d*\b)?\)/g,
-        cursor: 'move',
-        onDrag: (text, setText, e) => {
-          const res =
-            /vec2\((?<x>-?\b\d+\.?\d*\b)\s*(,\s*(?<y>-?\b\d+\.?\d*\b))?\)/.exec(
-              text,
-            );
-          const x = Number(res?.groups?.x);
-          let y = Number(res?.groups?.y);
-          if (isNaN(x)) return;
-          if (isNaN(y)) y = x;
-          setText(
-            `vec2(${x + e.movementX}, ${y - e.movementY})`,
+    },
+    // vec2 slider
+    // Inspired by: https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L61
+    {
+      regexp:
+        /vec2\(-?\b\d+\.?\d*\b\s*(,\s*-?\b\d+\.?\d*\b)?\)/g,
+      cursor: 'move',
+      onDrag: (text, setText, e) => {
+        const res =
+          /vec2\((?<x>-?\b\d+\.?\d*\b)\s*(,\s*(?<y>-?\b\d+\.?\d*\b))?\)/.exec(
+            text,
           );
-        },
+        const x = Number(res?.groups?.x);
+        let y = Number(res?.groups?.y);
+        if (isNaN(x)) return;
+        if (isNaN(y)) y = x;
+        setText(
+          `vec2(${x + e.movementX}, ${y - e.movementY})`,
+        );
       },
-      // rgb color picker
-      // Inspired by https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L71
-      //TODO: create color picker for hsl colors
-      {
-        regexp: /rgb\(.*\)/g,
-        cursor: 'pointer',
-        onClick: (text, setText, e) => {
-          const res =
-            /rgb\((?<r>\d+)\s*,\s*(?<g>\d+)\s*,\s*(?<b>\d+)\)/.exec(
-              text,
-            );
-          const r = Number(res?.groups?.r);
-          const g = Number(res?.groups?.g);
-          const b = Number(res?.groups?.b);
-          //sel will open the color picker when sel.click is called.
-          const sel = document.createElement('input');
-          sel.type = 'color';
-          if (!isNaN(r + g + b))
-            sel.value = rgb2Hex(r, g, b);
-          const updateRGB = (e: Event) => {
-            const el = e.target as HTMLInputElement;
-            if (onInteract) onInteract();
-            if (el.value) {
-              const [r, g, b] = hex2RGB(el.value);
-              setText(`rgb(${r}, ${g}, ${b})`);
-            }
-            sel.removeEventListener('change', updateRGB);
-          };
+    },
+    // rgb color picker
+    // Inspired by https://github.com/replit/codemirror-interact/blob/master/dev/index.ts#L71
+    //TODO: create color picker for hsl colors
+    {
+      regexp: /rgb\(.*\)/g,
+      cursor: 'pointer',
+      onClick: (text, setText, e) => {
+        const res =
+          /rgb\((?<r>\d+)\s*,\s*(?<g>\d+)\s*,\s*(?<b>\d+)\)/.exec(
+            text,
+          );
+        const r = Number(res?.groups?.r);
+        const g = Number(res?.groups?.g);
+        const b = Number(res?.groups?.b);
-          sel.addEventListener('change', updateRGB);
-          sel.click();
-        },
+        //sel will open the color picker when sel.click is called.
+        const sel = document.createElement('input');
+        sel.type = 'color';
+        if (!isNaN(r + g + b)) sel.value = rgb2Hex(r, g, b);
+        const updateRGB = (e: Event) => {
+          const el = e.target as HTMLInputElement;
+          if (onInteract) onInteract();
+          if (el.value) {
+            const [r, g, b] = hex2RGB(el.value);
+            setText(`rgb(${r}, ${g}, ${b})`);
+          }
+          sel.removeEventListener('change', updateRGB);
+        };
+        sel.addEventListener('change', updateRGB);
+        sel.click();
       },
-      // url clicker
-      {
-        regexp: /https?:\/\/[^ "]+/g,
-        cursor: 'pointer',
-        onClick: (text) => {
-          window.open(text);
-        },
+    },
+    // url clicker
+    {
+      regexp: /https?:\/\/[^ ")]+/g,
+      cursor: 'pointer',
+      onClick: (text) => {
+        window.open(text);
       },
+    },
-      //Set rotation to the angle between the x-axis and a line from the word "rotate" to the mouse pointer  (while dragging).
-      //The rotation is in range (-180,180]
-      {
-        regexp: /rotate\(-?\d*\.?\d*\)/g,
-        cursor: 'move',
-        onDragStart(text, setText, e) {
-          rotationOrigin = { x: e.clientX, y: e.clientY };
-        },
+    //Set rotation to the angle between the x-axis and a line from the word "rotate" to the mouse pointer  (while dragging).
+    //The rotation is in range (-180,180]
+    {
+      regexp: /rotate\(-?\d*\.?\d*\)/g,
+      cursor: 'move',
+      onDragStart(text, setText, e) {
+        rotationOrigin = { x: e.clientX, y: e.clientY };
+      },
-        onDrag(text, setText, e) {
-          if (rotationOrigin == null) return;
-          const rotationDegree = Math.round(
-            (Math.atan2(
-              rotationOrigin.y - e.clientY,
-              e.clientX - rotationOrigin.x,
-            ) *
-              180) /
-              Math.PI,
-          );
-          //Calculate the angle between the x axis and a line from where the user first clicks to the current location of the mouse.
-          setText(`rotate(${rotationDegree})`);
-          const updateDragEvent = new CustomEvent(
-            'updateRotateDrag',
-            { detail: rotationDegree },
-          );
+      onDrag(text, setText, e) {
+        if (rotationOrigin == null) return;
+        const rotationDegree = Math.round(
+          (Math.atan2(
+            rotationOrigin.y - e.clientY,
+            e.clientX - rotationOrigin.x,
+          ) *
+            180) /
+            Math.PI,
+        );
+        //Calculate the angle between the x axis and a line from where the user first clicks to the current location of the mouse.
+        setText(`rotate(${rotationDegree})`);
+        const updateDragEvent = new CustomEvent(
+          'updateRotateDrag',
+          { detail: rotationDegree },
+        );
-          document.dispatchEvent(updateDragEvent);
-        },
-        onDragEnd(text, setText) {
-          rotationOrigin = null;
-        },
+        document.dispatchEvent(updateDragEvent);
+      },
+      onDragEnd() {
+        rotationOrigin = null;
       },
-    ],
-  });
+    },
+  ];
+  if (customInteractRules) {
+    rules.push(...customInteractRules);
+  }
+  return interact({ rules });
+};
 let rotationOrigin: { x: number; y: number } = null;
@@ -244,7 +251,8 @@ export const colorsInTextPlugin: Extension = [
           }
           const hexColorOccurences = line.value.matchAll(
             // /\"\#([0-9]|[A-F]|[a-f]){6}\"/g,
-            /["']\#([0-9]|[A-F]|[a-f]){6}["']/g,
+            // /["']\#([0-9]|[A-F]|[a-f]){6}["']/g,
+            colorRegex,
           );
           let hexOccurance = hexColorOccurences.next();
           while (!hexOccurance.done) {
@@ -260,9 +268,9 @@ export const colorsInTextPlugin: Extension = [
         return Decoration.set(
           colorInfos.map((colorInfo) => {
             return {
-              // 9 is the length of the hex color string including quotation marks
-              from: colorInfo.index + 9,
-              to: colorInfo.index + 9,
+              // 7 is the length of the hex color string
+              from: colorInfo.index + 7,
+              to: colorInfo.index + 7,
               value: Decoration.widget({
                 side: -1,
                 widget: new ColorWidget(colorInfo[0]),
@@ -288,10 +296,10 @@ class ColorWidget extends WidgetType {
     return widget.color === this.color;
   }
-  toDOM(view: EditorView): HTMLElement {
+  toDOM(): HTMLElement {
     const parent = document.createElement('div');
     const size = 20;
-    const innerSize = 16;
+    const innerSize = 14;
     parent.setAttribute(
       'style',
@@ -311,7 +319,7 @@ class ColorWidget extends WidgetType {
       'fill',
       this.color.replace(/["']/g, ''),
     );
-    colorCircle.setAttributeNS(null, 'stroke', 'black');
+    // colorCircle.setAttributeNS(null, 'stroke', 'black');
     colorCircle.setAttributeNS(
       null,
       'r',

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

@@ -1,26 +1,20 @@
-import type { TabState } from '../vzReducer';
-import type { FileId, Files } from '../../types';
+import { useContext } from 'react';
+import { VZCodeContext } from '../VZCodeContext';
+import { TabState } from '../vzReducer';
 import { Tab } from './Tab';
 import './style.scss';
 // Displays the list of tabs above the code editor.
-export const TabList = ({
-  files,
-  tabList,
-  activeFileId,
-  setActiveFileId,
-  openTab,
-  closeTabs,
-  createFile,
-}: {
-  files: Files;
-  tabList: Array<TabState>;
-  activeFileId: FileId;
-  setActiveFileId: (fileId: FileId) => void;
-  openTab: (tabState: TabState) => void;
-  closeTabs: (fileIds: FileId[]) => void;
-  createFile: (fileName: string) => void;
-}) => {
+export const TabList = () => {
+  const {
+    files,
+    activeFileId,
+    setActiveFileId,
+    tabList,
+    openTab,
+    closeTabs,
+  } = useContext(VZCodeContext);
   return (
     <div className="vz-tab-list">
       {files &&