Comfy-Org / Comfy-Org/ComfyUI_frontend

[RFC] Migrate `src/scripts/` into the layered architecture

Open
#11,019 0 comments 0 reactions 0 assignees View on GitHub
developer experience refactor
Dominant language
TypeScript
Stars
2k
Forks
702
Avg merge
1d 8h
Merged PRs (30d)
512

Description

## Problem

`src/scripts/` contains 5,513 lines across 6 key files (`app.ts`, `api.ts`, `ui.ts`, `domWidget.ts`, `changeTracker.ts`, `widgets.ts`) that don't fit into the `base → platform → workbench → renderer` hierarchy. `scripts/` imports from stores (5 files), platform (10 files), services (2), composables (4), and renderer (3). It is both a foundation AND a consumer of every other layer — the most-imported module in the codebase.

## Proposed Deepening

Incrementally migrate `scripts/` capabilities into the layered architecture:

| File | Target layer | Rationale |
|------|-------------|-----------|
| `api.ts` | `base/api/` or `platform/api/` | Network layer is foundational |
| `app.ts` | `workbench/` | Orchestrates setup, a workbench concern |
| `ui.ts` | Deprecate | Vue components in `components/` replace remaining usages |
| `domWidget.ts` | `renderer/` | Rendering concern |
| `widgets.ts` | `renderer/` | Rendering concern |
| `changeTracker.ts` | `platform/workflow/` | Workflow change tracking |

## Migration Plan

1. This is a long-term effort that depends on Issues #1 and #2 (ComfyApp/ComfyApi extraction)
2. Move one file at a time with re-exports from the old path for backward compatibility
3. Deprecate the old import paths
4. Remove re-exports once all consumers have migrated

## Testing Strategy

- Backward-compatible re-exports ensure nothing breaks during migration
- `pnpm typecheck` and all tests pass after each move

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-11019-RFC-Migrate-src-scripts-into-the-layered-architecture-33e6d73d3650813c95ade519cffc3965) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Research direction

Start by reading the six key files in src/scripts/—app.ts, api.ts, ui.ts, domWidget.ts, changeTracker.ts, and widgets.ts—and review dependencies on Issues #1 and #2. For any incremental move, preserve old-path re-exports, run pnpm typecheck and all tests, and consider it done only when consumers are migrated without breakage.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
developer-experience, frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.