vzcode 2.0.0 → 2.3.0

package/src/client/useOpenDirectories.ts

@@ -1,99 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,178 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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]);
-};