minor changes + package updates

backend/server/src/index.ts

@@ -50,8 +50,6 @@ const terminals: {
 const dirName = path.join(__dirname, "..");
 
 io.use(async (socket, next) => {
-  console.log("Middleware");
-
   const handshakeSchema = z.object({
     userId: z.string(),
     sandboxId: z.string(),
@@ -63,7 +61,6 @@ io.use(async (socket, next) => {
   const parseQuery = handshakeSchema.safeParse(q);
 
   if (!parseQuery.success) {
-    console.log("Invalid request.");
     next(new Error("Invalid request."));
     return;
   }
@@ -80,7 +77,6 @@ io.use(async (socket, next) => {
   const dbUserJSON = (await dbUser.json()) as User;
 
   if (!dbUserJSON) {
-    console.log("DB error.");
     next(new Error("DB error."));
     return;
   }
@@ -91,7 +87,6 @@ io.use(async (socket, next) => {
   );
 
   if (!sandbox && !sharedSandboxes) {
-    console.log("Invalid credentials.");
     next(new Error("Invalid credentials."));
     return;
   }
@@ -123,10 +118,6 @@ io.on("connection", async (socket) => {
     }
   }
 
-  // console.log("describing service:");
-  // const describeService = await testDescribe();
-  // console.log(describeService);
-
   const sandboxFiles = await getSandboxFiles(data.sandboxId);
   sandboxFiles.fileData.forEach((file) => {
     const filePath = path.join(dirName, file.id);
@@ -152,7 +143,6 @@ io.on("connection", async (socket) => {
 
   // todo: send diffs + debounce for efficiency
   socket.on("saveFile", async (fileId: string, body: string) => {
-    console.log("save");
     try {
       await saveFileRL.consume(data.userId, 1);
 
@@ -330,7 +320,6 @@ io.on("connection", async (socket) => {
   });
 
   socket.on("createTerminal", (id: string, callback) => {
-    console.log("creating terminal", id);
     if (terminals[id] || Object.keys(terminals).length >= 4) {
       return;
     }
@@ -363,7 +352,6 @@ io.on("connection", async (socket) => {
   });
 
   socket.on("resizeTerminal", (dimensions: { cols: number; rows: number }) => {
-    console.log("resizeTerminal", dimensions);
     Object.values(terminals).forEach((t) => {
       t.terminal.resize(dimensions.cols, dimensions.rows);
     });
@@ -371,7 +359,6 @@ io.on("connection", async (socket) => {
 
   socket.on("terminalData", (id: string, data: string) => {
     if (!terminals[id]) {
-      console.log("terminal not found", id);
       return;
     }
 
@@ -403,7 +390,6 @@ io.on("connection", async (socket) => {
       instructions: string,
       callback
     ) => {
-      // Log code generation credit in DB
       const fetchPromise = fetch(
         `${process.env.DATABASE_WORKER_URL}/api/sandbox/generate`,
         {
@@ -436,13 +422,11 @@ io.on("connection", async (socket) => {
 
       const json = await generateCodeResponse.json();
 
-      console.log("Code generation response", json);
       callback({ response: json.response, success: true });
     }
   );
 
   socket.on("disconnect", async () => {
-    console.log("disconnected", data.userId, data.sandboxId);
     if (data.isOwner) {
       Object.entries(terminals).forEach((t) => {
         const { terminal, onData, onExit } = t[1];
@@ -477,5 +461,5 @@ io.on("connection", async (socket) => {
 });
 
 httpServer.listen(port, () => {
-  console.log(`Server 123, running on port ${port}`);
+  console.log(`Server running on port ${port}`);
 });

frontend/app/(app)/code/[id]/page.tsx

@@ -3,9 +3,9 @@ import { Room } from "@/components/editor/live/room"
 import { Sandbox, User, UsersToSandboxes } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
 import { notFound, redirect } from "next/navigation"
-import Editor from "@/components/editor"
 import Loading from "@/components/editor/loading"
 import dynamic from "next/dynamic"
+import fs from "fs"
 
 export const revalidate = 0
 
@@ -63,6 +63,14 @@ const CodeEditor = dynamic(() => import("@/components/editor"), {
   loading: () => <Loading />,
 })
 
+function getReactDefinitionFile() {
+  const reactDefinitionFile = fs.readFileSync(
+    "node_modules/@types/react/index.d.ts",
+    "utf8"
+  )
+  return reactDefinitionFile
+}
+
 export default async function CodePage({ params }: { params: { id: string } }) {
   const user = await currentUser()
   const sandboxId = params.id
@@ -86,12 +94,18 @@ export default async function CodePage({ params }: { params: { id: string } }) {
     return notFound()
   }
 
+  const reactDefinitionFile = getReactDefinitionFile()
+
   return (
     <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
       <Room id={sandboxId}>
         <Navbar userData={userData} sandboxData={sandboxData} shared={shared} />
         <div className="w-screen flex grow">
-          <CodeEditor userData={userData} sandboxData={sandboxData} />
+          <CodeEditor
+            userData={userData}
+            sandboxData={sandboxData}
+            reactDefinitionFile={reactDefinitionFile}
+          />
         </div>
       </Room>
     </div>

frontend/components/dashboard/newProject.tsx

@@ -203,7 +203,8 @@ export default function NewProjectModal({
             <Button disabled={loading} type="submit" className="w-full">
               {loading ? (
                 <>
-                  <Loader2 className="animate-spin mr-2 h-4 w-4" /> Loading...
+                  <Loader2 className="animate-spin mr-2 h-4 w-4" /> Creating
+                  project...
                 </>
               ) : (
                 "Submit"

frontend/components/editor/index.tsx

@@ -35,9 +35,11 @@ import { ImperativePanelHandle } from "react-resizable-panels"
 export default function CodeEditor({
   userData,
   sandboxData,
+  reactDefinitionFile,
 }: {
   userData: User
   sandboxData: Sandbox
+  reactDefinitionFile: string
 }) {
   const socket = io(
     `http://localhost:${process.env.NEXT_PUBLIC_SERVER_PORT}?userId=${userData.id}&sandboxId=${sandboxData.id}`,

frontend/components/editor/navbar/share.tsx

@@ -83,6 +83,7 @@ export default function ShareSandboxModal({
           <div className="flex space-x-4 w-full">
             <Form {...form}>
               <form
+                autoComplete="off"
                 onSubmit={form.handleSubmit(onSubmit)}
                 className="flex w-full"
               >

frontend/package-lock.json

@@ -34,12 +34,13 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "framer-motion": "^11.2.3",
+        "fs": "^0.0.1-security",
         "geist": "^1.3.0",
         "lucide-react": "^0.365.0",
         "monaco-themes": "^0.4.4",
         "next": "14.1.3",
         "next-themes": "^0.3.0",
-        "react": "^18",
+        "react": "^18.3.1",
         "react-dom": "^18",
         "react-hook-form": "^7.51.3",
         "react-resizable-panels": "^2.0.16",
@@ -56,7 +57,7 @@
       },
       "devDependencies": {
         "@types/node": "^20",
-        "@types/react": "^18",
+        "@types/react": "^18.3.3",
         "@types/react-dom": "^18",
         "@types/three": "^0.164.0",
         "autoprefixer": "^10.0.1",
@@ -1677,12 +1678,11 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.67",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.67.tgz",
-      "integrity": "sha512-vkIE2vTIMHQ/xL0rgmuoECBCkZFZeHr49HeWSc24AptMbNRo7pwSBvj73rlJJs9fGKj0koS+V7kQB1jHS0uCgw==",
+      "version": "18.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
+      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
@@ -1703,11 +1703,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.8",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
-    },
     "node_modules/@types/send": {
       "version": "0.17.4",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
@@ -2440,6 +2435,11 @@
         }
       }
     },
+    "node_modules/fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3318,9 +3318,9 @@
       "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },

frontend/package.json

@@ -35,12 +35,13 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^11.2.3",
+    "fs": "^0.0.1-security",
     "geist": "^1.3.0",
     "lucide-react": "^0.365.0",
     "monaco-themes": "^0.4.4",
     "next": "14.1.3",
     "next-themes": "^0.3.0",
-    "react": "^18",
+    "react": "^18.3.1",
     "react-dom": "^18",
     "react-hook-form": "^7.51.3",
     "react-resizable-panels": "^2.0.16",
@@ -57,7 +58,7 @@
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18",
     "@types/three": "^0.164.0",
     "autoprefixer": "^10.0.1",