Migrate from npm + prettier to pnpm + oxfmt

.github/workflows/build-site.yml

@@ -18,13 +18,15 @@ jobs:
         uses: actions/checkout@v6
 
       # Install Node.js and build Tailwind CSS
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
           node-version: "24"
-          cache: "npm"
-      - name: Install npm dependencies
-        run: npm ci
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
       # Install toolchain
       - name: Install Rust Toolchain
@@ -41,7 +43,7 @@ jobs:
 
       # Build app
       - name: Build static site
-        run: npm run build:web
+        run: pnpm build:web
 
       # Upload artifact
       - name: Fix permissions for artifact upload

.github/workflows/ci.yml

@@ -15,19 +15,20 @@ jobs:
     steps:
       - uses: actions/checkout@v6
 
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v6
         with:
           node-version: "24"
-          cache: "npm"
-      - run: npm ci
+          cache: "pnpm"
+      - run: pnpm install --frozen-lockfile
 
       - uses: dtolnay/rust-toolchain@stable
       - uses: taiki-e/install-action@v2
         with:
           tool: dioxus-cli
 
       - name: Check formatting
-        run: npm run format:check
+        run: pnpm format:check
 
   clippy:
     name: Clippy
@@ -56,11 +57,12 @@ jobs:
     steps:
       - uses: actions/checkout@v6
 
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v6
         with:
           node-version: "24"
-          cache: "npm"
-      - run: npm ci
+          cache: "pnpm"
+      - run: pnpm install --frozen-lockfile
 
       - uses: dtolnay/rust-toolchain@stable
         with:
@@ -71,4 +73,4 @@ jobs:
           tool: dioxus-cli
 
       - name: Build web
-        run: npm run build:web
+        run: pnpm build:web

.husky/pre-commit

@@ -1 +1 @@
-npx lint-staged
+pnpm exec lint-staged

.prettierignore → .oxfmtignore

@@ -9,5 +9,5 @@ target/
 # Dependencies
 node_modules/
 
-# Rust files (handled by rustfmt)
+# Rust files (handled by dx fmt)
 *.rs

.vscode/extensions.json

@@ -6,7 +6,7 @@
     "tamasfe.even-better-toml",
     "dioxuslabs.dioxus",
     "bradlc.vscode-tailwindcss",
-    "esbenp.prettier-vscode",
+    "oxc.oxc-vscode",
     "editorconfig.editorconfig"
   ]
 }

.vscode/settings.json

@@ -11,21 +11,21 @@
     "editor.defaultFormatter": "DioxusLabs.dioxus"
   },
   "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode"
   },
   "[css]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode"
   },
   "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode"
   },
   "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode"
   },
   "[markdown]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode"
   },
   "[yaml]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "oxc.oxc-vscode"
   }
 }

CLAUDE.md

@@ -110,8 +110,8 @@ div { class: "widget-grid",
 ## Development
 
 ```bash
-npm run serve:web      # web with hot reload
-npm run serve:desktop  # desktop with hot reload
+pnpm serve:web         # web with hot reload
+pnpm serve:desktop     # desktop with hot reload
 dx build --platform web --release  # production build
 ```
 

Cargo.toml

@@ -11,7 +11,12 @@ cidr = "0.3.2"
 color_processing = "0.6"
 digest = "0.11"
 dioxus = { version = "0.7.6", features = ["router", "logger"] }
-dioxus-free-icons = { version = "0.10.0", features = ["bootstrap", "font-awesome-solid", "font-awesome-brands", "font-awesome-regular"] }
+dioxus-free-icons = { version = "0.10.0", features = [
+  "bootstrap",
+  "font-awesome-solid",
+  "font-awesome-brands",
+  "font-awesome-regular",
+] }
 dioxus-sdk = { version = "0.7", features = ["storage"] }
 getrandom_02 = { package = "getrandom", version = "0.2", optional = true }
 getrandom = "0.3"
@@ -37,7 +42,17 @@ wasm-bindgen = { version = "0.2.100", features = ["enable-interning"], optional
 
 [features]
 desktop = ["dioxus/desktop"]
-web = ["dioxus/web", "getrandom/wasm_js", "getrandom_02/js", "dep:getrandom_02", "getrandom_04/wasm_js", "dep:getrandom_04", "time/wasm-bindgen", "uuid/js", "dep:wasm-bindgen"]
+web = [
+  "dioxus/web",
+  "getrandom/wasm_js",
+  "getrandom_02/js",
+  "dep:getrandom_02",
+  "getrandom_04/wasm_js",
+  "dep:getrandom_04",
+  "time/wasm-bindgen",
+  "uuid/js",
+  "dep:wasm-bindgen",
+]
 
 default = ["desktop"]
 
@@ -57,7 +72,7 @@ inherits = "dev"
 inherits = "dev"
 
 [target.'cfg(not(any(target_os = "windows", target_os = "none")))'.profile.release]
-strip = true  # Automatically strip symbols from the binary. Only available for *nix targets.
+strip = true # Automatically strip symbols from the binary. Only available for *nix targets.
 
 [package.metadata.bundle]
 name = "Dev Widgets"

README.md

@@ -58,10 +58,13 @@ git clone https://github.com/esimkowitz/dev-widgets.git
 cd dev-widgets
 ```
 
-### 4. Install npm dependencies
+### 4. Install pnpm dependencies
+
+[pnpm](https://pnpm.io/) is the package manager. The repo pins its version via the `packageManager` field in `package.json` and [Corepack](https://nodejs.org/api/corepack.html), so enable Corepack once and `pnpm` will pick up the right version automatically:
 
 ```bash
-npm install
+corepack enable
+pnpm install
 ```
 
 ## Web App
@@ -73,7 +76,7 @@ Dev Widgets is hosted at <https://widgets.fyi>, automatically deployed from the
 ### Run locally
 
 ```bash
-npm run serve:web
+pnpm serve:web
 ```
 
 This compiles TailwindCSS with a file watcher and then starts the Dioxus dev server and runs the web app with hot-reloading enabled.
@@ -83,7 +86,7 @@ This compiles TailwindCSS with a file watcher and then starts the Dioxus dev ser
 This compiles the TailwindCSS and builds the web app as a single-page app for release to static hosting like GitHub Pages.
 
 ```bash
-npm run build:web
+pnpm build:web
 ```
 
 ## Desktop App
@@ -93,7 +96,7 @@ Dev Widgets also runs as a native desktop app via Tauri. Validated on macOS and
 ### Run desktop app locally
 
 ```bash
-npm run serve:desktop
+pnpm serve:desktop
 ```
 
 This compiles TailwindCSS with a file watcher and then starts the Dioxus dev server and runs the desktop app with hot-reloading enabled.
@@ -103,7 +106,7 @@ This compiles TailwindCSS with a file watcher and then starts the Dioxus dev ser
 This compiles the TailwindCSS and builds the desktop app for release.
 
 ```bash
-npm run build:desktop
+pnpm build:desktop
 ```
 
 ## Roadmap