vzcode 2.2.0 → 2.3.0

package/src/server/index.ts

@@ -1,388 +0,0 @@
-#!/usr/bin/env node
-import WebSocketJSONStream from '@teamwork/websocket-json-stream';
-import bodyParser from 'body-parser';
-import express from 'express';
-import fs from 'fs';
-import http from 'http';
-import open from 'open';
-import path from 'path';
-import ShareDB from 'sharedb';
-import { fileURLToPath } from 'url';
-import { WebSocketServer } from 'ws';
-import { json1Presence } from '../ot.js';
-import { computeInitialDocument } from './computeInitialDocument.js';
-import { handleAIAssist } from './handleAIAssist.js';
-import { handleAICopilot } from './handleAICopilot.js';
-import { handleAIChatMessage } from './handleAIChatMessage.js';
-import { handleAIChatUndo } from './handleAIChatUndo.js';
-import { isDirectory } from './isDirectory.js';
-import { createToken } from './livekit.js';
-import './setupEnv.js';
-
-// Import the image file utility
-const isImageFile = (fileName) => {
-  return (
-    fileName.match(
-      /\.(png|jpg|jpeg|gif|bmp|svg|webp)$/i,
-    ) !== null
-  );
-};
-
-// The time in milliseconds by which auto-saving is debounced.
-const autoSaveDebounceTimeMS = 800;
-
-// The time in milliseconds by which auto-saving is throttled
-// when the user is interacting with the widgets in the editor.
-const throttleTimeMS = 100;
-
-// Helper function to get the port from command line arguments or use default.
-function getPortFromArgs(defaultPort = 3030) {
-  const portArg = process.argv.find((arg) =>
-    arg.startsWith('--port='),
-  );
-  if (portArg) {
-    return parseInt(portArg.split('=')[1], 10);
-  }
-  return defaultPort;
-}
-
-// Server port.
-const port = getPortFromArgs();
-
-const initialDocument = computeInitialDocument({
-  // Use the current working directory to look for files.
-  fullPath: process.cwd(),
-});
-
-// Register our custom OT type,
-// because it does not ship with ShareDB.
-ShareDB.types.register(json1Presence.type);
-
-const app = express();
-
-// Use ShareDB over WebSocket
-const shareDBBackend = new ShareDB({
-  // Enable presence
-  // See https://github.com/share/sharedb/blob/master/examples/rich-text-presence/server.js#L9
-  presence: true,
-  doNotForwardSendPresenceErrorsToClient: true,
-});
-const server = http.createServer(app);
-const wss = new WebSocketServer({ server });
-wss.on('connection', (ws) => {
-  const clientStream = new WebSocketJSONStream(ws);
-  shareDBBackend.listen(clientStream);
-
-  // Prevent server crashes on errors.
-  clientStream.on('error', (error) => {
-    console.log('clientStream error: ' + error.message);
-  });
-
-  // Handle errors
-  ws.on('error', (error) => {
-    console.log('ws error: ' + error.message);
-  });
-
-  // Handle disconnections
-  ws.on('close', () => {
-    clientStream.end();
-  });
-});
-
-// Serve static files
-const filename = fileURLToPath(import.meta.url);
-const dirname = path.dirname(filename);
-const dir = path.join(dirname, '..', '..', 'dist');
-app.use(express.static(dir));
-
-// Create the initial "document",
-// which is a representation of files on disk.
-const shareDBConnection = shareDBBackend.connect();
-const shareDBDoc = shareDBConnection.get('documents', '1');
-
-// Set up presence for AI editing following the same pattern as useShareDB.ts
-const docPresence = shareDBConnection.getDocPresence(
-  'documents',
-  '1',
-);
-
-// Create local presence for AI editing with a unique ID
-const generateAIEditId = () => {
-  const timestamp = Date.now().toString(36);
-  return `ai-edit-${timestamp}`;
-};
-
-const createAIEditLocalPresence = () =>
-  docPresence.create(generateAIEditId());
-
-shareDBDoc.create(initialDocument, json1Presence.type.uri);
-
-// Handle AI Assist requests.
-app.post(
-  '/ai-assist',
-  bodyParser.json(),
-  handleAIAssist(shareDBDoc),
-);
-
-// Handle AI Copilot requests.
-app.post(
-  '/ai-copilot',
-  bodyParser.json(),
-  handleAICopilot(),
-);
-
-// Handle AI Chat Message requests.
-app.post(
-  '/ai-chat-message',
-  bodyParser.json(),
-  handleAIChatMessage({
-    shareDBDoc,
-    createAIEditLocalPresence,
-    onCreditDeduction: undefined,
-  }),
-);
-
-// Handle AI Chat Undo requests.
-app.post(
-  '/ai-chat-undo',
-  bodyParser.json(),
-  handleAIChatUndo({
-    shareDBDoc,
-  }),
-);
-
-// Livekit Token Generator
-app.get('/livekit-token', async (req, res) => {
-  const { room, username } = req.query;
-  res.send(await createToken(room, username));
-});
-
-// The state of the document when files were last auto-saved.
-let previousDocument = initialDocument;
-
-// Saves the files that changed.
-const save = () => {
-  const currentDocument = shareDBDoc.data;
-
-  // Take a look at each file (key) previously and currently.
-  const allKeys = Object.keys({
-    ...currentDocument.files,
-    ...previousDocument.files,
-  });
-
-  const directoriesToDelete = [];
-
-  for (const key of allKeys) {
-    const previous = previousDocument.files[key];
-    const current = currentDocument.files[key];
-
-    // If this file was neither created nor deleted...
-    if (previous && current) {
-      // Handle changing of text content.
-      if (previous.text !== current.text) {
-        if (isImageFile(current.name)) {
-          // Write image files as binary from base64
-          const buffer = Buffer.from(
-            current.text,
-            'base64',
-          );
-          fs.writeFileSync(current.name, buffer);
-        } else {
-          // Write non-image files as text
-          fs.writeFileSync(current.name, current.text);
-        }
-      }
-
-      // // Handle renaming files.
-      // if (previous.name !== current.name) {
-
-      //   const previousPath = previous.name.split('/');
-      //   const currentPath = current.name.split('/');
-
-      //   // - If the path is length 1 for previous and current,
-      //   //   then this should be true.
-      //   // - If the path length is the sane for previous and current,
-      //   //   AND all the entries leading up to the last one are the same
-      //   //   between previous and current, AND the last entry in the arrays
-      //   //   (the file name itself) is different between previous and current
-      //   const onlyFileNameChanged =
-      //     (previousPath.length === 1 &&
-      //       currentPath.length === 1) ||
-      //     (previousPath.length === currentPath.length &&
-      //       previousPath
-      //         .slice(0, -1)
-      //         .every(
-      //           (val, index) => val === currentPath[index],
-      //         ) &&
-      //       previousPath.at(-1) !== currentPath.at(-1));
-
-      //   // This logic works if only the file name itself changes.
-      //   if (onlyFileNameChanged) {
-      //     fs.renameSync(previous.name, current.name);
-      //   }
-      //   {
-      //     // If we get here, then the directory may have been renamed,
-      //     // or the file has been moved between directories.
-      //     // If we get here, then the directory may have been renamed,
-      //     // or the file has been moved between directories.
-      //     const newDir = path.dirname(current.name);
-
-      //     // Check if the new directory exists, if not, create it
-      //     if (!fs.existsSync(newDir)) {
-      //       fs.mkdirSync(newDir, { recursive: true });
-      //     }
-
-      //     // Move the file to the new directory
-      //     fs.renameSync(previous.name, current.name);
-      //   }
-      // }
-      // Handle renaming files.
-      if (previous.name !== current.name) {
-        if (isDirectory(previous.name)) {
-          // If the directory itself is being renamed,
-          // Phase I: Ignore it, and get the files moved
-          // Phase II: Keep track of these, and delete them after
-          //           all the files moved.
-          // directoriesToDelete.push(previous.name)
-          directoriesToDelete.push(previous.name);
-        } else {
-          const newDir = path.dirname(current.name);
-
-          // Check if the new directory exists, if not, create it
-          if (!fs.existsSync(newDir)) {
-            fs.mkdirSync(newDir, { recursive: true });
-          }
-
-          // Move the file to the new directory
-          fs.renameSync(previous.name, current.name);
-        }
-      }
-    }
-
-    // handle deleting files and directories.
-    if (previous && !current) {
-      let stats = fs.statSync(previous.name);
-      //Check if the file path we are trying to delete is a directory
-      if (!stats.isDirectory()) {
-        fs.unlinkSync(previous.name);
-      } else {
-        //Performs directory deletion.
-        fs.rm(
-          previous.name,
-          {
-            recursive: true, //Makes sure that all files in directory are deleted.
-          },
-          (error) => {
-            if (error) {
-              console.log(error);
-            }
-          },
-        );
-      }
-    }
-
-    // Handle creating files and Directories.
-    if (!previous && current) {
-      //File Creation
-      if (!isDirectory(current.name)) {
-        if (isImageFile(current.name)) {
-          // Write image files as binary from base64
-          const buffer = Buffer.from(
-            current.text,
-            'base64',
-          );
-          fs.writeFileSync(current.name, buffer);
-        } else {
-          // Write non-image files as text
-          fs.writeFileSync(current.name, current.text);
-        }
-      } else {
-        fs.mkdirSync(current.name, { recursive: true });
-      }
-    }
-  }
-  // TODO deleted all directories under directoriesToDelete
-
-  for (const dir of directoriesToDelete) {
-    //Performs directory deletion.
-    fs.rm(
-      dir,
-      {
-        recursive: true, //Makes sure that all files in directory are deleted.
-      },
-      (error) => {
-        if (error) {
-          console.log(error);
-        }
-      },
-    );
-  }
-
-  previousDocument = currentDocument;
-};
-
-// // Listen for when users modify files.
-// // Files get written to disk after `autoSaveDebounceTimeMS`
-// // milliseconds of inactivity.
-// let timeout;
-// shareDBDoc.subscribe(() => {
-//   shareDBDoc.on('op', () => {
-//     // console.log(shareDBDoc.data.isInteracting);
-//     clearTimeout(timeout);
-//     timeout = setTimeout(save, autoSaveDebounceTimeMS);
-//   });
-// });
-
-let lastExecutedTime = Date.now();
-let lastChangeTimeout; // This timeout ensures the last change is saved
-
-// Function to throttle the saving
-function throttleSave() {
-  const now = Date.now();
-  const timeSinceLastExecution = now - lastExecutedTime;
-
-  if (timeSinceLastExecution > throttleTimeMS) {
-    save();
-    lastExecutedTime = now;
-  } else {
-    // Clear the previous timeout and set a new one to save the last change
-    clearTimeout(lastChangeTimeout);
-    lastChangeTimeout = setTimeout(() => {
-      save();
-      lastExecutedTime = now;
-    }, throttleTimeMS - timeSinceLastExecution);
-  }
-}
-
-// Function to debounce the saving
-let debounceTimeout;
-function debounceSave() {
-  clearTimeout(debounceTimeout);
-  debounceTimeout = setTimeout(
-    save,
-    autoSaveDebounceTimeMS,
-  );
-}
-
-// Subscribe to listen for modifications
-shareDBDoc.subscribe(() => {
-  shareDBDoc.on('op', () => {
-    if (shareDBDoc.data.isInteracting) {
-      throttleSave();
-    } else {
-      debounceSave();
-    }
-  });
-});
-
-server.listen(port, async () => {
-  // Note: ngrok support can be added when the package is properly installed
-  // Sets the port to the one specified in the environment
-  // variable (for development) or the default port.
-  let livePort = process.env.EDITOR_PORT || port;
-  console.log(`EDITOR_PORT: ${process.env.EDITOR_PORT}`);
-  console.log(
-    `Editor is live at http://localhost:${livePort}`,
-  );
-  open(`http://localhost:${livePort}`);
-});

package/src/server/livekit.ts

@@ -1,24 +0,0 @@
-import { AccessToken } from 'livekit-server-sdk';
-
-const { LIVEKIT_API_KEY, LIVEKIT_API_SECRET } = process.env;
-
-export const createToken = async (roomName, username) => {
-  // If this room doesn't exist, it'll be automatically created when the first
-  // client joins
-  // Identifier to be used for participant.
-  // It's available as LocalParticipant.identity with livekit-client SDK
-  // console.log(username);
-  const participantName = `${username}`;
-
-  const at = new AccessToken(
-    LIVEKIT_API_KEY,
-    LIVEKIT_API_SECRET,
-    {
-      identity: participantName,
-      // Token to expire after 10 minutes
-      ttl: '10m',
-    },
-  );
-  at.addGrant({ roomJoin: true, room: roomName });
-  return await at.toJwt();
-};

package/src/server/prettier.ts

@@ -1,115 +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 { VizFiles, VizFileId } from '@vizhub/viz-types';
-
-// Parser mappings - matches client-side implementation
-const parsers = {
-  js: 'babel',
-  jsx: 'babel',
-  mjs: 'babel',
-  cjs: 'babel',
-  ts: 'typescript',
-  tsx: 'typescript',
-  css: 'css',
-  html: 'html',
-  json: 'json',
-  json5: 'json5',
-  md: 'markdown',
-  markdown: 'markdown',
-} as const;
-
-// Prettier plugins - matches client-side implementation
-const plugins = [
-  prettierPluginBabel,
-  prettierPluginEstree,
-  prettierPluginHtml,
-  prettierPluginMarkdown,
-  prettierPluginTypescript,
-  prettierPluginCSS,
-] as any;
-
-// Prettier options - matches client-side implementation and .prettierrc
-const prettierOptions = {
-  proseWrap: 'always' as const,
-  singleQuote: true,
-  printWidth: 60,
-};
-
-/**
- * Extracts file extension from filename
- * Example: 'foo.js' => 'js'
- */
-const getFileExtension = (fileName: string): string => {
-  const match = fileName.match(/\.([^.]+)$/);
-  return match ? match[1] : '';
-};
-
-/**
- * Formats a single file using Prettier
- */
-export const formatFile = async (
-  fileText: string,
-  fileName: string,
-): Promise<string | null> => {
-  const fileExtension = getFileExtension(fileName);
-  const parser =
-    parsers[fileExtension as keyof typeof parsers];
-
-  // If no parser is found, return null (no formatting)
-  if (!parser) {
-    return null;
-  }
-
-  try {
-    const formatted = await format(fileText, {
-      parser,
-      plugins,
-      ...prettierOptions,
-    });
-    return formatted;
-  } catch (error) {
-    // Log error but don't throw - return original text
-    console.error(
-      `Prettier formatting error for ${fileName}:`,
-      error,
-    );
-    return null;
-  }
-};
-
-/**
- * Formats multiple files using Prettier
- * Only formats files that have supported extensions
- * Returns a map of fileId -> formatted text for successfully formatted files
- */
-export const formatFiles = async (
-  files: VizFiles,
-  fileIds?: VizFileId[],
-): Promise<{ [fileId: VizFileId]: string }> => {
-  const results: { [fileId: VizFileId]: string } = {};
-  const targetFileIds = fileIds || Object.keys(files);
-
-  // Process files in parallel for better performance
-  const formatPromises = targetFileIds.map(
-    async (fileId) => {
-      const file = files[fileId];
-      if (!file) return;
-
-      const formatted = await formatFile(
-        file.text,
-        file.name,
-      );
-      if (formatted !== null && formatted !== file.text) {
-        results[fileId] = formatted;
-      }
-    },
-  );
-
-  await Promise.all(formatPromises);
-  return results;
-};

package/src/submitOperation.ts

@@ -1,25 +0,0 @@
-import { diff } from './ot.js';
-
-/**
- * Creates a submitOperation function that can be used to submit diff-based operations to ShareDB.
- * This is the core logic extracted from useSubmitOperation for reuse across client and server.
- */
-export const createSubmitOperation = <T>(shareDBDoc: {
-  data: T;
-  submitOp: (op: any) => void;
-}): ((next: (data: T) => T) => void) => {
-  return (next) => {
-    const data: T = shareDBDoc.data;
-    const op = diff(data, next(data));
-    if (op && shareDBDoc) {
-      shareDBDoc.submitOp(op);
-    }
-  };
-};
-
-/**
- * Type definition for the submitOperation function
- */
-export type SubmitOperationFunction<T> = (
-  next: (data: T) => T,
-) => void;