npm - vzcode - Versions diffs - 0.81.0 → 0.83.0 - Mend

vzcode 0.81.0 → 0.83.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 (23) hide show

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-CnwdGSLW.js"></script>
+    <script type="module" crossorigin src="/assets/index-CnHJy69d.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.81.0",
+  "version": "0.83.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",
@@ -112,7 +112,7 @@
     "ws": "^8.16.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.71",
+    "@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

@@ -55,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) {
@@ -69,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/App/index.tsx CHANGED Viewed

@@ -92,7 +92,7 @@ function App() {
       >
         <div className="app">
           <VZLeft />
-          <VZMiddle />
+          <VZMiddle allowGlobals={true} />
           {enableRightPanel ? <VZRight /> : null}
           <VZResizer side="left" />
           {enableRightPanel ? (

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

@@ -91,6 +91,7 @@ export const getOrCreateEditor = ({
   usernameRef,
   typeScriptWorker,
   customInteractRules,
+  allowGlobals,
 }: {
   fileId: FileId;
@@ -119,6 +120,7 @@ export const getOrCreateEditor = ({
   aiAssistEndpoint?: string;
   typeScriptWorker: Worker;
   customInteractRules?: Array<InteractRule>;
+  allowGlobals: boolean;
 }): EditorCacheValue => {
   // Cache hit
   if (editorCache.has(fileId)) {
@@ -276,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,16 +9,18 @@ import { Username } from '../../types';
 import { EditorCacheValue } from '../useEditorCache';
 import { getOrCreateEditor } from './getOrCreateEditor';
 import { VZCodeContext } from '../VZCodeContext';
-import './style.scss';
 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 = ({
   customInteractRules,
+  allowGlobals,
 }: {
   customInteractRules?: Array<InteractRule>;
+  allowGlobals: boolean;
 }) => {
   const {
     activeFileId,
@@ -85,6 +87,7 @@ export const CodeEditor = ({
         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,9 +1,6 @@
-// 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, {
   InteractRule,
-} from './codemirror-interact';
+} from '@replit/codemirror-interact';
 import {
   ViewPlugin,
@@ -56,6 +53,7 @@ export const widgets = ({
         const updateHex = (e: Event) => {
           const el: HTMLInputElement =
             e.target as HTMLInputElement;
+          if (onInteract) onInteract();
           if (el.value) {
             setText(
               valueIsUpper

package/src/client/VZMiddle.tsx CHANGED Viewed

@@ -22,6 +22,7 @@ export const VZMiddle = ({
   aiAssistTooltipText,
   aiAssistClickOverride,
   customInteractRules,
+  allowGlobals = false,
 }: {
   enableAIAssist?: boolean;
   aiAssistEndpoint?: string;
@@ -29,6 +30,7 @@ export const VZMiddle = ({
   aiAssistTooltipText?: string;
   aiAssistClickOverride?: () => void;
   customInteractRules?: Array<InteractRule>;
+  allowGlobals?: boolean;
 }) => {
   const { codeEditorWidth } = useContext(
     SplitPaneResizeContext,
@@ -58,6 +60,7 @@ export const VZMiddle = ({
       {isClient && content && activeFileId && (
         <CodeEditor
           customInteractRules={customInteractRules}
+          allowGlobals={allowGlobals}
         />
       )}
       {isClient &&

package/src/client/VZSettings.tsx CHANGED Viewed

@@ -64,9 +64,6 @@ export const VZSettings = ({
   }, [selectedFont]);
   useEffect(() => {
-    // const fontSize = event.target.value;
-    // const root = document.documentElement;
-    // root.style.setProperty('--vzcode-font-size', fontSize);
     document.body.style.setProperty(
       '--vzcode-font-size',
       selectedFontSize,
@@ -109,7 +106,6 @@ export const VZSettings = ({
         <Form.Group className="mb-3" controlId="formFork">
           <Form.Label>Theme</Form.Label>
           <select
             className="form-select"
             value={theme}
@@ -121,7 +117,6 @@ export const VZSettings = ({
               </option>
             ))}
           </select>
           <Form.Text className="text-muted">
             Select a color theme for the editor
           </Form.Text>
@@ -129,7 +124,6 @@ export const VZSettings = ({
         <Form.Group className="mb-3" controlId="formFork">
           <Form.Label>Font</Form.Label>
           <select
             className="form-select"
             onChange={handleFontChange}
@@ -141,7 +135,6 @@ export const VZSettings = ({
               </option>
             ))}
           </select>
           <Form.Text className="text-muted">
             Select font for the editor
           </Form.Text>
@@ -149,7 +142,6 @@ export const VZSettings = ({
         <Form.Group className="mb-3" controlId="formFork">
           <Form.Label>Font Size</Form.Label>
           <select
             className="form-select"
             onChange={handleFontSizeChange}
@@ -161,11 +153,53 @@ export const VZSettings = ({
               </option>
             ))}
           </select>
           <Form.Text className="text-muted">
             Select a font size for the editor
           </Form.Text>
         </Form.Group>
+        {/* Keyboard Shortcuts Documentation */}
+        <Form.Group className="mb-3" controlId="formFork">
+          <Form.Label>Keyboard Shortcuts</Form.Label>
+          <ul>
+            <li>
+              <strong>Alt-w</strong> <span>⌥W</span>
+              <br />
+              <span>Close the current tab</span>
+            </li>
+            <li>
+              <strong>Alt-n</strong> <span>⌥N</span>
+              <br />
+              <span>Open the create file modal</span>
+            </li>
+            <li>
+              <strong>Alt-PageUp</strong> <span>⌥⇞</span>
+              <br />
+              <span>
+                Change the active tab to the previous one
+              </span>
+            </li>
+            <li>
+              <strong>Alt-PageDown</strong> <span>⌥⇟</span>
+              <br />
+              <span>
+                Change the active tab to the next one
+              </span>
+            </li>
+            <li>
+              <strong>Ctrl-s</strong> or{' '}
+              <strong>Shift-Enter</strong> <span>⌘S</span>{' '}
+              or <span>⇧↩</span>
+              <br />
+              <span>
+                Run the code and format it with Prettier
+              </span>
+            </li>
+          </ul>
+          <Form.Text className="text-muted">
+            Keyboard shortcuts for quick actions
+          </Form.Text>
+        </Form.Group>
       </Modal.Body>
       <Modal.Footer>
         <Button variant="primary" onClick={closeSettings}>

package/src/client/useTypeScript/worker/constants.ts ADDED Viewed

@@ -0,0 +1,73 @@
+import ts from 'typescript';
+export const compilerOptions: ts.CompilerOptions = {
+  lib: ['dom', 'esnext'],
+  // Disable warnings around "Any type".
+  noImplicitAny: false,
+  // Disable warnings around "Implicit any in parameter".
+  noImplicitThis: false,
+  // Allow JavaScript files to be processed
+  allowJs: true,
+  // Disable type checking for JavaScript files
+  // checkJs: false,
+  // Skip type checking of declaration files
+  skipLibCheck: true,
+  // Support React JSX
+  jsx: ts.JsxEmit.React,
+};
+// Be less aggressive for non-TS files,
+// e.g. files that end in .js or .jsx.
+// if (!isTS(fileName)) {
+// This code is for errors like:
+// "Binding element 'data' implicitly has an 'any' type."
+const LINT_ERROR_CODE_ANY = 7031;
+// This code is for errors like:
+// "Parameter 'selection' implicitly has an 'any' type.""
+const LINT_ERROR_CODE_ANY_PARAM = 7006;
+// This code is for errors like:
+// "Cannot find module 'd3' or its corresponding type declarations."
+const LINT_ERROR_CODE_IMPORT = 2307;
+// This code is for errors like:
+// "Variable 'mic' implicitly has type 'any' in some locations where its type cannot be determined."
+const LINT_ERROR_CODE_ANY_TYPE = 7034;
+// "Element implicitly has an 'any' type because expression
+// of type '"test"' can't be used to index type '{}'."
+const LINT_ERROR_CODE_ANY_TYPE_KEYS = 7053;
+// "Property 'id' does not exist on type { ... }"
+// Happens on objects with dynamic keys.
+// 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;
+// Argument of type '{ Month: string; High: number; Temp: number; Low: number; }'
+// is not assignable to parameter of type 'never'.
+const LINT_ERROR_CODE_ASSIGNABLE_TO_NEVER = 2345;
+// Cannot find name 'd3'.
+export const LINT_ERROR_CODE_CANNOT_FIND_NAME = 2304;
+export const excludedErrorCodes = new Set([
+  LINT_ERROR_CODE_ANY,
+  LINT_ERROR_CODE_IMPORT,
+  LINT_ERROR_CODE_ANY_PARAM,
+  LINT_ERROR_CODE_ANY_TYPE,
+  LINT_ERROR_CODE_ANY_TYPE_KEYS,
+  LINT_ERROR_CODE_NON_EXISTENT_PROPERTY,
+  LINT_ERROR_CODE_ITERATED_THROUGH,
+  LINT_ERROR_CODE_ASSIGNABLE_TO_NEVER,
+]);

package/src/client/useTypeScript/worker/getTSFileName.ts ADDED Viewed

@@ -0,0 +1,4 @@
+// replace .js or .jsx with .ts or .tsx,
+// to support TypeScript completions on non-TS files.
+export const getTSFileName = (fileName: string) =>
+  fileName.replace(/\.jsx?$/, '.tsx');

package/src/client/useTypeScript/worker/handleMessageAutocompleteRequest.ts ADDED Viewed

@@ -0,0 +1,63 @@
+import { getTSFileName } from './getTSFileName';
+import { isTS } from './isTS';
+import {
+  AutocompleteRequest,
+  AutocompleteResponse,
+} from './requestTypes';
+// This function is called when the worker receives a message with the type
+// 'autocomplete-request'. It gets completions at the specified position in the
+// file and sends them back to the main thread.
+export const handleMessageAutocompleteRequest = async ({
+  debug,
+  data,
+  env,
+  setFile,
+}) => {
+  if (debug) {
+    console.log('autocomplete-request message received');
+  }
+  // Should not happen.
+  if (env === null) {
+    console.log('env is null');
+    return;
+  }
+  // Example of `data`:
+  // {
+  //   "event": "autocomplete-request",
+  //   "pos": 8,
+  //   "location": "index.js",
+  //   "requestId": "0.9090605799171392"
+  // }
+  const autocompleteRequest: AutocompleteRequest = data;
+  const { fileName, fileContent, position, requestId } =
+    autocompleteRequest;
+  const tsFileName = getTSFileName(fileName);
+  let completions = null;
+  if (isTS(tsFileName) && fileContent !== '') {
+    // Update the file in the file system to the
+    // absolute latest version. This is critical
+    // for correct completions.
+    setFile(tsFileName, fileContent);
+    completions =
+      env.languageService.getCompletionsAtPosition(
+        tsFileName,
+        position,
+        {},
+      );
+  }
+  const autocompleteResponse: AutocompleteResponse = {
+    event: 'post-completions',
+    completions,
+    requestId,
+  };
+  postMessage(autocompleteResponse);
+};

package/src/client/useTypeScript/worker/handleMessageLintRequest.ts ADDED Viewed

@@ -0,0 +1,84 @@
+import ts from 'typescript';
+import type { Diagnostic } from '@codemirror/lint';
+import {
+  LinterRequest,
+  LinterResponse,
+} from './requestTypes';
+import { getTSFileName } from './getTSFileName';
+import { isTS } from './isTS';
+import {
+  LINT_ERROR_CODE_CANNOT_FIND_NAME,
+  excludedErrorCodes,
+} from './constants';
+// Inspired by: https://stackblitz.com/edit/codemirror-6-typescript?file=client%2Findex.ts%3AL44-L44
+const convertToCodeMirrorDiagnostic = (
+  tsErrors: ts.Diagnostic[],
+): Array<Diagnostic> =>
+  tsErrors.map((tsError: ts.Diagnostic) => ({
+    from: tsError.start,
+    to: tsError.start + tsError.length,
+    severity: 'error',
+    message:
+      typeof tsError.messageText === 'string'
+        ? tsError.messageText
+        : tsError.messageText.messageText,
+  }));
+export const handleMessageLintRequest = async ({
+  debug,
+  data,
+  env,
+  setFile,
+}) => {
+  if (debug) {
+    console.log('Lint Request');
+  }
+  const linterRequest: LinterRequest = data;
+  const { fileName, fileContent, requestId, allowGlobals } =
+    linterRequest;
+  const tsFileName = getTSFileName(fileName);
+  let tsErrors = [];
+  if (isTS(tsFileName) && fileContent !== '') {
+    // We are updating the server with the latest content
+    // when we autocomplete, so it's always up to date.
+    setFile(tsFileName, fileContent);
+    // Creates an array of diagnostic objects containing
+    // both semantic and syntactic diagnostics.
+    tsErrors = env.languageService
+      .getSemanticDiagnostics(tsFileName)
+      .concat(
+        env.languageService.getSyntacticDiagnostics(
+          tsFileName,
+        ),
+      );
+    if (debug) {
+      console.log('tsErrors');
+      console.log(tsErrors);
+    }
+    tsErrors = tsErrors.filter(
+      (error: { code: number }) => {
+        if (
+          allowGlobals &&
+          error.code === LINT_ERROR_CODE_CANNOT_FIND_NAME
+        ) {
+          return false;
+        }
+        return !excludedErrorCodes.has(error.code);
+      },
+    );
+    tsErrors = convertToCodeMirrorDiagnostic(tsErrors);
+  }
+  const linterResponse: LinterResponse = {
+    event: 'post-error-linter',
+    tsErrors,
+    requestId,
+  };
+  postMessage(linterResponse);
+};

package/src/client/useTypeScript/worker/handleMessageTranspileRequest.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import ts from 'typescript';
+import { compilerOptions } from './constants';
+// Handle the transpile-request event, which
+// transpiles TypeScript to JavaScript.
+export const handleMessageTranspileRequest = async ({
+  data,
+}) => {
+  const tsCode = data.tsCode;
+  const jsCode = ts.transpileModule(tsCode, {
+    compilerOptions: compilerOptions,
+  }).outputText;
+  postMessage({
+    event: 'transpile-response',
+    jsCode,
+    fileId: data.fileId,
+  });
+};

package/src/client/useTypeScript/worker/handleMessageUpdateContent.ts ADDED Viewed

@@ -0,0 +1,38 @@
+import { File, Files, VZCodeContent } from '../../../types';
+import { getTSFileName } from './getTSFileName';
+import { isTS } from './isTS';
+// Handle the update-content event, which
+// updates the files as they change.
+// This handles the cases where:
+//  * The file system is populated for the first time.
+//  * Files are edited by remote users.
+export const handleMessageUpdateContent = async ({
+  debug,
+  data,
+  setFile,
+}) => {
+  if (debug) {
+    console.log('update-content message received');
+  }
+  // Unpack the files
+  const content: VZCodeContent = data.details;
+  const files: Files = content.files;
+  // Iterate over the files
+  for (const fileId of Object.keys(files)) {
+    const file: File = files[fileId];
+    const { name, text } = file;
+    const tsFileName = getTSFileName(name);
+    if (!isTS(tsFileName)) {
+      continue;
+    }
+    setFile(tsFileName, text);
+    // TODO - Handle renaming files.
+    // TODO - Handle deleting files.
+    // TODO - Handle directories.
+  }
+};