TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: package websocket event arguments as objects

Browse Source
This commit is contained in:
James Murdza 2024-10-24 20:00:50 -06:00
parent f1c1f50abf
commit 0fe652d873
10 changed files with 148 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
backend/server/src/SocketHandlers.ts
View File

@ -25,38 +25,38 @@ function extractPortNumber(inputString: string): number | null {
} }
// Handle heartbeat from a socket connection // Handle heartbeat from a socket connection
export function handleHeartbeat(data: any, context: HandlerContext) { export function handleHeartbeat({ data }: { data: any }, context: HandlerContext) {
context.sandboxManager.setTimeout(CONTAINER_TIMEOUT) context.sandboxManager.setTimeout(CONTAINER_TIMEOUT)
} }
// Handle getting a file // Handle getting a file
export function handleGetFile(fileId: string, context: HandlerContext) { export function handleGetFile({ fileId }: { fileId: string }, context: HandlerContext) {
return context.fileManager.getFile(fileId) return context.fileManager.getFile(fileId)
} }
// Handle getting a folder // Handle getting a folder
export function handleGetFolder(folderId: string, context: HandlerContext) { export function handleGetFolder({ folderId }: { folderId: string }, context: HandlerContext) {
return context.fileManager.getFolder(folderId) return context.fileManager.getFolder(folderId)
} }
// Handle saving a file // Handle saving a file
export function handleSaveFile(fileId: string, body: string, context: HandlerContext) { export function handleSaveFile({ fileId, body }: { fileId: string, body: string }, context: HandlerContext) {
return context.fileManager.saveFile(fileId, body) return context.fileManager.saveFile(fileId, body)
} }
// Handle moving a file // Handle moving a file
export function handleMoveFile(fileId: string, folderId: string, context: HandlerContext) { export function handleMoveFile({ fileId, folderId }: { fileId: string, folderId: string }, context: HandlerContext) {
return context.fileManager.moveFile(fileId, folderId) return context.fileManager.moveFile(fileId, folderId)
} }
// Handle listing apps // Handle listing apps
export async function handleListApps(context: HandlerContext) { export async function handleListApps({ }, context: HandlerContext) {
if (!context.dokkuClient) throw Error("Failed to retrieve apps list: No Dokku client") if (!context.dokkuClient) throw Error("Failed to retrieve apps list: No Dokku client")
return { success: true, apps: await context.dokkuClient.listApps() } return { success: true, apps: await context.dokkuClient.listApps() }
} }
// Handle deploying code // Handle deploying code
export async function handleDeploy(sandboxId: string, context: HandlerContext) { export async function handleDeploy({ sandboxId }: { sandboxId: string }, context: HandlerContext) {
if (!context.gitClient) throw Error("Failed to retrieve apps list: No git client") if (!context.gitClient) throw Error("Failed to retrieve apps list: No git client")
const fixedFilePaths = context.fileManager.sandboxFiles.fileData.map((file) => ({ const fixedFilePaths = context.fileManager.sandboxFiles.fileData.map((file) => ({
...file, ...file,
@ -67,32 +67,32 @@ export async function handleDeploy(sandboxId: string, context: HandlerContext) {
} }
// Handle creating a file // Handle creating a file
export function handleCreateFile(name: string, context: HandlerContext) { export function handleCreateFile({ name }: { name: string }, context: HandlerContext) {
return context.fileManager.createFile(name) return context.fileManager.createFile(name)
} }
// Handle creating a folder // Handle creating a folder
export function handleCreateFolder(name: string, context: HandlerContext) { export function handleCreateFolder({ name }: { name: string }, context: HandlerContext) {
return context.fileManager.createFolder(name) return context.fileManager.createFolder(name)
} }
// Handle renaming a file // Handle renaming a file
export function handleRenameFile(fileId: string, newName: string, context: HandlerContext) { export function handleRenameFile({ fileId, newName }: { fileId: string, newName: string }, context: HandlerContext) {
return context.fileManager.renameFile(fileId, newName) return context.fileManager.renameFile(fileId, newName)
} }
// Handle deleting a file // Handle deleting a file
export function handleDeleteFile(fileId: string, context: HandlerContext) { export function handleDeleteFile({ fileId }: { fileId: string }, context: HandlerContext) {
return context.fileManager.deleteFile(fileId) return context.fileManager.deleteFile(fileId)
} }
// Handle deleting a folder // Handle deleting a folder
export function handleDeleteFolder(folderId: string, context: HandlerContext) { export function handleDeleteFolder({ folderId }: { folderId: string }, context: HandlerContext) {
return context.fileManager.deleteFolder(folderId) return context.fileManager.deleteFolder(folderId)
} }
// Handle creating a terminal session // Handle creating a terminal session
export async function handleCreateTerminal(id: string, socket: any, data: any, context: HandlerContext) { export async function handleCreateTerminal({ id, socket, data }: { id: string, socket: any, data: any }, context: HandlerContext) {
await context.lockManager.acquireLock(data.sandboxId, async () => { await context.lockManager.acquireLock(data.sandboxId, async () => {
await context.terminalManager.createTerminal(id, (responseString: string) => { await context.terminalManager.createTerminal(id, (responseString: string) => {
socket.emit("terminalResponse", { id, data: responseString }) socket.emit("terminalResponse", { id, data: responseString })
@ -108,21 +108,21 @@ export async function handleCreateTerminal(id: string, socket: any, data: any, c
} }
// Handle resizing a terminal // Handle resizing a terminal
export function handleResizeTerminal(dimensions: { cols: number; rows: number }, context: HandlerContext) { export function handleResizeTerminal({ dimensions }: { dimensions: { cols: number; rows: number } }, context: HandlerContext) {
context.terminalManager.resizeTerminal(dimensions) context.terminalManager.resizeTerminal(dimensions)
} }
// Handle sending data to a terminal // Handle sending data to a terminal
export function handleTerminalData(id: string, data: string, context: HandlerContext) { export function handleTerminalData({ id, data }: { id: string, data: string }, context: HandlerContext) {
return context.terminalManager.sendTerminalData(id, data) return context.terminalManager.sendTerminalData(id, data)
} }
// Handle closing a terminal // Handle closing a terminal
export function handleCloseTerminal(id: string, context: HandlerContext) { export function handleCloseTerminal({ id }: { id: string }, context: HandlerContext) {
return context.terminalManager.closeTerminal(id) return context.terminalManager.closeTerminal(id)
} }
// Handle generating code // Handle generating code
export function handleGenerateCode(userId: string, fileName: string, code: string, line: number, instructions: string, context: HandlerContext) { export function handleGenerateCode({ userId, fileName, code, line, instructions }: { userId: string, fileName: string, code: string, line: number, instructions: string }, context: HandlerContext) {
return context.aiWorker.generateCode(userId, fileName, code, line, instructions) return context.aiWorker.generateCode(userId, fileName, code, line, instructions)
} }

71
backend/server/src/index.ts
View File

@ -181,160 +181,159 @@ io.on("connection", async (socket) => {
} }
// Handle various socket events (heartbeat, file operations, terminal operations, etc.) // Handle various socket events (heartbeat, file operations, terminal operations, etc.)
socket.on("heartbeat", async (callback) => { socket.on("heartbeat", async (options, callback) => {
try { try {
callback?.(handleHeartbeat(data, handlerContext)) callback?.(handleHeartbeat(options, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error("Error setting timeout:", e) console.error("Error setting timeout:", e)
socket.emit("error", `Error: set timeout. ${e.message ?? e}`) socket.emit("error", `Error: set timeout. ${e.message ?? e}`)
} }
}) })
socket.on("getFile", async (fileId: string, callback) => { socket.on("getFile", async (options, callback) => {
try { try {
callback?.(await handleGetFile(fileId, handlerContext)) callback?.(await handleGetFile(options, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error("Error getting file:", e) console.error("Error getting file:", e)
socket.emit("error", `Error: get file. ${e.message ?? e}`) socket.emit("error", `Error: get file. ${e.message ?? e}`)
} }
}) })
socket.on("getFolder", async (folderId: string, callback) => { socket.on("getFolder", async (options, callback) => {
try { try {
callback?.(await handleGetFolder(folderId, handlerContext)) callback?.(await handleGetFolder(options, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error("Error getting folder:", e) console.error("Error getting folder:", e)
socket.emit("error", `Error: get folder. ${e.message ?? e}`) socket.emit("error", `Error: get folder. ${e.message ?? e}`)
} }
}) })
socket.on("saveFile", async (fileId: string, body: string, callback) => { socket.on("saveFile", async (options, callback) => {
try { try {
await saveFileRL.consume(data.userId, 1) await saveFileRL.consume(data.userId, 1)
callback?.(await handleSaveFile(fileId, body, handlerContext)) callback?.(await handleSaveFile(options, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error("Error saving file:", e) console.error("Error saving file:", e)
socket.emit("error", `Error: file saving. ${e.message ?? e}`) socket.emit("error", `Error: file saving. ${e.message ?? e}`)
} }
}) })
socket.on("moveFile", async (fileId: string, folderId: string, callback) => { socket.on("moveFile", async (options, callback) => {
try { try {
callback?.(await handleMoveFile(fileId, folderId, handlerContext)) callback?.(await handleMoveFile(options, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error("Error moving file:", e) console.error("Error moving file:", e)
socket.emit("error", `Error: file moving. ${e.message ?? e}`) socket.emit("error", `Error: file moving. ${e.message ?? e}`)
} }
}) })
socket.on("list", async (callback) => { socket.on("list", async (options, callback) => {
console.log("Retrieving apps list...") console.log("Retrieving apps list...")
try { try {
callback?.(await handleListApps(handlerContext)) callback?.(await handleListApps(options, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error("Error retrieving apps list:", e) console.error("Error retrieving apps list:", e)
socket.emit("error", `Error: app list retrieval. ${e.message ?? e}`) socket.emit("error", `Error: app list retrieval. ${e.message ?? e}`)
} }
}) })
socket.on("deploy", async (callback) => { socket.on("deploy", async (options, callback) => {
try { try {
console.log("Deploying project ${data.sandboxId}...") callback?.(await handleDeploy(options, handlerContext))
callback?.(await handleDeploy(data.sandboxId, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error("Error deploying project:", e) console.error("Error deploying project:", e)
socket.emit("error", `Error: project deployment. ${e.message ?? e}`) socket.emit("error", `Error: project deployment. ${e.message ?? e}`)
} }
}) })
socket.on("createFile", async (name: string, callback) => { socket.on("createFile", async (options, callback) => {
try { try {
await createFileRL.consume(data.userId, 1) await createFileRL.consume(data.userId, 1)
callback?.({ success: await handleCreateFile(name, handlerContext) }) callback?.({ success: await handleCreateFile(options, handlerContext) })
} catch (e: any) { } catch (e: any) {
console.error("Error creating file:", e) console.error("Error creating file:", e)
socket.emit("error", `Error: file creation. ${e.message ?? e}`) socket.emit("error", `Error: file creation. ${e.message ?? e}`)
} }
}) })
socket.on("createFolder", async (name: string, callback) => { socket.on("createFolder", async (options, callback) => {
try { try {
await createFolderRL.consume(data.userId, 1) await createFolderRL.consume(data.userId, 1)
callback?.(await handleCreateFolder(name, handlerContext)) callback?.(await handleCreateFolder(options, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error("Error creating folder:", e) console.error("Error creating folder:", e)
socket.emit("error", `Error: folder creation. ${e.message ?? e}`) socket.emit("error", `Error: folder creation. ${e.message ?? e}`)
} }
}) })
socket.on("renameFile", async (fileId: string, newName: string, callback) => { socket.on("renameFile", async (options, callback) => {
try { try {
await renameFileRL.consume(data.userId, 1) await renameFileRL.consume(data.userId, 1)
callback?.(await handleRenameFile(fileId, newName, handlerContext)) callback?.(await handleRenameFile(options, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error("Error renaming file:", e) console.error("Error renaming file:", e)
socket.emit("error", `Error: file renaming. ${e.message ?? e}`) socket.emit("error", `Error: file renaming. ${e.message ?? e}`)
} }
}) })
socket.on("deleteFile", async (fileId: string, callback) => { socket.on("deleteFile", async (options, callback) => {
try { try {
await deleteFileRL.consume(data.userId, 1) await deleteFileRL.consume(data.userId, 1)
callback?.(await handleDeleteFile(fileId, handlerContext)) callback?.(await handleDeleteFile(options, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error("Error deleting file:", e) console.error("Error deleting file:", e)
socket.emit("error", `Error: file deletion. ${e.message ?? e}`) socket.emit("error", `Error: file deletion. ${e.message ?? e}`)
} }
}) })
socket.on("deleteFolder", async (folderId: string, callback) => { socket.on("deleteFolder", async (options, callback) => {
try { try {
callback?.(await handleDeleteFolder(folderId, handlerContext)) callback?.(await handleDeleteFolder(options, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error("Error deleting folder:", e) console.error("Error deleting folder:", e)
socket.emit("error", `Error: folder deletion. ${e.message ?? e}`) socket.emit("error", `Error: folder deletion. ${e.message ?? e}`)
} }
}) })
socket.on("createTerminal", async (id: string, callback) => { socket.on("createTerminal", async (options, callback) => {
try { try {
callback?.(await handleCreateTerminal(id, socket, data, handlerContext)) callback?.(await handleCreateTerminal(options, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error(`Error creating terminal ${id}:`, e) console.error(`Error creating terminal ${options.id}:`, e)
socket.emit("error", `Error: terminal creation. ${e.message ?? e}`) socket.emit("error", `Error: terminal creation. ${e.message ?? e}`)
} }
}) })
socket.on("resizeTerminal", (dimensions: { cols: number; rows: number }, callback) => { socket.on("resizeTerminal", (options, callback) => {
try { try {
callback?.(handleResizeTerminal(dimensions, handlerContext)) callback?.(handleResizeTerminal(options, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error("Error resizing terminal:", e) console.error("Error resizing terminal:", e)
socket.emit("error", `Error: terminal resizing. ${e.message ?? e}`) socket.emit("error", `Error: terminal resizing. ${e.message ?? e}`)
} }
}) })
socket.on("terminalData", async (id: string, data: string, callback) => { socket.on("terminalData", async (options, callback) => {
try { try {
callback?.(await handleTerminalData(id, data, handlerContext)) callback?.(await handleTerminalData(options, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error("Error writing to terminal:", e) console.error("Error writing to terminal:", e)
socket.emit("error", `Error: writing to terminal. ${e.message ?? e}`) socket.emit("error", `Error: writing to terminal. ${e.message ?? e}`)
} }
}) })
socket.on("closeTerminal", async (id: string, callback) => { socket.on("closeTerminal", async (options, callback) => {
try { try {
callback?.(await handleCloseTerminal(id, handlerContext)) callback?.(await handleCloseTerminal(options, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error("Error closing terminal:", e) console.error("Error closing terminal:", e)
socket.emit("error", `Error: closing terminal. ${e.message ?? e}`) socket.emit("error", `Error: closing terminal. ${e.message ?? e}`)
} }
}) })
socket.on("generateCode", async (fileName: string, code: string, line: number, instructions: string, callback) => { socket.on("generateCode", async (options, callback) => {
try { try {
callback?.(await handleGenerateCode(data.userId, fileName, code, line, instructions, handlerContext)) callback?.(await handleGenerateCode(options, handlerContext))
} catch (e: any) { } catch (e: any) {
console.error("Error generating code:", e) console.error("Error generating code:", e)
socket.emit("error", `Error: code generation. ${e.message ?? e}`) socket.emit("error", `Error: code generation. ${e.message ?? e}`)

10
frontend/components/editor/generate.tsx
View File

@ -68,10 +68,12 @@ export default function GenerateInput({
setCurrentPrompt(input) setCurrentPrompt(input)
socket.emit( socket.emit(
"generateCode", "generateCode",
data.fileName, {
data.code, fileName: data.fileName,
data.line, code: data.code,
regenerate ? currentPrompt : input, line: data.line,
instructions: regenerate ? currentPrompt : input
},
(res: { response: string; success: boolean }) => { (res: { response: string; success: boolean }) => {
console.log("Generated code", res.response, res.success) console.log("Generated code", res.response, res.success)
// if (!res.success) { // if (!res.success) {

157
frontend/components/editor/index.tsx
View File

@ -107,7 +107,7 @@ export default function CodeEditor({
// Editor state // Editor state
const [editorLanguage, setEditorLanguage] = useState("plaintext") const [editorLanguage, setEditorLanguage] = useState("plaintext")
console.log("editor language: ",editorLanguage) console.log("editor language: ", editorLanguage)
const [cursorLine, setCursorLine] = useState(0) const [cursorLine, setCursorLine] = useState(0)
const [editorRef, setEditorRef] = const [editorRef, setEditorRef] =
useState<monaco.editor.IStandaloneCodeEditor>() useState<monaco.editor.IStandaloneCodeEditor>()
@ -207,7 +207,7 @@ export default function CodeEditor({
) )
const fetchFileContent = (fileId: string): Promise<string> => { const fetchFileContent = (fileId: string): Promise<string> => {
return new Promise((resolve) => { return new Promise((resolve) => {
socket?.emit("getFile", fileId, (content: string) => { socket?.emit("getFile", { fileId }, (content: string) => {
resolve(content) resolve(content)
}) })
}) })
@ -532,7 +532,7 @@ export default function CodeEditor({
) )
console.log(`Saving file...${activeFileId}`) console.log(`Saving file...${activeFileId}`)
console.log(`Saving file...${content}`) console.log(`Saving file...${content}`)
socket?.emit("saveFile", activeFileId, content) socket?.emit("saveFile", { fileId: activeFileId, body: content })
} }
}, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY) || 1000), }, Number(process.env.FILE_SAVE_DEBOUNCE_DELAY) || 1000),
[socket, fileContents] [socket, fileContents]
@ -649,7 +649,7 @@ export default function CodeEditor({
// Socket event listener effect // Socket event listener effect
useEffect(() => { useEffect(() => {
const onConnect = () => {} const onConnect = () => { }
const onDisconnect = () => { const onDisconnect = () => {
setTerminals([]) setTerminals([])
@ -715,7 +715,7 @@ export default function CodeEditor({
// Debounced function to get file content // Debounced function to get file content
const debouncedGetFile = (tabId: any, callback: any) => { const debouncedGetFile = (tabId: any, callback: any) => {
socket?.emit("getFile", tabId, callback) socket?.emit("getFile", { fileId: tabId }, callback)
} // 300ms debounce delay, adjust as needed } // 300ms debounce delay, adjust as needed
const selectFile = (tab: TTab) => { const selectFile = (tab: TTab) => {
@ -777,8 +777,8 @@ export default function CodeEditor({
? numTabs === 1 ? numTabs === 1
? null ? null
: index < numTabs - 1 : index < numTabs - 1
? tabs[index + 1].id ? tabs[index + 1].id
: tabs[index - 1].id : tabs[index - 1].id
: activeFileId : activeFileId
setTabs((prev) => prev.filter((t) => t.id !== id)) setTabs((prev) => prev.filter((t) => t.id !== id))
@ -835,7 +835,7 @@ export default function CodeEditor({
return false return false
} }
socket?.emit("renameFile", id, newName) socket?.emit("renameFile", { fileId: id, newName })
setTabs((prev) => setTabs((prev) =>
prev.map((tab) => (tab.id === id ? { ...tab, name: newName } : tab)) prev.map((tab) => (tab.id === id ? { ...tab, name: newName } : tab))
) )
@ -844,7 +844,7 @@ export default function CodeEditor({
} }
const handleDeleteFile = (file: TFile) => { const handleDeleteFile = (file: TFile) => {
socket?.emit("deleteFile", file.id, (response: (TFolder | TFile)[]) => { socket?.emit("deleteFile", { fileId: file.id }, (response: (TFolder | TFile)[]) => {
setFiles(response) setFiles(response)
}) })
closeTab(file.id) closeTab(file.id)
@ -854,11 +854,11 @@ export default function CodeEditor({
setDeletingFolderId(folder.id) setDeletingFolderId(folder.id)
console.log("deleting folder", folder.id) console.log("deleting folder", folder.id)
socket?.emit("getFolder", folder.id, (response: string[]) => socket?.emit("getFolder", { folderId: folder.id }, (response: string[]) =>
closeTabs(response) closeTabs(response)
) )
socket?.emit("deleteFolder", folder.id, (response: (TFolder | TFile)[]) => { socket?.emit("deleteFolder", { folderId: folder.id }, (response: (TFolder | TFile)[]) => {
setFiles(response) setFiles(response)
setDeletingFolderId("") setDeletingFolderId("")
}) })
@ -902,7 +902,7 @@ export default function CodeEditor({
<DisableAccessModal <DisableAccessModal
message={disableAccess.message} message={disableAccess.message}
open={disableAccess.isDisabled} open={disableAccess.isDisabled}
setOpen={() => {}} setOpen={() => { }}
/> />
<Loading /> <Loading />
</> </>
@ -944,8 +944,8 @@ export default function CodeEditor({
code: code:
(isSelected && editorRef?.getSelection() (isSelected && editorRef?.getSelection()
? editorRef ? editorRef
?.getModel() ?.getModel()
?.getValueInRange(editorRef?.getSelection()!) ?.getValueInRange(editorRef?.getSelection()!)
: editorRef?.getValue()) ?? "", : editorRef?.getValue()) ?? "",
line: generate.line, line: generate.line,
}} }}
@ -1075,62 +1075,62 @@ export default function CodeEditor({
</div> </div>
</> </>
) : // Note clerk.loaded is required here due to a bug: https://github.com/clerk/javascript/issues/1643 ) : // Note clerk.loaded is required here due to a bug: https://github.com/clerk/javascript/issues/1643
clerk.loaded ? ( clerk.loaded ? (
<> <>
{provider && userInfo ? ( {provider && userInfo ? (
<Cursors yProvider={provider} userInfo={userInfo} /> <Cursors yProvider={provider} userInfo={userInfo} />
) : null} ) : null}
<Editor <Editor
height="100%" height="100%"
language={editorLanguage} language={editorLanguage}
beforeMount={handleEditorWillMount} beforeMount={handleEditorWillMount}
onMount={handleEditorMount} onMount={handleEditorMount}
onChange={(value) => { onChange={(value) => {
// If the new content is different from the cached content, update it // If the new content is different from the cached content, update it
if (value !== fileContents[activeFileId]) { if (value !== fileContents[activeFileId]) {
setActiveFileContent(value ?? "") // Update the active file content setActiveFileContent(value ?? "") // Update the active file content
// Mark the file as unsaved by setting 'saved' to false // Mark the file as unsaved by setting 'saved' to false
setTabs((prev) => setTabs((prev) =>
prev.map((tab) => prev.map((tab) =>
tab.id === activeFileId tab.id === activeFileId
? { ...tab, saved: false } ? { ...tab, saved: false }
: tab : tab
)
) )
) } else {
} else { // If the content matches the cached content, mark the file as saved
// If the content matches the cached content, mark the file as saved setTabs((prev) =>
setTabs((prev) => prev.map((tab) =>
prev.map((tab) => tab.id === activeFileId
tab.id === activeFileId ? { ...tab, saved: true }
? { ...tab, saved: true } : tab
: tab )
) )
) }
} }}
}} options={{
options={{ tabSize: 2,
tabSize: 2, minimap: {
minimap: { enabled: false,
enabled: false, },
}, padding: {
padding: { bottom: 4,
bottom: 4, top: 4,
top: 4, },
}, scrollBeyondLastLine: false,
scrollBeyondLastLine: false, fixedOverflowWidgets: true,
fixedOverflowWidgets: true, fontFamily: "var(--font-geist-mono)",
fontFamily: "var(--font-geist-mono)", }}
}} theme={theme === "light" ? "vs" : "vs-dark"}
theme={theme === "light" ? "vs" : "vs-dark"} value={activeFileContent}
value={activeFileContent} />
/> </>
</> ) : (
) : ( <div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none">
<div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none"> <Loader2 className="animate-spin w-6 h-6 mr-3" />
<Loader2 className="animate-spin w-6 h-6 mr-3" /> Waiting for Clerk to load...
Waiting for Clerk to load... </div>
</div> )}
)}
</div> </div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle /> <ResizableHandle />
@ -1140,10 +1140,10 @@ export default function CodeEditor({
isAIChatOpen && isHorizontalLayout isAIChatOpen && isHorizontalLayout
? "horizontal" ? "horizontal"
: isAIChatOpen : isAIChatOpen
? "vertical" ? "vertical"
: isHorizontalLayout : isHorizontalLayout
? "horizontal" ? "horizontal"
: "vertical" : "vertical"
} }
> >
<ResizablePanel <ResizablePanel
@ -1228,17 +1228,4 @@ export default function CodeEditor({
) )
} }
/**
* Configure the typescript compiler to detect JSX and load type definitions
*/
const defaultCompilerOptions: monaco.languages.typescript.CompilerOptions = {
allowJs: true,
allowSyntheticDefaultImports: true,
allowNonTsExtensions: true,
resolveJsonModule: true,
jsx: monaco.languages.typescript.JsxEmit.ReactJSX,
module: monaco.languages.typescript.ModuleKind.ESNext,
moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
target: monaco.languages.typescript.ScriptTarget.ESNext,
}

6
frontend/components/editor/sidebar/index.tsx
View File

@ -87,8 +87,10 @@ export default function Sidebar({
setMovingId(fileId) setMovingId(fileId)
socket.emit( socket.emit(
"moveFile", "moveFile",
fileId, {
folderId, fileId,
folderId
},
(response: (TFolder | TFile)[]) => { (response: (TFolder | TFile)[]) => {
setFiles(response) setFiles(response)
setMovingId("") setMovingId("")

4
frontend/components/editor/sidebar/new.tsx
View File

@ -27,7 +27,7 @@ export default function New({
if (type === "file") { if (type === "file") {
socket.emit( socket.emit(
"createFile", "createFile",
name, { name },
({ success }: { success: boolean }) => { ({ success }: { success: boolean }) => {
if (success) { if (success) {
addNew(name, type) addNew(name, type)
@ -35,7 +35,7 @@ export default function New({
} }
) )
} else { } else {
socket.emit("createFolder", name, () => { socket.emit("createFolder", { name }, () => {
addNew(name, type) addNew(name, type)
}) })
} }

4
frontend/components/editor/terminals/terminal.tsx
View File

@ -65,12 +65,12 @@ export default function EditorTerminal({
} }
const disposableOnData = term.onData((data) => { const disposableOnData = term.onData((data) => {
socket.emit("terminalData", id, data) socket.emit("terminalData", { id, data })
}) })
const disposableOnResize = term.onResize((dimensions) => { const disposableOnResize = term.onResize((dimensions) => {
fitAddonRef.current?.fit() fitAddonRef.current?.fit()
socket.emit("terminalResize", dimensions) socket.emit("terminalResize", { dimensions })
}) })
const resizeObserver = new ResizeObserver( const resizeObserver = new ResizeObserver(
debounce((entries) => { debounce((entries) => {

4
frontend/context/TerminalContext.tsx
View File

@ -63,7 +63,7 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({
terminals, terminals,
setTerminals, setTerminals,
setActiveTerminalId, setActiveTerminalId,
setClosingTerminal: () => {}, setClosingTerminal: () => { },
socket, socket,
activeTerminalId, activeTerminalId,
}) })
@ -73,7 +73,7 @@ export const TerminalProvider: React.FC<{ children: React.ReactNode }> = ({
const deploy = (callback: () => void) => { const deploy = (callback: () => void) => {
if (!socket) console.error("Couldn't deploy: No socket") if (!socket) console.error("Couldn't deploy: No socket")
console.log("Deploying...") console.log("Deploying...")
socket?.emit("deploy", () => { socket?.emit("deploy", {}, () => {
callback() callback()
}) })
} }

10
frontend/lib/terminal.ts
View File

@ -32,9 +32,9 @@ export const createTerminal = ({
setActiveTerminalId(id) setActiveTerminalId(id)
setTimeout(() => { setTimeout(() => {
socket.emit("createTerminal", id, () => { socket.emit("createTerminal", { id }, () => {
setCreatingTerminal(false) setCreatingTerminal(false)
if (command) socket.emit("terminalData", id, command + "\n") if (command) socket.emit("terminalData", { id, data: command + "\n" })
}) })
}, 1000) }, 1000)
} }
@ -75,7 +75,7 @@ export const closeTerminal = ({
setClosingTerminal(term.id) setClosingTerminal(term.id)
socket.emit("closeTerminal", term.id, () => { socket.emit("closeTerminal", { id: term.id }, () => {
setClosingTerminal("") setClosingTerminal("")
const nextId = const nextId =
@ -83,8 +83,8 @@ export const closeTerminal = ({
? numTerminals === 1 ? numTerminals === 1
? null ? null
: index < numTerminals - 1 : index < numTerminals - 1
? terminals[index + 1].id ? terminals[index + 1].id
: terminals[index - 1].id : terminals[index - 1].id
: activeTerminalId : activeTerminalId
setTerminals((prev) => prev.filter((t) => t.id !== term.id)) setTerminals((prev) => prev.filter((t) => t.id !== term.id))

6
tests/index.ts
View File

@ -1,6 +1,6 @@
// Import necessary modules // Import necessary modules
import { io, Socket } from "socket.io-client";
import dotenv from "dotenv"; import dotenv from "dotenv";
import { io, Socket } from "socket.io-client";
dotenv.config(); dotenv.config();
@ -21,7 +21,7 @@ socketRef.on("connect", async () => {
console.log("Connected to the server"); console.log("Connected to the server");
await new Promise((resolve) => setTimeout(resolve, 1000)); await new Promise((resolve) => setTimeout(resolve, 1000));
socketRef.emit("list", (response: CallbackResponse) => { socketRef.emit("list", {}, (response: CallbackResponse) => {
if (response.success) { if (response.success) {
console.log("List of apps:", response.apps); console.log("List of apps:", response.apps);
} else { } else {
@ -29,7 +29,7 @@ socketRef.on("connect", async () => {
} }
}); });
socketRef.emit("deploy", (response: CallbackResponse) => { socketRef.emit("deploy", {}, (response: CallbackResponse) => {
if (response.success) { if (response.success) {
console.log("It worked!"); console.log("It worked!");
} else { } else {