Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-05 07:30:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

[chore] Replace pnpm with npm package manager

Browse Source 
- Remove pnpm-specific files (pnpm-lock.yaml, pnpm-workspace.yaml)
- Update package.json scripts to use npm instead of pnpm
- Add npm workspaces configuration
- Update all GitHub workflow files to use npm
- Update documentation to reference npm commands
- Generate package-lock.json for npm dependency management
This commit is contained in:
snomiao
2025-08-31 05:41:12 +00:00
parent 2358a97fe9
commit b4b834d7c4
34 changed files with 22878 additions and 14519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
.claude/commands/create-frontend-release.md
View File

@@ -128,20 +128,17 @@ echo "Last stable release: $LAST_STABLE"
### Step 4: Analyze Dependency Updates
1. **Use pnpm's built-in dependency analysis:**
1. **Use npm's built-in dependency analysis:**
```bash
# Get outdated dependencies with pnpm
pnpm outdated --format table > outdated-deps-${NEW_VERSION}.txt
# Check for license compliance
pnpm licenses ls --json > licenses-${NEW_VERSION}.json
# Get outdated dependencies with npm
npm outdated --format table > outdated-deps-${NEW_VERSION}.txt || echo "No outdated dependencies"
# Analyze why specific dependencies exist
echo "Dependency analysis:" > dep-analysis-${NEW_VERSION}.md
MAJOR_DEPS=("vue" "vite" "@vitejs/plugin-vue" "typescript" "pinia")
for dep in "${MAJOR_DEPS[@]}"; do
echo -e "\n## $dep\n\`\`\`" >> dep-analysis-${NEW_VERSION}.md
pnpm why "$dep" >> dep-analysis-${NEW_VERSION}.md || echo "Not found" >> dep-analysis-${NEW_VERSION}.md
npm ls "$dep" >> dep-analysis-${NEW_VERSION}.md 2>&1 || echo "Not found" >> dep-analysis-${NEW_VERSION}.md
echo "\`\`\`" >> dep-analysis-${NEW_VERSION}.md
done
```
@@ -272,15 +269,14 @@ echo "Last stable release: $LAST_STABLE"
### Step 7: Security and Dependency Audit
1. Run pnpm security audit:
1. Run npm security audit:
```bash
pnpm audit --audit-level moderate
pnpm licenses ls --summary
npm audit --audit-level moderate
```
2. Check for known vulnerabilities in dependencies
3. Run comprehensive dependency health check:
```bash
pnpm doctor
npm doctor
```
4. Scan for hardcoded secrets or credentials:
```bash
@@ -293,21 +289,21 @@ echo "Last stable release: $LAST_STABLE"
1. Run complete test suite:
```bash
pnpm test:unit
pnpm test:component
npm run test:unit
npm run test:component
```
2. Run type checking:
```bash
pnpm typecheck
npm run typecheck
```
3. Run linting (may have issues with missing packages):
```bash
pnpm lint || echo "Lint issues - verify if critical"
npm run lint || echo "Lint issues - verify if critical"
```
4. Test build process:
```bash
pnpm build
pnpm build:types
npm run build
npm run build:types
```
5. **QUALITY GATE**: All tests and builds passing?
@@ -537,7 +533,7 @@ echo "Workflow triggered. Waiting for PR creation..."
```bash
# Check npm availability
for i in {1..10}; do
if pnpm view @comfyorg/comfyui-frontend-types@${NEW_VERSION} version >/dev/null 2>&1; then
if npm view @comfyorg/comfyui-frontend-types@${NEW_VERSION} version >/dev/null 2>&1; then
echo "✅ npm package available"
break
fi

4
.claude/commands/create-hotfix-release.md
View File

@@ -80,7 +80,7 @@ For each commit:
- **CONFIRMATION REQUIRED**: Conflicts resolved correctly?
3. After successful cherry-pick:
- Show the changes: `git show HEAD`
- Run validation: `pnpm typecheck && pnpm lint`
- Run validation: `npm run typecheck && npm run lint`
4. **CONFIRMATION REQUIRED**: Cherry-pick successful and valid?
### Step 6: Create PR to Core Branch
@@ -211,7 +211,7 @@ For each commit:
```
3. Verify npm package:
```bash
pnpm view @comfyorg/comfyui-frontend-types@1.23.5
npm view @comfyorg/comfyui-frontend-types@1.23.5
```
4. Generate release summary with:
- Version released

65
.claude/commands/setup_repo.md
View File

@@ -5,11 +5,10 @@ Bootstrap the ComfyUI Frontend monorepo with all necessary dependencies and veri
## Overview
This command will:
1. Install pnpm package manager (if not present)
2. Install all project dependencies
3. Verify the project builds successfully
4. Run unit tests to ensure functionality
5. Start development server to verify frontend boots correctly
1. Install all project dependencies using npm
2. Verify the project builds successfully
3. Run unit tests to ensure functionality
4. Start development server to verify frontend boots correctly
## Prerequisites Check
@@ -23,51 +22,38 @@ node --version
git status
```
## Step 1: Install pnpm
## Step 1: Install Dependencies
```bash
# Check if pnpm is already installed
pnpm --version 2>/dev/null || {
echo "Installing pnpm..."
npm install -g pnpm
}
# Verify pnpm installation
pnpm --version
```
## Step 2: Install Dependencies
```bash
# Install all dependencies using pnpm
# Install all dependencies using npm
echo "Installing project dependencies..."
pnpm install
npm install
# Verify node_modules exists and has packages
ls -la node_modules | head -5
```
## Step 3: Verify Build
## Step 2: Verify Build
```bash
# Run TypeScript type checking
echo "Running TypeScript checks..."
pnpm typecheck
npm run typecheck
# Build the project
echo "Building project..."
pnpm build
npm run build
# Verify dist folder was created
ls -la dist/
```
## Step 4: Run Unit Tests
## Step 3: Run Unit Tests
```bash
# Run unit tests
echo "Running unit tests..."
pnpm test:unit
npm run test:unit
# If tests fail, show the output and stop
if [ $? -ne 0 ]; then
@@ -78,12 +64,12 @@ fi
echo "✅ Unit tests passed successfully"
```
## Step 5: Verify Development Server
## Step 4: Verify Development Server
```bash
# Start development server in background
echo "Starting development server..."
pnpm dev &
npm run dev &
SERVER_PID=$!
# Wait for server to start (check for port 5173 or similar)
@@ -105,28 +91,28 @@ else
fi
```
## Step 6: Final Verification
## Step 5: Final Verification
```bash
# Run linting to ensure code quality
echo "Running linter..."
pnpm lint
npm run lint
# Show project status
echo ""
echo "🎉 Repository setup complete!"
echo ""
echo "Available commands:"
echo " pnpm dev - Start development server"
echo " pnpm build - Build for production"
echo " pnpm test:unit - Run unit tests"
echo " pnpm test:component - Run component tests"
echo " pnpm typecheck - Run TypeScript checks"
echo " pnpm lint - Run ESLint"
echo " pnpm format - Format code with Prettier"
echo " npm run dev - Start development server"
echo " npm run build - Build for production"
echo " npm run test:unit - Run unit tests"
echo " npm run test:component - Run component tests"
echo " npm run typecheck - Run TypeScript checks"
echo " npm run lint - Run ESLint"
echo " npm run format - Format code with Prettier"
echo ""
echo "Next steps:"
echo "1. Run 'pnpm dev' to start developing"
echo "1. Run 'npm run dev' to start developing"
echo "2. Open http://localhost:5173 in your browser"
echo "3. Check README.md for additional setup instructions"
```
@@ -135,8 +121,7 @@ echo "3. Check README.md for additional setup instructions"
If any step fails:
1. **pnpm installation fails**: Try using `curl -fsSL https://get.pnpm.io/install.sh | sh -`
2. **Dependencies fail to install**: Try clearing cache with `pnpm store prune` and retry
1. **Dependencies fail to install**: Try clearing cache with `npm cache clean --force` and retry
3. **Build fails**: Check for TypeScript errors and fix them first
4. **Tests fail**: Review test output and fix failing tests
5. **Dev server fails**: Check if port 5173 is already in use

2
.claude/commands/verify-visually.md
View File

@@ -5,7 +5,7 @@ Follow these steps systematically to verify our changes:
1. **Server Setup**
- Check if the dev server is running on port 5173 using browser navigation or port checking
- If not running, start it with `pnpm dev` from the root directory
- If not running, start it with `npm run dev` from the root directory
- If the server fails to start, provide detailed troubleshooting steps by reading package.json and README.md for accurate instructions
- Wait for the server to be fully ready before proceeding

13
.github/workflows/chromatic.yaml vendored
View File

@@ -18,16 +18,11 @@ jobs:
with:
fetch-depth: 0 # Required for Chromatic baseline
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'pnpm'
cache: 'npm'
- name: Cache tool outputs
@@ -37,14 +32,14 @@ jobs:
.cache
storybook-static
tsconfig.tsbuildinfo
key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
restore-keys: |
storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
storybook-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}-
storybook-cache-${{ runner.os }}-
storybook-tools-cache-${{ runner.os }}-
- name: Install dependencies
run: pnpm install --frozen-lockfile
run: npm ci
- name: Build Storybook and run Chromatic
id: chromatic

9
.github/workflows/claude-pr-review.yml vendored
View File

@@ -53,20 +53,15 @@ jobs:
with:
fetch-depth: 0
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'pnpm'
cache: 'npm'
- name: Install dependencies for analysis tools
run: |
pnpm install -g typescript @vue/compiler-sfc
npm install -g typescript @vue/compiler-sfc
- name: Run Claude PR Review
uses: anthropics/claude-code-action@main

14
.github/workflows/dev-release.yaml vendored
View File

@@ -16,14 +16,10 @@ jobs:
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- uses: actions/setup-node@v4
with:
node-version: 'lts/*'
cache: 'pnpm'
cache: 'npm'
- name: Cache tool outputs
uses: actions/cache@v4
@@ -32,7 +28,7 @@ jobs:
.cache
dist
tsconfig.tsbuildinfo
key: dev-release-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
key: dev-release-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
dev-release-tools-cache-${{ runner.os }}-
@@ -46,9 +42,9 @@ jobs:
ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
USE_PROD_CONFIG: 'true'
run: |
pnpm install --frozen-lockfile
pnpm build
pnpm zipdist
npm ci
npm run build
npm run zipdist
- name: Upload dist artifact
uses: actions/upload-artifact@v4
with:

16
.github/workflows/i18n-custom-nodes.yaml vendored
View File

@@ -42,14 +42,10 @@ jobs:
with:
repository: ${{ inputs.owner }}/${{ inputs.repository }}
path: 'ComfyUI/custom_nodes/${{ inputs.repository }}'
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- uses: actions/setup-node@v4
with:
node-version: 'lts/*'
cache: 'pnpm'
cache: 'npm'
- uses: actions/setup-python@v4
with:
python-version: '3.10'
@@ -68,8 +64,8 @@ jobs:
working-directory: ComfyUI/custom_nodes/${{ inputs.repository }}
- name: Build & Install ComfyUI_frontend
run: |
pnpm install --frozen-lockfile
pnpm build
npm ci
npm run build
rm -rf ../ComfyUI/web/*
mv dist/* ../ComfyUI/web/
working-directory: ComfyUI_frontend
@@ -84,18 +80,18 @@ jobs:
- name: Start dev server
# Run electron dev server as it is a superset of the web dev server
# We do want electron specific UIs to be translated.
run: pnpm dev:electron &
run: npm run dev:electron &
working-directory: ComfyUI_frontend
- name: Capture base i18n
run: npx tsx scripts/diff-i18n capture
working-directory: ComfyUI_frontend
- name: Update en.json
run: pnpm collect-i18n
run: npm run collect-i18n
env:
PLAYWRIGHT_TEST_URL: http://localhost:5173
working-directory: ComfyUI_frontend
- name: Update translations
run: pnpm locale
run: npm run locale
env:
OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
working-directory: ComfyUI_frontend

6
.github/workflows/i18n-node-defs.yaml vendored
View File

@@ -20,15 +20,15 @@ jobs:
- name: Start dev server
# Run electron dev server as it is a superset of the web dev server
# We do want electron specific UIs to be translated.
run: pnpm dev:electron &
run: npm run dev:electron &
working-directory: ComfyUI_frontend
- name: Update en.json
run: pnpm collect-i18n -- scripts/collect-i18n-node-defs.ts
run: npm run collect-i18n -- scripts/collect-i18n-node-defs.ts
env:
PLAYWRIGHT_TEST_URL: http://localhost:5173
working-directory: ComfyUI_frontend
- name: Update translations
run: pnpm locale
run: npm run locale
env:
OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
working-directory: ComfyUI_frontend

8
.github/workflows/i18n.yaml vendored
View File

@@ -22,7 +22,7 @@ jobs:
path: |
ComfyUI_frontend/.cache
ComfyUI_frontend/.cache
key: i18n-tools-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}
key: i18n-tools-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/package-lock.json') }}
restore-keys: |
i18n-tools-cache-${{ runner.os }}-
- name: Install Playwright Browsers
@@ -31,15 +31,15 @@ jobs:
- name: Start dev server
# Run electron dev server as it is a superset of the web dev server
# We do want electron specific UIs to be translated.
run: pnpm dev:electron &
run: npm run dev:electron &
working-directory: ComfyUI_frontend
- name: Update en.json
run: pnpm collect-i18n
run: npm run collect-i18n
env:
PLAYWRIGHT_TEST_URL: http://localhost:5173
working-directory: ComfyUI_frontend
- name: Update translations
run: pnpm locale
run: npm run locale
env:
OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
working-directory: ComfyUI_frontend

23
.github/workflows/lint-and-format.yaml vendored
View File

@@ -19,16 +19,11 @@ jobs:
ref: ${{ github.event.pull_request.head.sha }}
fetch-depth: 0
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- name: Use Node.js
uses: actions/setup-node@v4
with:
node-version: 'lts/*'
cache: 'pnpm'
cache: 'npm'
- name: Cache tool outputs
uses: actions/cache@v4
@@ -39,20 +34,20 @@ jobs:
tsconfig.tsbuildinfo
.prettierCache
.knip-cache
key: lint-format-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js,mts}', '*.config.*', '.eslintrc.*', '.prettierrc.*', 'tsconfig.json') }}
key: lint-format-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('src/**/*.{ts,vue,js,mts}', '*.config.*', '.eslintrc.*', '.prettierrc.*', 'tsconfig.json') }}
restore-keys: |
lint-format-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
lint-format-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}-
lint-format-cache-${{ runner.os }}-
ci-tools-cache-${{ runner.os }}-
- name: Install dependencies
run: pnpm install --frozen-lockfile
run: npm ci
- name: Run ESLint with auto-fix
run: pnpm lint:fix
run: npm run lint:fix
- name: Run Prettier with auto-format
run: pnpm format
run: npm run format
- name: Check for changes
id: verify-changed-files
@@ -74,9 +69,9 @@ jobs:
- name: Final validation
run: |
pnpm lint
pnpm format:check
pnpm knip
npm run lint
npm run format:check
npm run knip
- name: Comment on PR about auto-fix
if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name == github.repository

28
.github/workflows/release.yaml vendored
View File

@@ -19,14 +19,10 @@ jobs:
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- uses: actions/setup-node@v4
with:
node-version: 'lts/*'
cache: 'pnpm'
cache: 'npm'
- name: Cache tool outputs
uses: actions/cache@v4
@@ -34,7 +30,7 @@ jobs:
path: |
.cache
tsconfig.tsbuildinfo
key: release-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
key: release-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
release-tools-cache-${{ runner.os }}-
@@ -57,9 +53,9 @@ jobs:
ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
USE_PROD_CONFIG: 'true'
run: |
pnpm install --frozen-lockfile
pnpm build
pnpm zipdist
npm ci
npm run build
npm run zipdist
- name: Upload dist artifact
uses: actions/upload-artifact@v4
with:
@@ -129,14 +125,10 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- uses: actions/setup-node@v4
with:
node-version: 'lts/*'
cache: 'pnpm'
cache: 'npm'
registry-url: https://registry.npmjs.org
- name: Cache tool outputs
@@ -146,14 +138,14 @@ jobs:
.cache
tsconfig.tsbuildinfo
dist
key: types-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
key: types-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
types-tools-cache-${{ runner.os }}-
- run: pnpm install --frozen-lockfile
- run: pnpm build:types
- run: npm ci
- run: npm run build:types
- name: Publish package
run: pnpm publish --access public
run: npm publish --access public
working-directory: dist
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

26
.github/workflows/test-ui.yaml vendored
View File

@@ -33,16 +33,11 @@ jobs:
path: 'ComfyUI/custom_nodes/ComfyUI_devtools'
ref: 'd05fd48dd787a4192e16802d4244cfcc0e2f9684'
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- uses: actions/setup-node@v4
with:
node-version: lts/*
cache: 'pnpm'
cache-dependency-path: 'ComfyUI_frontend/pnpm-lock.yaml'
cache: 'npm'
cache-dependency-path: 'ComfyUI_frontend/package-lock.json'
- name: Cache tool outputs
@@ -51,16 +46,16 @@ jobs:
path: |
ComfyUI_frontend/.cache
ComfyUI_frontend/tsconfig.tsbuildinfo
key: playwright-setup-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-${{ hashFiles('ComfyUI_frontend/src/**/*.{ts,vue,js}', 'ComfyUI_frontend/*.config.*') }}
key: playwright-setup-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/package-lock.json') }}-${{ hashFiles('ComfyUI_frontend/src/**/*.{ts,vue,js}', 'ComfyUI_frontend/*.config.*') }}
restore-keys: |
playwright-setup-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-
playwright-setup-cache-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/package-lock.json') }}-
playwright-setup-cache-${{ runner.os }}-
playwright-tools-cache-${{ runner.os }}-
- name: Build ComfyUI_frontend
run: |
pnpm install --frozen-lockfile
pnpm build
npm ci
npm run build
working-directory: ComfyUI_frontend
- name: Generate cache key
@@ -97,11 +92,6 @@ jobs:
ComfyUI_frontend
key: comfyui-setup-${{ needs.setup.outputs.cache-key }}
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- uses: actions/setup-python@v4
with:
python-version: '3.10'
@@ -126,9 +116,9 @@ jobs:
uses: actions/cache@v4
with:
path: ~/.cache/ms-playwright
key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-${{ matrix.browser }}
key: playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/package-lock.json') }}-${{ matrix.browser }}
restore-keys: |
playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/pnpm-lock.yaml') }}-
playwright-browsers-${{ runner.os }}-${{ hashFiles('ComfyUI_frontend/package-lock.json') }}-
playwright-browsers-${{ runner.os }}-
- name: Install Playwright Browsers

13
.github/workflows/update-electron-types.yaml vendored
View File

@@ -14,33 +14,28 @@ jobs:
- name: Checkout repository
uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: lts/*
cache: 'pnpm'
cache: 'npm'
- name: Cache tool outputs
uses: actions/cache@v4
with:
path: |
.cache
key: electron-types-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
key: electron-types-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
electron-types-tools-cache-${{ runner.os }}-
- name: Update electron types
run: pnpm install @comfyorg/comfyui-electron-types@latest
run: npm install @comfyorg/comfyui-electron-types@latest
- name: Get new version
id: get-version
run: |
NEW_VERSION=$(node -e "console.log(JSON.parse(require('fs').readFileSync('./pnpm-lock.yaml')).packages['node_modules/@comfyorg/comfyui-electron-types'].version)")
NEW_VERSION=$(node -e "console.log(JSON.parse(require('fs').readFileSync('./package-lock.json')).packages['node_modules/@comfyorg/comfyui-electron-types'].version)")
echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
- name: Create Pull Request

13
.github/workflows/update-manager-types.yaml vendored
View File

@@ -19,28 +19,23 @@ jobs:
- name: Checkout repository
uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: lts/*
cache: 'pnpm'
cache: 'npm'
- name: Cache tool outputs
uses: actions/cache@v4
with:
path: |
.cache
key: update-manager-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
key: update-manager-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
update-manager-tools-cache-${{ runner.os }}-
- name: Install dependencies
run: pnpm install --frozen-lockfile
run: npm ci
- name: Cache ComfyUI-Manager repository
uses: actions/cache@v4
@@ -86,7 +81,7 @@ jobs:
- name: Lint generated types
run: |
echo "Linting generated ComfyUI-Manager API types..."
pnpm lint:fix:no-cache -- ./src/types/generatedManagerTypes.ts
npm run lint:fix:no-cache -- ./src/types/generatedManagerTypes.ts
- name: Check for changes
id: check-changes

13
.github/workflows/update-registry-types.yaml vendored
View File

@@ -18,28 +18,23 @@ jobs:
- name: Checkout repository
uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: lts/*
cache: 'pnpm'
cache: 'npm'
- name: Cache tool outputs
uses: actions/cache@v4
with:
path: |
.cache
key: update-registry-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
key: update-registry-tools-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
update-registry-tools-cache-${{ runner.os }}-
- name: Install dependencies
run: pnpm install --frozen-lockfile
run: npm ci
- name: Cache comfy-api repository
uses: actions/cache@v4
@@ -86,7 +81,7 @@ jobs:
- name: Lint generated types
run: |
echo "Linting generated Comfy Registry API types..."
pnpm lint:fix:no-cache -- ./src/types/comfyRegistryTypes.ts
npm run lint:fix:no-cache -- ./src/types/comfyRegistryTypes.ts
- name: Check for changes
id: check-changes

9
.github/workflows/version-bump.yaml vendored
View File

@@ -26,21 +26,16 @@ jobs:
- name: Checkout repository
uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: lts/*
cache: 'pnpm'
cache: 'npm'
- name: Bump version
id: bump-version
run: |
pnpm version ${{ github.event.inputs.version_type }} --preid ${{ github.event.inputs.pre_release }} --no-git-tag-version
npm version ${{ github.event.inputs.version_type }} --preid ${{ github.event.inputs.pre_release }} --no-git-tag-version
NEW_VERSION=$(node -p "require('./package.json').version")
echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT

17
.github/workflows/vitest.yaml vendored
View File

@@ -13,16 +13,11 @@ jobs:
steps:
- uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 10
- name: Use Node.js
uses: actions/setup-node@v4
with:
node-version: 'lts/*'
cache: 'pnpm'
cache: 'npm'
- name: Cache tool outputs
uses: actions/cache@v4
@@ -31,16 +26,16 @@ jobs:
.cache
coverage
.vitest-cache
key: vitest-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', 'vitest.config.*', 'tsconfig.json') }}
key: vitest-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('src/**/*.{ts,vue,js}', 'vitest.config.*', 'tsconfig.json') }}
restore-keys: |
vitest-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
vitest-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}-
vitest-cache-${{ runner.os }}-
test-tools-cache-${{ runner.os }}-
- name: Install dependencies
run: pnpm install --frozen-lockfile
run: npm ci
- name: Run Vitest tests
run: |
pnpm test:component
pnpm test:unit
npm run test:component
npm run test:unit

16
.storybook/CLAUDE.md
View File

@@ -2,9 +2,9 @@
## Quick Commands
- `pnpm storybook`: Start Storybook development server
- `pnpm build-storybook`: Build static Storybook
- `pnpm test:component`: Run component tests (includes Storybook components)
- `npm run storybook`: Start Storybook development server
- `npm run build-storybook`: Build static Storybook
- `npm run test:component`: Run component tests (includes Storybook components)
## Development Workflow for Storybook
@@ -19,8 +19,8 @@
- Ensure proper theming and styling
3. **Code Quality**:
- Run `pnpm typecheck` to verify TypeScript
- Run `pnpm lint` to check for linting issues
- Run `npm run typecheck` to verify TypeScript
- Run `npm run lint` to check for linting issues
- Follow existing story patterns and conventions
## Story Creation Guidelines
@@ -138,13 +138,13 @@ The Storybook preview is configured with:
```bash
# Check TypeScript issues
pnpm typecheck
npm run typecheck
# Lint Storybook files
pnpm lint .storybook/
npm run lint .storybook/
# Build to check for production issues
pnpm build-storybook
npm run build-storybook
```
## File Organization

4
.storybook/README.md
View File

@@ -40,10 +40,10 @@ Storybook is a frontend workshop for building UI components and pages in isolati
```bash
# Start Storybook development server
pnpm storybook
npm run storybook
# Build static Storybook for deployment
pnpm build-storybook
npm run build-storybook
```
### Creating Stories

22
AGENTS.md
View File

@@ -8,19 +8,19 @@
- Config: `vite.config.mts`, `vitest.config.ts`, `playwright.config.ts`, `eslint.config.js`, `.prettierrc`.
## Build, Test, and Development Commands
- `pnpm dev`: Start Vite dev server.
- `pnpm dev:electron`: Dev server with Electron API mocks.
- `pnpm build`: Type-check then production build to `dist/`.
- `pnpm preview`: Preview the production build locally.
- `pnpm test:unit`: Run Vitest unit tests (`tests-ui/`).
- `pnpm test:component`: Run component tests (`src/components/`).
- `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`).
- `pnpm lint` / `pnpm lint:fix`: Lint (ESLint). `pnpm format` / `format:check`: Prettier.
- `pnpm typecheck`: Vue TSC type checking.
- `npm run dev`: Start Vite dev server.
- `npm run dev:electron`: Dev server with Electron API mocks.
- `npm run build`: Type-check then production build to `dist/`.
- `npm run preview`: Preview the production build locally.
- `npm run test:unit`: Run Vitest unit tests (`tests-ui/`).
- `npm run test:component`: Run component tests (`src/components/`).
- `npm run test:browser`: Run Playwright E2E tests (`browser_tests/`).
- `npm run lint` / `npm run lint:fix`: Lint (ESLint). `npm run format` / `format:check`: Prettier.
- `npm run typecheck`: Vue TSC type checking.
## Coding Style & Naming Conventions
- Language: TypeScript, Vue SFCs (`.vue`). Indent 2 spaces; single quotes; no semicolons; width 80 (see `.prettierrc`).
- Imports: sorted/grouped by plugin; run `pnpm format` before committing.
- Imports: sorted/grouped by plugin; run `npm run format` before committing.
- ESLint: Vue + TS rules; no floating promises; unused imports disallowed; i18n raw text restrictions in templates.
- Naming: Vue components in PascalCase (e.g., `MenuHamburger.vue`); composables `useXyz.ts`; Pinia stores `*Store.ts`.
@@ -33,7 +33,7 @@
## Commit & Pull Request Guidelines
- Commits: Prefer Conventional Commits (e.g., `feat(ui): add sidebar`), `refactor(litegraph): …`. Use `[skip ci]` for locale-only updates when appropriate.
- PRs: Include clear description, linked issues (`Fixes #123`), and screenshots/GIFs for UI changes. Add/adjust tests and i18n strings when applicable.
- Quality gates: `pnpm lint`, `pnpm typecheck`, and relevant tests must pass. Keep PRs focused and small.
- Quality gates: `npm run lint`, `npm run typecheck`, and relevant tests must pass. Keep PRs focused and small.
## Security & Configuration Tips
- Secrets: Use `.env` (see `.env_example`); do not commit secrets.

24
CLAUDE.md
View File

@@ -12,18 +12,18 @@ This bootstraps the monorepo with dependencies, builds, tests, and dev server ve
## Quick Commands
- `pnpm`: See all available commands
- `pnpm dev`: Start development server (port 5173, via nx)
- `pnpm typecheck`: Type checking
- `pnpm build`: Build for production (via nx)
- `pnpm lint`: Linting (via nx)
- `pnpm format`: Prettier formatting
- `pnpm test:component`: Run component tests with browser environment
- `pnpm test:unit`: Run all unit tests
- `pnpm test:browser`: Run E2E tests via Playwright
- `pnpm test:unit -- tests-ui/tests/example.test.ts`: Run single test file
- `pnpm storybook`: Start Storybook development server (port 6006)
- `pnpm knip`: Detect unused code and dependencies
- `npm run`: See all available commands
- `npm run dev`: Start development server (port 5173, via nx)
- `npm run typecheck`: Type checking
- `npm run build`: Build for production (via nx)
- `npm run lint`: Linting (via nx)
- `npm run format`: Prettier formatting
- `npm run test:component`: Run component tests with browser environment
- `npm run test:unit`: Run all unit tests
- `npm run test:browser`: Run E2E tests via Playwright
- `npm run test:unit -- tests-ui/tests/example.test.ts`: Run single test file
- `npm run storybook`: Start Storybook development server (port 6006)
- `npm run knip`: Detect unused code and dependencies
## Monorepo Architecture

30
CONTRIBUTING.md
View File

@@ -17,7 +17,7 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
### Prerequisites & Technology Stack
- **Required Software**:
- Node.js (v16 or later; v24 strongly recommended) and pnpm
- Node.js (v16 or later; v24 strongly recommended) and npm
- Git for version control
- A running ComfyUI backend instance
@@ -39,7 +39,7 @@ Have another idea? Drop into Discord or open an issue, and let's chat!
2. Install dependencies:
```bash
pnpm install
npm install
```
3. Configure environment (optional):
@@ -57,13 +57,13 @@ python main.py --port 8188
### Git pre-commit hooks
Run `pnpm prepare` to install Git pre-commit hooks. Currently, the pre-commit hook is used to auto-format code on commit.
Run `npm run prepare` to install Git pre-commit hooks. Currently, the pre-commit hook is used to auto-format code on commit.
### Dev Server
- Start local ComfyUI backend at `localhost:8188`
- Run `pnpm dev` to start the dev server
- Run `pnpm dev:electron` to start the dev server with electron API mocked
- Run `npm run dev` to start the dev server
- Run `npm run dev:electron` to start the dev server with electron API mocked
#### Access dev server on touch devices
@@ -155,7 +155,7 @@ For ComfyUI_frontend development, you can ask coding assistants to use Playwrigh
##### Setup for Claude Code
After installing dependencies with `pnpm i`, the Playwright MCP server will be automatically available when you start Claude Code locally.
After installing dependencies with `npm install`, the Playwright MCP server will be automatically available when you start Claude Code locally.
Here's how Claude Code can use the Playwright MCP server to inspect the interface of the local development server (assuming you're running the dev server at `localhost:5173`):
@@ -210,14 +210,14 @@ Here's how Claude Code can use the Playwright MCP server to inspect the interfac
### Unit Tests
- `pnpm i` to install all dependencies
- `pnpm test:unit` to execute all unit tests
- `npm install` to install all dependencies
- `npm run test:unit` to execute all unit tests
### Component Tests
Component tests verify Vue components in `src/components/`.
- `pnpm test:component` to execute all component tests
- `npm run test:component` to execute all component tests
### Playwright Tests
@@ -228,12 +228,12 @@ Playwright tests verify the whole app. See [browser_tests/README.md](browser_tes
Before submitting a PR, ensure all tests pass:
```bash
pnpm test:unit
pnpm test:component
pnpm test:browser
pnpm typecheck
pnpm lint
pnpm format
npm run test:unit
npm run test:component
npm run test:browser
npm run typecheck
npm run lint
npm run format
```
## Code Style Guidelines

3
docs/adr/0002-monorepo-conversion.md
View File

@@ -19,14 +19,13 @@ For more information on Monorepos, check out [monorepo.tools](https://monorepo.t
## Decision
- Swap out NPM for PNPM
- Add a workspace for the PrimeVue fork
- Move the frontend code into its own app workspace
- Longer term: Extract and reorganize common infrastructure to take advantage of the new monorepo tooling
### Tools proposed
[PNPM](https://pnpm.io/) and [PNPM workspaces](https://pnpm.io/workspaces)
[npm workspaces](https://docs.npmjs.com/cli/v8/using-npm/workspaces)
For monorepo management, I'd probably go with [Nx](https://nx.dev/), but I could be conviced otherwise.
There's a [whole list here](https://monorepo.tools/#tools-review) if you're interested.

2
docs/extensions/development.md
View File

@@ -105,7 +105,7 @@ The alternative would have been breaking all existing extensions or staying with
Build the frontend for full functionality:
```bash
pnpm build
npm run build
```
For faster iteration during development, use watch mode:

22697
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@@ -7,10 +7,14 @@
"homepage": "https://comfy.org",
"description": "Official front-end implementation of ComfyUI",
"license": "GPL-3.0-only",
"workspaces": [
"apps/**",
"packages/**"
],
"scripts": {
"dev": "nx serve",
"dev:electron": "nx serve --config vite.electron.config.mts",
"build": "pnpm typecheck && nx build",
"build": "npm run typecheck && nx build",
"build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",
"zipdist": "node scripts/zipdist.js",
"typecheck": "vue-tsc --noEmit",
@@ -21,7 +25,6 @@
"test:browser": "npx nx e2e",
"test:unit": "nx run test tests-ui/tests",
"test:component": "nx run test src/components/",
"preinstall": "npx only-allow pnpm",
"prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
"preview": "nx preview",
"lint": "eslint src --cache",

14239
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

16
pnpm-workspace.yaml
View File

@@ -1,16 +0,0 @@
packages:
- apps/**
- packages/**
ignoredBuiltDependencies:
- '@firebase/util'
- protobufjs
- vue-demi
onlyBuiltDependencies:
- '@playwright/browser-chromium'
- '@playwright/browser-firefox'
- '@playwright/browser-webkit'
- esbuild
- nx
- oxc-resolver

6
src/lib/litegraph/CLAUDE.md
View File

@@ -9,9 +9,9 @@
# Bash commands
- `pnpm typecheck` Run the typechecker
- `pnpm build` Build the project
- `pnpm lint:fix` Run ESLint
- `npm run typecheck` Run the typechecker
- `npm run build` Build the project
- `npm run lint:fix` Run ESLint
# Code style

2
src/lib/litegraph/README.md
View File

@@ -152,7 +152,7 @@ Use GitHub actions to release normal versions.
### Pre-release
The action directly translates `Version increment type` to the pnpm version command. `Pre-release ID (suffix)` is the option for the `--preid` argument.
The action directly translates `Version increment type` to the npm version command. `Pre-release ID (suffix)` is the option for the `--preid` argument.
e.g. Use `prerelease` increment type to automatically bump the patch version and create a pre-release version. Subsequent runs of prerelease will update the prerelease version only.
Use `patch` when ready to remove the pre-release suffix.

6
src/locales/CONTRIBUTING.md
View File

@@ -79,7 +79,7 @@ const messages = {
#### Option A: Local Generation (Optional)
```bash
# Only if you have OpenAI API key configured
pnpm locale
npm run locale
```
#### Option B: Let CI Handle It (Recommended)
@@ -91,8 +91,8 @@ pnpm locale
### Step 3: Test Your Changes
```bash
pnpm typecheck # Check for TypeScript errors
pnpm dev # Start development server
npm run typecheck # Check for TypeScript errors
npm run dev # Start development server
```
**Testing checklist:**

6
tests-ui/README.md
View File

@@ -33,13 +33,13 @@ To run the tests locally:
```bash
# Run unit tests
pnpm test:unit
npm run test:unit
# Run unit tests in watch mode
pnpm test:unit:dev
npm run test:unit:dev
# Run component tests with browser-native environment
pnpm test:component
npm run test:component
```
Refer to the specific guides for more detailed information on each testing type.

6
tests-ui/tests/litegraph/README.md
View File

@@ -18,13 +18,13 @@ litegraph/
```bash
# Run all litegraph tests
pnpm test:unit -- tests-ui/tests/litegraph/
npm run test:unit -- tests-ui/tests/litegraph/
# Run specific subdirectory
pnpm test:unit -- tests-ui/tests/litegraph/core/
npm run test:unit -- tests-ui/tests/litegraph/core/
# Run single test file
pnpm test:unit -- tests-ui/tests/litegraph/core/LGraph.test.ts
npm run test:unit -- tests-ui/tests/litegraph/core/LGraph.test.ts
```
## Migration Status