From dfca9e8cc49f1c83f1e26d5113b5d9a47f6feffd Mon Sep 17 00:00:00 2001 From: Krisjanis Seglins Date: Mon, 11 Nov 2024 18:47:25 +0200 Subject: [PATCH 1/5] Allow dynamically import atmosphere.js for SW context Fixes #2867 --- packages/ts/frontend/src/FluxConnection.ts | 26 ++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/ts/frontend/src/FluxConnection.ts b/packages/ts/frontend/src/FluxConnection.ts index 562f5594a..7c38011f5 100644 --- a/packages/ts/frontend/src/FluxConnection.ts +++ b/packages/ts/frontend/src/FluxConnection.ts @@ -1,5 +1,7 @@ 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 { @@ -9,6 +11,8 @@ import { type ServerMessage, } from './FluxMessages.js'; +let atmosphere: Atmosphere.Atmosphere; + export enum State { ACTIVE = 'active', INACTIVE = 'inactive', @@ -71,6 +75,14 @@ type EndpointInfo = { reconnect?(): ActionOnLostSubscription | void; }; +interface ImportMetaEnv { + readonly SW_CONTEXT: boolean; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} + /** * A representation of the underlying persistent network connection used for subscribing to Flux type endpoint methods. */ @@ -89,7 +101,17 @@ export class FluxConnection extends EventTarget { constructor(connectPrefix: string, atmosphereOptions?: Partial) { super(); - this.#connectWebsocket(connectPrefix.replace(/connect$/u, ''), atmosphereOptions ?? {}); + // @ts-expect-error - vite environment variable + const meta: ImportMeta = import.meta; + if (!meta.env.SW_CONTEXT) { + (async () => { + atmosphere = await import('atmosphere.js'); + this.#connectWebsocket(connectPrefix.replace(/connect$/u, ''), atmosphereOptions ?? {}); + })().catch((e) => { + // eslint-disable-next-line no-console + console.error('Failed to load atmosphere.js', e); + }); + } } #resubscribeIfWasClosed() { From 784cefe2694d0112d5e4ba3c32d0328422544bf7 Mon Sep 17 00:00:00 2001 From: Krisjanis Seglins Date: Wed, 13 Nov 2024 09:55:06 +0200 Subject: [PATCH 2/5] Fix dynamic import of atmosphere Fixes #2867 --- packages/ts/frontend/src/FluxConnection.ts | 30 ++++++++-------------- packages/ts/frontend/src/vite-env.d.ts | 11 ++++++++ 2 files changed, 21 insertions(+), 20 deletions(-) create mode 100644 packages/ts/frontend/src/vite-env.d.ts diff --git a/packages/ts/frontend/src/FluxConnection.ts b/packages/ts/frontend/src/FluxConnection.ts index 7c38011f5..fa214fad3 100644 --- a/packages/ts/frontend/src/FluxConnection.ts +++ b/packages/ts/frontend/src/FluxConnection.ts @@ -1,7 +1,5 @@ import type { ReactiveControllerHost } from '@lit/reactive-element'; - import type Atmosphere from 'atmosphere.js'; - import type { Subscription } from './Connect.js'; import { getCsrfTokenHeadersForEndpointRequest } from './CsrfUtils.js'; import { @@ -75,14 +73,6 @@ type EndpointInfo = { reconnect?(): ActionOnLostSubscription | void; }; -interface ImportMetaEnv { - readonly SW_CONTEXT: boolean; -} - -interface ImportMeta { - readonly env: ImportMetaEnv; -} - /** * A representation of the underlying persistent network connection used for subscribing to Flux type endpoint methods. */ @@ -101,16 +91,16 @@ export class FluxConnection extends EventTarget { constructor(connectPrefix: string, atmosphereOptions?: Partial) { super(); - // @ts-expect-error - vite environment variable - const meta: ImportMeta = import.meta; - if (!meta.env.SW_CONTEXT) { - (async () => { - atmosphere = await import('atmosphere.js'); - this.#connectWebsocket(connectPrefix.replace(/connect$/u, ''), atmosphereOptions ?? {}); - })().catch((e) => { - // eslint-disable-next-line no-console - console.error('Failed to load atmosphere.js', e); - }); + if (!import.meta.env['VITE_SW_CONTEXT']) { + import('atmosphere.js') + .then((module) => { + atmosphere = module.default; + this.#connectWebsocket(connectPrefix.replace(/connect$/u, ''), atmosphereOptions ?? {}); + }) + .catch((error) => { + // eslint-disable-next-line no-console + console.error('Failed to load atmosphere', error); + }); } } 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..0384aa0af --- /dev/null +++ b/packages/ts/frontend/src/vite-env.d.ts @@ -0,0 +1,11 @@ +// / + +interface ImportMetaEnv { + readonly VITE_SW_CONTEXT: boolean; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} + +export {}; From 62fa60858b2728c25d0f8a88dc77af2594d582f5 Mon Sep 17 00:00:00 2001 From: Krisjanis Seglins Date: Wed, 13 Nov 2024 10:29:03 +0200 Subject: [PATCH 3/5] Fix dynamic import of atmosphere Fixes #2867 --- packages/ts/frontend/src/vite-env.d.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/ts/frontend/src/vite-env.d.ts b/packages/ts/frontend/src/vite-env.d.ts index 0384aa0af..b703640eb 100644 --- a/packages/ts/frontend/src/vite-env.d.ts +++ b/packages/ts/frontend/src/vite-env.d.ts @@ -1,5 +1,6 @@ // / +// eslint-disable-next-line import/unambiguous interface ImportMetaEnv { readonly VITE_SW_CONTEXT: boolean; } @@ -7,5 +8,3 @@ interface ImportMetaEnv { interface ImportMeta { readonly env: ImportMetaEnv; } - -export {}; From 33b8cc7ffb156b5f032fef84586f8e62e8bdcd73 Mon Sep 17 00:00:00 2001 From: Krisjanis Seglins Date: Wed, 13 Nov 2024 16:02:50 +0200 Subject: [PATCH 4/5] Fix dynamic import of atmosphere Fixes #2867 --- packages/ts/frontend/src/FluxConnection.ts | 25 ++++++++++------------ packages/ts/frontend/src/vite-env.d.ts | 2 +- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/packages/ts/frontend/src/FluxConnection.ts b/packages/ts/frontend/src/FluxConnection.ts index fa214fad3..b7a266ba9 100644 --- a/packages/ts/frontend/src/FluxConnection.ts +++ b/packages/ts/frontend/src/FluxConnection.ts @@ -9,8 +9,6 @@ import { type ServerMessage, } from './FluxMessages.js'; -let atmosphere: Atmosphere.Atmosphere; - export enum State { ACTIVE = 'active', INACTIVE = 'inactive', @@ -73,6 +71,15 @@ type EndpointInfo = { reconnect?(): ActionOnLostSubscription | void; }; +const initAtmosphere = async () => { + if (!import.meta.env.VITE_SW_CONTEXT) { + return await import('atmosphere.js').then((module) => module.default); + } + return undefined; +}; + +const atmosphere: Atmosphere.Atmosphere | undefined = await initAtmosphere(); + /** * A representation of the underlying persistent network connection used for subscribing to Flux type endpoint methods. */ @@ -91,17 +98,7 @@ export class FluxConnection extends EventTarget { constructor(connectPrefix: string, atmosphereOptions?: Partial) { super(); - if (!import.meta.env['VITE_SW_CONTEXT']) { - import('atmosphere.js') - .then((module) => { - atmosphere = module.default; - this.#connectWebsocket(connectPrefix.replace(/connect$/u, ''), atmosphereOptions ?? {}); - }) - .catch((error) => { - // eslint-disable-next-line no-console - console.error('Failed to load atmosphere', error); - }); - } + this.#connectWebsocket(connectPrefix.replace(/connect$/u, ''), atmosphereOptions ?? {}); } #resubscribeIfWasClosed() { @@ -198,7 +195,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 index b703640eb..075fff046 100644 --- a/packages/ts/frontend/src/vite-env.d.ts +++ b/packages/ts/frontend/src/vite-env.d.ts @@ -2,7 +2,7 @@ // eslint-disable-next-line import/unambiguous interface ImportMetaEnv { - readonly VITE_SW_CONTEXT: boolean; + readonly VITE_SW_CONTEXT?: boolean; } interface ImportMeta { From 3ba43b08d2dab6df9a78ed1db7811233cac366df Mon Sep 17 00:00:00 2001 From: Krisjanis Seglins Date: Wed, 13 Nov 2024 16:30:44 +0200 Subject: [PATCH 5/5] Fix dynamic import of atmosphere as top level await not allowed Env should be optional for other frameworks Fixes #2867 --- packages/ts/frontend/src/FluxConnection.ts | 15 ++++++++------- packages/ts/frontend/src/vite-env.d.ts | 2 +- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/ts/frontend/src/FluxConnection.ts b/packages/ts/frontend/src/FluxConnection.ts index b7a266ba9..19d14bd24 100644 --- a/packages/ts/frontend/src/FluxConnection.ts +++ b/packages/ts/frontend/src/FluxConnection.ts @@ -71,14 +71,15 @@ type EndpointInfo = { reconnect?(): ActionOnLostSubscription | void; }; -const initAtmosphere = async () => { - if (!import.meta.env.VITE_SW_CONTEXT) { - return await import('atmosphere.js').then((module) => module.default); - } - return undefined; -}; +let atmosphere: Atmosphere.Atmosphere | undefined; -const atmosphere: Atmosphere.Atmosphere | undefined = await initAtmosphere(); +(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. diff --git a/packages/ts/frontend/src/vite-env.d.ts b/packages/ts/frontend/src/vite-env.d.ts index 075fff046..91164dbca 100644 --- a/packages/ts/frontend/src/vite-env.d.ts +++ b/packages/ts/frontend/src/vite-env.d.ts @@ -6,5 +6,5 @@ interface ImportMetaEnv { } interface ImportMeta { - readonly env: ImportMetaEnv; + readonly env?: ImportMetaEnv; }