Convert to PNPM.

* Package files have to be more explicit in their dependencies.
* pnpm workspace definition.
* nuclear option: Use the react->@types/react@18 for tsc.
* Patch for @blueprintjs/core@3.50.4 and adjust versioning for dependencies. (#425)

---------

Co-authored-by: Michael Gartner <mclicks@gmail.com>

some coderabbit suggestions, update pnpm to 10.15.1, remove some unneeded changes, comments

Author: maparent

.github/workflows/ci.yaml

@@ -12,18 +12,24 @@ jobs:
       - name: Checkout Code
         uses: actions/checkout@v4
 
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 10.15.1
+          run_install: false
+
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: "npm"
+          cache: "pnpm"
 
       - name: Install Dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Check TypeScript Types
         run: npx turbo check-types
 
         # TODO: Add future linting, testing, style checks, etc.
         # name: Lint
-        # run: npm run lint
+        # run: pnpm run lint

.github/workflows/database-deploy.yaml

@@ -12,12 +12,25 @@ jobs:
       SUPABASE_PROJECT_ID: ${{ secrets.SUPABASE_PROJECT_ID_PROD }}
       SUPABASE_DB_PASSWORD: ${{ secrets.SUPABASE_DB_PASSWORD_PROD }}
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.15.1
+          run_install: false
+
+      - uses: actions/setup-node@v4
         with:
           node-version: "20"
-      - run: npm ci
+          cache: "pnpm"
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
       - uses: supabase/setup-cli@v1
         with:
           version: latest
+
       - run: npx turbo deploy -F @repo/database

.github/workflows/roam-main.yaml

@@ -23,14 +23,20 @@ jobs:
       - name: Checkout Code
         uses: actions/checkout@v4
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.15.1
+          run_install: false
+
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: "npm"
+          cache: "pnpm"
 
       - name: Install Dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Deploy
         run: npx turbo run deploy --filter=roam

.github/workflows/roam-pr.yaml

@@ -24,14 +24,20 @@ jobs:
       - name: Checkout Code
         uses: actions/checkout@v4
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.15.1
+          run_install: false
+
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: "npm"
+          cache: "pnpm"
 
       - name: Install Dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Deploy
         run: npx turbo run deploy --filter=roam

.github/workflows/roam-release.yaml

@@ -17,14 +17,20 @@ jobs:
       - name: Checkout Code
         uses: actions/checkout@v4
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.15.1
+          run_install: false
+
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: "npm"
+          cache: "pnpm"
 
       - name: Install Dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Update Roam Depot Extension
         run: npx turbo run publish --filter=roam

README.md

@@ -50,7 +50,8 @@ git clone https://github.com/DiscourseGraphs/discourse-graph.git
 
 ```bash
 cd discourse-graph
-npm install
+npm install -g pnpm@10
+pnpm install
 ```
 
 3. Run all applications in development mode:

apps/obsidian/package.json

@@ -9,15 +9,18 @@
     "build": "tsx scripts/build.ts",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "publish": "tsx scripts/publish-obsidian.ts",
+    "publish": "tsx scripts/publish.ts --version 0.1.0",
     "check-types": "tsc --noEmit --skipLibCheck"
   },
   "keywords": [],
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
     "@octokit/core": "^6.1.2",
+    "@repo/typescript-config": "workspace:*",
     "@types/node": "^20",
+    "@types/react": "catalog:obsidian",
+    "@types/react-dom": "catalog:obsidian",
     "autoprefixer": "^10.4.21",
     "builtin-modules": "3.3.0",
     "dotenv": "^16.4.5",
@@ -27,11 +30,13 @@
     "tailwindcss": "^3.4.17",
     "tslib": "2.5.1",
     "tsx": "^4.19.2",
-    "typescript": "5.5.4"
+    "typescript": "5.5.4",
+    "zod": "^3.24.1"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "nanoid": "^4.0.2",
+    "react": "catalog:obsidian",
+    "react-dom": "catalog:obsidian",
     "tailwindcss-animate": "^1.0.7"
   }
 }

apps/obsidian/scripts/README.md

@@ -9,7 +9,7 @@ This directory contains a script for publishing the Discourse Graph Obsidian plu
 
 ## Prerequisites
 
-1. **Node.js and npm** - Ensure you have Node.js 18+ installed
+1. **Node.js and pnpm** - Ensure you have Node.js 20+ installed, with pnpm@10 installed globally (`npm install -g pnpm`)
 2. **Git** - For repository operations
 3. **GitHub Token** - For authentication (see Authentication section)
 
@@ -42,7 +42,7 @@ The script automatically determines release type based on version format and alw
 ### BRAT Version Priority
 
 BRAT uses alphabetical ordering for pre-release identifiers. This is why we enforce:
-- **Internal**: `alpha-*` (comes first alphabetically) 
+- **Internal**: `alpha-*` (comes first alphabetically)
 - **External**: `beta-*` (comes after alpha, gets higher priority)
 
 This ensures that external beta releases always take precedence over internal alpha releases for BRAT auto-updates.
@@ -53,7 +53,7 @@ The script automatically determines the release type based on version format:
 
 **🧪 Pre-release** (automatic detection)
 - **Triggers**: Any version with `alpha` or `beta` suffixes
-- **GitHub**: Marked as "Pre-release" 
+- **GitHub**: Marked as "Pre-release"
 - **Main Branch**: Not updated (keeps stable code in main)
 - **Use Case**: Testing, beta versions, internal releases
 
@@ -122,7 +122,7 @@ tsx scripts/publish.ts --version 0.1.0-alpha-canvas-feature --release-name "Canv
 tsx scripts/publish.ts --version 0.1.0-canvas-feature
 ```
 
-### Beta Release for Public Testing  
+### Beta Release for Public Testing
 ```bash
 # ✅ Correct format with beta prefix - creates pre-release automatically
 tsx scripts/publish.ts --version 1.0.0-beta.1 --release-name "Beta: New Graph View"
@@ -137,18 +137,18 @@ tsx scripts/publish.ts --version 1.0.0-test.1
 tsx scripts/publish.ts --version 1.0.0
 ```
 
-### Using npm script from obsidian directory
+### Using pnpm script from obsidian directory
 ```bash
 cd apps/obsidian
-npm run publish -- --version 1.0.0-beta.1
+pnpm run publish -- --version 1.0.0-beta.1
 ```
 
 ## What the Script Does
 
 ### For All Releases:
 1. **Validates input** - Checks version format and arguments
 2. **Detects release type** - Internal vs External based on version format
-3. **Builds the plugin** - Runs `npm run build` to create distribution files
+3. **Builds the plugin** - Runs `pnpm run build` to create distribution files
 4. **Copies source files** - Copies plugin source (excluding build artifacts)
 5. **Creates GitHub release** - Always creates a release with:
    - Custom or default release name
@@ -184,7 +184,7 @@ Publishes to: `DiscourseGraphs/discourse-graph-obsidian`
 ### Repository State by Release Type:
 
 **Internal Release**: Repository unchanged, GitHub pre-release created
-**External Pre-release**: Repository unchanged, GitHub pre-release created  
+**External Pre-release**: Repository unchanged, GitHub pre-release created
 **External Stable**: Repository main branch updated + GitHub stable release created
 
 ## Troubleshooting
@@ -195,16 +195,16 @@ Publishes to: `DiscourseGraphs/discourse-graph-obsidian`
    ```bash
    # ❌ Wrong
    tsx scripts/publish.ts
-   
-   # ✅ Correct  
+
+   # ✅ Correct
    tsx scripts/publish.ts --version 1.0.0
    ```
 
 2. **"Invalid version format"**
    ```bash
    # ❌ Wrong
    tsx scripts/publish.ts --version "beta-1"
-   
+
    # ✅ Correct
    tsx scripts/publish.ts --version 1.0.0-beta.1
    ```
@@ -219,7 +219,7 @@ Publishes to: `DiscourseGraphs/discourse-graph-obsidian`
    - Verify repository exists and is accessible
 
 5. **"Required build files missing"**
-   - Run `npm run build` manually to check for build errors
+   - Run `pnpm run build` manually to check for build errors
    - Ensure TypeScript compiles without errors
 
 6. **BRAT picking wrong version**
@@ -247,10 +247,10 @@ This is why the naming convention is critical for ensuring the right version get
 
 ### Key Functions:
 - `isExternalRelease()` - Determines if version is external (stable/beta) or internal (alpha)
-- `updateMainBranch()` - Uses GitHub API to create proper commits  
+- `updateMainBranch()` - Uses GitHub API to create proper commits
 - `createGithubRelease()` - Creates releases with assets and automatic pre-release detection
 - `updateManifest()` - Updates version in manifest.json
 
 ### Security:
 - Uses GitHub API instead of git commands for better security
-- Never commits tokens to repository
+- Never commits tokens to repository

apps/obsidian/scripts/publish.ts

@@ -258,7 +258,7 @@ const copyDirectory = ({
 const buildPlugin = async (dir: string): Promise<void> => {
   log("Building plugin...");
 
-  await execCommand("npm run build", { cwd: dir });
+  await execCommand("pnpm run build", { cwd: dir });
 
   const buildDir = path.join(dir, "dist");
   const missingFiles = REQUIRED_BUILD_FILES.filter(

apps/obsidian/src/components/NodeTypeSettings.tsx

@@ -382,7 +382,11 @@ const NodeTypeSettings = () => {
       handleNodeTypeChange(fieldConfig.key, newValue);
 
     return (
-      <FieldWrapper fieldConfig={fieldConfig} error={error} key={fieldConfig.key}>
+      <FieldWrapper
+        fieldConfig={fieldConfig}
+        error={error}
+        key={fieldConfig.key}
+      >
         {fieldConfig.key === "template" ? (
           <TemplateField
             value={value}
@@ -418,14 +422,14 @@ const NodeTypeSettings = () => {
         >
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
-            {nodeType.color && (
-              <div
-                className="h-4 w-4 rounded-full"
-                style={{ backgroundColor: nodeType.color }}
-              />
-            )}
-            <span>{nodeType.name}</span>
-          </div>
+              {nodeType.color && (
+                <div
+                  className="h-4 w-4 rounded-full"
+                  style={{ backgroundColor: nodeType.color }}
+                />
+              )}
+              <span>{nodeType.name}</span>
+            </div>
             <div className="flex gap-2">
               <button
                 className="icon-button"
@@ -437,7 +441,7 @@ const NodeTypeSettings = () => {
               >
                 <div
                   className="icon"
-                  ref={(el) => el && setIcon(el, "pencil")}
+                  ref={(el) => (el && setIcon(el, "pencil")) || undefined}
                 />
               </button>
               <button
@@ -450,7 +454,7 @@ const NodeTypeSettings = () => {
               >
                 <div
                   className="icon"
-                  ref={(el) => el && setIcon(el, "trash")}
+                  ref={(el) => (el && setIcon(el, "trash")) || undefined}
                 />
               </button>
             </div>
@@ -476,7 +480,7 @@ const NodeTypeSettings = () => {
           >
             <div
               className="icon"
-              ref={(el) => el && setIcon(el, "arrow-left")}
+              ref={(el) => (el && setIcon(el, "arrow-left")) || undefined}
             />
           </button>
           <h3 className="dg-h3">Edit Node Type</h3>