vzcode 0.17.0 → 0.19.0

package/src/client/usePrettier/index.ts

@@ -1,5 +1,9 @@
 import { JSONOp } from 'ot-json1';
-import { FileId, ShareDBDoc, VZCodeContent } from '../../types';
+import {
+  FileId,
+  ShareDBDoc,
+  VZCodeContent,
+} from '../../types';
 import { useEffect, useRef } from 'react';
 
 // The time in milliseconds by which auto-saving is debounced.
@@ -18,7 +22,9 @@ const extension = (fileName: string) => {
 
 export const usePrettier = (
   shareDBDoc: ShareDBDoc<VZCodeContent> | null,
-  submitOperation: (next: (content: VZCodeContent) => VZCodeContent) => void,
+  submitOperation: (
+    next: (content: VZCodeContent) => VZCodeContent,
+  ) => void,
   prettierWorker: Worker,
 ) => {
   // The set of files that have been modified
@@ -38,7 +44,8 @@ export const usePrettier = (
     // Get the message that comes back from the worker.
     // This is the prettified text for a specific file.
     const handleMessage = (event) => {
-      const { fileId, error, fileTextPrettified } = event.data;
+      const { fileId, error, fileTextPrettified } =
+        event.data;
       if (error) {
         console.log(error);
         return;
@@ -59,7 +66,10 @@ export const usePrettier = (
     };
 
     // Listen for messages from the worker.
-    prettierWorker.addEventListener('message', handleMessage);
+    prettierWorker.addEventListener(
+      'message',
+      handleMessage,
+    );
 
     const runPrettier = async () => {
       // Get the content of the document
@@ -95,64 +105,73 @@ export const usePrettier = (
     let debounceTimeout;
     function debouncePrettier() {
       clearTimeout(debounceTimeout);
-      debounceTimeout = setTimeout(runPrettier, autoPrettierDebounceTimeMS);
+      debounceTimeout = setTimeout(
+        runPrettier,
+        autoPrettierDebounceTimeMS,
+      );
     }
 
     // Listen for changes
-    shareDBDoc.on('op batch', (op: JSONOp, isLocal: boolean) => {
-      // Only act on changes coming from the client
-      if (isLocal) {
-        // If the op is coming from Prettier itself,
-        // then do nothing.
-        if (isApplyingOpRef.current) {
-          // console.log('ignoring op from Prettier');
-          return;
+    shareDBDoc.on(
+      'op batch',
+      (op: JSONOp, isLocal: boolean) => {
+        // Only act on changes coming from the client
+        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
+            dirtyFiles.add(fileId);
+
+            // Debounce running Prettier
+            debouncePrettier();
+
+            // console.log('Op is for file', fileId);
+          }
+        } else {
+          // console.log('ignoring op from remote', op, isLocal);
         }
 
-        // 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
-          dirtyFiles.add(fileId);
-
-          // Debounce running Prettier
-          debouncePrettier();
-
-          // console.log('Op is for file', fileId);
-        }
-      } else {
-        // console.log('ignoring op from remote', op, isLocal);
-      }
+        // In the event that the component unmounts,
+        return () => {
+          // Remove the event listener
+          prettierWorker.removeEventListener(
+            'message',
+            handleMessage,
+          );
 
-      // In the event that the component unmounts,
-      return () => {
-        // Remove the event listener
-        prettierWorker.removeEventListener('message', handleMessage);
-
-        // Clear the timeout
-        clearTimeout(debounceTimeout);
-      };
-    });
+          // Clear the timeout
+          clearTimeout(debounceTimeout);
+        };
+      },
+    );
   }, [shareDBDoc]);
 };

package/src/client/usePrettier/worker.ts

@@ -78,7 +78,10 @@ onmessage = async ({
   }
 
   try {
-    const fileTextPrettified = await format(fileText, { parser, plugins });
+    const fileTextPrettified = await format(fileText, {
+      parser,
+      plugins,
+    });
 
     postMessage({
       fileId,

package/src/client/useTabsState.ts

@@ -11,20 +11,27 @@ export const useTabsState = (
   // Called when a tab is closed.
   const closeTab = useCallback(
     (fileIdToRemove: FileId) => {
-      const i = tabList.findIndex((fileId) => fileId === fileIdToRemove);
+      const i = tabList.findIndex(
+        (fileId) => fileId === fileIdToRemove,
+      );
 
       // Support calling `closeTab` on a fileId that is not open,
       // such as when a file is deleted..
       if (i !== -1) {
         // Remove the tab from the tab list.
-        const newTabList = [...tabList.slice(0, i), ...tabList.slice(i + 1)];
+        const newTabList = [
+          ...tabList.slice(0, i),
+          ...tabList.slice(i + 1),
+        ];
         setTabList(newTabList);
 
         // If we are closing the active file,
         if (activeFileId === fileIdToRemove) {
           // set the new active file to the next tab over,
           if (newTabList.length > 0) {
-            setActiveFileId(i === 0 ? newTabList[i] : newTabList[i - 1]);
+            setActiveFileId(
+              i === 0 ? newTabList[i] : newTabList[i - 1],
+            );
           } else {
             // or clear out the active file
             // if we've closed the last tab.

package/src/randomId.js

@@ -1,2 +1,15 @@
 // Generate a random ID string consisting of digits.
-export const randomId = () => Math.floor(Math.random() * 10000000000) + '';
+const numDigits = 8;
+export const randomId = () => {
+  let randomString = '';
+  for (let i = 0; i < numDigits; i++) {
+    randomString += Math.floor(Math.random() * 10);
+  }
+  return randomString;
+};
+
+// const probabilityOfCollision =
+//   1 - Math.pow(1 - 1 / Math.pow(10, numDigits), numRuns);
+// Using this formula, the probability of generating the same ID twice
+// when using 8 digits and running the code 1000 times is approximately
+// 0.0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001

package/src/server/computeInitialDocument.js

@@ -1,7 +1,10 @@
 import fs from 'fs';
 import path from 'path';
 import { randomId } from '../randomId.js';
-import { enableDirectories, debugDirectories } from './featureFlags.js';
+import {
+  enableDirectories,
+  debugDirectories,
+} from './featureFlags.js';
 
 const isDirectory = (file) => file.endsWith('/');
 
@@ -36,10 +39,17 @@ export const computeInitialDocument = ({ fullPath }) => {
 
   while (unsearchedDirectories.length !== 0) {
     const currentDirectory = unsearchedDirectories.pop();
-    const currentDirectoryPath = path.join(fullPath, currentDirectory);
+    const currentDirectoryPath = path.join(
+      fullPath,
+      currentDirectory,
+    );
     const newFiles = fs
-      .readdirSync(currentDirectoryPath, { withFileTypes: true })
-      .filter((dirent) => (enableDirectories ? true : dirent.isFile()))
+      .readdirSync(currentDirectoryPath, {
+        withFileTypes: true,
+      })
+      .filter((dirent) =>
+        enableDirectories ? true : dirent.isFile(),
+      )
 
       // Add a trailing slash for directories
       .map((dirent) => {
@@ -64,7 +74,10 @@ export const computeInitialDocument = ({ fullPath }) => {
     initialDocument.files[id] = {
       text: isDirectory(file)
         ? null
-        : fs.readFileSync(path.join(fullPath, file), 'utf-8'),
+        : fs.readFileSync(
+            path.join(fullPath, file),
+            'utf-8',
+          ),
       name: file,
     };
   });

package/src/server/index.js

@@ -163,7 +163,10 @@ function throttleSave() {
 let debounceTimeout;
 function debounceSave() {
   clearTimeout(debounceTimeout);
-  debounceTimeout = setTimeout(save, autoSaveDebounceTimeMS);
+  debounceTimeout = setTimeout(
+    save,
+    autoSaveDebounceTimeMS,
+  );
 }
 
 // Subscribe to listen for modifications
@@ -186,7 +189,9 @@ server.listen(port, async () => {
       open(url);
     })();
   } else {
-    console.log(`Editor is live at http://localhost:${port}`);
+    console.log(
+      `Editor is live at http://localhost:${port}`,
+    );
     open(`http://localhost:${port}`);
   }
 });

package/src/types.ts

@@ -67,9 +67,16 @@ export type ShareDBDoc<T> = {
   data: T;
   ingestSnapshot: (snapshot: any, callback) => void;
   subscribe: (callback) => void;
-  on: (event: string, callback: (op: JSONOp, source: boolean) => void) => void;
+  on: (
+    event: string,
+    callback: (op: JSONOp, source: boolean) => void,
+  ) => void;
   off: (event: string, callback: () => void) => void;
-  submitOp: (op: JSONOp, options?: any, callback?: () => void) => void;
+  submitOp: (
+    op: JSONOp,
+    options?: any,
+    callback?: () => void,
+  ) => void;
 };
 
 // The ShareDB document type for VZCode.
@@ -82,7 +89,7 @@ export type VZCodeContent = {
   //   * `true` when the user is interacting
   //     via interactive code widgets (e.g. Alt+drag)
   //     * Hot reloading is throttled when this is `true`.
-  //   * `false` when they are not (e.g. normal typing)
+  //   * `false` or `undefined` when they are not (e.g. normal typing)
   //     * Hot reloading is debounced when this is `false`.
-  isInteracting: boolean;
+  isInteracting?: boolean;
 };