techdocs: switch to xhr-based event source polyfill

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/techdocs/src/client.test.ts

@@ -18,13 +18,14 @@ import { Config } from '@backstage/config';
 import { UrlPatternDiscovery } from '@backstage/core-app-api';
 import { IdentityApi } from '@backstage/core-plugin-api';
 import { NotFoundError } from '@backstage/errors';
-import EventSource from 'eventsource';
+import { EventSourcePolyfill } from 'event-source-polyfill';
 import { TechDocsStorageClient } from './client';
 
-const MockedEventSource: jest.MockedClass<typeof EventSource> =
-  EventSource as any;
+const MockedEventSource = EventSourcePolyfill as jest.MockedClass<
+  typeof EventSourcePolyfill
+>;
 
-jest.mock('eventsource');
+jest.mock('event-source-polyfill');
 
 const mockEntity = {
   kind: 'Component',
@@ -82,7 +83,7 @@ describe('TechDocsStorageClient', () => {
 
       MockedEventSource.prototype.addEventListener.mockImplementation(
         (type, fn) => {
-          if (type === 'finish') {
+          if (type === 'finish' && typeof fn === 'function') {
             fn({ data: '{"updated": false}' } as any);
           }
         },
@@ -106,7 +107,7 @@ describe('TechDocsStorageClient', () => {
 
       MockedEventSource.prototype.addEventListener.mockImplementation(
         (type, fn) => {
-          if (type === 'finish') {
+          if (type === 'finish' && typeof fn === 'function') {
             fn({ data: '{"updated": false}' } as any);
           }
         },
@@ -132,7 +133,7 @@ describe('TechDocsStorageClient', () => {
 
       MockedEventSource.prototype.addEventListener.mockImplementation(
         (type, fn) => {
-          if (type === 'finish') {
+          if (type === 'finish' && typeof fn === 'function') {
             fn({ data: '{"updated": false}' } as any);
           }
         },
@@ -153,7 +154,7 @@ describe('TechDocsStorageClient', () => {
 
       MockedEventSource.prototype.addEventListener.mockImplementation(
         (type, fn) => {
-          if (type === 'finish') {
+          if (type === 'finish' && typeof fn === 'function') {
             fn({ data: '{"updated": true}' } as any);
           }
         },
@@ -174,11 +175,11 @@ describe('TechDocsStorageClient', () => {
 
       MockedEventSource.prototype.addEventListener.mockImplementation(
         (type, fn) => {
-          if (type === 'log') {
+          if (type === 'log' && typeof fn === 'function') {
             fn({ data: '"A log message"' } as any);
           }
 
-          if (type === 'finish') {
+          if (type === 'finish' && typeof fn === 'function') {
             fn({ data: '{"updated": false}' } as any);
           }
         },
@@ -210,7 +211,7 @@ describe('TechDocsStorageClient', () => {
       const instance = MockedEventSource.mock
         .instances[0] as jest.Mocked<EventSource>;
 
-      instance.onerror({
+      instance.onerror?.({
         status: 404,
         message: 'Some not found warning',
       } as any);
@@ -236,7 +237,7 @@ describe('TechDocsStorageClient', () => {
       const instance = MockedEventSource.mock
         .instances[0] as jest.Mocked<EventSource>;
 
-      instance.onerror({
+      instance.onerror?.({
         type: 'error',
         data: 'Some other error',
       } as any);

plugins/techdocs/src/client.ts

@@ -18,7 +18,7 @@ import { EntityName } from '@backstage/catalog-model';
 import { Config } from '@backstage/config';
 import { DiscoveryApi, IdentityApi } from '@backstage/core-plugin-api';
 import { NotFoundError, ResponseError } from '@backstage/errors';
-import EventSource from 'eventsource';
+import { EventSourcePolyfill } from 'event-source-polyfill';
 import { SyncResult, TechDocsApi, TechDocsStorageApi } from './api';
 import { TechDocsEntityMetadata, TechDocsMetadata } from './types';
 
@@ -214,7 +214,8 @@ export class TechDocsStorageClient implements TechDocsStorageApi {
     const token = await this.identityApi.getIdToken();
 
     return new Promise((resolve, reject) => {
-      const source = new EventSource(url, {
+      // Polyfill is used to add support for custom headers and auth
+      const source = new EventSourcePolyfill(url, {
         withCredentials: true,
         headers: token ? { Authorization: `Bearer ${token}` } : {},
       });

plugins/techdocs/src/event-source-polyfill.d.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare module 'event-source-polyfill' {
+  export class EventSourcePolyfill extends EventSource {
+    constructor(
+      url: string,
+      options?: {
+        withCredentials?: boolean;
+        headers?: HeadersInit;
+      },
+    );
+  }
+}