vzcode 1.27.0 → 1.29.0

package/src/client/tabsSearchParameters.ts

@@ -1,4 +1,5 @@
-import { FileId, TabState, VZCodeContent } from '../types';
+import { TabState } from '../types';
+import { VizFileId, VizContent } from '@vizhub/viz-types';
 
 // The delimiter used to separate file names in the `tabs` parameter.
 // We need a character that is both URL-safe (does not get escaped in URLs)
@@ -30,7 +31,7 @@ export const delimiter = '~';
 // Gets the file id of a file with the given name.
 // Returns null if not found.
 const getFileId = (
-  content: VZCodeContent,
+  content: VizContent,
   fileName: string,
 ): string | null => {
   if (content && content.files) {
@@ -48,7 +49,7 @@ const getFileId = (
 // guard against failure cases.
 // Returns null if not found.
 const getFileName = (
-  content: VZCodeContent,
+  content: VizContent,
   fileId: string,
 ): string | null => {
   if (content && content.files) {
@@ -72,10 +73,10 @@ export const decodeTabs = ({
   content,
 }: {
   tabStateParams: TabStateParams;
-  content: VZCodeContent;
+  content: VizContent;
 }): {
   tabList: Array<TabState>;
-  activeFileId: FileId;
+  activeFileId: VizFileId;
 } => {
   const { file, tabs } = tabStateParams;
   const tabList: TabState[] = [];
@@ -106,8 +107,8 @@ export const encodeTabs = ({
   content,
 }: {
   tabList: Array<TabState>;
-  activeFileId: FileId | null;
-  content: VZCodeContent;
+  activeFileId: VizFileId | null;
+  content: VizContent;
 }): TabStateParams => {
   // Get the file name of the active file
   const activeFileName = getFileName(content, activeFileId);

package/src/client/themes/vizhubTheme/index.ts

@@ -3,7 +3,7 @@
 // Inspired by https://github.com/uiwjs/react-codemirror/blob/master/themes/vscode/src/index.ts
 
 import { tags as t } from '@lezer/highlight';
-import { createTheme } from '../uiwImports';
+import { createTheme } from '@uiw/codemirror-themes';
 
 import {
   // Colors for various things outside the code itself
@@ -34,22 +34,19 @@ import { EditorView } from 'codemirror';
 // This looks way better as we are pulling in the semi-bold font from Google Fonts
 const boldWeight = '500';
 
-const defaultSettingsVizhubTheme: codemirrorThemes.CreateThemeOptions['settings'] =
-  {
-    background: backgroundColor,
-    foreground: light,
-    caret: caretColor,
-    selection: selectionBackground,
-    selectionMatch: selectionBackgroundMatch,
-    lineHighlight,
-    gutterBackground: backgroundColor,
-    gutterForeground: lineNumbers,
-    gutterActiveForeground: lineNumbersActive,
-  };
+const defaultSettingsVizhubTheme = {
+  background: backgroundColor,
+  foreground: light,
+  caret: caretColor,
+  selection: selectionBackground,
+  selectionMatch: selectionBackgroundMatch,
+  lineHighlight,
+  gutterBackground: backgroundColor,
+  gutterForeground: lineNumbers,
+  gutterActiveForeground: lineNumbersActive,
+};
 
-function vizhubThemeInit(
-  options?: Partial<codemirrorThemes.CreateThemeOptions>,
-) {
+function vizhubThemeInit(options?: Partial<any>) {
   const {
     theme = 'dark',
     settings = {},

package/src/client/useActions.ts

@@ -1,14 +1,13 @@
 import { useCallback } from 'react';
 import { ThemeLabel } from './themes';
 import {
-  FileId,
   PresenceIndicator,
   SearchFileVisibility,
   ShareDBDoc,
   TabState,
   Username,
-  VZCodeContent,
 } from '../types';
+import { VizFileId, VizContent } from '@vizhub/viz-types';
 import { VZAction } from './vzReducer';
 
 // This is a custom hook that returns a set of functions
@@ -17,7 +16,7 @@ export const useActions = (
   dispatch: (action: VZAction) => void,
 ) => {
   const setActiveFileId = useCallback(
-    (activeFileId: FileId) => {
+    (activeFileId: VizFileId) => {
       dispatch({
         type: 'set_active_file_id',
         activeFileId,
@@ -46,7 +45,7 @@ export const useActions = (
   );
 
   const closeTabs = useCallback(
-    (fileIdsToClose: Array<FileId>) => {
+    (fileIdsToClose: Array<VizFileId>) => {
       dispatch({
         type: 'close_tabs',
         fileIdsToClose,
@@ -89,7 +88,7 @@ export const useActions = (
 
   // Update search results based on current pattern
   const setSearchResults = useCallback(
-    (files: ShareDBDoc<VZCodeContent>) => {
+    (files: ShareDBDoc<VizContent>) => {
       dispatch({
         type: 'set_search_results',
         files: files,
@@ -101,7 +100,7 @@ export const useActions = (
   // Update search results file visibility based on current pattern
   const setSearchFileVisibility = useCallback(
     (
-      files: ShareDBDoc<VZCodeContent>,
+      files: ShareDBDoc<VizContent>,
       id: string,
       visibility: SearchFileVisibility,
     ) => {
@@ -118,7 +117,7 @@ export const useActions = (
   // Update search results file matching line visibility to be
   const setSearchLineVisibility = useCallback(
     (
-      files: ShareDBDoc<VZCodeContent>,
+      files: ShareDBDoc<VizContent>,
       id: string,
       line: number,
     ) => {

package/src/client/useEditorCache.ts

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
-import { FileId, PaneId } from '../types';
+import { VizFileId } from '@vizhub/viz-types';
+import { PaneId } from '../types';
 import { EditorView } from 'codemirror';
 
 export type EditorCacheValue = {
@@ -11,7 +12,7 @@ export type EditorCacheValue = {
 export type EditorCacheKey = string;
 
 export const editorCacheKey = (
-  fileId: FileId,
+  fileId: VizFileId,
   paneId: PaneId,
 ): EditorCacheKey => fileId + '|' + paneId;
 

package/src/client/useFileCRUD.ts

@@ -1,9 +1,6 @@
 import { useCallback } from 'react';
-import {
-  FileId,
-  FileTreePath,
-  VZCodeContent,
-} from '../types';
+import { FileTreePath } from '../types';
+import { VizFileId, VizContent } from '@vizhub/viz-types';
 import { randomId } from '../randomId';
 
 // CRUD operations for files and directories
@@ -14,14 +11,14 @@ export const useFileCRUD = ({
   openTab,
 }: {
   submitOperation: (
-    operation: (document: VZCodeContent) => VZCodeContent,
+    operation: (document: VizContent) => VizContent,
   ) => void;
-  closeTabs: (idsToDelete: Array<FileId>) => void;
+  closeTabs: (idsToDelete: Array<VizFileId>) => void;
   openTab: ({
     fileId,
     isTransient,
   }: {
-    fileId: FileId;
+    fileId: VizFileId;
     isTransient: boolean;
   }) => void;
 }) => {
@@ -29,8 +26,8 @@ export const useFileCRUD = ({
   const createFile = useCallback(
     (name: string, text = '') => {
       if (name) {
-        const fileId: FileId = randomId();
-        submitOperation((document: VZCodeContent) => ({
+        const fileId: VizFileId = randomId();
+        submitOperation((document: VizContent) => ({
           ...document,
           files: {
             ...document.files,
@@ -49,8 +46,8 @@ export const useFileCRUD = ({
     (name: string, text = null) => {
       if (name) {
         name += '/';
-        const fileId: FileId = randomId();
-        submitOperation((document: VZCodeContent) => ({
+        const fileId: VizFileId = randomId();
+        submitOperation((document: VizContent) => ({
           ...document,
           files: {
             ...document.files,
@@ -64,8 +61,8 @@ export const useFileCRUD = ({
 
   // Called when a file in the sidebar is renamed.
   const renameFile = useCallback(
-    (fileId: FileId, newName: string) => {
-      submitOperation((document: VZCodeContent) => ({
+    (fileId: VizFileId, newName: string) => {
+      submitOperation((document: VizContent) => ({
         ...document,
         files: {
           ...document.files,
@@ -94,7 +91,7 @@ export const useFileCRUD = ({
     ) => {
       console.log(path);
       console.log(oldName);
-      submitOperation((document: VZCodeContent) => {
+      submitOperation((document: VizContent) => {
         const updatedFiles = Object.keys(
           document.files,
         ).reduce((acc, key) => {
@@ -131,7 +128,7 @@ export const useFileCRUD = ({
 
   // Deletes a file
   const deleteFile = useCallback(
-    (fileId: FileId) => {
+    (fileId: VizFileId) => {
       closeTabs([fileId]);
       submitOperation((document) => {
         const updatedFiles = { ...document.files };
@@ -145,8 +142,8 @@ export const useFileCRUD = ({
   // Deletes a directory and all files within it
   const deleteDirectory = useCallback(
     (path: FileTreePath) => {
-      const tabsToClose: Array<FileId> = [];
-      submitOperation((document: VZCodeContent) => {
+      const tabsToClose: Array<VizFileId> = [];
+      submitOperation((document: VizContent) => {
         const updatedFiles = { ...document.files };
         for (const key in updatedFiles) {
           if (updatedFiles[key].name.includes(path + '/')) {

package/src/client/useKeyboardShortcuts.ts

@@ -4,7 +4,8 @@ import { syntaxTree } from '@codemirror/language';
 import { SyntaxNode, SyntaxNodeRef } from '@lezer/common';
 import { EditorView } from '@codemirror/view';
 import { EditorState } from '@codemirror/state';
-import { FileId, PaneId } from '../types';
+import { VizFileId } from '@vizhub/viz-types';
+import { PaneId } from '../types';
 import { editorCacheKey } from './useEditorCache';
 
 /*
@@ -187,8 +188,8 @@ export const useKeyboardShortcuts = ({
   editorCache,
   codeEditorRef,
 }: {
-  closeTabs: (fileIds: FileId[]) => void;
-  activeFileId: FileId | null;
+  closeTabs: (fileIds: VizFileId[]) => void;
+  activeFileId: VizFileId | null;
   activePaneId: PaneId;
   handleOpenCreateFileModal: () => void;
   setActiveFileLeft: () => void;

package/src/client/usePrettier/index.ts

@@ -1,10 +1,7 @@
 import { shouldTriggerRun } from '../shouldTriggerRun';
 import { JSONOp } from '../../ot';
-import {
-  FileId,
-  ShareDBDoc,
-  VZCodeContent,
-} from '../../types';
+import { VizFileId, VizContent } from '@vizhub/viz-types';
+import { ShareDBDoc } from '../../types';
 import { useEffect, useRef, useState } from 'react';
 
 // The time in milliseconds by which auto-saving is debounced.
@@ -32,16 +29,15 @@ export const usePrettier = ({
   submitOperation,
   prettierWorker,
 }: {
-  shareDBDoc: ShareDBDoc<VZCodeContent> | null;
+  shareDBDoc: ShareDBDoc<VizContent> | null;
   submitOperation: (
-    next: (content: VZCodeContent) => VZCodeContent,
+    next: (content: VizContent) => VizContent,
   ) => void;
   prettierWorker: Worker;
 }) => {
   // The set of files that have been modified
   // since the last Prettier run.
-  // const dirtyFiles: Set<FileId> = new Set<FileId>();
-  const dirtyFilesRef = useRef<Set<FileId>>(new Set());
+  const dirtyFilesRef = useRef<Set<VizFileId>>(new Set());
 
   // State to hold the error from Prettier
   // `null` means no errors
@@ -157,7 +153,7 @@ export const usePrettier = ({
         op[2] === 'text'
       ) {
         // Get the file id
-        const fileId: FileId = op[1];
+        const fileId: VizFileId = op[1];
 
         // Add the file id to the set of dirty files
         dirtyFilesRef.current.add(fileId);

package/src/client/usePrettier/worker.ts

@@ -7,7 +7,7 @@ import * as prettierPluginCSS from 'prettier/plugins/postcss';
 import * as prettierPluginTypescript from 'prettier/plugins/typescript';
 import * as prettierPluginSvelte from 'prettier-plugin-svelte/browser';
 
-import { FileId } from '../../types';
+import { VizFileId } from '@vizhub/viz-types';
 
 const enableSvelte = true;
 
@@ -41,7 +41,7 @@ const plugins = [
   prettierPluginMarkdown,
   prettierPluginTypescript,
   prettierPluginCSS,
-];
+] as any; // Cast to any to resolve type conflict
 
 if (enableSvelte) {
   // @ts-ignore
@@ -68,7 +68,7 @@ onmessage = async ({
     fileExtension: string;
 
     // The file id
-    fileId: FileId;
+    fileId: VizFileId;
   };
 }) => {
   const { fileExtension, fileText, fileId } = data;

package/src/client/useRunCode.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
-import { SubmitOperation, VZCodeContent } from '../types';
+import { SubmitOperation } from '../types';
+import { VizContent } from '@vizhub/viz-types';
 
 // Runs the code by flashing `isInteracting` to `true`.
 export const useRunCode = (
@@ -8,7 +9,7 @@ export const useRunCode = (
   const runCodeRef = useRef(null);
   useEffect(() => {
     const runCode = () => {
-      submitOperation((content: VZCodeContent) => ({
+      submitOperation((content: VizContent) => ({
         ...content,
         isInteracting: true,
       }));

package/src/client/useTypeScript/index.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react';
-import { VZCodeContent } from '../../types';
+import { VizContent } from '@vizhub/viz-types';
 import { autoPrettierDebounceTimeMS } from '../usePrettier';
 
 // We don't want to send the message _before_ Prettier runs,
@@ -16,7 +16,7 @@ export const useTypeScript = ({
   content,
   typeScriptWorker,
 }: {
-  content: VZCodeContent;
+  content: VizContent;
   typeScriptWorker: Worker;
 }) => {
   // When Content changes, update the TypeScript worker
@@ -26,7 +26,7 @@ export const useTypeScript = ({
   const debounceTimeoutId = useRef<number | null>(null);
 
   const debounceUpdateContent = useCallback(
-    (content: VZCodeContent) => {
+    (content: VizContent) => {
       // Handle the case where the content has not yet been loaded.
       if (content === null) {
         return;

package/src/client/useTypeScript/worker/handleMessageUpdateContent.ts

@@ -1,4 +1,8 @@
-import { File, Files, VZCodeContent } from '../../../types';
+import {
+  VizFile,
+  VizFiles,
+  VizContent,
+} from '@vizhub/viz-types';
 import { getTSFileName } from './getTSFileName';
 import { isTS } from './isTS';
 
@@ -16,12 +20,12 @@ export const handleMessageUpdateContent = async ({
     console.log('update-content message received');
   }
   // Unpack the files
-  const content: VZCodeContent = data.details;
-  const files: Files = content.files;
+  const content: VizContent = data.details;
+  const files: VizFiles = content.files;
 
   // Iterate over the files
   for (const fileId of Object.keys(files)) {
-    const file: File = files[fileId];
+    const file: VizFile = files[fileId];
     const { name, text } = file;
 
     const tsFileName = getTSFileName(name);

package/src/client/useURLSync.ts

@@ -1,5 +1,6 @@
 import { useSearchParams } from 'react-router-dom';
-import { FileId, TabState, VZCodeContent } from '../types';
+import { TabState } from '../types';
+import { VizFileId, VizContent } from '@vizhub/viz-types';
 import { useEffect, useMemo, useRef } from 'react';
 import {
   TabStateParams,
@@ -15,11 +16,11 @@ export const useURLSync = ({
   tabList,
   activeFileId,
 }: {
-  content: VZCodeContent | null;
+  content: VizContent | null;
   openTab: (tabState: TabState) => void;
-  setActiveFileId: (activeFileId: FileId) => void;
+  setActiveFileId: (activeFileId: VizFileId) => void;
   tabList: Array<TabState>;
-  activeFileId: FileId | null;
+  activeFileId: VizFileId | null;
 }) => {
   // Use React router to get and set the  search parameters.
   const [searchParams, setSearchParams] = useSearchParams();

package/src/client/vzReducer/closeTabsReducer.ts

@@ -1,10 +1,6 @@
 import { VZAction, VZState } from '.';
-import {
-  FileId,
-  Pane,
-  PaneId,
-  TabState,
-} from '../../types';
+import { Pane, PaneId, TabState } from '../../types';
+import { VizFileId } from '@vizhub/viz-types';
 import { findPane } from './findPane';
 import { updatePane } from './updatePane';
 
@@ -49,7 +45,7 @@ export const closeTabsReducer = (
   }
 
   // Otherwise, we'll need to also find a new active tab.
-  let newActiveFileId: FileId | null = null;
+  let newActiveFileId: VizFileId | null = null;
 
   // The question becomes: which tab should be active now?
   // - Either the tab to the left or right of the closed tab.

package/src/client/vzReducer/index.ts

@@ -1,5 +1,4 @@
 import {
-  FileId,
   Pane,
   PaneId,
   PresenceIndicator,
@@ -7,8 +6,8 @@ import {
   SearchResults,
   ShareDBDoc,
   Username,
-  VZCodeContent,
 } from '../../types';
+import { VizFileId, VizContent } from '@vizhub/viz-types';
 import { ThemeLabel } from '../themes';
 import { closeTabsReducer } from './closeTabsReducer';
 import { openTabReducer } from './openTabReducer';
@@ -78,7 +77,7 @@ export type VZState = {
 export type VZAction =
   // `set_active_file_id`
   //  * Sets the active file ID.
-  | { type: 'set_active_file_id'; activeFileId: FileId }
+  | { type: 'set_active_file_id'; activeFileId: VizFileId }
 
   // `set_active_file_left' 'set_active_file_right`
   //  * Sets the active file ID to be the tab directly to the left or right
@@ -91,7 +90,7 @@ export type VZAction =
   //  * Also serves to change an already open transient tab to persistent.
   | {
       type: 'open_tab';
-      fileId: FileId;
+      fileId: VizFileId;
       isTransient?: boolean;
     }
 
@@ -99,7 +98,7 @@ export type VZAction =
   //  * Closes a set of tabs.
   | {
       type: 'close_tabs';
-      fileIdsToClose: Array<FileId>;
+      fileIdsToClose: Array<VizFileId>;
       // The pane id to close tabs from.
     }
 
@@ -124,14 +123,14 @@ export type VZAction =
   //  * Sets the current search pattern
   | {
       type: 'set_search_results';
-      files: ShareDBDoc<VZCodeContent>;
+      files: ShareDBDoc<VizContent>;
     }
 
   // `set_search_results_visibility`
   //  * Sets the visibility of a current search pattern file
   | {
       type: 'set_search_file_visibility';
-      files: ShareDBDoc<VZCodeContent>;
+      files: ShareDBDoc<VizContent>;
       id: string;
       visibility: SearchFileVisibility;
     }
@@ -140,7 +139,7 @@ export type VZAction =
   //  * Hides a current search pattern file's specific matching line
   | {
       type: 'hide_search_results_line';
-      files: ShareDBDoc<VZCodeContent>;
+      files: ShareDBDoc<VizContent>;
       id: string;
       line: number;
     }

package/src/client/vzReducer/searchReducer.ts

@@ -4,11 +4,11 @@ import {
   SearchFileVisibility,
   SearchResult,
   ShareDBDoc,
-  VZCodeContent,
 } from '../../types';
+import { VizContent } from '@vizhub/viz-types';
 
 function searchPattern(
-  shareDBDoc: ShareDBDoc<VZCodeContent>,
+  shareDBDoc: ShareDBDoc<VizContent>,
   pattern: string,
 ): SearchResult {
   const files = shareDBDoc.data.files;

package/src/client/vzReducer/updatePane.ts

@@ -1,9 +1,5 @@
-import {
-  FileId,
-  Pane,
-  PaneId,
-  TabState,
-} from '../../types';
+import { Pane, PaneId, TabState } from '../../types';
+import { VizFileId } from '@vizhub/viz-types';
 
 // Immutable update pattern for updating a pane's tab list.
 export const updatePane = ({
@@ -15,7 +11,7 @@ export const updatePane = ({
   pane: Pane;
   activePaneId: PaneId;
   newTabList?: Array<TabState>;
-  newActiveFileId?: FileId | null;
+  newActiveFileId?: VizFileId | null;
 }): Pane =>
   pane.type === 'splitPane'
     ? {

package/src/types.ts

@@ -1,36 +1,9 @@
-// FileId
-//   * A unique ID for a file.
-//   * This is a random string.
-export type FileId = string;
+import { VizContent, VizFileId } from '@vizhub/viz-types';
 
 // 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,
-//    because based on past experience, that
-//    leads to very difficult frontend logic around
-//    OT in the case that a file is renamed or deleted.
-//  * When the file name changes, or files are added/deleted,
-//    this ID stays the same, simplifying things re:OT.
-export interface Files {
-  [fileId: FileId]: File;
-}
-
-// File
-//  * A file with `name` and `text`.
-export interface File {
-  // The file name.
-  // e.g. "index.html".
-  name: string;
-
-  // The text content of the file.
-  // e.g. "<body>Hello</body>"
-  text: string;
-}
+export type ItemId = VizFileId | FileTreePath;
 
 // FileTreePath
 //  * The path to the directory, e.g. "src/components", OR
@@ -59,7 +32,7 @@ export interface FileTree {
 export interface FileTreeFile {
   name: string;
   file: File;
-  fileId: FileId;
+  fileId: VizFileId;
 }
 export type SearchMatch = Array<{
   line: number;
@@ -89,7 +62,7 @@ export interface SearchResults {
 export type TabState = {
   // `fileId`
   // The ID of the file that the tab represents.
-  fileId: FileId;
+  fileId: VizFileId;
 
   // `isTransient`
   // Represents whether the tab is temporary or persistent.
@@ -119,7 +92,7 @@ export type LeafPane = {
   // The ID of the file that is currently active
   // within this leaf pane.
   // Invariant: `activeFileId` is always in `tabList`.
-  activeFileId: FileId | null;
+  activeFileId: VizFileId | null;
 };
 
 // Internal node of the tree data structure
@@ -176,24 +149,6 @@ export type ShareDBDoc<T> = {
   whenNothingPending: (callback: () => void) => void;
 };
 
-// A unique ID for an AI stream.
-// Generated by the client.
-export type AIStreamId = string;
-
-// The ShareDB document type for VZCode.
-export type VZCodeContent = {
-  // `files`
-  //   * The files in the VZCode instance.
-  files?: Files;
-
-  // `isInteracting`
-  //   * `true` when the user is interacting
-  //     via interactive code widgets (e.g. Alt+drag)
-  //     * Hot reloading is throttled when this is `true`.
-  //   * `false` or `undefined` when they are not (e.g. normal typing)
-  //     * Hot reloading is debounced when this is `false`.
-  isInteracting?: boolean;
-};
 // Example Presence object, from ShareDB:
 // {
 //   "start": [
@@ -222,7 +177,7 @@ export type Presence = {
 // * What file the presence is associated with
 export type PresenceIndicator = {
   username: Username;
-  fileId: FileId;
+  fileId: VizFileId;
 };
 
 // An id used for presence.
@@ -234,5 +189,5 @@ 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,
+  next: (content: VizContent) => VizContent,
 ) => void;