WIP ruff work

package.json

@@ -46,6 +46,7 @@
     "start": "echo 'Use `pnpm dev` to run the integrated server (frontend + backend). Legacy `dev:sync` script removed - now using Cloudflare Vite plugin.'"
   },
   "dependencies": {
+    "@astral-sh/ruff-wasm-bundler": "^0.13.0",
     "@codemirror/autocomplete": "^6.18.6",
     "@codemirror/commands": "^6.8.1",
     "@codemirror/lang-markdown": "^6.3.3",
@@ -116,9 +117,11 @@
     "tw-animate-css": "^1.3.4",
     "ulid": "^3.0.1",
     "uuid": "^11.1.0",
+    "vite-plugin-top-level-await": "^1.6.0",
     "zod": "^4.0.17"
   },
   "devDependencies": {
+    "@astral-sh/ruff-wasm-nodejs": "^0.13.0",
     "@cloudflare/vite-plugin": "^1.9.6",
     "@cloudflare/workers-types": "^4.20250813.0",
     "@effect/vitest": "0.23.7",
@@ -156,6 +159,7 @@
     "tailwindcss": "^4.1.10",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
+    "vite-plugin-wasm": "^3.5.0",
     "vitest": "^3.0.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "wrangler": "4.27.0"

ruff-test.ts

@@ -0,0 +1,27 @@
+import { Workspace, type Diagnostic } from "@astral-sh/ruff-wasm-nodejs";
+
+const exampleDocument = `print('hello'); print("world")`;
+
+// await init(); // Initializes WASM module
+
+// These are default settings just to illustrate configuring Ruff
+// Settings info: https://docs.astral.sh/ruff/settings
+const workspace = new Workspace({
+  "line-length": 88,
+  "indent-width": 4,
+  format: {
+    "indent-style": "space",
+    "quote-style": "double",
+  },
+  lint: {
+    select: ["E4", "E7", "E9", "F"],
+  },
+});
+
+// Will contain 1 diagnostic code for E702: Multiple statements on one line
+const diagnostics: Diagnostic[] = workspace.check(exampleDocument);
+
+const formatted = workspace.format(exampleDocument);
+
+console.log(diagnostics);
+console.log(formatted);

src/pages/RuffTestPage.tsx

@@ -0,0 +1,29 @@
+import { Workspace, type Diagnostic } from "@astral-sh/ruff-wasm-bundler";
+
+const exampleDocument = `print('hello'); print("world")`;
+
+// These are default settings just to illustrate configuring Ruff
+// Settings info: https://docs.astral.sh/ruff/settings
+const workspace = new Workspace({
+  "line-length": 88,
+  "indent-width": 4,
+  format: {
+    "indent-style": "space",
+    "quote-style": "double",
+  },
+  lint: {
+    select: ["E4", "E7", "E9", "F"],
+  },
+});
+
+// Will contain 1 diagnostic code for E702: Multiple statements on one line
+const diagnostics: Diagnostic[] = workspace.check(exampleDocument);
+
+const formatted = workspace.format(exampleDocument);
+
+console.log(diagnostics);
+console.log(formatted);
+
+export const RuffTestPage = () => {
+  return <div>Ruff Test Page: see console</div>;
+};

src/routes.tsx

@@ -17,6 +17,7 @@ import { NotebooksDashboardPage } from "@/pages/NotebooksDashboardPage.tsx";
 import OidcCallbackPage from "@/pages/OidcCallbackPage.tsx";
 import { ErrorBoundary } from "react-error-boundary";
 import { ErrorFallbackPage } from "./components/ErrorFallbackPage";
+import { RuffTestPage } from "./pages/RuffTestPage";
 
 export const App: React.FC = () => {
   // Safety net: Auto-remove loading screen if no component has handled it
@@ -97,6 +98,7 @@ export const App: React.FC = () => {
           />
 
           <Route path="/" element={<Navigate to="/nb" replace />} />
+          <Route path="/ruff" element={<RuffTestPage />} />
         </Routes>
         <FPSMeter />
         <Toaster />