diff --git a/packages/ts/frontend/src/FluxConnection.ts b/packages/ts/frontend/src/FluxConnection.ts index 562f5594a..19d14bd24 100644 --- a/packages/ts/frontend/src/FluxConnection.ts +++ b/packages/ts/frontend/src/FluxConnection.ts @@ -1,5 +1,5 @@ import type { ReactiveControllerHost } from '@lit/reactive-element'; -import atmosphere from 'atmosphere.js'; +import type Atmosphere from 'atmosphere.js'; import type { Subscription } from './Connect.js'; import { getCsrfTokenHeadersForEndpointRequest } from './CsrfUtils.js'; import { @@ -71,6 +71,16 @@ type EndpointInfo = { reconnect?(): ActionOnLostSubscription | void; }; +let atmosphere: Atmosphere.Atmosphere | undefined; + +(async () => { + if (!import.meta.env?.VITE_SW_CONTEXT) { + atmosphere = await import('atmosphere.js').then((module) => module.default); + } +})().catch((e) => { + console.error('Failed to load atmosphere.js', e); +}); + /** * A representation of the underlying persistent network connection used for subscribing to Flux type endpoint methods. */ @@ -186,7 +196,7 @@ export class FluxConnection extends EventTarget { const extraHeaders = self.document ? getCsrfTokenHeadersForEndpointRequest(self.document) : {}; const pushUrl = 'HILLA/push'; const url = prefix.length === 0 ? pushUrl : (prefix.endsWith('/') ? prefix : `${prefix}/`) + pushUrl; - this.#socket = atmosphere.subscribe?.({ + this.#socket = atmosphere?.subscribe?.({ contentType: 'application/json; charset=UTF-8', enableProtocol: true, transport: 'websocket', diff --git a/packages/ts/frontend/src/vite-env.d.ts b/packages/ts/frontend/src/vite-env.d.ts new file mode 100644 index 000000000..91164dbca --- /dev/null +++ b/packages/ts/frontend/src/vite-env.d.ts @@ -0,0 +1,10 @@ +// / + +// eslint-disable-next-line import/unambiguous +interface ImportMetaEnv { + readonly VITE_SW_CONTEXT?: boolean; +} + +interface ImportMeta { + readonly env?: ImportMetaEnv; +}