mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-01 19:20:10 +00:00
fix(collect-i18n-node-defs): refactor to run ComfyNodeDefImpl only in browser context (#5775)
## The Problem
The `collect-i18n-node-defs.ts` script started failing ~3 weeks ago when
Vue nodes were introduced ([commit
006e6bd57](https://github.com/Comfy-Org/ComfyUI_frontend/commit/006e6bd57),
[PR #4263](https://github.com/Comfy-Org/ComfyUI_frontend/pull/4263)).
The issue stems from:
1. **Import chain bringing Vue components into Node.js context:**
```
collect-i18n-node-defs.ts
↓ imports
ComfyNodeDefImpl (from nodeDefStore.ts)
↓ imports
useSubgraphStore (from subgraphStore.ts)
↓ transitively imports
executionStore.ts
↓ imports
ChatHistoryWidget.vue (Vue component!)
```
2. **TypeScript `declare` fields causing Babel errors:**
```
TypeScript 'declare' fields must first be transformed by
@babel/plugin-transform-typescript
```
## This Solution vs PR #5515
### PR #5515 Approach (Complex)
- Adds custom Babel plugins and configurations
- Implements automatic browser globals injection
- Requires **47,517 additions, 9,469 deletions**
- Modifies the entire Playwright babel transformation pipeline
### This PR's Approach (Simple)
- Uses dynamic imports to defer module loading until runtime
- Avoids Babel compilation of problematic TypeScript/Vue files
- **Only 40 lines changed** in a single file
- No configuration changes needed
## How This Fix Works
```typescript
// Instead of static import that Babel tries to compile:
// import { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
// We use:
// 1. Type-only import (erased at runtime)
import type { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
// 2. Dynamic import at runtime (bypasses Babel)
const { ComfyNodeDefImpl: ComfyNodeDefImplClass } = await import(
'../src/stores/nodeDefStore'
)
```
---------
Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
@@ -7,6 +7,7 @@ export default defineConfig({
|
|||||||
headless: true
|
headless: true
|
||||||
},
|
},
|
||||||
reporter: 'list',
|
reporter: 'list',
|
||||||
|
workers: 1,
|
||||||
timeout: 60000,
|
timeout: 60000,
|
||||||
testMatch: /collect-i18n-.*\.ts/
|
testMatch: /collect-i18n-.*\.ts/
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
import * as fs from 'fs'
|
import * as fs from 'fs'
|
||||||
|
|
||||||
|
import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
|
||||||
|
|
||||||
import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
|
import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
|
||||||
import type { ComfyNodeDef } from '../src/schemas/nodeDefSchema'
|
import type { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
|
||||||
import type { ComfyApi } from '../src/scripts/api'
|
|
||||||
import { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
|
|
||||||
import { normalizeI18nKey } from '../src/utils/formatUtil'
|
import { normalizeI18nKey } from '../src/utils/formatUtil'
|
||||||
|
|
||||||
const localePath = './src/locales/en/main.json'
|
const localePath = './src/locales/en/main.json'
|
||||||
@@ -26,18 +26,23 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
const nodeDefs: ComfyNodeDefImpl[] = (
|
// Note: Don't mock the object_info API endpoint - let it hit the actual backend
|
||||||
Object.values(
|
|
||||||
await comfyPage.page.evaluate(async () => {
|
const nodeDefs: ComfyNodeDefImpl[] = await comfyPage.page.evaluate(
|
||||||
// @ts-expect-error - app is dynamically added to window
|
async () => {
|
||||||
const api = window['app'].api as ComfyApi
|
// @ts-expect-error - app is dynamically added to window
|
||||||
return await api.getNodeDefs()
|
const api = window['app'].api
|
||||||
})
|
const rawNodeDefs = await api.getNodeDefs()
|
||||||
) as ComfyNodeDef[]
|
const { ComfyNodeDefImpl } = await import('../src/stores/nodeDefStore')
|
||||||
|
|
||||||
|
return (
|
||||||
|
Object.values(rawNodeDefs)
|
||||||
|
// Ignore DevTools nodes (used for internal testing)
|
||||||
|
.filter((def: ComfyNodeDef) => !def.name.startsWith('DevTools'))
|
||||||
|
.map((def: ComfyNodeDef) => new ComfyNodeDefImpl(def))
|
||||||
|
)
|
||||||
|
}
|
||||||
)
|
)
|
||||||
// Ignore DevTools nodes (used for internal testing)
|
|
||||||
.filter((def) => !def.name.startsWith('DevTools'))
|
|
||||||
.map((def) => new ComfyNodeDefImpl(def))
|
|
||||||
|
|
||||||
console.log(`Collected ${nodeDefs.length} node definitions`)
|
console.log(`Collected ${nodeDefs.length} node definitions`)
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user