vzcode 0.80.0 → 0.82.0

package/src/client/VZCodeContext.tsx

@@ -5,7 +5,9 @@ import {
   useState,
 } from 'react';
 import {
+  FileId,
   Files,
+  ItemId,
   ShareDBDoc,
   SubmitOperation,
   Username,
@@ -111,6 +113,9 @@ export type VZCodeContextValue = {
   runCodeRef: React.MutableRefObject<null | (() => void)>;
 
   connected: boolean;
+
+  hoveredItemId: ItemId | null;
+  setHoveredItemId: (itemId: ItemId | null) => void;
 };
 
 export const VZCodeProvider = ({
@@ -275,6 +280,10 @@ export const VZCodeProvider = ({
     runCodeRef,
   });
 
+  // Track the currently hovered file id.
+  const [hoveredItemId, setHoveredItemId] =
+    useState<ItemId | null>(null);
+
   // The value provided by this context.
   const value: VZCodeContextValue = {
     content,
@@ -328,6 +337,9 @@ export const VZCodeProvider = ({
     runCodeRef,
 
     connected,
+
+    hoveredItemId,
+    setHoveredItemId,
   };
 
   return (

package/src/client/VZMiddle.tsx

@@ -7,6 +7,7 @@ import { PresenceNotifications } from './PresenceNotifications';
 import { AIAssistWidget } from './AIAssist/AIAssistWidget';
 import { VZCodeContext } from './VZCodeContext';
 import { RunCodeWidget } from './RunCodeWidget';
+import { InteractRule } from '@replit/codemirror-interact';
 
 // The middle portion of the VZCode environment, containing:
 // * The list of tabs at the top
@@ -20,38 +21,27 @@ export const VZMiddle = ({
   aiAssistOptions,
   aiAssistTooltipText,
   aiAssistClickOverride,
+  customInteractRules,
+  allowGlobals = false,
 }: {
   enableAIAssist?: boolean;
   aiAssistEndpoint?: string;
   aiAssistOptions?: { [key: string]: string };
   aiAssistTooltipText?: string;
   aiAssistClickOverride?: () => void;
+  customInteractRules?: Array<InteractRule>;
+  allowGlobals?: boolean;
 }) => {
   const { codeEditorWidth } = useContext(
     SplitPaneResizeContext,
   );
 
-  // TODO leverage this context in deeper levels of the component tree.
   const {
     content,
-    shareDBDoc,
-    submitOperation,
     localPresence,
     docPresence,
-    files,
-    createFile,
     activeFileId,
-    setActiveFileId,
-    tabList,
-    openTab,
-    closeTabs,
-    theme,
-    username,
-    editorCache,
-    editorWantsFocus,
-    editorNoLongerWantsFocus,
     errorMessage,
-    typeScriptWorker,
   } = useContext(VZCodeContext);
 
   // This prevents the CodeEditor from rendering
@@ -66,27 +56,18 @@ export const VZMiddle = ({
       className="middle"
       style={{ width: codeEditorWidth + 'px' }}
     >
-      <TabList
-        files={files}
-        tabList={tabList}
-        activeFileId={activeFileId}
-        setActiveFileId={setActiveFileId}
-        openTab={openTab}
-        closeTabs={closeTabs}
-        createFile={createFile}
-      />
+      <TabList />
       {isClient && content && activeFileId && (
-        <CodeEditor />
+        <CodeEditor
+          customInteractRules={customInteractRules}
+          allowGlobals={allowGlobals}
+        />
       )}
       {isClient &&
       enableAIAssist &&
       content &&
       activeFileId ? (
         <AIAssistWidget
-          activeFileId={activeFileId}
-          shareDBDoc={shareDBDoc}
-          editorCache={editorCache}
-          tabList={tabList}
           aiAssistEndpoint={aiAssistEndpoint}
           aiAssistOptions={aiAssistOptions}
           aiAssistTooltipText={aiAssistTooltipText}

package/src/client/VZSettings.tsx

@@ -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/VZSidebar/DirectoryListing.tsx

@@ -1,44 +1,30 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
+import type { FileTree, FileTreeFile } from '../../types';
+import { DirectoryArrowSVG } from '../Icons';
+import { VZCodeContext } from '../VZCodeContext';
 import { Item } from './Item';
 import { Listing } from './Listing';
-import { DirectoryArrowSVG } from '../Icons';
-import type {
-  FileTree,
-  FileTreeFile,
-  FileTreePath,
-} from '../../types';
 
 export const DirectoryListing = ({
   name,
   path,
   children,
-  renameFile,
-  deleteFile,
-  renameDirectory,
-  deleteDirectory,
   handleFileClick,
   handleFileDoubleClick,
-  isDirectoryOpen,
-  toggleDirectory,
-  activeFileId,
 }: {
   name: string;
   path: string;
   children: Array<FileTree | FileTreeFile>;
-  renameFile: (fileId: string, newName: string) => void;
-  deleteFile: (fileId: string) => void;
-  renameDirectory: (
-    path: FileTreePath,
-    oldName: string,
-    newName: string,
-  ) => void;
-  deleteDirectory: (path: FileTreePath) => void;
   handleFileClick: (fileId: string) => void;
   handleFileDoubleClick: (fileId: string) => void;
-  isDirectoryOpen: (path: string) => boolean;
-  toggleDirectory: (path: string) => void;
-  activeFileId: string;
 }) => {
+  const {
+    renameDirectory,
+    deleteDirectory,
+    isDirectoryOpen,
+    toggleDirectory,
+  } = useContext(VZCodeContext);
+
   const handleClick = useCallback(() => {
     toggleDirectory(path);
   }, [toggleDirectory, path]);
@@ -62,6 +48,7 @@ export const DirectoryListing = ({
   return (
     <>
       <Item
+        id={path}
         name={name}
         handleClick={handleClick}
         handleDeleteClick={handleDeleteClick}
@@ -87,17 +74,10 @@ export const DirectoryListing = ({
               <Listing
                 entity={entity}
                 key={fileId || path}
-                renameFile={renameFile}
-                deleteFile={deleteFile}
-                renameDirectory={renameDirectory}
-                deleteDirectory={deleteDirectory}
                 handleFileClick={handleFileClick}
                 handleFileDoubleClick={
                   handleFileDoubleClick
                 }
-                isDirectoryOpen={isDirectoryOpen}
-                toggleDirectory={toggleDirectory}
-                activeFileId={activeFileId}
               />
             );
           })}

package/src/client/VZSidebar/FileListing.tsx

@@ -1,25 +1,25 @@
-import { useCallback } from 'react';
+import { useCallback, useContext } from 'react';
 import { Item } from './Item';
 import { FileId } from '../../types';
 import { FileSVG } from '../Icons';
+import { VZCodeContext } from '../VZCodeContext';
 
 export const FileListing = ({
   name,
   fileId,
-  renameFile,
-  deleteFile,
   handleFileClick,
   handleFileDoubleClick,
   isActive,
 }: {
   name: string;
   fileId: FileId;
-  renameFile: (fileId: FileId, newName: string) => void;
-  deleteFile: (fileId: FileId) => void;
   handleFileClick: (fileId: FileId) => void;
   handleFileDoubleClick: (fileId: FileId) => void;
   isActive: boolean;
 }) => {
+  const { renameFile, deleteFile } =
+    useContext(VZCodeContext);
+
   const handleClick = useCallback(() => {
     handleFileClick(fileId);
   }, [fileId, handleFileClick]);
@@ -41,6 +41,7 @@ export const FileListing = ({
 
   return (
     <Item
+      id={fileId}
       name={name}
       handleClick={handleClick}
       handleDoubleClick={handleDoubleClick}

package/src/client/VZSidebar/Item.tsx

@@ -3,12 +3,15 @@ import {
   useCallback,
   useRef,
   useEffect,
+  useContext,
 } from 'react';
 import { EditSVG, FileSVG, TrashSVG } from '../Icons';
 import { Tooltip, OverlayTrigger } from '../bootstrap';
 
 // TODO consider moving this up to a higher level of the component tree
 import { DeleteConfirmationModal } from './DeleteConfirmationModal';
+import { VZCodeContext } from '../VZCodeContext';
+import { ItemId } from '../../types';
 
 // TODO support renaming directories
 // See https://github.com/vizhub-core/vzcode/issues/103
@@ -16,6 +19,7 @@ const enableRenameDirectory = true;
 
 // A file or directory in the sidebar.
 export const Item = ({
+  id,
   name,
   children,
   handleClick,
@@ -31,6 +35,7 @@ export const Item = ({
     ? 'Delete Directory'
     : 'Delete File',
 }: {
+  id: ItemId;
   name: string;
   children: React.ReactNode;
   handleClick: (event: React.MouseEvent) => void;
@@ -42,8 +47,21 @@ export const Item = ({
   renameFileTooltipText?: string;
   deleteFileTooltipText?: string;
 }) => {
-  // Tracks whether the mouse is hovering over the file or directory
-  const [isHovered, setIsHovered] = useState(false);
+  const { hoveredItemId, setHoveredItemId } =
+    useContext(VZCodeContext);
+  // // Tracks whether the mouse is hovering over the file or directory
+  // const [isHovered, setIsHovered] = useState(false);
+  const isHovered = hoveredItemId === id;
+  const setIsHovered = useCallback(
+    (isHovered: boolean) => {
+      if (isHovered) {
+        setHoveredItemId(id);
+      } else {
+        setHoveredItemId(null);
+      }
+    },
+    [id, setHoveredItemId],
+  );
 
   // Tracks whether the file is being renamed (inline text input)
   const [isRenaming, setIsRenaming] = useState(false);
@@ -207,14 +225,16 @@ export const Item = ({
           </OverlayTrigger>
         </div>
       ) : null}
-
-      <DeleteConfirmationModal
-        show={showModal}
-        onClose={handleModalClose}
-        onConfirm={handleConfirmModal}
-        isDirectory={isDirectory}
-        name={name}
-      />
+      {/* TODO Move this up to a higher level of the tree */}
+      {showModal && (
+        <DeleteConfirmationModal
+          show={showModal}
+          onClose={handleModalClose}
+          onConfirm={handleConfirmModal}
+          isDirectory={isDirectory}
+          name={name}
+        />
+      )}
     </div>
   );
 };

package/src/client/VZSidebar/Listing.tsx

@@ -1,49 +1,32 @@
-import { DirectoryListing } from './DirectoryListing';
-import {
+import { useContext } from 'react';
+import type {
   FileId,
   FileTree,
   FileTreeFile,
-  FileTreePath,
 } from '../../types';
+import { VZCodeContext } from '../VZCodeContext';
+import { DirectoryListing } from './DirectoryListing';
 import { FileListing } from './FileListing';
 
 // A "Listing" is a "FileListing" or a "DirectoryListing"
 // that appears in the Sidebar.
 export const Listing = ({
   entity,
-  renameFile,
-  deleteFile,
-  renameDirectory,
-  deleteDirectory,
   handleFileClick,
   handleFileDoubleClick,
-  isDirectoryOpen,
-  toggleDirectory,
-  activeFileId,
 }: {
   entity: FileTree | FileTreeFile;
-  renameFile: (fileId: FileId, newName: string) => void;
-  deleteFile: (fileId: FileId) => void;
-  renameDirectory: (
-    path: FileTreePath,
-    oldName: string,
-    newName: string,
-  ) => void;
-  deleteDirectory: (path: FileTreePath) => void;
   handleFileClick: (fileId: FileId) => void;
   handleFileDoubleClick: (fileId: FileId) => void;
-  isDirectoryOpen: (path: string) => boolean;
-  toggleDirectory: (path: string) => void;
-  activeFileId: FileId;
 }) => {
+  const { activeFileId } = useContext(VZCodeContext);
   const { name, file, fileId } = entity as FileTreeFile;
   const { path, children } = entity as FileTree;
+
   return file ? (
     <FileListing
       fileId={fileId}
       name={name}
-      renameFile={renameFile}
-      deleteFile={deleteFile}
       handleFileClick={handleFileClick}
       handleFileDoubleClick={handleFileDoubleClick}
       isActive={fileId === activeFileId}
@@ -53,15 +36,8 @@ export const Listing = ({
       name={name}
       path={path}
       children={children}
-      renameFile={renameFile}
-      deleteFile={deleteFile}
-      renameDirectory={renameDirectory}
-      deleteDirectory={deleteDirectory}
       handleFileClick={handleFileClick}
       handleFileDoubleClick={handleFileDoubleClick}
-      isDirectoryOpen={isDirectoryOpen}
-      toggleDirectory={toggleDirectory}
-      activeFileId={activeFileId}
     />
   );
 };

package/src/client/VZSidebar/index.tsx

@@ -174,17 +174,10 @@ export const VZSidebar = ({
               <Listing
                 key={key}
                 entity={entity}
-                renameFile={renameFile}
-                deleteFile={deleteFile}
-                renameDirectory={renameDirectory}
-                deleteDirectory={deleteDirectory}
                 handleFileClick={handleFileClick}
                 handleFileDoubleClick={
                   handleFileDoubleClick
                 }
-                isDirectoryOpen={isDirectoryOpen}
-                toggleDirectory={toggleDirectory}
-                activeFileId={activeFileId}
               />
             );
           })

package/src/client/useTypeScript/requestTypes.ts

@@ -20,6 +20,9 @@ export type LinterRequest = {
   fileName: string;
   fileContent: string;
   requestId: string;
+
+  // If true, linting will not show errors for global variables.
+  allowGlobals?: boolean;
 };
 
 export type LinterResponse = {

package/src/client/useTypeScript/worker.ts

@@ -217,8 +217,12 @@ onmessage = async ({ data }) => {
       console.log('Lint Request');
     }
     const linterRequest: LinterRequest = data;
-    const { fileName, fileContent, requestId } =
-      linterRequest;
+    const {
+      fileName,
+      fileContent,
+      requestId,
+      allowGlobals,
+    } = linterRequest;
 
     const tsFileName = getTSFileName(fileName);
     let tsErrors = [];
@@ -267,7 +271,15 @@ onmessage = async ({ data }) => {
       // 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'.
+      const LINT_ERROR_CODE_CANNOT_FIND_NAME = 2304;
+
       if (debug) {
+        console.log('tsErrors');
         console.log(tsErrors);
       }
       tsErrors = tsErrors.filter(
@@ -279,7 +291,15 @@ onmessage = async ({ data }) => {
           error.code !== LINT_ERROR_CODE_ANY_TYPE_KEYS &&
           error.code !==
             LINT_ERROR_CODE_NON_EXISTENT_PROPERTY &&
-          error.code !== LINT_ERROR_CODE_ITERATED_THROUGH,
+          error.code !== LINT_ERROR_CODE_ITERATED_THROUGH &&
+          error.code !==
+            LINT_ERROR_CODE_ASSIGNABLE_TO_NEVER &&
+          // If allowGlobals is true, we will allow
+          // global variables to be used without error.
+          allowGlobals
+            ? error.code !==
+              LINT_ERROR_CODE_CANNOT_FIND_NAME
+            : true,
       );
       // }
       tsErrors = convertToCodeMirrorDiagnostic(tsErrors);

package/src/types.ts

@@ -1,9 +1,13 @@
 // FileId
 //   * A unique ID for a file.
-
 //   * This is a random string.
 export type FileId = string;
 
+// ItemId
+//   * A unique ID for an item in the sidebar.
+//   * This could be either a file ID or a directory path.
+export type ItemId = FileId | FileTreePath;
+
 // Files
 //  * A collection of files.
 //  * Keys are _not_ file names or array indices,