vzcode 0.79.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

@@ -94,121 +94,116 @@ export const VZSidebar = ({
 
   return (
     <div
-      className={`drop-zone ${isDragOver ? 'dragover' : ''}`}
+      className="vz-sidebar"
+      style={{ width: sidebarWidth + 'px' }}
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      <div
-        className="vz-sidebar"
-        style={{ width: sidebarWidth + 'px' }}
-      >
-        <div className="files">
-          <div className="full-box">
-            <div className="sidebar-section-hint">
-              Project Files
-            </div>
-            <div className="sidebar-section-buttons">
-              <OverlayTrigger
-                placement="left"
-                overlay={
-                  <Tooltip id="report-bug-tooltip">
-                    {reportBugTooltipText}
-                  </Tooltip>
-                }
+      <div className="files">
+        <div className="full-box">
+          <div className="sidebar-section-hint">
+            Project Files
+          </div>
+          <div className="sidebar-section-buttons">
+            <OverlayTrigger
+              placement="left"
+              overlay={
+                <Tooltip id="report-bug-tooltip">
+                  {reportBugTooltipText}
+                </Tooltip>
+              }
+            >
+              <a
+                href="https://github.com/vizhub-core/vzcode/issues/new"
+                target="_blank"
+                rel="noopener noreferrer"
               >
-                <a
-                  href="https://github.com/vizhub-core/vzcode/issues/new"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <i className="icon-button icon-button-dark">
-                    <BugSVG />
-                  </i>
-                </a>
-              </OverlayTrigger>
-              {disableSettings ? null : (
-                <OverlayTrigger
-                  placement="left"
-                  overlay={
-                    <Tooltip id="open-settings-tooltip">
-                      {openSettingsTooltipText}
-                    </Tooltip>
-                  }
-                >
-                  <i
-                    onClick={handleSettingsClick}
-                    className="icon-button icon-button-dark"
-                  >
-                    <GearSVG />
-                  </i>
-                </OverlayTrigger>
-              )}
+                <i className="icon-button icon-button-dark">
+                  <BugSVG />
+                </i>
+              </a>
+            </OverlayTrigger>
+            {disableSettings ? null : (
               <OverlayTrigger
                 placement="left"
                 overlay={
-                  <Tooltip id="create-file-tooltip">
-                    {createFileTooltipText}
+                  <Tooltip id="open-settings-tooltip">
+                    {openSettingsTooltipText}
                   </Tooltip>
                 }
               >
                 <i
-                  onClick={handleOpenCreateFileModal}
+                  onClick={handleSettingsClick}
                   className="icon-button icon-button-dark"
                 >
-                  <NewSVG />
+                  <GearSVG />
                 </i>
               </OverlayTrigger>
-            </div>
+            )}
+            <OverlayTrigger
+              placement="left"
+              overlay={
+                <Tooltip id="create-file-tooltip">
+                  {createFileTooltipText}
+                </Tooltip>
+              }
+            >
+              <i
+                onClick={handleOpenCreateFileModal}
+                className="icon-button icon-button-dark"
+              >
+                <NewSVG />
+              </i>
+            </OverlayTrigger>
           </div>
-          {filesExist ? (
-            fileTree.children.map((entity) => {
-              const { fileId } = entity as FileTreeFile;
-              const { path } = entity as FileTree;
-              const key = fileId ? fileId : path;
-              return (
-                <Listing
-                  key={key}
-                  entity={entity}
-                  renameFile={renameFile}
-                  deleteFile={deleteFile}
-                  renameDirectory={renameDirectory}
-                  deleteDirectory={deleteDirectory}
-                  handleFileClick={handleFileClick}
-                  handleFileDoubleClick={
-                    handleFileDoubleClick
-                  }
-                  isDirectoryOpen={isDirectoryOpen}
-                  toggleDirectory={toggleDirectory}
-                  activeFileId={activeFileId}
-                />
-              );
-            })
-          ) : (
-            <div className="empty">
-              <div className="empty-text">
-                It looks like you don't have any files yet!
-                Click the "Create file" button above to
-                create your first file.
-              </div>
-            </div>
-          )}
         </div>
-
-        {enableConnectionStatus && (
-          <div className="connection-status">
-            {connected ? 'Connected' : 'Connection Lost'}
-            <div className="connection">
-              <div
-                className={`connection-status-indicator ${
-                  connected ? 'connected' : 'disconnected'
-                }`}
+        {isDragOver ? (
+          <div className="empty">
+            <div className="empty-text">
+              Drop files here!
+            </div>
+          </div>
+        ) : filesExist ? (
+          fileTree.children.map((entity) => {
+            const { fileId } = entity as FileTreeFile;
+            const { path } = entity as FileTree;
+            const key = fileId ? fileId : path;
+            return (
+              <Listing
+                key={key}
+                entity={entity}
+                handleFileClick={handleFileClick}
+                handleFileDoubleClick={
+                  handleFileDoubleClick
+                }
               />
+            );
+          })
+        ) : (
+          <div className="empty">
+            <div className="empty-text">
+              It looks like you don't have any files yet!
+              Click the "Create file" button above to create
+              your first file.
             </div>
           </div>
         )}
       </div>
+
+      {enableConnectionStatus && (
+        <div className="connection-status">
+          {connected ? 'Connected' : 'Connection Lost'}
+          <div className="connection">
+            <div
+              className={`connection-status-indicator ${
+                connected ? 'connected' : 'disconnected'
+              }`}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 };

package/src/client/VZSidebar/styles.scss

@@ -127,11 +127,17 @@
     padding: 20px;
     border: 1px dashed rgba(255, 255, 255, 0.5); /* White dashed outline */
     border-radius: 10px;
-  }
 
-  .empty-text {
-    margin-bottom: 10px;
-    font-size: 14px;
+    /*
+     * This fixes some issues where the drop zone for files
+     * was flickering when dragging files over the sidebar.
+     */
+    pointer-events: none;
+
+    .empty-text {
+      font-size: 16px;
+      font-weight: 500;
+    }
   }
 
   .connection-status {
@@ -155,17 +161,3 @@
     }
   }
 }
-
-.drop-zone {
-  height: 100%;
-  border: 3px solid #0a1731;
-  width: auto;
-  color: #bdc7dc;
-  text-align: center;
-  font-family: var(--vzcode-font-family);
-  font-weight: 500;
-}
-
-.drop-zone.dragover {
-  border-color: #009639;
-}

package/src/client/useFileCRUD.ts

@@ -132,7 +132,7 @@ export const useFileCRUD = ({
       submitOperation((document: VZCodeContent) => {
         const updatedFiles = { ...document.files };
         for (const key in updatedFiles) {
-          if (updatedFiles[key].name.includes(path)) {
+          if (updatedFiles[key].name.includes(path + '/')) {
             tabsToClose.push(key);
             delete updatedFiles[key];
           }

package/src/client/useTypeScript/worker.ts

@@ -53,6 +53,9 @@ const initializeFileSystem = async () => {
 
     // Skip type checking of declaration files
     skipLibCheck: true,
+
+    // Support React JSX
+    jsx: ts.JsxEmit.React,
   };
 
   // `true` breaks in a Web Worker because
@@ -264,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(
@@ -276,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,