Commit Graph

76 Commits

Author SHA1 Message Date
Christian Byrne
7ad1112535 add telemetry provider for cloud distribution (#6154)
## Summary

This code is entirely excluded from open-source, local, and desktop
builds. During minification and dead-code elimination, the Mixpanel
library is fully tree-shaken -- meaning no telemetry code is ever
included or downloaded in those builds. Even the inline callsites are
removed during the build (because `isCloud` becomes false and the entire
block becomes dead code and is removed). The code not only has no
effect, is not even distributed in the first place. We’ve gone to great
lengths to ensure this behavior.

Verification proof:


https://github.com/user-attachments/assets/b66c35f7-e233-447f-93da-4d70c433908d

Telemetry is *enabled only in the ComfyUI Cloud environment*. Its goal
is to help us understand and improve onboarding and new-user adoption.
ComfyUI aims to be accessible to everyone, but we know the learning
curve can be steep. Anonymous usage insights will help us identify where
users struggle and guide us toward making the experience more intuitive
and welcoming.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6154-add-telemetry-provider-for-cloud-distribution-2926d73d3650813cb9ccfb3a2733848b)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-10-19 19:47:35 -07:00
Christian Byrne
1f5191847a make "require subscription" toggleable in build (#6144)
## Summary

Adds build time feature flags system starting with a flag that indicates
whether subscription is required to use the app. This is only used on
cloud.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6144-make-require-subscription-toggleable-in-build-2916d73d3650813bb140c5e96bcce1ce)
by [Unito](https://www.unito.io)
2025-10-19 10:30:14 -07:00
Christian Byrne
5b5151f41f [perf] manually chunk vendored code (#6137)
## Summary

Added a `manualChunks` strategy in `vite.config.mts` that splits
primevue, tiptap, chart.js, three/@xterm, core Vue/Pinia, and the
remaining dependencies into dedicated vendor bundles. This reduces the
main application chunk size and allows browsers to cache heavy
third-party code across releases, improving load times when those
libraries stay unchanged.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6137-perf-manually-chunk-vendored-code-2916d73d36508140a44ec0de228ef9cc)
by [Unito](https://www.unito.io)
2025-10-18 22:49:11 -07:00
Christian Byrne
2018f1e671 [ci] drop console statements (except warn and error) when building app (#6123)
## Summary

Marks all the console methods besides `warn` and `error` as pure
functions so they can be dropped during DCE in build pipeline. It's
simpler to use `drop` but that would remove errors/warnings.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6123-ci-drop-console-statements-except-warn-and-error-when-building-app-2906d73d365081f28303c0d784352b12)
by [Unito](https://www.unito.io)
2025-10-18 22:43:38 -07:00
Christian Byrne
0ff1837ced [ci] allow setting GENERATE_SOURCEMAP as env var (#6134)
## Summary

Introduces a `GENERATE_SOURCEMAP` environment flag in `vite.config.mts`
that defaults to enabled (`true` unless set to `'false'`). This keeps
source maps on by default, while allowing opt-out for lean production
artifacts.

Allows the choice to be made as part of the distribution pipeline and
changed for different targets.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6134-ci-allow-setting-GENERATE_SOURCEMAP-as-env-var-2916d73d3650815d91b9eff12b6e55fd)
by [Unito](https://www.unito.io)
2025-10-18 20:23:27 -07:00
Rizumu Ayaka
64430708ea perf: tree shaking and minify (#6068)
## Summary

I believe tree-shaking does not affect [the
shim](https://github.com/Comfy-Org/ComfyUI_frontend/blob/rizumu/perf/cloud-minify/build/plugins/comfyAPIPlugin.ts#L73),
and it should safe to enable it.

maybe we need to find the extension that will broke in this case.


|   | Rendered | Gzip     | Brotli  |
|--------|-----------|----------|----------|
| Before | 16.69 MB  | 4.23 MB | 3.54 MB |
| After  | 12.07 MB  | 3 MB   | 2.53 MB |
2025-10-16 18:44:04 -07:00
Rizumu Ayaka
97417736be chore: rollup-plugin-visualizer (#6072)
## Summary

Using this tool, will generates dist/stats.html after build, we can see
the parts that are excessively large when packaged.

```bash
pnpm run build:analyze
```

<img width="2486" height="1780" alt="CleanShot 2025-10-15 at 17 25
17@2x"
src="https://github.com/user-attachments/assets/fd3ff5c9-2e7a-44a0-8b9f-4d87664c848c"
/>


┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6072-chore-rollup-plugin-visualizer-28d6d73d36508184800cf7a67141b782)
by [Unito](https://www.unito.io)
2025-10-15 11:39:12 -07:00
Christian Byrne
9c245e9c23 Add distribution detection pattern (#6028)
## Summary

Establishes distribution-specific code pattern using compile-time
constants and dead code elimination. Demonstrates with Help Center by
hiding extension manager and update buttons in cloud distribution.

Below commentary makes assumption that minifcation and tree-shaking is
enabled (which isn't true yet, but will be eventually).

## Changes

- **What**: Added `src/platform/distribution/types.ts` with distribution
detection via `__DISTRIBUTION__` variable
- **Build**: Vite replaces `__DISTRIBUTION__` at build time using
environment variables
- **Tree-shaking**: All code not relevant to target distribution is
DCR'd and eliminated from bundle
- **Example**: Help Center hides "Manager Extension" menu item and
"Update" buttons in cloud builds

## Pattern

This PR defines a `__DISTRIBUTION__` variable which gets replaced at
build time by Vite using environment variables. All code not relevant to
the given distribution is then DCR'd and tree-shaken.

For simple cases (like this Help Center PR), import `isCloud` and use
compile-time conditionals:

```typescript
import { isCloud } from '@/platform/distribution/types'

if (!isCloud) {
  items.push({
    key: 'manager',
    action: async () => {
      await useManagerState().openManager({ ... })
    }
  })
}
```

The code is DCR'd at build time so there's zero runtime overhead - we
don't even incur the `if (isCloud)` cost because Terser eliminates it.

For complex services later, we'll add interfaces and use an index.ts
that exports different implementations under the same alias per
distribution. It will resemble a DI container but simpler since we don't
need runtime discovery like backend devs do. This guarantees types and
makes testing easier.

Example for services:
```typescript
// src/platform/storage/index.ts
import { isCloud } from '@/platform/distribution/types'

if (isCloud) {
  export { CloudStorage as StorageService } from './cloud'
} else {
  export { LocalStorage as StorageService } from './local'
}
```

Example for component variants:
```typescript
// src/components/downloads/index.ts
import { isCloud } from '@/platform/distribution/types'

if (isCloud) {
  export { default as DownloadButton } from './DownloadButton.cloud.vue'
} else {
  export { default as DownloadButton } from './DownloadButton.desktop.vue'
}
```

## Implementation Details

Distribution types (`src/platform/distribution/types.ts`):
```typescript
type Distribution = 'desktop' | 'localhost' | 'cloud'

declare global {
  const __DISTRIBUTION__: Distribution
}

const DISTRIBUTION: Distribution = __DISTRIBUTION__
export const isCloud = DISTRIBUTION === 'cloud'
```

Vite configuration adds the define:
```typescript
const DISTRIBUTION = (process.env.DISTRIBUTION || 'localhost') as
  | 'desktop'
  | 'localhost'
  | 'cloud'

export default defineConfig({
  define: {
    __DISTRIBUTION__: JSON.stringify(DISTRIBUTION)
  }
})
```

## Build Commands

```bash
pnpm build                      # localhost (default)
DISTRIBUTION=cloud pnpm build   # cloud
DISTRIBUTION=desktop pnpm build # desktop
```

## Future Applications

This pattern can be used with auth or telemetry services - which will
guarantee all the telemetry code, for example, is not even in the code
distributed in OSS Comfy whatsoever while still being able to develop
off `main`.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6028-Add-distribution-detection-pattern-28a6d73d365081b08767d395472cd1bc)
by [Unito](https://www.unito.io)
2025-10-11 23:10:15 -07:00
Alexander Brown
21873d40d5 Devex: Improve dev server (#6002)
## Summary

Keep Vite from watching extra files, should cut down on the amount of
times it tries to reload and hopefully fix a file contention issue with
git.
https://vite.dev/config/server-options.html#server-watch

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6002-Devex-Improve-dev-server-2876d73d365081a09417c2bf17da659f)
by [Unito](https://www.unito.io)
2025-10-09 15:07:02 -07:00
Alexander Brown
b943c0fa75 Lint: Add tailwind linter (#5984)
## Summary

Adds the [tailwind lint
plugin](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#eslint-plugin-tailwindcss)
and fixes the currently fixable rules ([v4 is still in
beta](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#about-tailwind-css-4-support)).

## Changes

- **What**: Enforces things like consistent class order, and eventually
can prohibit extra classes that could be utilities instead
- **Dependencies**: The plugin and its types

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5984-Lint-Add-tailwind-linter-2866d73d365081d89db0d998232533bb)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
2025-10-08 19:39:14 -07:00
filtered
022cf6dd8e Restrict Vite entry point to index.html (#5934)
## Summary

Restricts Vite's dependency optimization scanning entry points to the
root `index.html`, preventing excessive error messages from scanning
unintended files in other packages.

## Changes

- **What**: Adds `entries: ['index.html']` to `optimizeDeps` in
vite.config.mts
- **Breaking**: None

## Review Focus

May require additional entries or inversion - exclude-based approach
instead of include-based - if possible.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5934-Restrict-Vite-entry-point-to-index-html-2846d73d3650816fbf45fa29493891ae)
by [Unito](https://www.unito.io)
2025-10-06 12:04:00 -07:00
filtered
ed5d258ab6 Extract shared utilities into workspace package (#5843)
## Summary

Extracts shared formatting and network utilities into dedicated
workspace package.

## Changes

- **What**: Created `@comfyorg/shared-frontend-utils` package containing
formatUtil and networkUtil
- **Breaking**: None - utilities remain accessible via path aliases in
`tsconfig`

Split `createAnnotatedPath` and `electronMirrorCheck` out and left in
frontend, due to their tightly-coupled nature. See [discussion on this
PR](https://github.com/Comfy-Org/ComfyUI_frontend/pull/5843#issuecomment-3344724727).
2025-09-29 18:52:40 -07:00
filtered
9f19d8fb4b Migrate Tailwind styles to design-system package (#5794)
## Summary

Consolidates Tailwind configuration and styles into a shared
`@comfyorg/design-system` package for reuse across monorepo apps.

The goal was not to make changes to how the design system works; merely
to separate it cleanly. I _would_ strongly recommend some drastic
sweeping changes, however I believe that should be done after the
migration.

## Changes

- **What**: Migrates CSS files, Tailwind config, and custom icons to
design-system package
- **Dependencies**: Moves `@iconify-json/lucide` and `@iconify/tailwind`
to design-system package
2025-09-26 12:01:53 -07:00
Alexander Brown
8133bd4b7b Refactor: Composable disentangling (#5695)
## Summary

Prerequisite refactor/cleanup to use a global store instead of having
nodes throw up events to a parent component that stores a reference to a
singleton service that itself bootstraps and synchronizes with a
separate service to maintain a partially reactive but not fully reactive
set of states that describe some but not all aspects of the nodes on
either the litegraph, the vue side, or both.

## Changes

- **What**: Refactoring, the behavior should not change.
- **Dependencies**: A type utility to help with Vue component props

## Review Focus

Is there something about the current structure that this could affect
that would not be caught by our tests or using the application?

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5695-Refactor-Composable-disentangling-2746d73d365081e6938ce656932f3e36)
by [Unito](https://www.unito.io)
2025-09-20 13:06:42 -07:00
Alexander Brown
1845708ddb Component: Vue Widget Slider (new) (#5516)
* feat: Initial shadcn configuration

* component: Add Slider component from shadcn-vue

* deps: Add tw-animate-css

* component: Align slider with Figma styles

* component: Set the step value for the slider, update styles

* fix: update component tests to work with Array of values

* vite: Don't reload dev server for test changes

* component: Swap text for a number input kept in sync with the slider

* cleanup: Don't need the override if the input isn't type="number"

* test: add step size tests

* cleanup: Don't need cn for these

* css: Update token names to match new Figma Variables

* lint: Fix camelCase vs train-case in passthrough

* feat: If the value is deleted, revert to the slider state cc: @PabloWiedemann

* feat: Improve cursor styles, grabbable thumb, clickable track

* lint: temporarily disable some warnings

* feat: Grabbing while sliding (most of the time)
2025-09-12 18:52:18 -07:00
Alexander Brown
85017dbba0 Upgrade: Tailwind v4 (#5246)
* temp: move tailwind calls out of the layer

* temp: ts tailwind config

* upgrade: Tailwind v4
This got a little out of hand.
Had to add a relative reference to the stylesheet in any component that uses @apply instead of the utility classes directly.

* upgrade: bg-opacity is now a modifier

* fix: Classic menu buttons assume a border

* Update test expectations [skip ci]

* fix: New preflight removal pattern

* fix: Skeletons don't have skin

* Update test expectations [skip ci]

* fix: Missing @reference

* [auto-fix] Apply ESLint and Prettier fixes

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: GitHub Action <action@github.com>
2025-09-03 12:37:43 -07:00
Alexander Brown
8eef1b727e devex: Ignore playwright-report and coverage in the vite dev server (#5258) 2025-08-29 16:28:12 -07:00
Alexander Brown
73f7e1108a Cleanup: Potpourri PR of small changes that reduce the warning noise (#5128)
* fix: [@vue/compiler-sfc] defineModel is a compiler macro and no longer needs to be imported.

* fix: Duplicate name conflict/warning from unplugin-vue-components

* fix: enforce correct line endings for the commonjs and esm variants via git
2025-08-25 12:03:01 -07:00
Benjamin Lu
1d815b3075 [config] Remove @comfyorg/litegraph from vite exclude list
Since litegraph is now integrated as a git subtree rather than an
external npm dependency, it no longer needs to be excluded from
Vite's dependency optimization.
2025-08-03 15:35:24 -04:00
Christian Byrne
516eb26d3e [feat] Add custom icon system with workflow icon (#4590) 2025-07-30 01:27:15 -07:00
Terry Jia
ee5088551e Vue expose (#4265) 2025-07-03 21:35:24 -07:00
filtered
587d7a19a1 [TS] Improve various types / remove assertions (#4148) 2025-06-13 01:46:50 -07:00
filtered
3ac8aa248c Revert "Export vue new (#3966)" (#4050) 2025-06-02 09:57:47 +10:00
Benjamin Lu
40cfc43c54 Add Help Menu in NodeLibrarySidebarTab (#3922)
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Claude <noreply@anthropic.com>
2025-06-01 23:24:31 +10:00
Terry Jia
674d04c9cf Export vue new (#3966)
Co-authored-by: hayden <48267247+hayden-fr@users.noreply.github.com>
2025-05-23 18:24:33 -07:00
filtered
47a6c6d595 [Dev] Allow Vue dev tools to be disabled (#3911) 2025-05-16 21:59:23 -04:00
Yoland Yan
d4e76ddc45 Add vite-plugin-html and vite-plugin-vue-devtools (#3903) 2025-05-15 14:51:39 -04:00
Christian Byrne
f52915a590 Allow disabling proxy of /template path via env (#3773) 2025-05-05 17:48:11 -07:00
Terry Jia
ba3b1bae87 add List view for workflow tempalte (#3710)
Co-authored-by: Chenlei Hu <hcl@comfy.org>
Co-authored-by: github-actions <github-actions@github.com>
2025-05-02 17:50:53 -04:00
Terry Jia
b314435f81 add importmap for vue-i18n (#3595) 2025-04-23 22:34:19 -04:00
Christian Byrne
3bd508c001 Use generalized prod config var (#3574) 2025-04-22 22:26:31 -04:00
Chenlei Hu
0006dd3855 [Refactor] Split custom vite plugins to files under build/plugins (#3531) 2025-04-20 14:07:45 -04:00
Terry Jia
7355209c12 build vue and primevue separately and generate importmap (#3473)
Co-authored-by: Chenlei Hu <hcl@comfy.org>
2025-04-20 13:43:22 -04:00
Christian Byrne
8d4263c94e Use dev firebase and switch to prod in release workflow (#3499) 2025-04-18 17:23:10 -04:00
Christian Byrne
4d35d937cf [Manager] Fix build env vars (#3238) 2025-03-26 11:03:03 -04:00
Christian Byrne
05dd587928 [Manager] Add Algolia search (#3036) 2025-03-13 18:24:38 -07:00
bymyself
c50a86b258 [CI] Fix vite config condition (#2235) 2025-01-12 16:09:46 -05:00
bymyself
9d3bc0f173 Add optional report feature to error dialog (#2229)
Co-authored-by: github-actions <github-actions@github.com>
2025-01-12 13:23:02 -05:00
Chenlei Hu
d8f074fea0 [Lint] Sort imports (#2104) 2024-12-30 17:26:37 -05:00
Chenlei Hu
e88817ea36 Lint/format vite.config.mts (#2103) 2024-12-30 16:48:57 -05:00
Zoltán Dócs
5218024395 Show workflow templates from custom nodes (#2032) 2024-12-29 22:26:03 -05:00
Chenlei Hu
5d178a407d [chore] Update comfyui-electron-types (#1625)
* Remove electron external dep

* [chore] Update comfyui-electron-types
2024-11-21 00:07:50 -05:00
oto-ciulis-tt
94f5031f0d feat: Update Electron Download types (#1621)
* feat: Update Electron Download types

* Fix vite rollup

---------

Co-authored-by: Oto Ciulis <oto.ciulis@gmail.com>
Co-authored-by: huchenlei <huchenlei@proton.me>
2024-11-20 20:34:27 -05:00
filtered
6aad7ee8b6 Allow remote dev to be switched on/off (#1558)
* Allow remote dev to be switched on/off

* nit - Docs
2024-11-15 19:26:41 -05:00
Chenlei Hu
acba6097e0 Replace electron API mocks with actual electron API impl (#1535)
* link electron types locally

* Update electronAPI calls

* Fix source validation

* Payload to raw

* nit

* Update electron types
2024-11-13 17:20:18 -05:00
Chenlei Hu
095fe2a175 Allow access of dev server in LAN for touch device testing (#1528) 2024-11-13 10:34:36 -05:00
Alex "mcmonkey" Goodwin
7b344d5629 Fix routing (#939)
* reinstate working routing code and remove broken code

* forward object_info

* remove object_info bit
2024-09-25 16:01:50 +09:00
ArtificialLab
9c7ea5bd87 Fix routing (#929)
* fix router and move graph related parts to GraphView.vue

* (fix) add back child element in UnloadWindowConfirmDialog

* (cleanup) remove empty callback

* (fix) routing issue when base url is not webroot

* add back DEV_SERVER_COMFYUI_URL
2024-09-25 16:01:50 +09:00
Chenlei Hu
65560604a8 Revert "test to validate subrouting (#927)" (#936)
This reverts commit 6a3dbe08de.
2024-09-23 14:30:17 +09:00
Alex "mcmonkey" Goodwin
6a3dbe08de test to validate subrouting (#927)
* test to validate subrouting

* Update test expectations [skip ci]

* core tests need to prep the page

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-09-23 09:24:49 +09:00