vzcode 0.70.0 → 0.72.0

package/src/client/useKeyboardShortcuts.ts

@@ -1,41 +1,73 @@
-import { useCallback, useEffect } from 'react';
+import { useContext, useEffect } from 'react';
+import { shouldTriggerRun } from './shouldTriggerRun';
+import { VZCodeContext } from './VZCodeContext';
 
+// This module implements the keyboard shortcuts
+// for the VZCode editor.
+// These include:
+// * Alt-w: Close the current tab
+// * Alt-n: Open the create file modal
+// * Alt-PageUp: Change the active tab to the previous one
+// * Alt-PageDown: Change the active tab to the next one
+// * Ctrl-s or Shift-Enter: Run the code and format it with Prettier
 export const useKeyboardShortcuts = ({
   closeTabs,
   activeFileId,
   handleOpenCreateFileModal,
   setActiveFileLeft,
   setActiveFileRight,
+  runPrettierRef,
+  runCodeRef,
 }) => {
-  const handleKeyPress = useCallback(
-    (event: KeyboardEvent) => {
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      if (shouldTriggerRun(event)) {
+        event.preventDefault();
+
+        // Run Prettier
+        const runPrettier = runPrettierRef.current;
+        if (runPrettier !== null) {
+          runPrettier();
+        }
+
+        // Run the code
+        const runCode = runCodeRef.current;
+        if (runCode !== null) {
+          runCode();
+        }
+        return;
+      }
+
       if (event.altKey === true) {
+        // Alt-w: Close the current tab
         if (event.key === 'w') {
+          // TODO clean this up so we can remove `activeFileId`
+          // as a dependency
+          // TODO closeActiveTab()
           closeTabs([activeFileId]);
+          return;
         }
+
+        // Alt-n: Open the create file modal
         if (event.key === 'n') {
           handleOpenCreateFileModal();
+          return;
         }
+
+        // Alt-PageUp: Change the active tab to the previous one
         if (event.key === 'PageUp') {
-          // Change the active tab to the previous one
           setActiveFileLeft();
+          return;
         }
+
+        // Alt-PageDown: Change the active tab to the next one
         if (event.key === 'PageDown') {
-          // Change the active tab to the next one
           setActiveFileRight();
+          return;
         }
       }
-    },
-    [
-      handleOpenCreateFileModal,
-      closeTabs,
-      activeFileId,
-      setActiveFileLeft,
-      setActiveFileRight,
-    ],
-  );
+    };
 
-  useEffect(() => {
     document.addEventListener('keydown', handleKeyPress);
     return () => {
       document.removeEventListener(
@@ -43,5 +75,11 @@ export const useKeyboardShortcuts = ({
         handleKeyPress,
       );
     };
-  }, [handleKeyPress]);
+  }, [
+    handleOpenCreateFileModal,
+    closeTabs,
+    activeFileId,
+    setActiveFileLeft,
+    setActiveFileRight,
+  ]);
 };

package/src/client/usePrettier/index.ts

@@ -31,14 +31,12 @@ export const usePrettier = ({
   shareDBDoc,
   submitOperation,
   prettierWorker,
-  enableManualPretter,
 }: {
   shareDBDoc: ShareDBDoc<VZCodeContent> | null;
   submitOperation: (
     next: (content: VZCodeContent) => VZCodeContent,
   ) => void;
   prettierWorker: Worker;
-  enableManualPretter: boolean;
 }) => {
   // The set of files that have been modified
   // since the last Prettier run.
@@ -139,114 +137,48 @@ export const usePrettier = ({
     };
     runPrettierRef.current = runPrettier;
 
-    let debouncePrettier;
-    let debounceTimeout;
-    let handleKeyDown;
-    if (enableManualPretter) {
-      handleKeyDown = (event: KeyboardEvent) => {
-        if (shouldTriggerRun(event)) {
-          event.preventDefault();
-          runPrettier();
-        }
-      };
-      document.addEventListener('keydown', handleKeyDown);
-    } else {
-      // Function to debounce running Prettier
-
-      debouncePrettier = () => {
-        clearTimeout(debounceTimeout);
-        debounceTimeout = setTimeout(
-          runPrettier,
-          autoPrettierDebounceTimeMS,
-        );
-      };
-      // Stops prettier from running when you perform a mouse move or a keydown
-      window.addEventListener(
-        'mousemove',
-        debouncePrettier,
-      );
-      window.addEventListener('keydown', debouncePrettier);
-    }
+    const handleOpBatch = (op: JSONOp) => {
+      // Only act on changes coming from the client
+      // OR changes coming from the AI Assist that we
+      // if (isLocal) {
+      // If the op is coming from Prettier itself,
+      // then do nothing.
+      if (isApplyingOpRef.current) {
+        // console.log('ignoring op from Prettier');
+        return;
+      }
+
+      // Check if the path of this op is the text content of a file
+      if (
+        op &&
+        op.length === 4 &&
+        op[0] === 'files' &&
+        typeof op[1] === 'string' &&
+        op[2] === 'text'
+      ) {
+        // Get the file id
+        const fileId: FileId = op[1];
+
+        // Add the file id to the set of dirty files
+        dirtyFilesRef.current.add(fileId);
+      }
+    };
 
     // Listen for changes
-    shareDBDoc.on(
-      'op batch',
-      (op: JSONOp, isLocal: boolean) => {
-        // Only act on changes coming from the client
-        // OR changes coming from the AI Assist that we
-        // if (isLocal) {
-        // If the op is coming from Prettier itself,
-        // then do nothing.
-        if (isApplyingOpRef.current) {
-          // console.log('ignoring op from Prettier');
-          return;
-        }
-
-        // Example op that we want to act on:
-        // op [
-        //   "files",
-        //   "2514857669",
-        //   "text",
-        //   {
-        //     "es": [
-        //       18,
-        //       "d"
-        //     ]
-        //   }
-        // ]
-
-        // Check if the path of this op is the text content of a file
-        if (
-          op &&
-          op.length === 4 &&
-          op[0] === 'files' &&
-          typeof op[1] === 'string' &&
-          op[2] === 'text'
-        ) {
-          // Get the file id
-          const fileId: FileId = op[1];
-
-          // Add the file id to the set of dirty files
-          dirtyFilesRef.current.add(fileId);
-
-          // Debounce running Prettier
-          if (!enableManualPretter) {
-            debouncePrettier();
-          }
-          // console.log('Op is for file', fileId);
-        }
-        // } else {
-        //   // console.log('ignoring op from remote', op, isLocal);
-        // }
-      },
-    );
+    shareDBDoc.on('op batch', handleOpBatch);
 
-    // In the event that the component unmounts,
+    // Clean up the event listeners
     return () => {
-      // Remove the event listener
       prettierWorker.removeEventListener(
         'message',
         handleMessage,
       );
-      if (enableManualPretter) {
-        document.removeEventListener(
-          'keydown',
-          handleKeyDown,
-        );
-      } else {
-        window.removeEventListener(
-          'keydown',
-          debouncePrettier,
-        );
-        window.removeEventListener(
-          'mousemove',
-          debouncePrettier,
-        );
-
-        // Clear the timeout
-        clearTimeout(debounceTimeout);
-      }
+
+      shareDBDoc.removeListener('op batch', handleOpBatch);
     };
   }, [shareDBDoc]);
-  return { prettierError, runPrettierRef }; // Return the errors for use in other files
+
+  // Return the errors and run prettier function ref
+  // for use elsewhere.
+  return { prettierError, runPrettierRef };
 };

package/src/client/useRunCode.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'react';
+import { SubmitOperation, VZCodeContent } from '../types';
+
+// Runs the code by flashing `isInteracting` to `true`.
+export const useRunCode = (
+  submitOperation: SubmitOperation,
+) => {
+  const runCodeRef = useRef(null);
+  useEffect(() => {
+    const runCode = () => {
+      submitOperation((content: VZCodeContent) => ({
+        ...content,
+        isInteracting: true,
+      }));
+      setTimeout(() => {
+        // This somewhat cryptic logic
+        // deletes the `isInteracting` property
+        // from the document.
+        submitOperation(
+          ({ isInteracting, ...newDocument }) =>
+            newDocument,
+        );
+      }, 0);
+    };
+    runCodeRef.current = runCode;
+  }, [submitOperation]);
+  return runCodeRef;
+};

package/src/client/useTypeScript/worker.ts

@@ -240,6 +240,11 @@ onmessage = async ({ data }) => {
         // 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;
+
         if (debug) {
           console.log(tsErrors);
         }
@@ -249,7 +254,9 @@ onmessage = async ({ data }) => {
             error.code !== LINT_ERROR_CODE_IMPORT &&
             error.code !== LINT_ERROR_CODE_ANY_PARAM &&
             error.code !== LINT_ERROR_CODE_ANY_TYPE &&
-            error.code !== LINT_ERROR_CODE_ANY_TYPE_KEYS,
+            error.code !== LINT_ERROR_CODE_ANY_TYPE_KEYS &&
+            error.code !==
+              LINT_ERROR_CODE_NON_EXISTENT_PROPERTY,
         );
       }
       tsErrors = convertToCodeMirrorDiagnostic(tsErrors);

package/src/server/computeInitialDocument.js

@@ -87,7 +87,8 @@ export const computeInitialDocument = ({ fullPath }) => {
     //    using an interactive code widget such as number dragger.
     //  * When true, the auto-save to the file system is changed to be
     //    more frequent (throttled not debounced).
-    isInteracting: false,
+    // isInteracting: false,
+    // This is `undefined` initially.
   };
 
   /**

package/src/server/index.js

@@ -206,60 +206,12 @@ function debounceSave() {
 
 // Subscribe to listen for modifications
 shareDBDoc.subscribe(() => {
-  shareDBDoc.on('op', (op, source) => {
+  shareDBDoc.on('op', () => {
     if (shareDBDoc.data.isInteracting) {
       throttleSave();
     } else {
       debounceSave();
     }
-
-    // if (
-    //   op !== null &&
-    //   op[0] == 'aiStreams' &&
-    //   source !== 'AIServer' &&
-    //   source !== 'AIAssist'
-    // ) {
-    //   //This is an insert operation (a new request)
-    //   if (
-    //     op[op.length - 1]['i'] !== undefined &&
-    //     op[op.length - 1]['i']['AIStreamStatus'] !==
-    //       undefined
-    //   ) {
-    //     const input =
-    //       op[op.length - 1]['i']['AIStreamStatus'];
-
-    //     generateAIResponse({
-    //       inputText: input.text,
-    //       insertionCursor: input.insertionCursor,
-    //       shareDBDoc: shareDBDoc,
-    //       streamId: op[op.length - 2],
-    //       fileId: input.fileId,
-    //     });
-
-    //     const confirmStartOperation = replaceOp(
-    //       [
-    //         ...op.filter(
-    //           (value) => typeof value === 'string',
-    //         ),
-    //         'AIStreamStatus',
-    //         'serverIsRunning',
-    //       ],
-    //       true,
-    //       true,
-    //     );
-
-    //     shareDBDoc.submitOp(confirmStartOperation, {
-    //       source: 'AIServer',
-    //     });
-    //   }
-    //   if (
-    //     op[op.length - 1]['r'] !== null &&
-    //     op[op.length - 2] == 'clientWantsToStart'
-    //   ) {
-    //     //client wants to halt generation
-    //     haltGeneration(op[1]);
-    //   }
-    // }
   });
 });
 

package/src/types.ts

@@ -76,6 +76,10 @@ export type ShareDBDoc<T> = {
     event: string,
     callback: (op: JSONOp, source: boolean) => void,
   ) => void;
+  removeListener: (
+    event: string,
+    callback: (op: JSONOp, source: boolean) => void,
+  ) => void;
   submitOp: (
     op: JSONOp,
     options?: any,
@@ -177,3 +181,9 @@ export type PresenceId = string;
 
 // A user name for display in presence.
 export type Username = string;
+
+// The type of a convenience function called `submitOperation`,
+// to submit an operation to ShareDB.
+export type SubmitOperation = (
+  next: (content: VZCodeContent) => VZCodeContent,
+) => void;