ekzhang · ekzhang · Dec 31, 2024 · Dec 31, 2024 · Dec 31, 2024 · Dec 31, 2024
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,7 @@
 {
-  "proseWrap": "always"
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "proseWrap": "always",
+  "importOrder": ["^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }
diff --git a/Dockerfile b/Dockerfile
@@ -20,6 +20,7 @@ RUN npm ci
 COPY . .
 ARG GITHUB_SHA
 ENV VITE_SHA=${GITHUB_SHA}
+RUN npm run check
 RUN npm run build
 
 FROM scratch

diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,36 +5,35 @@
   "private": true,
   "scripts": {
     "dev": "vite",
+    "check": "tsc",
     "build": "vite build",
     "serve": "vite preview",
     "format": "prettier --write ."
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.8.2",
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
-    "@monaco-editor/react": "^4.3.1",
-    "framer-motion": "^11.3.7",
+    "@chakra-ui/react": "^2.10.4",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@monaco-editor/react": "^4.6.0",
+    "framer-motion": "^11.15.0",
     "lodash.debounce": "^4.0.8",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-icons": "^4.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.4.0",
     "rustpad-wasm": "file:./rustpad-wasm/pkg",
-    "use-local-storage-state": "^13.0.0"
+    "use-local-storage-state": "^19.5.0"
   },
   "devDependencies": {
-    "@types/lodash.debounce": "^4.0.6",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "@vitejs/plugin-react": "^1.1.3",
-    "monaco-editor": "^0.31.1",
-    "prettier": "2.5.1",
-    "typescript": "~5.5.3",
-    "vite": "^5.3.4",
-    "vite-plugin-top-level-await": "^1.4.1",
-    "vite-plugin-wasm": "^3.3.0"
-  },
-  "overrides": {
-    "@swc/core": "~1.6.13"
+    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "monaco-editor": "^0.52.2",
+    "prettier": "3.4.2",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.6",
+    "vite-plugin-top-level-await": "^1.4.4",
+    "vite-plugin-wasm": "^3.4.1"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,10 @@
-import { useEffect, useRef, useState } from "react";
 import {
   Box,
   Button,
   Container,
   Flex,
-  Heading,
   HStack,
+  Heading,
   Icon,
   Input,
   InputGroup,
@@ -17,27 +16,29 @@ import {
   Text,
   useToast,
 } from "@chakra-ui/react";
+import Editor from "@monaco-editor/react";
+import { editor } from "monaco-editor/esm/vs/editor/editor.api";
+import { useEffect, useRef, useState } from "react";
 import {
   VscChevronRight,
   VscFolderOpened,
   VscGist,
   VscRepoPull,
 } from "react-icons/vsc";
-import useStorage from "use-local-storage-state";
-import Editor from "@monaco-editor/react";
-import { editor } from "monaco-editor/esm/vs/editor/editor.api";
+import useLocalStorageState from "use-local-storage-state";
+
 import rustpadRaw from "../rustpad-server/src/rustpad.rs?raw";
-import languages from "./languages.json";
-import animals from "./animals.json";
-import Rustpad, { UserInfo } from "./rustpad";
-import useHash from "./useHash";
 import ConnectionStatus from "./ConnectionStatus";
 import Footer from "./Footer";
 import User from "./User";
+import animals from "./animals.json";
+import languages from "./languages.json";
+import Rustpad, { UserInfo } from "./rustpad";
+import useHash from "./useHash";
 
 function getWsUri(id: string) {
   let url = new URL(`api/socket/${id}`, window.location.href);
-  url.protocol = (url.protocol == "https:") ? "wss:" : "ws:";
+  url.protocol = url.protocol == "https:" ? "wss:" : "ws:";
   return url.href;
 }
 
@@ -56,10 +57,16 @@ function App() {
     "connected" | "disconnected" | "desynchronized"
   >("disconnected");
   const [users, setUsers] = useState<Record<number, UserInfo>>({});
-  const [name, setName] = useStorage("name", generateName);
-  const [hue, setHue] = useStorage("hue", generateHue);
+  const [name, setName] = useLocalStorageState("name", {
+    defaultValue: generateName,
+  });
+  const [hue, setHue] = useLocalStorageState("hue", {
+    defaultValue: generateHue,
+  });
   const [editor, setEditor] = useState<editor.IStandaloneCodeEditor>();
-  const [darkMode, setDarkMode] = useStorage("darkMode", () => false);
+  const [darkMode, setDarkMode] = useLocalStorageState("darkMode", {
+    defaultValue: false,
+  });
   const rustpad = useRef<Rustpad>();
   const id = useHash();
 
@@ -145,7 +152,7 @@ function App() {
             text: rustpadRaw,
           },
         ],
-        () => null
+        () => null,
       );
       editor.setPosition({ column: 0, lineNumber: 0 });
       if (language !== "rust") {

diff --git a/src/User.tsx b/src/User.tsx
@@ -18,6 +18,7 @@ import {
 import { useRef } from "react";
 import { FaPalette } from "react-icons/fa";
 import { VscAccount } from "react-icons/vsc";
+
 import { UserInfo } from "./rustpad";
 
 type UserProps = {
@@ -94,7 +95,7 @@ function User({
           </Button>
         </PopoverBody>
         <PopoverFooter
-          d="flex"
+          display="flex"
           justifyContent="flex-end"
           borderColor={darkMode ? "#464647" : "gray.200"}
         >

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,15 +1,15 @@
+import { ChakraProvider } from "@chakra-ui/react";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { ChakraProvider } from "@chakra-ui/react";
 import * as wasm from "rustpad-wasm";
+
 import App from "./App";
 import "./index.css";
 
-const root = createRoot(document.getElementById("root"));
-root.render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ChakraProvider>
       <App />
     </ChakraProvider>
-  </StrictMode>
+  </StrictMode>,
 );
diff --git a/src/rustpad.ts b/src/rustpad.ts
@@ -1,10 +1,10 @@
-import { OpSeq } from "rustpad-wasm";
+import debounce from "lodash.debounce";
 import type {
-  editor,
   IDisposable,
   IPosition,
+  editor,
 } from "monaco-editor/esm/vs/editor/editor.api";
-import debounce from "lodash.debounce";
+import { OpSeq } from "rustpad-wasm";
 
 /** Options passed in to the Rustpad constructor. */
 export type RustpadOptions = {
@@ -55,7 +55,7 @@ class Rustpad {
   constructor(readonly options: RustpadOptions) {
     this.model = options.editor.getModel()!;
     this.onChangeHandle = options.editor.onDidChangeModelContent((e) =>
-      this.onChange(e)
+      this.onChange(e),
     );
     const cursorUpdate = debounce(() => this.sendCursorData(), 20);
     this.onCursorHandle = options.editor.onDidChangeCursorPosition((e) => {
@@ -81,7 +81,7 @@ class Rustpad {
     this.tryConnectId = window.setInterval(() => this.tryConnect(), interval);
     this.resetFailuresId = window.setInterval(
       () => (this.recentFailures = 0),
-      15 * interval
+      15 * interval,
     );
   }
 
@@ -281,7 +281,7 @@ class Rustpad {
               forceMoveMarkers: true,
             },
           ],
-          () => null
+          () => null,
         );
       } else if (op >= 0) {
         // Retain
@@ -305,7 +305,7 @@ class Rustpad {
               forceMoveMarkers: true,
             },
           ],
-          () => null
+          () => null,
         );
       }
     }
@@ -376,7 +376,7 @@ class Rustpad {
 
     this.oldDecorations = this.model.deltaDecorations(
       this.oldDecorations,
-      decorations
+      decorations,
     );
   }
 
@@ -396,7 +396,7 @@ class Rustpad {
         const { text, rangeOffset, rangeLength } = change;
         const initialLength = unicodeLength(content.slice(0, rangeOffset));
         const deletedLength = unicodeLength(
-          content.slice(rangeOffset, rangeOffset + rangeLength)
+          content.slice(rangeOffset, rangeOffset + rangeLength),
         );
         const restLength =
           contentLength + offset - initialLength - deletedLength;

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,18 +1,14 @@
+import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
-import wasm from "vite-plugin-wasm";
 import topLevelAwait from "vite-plugin-top-level-await";
-import react from "@vitejs/plugin-react";
+import wasm from "vite-plugin-wasm";
 
 export default defineConfig({
   base: "",
   build: {
     chunkSizeWarningLimit: 1000,
   },
-  plugins: [
-    wasm(),
-    topLevelAwait(),
-    react()
-  ],
+  plugins: [wasm(), topLevelAwait(), react()],
   server: {
     proxy: {
       "/api": {