Comfy-Org / Comfy-Org/ComfyUI_frontend
refactor: decouple ComfyApi from localStorage / use dependency injection for remoteOrigin
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## Background
During review of PR #11118 (Cloudflare Pages preview + ConnectionPanel), a concern was raised about the `remoteOrigin` field added to `ComfyApi` in `src/scripts/api.ts`.
**Comment thread:** https://github.com/Comfy-Org/ComfyUI_frontend/pull/11118#discussion_r3068917320
**Requested by:** @christian-byrne
## Problem
`ComfyApi` is a module-level singleton. The newly added `remoteOrigin` field is initialized in the constructor by reading directly from `localStorage`:
```ts
const remoteBackend = localStorage.getItem('comfyui-preview-backend-url')
if (remoteBackend) {
const url = new URL(remoteBackend)
this.remoteOrigin = url.origin
this.api_host = url.host
this.api_base = url.pathname.replace(/\/+$/, '')
}
```
This coupling introduces the following issues:
- **Testability**: Tests cannot provide alternate configurations in parallel; each test that exercises a different backend URL must manipulate `localStorage` and re-instantiate or mutate the singleton.
- **SSR / HMR safety**: Module-scoped singleton state that reads from browser globals (`localStorage`) at construction time is fragile under hot-module replacement and server-side rendering.
- **Composition principle**: The API class reaches into browser storage rather than accepting its configuration from the outside.
## Proposed Solution
- Extract the remote-origin configuration into a separate injectable/configurable service, or accept it as a constructor parameter (with a sensible default that reads `localStorage`).
- Consider dependency injection so that tests can provide a mock storage backend.
- Align with the pattern already recommended for singleton composables (prefer `createSharedComposable` or explicit DI over module-scoped mutable state).
## Acceptance Criteria
- [ ] `ComfyApi` does not read `localStorage` directly in its constructor.
- [ ] The remote-origin value can be injected or overridden without manipulating global browser storage.
- [ ] Existing unit tests continue to pass; new tests can configure `remoteOrigin` without side-effects on other tests.
- [ ] No regression in the ConnectionPanel / preview deployment flow.
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-11536-refactor-decouple-ComfyApi-from-localStorage-use-dependency-injection-for-remoteOr-34a6d73d365081e6812ecaab40ecdf7d) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.