vzcode 2.3.0 → 2.4.0

package/src/client/useOpenDirectories.ts

@@ -0,0 +1,99 @@
+import { useState, useCallback, useEffect } from 'react';
+import type { Pane } from '../types';
+import { VizContent } from '@vizhub/viz-types';
+
+// TODO bring this feature back
+// When a page is opened with an active file,
+// make sure all the directories leading to that file
+// are opened automatically.
+export const initialOpenDirectories = (
+  activeFile: string | null,
+): Set<VZPath> => {
+  const openDirectories = new Set<VZPath>();
+  if (activeFile) {
+    const path = activeFile.split('/');
+    for (let i = 1; i < path.length; i++) {
+      openDirectories.add(path.slice(0, i).join('/'));
+    }
+  }
+  return openDirectories;
+};
+
+type VZPath = string;
+
+// Inspired by
+// https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/useOpenDirectories.js
+// TODO move this into reducer
+export const useOpenDirectories = ({
+  activePane,
+  content,
+}: {
+  activePane: Pane;
+  content: VizContent;
+}): {
+  isDirectoryOpen: (path: VZPath) => boolean;
+  toggleDirectory: (path: VZPath) => void;
+} => {
+  // The set of open directories by path/
+  const [openDirectories, setOpenDirectories] = useState<
+    Set<VZPath>
+  >(new Set());
+
+  // (client-side only) initialize the open directories
+  // based on the open files from the URL params.
+  useEffect(() => {
+    if (
+      activePane.type === 'leafPane' &&
+      activePane?.activeFileId &&
+      content.files[activePane.activeFileId]
+    ) {
+      const activeFileId = activePane.activeFileId;
+      const fileName = content.files[activeFileId].name;
+      const dirsToOpen = initialOpenDirectories(fileName);
+      setOpenDirectories((prev) => {
+        const updated = new Set(prev);
+        for (const dir of dirsToOpen) {
+          updated.add(dir);
+        }
+        return updated;
+      });
+    }
+  }, [activePane]);
+
+  // Whether a directory is open.
+  const isDirectoryOpen: (path: VZPath) => boolean =
+    useCallback(
+      (path) => openDirectories.has(path),
+      [openDirectories],
+    );
+
+  /**
+   * Toggles the state of a directory (open/close).
+   * If the directory is currently open, it will close it.
+   * If it's closed, it will open it.
+   */
+  const toggleDirectory = useCallback(
+    (path: VZPath) => {
+      // Create a copy of the currently open directories
+      const updatedOpenDirectories = new Set(
+        openDirectories,
+      );
+
+      // Check if the directory is currently open
+      const directoryIsOpen = isDirectoryOpen(path);
+
+      // Toggle the directory's state
+      if (directoryIsOpen) {
+        updatedOpenDirectories.delete(path);
+      } else {
+        updatedOpenDirectories.add(path);
+      }
+
+      // Update the state with the modified set of open directories
+      setOpenDirectories(updatedOpenDirectories);
+    },
+    [openDirectories, isDirectoryOpen],
+  );
+
+  return { isDirectoryOpen, toggleDirectory };
+};

package/src/client/usePresenceAutoFollow.ts

@@ -0,0 +1,85 @@
+import { useEffect, useRef } from 'react';
+import { Presence, PresenceId } from '../types';
+import { VizFileId } from '@vizhub/viz-types';
+
+const DEBUG = false;
+
+/**
+ * Custom hook that handles auto-following users by opening tabs when presence
+ * is received on files that are not currently open. This logic is independent
+ * of CodeMirror extensions and works regardless of editor cache state.
+ */
+export const usePresenceAutoFollow = ({
+  docPresence,
+  enableAutoFollow,
+  openTab,
+  activePane,
+}) => {
+  // Track enableAutoFollow on a ref for use in event handlers
+  const enableAutoFollowRef = useRef(enableAutoFollow);
+  useEffect(() => {
+    enableAutoFollowRef.current = enableAutoFollow;
+  }, [enableAutoFollow]);
+
+  // Track active file for comparison
+  const activeFileIdRef = useRef(activePane?.activeFileId);
+  useEffect(() => {
+    activeFileIdRef.current = activePane?.activeFileId;
+  }, [activePane?.activeFileId]);
+
+  useEffect(() => {
+    if (!docPresence) return;
+
+    const handlePresenceReceive = (
+      id: PresenceId,
+      presence: Presence,
+    ) => {
+      if (DEBUG) {
+        console.log(
+          `[usePresenceAutoFollow] Received presence for id ${id}`,
+          presence,
+        );
+      }
+
+      // If presence is null, the user has disconnected
+      if (!presence) {
+        return;
+      }
+
+      // If auto-follow is not enabled, do nothing
+      if (!enableAutoFollowRef.current) {
+        return;
+      }
+
+      // Extract the file ID from the presence path
+      // Presence path structure: [path, to, file, fileId, position]
+      // We want the fileId which should be at index 1 for files
+      const presenceFileId = presence.start[1] as VizFileId;
+
+      // If the presence is for the currently active file, do nothing
+      // (the CodeMirror extension will handle displaying the cursor)
+      if (presenceFileId === activeFileIdRef.current) {
+        return;
+      }
+
+      // If the presence is for a different file, open that tab
+      DEBUG &&
+        console.log(
+          `[usePresenceAutoFollow] Auto-opening tab for ${presence.username} in file ${presenceFileId}`,
+        );
+
+      openTab({
+        fileId: presenceFileId,
+        isTransient: true,
+      });
+    };
+
+    // Subscribe to presence changes
+    docPresence.on('receive', handlePresenceReceive);
+
+    // Cleanup subscription on unmount
+    return () => {
+      docPresence.off('receive', handlePresenceReceive);
+    };
+  }, [docPresence, openTab]);
+};

package/src/client/usePrettier/index.ts

@@ -0,0 +1,178 @@
+import { VizFileId, VizContent } from '@vizhub/viz-types';
+import { JSONOp, ShareDBDoc } from '../../types';
+import { useEffect, useRef, useState } from 'react';
+
+// The time in milliseconds by which auto-saving is debounced.
+export const autoPrettierDebounceTimeMS = 1200;
+
+// Computes a file extension from a file name.
+// Example: 'foo.js' => '.js'
+const extension = (fileName: string) => {
+  const match = fileName.match(/\.([^.]+)$/);
+  if (match) {
+    return match[1];
+  } else {
+    return '';
+  }
+};
+
+// export const shouldTriggerRun = (event: KeyboardEvent) => {
+//   if(event.ctrlKey && event.key === 's') {
+//     return true;
+//   }
+// }
+
+export const usePrettier = ({
+  shareDBDoc,
+  submitOperation,
+  prettierWorker,
+}: {
+  shareDBDoc: ShareDBDoc<VizContent> | null;
+  submitOperation: (
+    next: (content: VizContent) => VizContent,
+  ) => void;
+  prettierWorker: Worker;
+}) => {
+  // The set of files that have been modified
+  // since the last Prettier run.
+  const dirtyFilesRef = useRef<Set<VizFileId>>(new Set());
+
+  // State to hold the error from Prettier
+  // `null` means no errors
+  // If this is a string, it's the
+  // error message from Prettier.
+  const [prettierError, setPrettierError] = useState<
+    string | null
+  >(null);
+
+  // A ref to keep track of whether an op is being applied.
+  // This is used to prevent Prettier from running
+  // when the op is coming from Prettier itself.
+  const isApplyingOpRef = useRef(false);
+
+  // We use a ref to keep track of the runPrettier function.
+  const runPrettierRef = useRef(null);
+
+  useEffect(() => {
+    if (!shareDBDoc) {
+      return;
+    }
+
+    // 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;
+
+      // Handle syntax errors
+      if (error) {
+        // If there's an error, set the error state
+        setPrettierError(error);
+
+        // Return early as there is no text change to apply.
+        return;
+      } else {
+        // Make sure the error overlay goes away
+        // when Prettier runs successfully with no errors.
+        setPrettierError(null);
+      }
+
+      isApplyingOpRef.current = true;
+      submitOperation((document) => ({
+        ...document,
+        files: {
+          ...document.files,
+          [fileId]: {
+            ...document.files[fileId],
+            text: fileTextPrettified,
+          },
+        },
+      }));
+      isApplyingOpRef.current = false;
+    };
+
+    // Listen for messages from the worker.
+    prettierWorker.addEventListener(
+      'message',
+      handleMessage,
+    );
+
+    const runPrettier = async () => {
+      // Get the content of the document
+      const content = shareDBDoc.data;
+
+      // Get the files
+      const files = content.files;
+
+      // Get the set of dirty files
+      const dirtyFiles = dirtyFilesRef.current;
+
+      // Get the dirty files
+      const dirtyFileIds = Array.from(dirtyFiles);
+
+      // Clear the set of dirty files
+      dirtyFiles.clear();
+
+      // Run Prettier on each dirty file
+      for (const fileId of dirtyFileIds) {
+        // Get the file
+        const file = files[fileId];
+
+        // Craft the data to send to the worker
+        const data = {
+          fileText: file.text,
+          fileExtension: extension(file.name),
+          fileId,
+        };
+
+        // Run Prettier for this file
+        prettierWorker.postMessage(data);
+      }
+    };
+    runPrettierRef.current = runPrettier;
+
+    const handleOpBatch = (op: JSONOp) => {
+      // Only act on changes coming from the client
+      // OR changes coming from the AI Assist that we
+      // if (isLocal) {
+      // If the op is coming from Prettier itself,
+      // then do nothing.
+      if (isApplyingOpRef.current) {
+        // console.log('ignoring op from Prettier');
+        return;
+      }
+
+      // 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: VizFileId = op[1];
+
+        // Add the file id to the set of dirty files
+        dirtyFilesRef.current.add(fileId);
+      }
+    };
+
+    // Listen for changes
+    shareDBDoc.on('op batch', handleOpBatch);
+
+    // Clean up the event listeners
+    return () => {
+      prettierWorker.removeEventListener(
+        'message',
+        handleMessage,
+      );
+
+      shareDBDoc.removeListener('op batch', handleOpBatch);
+    };
+  }, [shareDBDoc]);
+
+  // Return the errors and run prettier function ref
+  // for use elsewhere.
+  return { prettierError, runPrettierRef };
+};

package/src/client/usePrettier/worker.ts

@@ -0,0 +1,109 @@
+import { format } from 'prettier/standalone';
+import * as prettierPluginBabel from 'prettier/plugins/babel';
+import * as prettierPluginEstree from 'prettier/plugins/estree';
+import * as prettierPluginHtml from 'prettier/plugins/html';
+import * as prettierPluginMarkdown from 'prettier/plugins/markdown';
+import * as prettierPluginCSS from 'prettier/plugins/postcss';
+import * as prettierPluginTypescript from 'prettier/plugins/typescript';
+import * as prettierPluginSvelte from 'prettier-plugin-svelte/browser';
+
+import { VizFileId } from '@vizhub/viz-types';
+
+const enableSvelte = true;
+
+const parsers = {
+  js: 'babel',
+  jsx: 'babel',
+  mjs: 'babel',
+  cjs: 'babel',
+  ts: 'typescript',
+  tsx: 'typescript',
+  css: 'css',
+  //   '.less': 'less',
+  //   '.scss': 'scss',
+  html: 'html',
+  json: 'json',
+  json5: 'json5',
+  md: 'markdown',
+  markdown: 'markdown',
+  //   '.vue': 'vue',
+};
+
+if (enableSvelte) {
+  // @ts-ignore
+  parsers.svelte = 'svelte';
+}
+
+const plugins = [
+  prettierPluginBabel,
+  prettierPluginEstree,
+  prettierPluginHtml,
+  prettierPluginMarkdown,
+  prettierPluginTypescript,
+  prettierPluginCSS,
+] as any; // Cast to any to resolve type conflict
+
+if (enableSvelte) {
+  // @ts-ignore
+  plugins.push(prettierPluginSvelte);
+}
+
+onmessage = async ({
+  data,
+}: {
+  data: {
+    // The text content of the file
+    fileText: string;
+
+    // The file extension
+    // Supported extensions: https://prettier.io/docs/en/options.html#parser
+    // The editor only supports
+    // - JavaScript
+    // - TypeScript
+    // - HTML
+    // - CSS
+    // - JSON
+    // - Markdown
+
+    fileExtension: string;
+
+    // The file id
+    fileId: VizFileId;
+  };
+}) => {
+  const { fileExtension, fileText, fileId } = data;
+  const parser = parsers[fileExtension];
+
+  // If no parser is found, just do nothing.
+  // For example, if the user opens a CSV file,
+  // then we don't want to run Prettier on it,
+  // and we also don't want to show an error.
+  if (!parser) {
+    return;
+  }
+
+  try {
+    const fileTextPrettified = await format(fileText, {
+      parser,
+      plugins,
+
+      // This helps with Markdown files
+      proseWrap: 'always',
+
+      // Opinionated code style for JavaScript
+      singleQuote: true,
+      printWidth: 60,
+    });
+
+    postMessage({
+      fileId,
+      fileTextPrettified,
+    });
+  } catch (error) {
+    console.error(error);
+    postMessage({
+      fileId,
+      error: error.toString(),
+    });
+  }
+};

package/src/client/useRunCode.tsx

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react';
+import { SubmitOperation } from '../types';
+import { createRunCodeFunction } from '../runCode';
+
+// Runs the code by flashing `isInteracting` to `true`.
+export const useRunCode = (
+  submitOperation: SubmitOperation,
+) => {
+  const runCodeRef = useRef(null);
+  useEffect(() => {
+    const runCode = createRunCodeFunction(submitOperation);
+    runCodeRef.current = runCode;
+  }, [submitOperation]);
+  return runCodeRef;
+};

package/src/client/useRuntimeError.ts

@@ -0,0 +1,32 @@
+import { useCallback, useState } from 'react';
+
+// Custom hook to manage runtime error state
+export const useRuntimeError = () => {
+  // State to hold the runtime error message
+  // `null` means no errors
+  // If this is a string, it's the
+  // error message from runtime execution.
+  const [runtimeError, setRuntimeError] = useState<
+    string | null
+  >(null);
+
+  // Callback function to handle runtime errors
+  // This will be passed to the createRuntime function
+  const handleRuntimeError = useCallback(
+    (formattedErrorMessage: string) => {
+      setRuntimeError(formattedErrorMessage);
+    },
+    [],
+  );
+
+  // Function to clear runtime errors
+  const clearRuntimeError = useCallback(() => {
+    setRuntimeError(null);
+  }, []);
+
+  return {
+    runtimeError,
+    handleRuntimeError,
+    clearRuntimeError,
+  };
+};

package/src/client/useSubmitOperation.ts

@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+import { ShareDBDoc } from '../types'; // Assuming ShareDBDoc is already generic
+import { createSubmitOperation } from '../submitOperation';
+
+// A generic helper function to submit diff-based operations to ShareDB
+export const useSubmitOperation = <T>(
+  shareDBDoc: ShareDBDoc<T>,
+): ((next: (data: T) => T) => void) => {
+  const submitOperation: (next: (data: T) => T) => void =
+    useCallback(() => {
+      return createSubmitOperation(shareDBDoc);
+    }, [shareDBDoc])();
+
+  return submitOperation;
+};

package/src/client/useURLSync.ts

@@ -0,0 +1,137 @@
+import { TabState } from '../types';
+import { VizFileId, VizContent } from '@vizhub/viz-types';
+import { useEffect, useMemo, useRef } from 'react';
+import {
+  TabStateParams,
+  decodeTabs,
+  encodeTabs,
+} from './tabsSearchParameters';
+import { useSearchParams } from '../reactRouterExports';
+
+// Synchronizes the tab state with the URL parameters.
+export const useURLSync = ({
+  content,
+  openTab,
+  setActiveFileId,
+  tabList,
+  activeFileId,
+}: {
+  content: VizContent | null;
+  openTab: (tabState: TabState) => void;
+  setActiveFileId: (activeFileId: VizFileId) => void;
+  tabList: Array<TabState>;
+  activeFileId: VizFileId | null;
+}) => {
+  // Use React router to get and set the  search parameters.
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // Extract the tab state parameters from the search parameters.
+  const tabStateParams: TabStateParams = useMemo(
+    () => ({
+      file: searchParams.get('file'),
+      tabs: searchParams.get('tabs'),
+    }),
+    [searchParams],
+  );
+
+  // `true` after the state is updated based on the
+  // initial search parameters from the URL.
+  const isInitialized = useRef(false);
+
+  // Initialize the state based on the search parameters.
+  useEffect(() => {
+    // Do nothing if the state has already been initialized.
+    if (isInitialized.current) {
+      return;
+    }
+
+    // Wait for the content to be loaded.
+    if (!content) {
+      return;
+    }
+
+    // Decode the search parameters.
+    const { tabList, activeFileId } = decodeTabs({
+      tabStateParams,
+      content,
+    });
+
+    // Mark the state as initialized.
+    isInitialized.current = true;
+
+    // Update the state.
+    tabList.forEach(openTab);
+    setActiveFileId(activeFileId);
+  }, [
+    content,
+    searchParams,
+    setActiveFileId,
+    openTab,
+    isInitialized,
+  ]);
+
+  // Track content in a ref so that we can use it in the
+  // effect below without triggering the effect when
+  // the content changes.
+  const contentRef = useRef(content);
+  useEffect(() => {
+    contentRef.current = content;
+  }, [content]);
+
+  // track setSearchParams in a ref so that we can use it in the
+  // effect below without triggering the effect on each render.
+  // The definition of `setSearchParams` changes on every render.
+  const setSearchParamsRef = useRef(setSearchParams);
+  useEffect(() => {
+    setSearchParamsRef.current = setSearchParams;
+  }, [setSearchParams]);
+
+  // Update the URL to match the current state whenever
+  // the active file or tab list changes.
+  useEffect(() => {
+    // Safety check to make sure the content is loaded.
+    // Should never happen.
+    if (!contentRef.current) {
+      return;
+    }
+
+    const newTabStateParams: TabStateParams = encodeTabs({
+      tabList,
+      activeFileId,
+      content: contentRef.current,
+    });
+
+    // Update the URL if the search parameters have changed.
+    setSearchParamsRef.current(
+      (oldSearchParams: URLSearchParams) => {
+        // Create a copy of the old search params
+        const updatedSearchParams = new URLSearchParams(
+          oldSearchParams,
+        );
+
+        // Set the 'file' parameter
+        if (newTabStateParams.file) {
+          updatedSearchParams.set(
+            'file',
+            newTabStateParams.file,
+          );
+        } else {
+          updatedSearchParams.delete('file'); // Remove 'file' if it's not present in newTabStateParams
+        }
+
+        // Set the 'tabs' parameter
+        if (newTabStateParams.tabs) {
+          updatedSearchParams.set(
+            'tabs',
+            newTabStateParams.tabs,
+          );
+        } else {
+          updatedSearchParams.delete('tabs'); // Remove 'tabs' if it's not present in newTabStateParams
+        }
+
+        // Return the updated search params
+        return updatedSearchParams;
+      },
+    );
+  }, [tabList, activeFileId]);
+};