fix: change window and document DOM access to self checks for SW cont…

…ext (#2900) * Change window and document DOM access to self checks for SW context Fixes #2867 * refactor(ts): use globalThis instead of self * fix(frontend): replace more self with globalThis --------- Co-authored-by: Vlad Rindevich <[email protected]>
vaadin · Nov 25, 2024 · c2ff61b · c2ff61b
1 parent 02ae959
commit c2ff61b
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 9 deletions.
diff --git a/packages/ts/frontend/src/Connect.ts b/packages/ts/frontend/src/Connect.ts
@@ -14,9 +14,9 @@ import {
   FluxConnection,
   type FluxSubscriptionStateChangeEvent,
 } from './FluxConnection.js';
-import type { VaadinWindow } from './types.js';
+import type { VaadinGlobal } from './types.js';
 
-const $wnd = window as VaadinWindow;
+const $wnd = globalThis as VaadinGlobal;
 
 $wnd.Vaadin ??= {};
 $wnd.Vaadin.registrations ??= [];
@@ -300,7 +300,8 @@ export class ConnectClient {
       throw new TypeError(`2 arguments required, but got only ${arguments.length}`);
     }
 
-    const csrfHeaders = getCsrfTokenHeadersForEndpointRequest(document);
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const csrfHeaders = globalThis.document ? getCsrfTokenHeadersForEndpointRequest(globalThis.document) : {};
     const headers: Record<string, string> = {
       Accept: 'application/json',
       'Content-Type': 'application/json',

diff --git a/packages/ts/frontend/src/CookieManager.ts b/packages/ts/frontend/src/CookieManager.ts
@@ -5,7 +5,8 @@ export function calculatePath({ pathname }: URL): string {
 }
 
 const CookieManager: Cookies.CookiesStatic = Cookies.withAttributes({
-  path: calculatePath(new URL(document.baseURI)),
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  path: calculatePath(new URL(globalThis.document?.baseURI ?? '/')),
 });
 
 export default CookieManager;
diff --git a/packages/ts/frontend/src/FluxConnection.ts b/packages/ts/frontend/src/FluxConnection.ts
@@ -182,7 +182,8 @@ export class FluxConnection extends EventTarget {
   }
 
   #connectWebsocket(prefix: string, atmosphereOptions: Partial<Atmosphere.Request>) {
-    const extraHeaders = getCsrfTokenHeadersForEndpointRequest(document);
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const extraHeaders = globalThis.document ? getCsrfTokenHeadersForEndpointRequest(globalThis.document) : {};
     const pushUrl = 'HILLA/push';
     const url = prefix.length === 0 ? pushUrl : (prefix.endsWith('/') ? prefix : `${prefix}/`) + pushUrl;
     this.#socket = atmosphere.subscribe?.({

diff --git a/packages/ts/frontend/src/types.d.ts b/packages/ts/frontend/src/types.d.ts
@@ -16,6 +16,6 @@ export interface Vaadin {
   registrations?: VaadinRegistration[];
 }
 
-export interface VaadinWindow extends Window {
+export interface VaadinGlobal {
   Vaadin?: Vaadin;
 }
diff --git a/packages/ts/frontend/test/Connect.test.ts b/packages/ts/frontend/test/Connect.test.ts
@@ -18,7 +18,7 @@ import {
   UnauthorizedResponseError,
   type FluxConnection,
 } from '../src/index.js';
-import type { Vaadin, VaadinWindow } from '../src/types.js';
+import type { Vaadin, VaadinGlobal } from '../src/types.js';
 import { subscribeStub } from './mocks/atmosphere.js';
 import { fluxConnectionSubscriptionStubs } from './mocks/FluxConnection.js';
 import {

diff --git a/packages/ts/react-i18n/src/index.ts b/packages/ts/react-i18n/src/index.ts
@@ -4,6 +4,14 @@ import { FormatCache } from './FormatCache.js';
 import { getLanguageSettings, updateLanguageSettings } from './settings.js';
 import type { I18nOptions, Translations, TranslationsResult } from './types.js';
 
+interface VaadinGlobal {
+  Vaadin?: {
+    featureFlags?: {
+      hillaI18n?: boolean;
+    };
+  };
+}
+
 function determineInitialLanguage(options?: I18nOptions): string {
   // Use explicitly configured language if defined
   if (options?.language) {
@@ -31,7 +39,7 @@ export class I18n {
 
   constructor() {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    if (!(window as any).Vaadin?.featureFlags?.hillaI18n) {
+    if (!(globalThis as VaadinGlobal).Vaadin?.featureFlags?.hillaI18n) {
       // Remove when removing feature flag
       throw new Error(
         `The Hilla I18n API is currently considered experimental and may change in the future. To use it you need to explicitly enable it in Copilot or by adding com.vaadin.experimental.hillaI18n=true to vaadin-featureflags.properties`,

diff --git a/packages/ts/react-signals/src/FullStackSignal.ts b/packages/ts/react-signals/src/FullStackSignal.ts
@@ -3,6 +3,14 @@ import { nanoid } from 'nanoid';
 import { computed, signal, Signal } from './core.js';
 import { createSetStateEvent, type StateEvent } from './events.js';
 
+interface VaadinGlobal {
+  Vaadin?: {
+    featureFlags?: {
+      fullstackSignals?: boolean;
+    };
+  };
+}
+
 const ENDPOINT = 'SignalsHandler';
 
 /**
@@ -28,7 +36,7 @@ export abstract class DependencyTrackingSignal<T> extends Signal<T> {
 
   protected constructor(value: T | undefined, onFirstSubscribe: () => void, onLastUnsubscribe: () => void) {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    if (!(window as any).Vaadin?.featureFlags?.fullstackSignals) {
+    if (!(globalThis as VaadinGlobal).Vaadin?.featureFlags?.fullstackSignals) {
       // Remove when removing feature flag
       throw new Error(
         `The Hilla Fullstack Signals API is currently considered experimental and may change in the future. To use it you need to explicitly enable it in Copilot or by adding com.vaadin.experimental.fullstackSignals=true to vaadin-featureflags.properties`,