vzcode 0.80.0 → 0.81.0

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,25 @@ export const VZMiddle = ({
   aiAssistOptions,
   aiAssistTooltipText,
   aiAssistClickOverride,
+  customInteractRules,
 }: {
   enableAIAssist?: boolean;
   aiAssistEndpoint?: string;
   aiAssistOptions?: { [key: string]: string };
   aiAssistTooltipText?: string;
   aiAssistClickOverride?: () => void;
+  customInteractRules?: Array<InteractRule>;
 }) => {
   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 +54,17 @@ 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}
+        />
       )}
       {isClient &&
       enableAIAssist &&
       content &&
       activeFileId ? (
         <AIAssistWidget
-          activeFileId={activeFileId}
-          shareDBDoc={shareDBDoc}
-          editorCache={editorCache}
-          tabList={tabList}
           aiAssistEndpoint={aiAssistEndpoint}
           aiAssistOptions={aiAssistOptions}
           aiAssistTooltipText={aiAssistTooltipText}

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/worker.ts

@@ -267,7 +267,12 @@ 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;
+
       if (debug) {
+        console.log('tsErrors');
         console.log(tsErrors);
       }
       tsErrors = tsErrors.filter(
@@ -279,7 +284,9 @@ 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,
       );
       // }
       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,