fix: make client-side endpoints compile in service worker context

Depends on: vaadin/flow#21298
Connected to: #2791

Author: platosha

packages/ts/frontend/src/Connect.ts

@@ -1,5 +1,5 @@
 import type { ReactiveControllerHost } from '@lit/reactive-element';
-import { ConnectionIndicator, ConnectionState } from '@vaadin/common-frontend';
+import type * as CommonFrontendModule from '@vaadin/common-frontend';
 import { getCsrfTokenHeadersForEndpointRequest } from './CsrfUtils.js';
 import {
   EndpointError,
@@ -16,6 +16,11 @@ import {
 } from './FluxConnection.js';
 import type { VaadinGlobal } from './types.js';
 
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+const commonFrontendModule: Partial<typeof CommonFrontendModule> = globalThis.document
+  ? await import('@vaadin/common-frontend')
+  : {};
+
 const $wnd = globalThis as VaadinGlobal;
 
 $wnd.Vaadin ??= {};
@@ -291,21 +296,24 @@ export class ConnectClient {
       this.atmosphereOptions = options.atmosphereOptions;
     }
 
-    // add connection indicator to DOM
-    ConnectionIndicator.create();
-
-    // Listen to browser online/offline events and update the loading indicator accordingly.
-    // Note: if Flow.ts is loaded, it instead handles the state transitions.
-    addEventListener('online', () => {
-      if (!isFlowLoaded() && $wnd.Vaadin?.connectionState) {
-        $wnd.Vaadin.connectionState.state = ConnectionState.CONNECTED;
-      }
-    });
-    addEventListener('offline', () => {
-      if (!isFlowLoaded() && $wnd.Vaadin?.connectionState) {
-        $wnd.Vaadin.connectionState.state = ConnectionState.CONNECTION_LOST;
-      }
-    });
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (globalThis.document) {
+      // add connection indicator to DOM
+      commonFrontendModule.ConnectionIndicator?.create();
+
+      // Listen to browser online/offline events and update the loading indicator accordingly.
+      // Note: if Flow.ts is loaded, it instead handles the state transitions.
+      addEventListener('online', () => {
+        if (!isFlowLoaded() && $wnd.Vaadin?.connectionState && commonFrontendModule.ConnectionState) {
+          $wnd.Vaadin.connectionState.state = commonFrontendModule.ConnectionState.CONNECTED;
+        }
+      });
+      addEventListener('offline', () => {
+        if (!isFlowLoaded() && $wnd.Vaadin?.connectionState && commonFrontendModule.ConnectionState) {
+          $wnd.Vaadin.connectionState.state = commonFrontendModule.ConnectionState.CONNECTION_LOST;
+        }
+      });
+    }
   }
 
   /**

packages/ts/frontend/src/CookieManager.ts

@@ -6,7 +6,7 @@ export function calculatePath({ pathname }: URL): string {
 
 const CookieManager: typeof Cookies = Cookies.withAttributes({
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  path: calculatePath(new URL(globalThis.document?.baseURI ?? '/')),
+  path: calculatePath(new URL(globalThis.document?.baseURI ?? globalThis.location?.href ?? 'data:')),
 });
 
 export default CookieManager;

scripts/register.js

@@ -3,7 +3,7 @@ import type { PackageJson } from 'type-fest';
 export default function injectRegister(contents: string, { name, version }: PackageJson): string {
   return contents.replaceAll(
     /__REGISTER__/gu,
-    `((feature, vaadinObj = (window.Vaadin ??= {})) => {
+    `((feature, vaadinObj = (globalThis.Vaadin ??= {})) => {
   vaadinObj.registrations ??= [];
   vaadinObj.registrations.push({
     is: feature ? \`${name}/\${feature}\` : '${name}',