Add distribution detection pattern

[christian-byrne]

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:

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:

// 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:

// 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):

type Distribution = 'desktop' | 'localhost' | 'cloud'

declare global {
  const __DISTRIBUTION__: Distribution
}

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

Vite configuration adds the define:

const DISTRIBUTION = (process.env.DISTRIBUTION || 'localhost') as
  | 'desktop'
  | 'localhost'
  | 'cloud'

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

Build Commands

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 by Unito

[github-actions]

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 10/12/2025, 04:12:27 AM UTC

🔗 Links

• 📊 View Workflow Run
• 🎨 View Storybook

---

🎉 Your Storybook is ready for review!

[github-actions]

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 10/12/2025, 04:27:10 AM UTC

📈 Summary

• Total Tests: 497
• Passed: 465 ✅
• Failed: 0
• Flaky: 2 ⚠️
• Skipped: 30 ⏭️

📊 Test Reports by Browser

• ✅ chromium: View Report • ✅ 456 / ❌ 0 / ⚠️ 2 / ⏭️ 30
• ✅ chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
• ✅ chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
• ✅ mobile-chrome: View Report • ✅ 6 / ❌ 0 / ⚠️ 0 / ⏭️ 0

---

🎉 Click on the links above to view detailed test results for each browser configuration.

[christian-byrne]

Merging now so others can use - please still leave any review if you have it and I'll address in followups.